/* base.css — design tokens + base styles. Single source of truth: linked by the dev prototype (index.html) and imported by the Vite build entry (main.jsx). */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } :root { --ink: #1A1D2A; /* Ink Navy — dark sections, nav, body text on light */ --ink-2: #14161F; /* deeper navy */ --ink-3: #2A2E40; /* raised navy (e.g. button hover) */ --paper: #F5F2EE; /* Soft White */ --paper-2: #ECE7DF; /* Soft White, one step down */ --white: #ffffff; --red: #FF6B5B; /* Warm Coral (accent) — var name kept for compatibility */ --red-press: #E8553F; /* darker coral for :active/press */ --on-accent: #0E0F15; /* Near-black — text & icons ON coral (white fails 4.5:1) */ --muted: #5C6275; /* slate — secondary text on light (~5.2:1 on paper) */ --muted-d: #9AA0B6; /* dusk — secondary text on navy (~6:1 on ink) */ --line: #E4DFD7; /* hairline on light */ --line-d: rgba(255,255,255,0.13); --maxw: 1180px; --gut: clamp(20px, 5vw, 64px); --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.02; letter-spacing: -0.02em; margin: 0; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; } button { font-family: inherit; cursor: pointer; border: none; background: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; } img { display: block; max-width: 100%; } ::selection { background: var(--red); color: var(--on-accent); } .wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); } .eyebrow { font-family: var(--font-display); font-size: 12.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--red); display: inline-block; } /* focus — modern outline follows the element's own border-radius; don't override it */ :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; } /* scrollbar in scoped areas */ .fs-scroll::-webkit-scrollbar { width: 8px; height: 8px; } .fs-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 8px; } #root { opacity: 1; } /* Lenis smooth-scroll (only active when the class is present on ) */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: clip; } .lenis.lenis-smooth iframe { pointer-events: none; } /* ============ Mobile-only trims & compaction (desktop unaffected) ============ */ .fs-sticky-cta { display: none; } /* hidden on desktop */ .fs-hero-mobile { display: none !important; } /* hero: desktop renders the grid layout */ .fs-arrowbtn { width: 46px; height: 46px; flex-shrink: 0; border-radius: 999px; border: 1px solid var(--line-d); background: rgba(255,255,255,.04); color: #fff; font-size: 24px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; } @media (max-width: 860px) { /* hide redundant / bulky sections on phones */ #buckets, #idea, .fs-hide-mobile { display: none !important; } .fs-contact-topics { display: none !important; } /* optional, bulky on phones */ .fs-sticky-cta { display: block; } /* sticky CTA: mobile only */ footer { padding-bottom: 80px; } /* clear the sticky CTA bar */ /* hero: show the carousel layout, hide the desktop grid — from first paint */ .fs-hero-desktop { display: none !important; } .fs-hero-mobile { display: flex !important; } } @media (max-width: 600px) { /* (1) tighten the section rhythm — roughly half the desktop padding */ main > section:not(#top) { padding-top: 52px !important; padding-bottom: 52px !important; } /* (10) hero example card sizes to its content instead of a tall fixed block */ .fs-fixcard { min-height: 0 !important; padding: 16px !important; } /* (4) Process -> compact 2x2 of numbered titles (drop blurb + time chip) */ #process .fs-proc { grid-template-columns: 1fr 1fr !important; gap: 14px !important; margin-top: 30px !important; } .fs-proc p, .fs-proc h3 ~ div { display: none !important; } .fs-proc h3 { font-size: 16.5px !important; margin-bottom: 0 !important; } /* (5) Democratising -> compact 2x2 of titles only */ .fs-dem-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; margin-top: 28px !important; } .fs-dem-grid p { display: none !important; } .fs-dem-grid h3 { font-size: 15.5px !important; margin-bottom: 0 !important; } .fs-dem-grid > * > div { padding: 18px 16px !important; } /* (7) Testimonials -> swipeable single-card carousel */ .fs-tmt { display: flex !important; grid-template-columns: none !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; -webkit-overflow-scrolling: touch; padding-bottom: 8px; } .fs-tmt > * { flex: 0 0 86%; scroll-snap-align: center; } /* hero stat strip -> 2x2 (from first paint) */ .fs-hero-stats { grid-template-columns: 1fr 1fr !important; } .fs-hero-stats > div { padding: 20px 18px !important; border-left: none !important; } .fs-hero-stats > div:nth-child(2n) { border-left: 1px solid var(--line-d) !important; } .fs-hero-stats > div:nth-child(n+3) { border-top: 1px solid var(--line-d); } } /* generic reveal-on-scroll — fade-up with a subtle scale settle */ .reveal { opacity: 0; transform: translateY(20px) scale(0.99); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none; } html { scroll-behavior: auto; } } /* ============ Blog prose (rendered markdown, dark theme) ============ */ .fs-prose { font-size: 17.5px; line-height: 1.75; color: #E7E9F0; } .fs-prose > * + * { margin-top: 1.2em; } .fs-prose h2 { font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); line-height: 1.15; letter-spacing: -0.02em; color: #fff; margin-top: 1.9em; scroll-margin-top: 100px; } .fs-prose h3 { font-family: var(--font-display); font-size: clamp(19px, 2.2vw, 23px); line-height: 1.2; color: #fff; margin-top: 1.5em; scroll-margin-top: 100px; } .fs-prose p, .fs-prose li { color: #C9CDDA; } .fs-prose strong { color: #fff; font-weight: 600; } .fs-prose a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; } .fs-prose ul, .fs-prose ol { padding-left: 1.4em; } .fs-prose li + li { margin-top: 0.5em; } .fs-prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--red); font-family: var(--font-display); font-size: 1.15em; font-weight: 500; font-style: normal; line-height: 1.45; color: #fff; } .fs-prose blockquote p { color: #fff; } .fs-prose code { font-family: ui-monospace, monospace; font-size: .9em; background: rgba(255,255,255,.08); padding: 2px 6px; border-radius: 6px; color: #fff; } .fs-prose pre { background: #14161F; border: 1px solid var(--line-d); border-radius: var(--r-md); padding: 18px 20px; overflow-x: auto; } .fs-prose pre code { background: none; padding: 0; } .fs-prose img { border-radius: var(--r-md); margin: 1.6em 0; } .fs-prose hr { border: none; border-top: 1px solid var(--line-d); margin: 2.4em 0; } .fs-prose table { width: 100%; border-collapse: collapse; font-size: 15.5px; margin: 1.6em 0; } .fs-prose th, .fs-prose td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line-d); } .fs-prose th { font-family: var(--font-display); font-weight: 600; color: #fff; background: rgba(255,255,255,.04); } .fs-prose td { color: #C9CDDA; }