/* ============================================================ Efficioloop — Redesign (2026) "Quiet leverage", rebuilt around two reference feelings: · PandaOS — calm, airy, centered, generous negative space · Bloxs — faint 1px structural lines, framed cards, no heavy boxes or drop shadows, engineered texture ------------------------------------------------------------ The whole page sits on ONE consistent almost-white canvas. No pure white on large surfaces. No navy band. No giant loop shapes. Structure comes from hairlines (brand Dark Blue @10%), not fills or shadows. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap'); /* ============================================================ PALETTES — three minimal directions. Switched via the [data-palette] attribute on . Each one keeps the structural hairline as the brand Dark Blue at 10% opacity (per brief); they differ in canvas warmth + the single accent. ============================================================ */ :root, :root[data-palette="indigo"] { /* A · Indigo — brand-faithful. Cool almost-white, violet accent. */ --canvas: #FAFAFB; /* the one true canvas — almost white */ --canvas-sink: #F5F5F8; /* very faint recessed wells (inputs, code) */ --surface: #FCFCFD; /* cards — a hair lighter than canvas, never pure white */ --ink: #1B1A38; /* headings — deep indigo (slightly desaturated) */ --ink-body: #43475C; /* body text */ --ink-muted: #777C90; /* meta / captions */ --ink-faint: #A2A6B6; /* placeholder */ --rule: 22, 16, 84; /* brand Dark Blue, as r,g,b for alpha rules */ --line: rgba(var(--rule), 0.10); /* THE structural hairline */ --line-soft: rgba(var(--rule), 0.06); --line-strong: rgba(var(--rule), 0.16); --accent: #6862F0; --accent-deep: #524ED9; --accent-tint: rgba(104, 98, 240, 0.08); --on-accent: #FAFAFB; } :root[data-palette="slate"] { /* B · Slate Blue — cooler, engineered. Neutral white, blue accent. */ --canvas: #F7F8FA; --canvas-sink: #F0F2F5; --surface: #FBFBFD; --ink: #16202E; --ink-body: #44505F; --ink-muted: #79828F; --ink-faint: #A4ABB5; --rule: 22, 32, 46; --line: rgba(var(--rule), 0.10); --line-soft: rgba(var(--rule), 0.06); --line-strong: rgba(var(--rule), 0.16); --accent: #2F56E0; --accent-deep: #2243C4; --accent-tint: rgba(47, 86, 224, 0.07); --on-accent: #FAFAFB; } :root[data-palette="graphite"] { /* C · Graphite — near-monochrome, warm-neutral white, ink accent. The most minimal direction: almost no colour at all. */ --canvas: #FAF9F7; /* warm almost-white */ --canvas-sink: #F4F3F0; --surface: #FCFBFA; --ink: #1C1A24; --ink-body: #4A4754; --ink-muted: #817D89; --ink-faint: #ABA7B0; --rule: 28, 24, 44; --line: rgba(var(--rule), 0.10); --line-soft: rgba(var(--rule), 0.06); --line-strong: rgba(var(--rule), 0.15); --accent: #1C1A24; /* the ink itself is the accent — quiet */ --accent-deep: #000000; --accent-tint: rgba(47, 86, 224, 0.08); --on-accent: #FAFAFB; } /* ============================================================ MUTED LIGHT THEME SCOPE ============================================================ */ .theme-muted { /* A very faint, highly sophisticated cool grey/blue. Just dark enough to look like a separate section, light enough to remain airy. */ --canvas: #F0F1F6; --canvas-sink: #E9EAEF; --surface: #FAFAFB; /* Pure structural off-white for cards, forcing them to pop. */ --line: rgba(var(--rule), 0.08); --line-soft: rgba(var(--rule), 0.04); --line-strong: rgba(var(--rule), 0.15); --shadow-color: rgba(0, 0, 0, 0.06); background-color: var(--canvas); } /* ============================================================ TOKENS — type, space, motion (palette-independent) ============================================================ */ :root { --font-display: 'Montserrat', system-ui, sans-serif; --font-body: 'Lora', Georgia, serif; --font-mono: 'Montserrat', system-ui, sans-serif; /* TYPE SCALE — same modular ratios, bumped ~7% again across the whole ladder so every step keeps its proportional relationship. display 62 · h1 46 · h2 39 · h3 27 · h4 20 · lead 19 · body 18 */ --fs-display: clamp(44px, 6vw, 92px); /* hero headline */ --fs-h1: clamp(33px, 3.2vw, 46px); /* page / CTA title */ --fs-h2: clamp(28px, 2.9vw, 39px); /* section title */ --fs-h3: clamp(22px, 1.8vw, 27px); /* card title */ --fs-h4: 20px; /* small heading */ --fs-lead: clamp(17px, 15px + 0.3vw, 19px); /* subtitle / intro */ --fs-body: clamp(16px, 14px + 0.3vw, 18px); --fs-small: 16px; --fs-micro: 14px; --lh-tight: 1.08; --lh-snug: 1.22; --lh-normal: 1.5; --lh-relaxed: 1.62; --ls-tight: -0.02em; --ls-snug: -0.01em; --ls-wide: 0.14em; --maxw: 1340px; /* the framed content column */ --gutter: clamp(22px, 4.5vw, 64px); --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --fast: 140ms; --base: 240ms; --slow: 560ms; } /* DENSITY — the type/space scale can be nudged for the whole page. Default (regular) is the smaller scale the brief asked for. */ html[data-density="compact"] { --fs-display: clamp(31px, 3.4vw, 47px); --fs-h1: clamp(26px, 2.5vw, 35px); --fs-h2: clamp(22px, 2.2vw, 30px); --fs-h3: clamp(19px, 1.5vw, 21px); --fs-lead: 16px; --fs-body: 15px; } html[data-density="spacious"] { --fs-display: clamp(39px, 4.4vw, 62px); --fs-h1: clamp(32px, 3.1vw, 46px); --fs-h2: clamp(27px, 2.8vw, 39px); --fs-h3: clamp(21px, 1.7vw, 25px); --fs-lead: 18px; --gutter: clamp(24px, 5vw, 80px); } /* ============================================================ RESET / BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* Smooth scroll only enabled AFTER load (via .smooth-scroll class added by app.jsx). Default 'auto' so refresh-time scroll restoration snaps instantly instead of animating from y=0 to the saved position (the "page jumps down on refresh" symptom). */ scroll-behavior: auto; scroll-padding-top: 88px; } html.smooth-scroll { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--ink-body); background: var(--canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* overflow-x: clip prevents horizontal overflow WITHOUT promoting body to a scroll container — which `hidden` does, breaking position:sticky for descendants. Required for the pinned How-It-Works section. */ overflow-x: clip; } /* The texture is the calmest possible whisper: a soft cool light at the very top of the page (like the PandaOS sky), NOT a grid. It fades out fast so the canvas stays open and airy. Toggleable via [data-texture]. */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(140% 55% at 50% -8%, var(--accent-tint) 0%, transparent 60%); opacity: 1; transition: opacity var(--slow) var(--ease); } html[data-texture="off"] body::before { opacity: 0; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; color: var(--ink); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); margin: 0; text-wrap: balance; } h3, h4 { letter-spacing: var(--ls-snug); line-height: var(--lh-snug); } p { margin: 0; text-wrap: pretty; } a { color: inherit; text-decoration: none; } svg { display: block; } ::selection { background: var(--accent-tint); color: var(--ink); } /* On dark panels (stats, CTA) the default lavender-tinted highlight leaves the (forced-dark) text unreadable against the navy bg. Invert the selection palette inside these panels: solid accent bg + near-white text. */ .stats-section ::selection, .cta-section ::selection { background: color-mix(in srgb, var(--accent) 55%, transparent); color: #F5F5FB; } /* ============================================================ LAYOUT — an open, centered column. No rails, no frame. Sections are separated by generous whitespace; lines appear only as small, calm details (a short centered tick above a label; soft card borders). This keeps the airy PandaOS feeling. ============================================================ */ .page { position: relative; z-index: 1; } /* Promote every top-level section container so its content rasterizes as a flat texture before the nav's backdrop-filter samples it. Using will-change instead of an explicit transform avoids the subpixel jitter that translate3d causes during Lenis smooth scroll. */ .hero, .section, .cta, .footer, .proof { will-change: transform; } .frame { width: min(100%, var(--maxw)); margin-inline: auto; position: relative; } /* the column sits on the canvas; content gets breathing gutters */ .inner { padding-inline: var(--gutter); } /* a SUBTLE detail: a short centered vertical tick above a section label (the PandaOS divider). The only "line" the eye notices, and it's tiny. */ .tick-label { display: flex; flex-direction: column; align-items: center; } .tick-label::before { content: ""; width: 1px; height: 30px; background: linear-gradient(to bottom, transparent, var(--line-strong)); margin-bottom: 22px; } /* ============================================================ ELEMENTS — eyebrow, lead, links ============================================================ */ .eyebrow { font-family: var(--font-display); /* Scales down on small viewports — 14px reads heavy and crowds the narrow content column on phones; 11px is the floor where the uppercase + wide-tracking still feels deliberate. */ font-size: clamp(11px, 1.3vw, 14px); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--ink-muted); display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; } /* Brackets the eyebrow text on both sides with a small vertical pill in light violet. Pure CSS shape — no mask, no filter — so it reads as a clean, calm punctuation mark on each side of the label. */ .eyebrow::before, .eyebrow::after { content: ""; width: 3px; height: 12px; border-radius: var(--r-pill); /* Derived from --accent so future hue shifts propagate automatically. 35% accent + 65% white = light tint of the brand colour. */ background-color: color-mix(in srgb, var(--accent) 35%, white); flex: none; } /* letter-spacing adds tracking after the LAST glyph too, so the gap to ::after looks ~0.14em wider than the gap to ::before. Pulling ::after left by that much cancels the asymmetry. */ .eyebrow::after { margin-left: -0.14em; } /* eyebrow rendered as a bordered pill (used over centered heads) */ .eyebrow.pill { border: 1px solid var(--line); border-radius: var(--r-md); padding: 7px 15px 7px 13px; background: var(--surface); white-space: nowrap; } /* Drop the "Custom" prefix on very small screens — at ≤400px the pill gets cramped enough that trimming one word buys meaningful breathing room without changing the message materially. */ @media (max-width: 400px) { .eyebrow-trim { display: none; } } .lead { font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--ink-body); } .accent-word { background-image: url('textures/background-texture.jpg'); background-size: cover; background-position: center; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; /* Dropping the brightness keeps the exact hue as the cards but ensures the text is dark enough to read against the white canvas */ filter: hue-rotate(15deg) saturate(1.3) contrast(1.15) brightness(0.95); /* Tiny right padding so the heavy 900-weight rightmost glyph isn't clipped at the filter's render-region boundary. background-clip: text means this added space stays empty (no extra texture). */ padding-right: 0.05em; } /* ============================================================ BUTTONS — squared, compact, confident. Primary = solid accent (ink in graphite). Secondary = framed. ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small); letter-spacing: var(--ls-snug); line-height: 1; /* asymmetric padding: comfortable text on the left, tight on the right so the arrow chip is inset 6px from the edge */ padding: 6px 6px 6px 22px; border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background var(--base) var(--ease), border-color var(--base) var(--ease), color var(--base) var(--ease), transform var(--base) var(--ease); } /* The arrow is now a small chip — a contrasting tile inset on the right of the button. On purple primary it lifts via a translucent white overlay; on light secondary it deepens via a translucent ink overlay. No more sliding-arrow on hover; the chip's background shifts instead. */ .btn .arrow { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--r-sm); font-size: 14px; line-height: 1; transition: background var(--base) var(--ease); } .btn-primary { background: var(--ink); color: var(--on-accent); border-color: var(--ink); } .btn-primary .arrow { background: rgba(255, 255, 255, 0.18); } .btn-primary:hover { background: color-mix(in srgb, var(--ink) 86%, #000); border-color: color-mix(in srgb, var(--ink) 86%, #000); transform: translateY(-1px); } .btn-primary:hover .arrow { background: rgba(255, 255, 255, 0.26); } .btn-primary:active { transform: scale(0.985); } .btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); } .btn-secondary .arrow { background: rgba(22, 16, 84, 0.06); color: var(--ink); } .btn-secondary:hover { border-color: var(--ink-muted); transform: translateY(-1px); } .btn-secondary:hover .arrow { background: rgba(22, 16, 84, 0.10); } .btn-secondary:active { transform: scale(0.985); } .btn-ghost { background: transparent; color: var(--ink); } .btn-ghost:hover { background: var(--canvas-sink); } /* ============================================================ NAV — clean, open PandaOS-style top bar. Logo left, links centered, CTA right. No frame; just a hairline base on scroll. ============================================================ */ /* Clean PandaOS-style glass: a single flat translucent fill + backdrop blur + a hairline base. No gradient layers, no inset highlight, no saturate — just a calm, uniform glass surface. */ .nav-wrap { position: sticky; top: 0; z-index: 50; /* Premium glass recipe: saturation lift for color body, soft vertical gradient for depth, 1px inner top highlight for optical thickness, soft outer shadow to separate nav from content beneath. */ background: linear-gradient( to bottom, color-mix(in srgb, var(--canvas) 72%, transparent) 0%, color-mix(in srgb, var(--canvas) 64%, transparent) 100% ); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); border-bottom: 1px solid var(--line-soft); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(20, 24, 50, 0.04); transition: background var(--base) var(--ease), box-shadow var(--base) var(--ease), border-bottom-color var(--base) var(--ease); } .nav-wrap.scrolled { background: linear-gradient( to bottom, color-mix(in srgb, var(--canvas) 86%, transparent) 0%, color-mix(in srgb, var(--canvas) 80%, transparent) 100% ); } /* When the mobile menu is open, the nav matches the menu panel's surface (96/94 canvas mix, same blur) and drops its glass-specific details (inset top highlight, soft outer shadow, bottom border) so the nav + panel read as one continuous surface. On close, the class is removed and the glass recipe transitions back smoothly. */ .nav-wrap.is-menu-open { background: linear-gradient( to bottom, color-mix(in srgb, var(--canvas) 96%, transparent) 0%, color-mix(in srgb, var(--canvas) 94%, transparent) 100% ); border-bottom-color: transparent; box-shadow: none; } .nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 68px; gap: 24px; } /* Wordmark inherits fill from currentColor (var(--ink) = deep navy) */ .nav-logo { color: var(--ink); height: 35px; display: inline-flex; justify-self: start; } .nav-logo svg { height: 100%; width: auto; } /* On really small viewports the full wordmark crowds the right-side nav cluster (hamburger + Book a call). Swap to the icon mark only. */ .nav-logo-mark { display: none; } @media (max-width: 480px) { .nav-logo-full { display: none; } /* Mark renders a tiny bit smaller than the wordmark's full height — icon marks feel right at slightly more compact proportions, and it gives the hamburger room without crowding. */ .nav-logo-mark { display: block; height: 82%; } } .nav-links { display: flex; align-items: center; gap: 32px; justify-self: center; } .nav-links a { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small); color: var(--ink-body); letter-spacing: var(--ls-snug); transition: color var(--fast) var(--ease); } .nav-links a:hover { color: var(--ink); } .nav-right { display: flex; align-items: center; gap: 18px; justify-self: end; } .nav-login { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-small); color: var(--ink-body); letter-spacing: var(--ls-snug); transition: color var(--fast) var(--ease); } .nav-login:hover { color: var(--ink); } @media (max-width: 860px) { .nav { grid-template-columns: 1fr auto; } .nav-links, .nav-login { display: none; } } /* ============================================================ MOBILE NAV — hamburger toggle + dropdown panel ============================================================ Only visible at ≤860px (where .nav-links is hidden). Toggle sits in .nav-right next to the primary CTA. Panel slides down from the bottom of the sticky nav-wrap; a fixed backdrop below the nav intercepts outside clicks to close. */ .nav-menu-toggle { display: none; background: transparent; border: 0; width: 40px; height: 40px; padding: 0; cursor: pointer; color: var(--ink-body); border-radius: var(--r-pill); align-items: center; justify-content: center; transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease); } .nav-menu-toggle:hover { color: var(--ink); } /* Animated hamburger — two lines that rotate + translate into an X. transform-based so it runs on the GPU compositor; expressive curve so the morph reads as deliberate. */ .nav-menu-toggle-icon { display: block; position: relative; width: 18px; height: 14px; } .nav-menu-toggle-line { position: absolute; left: 0; width: 100%; /* Integer pixel values for crisp rendering on all DPRs. */ height: 2px; background: currentColor; border-radius: 1px; transform-origin: center; transition: transform 380ms cubic-bezier(0.65, 0, 0.35, 1); } /* Container is 14px tall. Lines at top:3/bottom:3 sit with centers at y=4 and y=10. Container center is y=7. Each line needs to travel 3px (not 4) to converge exactly at the center — that's the fix for the asymmetric X. */ .nav-menu-toggle-line:nth-child(1) { top: 3px; } .nav-menu-toggle-line:nth-child(2) { bottom: 3px; } .nav-menu-toggle[aria-expanded="true"] .nav-menu-toggle-line:nth-child(1) { transform: translateY(3px) rotate(45deg); } .nav-menu-toggle[aria-expanded="true"] .nav-menu-toggle-line:nth-child(2) { transform: translateY(-3px) rotate(-45deg); } @media (max-width: 860px) { /* On mobile, the desktop "Let's talk" button is hidden — its job moves inside the dropdown menu (.nav-menu-cta). Hamburger gets bigger to compensate for being the only nav-right control. */ .nav-right .btn-primary { display: none; } .nav-menu-toggle { display: inline-flex; width: 56px; height: 56px; } .nav-menu-toggle-icon { width: 32px; height: 24px; } .nav-menu-toggle-line:nth-child(1) { top: 6px; } .nav-menu-toggle-line:nth-child(2) { bottom: 6px; } /* Re-tune the X morph for the larger icon — container center is at y=12; lines start at y=7 / y=17, so each travels 5px to converge. */ .nav-menu-toggle[aria-expanded="true"] .nav-menu-toggle-line:nth-child(1) { transform: translateY(5px) rotate(45deg); } .nav-menu-toggle[aria-expanded="true"] .nav-menu-toggle-line:nth-child(2) { transform: translateY(-5px) rotate(-45deg); } } /* Panel sits absolute below the nav-wrap. Because nav-wrap is position: sticky, it's the positioning ancestor — panel stays anchored as the nav stays at the top of the viewport. */ .nav-menu-panel { position: absolute; top: 100%; left: 0; right: 0; background: linear-gradient( to bottom, color-mix(in srgb, var(--canvas) 96%, transparent) 0%, color-mix(in srgb, var(--canvas) 94%, transparent) 100% ); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); border-bottom: 1px solid var(--line); z-index: 1; /* Default (closed) state — transitions handle BOTH appear and disappear when the .is-open class is added/removed. */ opacity: 0; transform: translateY(-12px); visibility: hidden; pointer-events: none; /* Visibility transition delayed until after opacity/transform finish, so the panel stays interactive throughout the fade-out. */ transition: opacity 380ms cubic-bezier(0.16, 1, 0.3, 1), transform 380ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 380ms; } .nav-menu-panel.is-open { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; /* On open: visibility kicks in immediately (no delay). */ transition: opacity 380ms cubic-bezier(0.16, 1, 0.3, 1), transform 380ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s; } .nav-menu-links { list-style: none; /* Vertical breathing room above (from nav) and below (before foot). */ margin: clamp(24px, 5vh, 40px) 0 0; padding: 0; display: flex; flex-direction: column; } /* Items cascade in with staggered delays on open. On close, all items transition together (no stagger) so the panel can complete its collapse cleanly. */ .nav-menu-links li { opacity: 0; transform: translateY(8px); transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1), transform 320ms cubic-bezier(0.16, 1, 0.3, 1); } .nav-menu-panel.is-open .nav-menu-links li { opacity: 1; transform: translateY(0); } .nav-menu-panel.is-open .nav-menu-links li:nth-child(1) { transition-delay: 140ms; } .nav-menu-panel.is-open .nav-menu-links li:nth-child(2) { transition-delay: 220ms; } .nav-menu-panel.is-open .nav-menu-links li:nth-child(3) { transition-delay: 300ms; } .nav-menu-links a { display: block; /* Big centered display type for the editorial menu pattern. Sized so the scale stays sensible across every breakpoint where the burger menu shows (0–860px): the previous 6.4vw curve hit its ceiling and then sat at 44px for the whole 688–860px range, which read as way too big on tablet-portrait viewports. */ padding: 6px 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 13px + 1.1vw, 22px); line-height: 1.1; letter-spacing: var(--ls-tight); color: var(--ink); text-align: center; text-decoration: none; transition: color var(--fast) var(--ease); } .nav-menu-links a:hover { color: var(--accent); } /* Foot block at the bottom of the mobile menu — small "Get in touch" label above a styled "Let's talk" text link. Replaces the previous .nav-menu-cta button to match the editorial menu pattern (centered big links above + small connect block below). */ .nav-menu-foot { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; /* Space between the big links above and the Connect block. */ margin-top: clamp(28px, 5vh, 48px); margin-bottom: clamp(24px, 4vh, 36px); /* Cascade in after the menu links. */ opacity: 0; transform: translateY(8px); transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1), transform 320ms cubic-bezier(0.16, 1, 0.3, 1); } .nav-menu-panel.is-open .nav-menu-foot { opacity: 1; transform: translateY(0); transition-delay: 300ms; } .nav-menu-foot-label { font-family: var(--font-display); font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--ink-muted); } .nav-menu-foot-cta { display: inline-flex; align-items: center; gap: 10px; background: transparent; border: 0; padding: 0; cursor: pointer; font-family: var(--font-display); font-weight: 700; /* Distinctly smaller than .nav-menu-links a at every viewport so the visual weight (underline + arrow chip) doesn't make the CTA appear larger. Faster vw rate (0.95 vs 1.1) shrinks sooner on small viewports; lower ceiling caps it well below the link size. */ font-size: clamp(15px, 11px + 0.95vw, 19px); letter-spacing: var(--ls-tight); line-height: 1.2; color: var(--ink); transition: color var(--fast) var(--ease); } /* Underline lives ONLY on the text span — not on the arrow. */ .nav-menu-foot-cta-text { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--line-strong); transition: text-decoration-color var(--base) var(--ease); } .nav-menu-foot-cta:hover { color: var(--accent); } .nav-menu-foot-cta:hover .nav-menu-foot-cta-text { text-decoration-color: transparent; } .nav-menu-foot-cta .arrow { display: inline-flex; align-items: center; justify-content: center; width: 1.1em; height: 1.1em; font-size: 0.7em; } /* Backdrop covers everything below the nav so taps anywhere outside the panel close it. z-index 49 = under nav-wrap (z-50) and panel, over page content. Subtle backdrop-filter blur adds an atmospheric recede instead of a flat color wash. Always rendered; visibility driven by the .is-open class so transitions can play both ways. */ .nav-menu-backdrop { position: fixed; top: 68px; left: 0; right: 0; bottom: 0; background: rgba(20, 18, 58, 0.22); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 49; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 320ms; } .nav-menu-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s; } /* ============================================================ HERO — centered, airy. The negative space IS the design. No background mark, no wash. Eyebrow pill · headline · sub · buttons · meta, then a framed product placeholder below. ============================================================ */ .hero { text-align: center; display: flex; flex-direction: column; align-items: center; padding-block: clamp(84px, 12.5vh, 150px) clamp(112px, 15.5vh, 190px); position: relative; overflow: hidden; isolation: isolate; } /* Tighter hero on small phones — the desktop clamp values are too tall for narrow viewports where the headline is also wrapping to more lines (adding intrinsic height). */ @media (max-width: 600px) { .hero { padding-block: clamp(56px, 9vh, 88px) clamp(72px, 11vh, 112px); } } /* Paper texture wash across the hero. Same image + multiply treatment as the how-cards so the hero feels materially related. Very low opacity and a vertical fade keep it whisper-quiet behind the headline. */ .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: url('textures/background-texture.jpg'); background-size: cover; background-position: center; opacity: 0.18; mix-blend-mode: multiply; filter: hue-rotate(16deg) saturate(1.3) contrast(1.15); /* Radial fade originating from top center — clears the texture around the headline area so the type reads on clean canvas, while letting the texture build up in the lower corners and bottom edges. */ -webkit-mask-image: radial-gradient(ellipse 66% 95% at 50% 0%, transparent 0%, transparent 55%, rgba(0,0,0,0.4) 80%, #000 100%); mask-image: radial-gradient(ellipse 66% 95% at 50% 0%, transparent 0%, transparent 55%, rgba(0,0,0,0.4) 80%, #000 100%); pointer-events: none; } /* the inner column inside the Frame needs to flex its children centered too — h1 and lead p have max-widths and would otherwise sit left-aligned */ .hero .inner { display: flex; flex-direction: column; align-items: center; } /* hero text content sits above the mark */ .hero > .frame { position: relative; z-index: 1; } /* Particle canvas — full viewport width, centered against the hero. The 100vw + translateX(-50%) trick breaks out of any parent width constraint so particles can spawn across the entire screen. */ .hero-particles { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; z-index: 0; pointer-events: none; } .hero .frame { position: relative; z-index: 1; } .hero .eyebrow.pill { margin-bottom: 30px; } .hero h1 { font-size: var(--fs-display); /* Base weight 600 for non-highlighted words. The .accent-word span overrides this back to 800 below so highlighted phrases retain their visual weight against the texture treatment. */ font-weight: 600; /* Tighter tracking than the global --ls-tight (-0.02em) so the display-size headline reads as more compact. Only applied to the hero — section h2/h3 keep the gentler default. */ letter-spacing: -0.03em; line-height: 1.06; max-width: 28ch; } .hero h1 .accent-word { font-weight: 900; } .hero .lead { margin-top: 24px; /* Narrower at the viewport where the headline starts shrinking. The headline ceiling (92px) is hit when 6vw = 92px → at ~1533px. Above that, the subtitle keeps its wider 60ch measure (paired with the fully-grown headline). Below it, the narrower 46ch lets the subtitle wrap sooner so it doesn't outstretch the shrinking title. */ max-width: 46ch; /* Hero subtitle is bumped above the standard --fs-lead so it pairs better with the larger hero headline — but with a lower floor so small phones can scale below 19px instead of being pinned there. Other lead text on the page keeps the smaller --fs-lead size. */ font-size: clamp(17px, 14.5px + 0.55vw, 22px); } /* At wide viewports (≥1533px) the headline is at its ceiling (92px) and the subtitle reverts to the wider 60ch measure — paired with the fully-grown headline. Below that, the .hero .lead rule above keeps the narrower 46ch in play. */ @media (min-width: 1533px) { .hero .lead { max-width: 60ch; } } .hero-ctas { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } /* Hero CTA text swaps to a shorter label on small screens. */ .hero-cta-short { display: none; } @media (max-width: 600px) { .hero-cta-full { display: none; } .hero-cta-short { display: inline; } } .hero-meta { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 18px; font-family: var(--font-display); font-size: var(--fs-small); color: var(--ink-muted); letter-spacing: var(--ls-snug); } .hero-meta .dot { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--accent); display: inline-block; margin-right: 8px; } .hero-meta .sep { color: var(--line-strong); } /* ============================================================ SECTION SCAFFOLD ============================================================ */ .section { padding-block: clamp(44px, 8vh, 100px); } .section.theme-muted { padding-bottom: clamp(44px, 8vh, 100px); } /* Tighter section spacing on mobile — the desktop clamp leaves too much vertical air on phones, where each section already feels bigger relative to viewport. */ @media (max-width: 600px) { .section { padding-block: clamp(28px, 5.5vh, 56px); } .section.theme-muted { padding-bottom: clamp(28px, 5.5vh, 56px); } } .section-head { /* Parent max-width sets the SUBTITLE's wrap width. h2 below has its own slightly narrower max-width. */ max-width: 780px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; text-align: center; } .section-head .eyebrow { margin-bottom: 16px; } /* Right-positioned variant — sized to match the RIGHT COLUMN of a 2-column grid with the same gap as .how-layout. Block sits on the right of the page, text inside stays left-aligned for readability. max-width = 50% of the container minus half the grid gap, so the block corresponds exactly to where the right column would land if this section used the same 2-col grid as how-we-work. */ .section-head--right { max-width: calc(50% - clamp(20px, 3vw, 48px)); margin-left: auto; margin-right: 0; text-align: left; align-items: flex-start; } /* On viewports where .how-layout collapses to 1 column, the right variant should too — give it full container width. */ @media (max-width: 860px) { .section-head--right { max-width: 100%; margin-left: 0; } } .section-head h2 { font-size: var(--fs-h2); line-height: 1.14; max-width: 680px; } .section-head p { margin-top: 16px; color: var(--ink-body); font-size: var(--fs-body); line-height: var(--lh-relaxed); } /* ============================================================ SOCIAL PROOF — a quiet logo row between two rungs ============================================================ */ /* asymmetric padding: top uses the same vh-based scale as full sections so the proof band gets a proper "section break" after the hero, while bottom stays tight to keep the band feeling like a transitional rail */ .proof { padding-top: clamp(64px, 9vh, 104px); padding-bottom: clamp(36px, 5vw, 52px); } .proof-label { text-align: center; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-muted); margin-bottom: 36px; } .proof-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(26px, 5vw, 60px); } .client { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-faint); transition: color var(--base) var(--ease); } .client:hover { color: var(--ink-body); } .client svg { width: 20px; height: 20px; } .client span { font-family: var(--font-display); font-weight: 500; font-size: clamp(18px, 2.5vw, 26px); color: var(--ink-muted); white-space: nowrap; } /* Subtle name label paired with each logo — the logo does the visual heavy lifting, this just aids recognition. Smaller and slightly lighter than the original text-only treatment so the logo stays primary. Higher-specificity selector (.client .brand-name = 0,2,0) beats the .client span rule above (0,1,1). */ .client .brand-name { font-family: var(--font-display); font-weight: 500; font-size: clamp(13px, 1.2vw, 16px); color: var(--ink-muted); letter-spacing: var(--ls-snug); white-space: nowrap; transition: color var(--base) var(--ease); } .client:hover .brand-name { color: var(--ink-body); } /* Brand logo via mask-image — each