/* ============================================================ 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; } /* High-contrast keyboard focus on dark surfaces: the brand-blue ring is ~1.8:1 on deep navy (fails WCAG/DESIGN.md 3:1). Use a white ring on the dark header/hero/footer/mega-menu/chatbot so focus is always visible; the blue ring stays on light surfaces. */ .site-header :focus-visible, .hero :focus-visible, .site-footer :focus-visible, .mega-menu :focus-visible, .industry-hero :focus-visible, .substrate-hero :focus-visible, .mb :focus-visible { outline-color: #fff; } .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. */ /* Subordinate red tagline sits on the translucent navy glass, which thins to a mid tone over light pages where the small red text reads weakly. Full opacity + a dark backing-shadow anchors the glyphs for legibility without recolouring the brand accent (a stronger, guaranteed-AA option would be a white treatment or a larger size - a design call). */ .site-header__wordmark.accent-held { animation: heldGloss 7s ease-in-out infinite; filter: none; opacity: 1; text-shadow: 0 1px 3px rgba(10, 10, 10, 0.5); } /* 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; } } /* Anchor/focus scroll targets clear the fixed header (its scrolled band reaches ~158px from the viewport top), so a section's uppercase eyebrow is not left hidden behind the header when a link or keyboard focus jumps to it. scroll-margin only affects programmatic scroll, so this is inert during normal reading. :where() keeps specificity at 0. */ :where([id], h1, h2, h3, .text-eyebrow, [class*="eyebrow"]) { scroll-margin-top: 168px; } .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%; } /* Desktop nav rail only appears once it actually fits (logo + 6 links + controls). Below this the balanced burger header is used for EVERY device, not just touch - a narrowed mouse-laptop window was overflowing/cramping the rail before. */ @media (min-width: 1120px) { .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: 1120px) { .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); } } /* Mobile keeps the SAME rounded two-pill as the tablet/desktop ("EN English" | "Others"), just THINNER with smaller text and the full word kept (Leonard: the segmented straight-cut looked odd; he wants the slim tablet pill). The full name stays visible; the pill is scaled down so it fits the narrow header. Sizing here is the single source of truth for the mobile pill -- the older >=44px touch sizes were removed from the 820/900 blocks below. */ @media (max-width: 1023px) { .lang-current .lang-name { display: inline; font-size: 11px; } .lang-current .lang-code { font-size: 9px; } .lang-switcher { gap: 2px; height: 32px; padding: 2px; } .lang-current, .lang-others { min-height: 24px; padding: 4px 10px; font-size: 11px; border-radius: var(--radius-pill); } .lang-chev { width: 8px; height: 8px; } } /* Very small phones can't fit "EN English" + Others + logo + burger; drop the word to the slim "EN" pill (still the rounded pill, not the old fat circle) so it never overflows. */ @media (max-width: 380px) { .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); will-change: opacity, transform; transition: opacity 480ms var(--ease-out) 120ms, transform 620ms cubic-bezier(0.22, 1, 0.36, 1) 120ms; } .mega-menu.is-open .mega-menu__inner { opacity: 1; transform: translateY(0) scale(1); } .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: var(--color-brand-red); 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: var(--color-brand-red); 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: var(--color-brand-red); /* fallback: engines without color-mix (iOS Safari < 16.2) */ 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: var(--color-brand-red); /* fallback: engines without color-mix (iOS Safari < 16.2) */ 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 14px; gap: 8px; } .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; } /* Language pill sizing intentionally lives in the <=1023px rule above (slim tablet-style pill with the full word, per Leonard); do not re-inflate it to 44px here. */ } /* 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: var(--color-brand-red); /* fallback: engines without color-mix (iOS Safari < 16.2) */ 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: 1119px) { .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: 1119px) { .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; } /* Contact is the 6th item (Blog/About/Contact follow the 3 accordions); without its own delay it fired at 0ms and looked static while the rest cascaded (Leonard 2026-06-16). Extend the stagger so it joins the cascade. */ .site-header.is-mobile-open .mobile-nav > *:nth-child(6) { animation-delay: 420ms; } .site-header.is-mobile-open .mobile-nav > *:nth-child(n+7) { animation-delay: 490ms; } .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: 1120px) { .mobile-nav { display: none !important; } } /* The decorative wordmark/tagline beside the shield is wide; keep it only on roomy screens so the desktop nav rail fits without it in the 1120-1339 band. */ @media (max-width: 1339px) { .site-header__wordmark { display: none; } } /* ---------- Touch devices wider than the 900px phone breakpoint ---------- An iPhone or iPad in Safari/Chrome "Request Desktop Website" mode reports a ~980px layout viewport, so the 900px phone breakpoint never fires and the hamburger never appears (the cramped desktop nav shows instead). Reported by Ken, 2026-06-16. The head script (functions.php) adds `is-touch` when the device is touch-capable; we key off that, NOT a CSS pointer/hover query, because iOS desktop mode spoofs the user-agent AND the pointer/hover media but does NOT fake the touch-point count. So real mouse laptops keep the desktop nav; only touch devices up to 1024px get the mobile header. The `!important` matches the min-width:900px rule above so the drawer can open at these widths. */ @media (max-width: 1024px) { html.is-touch .nav-rail { display: none; } html.is-touch .nav-burger { display: inline-flex; width: 44px; height: 44px; } html.is-touch .icon-button { width: 44px; min-height: 44px; } html.is-touch .site-header__wordmark { display: none; } html.is-touch .site-header.is-mobile-open .mobile-nav { display: block !important; animation: mnavIn 420ms var(--ease-out); } /* With the nav rail hidden on touch, nothing carried the margin-left:auto that normally pushes the controls to the right edge (the >=900px rule had zeroed it for the desktop rail), so logo + search + language pills + burger bunched on the left and the right half of the bar sat empty ("stretched"). Re-assert it on the actions so the controls sit hard right and the bar is balanced again. Ken, 2026-06-16. */ html.is-touch .site-header__actions { margin-left: auto; } } /* ============================================================ 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; } /* Mobile (Leonard 2026-06-16): drop the Industries column (keep Technical + Company) and the language-code list, leaving just the shipping tagline. */ .site-footer__grid > div:nth-child(2) { display: none; } .site-footer__langs { display: none; } } .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); }