/* ========================================================================== Edu360 design tokens v1.0 Load fonts in BEFORE this file (see DESIGN-SYSTEM.md): https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600..800&family=Inter:wght@400..700&family=Space+Grotesk:wght@500..700&display=swap Breakpoints (media queries cannot use custom properties; use these values): --bp-sm: 480px large phones --bp-md: 768px tablets / drawer -> inline nav switch happens at 1024 --bp-lg: 1024px laptops, sidebar appears --bp-xl: 1280px desktop container max Mobile first: write base styles for 320-479px, then min-width up. ========================================================================== */ :root { /* ---------- Font families (max 3, latin subset, 3 files) ---------- */ --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; --font-accent: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* ---------- Colour scales ---------- */ /* Navy (brand base #0F2942 = navy-900) */ --navy-50: #F1F5FA; --navy-100: #DEE7F2; --navy-200: #BFCFE3; --navy-300: #93AECD; --navy-400: #5F86B0; --navy-500: #3A6592; --navy-600: #264D75; --navy-700: #1B3B5D; --navy-800: #142F4C; --navy-900: #0F2942; --navy-950: #08192B; /* Coral (brand #FF6B57 = coral-500). coral-500 is DECORATIVE on light bg; use coral-600+ for buttons with white text and for text on white. */ --coral-50: #FFF1EE; --coral-100: #FFDFD9; --coral-200: #FFC2B8; --coral-300: #FF9C8C; --coral-400: #FF8270; --coral-500: #FF6B57; --coral-600: #CF3A26; /* white text 4.9:1 */ --coral-700: #A82D1C; /* 6.9:1 */ --coral-800: #7F2114; --coral-900: #5A170D; /* Amber (brand #FFB020 = amber-500). Use amber-700+ for text on light. */ --amber-50: #FFF8E6; --amber-100: #FFEDBF; --amber-200: #FFDF8F; --amber-300: #FFCB57; --amber-400: #FFBD35; --amber-500: #FFB020; --amber-600: #D98F00; --amber-700: #8A5A00; /* 5.9:1 on white */ --amber-800: #6B4600; --amber-900: #4A3000; /* Teal: verified / success / approved */ --teal-50: #E9F7F3; --teal-100: #C8ECE2; --teal-200: #98D9C8; --teal-300: #5FC0A8; --teal-400: #2FA388; --teal-500: #158A70; --teal-600: #0F7B5F; /* 5.2:1 on white */ --teal-700: #0B634C; --teal-800: #094E3C; --teal-900: #063A2C; /* Neutrals (slightly cool to sit with navy) */ --grey-0: #FFFFFF; --grey-25: #F8FAFC; --grey-50: #F3F5F8; --grey-100: #E9EDF2; --grey-200: #D8DEE6; --grey-300: #BAC3CF; --grey-400: #8C97A6; --grey-500: #6B7686; /* 4.6:1 on white: minimum for small text */ --grey-600: #515C6C; --grey-700: #3B4554; --grey-800: #262E3B; --grey-900: #141A24; /* Red for errors (kept separate from coral brand to avoid confusion) */ --red-50: #FDECEC; --red-600: #C62828; --red-700: #9F1D1D; /* Third party */ --whatsapp: #128C4A; /* white text 4.6:1 */ --whatsapp-dark: #0C6B37; /* ---------- Semantic tokens ---------- */ --color-bg: var(--grey-25); --color-bg-alt: var(--navy-50); --color-surface: var(--grey-0); --color-surface-2: var(--grey-50); --color-text: var(--grey-900); --color-text-strong: var(--navy-900); --color-muted: var(--grey-600); --color-subtle: var(--grey-500); --color-border: var(--grey-200); --color-border-strong: var(--grey-300); --color-brand: var(--navy-900); --color-brand-hover: var(--navy-700); --color-brand-soft: var(--navy-50); --color-on-brand: var(--grey-0); --color-accent: var(--coral-600); /* actions */ --color-accent-hover: var(--coral-700); --color-accent-decor: var(--coral-500); /* decoration only on light */ --color-accent-soft: var(--coral-50); --color-highlight: var(--amber-500); --color-highlight-soft: var(--amber-50); --color-highlight-text: var(--amber-700); --color-success: var(--teal-600); --color-success-soft: var(--teal-50); --color-warning: var(--amber-700); --color-warning-soft: var(--amber-50); --color-danger: var(--red-600); --color-danger-soft: var(--red-50); --color-link: var(--navy-600); --color-focus: var(--navy-500); --color-overlay: rgb(8 25 43 / 0.55); /* ---------- Type scale (fluid, 320px to 1280px) ---------- */ --text-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem); /* 12-13 */ --text-sm: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem); /* 13-14 */ --text-base: clamp(0.9375rem, 0.91rem + 0.15vw, 1rem); /* 15-16 */ --text-md: clamp(1rem, 0.96rem + 0.25vw, 1.125rem); /* 16-18 */ --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); /* 18-22 */ --text-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem); /* 20-28 */ --text-2xl: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem); /* 24-36 */ --text-3xl: clamp(1.75rem, 1.3rem + 2vw, 3rem); /* 28-48 */ --text-4xl: clamp(2rem, 1.3rem + 3.2vw, 3.75rem); /* 32-60 */ --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.55; --lh-loose: 1.7; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; --tracking-tight: -0.015em; --tracking-wide: 0.06em; /* ---------- Spacing (4px base) ---------- */ --space-0: 0; --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-20: 5rem; --space-24: 6rem; --section-y: clamp(2.5rem, 2rem + 3vw, 4.5rem); /* ---------- Layout ---------- */ --container-sm: 640px; --container-md: 880px; --container-lg: 1120px; --container-xl: 1240px; --gutter: 16px; --grid-gap: 16px; --header-h: 60px; --tabs-h: 48px; --bottom-bar-h: 64px; --tap: 44px; /* minimum touch target */ /* ---------- Radii ---------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 999px; /* ---------- Shadows (navy tinted) ---------- */ --shadow-xs: 0 1px 2px rgb(15 41 66 / 0.06); --shadow-sm: 0 1px 3px rgb(15 41 66 / 0.08), 0 1px 2px rgb(15 41 66 / 0.05); --shadow-md: 0 4px 12px rgb(15 41 66 / 0.09), 0 2px 4px rgb(15 41 66 / 0.05); --shadow-lg: 0 12px 28px rgb(15 41 66 / 0.14), 0 4px 8px rgb(15 41 66 / 0.06); --shadow-xl: 0 24px 48px rgb(15 41 66 / 0.2); --shadow-focus: 0 0 0 3px rgb(58 101 146 / 0.45); /* ---------- Z-index ---------- */ --z-base: 1; --z-sticky: 100; --z-header: 200; --z-dropdown: 300; --z-overlay: 400; --z-drawer: 500; --z-modal: 600; --z-toast: 700; /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --transition-colors: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); --transition-lift: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } @media (min-width: 768px) { :root { --gutter: 24px; --grid-gap: 20px; --header-h: 68px; } } @media (min-width: 1024px) { :root { --gutter: 32px; --grid-gap: 24px; --header-h: 72px; } } /* ========================================================================== Reset ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--tabs-h) + 8px); } body { min-height: 100vh; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--lh-normal); font-weight: var(--fw-regular); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, video, canvas, svg { display: block; max-width: 100%; } img { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } a { color: var(--color-link); text-underline-offset: 0.18em; } a:hover { color: var(--color-brand); } ul, ol { padding: 0; list-style: none; } table { border-collapse: collapse; width: 100%; } p, li, dd { overflow-wrap: break-word; } /* ========================================================================== Base element styles ========================================================================== */ h1, h2, h3, h4 { color: var(--color-text-strong); font-family: var(--font-display); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; } h1 { font-size: var(--text-3xl); font-weight: var(--fw-black); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-lg); line-height: var(--lh-snug); } h4 { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--fw-semibold); letter-spacing: 0; line-height: var(--lh-snug); } p { max-width: 68ch; } small { font-size: var(--text-sm); } strong, b { font-weight: var(--fw-semibold); } hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-6) 0; } :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-xs); } ::selection { background: var(--amber-200); color: var(--navy-950); } .container { width: 100%; max-width: calc(var(--container-xl) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .container--lg { max-width: calc(var(--container-lg) + var(--gutter) * 2); } .container--md { max-width: calc(var(--container-md) + var(--gutter) * 2); } .section { padding-block: var(--section-y); } .section--alt { background: var(--color-bg-alt); } .section--dark { background: var(--navy-900); color: var(--navy-100); } .section--dark h2, .section--dark h3 { color: #fff; } .grid { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(12, minmax(0, 1fr)); } .stack > * + * { margin-top: var(--space-4); } .num { font-family: var(--font-accent); font-variant-numeric: tabular-nums; } .eyebrow { font-family: var(--font-accent); font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--coral-700); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--space-4); top: -60px; z-index: var(--z-toast); background: var(--navy-900); color: #fff; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); } .skip-link:focus { top: var(--space-2); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }