/* ========================================================================== Adhyayan School — Design Tokens Palette: taken from the official logo (assets/images/logo.svg), which supersedes the PRD §3.2 hex values at the client's request. Logo navy #14254A Logo red-orange #EF4123 Logo tile grey #F1F2F2 Contents 1. Brand palette & derived colours 2. Typography 3. Spacing & sizing 4. Surfaces (radius, elevation) 5. Layout 6. Motion 7. Stacking 8. Icons Runtime properties (set by assets/js/main.js, not defined here): --site-header-offset full height of the expanded header (extra hero top padding) --topbar-height height of the top bar hidden when the header floats ========================================================================== */ :root { /* ---------- 1. Brand palette ---------- */ --color-primary: #14254A; /* Adhyayan Navy (logo "SCHOOL") */ --color-secondary: #EF4123; /* Adhyayan Red-Orange (logo "ADHYAYAN") — decorative/large text only */ --color-text-dark: #2A2420; /* Body text: warm near-black, same hue family as the borders and cream (15:1 on white) */ --color-text-light: #655D55; /* Secondary text, warm grey: ≥ 5.2:1 on white, cream, card grey, sand and primary tint */ --color-bg-light: #FBF7F2; /* Light background — warm cream (logo tile grey #F1F2F2 warmed) */ --color-sand: #F3ECE3; /* Warm alternate surface: chips, quote marks, tiles */ --color-surface-card: #F3F0EB; /* Card surface (warm grey): contrast without shadows, on white and cream */ --color-surface-card-hover: #ECE7E0; /* Linked-card hover, one step darker */ --color-surface-inset: var(--color-white); /* Chips and panels inside a card; sand inside white cards */ --color-white: #FFFFFF; /* Derived colours */ --color-primary-light: #1E3566; /* Hero gradient end */ --color-primary-dark: #0C1830; --color-primary-tint: #E8EBF2; --color-secondary-dark: #D63A1E; /* Logo red-orange deepened to 4.7:1 on white — CTAs, links, small text */ --color-secondary-darker: #B52F17; /* Hover state for --color-secondary-dark */ --color-secondary-light: #FF8B70; /* Link hover on navy surfaces (6.6:1 on --color-primary) */ --color-border: #ECE4DA; /* Warm hairline */ --color-error: #B91C1C; --color-error-bg: #FEF2F2; --color-success: #047857; --color-success-bg: #ECFDF5; --color-skeleton: #ECE6DE; /* Warm, like the card surfaces it loads into */ --color-skeleton-shine: #F6F2EC; /* Text & strokes on navy surfaces */ --color-on-dark-muted: rgb(255 255 255 / 0.85); --color-on-dark-border: rgb(255 255 255 / 0.15); --color-on-dark-hover: rgb(255 255 255 / 0.12); --color-on-dark-surface: rgb(255 255 255 / 0.08); /* Overlays */ --color-scrim: rgb(12 24 48 / 0.6); /* --color-primary-dark @ 60% */ /* Focus rings for form controls */ --focus-ring: 0 0 0 3px rgb(239 65 35 / 0.35); /* --color-secondary @ 35% */ --color-focus-field: var(--color-primary); /* Form-field focus: logo navy (on palette; 15:1 on white) */ --focus-ring-field: 0 0 0 3px rgb(20 37 74 / 0.2); /* --color-primary @ 20% */ --focus-ring-error: 0 0 0 3px rgb(185 28 28 / 0.25); /* --color-error @ 25% */ /* ---------- 2. Typography ---------- */ --font-heading: 'Bricolage Grotesque', sans-serif; --font-body: 'Google Sans', sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* code in article content */ /* Type scale (fluid, mobile-first) */ --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1.0625rem; --font-size-lg: 1.1875rem; --font-size-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); --font-size-2xl: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); --font-size-3xl: clamp(2rem, 1.25rem + 2.5vw, 3.25rem); --font-size-4xl: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem); --line-height-tight: 1.08; --line-height-body: 1.7; /* ---------- 3. Spacing & sizing ---------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; --space-32: 8rem; --control-size: 2.75rem; /* Minimum tap target: buttons, inputs, icon toggles */ --measure: 38rem; /* Reading width: ≈ 72 characters of 18px article text, ≈ 76 at body size (taste-skill review; 48rem gave ≈ 96) */ --measure-article: 45.6rem; /* Story and legal page body: --measure + 20% (user request 2026-10-08), ≈ 86 characters of 18px text */ --measure-tight: 38rem; /* Leads and section intros */ /* ---------- 4. Surfaces ---------- */ --radius-sm: 10px; --radius-md: 16px; /* Inputs, small tiles, inset media */ --radius-lg: 24px; /* Cards, banners */ --radius-xl: 36px; /* Full-width panels: navy sections, heroes, footer */ --border-radius: var(--radius-md); --radius-menu: 20px; /* Dropdown panels (header sub-menus, breadcrumb …) */ --radius-menu-item: 12px; /* Rows inside them: panel radius minus its 8px padding, so the corners stay concentric */ --radius-pill: 999px; --radius-circle: 50%; /* Soft, navy-tinted layered shadows */ --shadow-elevated: 0 2px 4px 2px rgb(20 37 74 / 0.04), 0 24px 48px -16px rgb(20 37 74 / 0.22); --shadow-menu: 0 0 0 1px rgb(20 37 74 / 0.05), 0 1px 1px 0.5px rgb(20 37 74 / 0.04), 0 3px 3px -1.5px rgb(20 37 74 / 0.03), 0 6px 6px -3px rgb(20 37 74 / 0.04), 0 12px 12px -6px rgb(20 37 74 / 0.04), 0 24px 24px -12px rgb(20 37 74 / 0.05), 0 48px 48px -24px rgb(20 37 74 / 0.06); /* Dropdown panels (layered, after alignui.com) */ --shadow-cta: 0 10px 24px -10px rgb(214 58 30 / 0.55); /* --color-secondary-dark glow */ /* ---------- 5. Layout ---------- */ --container-max-width: 1280px; --container-padding: clamp(1rem, 4vw, 2rem); --header-height: 5.5rem; /* Masthead incl. brand motto (desktop); anchors and sticky columns clear it */ --sticky-offset: calc(var(--header-height) + var(--space-12)); /* Top of sticky side columns */ /* ---------- 6. Motion ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --transition-base: 200ms ease; --transition-slow: 700ms var(--ease-out); /* ---------- 7. Stacking ---------- */ --z-header: 100; --z-skip-link: 101; /* ---------- 8. Icons (CSS masks for pseudo-element icons; inline icons use assets/images/icons.svg) ---------- */ /* Hand-drawn underline accent: one continuous wave, 24 periods of 80 × 16, used as a mask coloured by background-color. Size it "auto 100%" from the left so every use has the same wave shape, cropped to the element's width (see .section__header--center h2::after and .hero__highlight::after) */ --shape-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 16' fill='none' stroke='black' stroke-width='4'%3E%3Cpath d='M0 4c14 0 26 8 40 8s26-8 40-8c14 0 26 8 40 8s26-8 40-8c14 0 26 8 40 8s26-8 40-8c14 0 26 8 40 8s26-8 40-8c14 0 26 8 40 8s26-8 40-8c14 0 26 8 40 8s26-8 40-8c14 0 26 8 40 8s26-8 40-8c14 0 26 8 40 8s26-8 40-8c14 0 26 8 40 8s26-8 40-8c14 0 26 8 40 8s26-8 40-8c14 0 26 8 40 8s26-8 40-8c14 0 26 8 40 8s26-8 40-8c14 0 26 8 40 8s26-8 40-8c14 0 26 8 40 8s26-8 40-8c14 0 26 8 40 8s26-8 40-8c14 0 26 8 40 8s26-8 40-8c14 0 26 8 40 8s26-8 40-8c14 0 26 8 40 8s26-8 40-8c14 0 26 8 40 8s26-8 40-8c14 0 26 8 40 8s26-8 40-8c14 0 26 8 40 8s26-8 40-8c14 0 26 8 40 8s26-8 40-8c14 0 26 8 40 8s26-8 40-8c14 0 26 8 40 8s26-8 40-8'/%3E%3C/svg%3E"); --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E"); --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E"); --icon-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3Cpath d='M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E"); --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }