/* ============================================================ ADFLOW BRAND LAYER — "Adaptive Current" v1.1 Monochrome first. Signal second. Two themes, switched by . The html[data-theme] selectors outrank the :root blocks in custom.css and futuristic.css, so every token below wins no matter which file loads first. Token families --gold* the app's accent. Kept under its old name so every existing page picks it up. Now Signal Red. --fx-cyan* "signal" accent. Now Electric Blue. --fx-violet* secondary accent (Nova). Now Soft Mint. --*-rgb bare "r, g, b" triplets for rgba(var(--x-rgb), a) --tint-rgb a wash that reads on the current background (ivory on dark, ink on light) ============================================================ */ /* ------------------------------------------------------------ Brand constants (identical in both themes) ------------------------------------------------------------ */ :root { --adflow-deep-black: #0A0E13; --adflow-warm-ivory: #F4F1EB; --adflow-signal-red: #FF4B2E; --adflow-electric-blue: #09B7FF; --adflow-soft-mint: #B7F0E2; --adflow-surface: #111820; --adflow-mist: #98A1A8; --adflow-signal-gradient: linear-gradient(110deg, #FF4B2E 0%, #F4F1EB 50%, #09B7FF 100%); } /* ------------------------------------------------------------ DARK (default) ------------------------------------------------------------ */ html[data-theme="dark"], html:not([data-theme]) { color-scheme: dark; /* Backgrounds */ --bg-primary: #0A0E13; --bg-primary-rgb: 10, 14, 19; --bg-secondary: #0E141A; --bg-secondary-rgb: 14, 20, 26; --bg-tertiary: #111820; --bg-card: #111820; --bg-card-rgb: 17, 24, 32; --bg-card-hover: #17212B; --bg-input: #0E141A; --bg-overlay: rgba(0, 0, 0, 0.65); /* Accent (Signal Red) */ --gold: #FF4B2E; --gold-rgb: 255, 75, 46; --gold-hover: #E8401F; --gold-champagne: #FF9A85; --gold-bronze: #B8321C; --gold-tint: rgba(255, 75, 46, 0.10); --gold-glow: rgba(255, 75, 46, 0.25); --border-gold: rgba(255, 75, 46, 0.35); --shadow-gold: 0 0 20px rgba(255, 75, 46, 0.15); /* Text */ --text-primary: #F4F1EB; --text-primary-rgb: 244, 241, 235; --text-secondary: #C9CDD1; --text-muted: #C9CDD1; --text-subtle: #98A1A8; --text-tertiary: #98A1A8; --text-inverse: #0A0E13; /* Borders */ --border: #25303B; --border-light: #1A232C; --input-border-hover: #3A4652; /* Washes */ --tint-rgb: 244, 241, 235; /* Buttons */ --btn-secondary-bg: #1E1512; --btn-secondary-bg-hover: #2A1B16; /* Status */ --success: #34D399; --success-rgb: 52, 211, 153; --success-strong: #10B981; --success-bg: rgba(52, 211, 153, 0.10); --warning: #FBBF24; --warning-rgb: 251, 191, 36; --warning-bg: rgba(251, 191, 36, 0.10); --danger: #FB7185; --danger-rgb: 251, 113, 133; --danger-strong: #F43F5E; --danger-bg: rgba(251, 113, 133, 0.10); --info: #60A5FA; --info-rgb: 96, 165, 250; /* Shadows */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.35); --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.45); /* Futuristic surfaces */ --fx-bg-0: #0A0E13; --fx-bg-1: #0E141A; --fx-bg-2: #111820; --fx-bg-2-rgb: 17, 24, 32; --fx-glass: rgba(17, 24, 32, 0.72); --fx-glass-rgb: 17, 24, 32; --fx-glass-2: rgba(23, 33, 43, 0.60); --fx-glass-2-rgb: 23, 33, 43; /* Signal (Electric Blue) */ --fx-cyan: #09B7FF; --fx-cyan-rgb: 9, 183, 255; --fx-cyan-soft: #6FD0FF; --fx-cyan-soft-rgb: 111, 208, 255; --fx-cyan-glow: rgba(9, 183, 255, 0.40); /* Secondary (Soft Mint) */ --fx-violet: #B7F0E2; --fx-violet-rgb: 183, 240, 226; --fx-violet-deep: #2BB596; --fx-violet-deep-rgb: 43, 181, 150; --fx-violet-soft: #D9F8F0; --fx-violet-glow: rgba(183, 240, 226, 0.40); --fx-magenta: #FF9A85; --fx-green: #34D399; --fx-green-rgb: 52, 211, 153; --fx-red: #FB7185; --fx-red-rgb: 251, 113, 133; --fx-red-soft: #FDA4AF; --fx-amber: #FBBF24; --fx-amber-rgb: 251, 191, 36; --fx-text: #F4F1EB; --fx-text-rgb: 244, 241, 235; --fx-text-mute: #98A1A8; --fx-text-dim: #6B757E; --fx-line: rgba(244, 241, 235, 0.10); --fx-line-soft: rgba(244, 241, 235, 0.05); /* Card shadows */ --fx-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); --fx-card-shadow-hover: 0 14px 36px rgba(0, 0, 0, 0.6); /* Brand logo swap */ --logo-on-dark-display: block; --logo-on-light-display: none; } /* ------------------------------------------------------------ LIGHT Signal Red is deepened a step for text and fills on ivory so words stay readable (4.5:1+). The pure Signal Red stays in the logo and the brand constants above. ------------------------------------------------------------ */ html[data-theme="light"] { color-scheme: light; /* Backgrounds */ --bg-primary: #F4F1EB; --bg-primary-rgb: 244, 241, 235; --bg-secondary: #ECE8E0; --bg-secondary-rgb: 236, 232, 224; --bg-tertiary: #E6E1D7; --bg-card: #FFFFFF; --bg-card-rgb: 255, 255, 255; --bg-card-hover: #F8F5EF; --bg-input: #FFFFFF; --bg-overlay: rgba(10, 14, 19, 0.45); /* Accent (Signal Red, text-safe) */ --gold: #C4321A; --gold-rgb: 196, 50, 26; --gold-hover: #A92B16; --gold-champagne: #B03A22; --gold-bronze: #8A2312; --gold-tint: rgba(255, 75, 46, 0.10); --gold-glow: rgba(255, 75, 46, 0.22); --border-gold: rgba(196, 50, 26, 0.35); --shadow-gold: 0 0 20px rgba(255, 75, 46, 0.12); /* Text */ --text-primary: #0A0E13; --text-primary-rgb: 10, 14, 19; --text-secondary: #3D4852; --text-muted: #3D4852; --text-subtle: #5C6670; --text-tertiary: #5C6670; --text-inverse: #FFFFFF; /* Borders */ --border: #D8D2C6; --border-light: #E5E0D6; --input-border-hover: #B9B2A5; /* Washes */ --tint-rgb: 10, 14, 19; /* Buttons */ --btn-secondary-bg: #FBE9E4; --btn-secondary-bg-hover: #F7DAD2; /* Status */ --success: #15803D; --success-rgb: 21, 128, 61; --success-strong: #166534; --success-bg: rgba(21, 128, 61, 0.10); --warning: #B45309; --warning-rgb: 180, 83, 9; --warning-bg: rgba(180, 83, 9, 0.10); --danger: #BE123C; --danger-rgb: 190, 18, 60; --danger-strong: #9F1239; --danger-bg: rgba(190, 18, 60, 0.08); --info: #1D4ED8; --info-rgb: 29, 78, 216; /* Shadows */ --shadow-sm: 0 1px 3px rgba(10, 14, 19, 0.06); --shadow-md: 0 4px 16px rgba(10, 14, 19, 0.08); --shadow-lg: 0 12px 40px rgba(10, 14, 19, 0.12); /* Futuristic surfaces */ --fx-bg-0: #F4F1EB; --fx-bg-1: #ECE8E0; --fx-bg-2: #E4DED3; --fx-bg-2-rgb: 228, 222, 211; --fx-glass: rgba(255, 255, 255, 0.72); --fx-glass-rgb: 255, 255, 255; --fx-glass-2: rgba(255, 255, 255, 0.55); --fx-glass-2-rgb: 255, 255, 255; /* Signal (Electric Blue, text-safe) */ --fx-cyan: #006BA6; --fx-cyan-rgb: 0, 107, 166; --fx-cyan-soft: #0A86C2; --fx-cyan-soft-rgb: 10, 134, 194; --fx-cyan-glow: rgba(9, 183, 255, 0.25); /* Secondary (Mint, text-safe) */ --fx-violet: #177563; --fx-violet-rgb: 23, 117, 99; --fx-violet-deep: #0F5E4F; --fx-violet-deep-rgb: 15, 94, 79; --fx-violet-soft: #1B8A74; --fx-violet-glow: rgba(43, 181, 150, 0.25); --fx-magenta: #C4321A; --fx-green: #15803D; --fx-green-rgb: 21, 128, 61; --fx-red: #BE123C; --fx-red-rgb: 190, 18, 60; --fx-red-soft: #9F1239; --fx-amber: #B45309; --fx-amber-rgb: 180, 83, 9; --fx-text: #0A0E13; --fx-text-rgb: 10, 14, 19; --fx-text-mute: #4A5560; --fx-text-dim: #69727B; --fx-line: rgba(10, 14, 19, 0.10); --fx-line-soft: rgba(10, 14, 19, 0.05); /* Card shadows */ --fx-card-shadow: 0 1px 3px rgba(10, 14, 19, 0.06), 0 8px 24px rgba(10, 14, 19, 0.06); --fx-card-shadow-hover: 0 2px 6px rgba(10, 14, 19, 0.08), 0 14px 32px rgba(10, 14, 19, 0.10); /* Brand logo swap */ --logo-on-dark-display: none; --logo-on-light-display: block; } /* ------------------------------------------------------------ Typography — Instrument Sans (display + body), IBM Plex Mono (data, labels, IDs). Mono is never body copy. ------------------------------------------------------------ */ html[data-theme] { --font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace; --fx-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace; } /* ------------------------------------------------------------ Brand logo Use both images side by side; the theme shows the right one. ------------------------------------------------------------ */ .brand-logo { height: 26px; width: auto; max-width: 100%; } .brand-logo--on-dark { display: var(--logo-on-dark-display, block); } .brand-logo--on-light { display: var(--logo-on-light-display, none); } .brand-symbol { height: 26px; width: 26px; } .sidebar-brand .brand-logo { height: 24px; } .sidebar.collapsed .sidebar-brand { justify-content: center; } /* ------------------------------------------------------------ Buttons — pill shape, as on tryadflow.co ------------------------------------------------------------ */ html[data-theme] .btn { border-radius: var(--radius-full); } /* ------------------------------------------------------------ Theme switch ------------------------------------------------------------ */ .theme-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: inherit; color: var(--text-muted); background: transparent; border: 1px solid transparent; } .theme-toggle:hover { color: var(--text-primary); } .theme-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .theme-toggle .theme-icon { width: 20px; height: 20px; flex-shrink: 0; } /* In dark mode the switch offers light (sun); in light mode it offers dark (moon). */ html[data-theme="light"] .theme-toggle .when-dark, html:not([data-theme="light"]) .theme-toggle .when-light { display: none; } /* Header variant: round icon button at the right of every admin page title */ .theme-toggle-header { width: 38px; height: 38px; justify-content: center; flex-shrink: 0; border-radius: 999px; background: var(--bg-card); border-color: var(--border); } .theme-toggle-header:hover { border-color: var(--border-gold); } /* Floating variant for pages without the admin layout (login, Academy, Community). Bottom-left: top-right would cover those pages' nav buttons, and bottom-right belongs to the Nova voice button. */ .theme-toggle-floating { position: fixed; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 16px; z-index: 450; width: 40px; height: 40px; justify-content: center; border-radius: 999px; background: var(--bg-card); border-color: var(--border); box-shadow: var(--shadow-sm); } .theme-toggle-floating .theme-label { display: none; } /* Lesson player: sit above its fixed bottom bar, right of its sidebar */ body:has(.ac-footbar) .theme-toggle-floating { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); left: 336px; } @media (max-width: 900px) { body:has(.ac-footbar) .theme-toggle-floating { left: 16px; } } /* Smooth colour change while switching (added for a moment by the switch) */ html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease, fill 250ms ease, stroke 250ms ease !important; } /* ------------------------------------------------------------ Light-theme touch-ups for shared components ------------------------------------------------------------ */ html[data-theme="light"] .sidebar, html[data-theme="light"] .sidebar-mobile-header { background: var(--bg-card); border-color: var(--border); } html[data-theme="light"] .card, html[data-theme="light"] .login-card { box-shadow: var(--shadow-sm); } html[data-theme="light"] .mobile-tabbar { background: rgba(255, 255, 255, 0.92) !important; border-top-color: var(--border) !important; } /* Futuristic backdrop: no starfield on ivory */ html[data-theme="light"] .grid-bg::after { opacity: 0; } /* Neon text glows smear on a light background */ html[data-theme="light"] body * { text-shadow: none !important; } /* Alpine: hide x-cloak elements until Alpine starts */ [x-cloak] { display: none !important; } /* Screen-reader-only text (kept here too in case the Tailwind CDN is slow or blocked) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Sidebar footer: stack its items (credits, Logout) instead of a single row, which pushed Logout past the sidebar's edge where it could not be seen. */ .sidebar .sidebar-footer { flex-direction: column; align-items: stretch; gap: 2px; padding: 8px 0; } .sidebar .sidebar-footer .sidebar-branding { margin-bottom: 0; }