/* ===================== PMO Architecture — design tokens Source of truth: Figma vDbgEQ6AMhzACuNSRvwKb5, UI Kit node 2008:1176 cssNames match future Webflow Variables auto-emit (--group--name) ===================== */ @font-face { font-family: 'Aktiv Grotesk'; src: url('../fonts/AktivGrotesk-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } :root { /* swatches — the 5 library variables */ --swatch--charcoal: #262626; --swatch--blue: #0A0071; --swatch--white: #FFFFFF; --swatch--dark-grey: #726F6F; --swatch--off-white: #F5F5F5; /* off-token: only H2 headings («When it makes sense…», article titles) — near-dup of charcoal */ --swatch--black: #000000; /* semantic aliases */ --color--text-primary: var(--swatch--charcoal); --color--text-secondary: var(--swatch--dark-grey); --color--bg-main: var(--swatch--white); --color--button-bg: var(--swatch--blue); --color--button-text: var(--swatch--off-white); --color--accent: var(--swatch--blue); --color--glass-bg: rgba(255, 255, 255, 0.85); /* layout */ --site--margin: 20px; /* page side padding */ --site--gutter: 20px; /* sidebar ↔ content gap */ --site--sidebar: 238px; /* desktop sidebar width */ /* type scale (design uses a single family & weight: Aktiv Grotesk Regular) */ --font-size--h1: 52px; /* desktop headings */ --font-size--h2: 48px; /* section headings («When it makes sense…»), #000 */ --font-size--h1-mob: 28px; /* the only heading size on mobile */ --font-size--h3: 24px; /* card titles / article subheads */ --font-size--h3-mob: 20px; --font-size--body: 16px; /* 130% body */ --font-size--label: 16px; /* 110% nav/meta desktop */ --font-size--label-mob: 15px; --font-size--caption: 14px; /* image captions, mobile button label */ --font-size--small: 13.5px; /* address block (as designed) */ --line-height--tight: 1.1; --line-height--card: 1.2; --line-height--body: 1.3; /* hairline: 0.375px in Figma. Sub-pixel — swap to 1px in Webflow if it ghosts */ --hairline--weight: 0.375px; /* glass bars */ --glass--blur: 15px; } *, *::before, *::after { box-sizing: border-box; } body { background: var(--color--bg-main); color: var(--color--text-primary); font-family: 'Aktiv Grotesk', 'Helvetica Neue', Arial, sans-serif; font-weight: 400; font-size: var(--font-size--body); line-height: var(--line-height--body); margin: 0; } /* NOTE (hd-flow deviation, uniqueness-wins): PMO layout is a fixed sidebar + single flow column, not a 12-col u-grid. Lumos utilities are intentionally not loaded. */ /* slide-scroll: home sections are exactly one viewport (928 = 100svh−40). CSS snap is the FALLBACK ONLY (no JS / reduced motion): when the GSAP slide mode boots it stamps .js-slides on and this snap turns OFF — Chrome re-snaps mandatory containers on every programmatic scroll step, which swallows the tween and makes transitions look instant (known GSAP×snap fight). Desktop only: the mobile design is a normal flow page with dividers. Webflow note: html-level rules can't live in Style Panel → SITE-HEAD embed. */ @media (min-width: 992px) { html:not(.js-slides) { scroll-snap-type: y mandatory; scroll-padding-top: 20px; /* keep the page_main 20px offset on every snap */ } html:not(.js-slides) .page_main > section { scroll-snap-align: start; scroll-snap-stop: always; } } .page_wrap { padding-inline: var(--site--margin); } .page_main { margin-left: calc(var(--site--sidebar) + var(--site--gutter)); padding-block: 20px; /* Figma Frame 505 pad 20/0 */ display: flex; flex-direction: column; align-items: stretch; gap: 1rem; /* breathing seam between slide sections (mobile overrides to 56px per Figma) */ } /* full-bleed fixed hairlines (Figma: Line 33, 1400w — spans the page, fixed with navbar) */ .page_line { position: fixed; left: var(--site--margin); right: var(--site--margin); border-top: var(--hairline--weight) solid var(--swatch--charcoal); z-index: 110; pointer-events: none; } .page_line.is-top { top: var(--site--margin); } .page_line.is-bottom { bottom: var(--site--margin); } /* utilities */ .u-hairline { width: 100%; height: 0; border-top: var(--hairline--weight) solid var(--swatch--charcoal); flex-shrink: 0; } .u-show-mob { display: none; } /* draw-random-underline (Osmo pattern, storyboard: 03_Library/Storyboards/ osmo-draw-random-underline) — hand-drawn brand-blue stroke under links. JS spawns the svg on hover for every [data-underline]. */ [data-underline] { position: relative; } .u-underline { position: absolute; left: -4px; bottom: -7px; width: calc(100% + 8px); height: 6px; overflow: visible; pointer-events: none; color: var(--color--accent); } .u-underline path { fill: none; stroke: currentColor; stroke-width: 1.6px; /* ≈0.1em of the 16px nav size (storyboard ratio) */ stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } /* cursor draw-trail (Osmo pattern, storyboard: 03_Library/Storyboards/ osmo-draw-on-element-with-cursor) — canvas snake behind the pointer. PMO deviation: flat brand-blue stroke, NO mix-blend-mode:difference — on PMO's white ground difference would go yellow-green; solid blue matches the site's pen-scribble language (signatures already sit over photos). */ [data-draw-trail] { position: relative; } .u-draw-trail { position: absolute; inset: 0; pointer-events: none; z-index: 1; /* trail dives UNDER the section content */ } /* content (images, text, button, footer) rides above the trail */ [data-draw-trail] > *:not(.u-draw-trail) { position: relative; z-index: 2; } /* mouse-parallax (theScreener-404 style) — the img inside drifts a few px against the cursor; scale(1.06) hides the travel. Attribute goes on a wrapper that contains ONLY the img (signatures/overlays stay outside). */ [data-mouse-parallax] { overflow: hidden; } [data-mouse-parallax] img { will-change: transform; } /* mobile-only section divider (Figma Lines 39-43 between HomeM sections) */ .u-divider-mob { display: none; } @media (max-width: 991px) { .u-divider-mob { display: block; width: 100%; height: 0; border-top: var(--hairline--weight) solid var(--swatch--charcoal); } } a { color: inherit; text-decoration: none; } /* inline text link inside copy (Figma: underline, from-font) */ .u-link { text-decoration: underline; text-decoration-skip-ink: none; text-underline-position: from-font; transition: color 0.2s ease; } .u-link:hover { color: var(--color--accent); } img { display: block; max-width: 100%; } h1, h2, h3, p { margin: 0; font-weight: 400; } /* buttons — one primary style, zero radius, no designed hover (per source) */ .button_main { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; background: var(--color--button-bg); color: var(--color--button-text); font-size: var(--font-size--label); line-height: var(--line-height--tight); border: 0; border-radius: 0; cursor: pointer; } @media (max-width: 991px) { /* mobile page flow: sections separated by hairlines with 56px gaps (Figma 1:630) */ .page_main { margin-left: 0; display: flex; flex-direction: column; align-items: stretch; gap: 56px; padding-bottom: 77px; /* clear the fixed bottom bar (37) + breathing room */ } .page_line { display: none; } .u-show-mob { display: revert; } .u-hide-mob { display: none; } .button_main { padding: 12px; font-size: var(--font-size--caption); } }