/** * ============================================================================ * TEJAS PRAVAH — design tokens + band system * ============================================================================ * Loaded BEFORE app.css. Nothing here draws anything; it only declares the * variables every component reads. * * THE BAND SYSTEM * --------------- * The page alternates light and dark horizontal bands so it reads with * rhythm instead of one flat tone: * * hero .band-dark obsidian, glow, grain * ecosystem .band-light off-white, white cards, real shadows * metrics .band-dark deep band, glowing numerals * approach .band-light * clients .band-light-soft a half-step greyer, so it separates * cta .band-dark * footer .band-dark * * Because every component reads semantic tokens (--bg, --text, --card ...) * rather than literal colours, putting a band class on a section re-themes * everything inside it. No component needs to know which band it is in. * * The theme toggle then means "dim the whole page": data-theme="dark" forces * the light bands to adopt the dark token set (block 4 below). * ============================================================================ */ /* --------------------------------------------------------------------------- Brand ramps + scale — identical in every band --------------------------------------------------------------------------- */ :root { /* --------------------------------------------------------------------- Palette sampled from the Tejas Pravah logo: an infinity ribbon whose left lobe is azure blue, right lobe solar gold, with a navy TP monogram. Those three ARE the brand — nothing else is invented. Channel triplets so any colour composites at any alpha without color-mix(), which keeps older engines from dropping a declaration. --------------------------------------------------------------------- */ --brand-rgb: 20 121 208; /* Azure — the logo's blue lobe */ --accent-rgb: 245 166 35; /* Gold — the logo's right lobe */ --navy-rgb: 27 42 94; /* Navy — the TP monogram */ --brand: rgb(var(--brand-rgb)); --brand-300: #7cc0f0; --brand-400: #4ba3e3; --brand-600: #0a5ca8; --brand-700: #084a88; --accent: rgb(var(--accent-rgb)); --accent-300: #fbc85b; --accent-400: #f9b73c; --accent-600: #c77f10; --accent-700: #9a6206; --navy: rgb(var(--navy-rgb)); /* Retained as an alias so any stray reference still resolves. */ --gold-rgb: var(--accent-rgb); --gold: var(--accent); --ok: #16a34a; --error: #dc2626; /* Fluid type scale */ --t-xs: 0.75rem; --t-sm: 0.8125rem; --t-base: 0.9375rem; --t-md: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --t-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem); --t-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); --t-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem); --t-3xl: clamp(1.875rem, 1.5rem + 1.8vw, 2.85rem); --t-4xl: clamp(2.5rem, 1.6rem + 4vw, 4.75rem); /* Space / shape */ --gutter: clamp(1.25rem, 1rem + 2vw, 3rem); --max: 1240px; --r-sm: 8px; --r: 16px; --r-lg: 24px; --r-pill: 999px; --nav-h: 76px; /* Motion */ --ease: cubic-bezier(0.16, 1, 0.30, 1); --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --fast: 160ms; --mid: 320ms; --slow: 700ms; } /* --------------------------------------------------------------------------- 1. DARK token set — the page default, and every .band-dark --------------------------------------------------------------------------- */ :root, .band-dark { /* Ground is a deep navy-black rather than neutral black, so it reads as the same family as the logo's monogram navy. */ --bg: #050a14; --bg-elev: #091120; --bg-elev-2: #0d1628; --surface: rgb(255 255 255 / 0.040); --surface-2: rgb(255 255 255 / 0.070); --border: rgb(255 255 255 / 0.090); --border-strong: rgb(255 255 255 / 0.170); --text: #f2f5fa; --text-dim: #a3adc0; --text-mute: #6b7688; --glass: rgb(6 9 15 / 0.78); --lift-rgb: 255 255 255; /* Accent that has to survive as TEXT on this band. Light gold on navy-black is ~11:1. */ --accent-text: var(--accent-300); --card: linear-gradient(180deg, rgb(255 255 255 / 0.052), rgb(255 255 255 / 0.012)); --card-lift: inset 0 1px 0 rgb(255 255 255 / 0.070); --card-shadow: 0 2px 8px rgb(0 0 0 / 0.30); --shadow-md: 0 8px 26px rgb(0 0 0 / 0.45); --shadow-lg: 0 28px 70px rgb(0 0 0 / 0.60); --glow: 0 0 0 1px rgb(var(--accent-rgb) / 0.30), 0 22px 60px rgb(var(--accent-rgb) / 0.13); --grain-opacity: 0.028; color-scheme: dark; } /* --------------------------------------------------------------------------- 2. LIGHT token set --------------------------------------------------------------------------- */ .band-light, .band-light-soft { --bg: #f5f7fb; --bg-elev: #ffffff; --bg-elev-2: #ffffff; --surface: #ffffff; --surface-2: #eef2f8; --border: rgb(10 14 22 / 0.100); --border-strong: rgb(10 14 22 / 0.180); --text: #0a0e16; --text-dim: #4a5568; --text-mute: #78839a; --glass: rgb(255 255 255 / 0.80); --lift-rgb: 10 14 22; /* The logo's gold on off-white is ~2:1 — unreadable. Text-bearing accents on light bands use this bronze instead: same hue family, >5:1. */ --accent-text: #8a5510; --card: linear-gradient(180deg, #ffffff, #fbfcfe); --card-lift: inset 0 1px 0 #ffffff; --card-shadow: 0 1px 2px rgb(10 14 22 / 0.05), 0 10px 28px rgb(10 14 22 / 0.055); --shadow-md: 0 8px 24px rgb(10 14 22 / 0.075); --shadow-lg: 0 28px 60px rgb(10 14 22 / 0.110); --glow: 0 0 0 1px rgb(var(--accent-rgb) / 0.55), 0 20px 46px rgb(var(--accent-rgb) / 0.18); --grain-opacity: 0; color-scheme: light; } /* A half-step greyer, so two adjacent light bands still separate. */ .band-light-soft { --bg: #e9eef6; --surface: #ffffff; } /* --------------------------------------------------------------------------- 3. Band base paint --------------------------------------------------------------------------- */ .band-dark, .band-light, .band-light-soft { background: var(--bg); color: var(--text); } /* --------------------------------------------------------------------------- 4. Toggle = "dim the whole page". Forces light bands onto the dark set. Higher specificity than block 2, so it wins. --------------------------------------------------------------------------- */ :root[data-theme="dark"] .band-light, :root[data-theme="dark"] .band-light-soft { --bg: #05070d; --bg-elev: #0a0f18; --bg-elev-2: #0d131f; --surface: rgb(255 255 255 / 0.040); --surface-2: rgb(255 255 255 / 0.070); --border: rgb(255 255 255 / 0.090); --border-strong: rgb(255 255 255 / 0.170); --text: #f2f5fa; --text-dim: #a3adc0; --text-mute: #6b7688; --glass: rgb(6 9 15 / 0.78); --lift-rgb: 255 255 255; --accent-text: var(--accent); --card: linear-gradient(180deg, rgb(255 255 255 / 0.052), rgb(255 255 255 / 0.012)); --card-lift: inset 0 1px 0 rgb(255 255 255 / 0.070); --card-shadow: 0 2px 8px rgb(0 0 0 / 0.30); --shadow-md: 0 8px 26px rgb(0 0 0 / 0.45); --shadow-lg: 0 28px 70px rgb(0 0 0 / 0.60); --glow: 0 0 0 1px rgb(var(--accent-rgb) / 0.30), 0 22px 60px rgb(var(--accent-rgb) / 0.13); --grain-opacity: 0.028; color-scheme: dark; } /* Separate adjacent bands that end up sharing a background. */ :root[data-theme="dark"] .band-light + .band-light-soft, :root[data-theme="dark"] .band-light-soft { border-top: 1px solid var(--border); }