/* =========================================================================== NEW LIGHT DIGITAL — Homepage v1.50 (polished design) Editorial · restrained · red as accent · brand-faithful Type pair: Fraunces (EN/RO display) + Playfair Display (RU display, Cyrillic) + Poppins (UI/body) =========================================================================== */ /* ---------- DESIGN TOKENS ---------- Two-layer architecture: 1. BRAND tokens (--brand-*) are IMMUTABLE — they're the New Light Digital paint colors, fixed by the brand guide. These never change between light and dark mode. 2. SEMANTIC tokens (--color-*) are theme-dependent — they reference brand tokens for their values, and those references flip in dark mode. When writing component CSS, use SEMANTIC tokens for anything that should adapt to the active theme (page bg, body text, card surfaces, borders). Use BRAND tokens directly when a value should stay fixed regardless of theme (e.g., the testimonial card is intentionally dark in both modes; the brand red is always red). The legacy tokens (--ink, --white, etc.) are kept as aliases of the brand tokens so existing CSS that uses them still works as fixed colors. New rules should prefer the new --brand-* / --color-* names. */ :root { /* CSS-level color-scheme declaration. Tells the browser the page is designed for both light and dark modes — pairs with the meta tag in . This stops Samsung Internet's automatic force-dark inversion and lets browsers render form controls / scrollbars to match. */ color-scheme: light dark; /* ===== Brand colors (immutable, per brand guide) ===== */ --brand-ink: #0F1A1D; /* Eerie Black — primary dark */ --brand-ink-soft: #1A2429; /* slightly lifted dark */ --brand-paper: #FFFFFF; /* pure white */ --brand-off-white: #FAFAFB; /* almost-white */ --brand-red: #FF213D; /* Awesome Red */ --brand-red-dark: #C40023; --brand-red-pale: #FFF5F6; --brand-red-glow: rgba(255, 33, 61, 0.08); --brand-gray-line: #E8EAED; --brand-gray-soft: #F4F5F7; --brand-gray-mid: #9CA3AF; --brand-gray-deep: #4A5560; /* ===== Legacy aliases (immutable, point to brand tokens) ===== Existing CSS still uses these names — keep them stable. For NEW theme-adaptive styling, use --color-* instead. */ --ink: var(--brand-ink); --ink-soft: var(--brand-ink-soft); --white: var(--brand-paper); --off-white: var(--brand-off-white); --red: var(--brand-red); --red-dark: var(--brand-red-dark); --red-pale: var(--brand-red-pale); --red-glow: var(--brand-red-glow); --gray-line: var(--brand-gray-line); --gray-soft: var(--brand-gray-soft); --gray-mid: var(--brand-gray-mid); --gray-deep: var(--brand-gray-deep); /* ===== Semantic tokens (theme-adaptive) ===== These define ROLES, not specific colors. In light mode they map to brand colors that read on light. In dark mode (below) the same roles map to brand colors that read on dark. Sections that should "stay the same in both modes" (testimonial cards, How We Engage, footer, pre-footer CTA) use --brand-ink directly and skip the semantic layer — they're intentionally dark always. */ --color-bg: var(--brand-paper); /* page background */ --color-bg-alt: var(--brand-off-white); /* subtly tinted sections */ --color-bg-soft: var(--brand-gray-soft); /* slightly contrasted bands */ --color-surface: var(--brand-paper); /* cards, panels */ --color-surface-alt: var(--brand-off-white); /* slightly recessed surface */ --color-text: var(--brand-ink); /* primary text */ --color-text-soft: var(--brand-gray-deep); /* secondary body text */ /* v1.76 — was var(--brand-gray-mid) #9CA3AF. Bumped to a darker mid-gray so eyebrows, meta text, and any legitimate "mute" use reads properly. Daniel: "that gray has snuck up on me out of nowhere. It is very hard to read, especially in some of these gray sections." Body paragraphs that used to use this token have been switched to --color-text-soft in the same release. */ --color-text-mute: #6B7280; /* eyebrows, captions */ --color-border: var(--brand-gray-line); /* dividers, card edges */ --color-border-strong: var(--brand-ink); /* emphatic borders */ --color-header-bg: rgba(255, 255, 255, 0.85); /* frosted glass header */ --color-header-bg-scrolled: rgba(255, 255, 255, 0.95); /* Type */ --font-display: 'Fraunces', 'Times New Roman', serif; --font-body: 'Poppins', 'Inter', -apple-system, sans-serif; /* v1.73 — pushed Fraunces SOFT axis to 100 (was: 50 on italic only, default on upright). SOFT 100 rounds the corners on every glyph, giving the typeface a warmer, more humanist personality without changing fonts. Distinguishes the site from default-AI-Fraunces templates while keeping the font Daniel chose. The axis is supported via the Fraunces variable font; no extra file size. */ --font-display-opsz: "opsz" 144, "SOFT" 100; --font-display-italic: "opsz" 144, "SOFT" 100; /* Shadows — themed via separate dark-mode override below */ --shadow-soft: 0 2px 12px rgba(15, 26, 29, 0.04); --shadow-card: 0 6px 24px rgba(15, 26, 29, 0.06); --shadow-lift: 0 14px 40px rgba(15, 26, 29, 0.10); /* Layout */ /* Fluid XL: the content frame grows from 1280 up to a 1920 cap on large screens (iMac 24"/27"/5K). clamp's 1280 FLOOR keeps every viewport ≤~1542px at exactly 1280 — so all standard laptops/desktops render identically to the locked baseline; only big displays (~1600px+) fill more of the screen. Body text never runs long because prose is capped independently (.lead = 56ch, hero leads = 540px), so only the layout/cards widen, not the reading line. */ --container: clamp(1280px, 83vw, 1920px); --gutter: 24px; /* Motion */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --t-fast: 180ms; --t-med: 280ms; --t-slow: 480ms; } /* ============================================================ * v2.17 — Punctuation shades for both themes * Locked-dark sections (branding module, result band, quote, * pre-footer CTA, footer) need to read as "deeper" than the * page in BOTH themes: * * Light theme: punctuation = brand-ink (dark on light = high * contrast, makes the section pop against white) * Dark theme: punctuation = #050c0e (darker than the page bg * #0F1A1D = subtle but visible elevation downward) * * This gives dark mode the visual rhythm it was missing in v2.16 * (where everything resolved to the same dark = uniform). * ============================================================ */ :root { --punctuation-bg: var(--brand-ink); --punctuation-text: #ffffff; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --punctuation-bg: #050c0e; --punctuation-text: #ffffff; } } :root[data-theme="dark"] { --punctuation-bg: #050c0e; --punctuation-text: #ffffff; } /* ============================================================ * v2.18 — Subtle alternation for modules 2-10 * Daniel pointed out that modules 2-10 reading all the same * (all white in light, all same dark in dark) felt flat. Add * a subtle two-shade alternation so adjacent modules read as * slightly different surfaces — visible rhythm without the * heavy 3-tier cadence from v2.13 that was rejected. * * Tier A and Tier B are CLOSE shades — the difference is felt * more than seen on first glance, but reads clearly when you * scroll past a transition. * * Light theme: tier-a = #ffffff, tier-b = #faf8f4 (warm off-white) * Dark theme: tier-a = brand-ink (#0F1A1D), tier-b = #1a2329 (lifted) * * Applied via nth-child on direct children of the work-single * article. Module 1 (branding) is at odd position; its * locked-dark rule (.work-hero/.work-nav + .work-module) * sits LATER in source order and overrides for that one slot. * ============================================================ */ :root { --module-bg-a: #ffffff; --module-bg-b: #faf8f4; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --module-bg-a: var(--brand-ink); --module-bg-b: #1a2329; } } :root[data-theme="dark"] { --module-bg-a: var(--brand-ink); --module-bg-b: #1a2329; } article.work-single > .work-module:nth-child(odd) { background: var(--module-bg-a); } article.work-single > .work-module:nth-child(even) { background: var(--module-bg-b); } @media (min-width: 1024px) { :root { --gutter: 56px; } } /* Fluid XL: a little more edge padding once the frame widens on big screens. */ @media (min-width: 1600px) { :root { --gutter: 72px; } } /* ============================================================================ DARK MODE ============================================================================ Activates when (a) the OS prefers dark mode, OR (b) the page is manually toggled via [data-theme="dark"]. Manual [data-theme="light"] forces light regardless of OS preference. Only the SEMANTIC tokens flip. Brand tokens (--brand-*) stay fixed — they're the brand identity. Elements that use --brand-ink directly as background (testimonial cards, footer, How We Engage) stay dark in both modes, which is correct. Legacy aliases (--ink, --white, etc.) also stay fixed. They are used throughout the existing CSS for intentionally-dark or intentionally- light surfaces. We DO NOT flip them. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: var(--brand-ink); --color-bg-alt: #14201F; --color-bg-soft: var(--brand-ink-soft); --color-surface: var(--brand-ink-soft); --color-surface-alt: #14201F; --color-text: var(--brand-paper); --color-text-soft: rgba(255, 255, 255, 0.72); --color-text-mute: rgba(255, 255, 255, 0.62); /* v1.76 — was 0.5; too dim. */ --color-border: rgba(255, 255, 255, 0.1); --color-border-strong: rgba(255, 255, 255, 0.3); --color-header-bg: rgba(15, 26, 29, 0.85); --color-header-bg-scrolled: rgba(15, 26, 29, 0.95); --shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.35); --shadow-card: 0 6px 24px rgba(0, 0, 0, 0.45); --shadow-lift: 0 14px 40px rgba(0, 0, 0, 0.55); } } /* Manual dark mode override — toggleable via data-theme="dark". */ :root[data-theme="dark"] { --color-bg: var(--brand-ink); --color-bg-alt: #14201F; --color-bg-soft: var(--brand-ink-soft); --color-surface: var(--brand-ink-soft); --color-surface-alt: #14201F; --color-text: var(--brand-paper); --color-text-soft: rgba(255, 255, 255, 0.72); --color-text-mute: rgba(255, 255, 255, 0.62); /* v1.76 — was 0.5; too dim. */ --color-border: rgba(255, 255, 255, 0.1); --color-border-strong: rgba(255, 255, 255, 0.3); --color-header-bg: rgba(15, 26, 29, 0.85); --color-header-bg-scrolled: rgba(15, 26, 29, 0.95); --shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.35); --shadow-card: 0 6px 24px rgba(0, 0, 0, 0.45); --shadow-lift: 0 14px 40px rgba(0, 0, 0, 0.55); } /* ---------- RESET ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Reserve space for the scrollbar at all times. When the mobile menu opens we set body { overflow: hidden } which would otherwise remove the scrollbar from layout and shift all fixed-positioned children (notably the burger button) by ~15px horizontally. With stable gutter the layout width never changes. */ scrollbar-gutter: stable; /* Belt-and-braces with body's overflow-x. Some third-party widgets (Cloudflare Turnstile's 300px iframe being the current culprit) can escape a body-only clip when the body isn't the scrolling element on mobile. `overflow-x: clip` on html locks horizontal scrolling at the root without establishing a scrolling context (so position:sticky on .site-header still works). No `hidden` fallback intentionally: putting `overflow-x: hidden` on html stacks scroll containers with body and can break sticky positioning + iOS Safari scrolling. Browsers without `clip` support (<1% of traffic, pre-2021) fall through to body's own `overflow-x: hidden` which is sufficient. */ overflow-x: clip; } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Defensive: prevent any rogue element (overflowing SVG, off-canvas decoration, a third-party widget) from causing the page to scroll horizontally on mobile. `clip` doesn't establish a scroll container, so position:sticky on .site-header still works. Falls back to `hidden` in older browsers. */ overflow-x: hidden; overflow-x: clip; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: 0; background: transparent; } ul, ol { list-style: none; padding: 0; margin: 0; } /* ---------- TYPOGRAPHY ---------- */ h1, h2, h3, h4 { margin: 0; color: var(--color-text); } .h-hero { font-family: var(--font-display); font-variation-settings: var(--font-display-opsz); font-weight: 500; font-size: clamp(40px, 6.5vw, 80px); line-height: 1; letter-spacing: -0.035em; } .h-hero em { font-style: italic; font-variation-settings: var(--font-display-italic); color: var(--red); font-weight: 500; } .h-section { font-family: var(--font-display); font-variation-settings: var(--font-display-opsz); font-weight: 500; font-size: clamp(32px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.025em; } .h-section em { font-style: italic; font-variation-settings: var(--font-display-italic); color: var(--red); font-weight: 500; } /* ---------- LANGUAGE-SPECIFIC FONT OVERRIDE ---------- */ /* Russian doesn't get Cyrillic support from Fraunces. Swap the display font for any element under html[lang^="ru"]. Playfair Display has full Cyrillic. We null the variation-settings since Playfair has no opsz axis. */ html[lang^="ru"] { --font-display: 'Playfair Display', 'Times New Roman', serif; --font-display-opsz: normal; --font-display-italic: normal; } .lead { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--color-text-soft); max-width: 56ch; } .eyebrow { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--red); } .eyebrow--plain::before { display: none; } /* v1.91 — LOCKED RULE: the eyebrow dash line belongs ONLY on left-aligned headers. On any centered section header, drop the dash automatically so we never have to remember the --plain modifier per page. (Daniel: "if it is centered, we should not use the line in front of the heading. If it is left-justified, yes use the line.") */ .section__header--center .eyebrow::before { display: none; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } /* ---------- BUTTONS ---------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 28px; font-size: 15px; font-weight: 500; line-height: 1; border-radius: 6px; border: 1.5px solid transparent; letter-spacing: -0.005em; transition: background-color var(--t-med) var(--ease), border-color var(--t-med) var(--ease), color var(--t-med) var(--ease), transform 140ms ease, box-shadow var(--t-med) var(--ease), height var(--t-med) var(--ease), padding var(--t-med) var(--ease), font-size var(--t-med) var(--ease); white-space: nowrap; overflow: hidden; } /* Phones: tighten side padding so long labels (e.g. RU "Запланировать консультацию") fit with breathing room instead of cramming the arrow against the edge / clipping. */ @media (max-width: 480px) { .btn { padding: 0 18px; gap: 8px; } } /* v1.93 — Hero CTAs stack full-width on phones so their edges line up with the full-width stat/review cards and the rest of the page (a short label like "Получить предложение" otherwise leaves the button narrow with dead space on the right, out of line with the card below it). The homepage hero already reads full-width thanks to its long RU labels; this makes the service / about heroes match. */ @media (max-width: 600px) { .hero__ctas, .about-hero__ctas, .service-hero__ctas { flex-direction: column; align-items: stretch; } .hero__ctas > .btn, .about-hero__ctas > .btn, .service-hero__ctas > .btn { width: 100%; } } .btn--primary { background: var(--ink); color: var(--white); border-color: var(--ink); } .btn--primary:hover, .btn--primary:focus-visible { background: var(--red); border-color: var(--red); box-shadow: 0 12px 30px rgba(255, 33, 61, 0.28); } .btn--primary:active { transform: translateY(1px); } /* Dark mode: the page background is also Eerie Black (--ink), so an ink-on-ink button is invisible. Invert to a light-paper button with ink text — same contrast, opposite polarity. The dark-on-dark sections that DO keep the dark button (testimonial cards, How We Engage, Pre-footer CTA, footer) re-anchor it back with the `.is-on-dark` modifier OR explicit overrides at their own selectors (e.g. `.prefooter__cta .btn--primary` below). The override matches both `@media (prefers-color-scheme: dark)` (system pref) and `:root[data-theme="dark"]` (manual toggle), with `:root[data-theme="light"]` forcing light regardless. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn--primary { background: var(--brand-paper); color: var(--brand-ink); border-color: var(--brand-paper); } :root:not([data-theme="light"]) .btn--primary:hover, :root:not([data-theme="light"]) .btn--primary:focus-visible { background: var(--red); color: var(--brand-paper); border-color: var(--red); } /* v1.66 — definitive hero button treatment in dark theme. Replicates EXACTLY what the prefooter "Still thinking about it?" section does for its own two buttons (.prefooter__cta .btn--primary and .prefooter__cta .btn--ghost-light, both defined further down in this stylesheet). Hero .btn--primary ↔ prefooter .btn--primary (red bg → surface bg on hover, with light glow) Hero .btn--outline ↔ prefooter .btn--ghost-light (transparent + faint border → sharp border on hover, no fill change) v1.62/63/64/65 all got this wrong by missing the two-button mapping. Daniel has been asking for this exact behavior since v1.62. This is the actual correct implementation. */ :root:not([data-theme="light"]) .hero .btn--primary, :root:not([data-theme="light"]) .about-hero .btn--primary { background: var(--red); color: var(--brand-paper); border-color: var(--red); } :root:not([data-theme="light"]) .hero .btn--primary:hover, :root:not([data-theme="light"]) .hero .btn--primary:focus-visible, :root:not([data-theme="light"]) .about-hero .btn--primary:hover, :root:not([data-theme="light"]) .about-hero .btn--primary:focus-visible { background: var(--color-surface); color: var(--color-text); border-color: var(--white); box-shadow: 0 12px 30px rgba(255, 255, 255, 0.12); } :root:not([data-theme="light"]) .hero .btn--outline, :root:not([data-theme="light"]) .about-hero .btn--outline { background: transparent; color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.2); } :root:not([data-theme="light"]) .hero .btn--outline:hover, :root:not([data-theme="light"]) .hero .btn--outline:focus-visible, :root:not([data-theme="light"]) .about-hero .btn--outline:hover, :root:not([data-theme="light"]) .about-hero .btn--outline:focus-visible { background: transparent; color: var(--white); border-color: var(--white); box-shadow: none; } } :root[data-theme="dark"] .btn--primary { background: var(--brand-paper); color: var(--brand-ink); border-color: var(--brand-paper); } :root[data-theme="dark"] .btn--primary:hover, :root[data-theme="dark"] .btn--primary:focus-visible { background: var(--red); color: var(--brand-paper); border-color: var(--red); } /* v1.66 — manual dark theme: same prefooter mirror for both hero buttons. */ :root[data-theme="dark"] .hero .btn--primary, :root[data-theme="dark"] .about-hero .btn--primary { background: var(--red); color: var(--brand-paper); border-color: var(--red); } :root[data-theme="dark"] .hero .btn--primary:hover, :root[data-theme="dark"] .hero .btn--primary:focus-visible, :root[data-theme="dark"] .about-hero .btn--primary:hover, :root[data-theme="dark"] .about-hero .btn--primary:focus-visible { background: var(--color-surface); color: var(--color-text); border-color: var(--white); box-shadow: 0 12px 30px rgba(255, 255, 255, 0.12); } :root[data-theme="dark"] .hero .btn--outline, :root[data-theme="dark"] .about-hero .btn--outline { background: transparent; color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.2); } :root[data-theme="dark"] .hero .btn--outline:hover, :root[data-theme="dark"] .hero .btn--outline:focus-visible, :root[data-theme="dark"] .about-hero .btn--outline:hover, :root[data-theme="dark"] .about-hero .btn--outline:focus-visible { background: transparent; color: var(--white); border-color: var(--white); box-shadow: none; } .btn--outline { background: transparent; color: var(--color-text); border-color: var(--color-text); } .btn--outline:hover, .btn--outline:focus-visible { background: var(--ink); color: var(--white); border-color: var(--ink); } .btn__arrow { display: inline-block; transition: transform var(--t-med) var(--ease); } .btn:hover .btn__arrow { transform: translateX(4px); } .link-red { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--red); position: relative; } .link-red::after { content: ""; width: 0; height: 1.5px; background: currentColor; transition: width var(--t-med) var(--ease); position: absolute; bottom: -3px; left: 0; } .link-red:hover { color: var(--red-dark); } .link-red:hover::after { width: 20px; } .link-red__arrow { display: inline-block; transition: transform var(--t-med) var(--ease); } .link-red:hover .link-red__arrow { transform: translateX(4px); } :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; } .btn:focus-visible { outline-offset: 4px; } /* ---------- HEADER ---------- */ .site-header { position: sticky; top: 0; /* v2.25 — z-index bumped from 50 -> 60 so the site header stacks above * the .work-nav sticky portfolio nav (also z-index 50). Same z-index + * later DOM order made .work-nav overlay the header near the page * bottom; bumping the header guarantees it always sits on top. */ z-index: 60; background: var(--color-header-bg); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid transparent; /* v1.64 — flicker fix. The header had intermittent flicker during scroll. Root cause: the combination of `backdrop-filter` (GPU-expensive, re-rasterizes per frame) + `transition: height` on the inner row + `position: sticky` could leave the browser mid-compositing-layer when class toggle happens between requestAnimationFrame ticks. Three coordinated fixes: 1. `isolation: isolate` + `will-change: background-color` here forces the header into its own stacking context and signals to the compositor that backdrop-filter rasterization should be cached. Eliminates the per-frame re-rasterization that caused the "every once in a while" flash. 2. The `transition: height` was moved off .site-header__inner (see below) so the layout reflow on scroll-shrink is INSTANT — no in-flight animation to be interrupted. 3. The hysteresis dead zone in nav.js was already 100/60 from v1.61; widened to 120/40 to make it harder to bounce around the threshold during fast scrolling. */ isolation: isolate; will-change: background-color; transition: background-color var(--t-med) var(--ease), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); } /* v1.63 — admin bar (WP logged-in users) sits at top:0 fixed and was covering our sticky header. Push the header below the admin bar. WP sets html.admin-bar-32 / 46 via inline style; the easier read is `body.admin-bar` + the standard WP breakpoints (admin bar is 32px on desktop, 46px on mobile under 783px). */ body.admin-bar .site-header { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .site-header { top: 46px; } } /* v2.26 — admin-bar-only flicker fix. When logged in, WP's admin bar adds a second fixed compositing layer at top:0. During scroll it and our sticky, backdrop-filtered header race for repaints, so the header occasionally flashes (logged-out users never see it — no admin bar). Promoting the header to its own GPU layer ONLY when the admin bar is present gives the compositor a stable, pre-rasterized surface so the two layers stop fighting. Scoped to .admin-bar so logged-out rendering is untouched. */ body.admin-bar .site-header { transform: translateZ(0); -webkit-transform: translateZ(0); will-change: transform, background-color; backface-visibility: hidden; } /* v2.27 — the element that actually flashes white on scroll is WP's own #wpadminbar (it shares/repaints a layer with our backdrop-filtered sticky header). Promote the admin bar itself to a stable GPU layer so it stops re-rasterizing mid-scroll. Logged-in only (#wpadminbar never exists for visitors), so zero effect on the public site or PageSpeed. */ #wpadminbar { transform: translateZ(0); -webkit-transform: translateZ(0); will-change: transform; backface-visibility: hidden; } /* After 80px scroll, the header tightens: less vertical space, smaller logo, denser feel — keeps focus on content as user moves down the page. */ .site-header.is-scrolled { background: var(--color-header-bg-scrolled); border-bottom-color: var(--color-border); box-shadow: var(--shadow-soft); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 84px; gap: 40px; /* v1.64: NO height transition. The height change on scroll-shrink is instant. Animating height (84→64) caused the inner row to be mid-reflow when the class toggle happened twice in a row near the threshold, leaving the header visibly stuttering. Snap the height instantly and let the OTHER properties (bg, border, shadow) carry the visual transition. */ } .site-header.is-scrolled .site-header__inner { height: 64px; } /* v1.67/68 — at the 960-1199px range (iPad Mini landscape ~1133px, small laptops, Surface Pro 7 landscape) the full desktop nav fits but barely. Reduce the inter-section gap and the nav item gap so brand + nav + lang + CTA don't feel cramped or overlap. At ≥1200px the original generous spacing returns. v1.68 — extended upper bound from 1099 to 1199 per Daniel: iPad Mini landscape at 1133px wasn't getting the tightening because it was just above the old 1099 ceiling. */ @media (min-width: 960px) and (max-width: 1199px) { /* v1.69 — header layout regrouping for the 960-1199 range. justify-content: space-between distributes free space equally between all 4 children (brand, nav, lang, CTA). With unequal item widths the result LOOKS unbalanced — the brand sits isolated from the rest. Fix: push the lang-switcher to the right with margin-left: auto. This keeps brand + nav clustered on the left and lang + CTA clustered on the right. Reads as two visual groups instead of four equally-spaced islands. */ .site-header__inner { justify-content: flex-start; gap: 22px; } .site-header__inner .lang-switch { margin-left: auto; } .site-nav__list { gap: 22px; } .header-cta { padding: 0 18px; height: 44px; font-size: 14px; } .lang-switch { gap: 6px; } } .brand { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; /* never let the header logo get squished to make room for the nav */ } .brand__logo { height: 40px; width: auto; display: block; transition: height var(--t-med) var(--ease); } /* Theme-aware logo swap: light mode shows red logo, dark mode shows color logo. By default the dark logo is hidden; dark mode reveals it and hides the light one. */ .brand__logo--dark { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand__logo--light { display: none; } :root:not([data-theme="light"]) .brand__logo--dark { display: block; } } :root[data-theme="dark"] .brand__logo--light { display: none; } :root[data-theme="dark"] .brand__logo--dark { display: block; } .brand--header .brand__logo { height: 38px; } .site-header.is-scrolled .brand--header .brand__logo { height: 30px; } .brand--footer .brand__logo { height: 44px; } @media (max-width: 540px) { .brand--header .brand__logo { height: 32px; } .site-header.is-scrolled .brand--header .brand__logo { height: 26px; } } .site-nav { display: none; } .site-nav__list { display: flex; gap: 36px; list-style: none; padding: 0; margin: 0; } /* Style both the explicit .site-nav__link class (used in static markup) AND the implicit child of
  • (used when wp_nav_menu() renders the menu in WordPress). This way the same CSS works in mockup and production. */ .site-nav__link, .site-nav__list > li > a { font-size: 15px; font-weight: 500; color: var(--color-text); position: relative; padding: 6px 0; transition: color var(--t-med) var(--ease); display: inline-block; text-decoration: none; /* v1.70 — keep multi-word labels ("Our Work") on a single line. At iPad Mini landscape (1133px) the nav row is just tight enough that the space inside "Our Work" became a soft wrap point. */ white-space: nowrap; } .site-nav__link::after, .site-nav__list > li > a::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: var(--red); transition: width var(--t-med) var(--ease); transform: translateX(-50%); } .site-nav__link:hover::after, .site-nav__link--active::after, .site-nav__list > li > a:hover::after, /* WP uses .current-menu-item on the active page's
  • . */ .site-nav__list > li.current-menu-item > a::after, .site-nav__list > li.current_page_item > a::after { width: 24px; } .site-nav__link:hover, .site-nav__list > li > a:hover { color: var(--red); } /* ---- Submenu dropdowns ---- WP menus may include nested