/* ============================================================ MightyLoc base layer ============================================================ Element resets, the design's semantic type classes, accessibility helpers, the floating navy-glass header, and the home boot curtain. All values read the token bridge (tokens.css) so nothing is hard-coded. ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* Page scrollbar -- the native bar is hidden and replaced by a faint floating thumb (.page-scroll, built in interactions.js) that sits OVER the content. A native page scrollbar paints its track over the page canvas (near-white here), so beside the dark hero/footer it showed a near-white channel; floating our own thumb over the content removes that channel entirely (Leonard: barely visible, transparent to whatever is behind it). The page still scrolls with wheel / trackpad / touch / keyboard -- the thumb is only an indicator. overflow-x:clip on (not ) keeps the scroll port, so the catalog's position:sticky filter rail still works and the 100vw full-bleed moving-line can't trigger a horizontal scrollbar. No scrollbar-gutter is needed now that the native bar reserves no space. Inner scroll containers (mobile nav, substrate matrix) are untouched and keep their own native scrollbars. */ html { overflow-x: clip; scrollbar-width: none; /* Firefox + modern Chrome: hide the native bar */ } html::-webkit-scrollbar { width: 0; height: 0; display: none; } /* older Chrome/Safari */ /* The floating indicator. Hidden (opacity 0) until interactions.js adds .is-visible on scroll / edge-hover / drag, then it fades back out when idle. A neutral low-alpha fill reads softly on the light body and the navy hero alike. z-index 40 keeps it below the header (z 50) so it never overlaps the nav. pointer-events is none while idle (so the hidden 10px strip never steals a click) and becomes auto only while shown -- that is when the bar is a real, grabbable scrollbar: drag the thumb, or click the track to jump. */ .page-scroll { position: fixed; top: 0; right: 3px; width: 10px; height: 100%; z-index: 40; pointer-events: none; opacity: 0; transition: opacity 360ms ease; } .page-scroll.is-visible { opacity: 1; pointer-events: auto; } .page-scroll.is-dragging { opacity: 1; } /* never fade out mid-drag */ .page-scroll__thumb { position: absolute; top: 0; /* Centre the 6px thumb in the 10px column so it lines up with the up/down arrow carets (which are centred in the column). Was right:0, which pushed the thumb hard to the corner while the arrows sat ~2px to its left (Leonard). */ right: 2px; width: 6px; min-height: 40px; border-radius: 999px; background: rgba(120, 122, 140, 0.35); cursor: grab; will-change: transform; } .page-scroll.is-dragging .page-scroll__thumb { cursor: grabbing; } /* Up/down arrows at the ends of the bar (classic scrollbar). Faint carets in the same neutral grey, a touch stronger on hover; centred in the 10px column. They reserve ARROW px at each end (12px, matched in interactions.js) so the thumb travels between them. One step per click, auto-repeat while held. */ .page-scroll__arrow { position: absolute; right: 0; width: 10px; height: 12px; margin: 0; padding: 0; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-appearance: none; appearance: none; } .page-scroll__arrow--up { top: 0; } .page-scroll__arrow--down { bottom: 0; } .page-scroll__arrow::before { content: ""; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; transition: transform 120ms ease; } .page-scroll__arrow--up::before { border-bottom: 5px solid rgba(120, 122, 140, 0.5); } .page-scroll__arrow--down::before { border-top: 5px solid rgba(120, 122, 140, 0.5); } .page-scroll__arrow--up:hover::before { border-bottom-color: rgba(120, 122, 140, 0.85); } .page-scroll__arrow--down:hover::before { border-top-color: rgba(120, 122, 140, 0.85); } .page-scroll__arrow:active::before { transform: scale(0.82); } @media (prefers-reduced-motion: reduce) { .page-scroll { transition: none; } .page-scroll__arrow::before { transition: none; } } /* theme.json sets body font/size/colour/background. These are the extras theme.json cannot express. */ body { font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Clip horizontal overflow on the HOME page only (the hero ticker marquee leaks ~20px past the viewport). Scoped to body.home so it never forms a clip context around the catalog's position:sticky filter rail (clip on the catalog body breaks sticky in Chromium). Home has no sticky elements, so clipping is safe. */ body.home { overflow-x: clip; } /* Content tables (core wp:table block, e.g. article comparison tables). With no theme styling they default to 100% width / equal columns and shred to 1-2 words per cell on phones. Let them scroll horizontally below a usable min-width instead. */ .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } /* Phones: fit the table to the screen instead of forcing a 480px min-width, which made 3-4 column comparison tables scroll left-right with the last column cut off (Leonard). table-layout:fixed = equal columns that honour width:100%; smaller type, tight padding, and overflow-wrap so long cell text wraps within its column. Every column shows with vertical scroll only -- no horizontal scroll. Tablet (>=621px) already fits the 480px table, so it is left unchanged. */ @media (max-width: 620px) { .wp-block-table table { min-width: 0; width: 100%; table-layout: fixed; font-size: 13px; line-height: 1.4; } .wp-block-table th, .wp-block-table td { padding: 7px 8px; overflow-wrap: anywhere; hyphens: none; vertical-align: top; } } /* Search results: the query title (h1) and each result title (h2, linked) inherit the huge display font sizes, so every result was 3-4 heading lines tall and the page header pushed the input far down. Scale to a readable list size. */ .wp-block-query-title { font-size: clamp(26px, 5vw, 34px); line-height: 1.15; } .wp-block-query .wp-block-post-title { font-size: clamp(18px, 2.6vw, 21px); line-height: 1.3; } /* Core search block (404 page): match the theme inputs + brand-red button. */ .wp-block-search { max-width: 440px; } .wp-block-search__inside-wrapper { display: flex; align-items: center; gap: 4px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: #fff; padding: 4px; } .wp-block-search__input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font-family: var(--font-body); font-size: 15px; padding: 10px 12px; color: var(--text-primary); } .wp-block-search__input:focus-visible { outline: none; } .wp-block-search .wp-block-search__button { flex: 0 0 auto; background: var(--color-brand-red); color: #fff; border: 0; border-radius: var(--radius-pill); font-family: var(--font-body); font-weight: 600; font-size: 14px; padding: 11px 18px; margin: 0; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); } .wp-block-search .wp-block-search__button:hover { background: var(--color-brand-red-deep); } /* Fixed floating header overlaps content; offset the content on inner pages. The front page (body.home) lets the hero sit under the glass intentionally. */ :root { --header-space: calc(var(--header-h) + var(--header-inset) + var(--space-4)); } body:not(.home) .wp-site-blocks { padding-top: var(--header-space); } html { scroll-padding-top: var(--header-space); } /* Disable scroll anchoring: when a panel expands/collapses (supply-network detail, country tile, FAQ), the viewport stays put instead of the browser auto-adjusting scroll, which was making the page "bounce" on country select (Leonard #5d). */ html { overflow-anchor: none; } /* Non-home pages use a white canvas (Leonard #11): the header-clearance band at the very top was exposing the #fafafa body canvas as a purposeless grey chunk distinct from the white content. White makes the clearance read as page background. The home page keeps its #fafafa canvas behind the navy hero. */ body:not(.home) { background-color: var(--surface-elevated); } /* Hero-led non-home pages (about, contact, catalog, industry, guides): the navy hero is meant to bleed to the very top behind the floating header, exactly like the home hero. The hero already reserves its own header clearance via its padding-top, so the wrapper clearance band above it was just exposing the page canvas as a blank block (Leonard: "huge white block above the image"). Drop the wrapper clearance only where a hero leads the page; prose pages keep it. */ body:not(.home):has(.industry-hero) .wp-site-blocks { padding-top: 0; } /* Full-bleed stacked sections. WordPress applies a 24px block-gap margin to the top-level blocks; on the home page that exposed the #fafafa page background as a white bar above the navy hero. Zero it so the hero/footer sit flush. */ .wp-site-blocks > * { margin-block-start: 0; } /* ============================================================ Semantic type classes (ported from the locked design system) ============================================================ */ .text-display-1 { font-family: var(--font-display); font-size: var(--text-display-1-size); line-height: var(--text-display-1-lh); letter-spacing: var(--text-display-1-tr); font-weight: 700; text-wrap: balance; } .text-display-2 { font-family: var(--font-display); font-size: var(--text-display-2-size); line-height: var(--text-display-2-lh); letter-spacing: var(--text-display-2-tr); font-weight: 700; text-wrap: balance; } .text-display-3 { font-family: var(--font-display); font-size: var(--text-display-3-size); line-height: var(--text-display-3-lh); letter-spacing: var(--text-display-3-tr); font-weight: 700; text-wrap: balance; } .text-h1 { font-family: var(--font-display); font-size: var(--text-h1-size); line-height: var(--text-h1-lh); letter-spacing: var(--text-h1-tr); font-weight: 700; text-wrap: balance; } .text-h2 { font-family: var(--font-display); font-size: var(--text-h2-size); line-height: var(--text-h2-lh); letter-spacing: var(--text-h2-tr); font-weight: 600; text-wrap: balance; } .text-h3 { font-family: var(--font-display); font-size: var(--text-h3-size); line-height: var(--text-h3-lh); letter-spacing: var(--text-h3-tr); font-weight: 600; } .text-body-lg { font-family: var(--font-body); font-size: var(--text-body-lg-size); line-height: var(--text-body-lh); text-wrap: pretty; } .text-body { font-family: var(--font-body); font-size: var(--text-body-size); line-height: var(--text-body-lh); color: var(--text-secondary); text-wrap: pretty; } .text-caption { font-family: var(--font-body); font-size: var(--text-caption-size); line-height: var(--text-caption-lh); color: var(--text-secondary); } .text-eyebrow { font-family: var(--font-body); font-size: var(--text-eyebrow-size); line-height: var(--text-eyebrow-lh); letter-spacing: var(--text-eyebrow-tr); font-weight: 600; text-transform: uppercase; color: var(--text-secondary); } .text-mono, .tabular, .num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } .text-mono { font-family: var(--font-mono); } /* Multilingual baseline */ p, li, td, dd, blockquote { hyphens: none; overflow-wrap: break-word; } :lang(th) { font-family: var(--font-thai); } /* ============================================================ Links + focus + a11y ============================================================ */ :focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; border-radius: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; background: var(--accent-primary); color: var(--text-on-brand); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-family: var(--font-display); font-weight: 600; text-decoration: none; } .skip-link:focus { left: var(--space-4); top: var(--space-4); } /* ============================================================ Floating navy-glass header (ported 1:1 from the locked mockup) ============================================================ */ .site-header { position: fixed; top: var(--header-inset); left: 16px; right: 16px; z-index: 50; max-width: 1240px; margin: 0 auto; background: rgba(25, 22, 64, 0.52); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-lg); box-shadow: var(--shadow-header); color: #fff; transition: background-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); } .site-header.is-menu-open, .site-header.is-lang-open { background: rgba(25, 22, 64, 0.96); box-shadow: 0 16px 48px rgba(25, 22, 64, 0.28); } .site-header__rail { display: flex; align-items: center; gap: 26px; height: var(--header-h); padding: 0 24px; } .site-header__logo { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: #fff; flex: 0 0 auto; position: relative; } .site-header__logo:hover { color: #fff; text-decoration: none; } /* Brand glow: a soft red halo behind the MightyLoc shield that breathes at the top of the page and smoothly fades out as you scroll down, fading back in when you return to the top. The opacity transition (both directions) IS the fade; the pulse animates scale only, never opacity, so it can't override the fade. */ .site-header__logo::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: 43px; top: 50%; width: 118px; height: 118px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(208,38,41,0.50) 0%, rgba(255,122,77,0.26) 40%, rgba(208,38,41,0) 70%); filter: blur(7px); opacity: var(--brand-glow, 1); transition: opacity 120ms linear, width var(--duration-base) var(--ease-out), height var(--duration-base) var(--ease-out), filter var(--duration-base) var(--ease-out); animation: shieldGlowPulse 3.6s ease-in-out infinite; } @keyframes shieldGlowPulse { 0%, 100% { transform: translate(-50%, -50%) scale(0.92); } 50% { transform: translate(-50%, -50%) scale(1.08); } } /* Glow opacity is now scroll-linked via --brand-glow (set in interactions.js): full at the top, fading out gradually, fully gone once the hero is scrolled past. */ @media (prefers-reduced-motion: reduce) { .site-header__logo::before { animation: none; } } /* Hover pushes the brand glow ABOVE its resting/top state (Leonard): the red halo swells and brightens, forced to full opacity even when scrolled past the hero, and the shield itself gains a luminous red-orange bloom. Geometry + filter are transitioned (declared above and on the shield) so the swell eases in. */ .site-header__logo:hover::before { opacity: 1; width: 152px; height: 152px; background: radial-gradient(circle, rgba(208,38,41,0.72) 0%, rgba(255,122,77,0.44) 42%, rgba(208,38,41,0) 72%); filter: blur(9px); } .site-header__shield { height: 86px; width: 86px; object-fit: contain; display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); transition: filter var(--duration-base) var(--ease-out); } .site-header__logo:hover .site-header__shield { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)) drop-shadow(0 0 10px rgba(208, 38, 41, 0.65)) drop-shadow(0 0 22px rgba(255, 122, 77, 0.45)); } .site-header__wordmark { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; overflow: hidden; white-space: nowrap; max-width: 360px; opacity: 0.82; transition: opacity 380ms var(--ease-out), max-width 520ms var(--ease-spring), margin-left 420ms var(--ease-out), transform 420ms var(--ease-out); } /* Small subordinate tagline: keep only the gentle red gloss; the glow now lives on the shield, so drop accent-held's drop-shadow (heldGlow) here. */ .site-header__wordmark.accent-held { animation: heldGloss 7s ease-in-out infinite; filter: none; } /* On any real scroll the whole wordmark animates fully away (no lingering half-translucent state) and animates back in at the top. Threshold class on the header, driven by interactions.js, not scroll-linked opacity. */ .site-header.is-scrolled .site-header__wordmark { opacity: 0; max-width: 0; margin-left: -10px; transform: translateX(-8px); } @media (prefers-reduced-motion: reduce) { .site-header__wordmark { transition: none; } } .site-header__monogram { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: 0.04em; color: #fff; margin-left: -28px; opacity: 0; transition: opacity var(--duration-base) var(--ease-out), margin-left var(--duration-slow) var(--ease-spring); } .site-header__monogram.show { opacity: 1; margin-left: 8px; } .nav-rail { display: none; margin-left: auto; height: 100%; } @media (min-width: 900px) { .nav-rail { display: flex; gap: 4px; } } .nav-rail__item { appearance: none; background: transparent; border: 0; height: 100%; padding: 0 14px; font-family: var(--font-body); font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.78); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; position: relative; text-decoration: none; transition: color var(--duration-fast) var(--ease-out), text-shadow var(--duration-base) var(--ease-out); } .nav-rail__item::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 1px; background: var(--color-brand-red); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-base) var(--ease-out); } /* Nav items glow on hover the same way the MightyLoc logo does (Leonard): a soft red-orange bloom behind the text, using the brand-glow halo's colors. */ .nav-rail__item:hover, .nav-rail__item[aria-expanded="true"] { color: #fff; text-shadow: 0 0 8px rgba(255, 122, 77, 0.55), 0 0 18px rgba(208, 38, 41, 0.45); } .nav-rail__item[aria-expanded="true"]::after { transform: scaleX(1); } .nav-rail__chev { width: 10px; height: 10px; transition: transform var(--duration-base) var(--ease-out); } .nav-rail__item[aria-expanded="true"] .nav-rail__chev { transform: rotate(180deg); } .site-header__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; } @media (min-width: 900px) { .site-header__actions { margin-left: 0; } } .icon-button { position: relative; appearance: none; background: transparent; border: 1px solid transparent; color: rgba(255, 255, 255, 0.85); border-radius: var(--radius-md); width: 36px; min-height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .icon-button:hover { background: rgba(255, 255, 255, 0.10); color: #fff; } .icon-button .search-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--color-brand-red); position: absolute; top: 9px; right: 9px; } /* ---------- Language switcher (current chip + Others dropdown) ---------- */ .lang-switcher { position: static; display: inline-flex; align-items: center; gap: 2px; height: 34px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-pill); padding: 2px; background: rgba(255, 255, 255, 0.04); } .lang-current { appearance: none; border: 0; cursor: default; display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--color-brand-blue-deep); border-radius: var(--radius-pill); padding: 4px 12px; min-height: 26px; line-height: 1; } .lang-current .lang-code { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; opacity: 0.78; } /* opacity raised from 0.55: WCAG AA contrast on the white pill */ .lang-current .lang-name { font-family: var(--font-body); font-size: 12px; font-weight: 600; } .lang-others { appearance: none; border: 0; background: rgba(20, 18, 50, 0.32); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; color: #fff; font-family: var(--font-body); font-size: 12px; font-weight: 500; padding: 4px 12px; min-height: 26px; border-radius: var(--radius-pill); line-height: 1; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .lang-others:hover { color: #fff; background: rgba(20, 18, 50, 0.5); } .lang-chev { width: 9px; height: 9px; transition: transform var(--duration-base) var(--ease-out); } .lang-others[aria-expanded="true"] { color: #fff; background: rgba(20, 18, 50, 0.55); } .lang-others[aria-expanded="true"] .lang-chev { transform: rotate(180deg); } .lang-dropdown { /* Anchored to the floating header (the pill is position:static) so the panel drops cleanly BELOW the whole header bar like the mega-menu, instead of overlapping it (Leonard). */ position: absolute; top: 100%; right: 14px; margin-top: 6px; width: 240px; background: var(--color-brand-blue-deep); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: var(--radius-lg); box-shadow: 0 24px 56px rgba(25, 22, 64, 0.45); padding: 8px; display: flex; flex-direction: column; gap: 2px; opacity: 0; transform: translateY(-10px) scale(0.98); transform-origin: top right; pointer-events: none; transition: opacity 320ms var(--ease-out), transform 380ms var(--ease-spring); z-index: 80; } .lang-dropdown.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .lang-dropdown__label { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); margin: 6px 10px 8px; } .lang-item { appearance: none; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 11px; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 13px; color: rgba(255, 255, 255, 0.88); text-align: left; transition: background-color var(--duration-fast) var(--ease-out); } .lang-item .code { font-family: var(--font-mono); font-size: 11px; color: rgba(255, 255, 255, 0.62); } .lang-item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } .lang-item.is-selected { background: rgba(255, 255, 255, 0.06); color: #fff; font-weight: 600; } .lang-item.is-selected .code { color: var(--color-brand-red); } .lang-dropdown.is-open .lang-item { animation: langIn 360ms var(--ease-out) backwards; } .lang-dropdown.is-open .lang-item:nth-child(2) { animation-delay: 40ms; } .lang-dropdown.is-open .lang-item:nth-child(3) { animation-delay: 80ms; } .lang-dropdown.is-open .lang-item:nth-child(4) { animation-delay: 120ms; } .lang-dropdown.is-open .lang-item:nth-child(5) { animation-delay: 160ms; } .lang-dropdown.is-open .lang-item:nth-child(6) { animation-delay: 200ms; } .lang-dropdown.is-open .lang-item:nth-child(7) { animation-delay: 240ms; } @keyframes langIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } } @media (max-width: 1023px) { .lang-current .lang-name { display: none; } } /* ---------- Mega menu (drops inside the floating header card) ---------- */ .mega-menu { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; background: var(--color-brand-blue-deep); border-radius: var(--radius-lg); box-shadow: 0 24px 56px rgba(25, 22, 64, 0.32); overflow: hidden; max-height: 0; transition: max-height 620ms cubic-bezier(0.22, 1, 0.36, 1); } .mega-menu.is-open { max-height: 600px; } .mega-menu::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--color-brand-red) 30%, color-mix(in oklab, var(--color-brand-blue) 80%, #fff) 60%, transparent); transform: scaleX(0); transform-origin: left; transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1) 60ms; } .mega-menu.is-open::before { transform: scaleX(1); } .mega-menu__inner { padding: 32px 40px 40px; display: grid; grid-template-columns: 1.1fr 2fr; gap: 56px; opacity: 0; transform: translateY(-14px) scale(0.985); filter: blur(6px); transition: opacity 480ms var(--ease-out) 120ms, transform 620ms cubic-bezier(0.22, 1, 0.36, 1) 120ms, filter 460ms var(--ease-out) 120ms; } .mega-menu.is-open .mega-menu__inner { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } .mega-menu__intro h4 { font-family: var(--font-display); font-weight: 700; font-size: 32px; color: #fff; letter-spacing: -0.02em; margin: 0 0 16px; line-height: 1.1; } .mega-menu__intro p { color: rgba(255, 255, 255, 0.70); font-size: 14px; line-height: 1.7; margin: 0 0 24px; max-width: 36ch; } .mega-menu__intro a { color: #fff; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.30); padding-bottom: 4px; transition: border-color var(--duration-fast) var(--ease-out); } .mega-menu__intro a:hover { border-color: var(--color-brand-red); } .mega-menu__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } /* Products panel: family-based, full-width layout (Taft / AFT / Krystal series + the single-SKU lines MightyLoc 9025 and Ninja 108). Drops the intro+3col split. */ .mega-menu__inner--fam { grid-template-columns: 1fr; gap: 22px; } .mega-fam__bar { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .mega-fam__title { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: #fff; letter-spacing: -0.02em; margin: 0; } .mega-fam__all { color: #fff; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.30); padding-bottom: 4px; transition: border-color var(--duration-fast) var(--ease-out); } .mega-fam__all:hover { border-color: var(--color-brand-red); } .mega-fam__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; } .mega-fam__grid .mega-col h5 { color: color-mix(in oklab, var(--color-brand-red) 60%, #fff); } @media (max-width: 1100px) { .mega-fam__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .mega-fam__grid { grid-template-columns: 1fr 1fr; } } .mega-col h5 { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); margin: 0 0 16px; } .mega-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; } .mega-col a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 8px 12px; margin: 0 -12px; border-radius: var(--radius-sm); color: rgba(255, 255, 255, 0.88); text-decoration: none; font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: -0.005em; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .mega-col a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } .mega-col a[aria-disabled="true"] { opacity: 0.45; pointer-events: none; } /* Product name stays on one line; an over-long chemistry label wraps beneath it (right-aligned) instead of squeezing the name into a ragged two-line block -- was the "Taftflex 6292 / Polyurethane Sealant" misalignment. */ .mega-col__name { white-space: nowrap; } .mega-col a .meta { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: rgba(255, 255, 255, 0.62); letter-spacing: 0.04em; } .mega-col a[aria-disabled="true"] .meta { color: rgba(208, 38, 41, 0.85); } /* "See more" row at the foot of a populated column (shows only when the group has more than 4 products). Subtle divider + brand-red accent. */ .mega-col__more { margin-top: 6px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .mega-col__more a { color: color-mix(in oklab, var(--color-brand-red) 72%, #fff); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; } .mega-col__more a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); } /* ---------- Industries mega-menu: "By substrate" is a different axis ---------- Browse-by-material is not a third industry group, so it sits on an elevated inset card with a brand-red eyebrow + a small "Browse by material" badge. Accent matches the Products family-grid h5 (red 60% white): AA on navy (6.1:1) and on the elevated fill (5.35:1). Tokens only; no new hue. */ .mega-col--substrate { position: relative; padding: 18px 20px 16px; margin: -10px -8px 0; /* keep links optically aligned with siblings */ background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.10); border-left: 2px solid color-mix(in oklab, var(--color-brand-red) 60%, #fff); border-radius: var(--radius-md); } .mega-col--substrate h5 { color: color-mix(in oklab, var(--color-brand-red) 60%, #fff); margin-bottom: 8px; } /* Small badge that names the different intent in words, not just colour. */ .mega-col__badge { display: inline-block; margin: 0 0 14px; padding: 3px 9px; border-radius: var(--radius-sm); background: rgba(208, 38, 41, 0.12); font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; color: color-mix(in oklab, var(--color-brand-red) 60%, #fff); } /* Links inside the card: warm the hover so it reads as the same accent family. */ .mega-col--substrate a:hover, .mega-col--substrate a:focus-visible { background: rgba(208, 38, 41, 0.10); color: #fff; } .mega-col--substrate a:focus-visible { outline: 2px solid color-mix(in oklab, var(--color-brand-red) 60%, #fff); outline-offset: 2px; } /* Slower, clearly sequential cascade: the left intro panel leads, then each column reveals one at a time left-to-right (240ms apart), with its links stepping in after the column lands. Tuned per Leonard: left side first. */ .mega-menu.is-open .mega-menu__intro { animation: megaSlide 760ms cubic-bezier(0.22, 1, 0.36, 1) 80ms backwards; } .mega-menu.is-open .mega-col { animation: megaSlide 760ms cubic-bezier(0.22, 1, 0.36, 1) backwards; } .mega-menu.is-open .mega-col:nth-child(1) { animation-delay: 300ms; } .mega-menu.is-open .mega-col:nth-child(2) { animation-delay: 480ms; } .mega-menu.is-open .mega-col:nth-child(3) { animation-delay: 660ms; } .mega-menu.is-open .mega-col:nth-child(4) { animation-delay: 840ms; } @keyframes megaSlide { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .mega-menu.is-open .mega-col li { animation: megaIn 640ms cubic-bezier(0.22, 1, 0.36, 1) backwards; } .mega-menu.is-open .mega-col:nth-child(1) li:nth-child(1) { animation-delay: 380ms; } .mega-menu.is-open .mega-col:nth-child(1) li:nth-child(2) { animation-delay: 450ms; } .mega-menu.is-open .mega-col:nth-child(1) li:nth-child(3) { animation-delay: 520ms; } .mega-menu.is-open .mega-col:nth-child(1) li:nth-child(4) { animation-delay: 590ms; } .mega-menu.is-open .mega-col:nth-child(2) li:nth-child(1) { animation-delay: 620ms; } .mega-menu.is-open .mega-col:nth-child(2) li:nth-child(2) { animation-delay: 690ms; } .mega-menu.is-open .mega-col:nth-child(2) li:nth-child(3) { animation-delay: 760ms; } .mega-menu.is-open .mega-col:nth-child(2) li:nth-child(4) { animation-delay: 830ms; } .mega-menu.is-open .mega-col:nth-child(3) li:nth-child(1) { animation-delay: 860ms; } .mega-menu.is-open .mega-col:nth-child(3) li:nth-child(2) { animation-delay: 930ms; } .mega-menu.is-open .mega-col:nth-child(3) li:nth-child(3) { animation-delay: 1000ms; } .mega-menu.is-open .mega-col:nth-child(3) li:nth-child(4) { animation-delay: 1070ms; } @keyframes megaIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .mega-menu.is-open .mega-menu__intro, .mega-menu.is-open .mega-col, .mega-menu.is-open .mega-col li, .lang-dropdown.is-open .lang-item { animation: none; } } @media (max-width: 900px) { .mega-menu__inner { grid-template-columns: 1fr; gap: 24px; padding: 24px; } .mega-menu__cols { grid-template-columns: 1fr 1fr; } } /* ---------- Header search panel (a mega-menu panel, same navy glass) ---------- */ .search-panel__inner { padding: 28px 40px 32px; opacity: 0; transform: translateY(-12px); transition: opacity 360ms var(--ease-out) 60ms, transform 420ms var(--ease-spring) 60ms; } .mega-menu.is-open .search-panel__inner { opacity: 1; transform: translateY(0); } .search-panel__label { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); margin: 0 0 14px; } .search-panel__field { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.30); border-radius: var(--radius-md); padding: 13px 12px 13px 16px; transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); } .search-panel__field:focus-within { border-color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.09); } .search-panel__field > svg { width: 20px; height: 20px; color: rgba(255, 255, 255, 0.6); flex: 0 0 auto; } .search-panel__input { flex: 1 1 auto; min-width: 0; appearance: none; background: transparent; border: 0; outline: none; color: #fff; font-family: var(--font-display); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; } .search-panel__input::placeholder { color: rgba(255, 255, 255, 0.40); } .search-panel__submit { flex: 0 0 auto; appearance: none; border: 0; cursor: pointer; background: var(--color-brand-red); color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 13px; padding: 9px 16px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 6px; transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-base) var(--ease-spring); } .search-panel__submit:hover { background: var(--color-brand-red-deep); } .search-panel__submit:active { transform: scale(0.97); } .search-panel__hint { margin: 12px 0 0; font-family: var(--font-body); font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, 0.50); } @media (max-width: 980px) { .search-panel__inner { padding: 22px 24px 26px; } } @media (max-width: 560px) { .search-panel__field { flex-wrap: wrap; } .search-panel__submit { width: 100%; justify-content: center; } .search-panel__input { font-size: 16px; } } /* ---------- Mobile header: clearly floating, smaller shield ---------- */ @media (max-width: 820px) { .site-header { top: calc(var(--header-inset) - 4px); left: 12px; right: 12px; background: rgba(25, 22, 64, 0.62); box-shadow: 0 10px 30px rgba(25, 22, 64, 0.30); } .site-header__rail { height: 84px; padding: 0 16px; gap: 12px; } .site-header__shield { height: 70px; width: 70px; } .site-header__logo::before { left: 35px; width: 98px; height: 98px; } .site-header__wordmark { font-size: 11px; letter-spacing: 0.1em; } } /* ---------- Hamburger + mobile nav (shown < 900px; replaces the nav rail) ---------- */ .nav-burger { display: none; margin-left: 4px; flex: 0 0 auto; appearance: none; background: transparent; border: 1px solid transparent; width: 40px; height: 40px; border-radius: var(--radius-md); align-items: center; justify-content: center; cursor: pointer; color: #fff; transition: background-color var(--duration-fast) var(--ease-out); } .nav-burger:hover { background: rgba(255, 255, 255, 0.10); } .nav-burger__box { position: relative; width: 20px; height: 14px; } .nav-burger__line { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: #fff; transition: transform 360ms var(--ease-spring), opacity 200ms var(--ease-out), top 360ms var(--ease-spring); } .nav-burger__line:nth-child(1) { top: 0; } .nav-burger__line:nth-child(2) { top: 6px; } .nav-burger__line:nth-child(3) { top: 12px; } .site-header.is-mobile-open .nav-burger__line:nth-child(1) { top: 6px; transform: rotate(45deg); } .site-header.is-mobile-open .nav-burger__line:nth-child(2) { opacity: 0; } .site-header.is-mobile-open .nav-burger__line:nth-child(3) { top: 6px; transform: rotate(-45deg); } /* Comfortable tap targets for header controls on touch viewports (the search/menu icon buttons were 36px and the language pills 26px tall). Desktop chrome unchanged. */ @media (max-width: 900px) { .icon-button { width: 44px; min-height: 44px; } .nav-burger { width: 44px; height: 44px; } .lang-switcher { height: 40px; padding: 3px; } .lang-current, .lang-others { min-height: 34px; padding: 7px 14px; } } /* Mobile menu drops below the rail as a solid navy panel that mirrors the desktop mega-menu surface. It cannot be a position:fixed full-screen overlay because the header's backdrop-filter makes the header the containing block for fixed descendants (the overlay would be trapped inside the header bar). Solid navy background so the hero never bleeds through. */ .mobile-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; margin-top: 6px; background: rgba(25, 22, 64, 0.98); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border-radius: var(--radius-lg); box-shadow: 0 24px 56px rgba(25, 22, 64, 0.45); padding: 12px 18px 20px; max-height: calc(100vh - var(--header-h) - var(--header-inset) - 28px); overflow-y: auto; -webkit-overflow-scrolling: touch; } .mobile-nav .m-acc { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .mobile-nav .m-acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 15px 4px; color: #fff; font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; } .mobile-nav .m-acc > summary::-webkit-details-marker { display: none; } .mobile-nav .m-acc > summary .m-chev { width: 14px; height: 14px; color: rgba(255, 255, 255, 0.55); transition: transform var(--duration-base) var(--ease-out); } .mobile-nav .m-acc[open] > summary .m-chev { transform: rotate(180deg); } .mobile-nav .m-acc__list { list-style: none; margin: 0; padding: 0 4px 14px; display: flex; flex-direction: column; gap: 2px; } .mobile-nav .m-acc__list a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 8px; border-radius: var(--radius-sm); color: rgba(255, 255, 255, 0.82); text-decoration: none; font-family: var(--font-display); font-size: 15px; font-weight: 500; } .mobile-nav .m-acc__list a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } .mobile-nav .m-acc__list a .meta { font-family: var(--font-mono); font-size: 10px; color: rgba(255, 255, 255, 0.62); letter-spacing: 0.04em; } /* Mobile Industries: "Browse by material" is a different axis, not an industry. */ .m-acc__subhead { margin: 14px 0 4px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.10); font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; color: color-mix(in oklab, var(--color-brand-red) 60%, #fff); } .mobile-nav .m-link { display: block; padding: 15px 4px; color: #fff; font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; } /* Language selector inside the mobile drawer (the desktop pill is hidden < 900px). Reuses the navy .lang-item styling so it matches the desktop dropdown. */ .m-lang { padding: 16px 4px 4px; border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: 6px; } .m-lang__label { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); margin: 0 4px 10px; } .m-lang__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .m-lang .lang-item { width: 100%; } @media (max-width: 899px) { .nav-burger { display: inline-flex; } .site-header.is-mobile-open .mobile-nav { display: block; animation: mnavIn 420ms var(--ease-out); } /* Keep the EN | Others language pill on mobile (Leonard: no language list in the drawer, just the pill that expands on "Others"). The pill is compact here (the long name is hidden <1023px, so it reads "EN Others"). To make room and avoid the old rail overflow, the decorative wordmark/tagline is hidden on mobile; the shield logo stays. */ .site-header__wordmark { display: none; } } @keyframes mnavIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* Staggered reveal to match the desktop mega-menu cascade: when the drawer opens, the top-level sections slide in one after another; when an accordion section opens, its links cascade in left-to-right. */ @media (max-width: 899px) { .site-header.is-mobile-open .mobile-nav > * { animation: mNavSection 460ms var(--ease-out) backwards; } .site-header.is-mobile-open .mobile-nav > *:nth-child(1) { animation-delay: 70ms; } .site-header.is-mobile-open .mobile-nav > *:nth-child(2) { animation-delay: 140ms; } .site-header.is-mobile-open .mobile-nav > *:nth-child(3) { animation-delay: 210ms; } .site-header.is-mobile-open .mobile-nav > *:nth-child(4) { animation-delay: 280ms; } .site-header.is-mobile-open .mobile-nav > *:nth-child(5) { animation-delay: 350ms; } .mobile-nav .m-acc[open] .m-acc__list a { animation: mNavItem 420ms var(--ease-spring) backwards; } .mobile-nav .m-acc[open] .m-acc__list li:nth-child(1) a { animation-delay: 40ms; } .mobile-nav .m-acc[open] .m-acc__list li:nth-child(2) a { animation-delay: 95ms; } .mobile-nav .m-acc[open] .m-acc__list li:nth-child(3) a { animation-delay: 150ms; } .mobile-nav .m-acc[open] .m-acc__list li:nth-child(4) a { animation-delay: 205ms; } .mobile-nav .m-acc[open] .m-acc__list li:nth-child(5) a { animation-delay: 260ms; } .mobile-nav .m-acc[open] .m-acc__list li:nth-child(n+6) a { animation-delay: 315ms; } } @keyframes mNavSection { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes mNavItem { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .site-header.is-mobile-open .mobile-nav > *, .mobile-nav .m-acc[open] .m-acc__list a { animation: none; } } @media (min-width: 900px) { .mobile-nav { display: none !important; } } /* ============================================================ Footer (big animated CTA, ported 1:1 from the mockup) ============================================================ */ .site-footer { background: var(--color-brand-blue-deep); color: var(--text-on-brand); /* Symmetric top/bottom padding so the space above the heading matches the space below the footer content (Leonard: top portion before the title should match the bottom margin). Was space-9 (96px) top vs space-7 (48px) bottom = top-heavy. */ padding: var(--space-7) 32px var(--space-7); position: relative; overflow: hidden; } .site-footer::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 90% 0%, rgba(42, 61, 152, 0.45), transparent 60%); pointer-events: none; } .site-footer__inner { max-width: 1400px; margin: 0 auto; position: relative; } .site-footer__big { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4.4vw, 60px); line-height: 1.05; letter-spacing: -0.03em; color: #fff; margin: 0 0 52px; max-width: 22ch; } .site-footer__big .accent { color: var(--color-brand-red); } /* Footer map: the new dotted-Asia art, ~3x larger as a backdrop watermark (per Leonard 2026-05-31). Transparent PNG, so the dots float on the navy. */ .site-footer__map { position: absolute; right: -40px; top: 8%; z-index: 0; width: min(620px, 55%); height: auto; opacity: 0.16; pointer-events: none; -webkit-mask-image: linear-gradient(to top left, #000 30%, transparent 78%); mask-image: linear-gradient(to top left, #000 30%, transparent 78%); } @media (max-width: 768px) { .site-footer__map { width: 80%; right: -30px; opacity: 0.12; } } .site-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 48px; position: relative; } @media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 24px 20px; } /* The brand block (logo + tagline + address) is far taller than the link columns, so pairing it beside "Industries" left that column floating high and out of place. Give the brand the full row; the three link columns then group tidily below it. */ .site-footer__grid > div:first-child { grid-column: 1 / -1; } } .site-footer__brandline { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } /* Footer shield: deliberately larger than the header mark (Leonard), wordmark dropped. */ .site-footer__brandline img { height: 132px; width: auto; object-fit: contain; } .site-footer__tagline { color: rgba(255, 255, 255, 0.70); font-size: 14px; line-height: 1.7; max-width: 36ch; margin: 0; } .site-footer__addr { margin-top: 24px; font-family: var(--font-mono); font-size: 11px; color: rgba(255, 255, 255, 0.50); line-height: 1.7; letter-spacing: 0.04em; } .site-footer h6 { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.50); margin: 0 0 16px; font-weight: 500; } .site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .site-footer a { color: rgba(255, 255, 255, 0.82); font-size: 14px; display: inline-flex; min-height: 32px; align-items: center; text-decoration: none; transition: color var(--duration-fast) var(--ease-out); font-weight: 500; } .site-footer a:hover { color: #fff; text-decoration: none; } .site-footer__bottom { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid rgba(255, 255, 255, 0.10); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; color: rgba(255, 255, 255, 0.55); font-size: 12px; font-family: var(--font-mono); letter-spacing: 0.06em; } /* Consultancy credit (Ernest Dynamics). A quiet colophon line under the legal row: same mono language, a touch fainter, brand name in brighter white. */ .site-footer__credit { margin: var(--space-5) 0 0; text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.55); } .site-footer__credit-brand { color: rgba(255, 255, 255, 0.72); } /* ============================================================ Boot curtain (home only; CSS-driven so it opens without JS) ============================================================ */ #boot { position: fixed; inset: 0; z-index: 9999; overflow: hidden; pointer-events: none; --boot-ease: var(--ease-out); } #boot .boot-half { position: absolute; left: 0; right: 0; height: 50%; background: var(--color-brand-blue-deep); will-change: transform; } /* Slowed, sequenced boot (Leonard): the glow orb sweeps across FIRST, then the logo rises and lingers ~2x longer, then the curtain splits. Timeline: ~0.12s orb sweeps in -> ~0.95s logo rises -> logo held to 2.7s -> 2.3s seam crack -> 2.7s halves part -> ~3.5s done (JS cap 3600ms). */ #boot .boot-half--top { top: 0; animation: bootTop 760ms var(--boot-ease) 2700ms forwards; } #boot .boot-half--bottom { bottom: 0; animation: bootBottom 760ms var(--boot-ease) 2700ms forwards; } #boot .boot-half::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85) 16%, #fff 50%, rgba(255,255,255,0.85) 84%, transparent); box-shadow: 0 0 22px 1px rgba(255, 255, 255, 0.55); animation: bootSeam 820ms var(--boot-ease) 2300ms forwards; } #boot .boot-half--top::after { bottom: 0; } #boot .boot-half--bottom::after { top: 0; } #boot .boot-glow { position: absolute; z-index: 1; left: 50%; top: 50%; width: 64vmin; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--color-brand-red) 40%, transparent) 0%, color-mix(in oklab, var(--color-brand-blue) 26%, transparent) 40%, transparent 64%); filter: blur(72px); mix-blend-mode: screen; opacity: 0; animation: bootGlowSweep 1200ms var(--ease-out) 120ms forwards; } #boot .boot-fore { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; animation: bootForeOut 480ms var(--ease-out) 2700ms forwards; } #boot .boot-shield { width: 116px; height: 116px; object-fit: contain; opacity: 0; transform: translateY(16px) scale(0.94); filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35)); animation: bootLogoRise 880ms var(--ease-spring) 950ms forwards; } @media (max-width: 600px) { #boot .boot-shield { width: 96px; height: 96px; } } @keyframes bootSeam { to { width: 62%; } } /* Orb sweeps in from the left and settles centre before the logo appears. */ @keyframes bootGlowSweep { 0% { opacity: 0; transform: translate(-128%, -50%) scale(0.82); } 55% { opacity: 1; } 100% { opacity: 0.95; transform: translate(-50%, -50%) scale(1); } } @keyframes bootLogoRise { to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes bootForeOut { to { opacity: 0; } } @keyframes bootTop { to { transform: translateY(-100%); } } @keyframes bootBottom { to { transform: translateY(100%); } } /* Reduced motion: no animation, just reveal content immediately. */ @media (prefers-reduced-motion: reduce) { #boot { display: none; } } /* When JS marks the curtain done (or sessionStorage says already seen), it is removed from the DOM entirely. This class is a belt-and-braces hide. */ #boot.boot-done { display: none; } /* Home hero, buttons, and section helpers now live in sections.css (ported faithfully from the mockup). The product detail page styles stay here. */ /* ============================================================ Product detail page ============================================================ The hero + pill tabs now live in their own block style.css (mightyloc/product-hero, mightyloc/product-tabs), on a LIGHT surface matching the mockup view-taftlock. The old dark .ml-prod-hero "blue/red box" was removed per Leonard. These rules style the after-tabs sections. */ .ml-product { padding-bottom: var(--space-9); } .ml-prod-tabs-section { padding-top: var(--space-7); padding-bottom: var(--space-8); } .ml-prod-after { padding-top: var(--space-7); padding-bottom: var(--space-7); } .ml-prod-after > h2 { margin: 0 0 var(--space-5); } .ml-prod-hero__inner { max-width: var(--content-max); margin: 0 auto; } .ml-prod-hero__grid { display: flex; gap: var(--space-8); align-items: center; justify-content: space-between; flex-wrap: wrap; } .ml-prod-hero__text { flex: 1 1 360px; min-width: 0; } .ml-prod-photo { flex: 0 0 auto; margin: 0; } .ml-prod-photo img { max-height: 300px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 20px 32px rgba(0,0,0,0.45)) drop-shadow(0 3px 6px rgba(0,0,0,0.30)); } @media (max-width: 760px) { .ml-prod-photo { display: none; } } .ml-prod-hero .wp-block-post-title { color: #fff; font-family: var(--font-display); font-size: var(--text-display-3-size); line-height: var(--text-display-3-lh); letter-spacing: var(--text-display-3-tr); margin: var(--space-3) 0; } .ml-prod-hero__chem { color: rgba(255, 255, 255, 0.66); margin: 0; } .ml-prod-hero__chem a { color: rgba(255, 255, 255, 0.66); } .ml-prod-hero__chem a:hover { color: #fff; } .ml-prod-hero__claim { color: rgba(255, 255, 255, 0.85); font-family: var(--font-body); font-size: var(--text-body-lg-size); line-height: 1.6; max-width: 56ch; margin: 0; } .ml-prod-hero__metric { display: inline-flex; align-items: baseline; gap: 10px; margin-top: var(--space-5); padding: var(--space-3) var(--space-5); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-md); } .ml-prod-hero__metric .val { font-family: var(--font-mono); font-size: 22px; color: #fff; font-variant-numeric: tabular-nums; } .ml-prod-hero__metric .lab { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); } .ml-prod-section { padding: var(--space-8) var(--gutter-desktop); } .ml-prod-section__inner { max-width: var(--content-tight); margin: 0 auto; } .ml-prod-section > .ml-prod-section__inner > h2 { margin: 0 0 var(--space-5); } .ml-prod-lede { font-size: var(--text-body-lg-size); color: var(--text-secondary); max-width: 64ch; } /* Section rhythm + numbered eyebrows + alternating surfaces (single product). Fixes the flat, uniform stack: each section gets a mono red index eyebrow, adjacent sections alternate page/elevated surfaces for depth, and the inter-section padding is tightened so the page reads as a designed sequence rather than seven identical bands. CSS counter avoids per-section template edits. */ body.single-product .site-main { counter-reset: mlsec; } body.single-product .ml-prod-section { padding: var(--space-7) var(--gutter-desktop); } body.single-product .ml-prod-section:nth-of-type(even) { background: var(--surface-elevated); } body.single-product .ml-prod-section__inner > h2::before { counter-increment: mlsec; content: counter(mlsec, decimal-leading-zero) " \00B7"; display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; color: var(--color-brand-red); margin-bottom: var(--space-2); }