/* ========================================================= GlobalTradeTech.co — Base Stylesheet ========================================================= */ :root { --color-navy: #0b2545; --color-seagreen: #2f6f5e; --color-text: #1a1a1a; --color-text-secondary: #5a5f66; --color-bg: #ffffff; --color-bg-alt: #f7f8f9; --color-border: #e5e7eb; --color-accent-soft: #4f9b93; --color-heading-dark: #16243c; --color-grey-light: #f7f8f9; --color-grey-medium: #d4d8dc; --color-dot: #6bc4b3; --gradient-blue: linear-gradient(100deg, var(--color-navy) 0%, #3062c6 100%); --gradient-brand: linear-gradient(100deg, var(--color-navy) 0%, var(--color-seagreen) 100%); --gradient-seagreen-royal: linear-gradient(100deg, var(--color-seagreen) 0%, #4169e1 100%); --gradient-navy-charcoal: linear-gradient(100deg, var(--color-navy) 0%, #202b3a 100%); --gradient-seagreen-deepblue: linear-gradient(100deg, var(--color-seagreen) 0%, #1e3a8a 100%); /* The single sitewide standard for gradient-clipped TEXT (headings, highlighted words/phrases, stat numbers, etc.) — identical to the RFQ button's own background (see .btn-primary), the reference/ target every gradient-text instance sitewide was standardized to 2026-08-17. Not used for buttons, backgrounds, borders, or any other non-text gradient — those keep using --gradient-brand/ --gradient-blue/etc. above, which are shared with genuinely different (non-text) uses elsewhere and were deliberately left alone. Any new gradient text should reference this variable (or the .grad-text utility class below) rather than introducing a new one-off gradient value. */ --gradient-logo: linear-gradient(100deg, #0097b1 0%, #7ed957 100%); --container-width: 1200px; --header-height: 100px; /* Sitewide font system (see CLAUDE.md's Typography section for the full assignment table and history — this replaced an earlier Michroma system, which itself had replaced an even earlier Orbitron/Lato/Inter system). Each keeps the same system-font fallback chain the site already used, so a failed/slow webfont load still degrades gracefully instead of falling back to the browser's generic default. Unlike Michroma (single-weight only, forcing the browser to fake/synthesize bold), League Spartan ships real 700 and 800 cuts — both are loaded (see every page's own ) and headings render in genuine, not synthesized, bold. */ --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-heading: "League Spartan", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-nav: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: clip; } /* overflow-x: clip on both html and body (2026-08-21, changed from overflow-x: hidden the same day — see below) — the root-level safety net for the "Our Offerings" dropdown/submenu bug: .dropdown-menu/ .submenu (further down) are position: absolute and only ever toggle opacity/visibility, never display, so even while fully invisible their boxes still count toward the page's scrollable width at ~900–1100px widths, where the nav sits close enough to the viewport edge for this to matter. This clips any such invisible overflow at the document edge instead of producing a scrollbar. Safe here specifically because nothing on this site relies on genuine page-level horizontal scroll or a full-bleed 100vw element (checked before adding this) — an .is-locked-fold/.scroll-locked section further down already uses a stricter overflow: hidden of its own for an unrelated feature and is unaffected by this. MUST be `clip`, not `hidden`, on this specific pair of elements — this was a real regression, not a style choice. `overflow-x: hidden` forces the browser to compute the *other* axis (`overflow-y`) as `auto` per spec (any non-`visible` value on one axis pairs the other axis away from `visible`), and once html/body's overflow-y is anything but the default `visible`, `.site-header`'s `position: sticky` (further down) stops sticking at all sitewide — confirmed by temporarily reverting this to `hidden` and watching the header scroll fully off-screen at every width tested, including mobile. `overflow-x: clip` was designed for exactly this: it clips the x-axis without forcing y into a scroll/auto state (confirmed via getComputedStyle: overflow-y stays `visible`), so sticky positioning keeps working while horizontal overflow is still fully contained — confirmed by re-testing the original nav-dropdown fix (900/1000/1100px, including the Electronics & Electrical nested flyout) after this change: still no scrollbar, no cutoff. */ body { font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; } /* Sitewide font system — applies automatically to every page, current and future, since it targets real heading tags and the shared nav/ button classes rather than per-component selectors. Font-family ONLY: no size/weight/spacing/color changes here — every element's existing font-weight, font-size, color etc. is left exactly as it was. Body copy (paragraphs, labels, descriptions, etc.) doesn't need its own rule here — it already inherits Inter from `body` above once `--font-body` itself was changed to lead with Inter. The 4 offering pages' hero "subheading" classes (`.av-hero-subheading`, `.imro-hero-subheading`, `.auto-hero-subheading`, `.elec-hero-subheading`) are `

` tags, not real heading tags, but are visually/semantically subheadings, so each gets its own explicit `font-family: var(--font-heading)` where it's defined further down — they'd otherwise silently inherit the body font instead. */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); /* Added 2026-08-24 (modernization pass, applied for review — see PROGRESS.md for the before/after comparison this was checked against). No heading anywhere previously set its own letter-spacing (confirmed via grep before adding this), so this is a genuine, sitewide-visible change, not a no-op. A small negative value on a geometric sans at real display-heading sizes reads as a tighter, more "designed" modern-SaaS feel rather than the font's own default spacing — kept deliberately subtle (-0.01em is roughly 0.14px per character at a 14px heading, more at larger sizes) specifically so it doesn't affect line-wrapping at any of the fluid clamp() sizes used sitewide. */ letter-spacing: -0.01em; } .main-nav, .footer-links, .btn, .whatsapp-btn, .tooltip-icon, .file-upload-btn { font-family: var(--font-nav); } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } ul { list-style: none; } .container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 24px; } /* ========================================================= Header ========================================================= */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--color-bg); border-bottom: 1px solid var(--color-border); transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease; } /* Glass effect once scrolled past the hero (added 2026-08-24, modernization pass) — toggled by initHeaderScrollState() in script.js based on window.scrollY, not tied to any particular section, so it works identically on every page regardless of hero height. rgba(255, 255, 255, 0.75) is --color-bg's own white made translucent (can't apply alpha to a CSS custom property directly without color-mix(), so it's spelled out literally here) — the backdrop-filter blur needs *something* translucent behind it to blur, a fully opaque background would hide the effect entirely. Doesn't affect or depend on the nav dropdown/scroll-lock logic at all — purely a background/shadow swap on the header itself. */ .site-header.header-scrolled { background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: transparent; box-shadow: 0 8px 30px rgba(11, 37, 69, 0.1); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-height); } .logo-link { display: flex; align-items: center; height: 100%; } .logo-img { height: 72px; width: auto; } /* Groups the nav, the header CTA button, and the mobile toggle together on the right side, so .header-inner's space-between only has to split space between the logo and this whole group (not fight over 3+ items). */ .header-right { display: flex; align-items: center; gap: 32px; } .header-cta-btn { padding: 11px 22px; font-size: 13px; white-space: nowrap; } .header-cta-short { display: none; } .main-nav .nav-list { display: flex; align-items: center; gap: 40px; } .main-nav a, .nav-dropdown-trigger { font-size: 15px; font-weight: 600; letter-spacing: 0.02em; color: var(--color-text); cursor: pointer; padding: 8px 0; position: relative; } .main-nav a::after, .nav-dropdown-trigger::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--gradient-brand); transition: width 0.25s ease; } .main-nav a:hover::after, .nav-dropdown:hover .nav-dropdown-trigger::after { width: 100%; } /* "Our Offerings" dropdown */ .nav-dropdown { position: relative; } .nav-dropdown-trigger { display: flex; align-items: center; gap: 6px; } .nav-dropdown-trigger .caret { display: inline-block; width: 7px; height: 7px; border-right: 2px solid var(--color-text); border-bottom: 2px solid var(--color-text); transform: rotate(45deg) translateY(-2px); transition: transform 0.2s ease; } .nav-dropdown:hover .nav-dropdown-trigger .caret { transform: rotate(225deg) translateY(2px); } .dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); min-width: 240px; /* Added 2026-08-21, same fix as .submenu's own max-width below — keeps this top-level menu from ever claiming more width than the viewport has at narrow desktop widths (~900–1100px), so it stays fully visible/centered under its trigger instead of relying on the new html/body overflow-x: clip above to clip it. */ max-width: calc(100vw - 32px); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: 0 12px 28px rgba(11, 37, 69, 0.12); padding: 8px; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; } .nav-dropdown:hover .dropdown-menu, .nav-dropdown:focus-within .dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(4px); } .dropdown-menu li a, .dropdown-menu li span { display: block; padding: 10px 14px; font-size: 14px; font-weight: 500; border-radius: 6px; color: var(--color-text); } .dropdown-menu li a:hover, .dropdown-menu li span:hover { background: var(--color-bg-alt); color: var(--color-seagreen); } .dropdown-menu li a::after { display: none; } /* Second-level "Our Offerings" flyout */ .dropdown-category { position: relative; } .dropdown-menu .category-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; transform-origin: left center; transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease; } .category-trigger .sub-caret { display: inline-block; width: 7px; height: 7px; padding: 0; border-right: 2px solid var(--color-text); border-bottom: 2px solid var(--color-text); transform: rotate(-45deg) translateX(-2px); transition: transform 0.2s ease; flex-shrink: 0; } .dropdown-menu:hover .category-trigger { opacity: 0.7; } .dropdown-category:hover .category-trigger { opacity: 1; transform: scale(1.06); color: var(--color-seagreen); } .submenu { position: absolute; top: -8px; left: 100%; margin-left: 10px; width: 250px; max-width: calc(100vw - 32px); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: 0 12px 28px rgba(11, 37, 69, 0.14); padding: 8px; opacity: 0; visibility: hidden; transform: translateX(-6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, width 0.15s ease; z-index: 5; } .dropdown-category:hover .submenu, .dropdown-category:focus-within .submenu { opacity: 1; visibility: visible; transform: translateX(0); } .submenu li a, .submenu li .submenu-placeholder { display: block; padding: 10px 14px; font-size: 13.5px; font-weight: 500; border-radius: 6px; color: var(--color-text); } .submenu li a:hover { background: var(--color-bg-alt); color: var(--color-seagreen); } .submenu li a::after { display: none; } .submenu-placeholder { color: var(--color-text-secondary); font-style: italic; cursor: default; } /* Force-closes the "Our Offerings" dropdown/submenu the instant a menu link is actually clicked (see the dropdownParent/closeDropdownMenu logic in script.js) — without this, the menu stays visually open afterward: clicking a link doesn't itself change :hover/:focus-within (the desktop open-state above) or clear a lingering .open class (the mobile open-state below), so it would otherwise linger open through the same-document hash navigation the submenu's own subcategory links trigger. !important is required to beat both of those rule sets regardless of source order. Opacity/visibility (not display) so one rule works at every viewport width without a separate mobile override. Applied to the outer .nav-dropdown so a single class closes both the top-level menu and any open submenu at once. script.js lifts this class again as soon as the mouse actually leaves the menu (or after a short fallback timeout), so this is a one-shot reset at the moment of navigation, not a permanent change to how the menu opens on hover. */ .nav-dropdown.menu-force-closed .dropdown-menu, .nav-dropdown.menu-force-closed .submenu { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* Mobile nav toggle */ .nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--color-navy); transition: transform 0.25s ease, opacity 0.25s ease; } @media (max-width: 860px) { /* Fixes a real bug (reported in production): without this, the logo is a flex item (.logo-link, itself wrapping the in its own nested flex context) with the browser's default flex-shrink:1 — so whenever this row's total content doesn't fit the viewport, the browser can render the logo non-uniformly squashed (narrower than its real 4:1 aspect ratio, while .logo-img's explicit height stays fixed) instead of just leaving it at natural size. flex-shrink:0 makes the logo un-shrinkable, so it always renders at its correct aspect ratio — anything else in this row (the CTA button, the toggle, the gaps below) absorbs a width squeeze instead. Scoped to this mobile media query only; desktop has ample room and was never affected, and this rule doesn't apply there. */ .logo-link { flex-shrink: 0; } .nav-toggle { display: flex; } /* Below this width .main-nav becomes an absolutely-positioned overlay (see below), so it no longer takes up space in this row — .header- right's visible content becomes just the CTA button + toggle. */ .header-right { gap: 16px; } .header-cta-btn { padding: 9px 14px; font-size: 12px; } /* Below ~580px, "REQUEST A QUOTE" at any readable size no longer leaves room for the full-size logo without the row actually overflowing — measured directly: at 430px, with flex-shrink:0 above preventing the logo from silently absorbing the shortfall by distorting, the row's natural content needs ~522px, well past the viewport. Switching to a short "QUOTE" label plus a smaller logo (below) closes that gap with real width, not a squashed image. */ @media (max-width: 580px) { .header-cta-full { display: none; } .header-cta-short { display: inline; } .header-cta-btn { padding: 9px 16px; } /* Kept in the same ~71% ratio to the desktop .logo-img size when that was increased for a sitewide logo-size bump (62px→72px desktop, 44px→51px here). */ .logo-img { height: 51px; } .header-inner { gap: 12px; } } /* Below ~420px, even the short "QUOTE" label plus the 51px-tall logo from the tier above doesn't leave room (measured directly: at 362px the row needed ~374px) — shrink further here specifically, rather than letting the row overflow the viewport (which is what would happen now that flex-shrink:0 above stops the old silent "shrink by distorting the logo" fallback from masking it). Also trims the toggle and both gaps, per the same budget — verified directly down to 320px with real margin to spare on the header's own content once .globe-video's own separate, unrelated overflow (a different section of this page, not part of this fix) is excluded. */ @media (max-width: 420px) { .logo-img { height: 40px; } .header-cta-btn { padding: 8px 12px; } .nav-toggle { width: 34px; height: 34px; } .header-inner { gap: 8px; } .header-right { gap: 10px; } } .main-nav { position: absolute; top: var(--header-height); left: 0; right: 0; background: var(--color-bg); border-bottom: 1px solid var(--color-border); max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .main-nav.open { max-height: 720px; overflow-y: auto; } .main-nav .nav-list { flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 24px 20px; } .main-nav .nav-list > li { width: 100%; padding: 12px 0; border-bottom: 1px solid var(--color-border); } .dropdown-menu { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: none; padding: 4px 0 0 12px; display: none; } .nav-dropdown.open .dropdown-menu { display: block; } .nav-dropdown:hover .dropdown-menu { transform: none; } .category-trigger { padding: 8px 0; } .dropdown-menu:hover .category-trigger, .dropdown-category:hover .category-trigger { opacity: 1; transform: none; color: var(--color-text); } .dropdown-category.open .category-trigger { color: var(--color-seagreen); } .dropdown-category.open .category-trigger .sub-caret { transform: rotate(135deg); } .submenu { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: none; margin-left: 0; width: auto; max-width: none; padding: 2px 0 2px 14px; display: none; } .dropdown-category.open .submenu { display: block; } .dropdown-category:hover .submenu { transform: none; } } /* ========================================================= Buttons ========================================================= */ .btn { display: inline-block; padding: 14px 32px; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; border-radius: 6px; border: none; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } /* Background is the exact logo gradient (same literal values as .grad-logo/.about-cta-grad/.contact-hero-grad/the 4 offering-page hero subheadings & buttons) — deliberately NOT var(--gradient-brand) even though that's what this rule used before: this is now the sitewide standing button-color rule, see CLAUDE.md's design-system section. --gradient-brand itself is untouched and still used elsewhere (nav underline, stat-number/heading gradient text, image frames, connector dots) — only this one declaration changed. */ .btn-primary { background: linear-gradient(100deg, #0097b1 0%, #7ed957 100%); color: #ffffff; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11, 37, 69, 0.25); } .btn-hover-grow { transition: transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease; } .btn-hover-grow:hover { /* Tuned 2026-08-24 (modernization pass) — scale(1.06) → 1.03 (the brief's requested "1.02-1.03x" range; 1.06 read as more of a jump than a micro-interaction) and a second, brand-teal glow shadow layer added alongside the existing dark drop-shadow (kept, not replaced — it's still what gives the lift its depth) so hovering reads as a soft glow, not just a flat color swap. #0097b1 is the exact teal already used as --gradient-logo's own first stop (the same gradient every .btn-primary background already uses), not a new color. Every button already using this class (header/footer "REQUEST A QUOTE", the RFQ and Contact form submit buttons) gets this automatically — see CLAUDE.md for the full list. */ transform: scale(1.03); opacity: 0.95; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3), 0 0 22px rgba(0, 151, 177, 0.35); } /* ========================================================= Hero ========================================================= */ .hero { position: relative; height: calc(100vh - var(--header-height)); min-height: 460px; max-height: 760px; overflow: hidden; background: var(--color-navy); } /* 120%/-10% oversize for scroll parallax slack — same pattern as every .*-hero-bg layer sitewide (see .page-hero-bg's own comment, Hero section further down, for the full explanation); object-fit: cover crops a video the same way background-size: cover crops a div. */ .hero-video { position: absolute; top: -20%; left: 0; right: 0; width: 100%; height: 140%; object-fit: cover; object-position: center; will-change: transform; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 37, 69, 0.55) 0%, rgba(11, 37, 69, 0.35) 45%, rgba(11, 37, 69, 0.6) 100%); } .hero-content { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; } .hero-tagline { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 820px; padding: 0 24px; color: #ffffff; font-size: clamp(28px, 5vw, 48px); font-weight: 700; line-height: 1.25; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); opacity: 0; transition: opacity 1s ease; } .hero-tagline.active { opacity: 1; } /* ========================================================= Home — About section ========================================================= */ .about-home { padding: 96px 0; background: var(--color-bg); } .about-home-inner { display: flex; align-items: center; gap: 64px; } .about-home-image, .about-home-text { flex: 1 1 50%; } .about-home-image img { width: 100%; border-radius: 16px; } /* Animated globe (replaces the static About-section image) */ .animated-globe { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1 / 1; margin: 0 auto; } /* Circular video "sphere" — replaces the old SVG globe-sphere/globe- continents illustration. A single

— see .subcat-heading-offering/.subcat-heading-subcat below — so .subcat-heading itself only holds the shared size/weight/spacing. */ .subcat-heading { font-size: clamp(24px, 3vw, 34px); font-weight: 800; line-height: 1.3; margin-bottom: 20px; } .subcat-heading-offering { display: block; color: #333333; } /* background must come before background-clip (see CLAUDE.md's gradient-text gotcha) — copied that established order. */ .subcat-heading-subcat { display: block; background: var(--gradient-logo); background-clip: text; -webkit-background-clip: text; color: transparent; } .subcat-desc { color: var(--color-text); font-size: 16px; line-height: 1.75; max-width: 760px; margin: 0 auto 44px; } .subcat-logos-heading { color: #126E72; font-weight: 600; font-size: 15px; margin-bottom: 24px; } /* Hides the "Representative brands..." line heading whenever its section's .subcat-logo-grid is genuinely empty (no entries) — matches the actual DOM/brand list, not a manually-toggled flag, so this self-adjusts the same way the logo-grid centering rule below does as brand lists get populated or left empty. The grid itself already collapses to zero height when empty (see the "subcat-logo-grid can legitimately be empty" note in CLAUDE.md), so hiding just this heading is enough to remove the heading-above-a-blank-space look entirely. */ .subcat-logos-heading:has(+ .subcat-logo-grid:empty) { display: none; } .subcat-logo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; } /* Center a genuinely partial row (fewer than 5 logos total, so the whole grid is just one under-full row) as a group, rather than leaving it pinned to the left with empty space on the right. Does NOT apply to a partial *final* row of an otherwise-multi-row grid (5+ logos total) — there, column alignment across rows takes priority, so that row stays left-aligned under the columns above (the plain grid rule above already does this by default; this selector simply never matches that case). :has(> .subcat-logo-cell:first-child:nth-last-child(-n + 4)) is a pure-CSS "total children ≤ 4" count check: it matches only when the grid's *first* logo cell is *also* among the *last 4* — which is only possible if there are 4 or fewer cells total. This is deliberately count-based, not a manually-toggled class per section, so it self-adjusts automatically as brand lists are added/changed — exactly the same self-adjusting reasoning as everywhere else this shared component is used. Switches to flex (grid-template-columns is simply ignored once display: flex is set, no need to unset it) purely so justify-content: center has a real effect — CSS Grid's 1fr tracks always stretch to fill 100% of the container's width regardless of how many are actually occupied, so justify-content would have no visible effect there. flex-basis below reproduces the exact same per-cell width the 5/3/2-column grid already produces at each breakpoint (see the matching gap-based calc() in each @media block), so cell size is unchanged — only the row's own alignment changes. */ .subcat-logo-grid:has(> .subcat-logo-cell:first-child:nth-last-child(-n + 4)) { display: flex; flex-wrap: wrap; justify-content: center; } .subcat-logo-grid:has(> .subcat-logo-cell:first-child:nth-last-child(-n + 4)) > .subcat-logo-cell { /* 5 columns, 4 gaps of 20px, matching repeat(5, 1fr) above exactly */ flex: 0 0 calc((100% - 80px) / 5); } /* 1000x600 (5:3) cell aspect ratio, silver-grey border — the border color (#c0c0c0) is the same literal "silver" already used by .btn-glow-silver's rgba(192, 192, 192, ...) shadow ring elsewhere on this site, reused here as a solid border rather than a glow. No padding/background fill behind the image — the source logo files are pre-sized to exactly 1000x600, so the image fills the cell edge-to-edge itself (see .subcat-logo-img below); a transparent- background logo now shows the section's own background through it rather than an artificial white box. */ .subcat-logo-cell { display: flex; aspect-ratio: 5 / 3; overflow: hidden; border: 1px solid #c0c0c0; border-radius: 8px; transition: transform 0.25s ease, box-shadow 0.25s ease; } .subcat-logo-cell:hover, .subcat-logo-cell:focus-visible { /* -3px → -4px 2026-08-24 (modernization pass) — the requested "-4px to -6px" lift range; scale(1.04) was already here and kept as-is, a complementary effect the brief didn't ask to remove. */ transform: translateY(-4px) scale(1.04); box-shadow: 0 10px 22px rgba(11, 37, 69, 0.14); } /* object-fit: cover (not contain) — fills the cell edge-to-edge to match the source assets' exact 1000x600/5:3 sizing, rather than leaving letterboxed padding around it. border-radius: inherit keeps the image's corners following the cell's own rounded corners. */ .subcat-logo-img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } /* Small fine-print disclaimer below the logo grid — same recipe as .file-upload-hint/.product-details-hint elsewhere on the site (12px, var(--color-text-secondary)), reused here for consistency rather than inventing a new muted-text treatment. Inherits Inter from the sitewide body font automatically, same as .subcat-desc — no font-family override needed. */ .subcat-disclaimer { margin-top: 28px; font-size: 12px; line-height: 1.6; color: var(--color-text-secondary); } @media (max-width: 860px) { .subcat-logo-grid { grid-template-columns: repeat(3, 1fr); } /* 3 columns, 2 gaps of 20px, matching repeat(3, 1fr) above exactly */ .subcat-logo-grid:has(> .subcat-logo-cell:first-child:nth-last-child(-n + 4)) > .subcat-logo-cell { flex: 0 0 calc((100% - 40px) / 3); } } @media (max-width: 560px) { .subcat-section { padding: 64px 0; } .subcat-logo-grid { grid-template-columns: repeat(2, 1fr); } /* 2 columns, 1 gap of 20px, matching repeat(2, 1fr) above exactly */ .subcat-logo-grid:has(> .subcat-logo-cell:first-child:nth-last-child(-n + 4)) > .subcat-logo-cell { flex: 0 0 calc((100% - 20px) / 2); } } /* ========================================================= Subcategory "locked full-page-fold" view — shared logic Applied by initSubcatFoldLock() in script.js when the URL hash is `#fold-` (set only by the header's submenu subcategory links, never by a top-level category link or the hero's own "EXPLORE ... PRODUCTS" button, which stays untouched — see the JS function's own comment for why this is hash-prefix-based rather than a query param). Same background/heading/description/logo-grid/ animations as a normal instance — only sizing/overflow/positioning changes here. position: fixed (not "scroll to the section, then freeze document scroll") is deliberate, fixing a real bug: the earlier version scrolled the target section into view, then set overflow: hidden on html/body — but that overflow change itself resets window scroll position to 0 in most browsers, since disabling scroll fundamentally changes what the "scrolling element" even means. The visible result was the hero (whatever sits at scroll position 0), locked, while the actually-requested section sat correctly class-flagged but scrolled far out of view. Pinning the section with position: fixed sidesteps this entirely — it renders in the same viewport position regardless of the underlying document's scrollY, so there's no scroll-then-freeze race to lose. `top: var(--header-height)` keeps it below the sticky header (`z-index: 100`) rather than covering it, matching how the section would sit if you'd scrolled to it normally. ========================================================= */ html.scroll-locked, body.scroll-locked { overflow: hidden; height: 100%; } .subcat-section.is-locked-fold { position: fixed; top: var(--header-height); left: 0; right: 0; bottom: 0; z-index: 50; /* Fixed 2026-08-25 — was overflow: hidden with no internal scroll route (see CLAUDE.md's "Known limitation" note, now resolved), which clipped content with literally no way to reach it at high browser zoom (~150%+) or unusual window aspect ratios, since html/body's own overflow: hidden (.scroll-locked below) blocks all document-level scroll while this class is active. This section is now the scrollable region itself — overflow-y: auto lets it scroll internally when its own content is taller than the available space, while html/body staying locked still fully prevents escaping into sibling sections above/below (the fixed positioning means nothing else is ever reachable to scroll to regardless). overflow-x stays hidden — nothing here needs horizontal scroll and this avoids an accidental horizontal scrollbar at extreme zoom. */ overflow-y: auto; overflow-x: hidden; display: flex; align-items: center; /* `safe` is the deliberate fix, not `center` alone: it tells browsers that support it (Firefox long-standing, Chrome/Edge 118+, Safari 16.4+) to prefer top-alignment over centering *specifically when* centering would overflow the scrollable area — so an overflowing section starts scrolled to its own top, reachable by scrolling straight down, rather than opening pre-centered with the top half of its own content already scrolled past and needing to be scrolled *up* to see (technically still reachable either way, but `safe` is the far more discoverable, intuitive result). Older browsers that don't parse `safe center` simply ignore this whole declaration at parse time and keep the plain `center` above, so this is a pure progressive enhancement — never a regression. */ align-items: safe center; /* This element is given a temporary tabindex and focused while locked (initSubcatFoldLock() in script.js) purely so keyboard scroll keys target it — not a real "user tabbed here" interaction, so suppress the default focus ring rather than showing one around the whole section. */ outline: none; } .subcat-section.is-locked-fold .subcat-content { width: 100%; }