/* ============================================================ Flou Design System — Colors & Type Source: floumedia-site/src/app/globals.css + layout.tsx ============================================================ */ /* Webfont (Inter) is loaded via in each page for faster discovery. Weights used in the codebase: 400, 500, 600, 700, 900. */ :root { /* ------------ Brand / surface colors ------------ */ --background: #FFFEF5; /* warm cream — page bg */ --foreground: #0F0F0F; /* near-black text */ --surface: #FAFAFA; /* light neutral — alt cells */ --surface-dark: #0D0D0D; /* near-black panels */ --dark-bg: #0A0A0A; /* deepest black — process / footer */ /* ------------ Accents ------------ */ /* --accent darkened to D43A1A for WCAG AA contrast (4.6:1 on cream, 4.6:1 with white). --accent-bright keeps the original coral for purely decorative use on near-black bg. */ --accent: #D43A1A; /* coral-orange, AA-safe */ --accent-bright: #F15533; /* original coral, decorative only */ --accent-light: #FFA587; --accent-foreground: #FFFFFF; /* ------------ Semantic / text ------------ */ --primary: #D43A1A; --primary-foreground: #FFFFFF; --secondary: #1A1A1A; --secondary-foreground: #FFFFFF; --destructive: #EF4444; --destructive-foreground: #FFFFFF; --muted: #666666; --muted-foreground: #999999; /* ------------ Lines & inputs ------------ */ --border: #2B2B2B; --border-subtle: rgba(184, 184, 184, 0.2); --input: rgba(255, 255, 255, 0.15); --ring: #D43A1A; /* ------------ Foreground tints (used as text/70, /60, etc) ------------ */ --fg-90: rgba(15, 15, 15, 0.90); --fg-70: rgba(15, 15, 15, 0.70); --fg-60: rgba(15, 15, 15, 0.60); --fg-40: rgba(15, 15, 15, 0.40); --fg-25: rgba(15, 15, 15, 0.25); --fg-10: rgba(15, 15, 15, 0.10); --fg-05: rgba(15, 15, 15, 0.05); --on-dark-90: rgba(255, 255, 255, 0.90); --on-dark-70: rgba(255, 255, 255, 0.70); --on-dark-55: rgba(255, 255, 255, 0.55); --on-dark-35: rgba(255, 255, 255, 0.35); --on-dark-10: rgba(255, 255, 255, 0.10); /* ------------ Typography ------------ */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --font-display: "Inter", ui-sans-serif, system-ui, sans-serif; /* Type scale (matches max sizes used in the codebase) */ --fs-hero: clamp(40px, 6vw, 68px); /* h1 marquee hero */ --fs-display: clamp(32px, 4.5vw, 56px); /* footer / large CTA */ --fs-h1: 48px; --fs-h2: 32px; --fs-h3: 26px; --fs-h4: 22px; --fs-stat: 80px; /* counter numbers */ --fs-step: 112px; /* process step numbers */ --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 15px; /* default UI / button text */ --fs-caption: 13px; --fs-eyebrow: 11px; /* uppercase tracked labels */ /* Line heights */ --lh-tight: 1.08; --lh-snug: 1.15; --lh-body: 1.5; --lh-relaxed:1.6; /* Tracking */ --tracking-tight: -0.02em; --tracking-uppercase: 0.16em; /* ------------ Radii ------------ */ --r-sm: 8px; --r-md: 10px; /* tab buttons */ --r-lg: 12px; /* benefit row */ --r-xl: 16px; /* card / pill nav */ --r-2xl: 20px; /* team card */ --r-3xl: 32px; /* showreel mobile */ --r-4xl: 40px; /* showreel desktop card */ --r-pill: 9999px; /* every CTA + small pill */ /* ------------ Shadows ------------ */ --shadow-card: 0.16px 0.56px 0.41px -0.31px rgba(0,0,0,0.07), 0.48px 1.69px 1.23px -0.63px rgba(0,0,0,0.08), 1.28px 4.47px 3.25px -0.94px rgba(0,0,0,0.10), 4px 14px 10.19px -1.25px rgba(0,0,0,0.19); --shadow-cinematic: 0 40px 100px -20px rgba(0, 0, 0, 0.8); --shadow-glass: 0 0 0 1px rgba(0,0,0,0.04), 0 8px 32px -8px rgba(0,0,0,0.12), inset 0 1px 1px rgba(255,255,255,0.5), inset 0 -1px 1px rgba(0,0,0,0.04); --shadow-pill-dark: 0 10px 30px -10px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.10), inset 0 -1px 2px rgba(0,0,0,0.80); /* ------------ Spacing rhythm ------------ */ --space-section: clamp(80px, 9vw, 112px); /* py-20 md:py-28 */ --space-container-x: 24px; --container-max: 1280px; --container-narrow: 1000px; /* ------------ Motion ------------ */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --d-fast: 200ms; --d-base: 300ms; --d-slow: 600ms; } /* ============================================================= Base + semantic typography ============================================================= */ html { scroll-behavior: smooth; } body { background: var(--background); color: var(--foreground); font-family: var(--font-sans); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; } h1, .h1 { font-size: var(--fs-h1); font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--foreground); } h2, .h2 { font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--foreground); } @media (min-width: 768px) { h1, .h1 { font-size: var(--fs-h1); } h2, .h2 { font-size: 48px; } } h3, .h3 { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-snug); color: var(--foreground); } h4, .h4 { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); color: var(--foreground); } p, .p { font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg-70); } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-body-sm); font-weight: 500; color: var(--foreground); } .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); } .caps-tag { font-size: 11px; font-weight: 600; letter-spacing: var(--tracking-uppercase); text-transform: uppercase; }