/* Geist — self-hosted (replaces Nohemi). Sans for UI/headlines + stats/body (Black for the hero wordmark), Pixel for the nav + footer wordmark. */ @font-face { font-family: 'Geist Sans'; src: url('geist-font-v1.7.2/geist-font/Geist/webfonts/Geist-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Sans'; src: url('geist-font-v1.7.2/geist-font/Geist/webfonts/Geist-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Pixel'; src: url('geist-font-v1.7.2/geist-font/GeistPixel/webfonts/GeistPixel-Square.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* Instrument Serif — self-hosted; kept for the display headings / hero tagline. */ @font-face { font-family: 'Instrument Serif'; src: url('Instrument_Serif/InstrumentSerif-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Instrument Serif'; src: url('Instrument_Serif/InstrumentSerif-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } :root { --font-serif: 'Instrument Serif', serif; --font-sans: 'Geist Sans', sans-serif; --font-pixel: 'Geist Pixel', monospace; --color-bg: #f1f1f1; --color-text: #010101; --border-style: 2px solid var(--color-text); /* ONE source of truth for the horizontal page gutter — the nav's left/right padding, which every other edge (container, case wrapper, full-bleed break-outs, the menu overlay via --edge) is aligned to. Halved from the original 5rem, so change it HERE and the whole site follows instead of drifting apart. */ --gutter: 2.5rem; } * { margin: 0; padding: 0; box-sizing: border-box; } /* Background on too, so the page is never white — including the instant the body is hidden during a scramble transition. Without this, hiding exposes the browser's default white canvas, which reads as a visible page reload. */ html { background-color: var(--color-bg); /* Fluid scale: every size on the site is rem, so the root maps the 1920px design onto the viewport — full size at ≥1920, shrinking proportionally down to the 820px breakpoint (where the mobile root below takes over). 16/1920 = 0.83333vw. */ font-size: min(0.83333vw, 16px); } body { background-color: var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.02em; /* matches Figma tracking on all text */ } /* Hidden before paint when arriving via a scramble transition, so there's no flash of unscrambled text; transition.js reveals it instantly once the scramble is in place. */ .fl-enter body { opacity: 0; } .container { width: 100%; max-width: 120rem; margin: 0 auto; padding: 2.5rem var(--gutter); display: flex; flex-direction: column; overflow-x: clip; /* contains the hero word's horizontal scroll-drift */ } .viewport-section { min-height: calc(100vh - 5rem); /* 100vh minus container vertical padding */ display: flex; flex-direction: column; justify-content: space-between; margin-bottom: 12.5rem; } /* Header — fixed, floats over the content and inverts via difference blend so it stays legible over both the light page and the dark type that scrolls beneath it. Lives OUTSIDE the locomotive scroll container so it stays put on scroll. */ header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; max-width: 120rem; margin: 0 auto; /* Top padding is 80% deeper than the bottom on purpose — the bar sits lower in its strip. Horizontal is the shared --gutter, so the wordmark and "Reach out" stay on the same edges as all page content. */ padding: 0.675rem var(--gutter) 0.375rem; background: var(--color-bg); /* solid, so content no longer bleeds through the nav — same colour as the page, so it just occludes */ display: flex; justify-content: space-between; align-items: center; font-family: var(--font-pixel); /* nav in Geist Pixel */ font-weight: 400; font-size: 1.75rem; color: var(--color-text); /* crisp dark nav by default — no blend, so no grayscale-AA bolding */ pointer-events: none; /* gaps pass clicks through to the hero; links re-enable below */ transition: color 0.25s ease; } header a { pointer-events: auto; color: inherit; text-decoration: none; } /* Over a dark-background section, nav-theme.js adds .nav-light → white text + white logo. */ header.nav-light { color: #fff; } .nav-logo { width: 3rem; /* 48px at max root = 1:1 with the 48px pixel art */ height: 3rem; display: block; /* Pixel-art tulip (favicon.png): black ink on transparent — shown as-is on the light nav, inverted to white over dark sections (.nav-light). */ image-rendering: pixelated; image-rendering: crisp-edges; filter: none; transition: filter 0.25s ease; } header.nav-light .nav-logo { filter: invert(1); } /* The Studio / Work pair (third nav group). */ .nav-links { display: flex; gap: 2.5rem; } /* Hero — editorial masthead with a physics-driven wordmark */ .hero { position: relative; flex: 1; width: 100%; min-height: 20rem; } /* Physics stage — covers the whole hero so FLORIUM falls full height and piles up on the left. Sits behind the framing text. */ .hero-physics { position: absolute; inset: 0; overflow: hidden; z-index: 1; } .phys-letter { position: absolute; top: 0; left: 0; font-family: var(--font-sans); font-weight: 900; font-size: clamp(8.75rem, 18vw, 20rem); line-height: 1; text-transform: uppercase; transform-origin: center center; will-change: transform; visibility: hidden; user-select: none; -webkit-user-select: none; } .hero-physics.ready .phys-letter { visibility: visible; } /* Framing text — overlaid on top, positioned as in the masthead layout */ .hero-frame { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; /* base meta sits at the bottom; tagline is centered separately */ pointer-events: none; } .hero-meta { display: flex; font-family: var(--font-sans); font-size: 0.9375rem; } .hero-meta--top { justify-content: space-between; } .hero-tagline { position: absolute; top: 50%; right: 0; transform: translateY(-50%); text-align: right; font-family: var(--font-serif); font-weight: 400; font-size: clamp(2rem, 3.6vw, 3.5rem); line-height: 1.05; max-width: 16ch; } .hero-meta--base { align-self: flex-end; flex-direction: column; align-items: flex-end; gap: 0.375rem; } /* Stats Section */ .stats-section { display: flex; flex-direction: column; gap: 7.5rem; /* the two blocks hug their content; the 12.5rem margins buffer neighbours */ margin-bottom: 12.5rem; } .stat-block, .team-block { width: 50%; min-width: 45rem; } .stat-block h2, .team-block h2 { font-family: var(--font-sans); font-size: 3.75rem; font-weight: 400; margin-bottom: 1rem; } .divider { border-bottom: var(--border-style); margin-bottom: 1.5rem; } .stat-list { display: flex; flex-direction: column; gap: 0.75rem; } .stat-item { font-family: var(--font-sans); font-size: 1.875rem; } .team-list { display: grid; grid-template-columns: 1fr auto; /* role column sizes to its content so it never wraps */ row-gap: 0.75rem; column-gap: 2.5rem; } .team-member { font-family: var(--font-sans); font-size: 1.875rem; white-space: nowrap; } .team-role { font-family: var(--font-sans); font-size: 1.875rem; text-align: right; white-space: nowrap; } /* Featured Work */ .work-section { margin-bottom: 12.5rem; } .work-label { font-family: var(--font-sans); font-size: 2rem; font-weight: 400; /* it's an

for structure; keep the regular look / margin-bottom: 0.75rem; } .work-list { border-top: var(--border-style); display: flex; flex-direction: column; } .work-item { font-family: var(--font-serif); font-size: 10.5rem; text-align: center; padding: 1.5rem 0; border-bottom: var(--border-style); } .work-description { font-family: var(--font-serif); font-size: 4.5rem; line-height: 1.1; margin-top: 2.5rem; } / Featured Work — hover interaction: scramble text + cursor-tracking photo / .work-item { position: relative; } .work-itemlabel { position: relative; z-index: 2; } / Hover peek (hover-peek.js) — two pixel images flank the hovered row's centered text and de-pixelate through the case-study hard-cut steps. Boxes are positioned by JS against the label's edges; they never move the label (absolute, out of flow). / .peek { position: absolute; top: 50%; width: 13rem; height: 9rem; transform: translateY(-50%); overflow: hidden; pointer-events: none; z-index: 1; / under the label (z 2), so text always wins / display: none; } .peek.is-on { display: block; } .peek img { display: block; width: 100%; height: 100%; object-fit: cover; } .peek canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; } / FAQ / Extra Content / .faq-section { margin-bottom: 12.5rem; } .faq-header { font-family: var(--font-sans); font-size: 3.75rem; margin-bottom: 1rem; font-weight: 400; } .faq-container { border-top: var(--border-style); display: grid; grid-template-columns: 1fr 2fr; padding-top: 1.5rem; } .faq-label { font-family: var(--font-sans); font-size: 2.5rem; } .faq-list { display: flex; flex-direction: column; } .faq-item { font-family: var(--font-sans); font-size: 2.5rem; text-align: right; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--color-text); } .faq-item:last-child { border-bottom: none; margin-bottom: 0; } / Accordion Q&A:
/
— native semantics, content indexed while collapsed. Same motif as the consent panel: the +/− indicator flips with NO transition, it's a state change. / .faq-itemq { cursor: pointer; list-style: none; / no disclosure triangle / } .faq-itemq::-webkit-details-marker { display: none; } .faq-itemq::after { content: "+"; display: inline-block; margin-left: 0.6em; width: 1em; / reserved box: + → − never shifts the question / text-align: center; } .faq-item[open] > .faq-itemq::after { content: "−"; } / The body wrapper animates height 0↔measured (faq.js). The vertical spacing lives on the INNER .faq-itema, NOT here: padding on the animated element can't collapse at height:0, so it would leave a ~28px sliver of text peeking for a beat on close. With no padding, height:0 truly collapses to nothing; the child's padding still counts toward scrollHeight, so the open measures true. No-JS: no inline height, no motion. / .faq-itembody { overflow: hidden; transition: height 0.56s cubic-bezier(0.23, 1, 0.32, 1); } .faq-itema { max-width: 42rem; margin: 0 0 0 auto; / hugs the right column, under the question / padding: 1.25rem 0 0.5rem; / the question↔answer gap — here, not on the wrapper (collapse-safe) / font-size: 1.75rem; / body voice — same as the nav/agency copy / line-height: 2rem; text-align: left; } .faq-itema a { color: inherit; } / Typewriter scramble (faq.js): the ghost is the real letter and owns the width; the live overlay cycles glyphs on top, so nothing ever reflows. / .faq-word { display: inline-block; } .faq-scr { position: relative; display: inline-block; } .faq-scr.is-pending .faq-scrghost { visibility: hidden; } .faq-scrlive { position: absolute; left: 0; top: 0; } @media (prefers-reduced-motion: reduce) { .faq-itembody { transition: none; } } / Footer / footer { border-top: var(--border-style); padding-top: 1.5rem; padding-bottom: 2.5rem; container-type: inline-size; } .footer-top { display: flex; justify-content: space-between; font-family: var(--font-serif); font-size: 2.5rem; margin-bottom: 5rem; } .footer-socials { display: flex; gap: 1.5rem; } / The footer "Cookies" item is a real