/* ============================================ DESIGN TOKENS — Neovation Custom Learning ============================================ Single source of truth for all design values. Every color, size, spacing, and timing value used across the site is defined here. ============================================ */ :root { /* ---------------------------------------- COLOR PALETTE ---------------------------------------- Sophisticated light theme with vibrant purple, orange, and teal accents. ---------------------------------------- */ /* --- Background & Surface --- */ --color-bg: #ffffff; /* Page background */ --color-surface: #ffffff; /* Card / panel surface */ --color-surface-hover: #f1f1f1; /* Surface on hover / active */ /* --- Borders --- */ --color-border: rgba(0, 0, 0, 0.1); /* Default border */ --color-border-strong: rgba(0, 0, 0, 0.15); /* Emphasized border */ /* --- Text --- */ --color-text-primary: #4c4c4c; /* Headings, primary copy */ --color-text-secondary: #4c4c4c; /* Body text, descriptions */ --color-text-muted: #a8a8a8; /* Captions, disabled text */ /* --- Accent: Primary (Purple) --- */ --color-accent-primary: #7b5cd5; /* Links, CTAs, key highlights */ --color-accent-primary-hover: #6a4bc4; /* Primary accent on hover */ --color-accent-primary-light: #8563e8; /* Primary light (gradient start) */ --color-accent-primary-dark: #5c3cb7; /* Primary dark (button hover) */ /* --- Accent: Secondary (Orange) --- */ --color-accent-secondary: #f9930d; /* Secondary actions, badges */ --color-accent-secondary-hover: #e0850b; /* Secondary accent on hover */ /* --- Accent: Tertiary (Teal) --- */ --color-accent-tertiary: #00a1ac; /* Highlights, comparison tables */ --color-accent-tertiary-hover: #008a93; /* Tertiary accent on hover */ --color-accent-tertiary-light: #36c1d1; /* Tertiary light (gradient start)*/ --color-accent-tertiary-dark: #007a82; /* Tertiary dark (button hover) */ /* --- Feedback --- */ --color-success: #10b981; /* Success states, confirmations */ --color-warning: #f59e0b; /* Warnings, caution states */ /* --- Neutral Grey Scale --- */ --color-grey-100: #f1f1f1; /* Lightest grey (backgrounds) */ --color-grey-200: #d4d3d3; /* Light grey (borders, dividers) */ --color-grey-300: #a8a8a8; /* Mid grey (muted text) */ --color-grey-400: #4c4c4c; /* Dark grey (body text) */ --color-grey-500: #2d2d3a; /* Darkest grey (dark cards) */ /* --- Special Surfaces --- */ --color-card-dark: #2d2d3a; /* Dark card backgrounds */ /* --- Hero & Banner Colors --- */ --color-banner-start: #ccf0f4; /* Banner gradient start (cyan) */ --color-banner-end: #ffe7eb; /* Banner gradient end (pink) */ --color-hero-yellow: #fff2cd; /* Hero gradient (yellow) */ --color-hero-peach: #ffe7c8; /* Hero gradient (peach) */ /* --- Gradients --- */ --gradient-banner: linear-gradient(135deg, var(--color-banner-start), var(--color-banner-end)); --gradient-accent: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-primary-light)); --gradient-warm: linear-gradient(135deg, var(--color-accent-secondary), #FFD700); /* ---------------------------------------- HERO TYPOGRAPHY ---------------------------------------- */ --text-hero-lg: 3.125rem; /* 50px — Standard sub-page hero h1 */ /* ---------------------------------------- TYPOGRAPHY ---------------------------------------- 16px base (browser default). Google Fonts: Host Grotesk for headings, buttons & navigation; Lato for body copy. ---------------------------------------- */ /* Font stacks */ --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-heading: 'Host Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Type scale — based on 16px (1rem) */ --text-caption: 0.75rem; /* 12px */ --text-small: 0.875rem; /* 14px */ --text-body: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-h6: 1.25rem; /* 20px */ --text-h5: 1.5rem; /* 24px */ --text-h4: 1.875rem; /* 30px */ --text-h3: 2.25rem; /* 36px */ --text-h2: 3rem; /* 48px */ --text-h1: 3.75rem; /* 60px */ /* Line heights */ --leading-none: 1; --leading-tight: 1.15; /* Headings */ --leading-snug: 1.3; /* Sub-headings */ --leading-normal: 1.5; /* Body text */ --leading-relaxed: 1.65; /* Long-form reading */ /* Font weights */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; --weight-black: 900; /* ---------------------------------------- SPACING ---------------------------------------- 4px base unit. Named sizes from xs (4px) to 3xl (64px) plus section-level values. ---------------------------------------- */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ --space-3xl: 4rem; /* 64px */ /* Section-level spacing */ --space-section-y: 8rem; /* Vertical section padding */ --space-section-x: 2.5rem; /* Horizontal section gutter */ /* Max widths */ --max-width-content: 100rem; /* 1600px — widest container */ --max-width-medium: 90rem; /* 1440px — standard content */ --max-width-narrow: 48rem; /* 768px — reading width */ --max-width-nav: 1684px; /* floating navbar max width */ /* ---------------------------------------- BORDER RADIUS ---------------------------------------- */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-pill: 50rem; /* Fully-rounded pill shape */ /* ---------------------------------------- SHADOWS ---------------------------------------- Two shadow sets: • Light surface — uses rgba black • Dark surface — uses rgba white ---------------------------------------- */ /* Shadows for light surfaces (standard) */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); /* Shadows for dark surfaces (white glow) */ --shadow-dark-sm: 0 1px 2px rgba(255, 255, 255, 0.05); --shadow-dark-md: 0 4px 12px rgba(255, 255, 255, 0.08); --shadow-dark-lg: 0 8px 24px rgba(255, 255, 255, 0.12); /* ---------------------------------------- TRANSITIONS ---------------------------------------- Reusable timing values for consistent animation feel across the UI. ---------------------------------------- */ --transition-fast: 0.15s ease; --transition-base: 0.25s ease; --transition-slow: 0.4s cubic-bezier(0.22, 1, 0.36, 1); /* Individual values for composite use */ --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --easing-default: ease; --easing-smooth: cubic-bezier(0.22, 1, 0.36, 1); --easing-in-out: ease-in-out; /* ---------------------------------------- BREAKPOINTS (reference only) ---------------------------------------- CSS custom properties can't be used in @media queries, so these are documented here for reference. Use the raw values in media queries throughout the codebase. --bp-sm: 479px (small mobile) --bp-md: 767px (mobile / tablet) --bp-lg: 991px (tablet / desktop) --bp-xl: 1200px (wide desktop) ---------------------------------------- */ }