/* Design tokens for the "Architecture of Biological Truth" visual language: colors, type, radius, and spacing as plain CSS custom properties, prefixed `--fl-` / `.fl-*` so they don't collide with anything else. This is the single source of truth for the site's design tokens. */ :root { --fl-background: hsl(240 20% 99%); --fl-foreground: hsl(222 47% 11%); --fl-card: hsl(0 0% 100%); --fl-card-foreground: hsl(222 47% 11%); --fl-primary: hsl(221 83% 53%); --fl-primary-foreground: hsl(0 0% 100%); --fl-secondary: hsl(210 40% 96%); --fl-secondary-foreground: hsl(222 47% 11%); --fl-muted: hsl(210 40% 96%); --fl-muted-foreground: hsl(215 16% 47%); --fl-accent: hsl(160 84% 39%); --fl-accent-foreground: hsl(0 0% 100%); --fl-accent-warm: hsl(28 95% 53%); --fl-destructive: hsl(0 84% 60%); --fl-destructive-foreground: hsl(0 0% 98%); --fl-border: hsl(214 32% 91%); --fl-input: hsl(214 32% 91%); --fl-ring: hsl(221 83% 53%); --fl-label-foreground: hsl(222 30% 32%); --fl-radius: 0.75rem; --fl-radius-md: calc(var(--fl-radius) - 2px); --fl-radius-sm: calc(var(--fl-radius) - 4px); --fl-font-heading: "Newsreader", ui-serif, Georgia, serif; --fl-font-body: "Inter", ui-sans-serif, system-ui, sans-serif; --fl-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --fl-max-width: 1400px; /* Dark "hero"/nav chrome brand accent — seeded from #c25b2b terracotta. 500 is for text-on-white/large-text use; 600 is the AA-safe choice for white text on a terracotta background. Used by the dark-hero sections (FeatureSection, ProofPoints, TopNavMenu, ...) alongside --fl-abyss. */ --fl-terracotta-50: #ffa54e; --fl-terracotta-100: #ff9d4a; --fl-terracotta-200: #ff8c42; --fl-terracotta-300: #ff7c3a; --fl-terracotta-400: #e56b33; --fl-terracotta-500: #c25b2b; --fl-terracotta-600: #a34c24; --fl-terracotta-700: #843e1d; --fl-terracotta-800: #652f16; --fl-terracotta-900: #46210f; --fl-terracotta-950: #36190c; /* Dark hero/nav backdrop shared by any page using that design direction (Home, FQHC, ...) — the surface the terracotta gradients/glows sit on. */ --fl-abyss: #0a0e17; --fl-abyss-light: #151c28; } /* Opt-in dark variant: add class="fl-dark" to or a container once a theme toggle exists. Not wired up to anything yet. */ .fl-dark { --fl-background: hsl(222 47% 7%); --fl-foreground: hsl(0 0% 98%); --fl-card: hsl(222 40% 10%); --fl-card-foreground: hsl(0 0% 98%); --fl-primary: hsl(221 83% 60%); --fl-primary-foreground: hsl(0 0% 100%); --fl-secondary: hsl(222 30% 16%); --fl-secondary-foreground: hsl(0 0% 98%); --fl-muted: hsl(222 30% 16%); --fl-muted-foreground: hsl(215 20% 65%); --fl-accent: hsl(160 84% 45%); --fl-accent-foreground: hsl(0 0% 100%); --fl-accent-warm: hsl(28 92% 60%); --fl-destructive: hsl(0 62% 40%); --fl-destructive-foreground: hsl(0 0% 98%); --fl-border: hsl(222 25% 18%); --fl-input: hsl(222 25% 18%); --fl-ring: hsl(221 83% 60%); --fl-label-foreground: hsl(215 20% 68%); } /* ---- Recurring text/surface patterns ---- */ .fl-display-text { font-family: var(--fl-font-heading); font-weight: 500; letter-spacing: -0.02em; line-height: 1; } .fl-data-tag { font-family: var(--fl-font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fl-label-foreground); } .fl-glass { background: hsl(0 0% 100% / 0.6); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid hsl(0 0% 100% / 0.5); } .fl-dark .fl-glass { background: hsl(222 40% 10% / 0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid hsl(0 0% 100% / 0.1); } /* Pill CTA buttons — shared by MainHero and anything else on the site that needs a primary/secondary call-to-action pair. */ .fl-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.5rem; border-radius: 999px; font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: background 0.2s, color 0.2s, border-color 0.2s; } .fl-btn-solid { background: var(--fl-foreground); color: var(--fl-background); } .fl-btn-solid:hover { background: var(--fl-primary); color: white; } .fl-btn-outline { border: 1px solid var(--fl-border); color: var(--fl-foreground); background: hsl(0 0% 100% / 0.4); } .fl-btn-outline:hover { background: var(--fl-secondary); } .fl-section-pad { padding-top: clamp(5rem, 12vw, 10rem); padding-bottom: clamp(5rem, 12vw, 10rem); } /* Dot-bulleted list of short value props/benefits — used wherever page copy has a plain feature list that doesn't warrant a full CardSection grid. */ .fl-bullet-list { margin: 1.5rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.95rem; line-height: 1.5; color: var(--fl-muted-foreground); } .fl-bullet-list li { position: relative; padding-left: 1.1rem; } .fl-bullet-list li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 0.4rem; height: 0.4rem; border-radius: 999px; background: var(--fl-primary); } /* A plain sub-heading + paragraph inside a SectionShell, for simple content pages composed mostly of prose rather than one of the bigger section patterns (CardSection, SplitShowcase, ...). */ .fl-page-heading { margin: 1.25rem 0 0; font-size: clamp(1.5rem, 3.5vw, 2rem); color: var(--fl-foreground); } .fl-page-heading--spaced { margin-top: 2.5rem; } .fl-page-copy { margin: 1.25rem 0 0; max-width: 42rem; font-size: 1.05rem; line-height: 1.65; color: var(--fl-muted-foreground); } .fl-page-link { display: inline-flex; margin-top: 1.25rem; font-size: 0.9rem; font-weight: 600; color: var(--fl-primary); text-decoration: none; } .fl-page-link:hover { text-decoration: underline; } /* ---- Ambient motion (used sparingly — see design-reference.md perf note) ---- */ @keyframes fl-scanline { 0% { transform: translateY(-100%); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(100vh); opacity: 0; } } .fl-animate-scanline { animation: fl-scanline 8s ease-in-out infinite; } @keyframes fl-float-slow { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-12px); } } .fl-animate-float-slow { animation: fl-float-slow 6s ease-in-out infinite; } @keyframes fl-pulse-ring { 0% { transform: scale(0.8); opacity: 0.6; } 100% { transform: scale(2.2); opacity: 0; } } .fl-animate-pulse-ring { animation: fl-pulse-ring 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* ---- Shared page shell (nav bar + main + footer), used by every top-level layout ---- */ .fl-page-shell { display: flex; min-height: 100vh; flex-direction: column; font-family: var(--fl-font-body); color: var(--fl-foreground); background: var(--fl-background); } .fl-page-shell > main { flex: 1; padding-top: 5.5rem; }