contains no sticky or fixed elements, so clipping here is side-effect free -- the header, the mobile drawer and normal page scrolling are all unaffected. */ main{ overflow-x:hidden; } .site-footer{ overflow-x:hidden; } .wrap{ max-width:var(--container); margin:0 auto; padding-left:var(--edge); padding-right:var(--edge); padding-inline:var(--edge); } .section{ padding:clamp(64px,8vw,116px) 0; } .section--tight{ padding:clamp(48px,6vw,80px) 0; } .section--paper{ background:var(--paper); } .section--navy{ background:var(--navy-700); color:#fff; } .section--navy h1,.section--navy h2,.section--navy h3{ color:#fff; } h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.12; letter-spacing:-0.015em; color:var(--ink); } h1{ font-size:clamp(2.1rem,4.6vw,3.5rem); } h2{ font-size:clamp(1.7rem,3.2vw,2.5rem); } h3{ font-size:clamp(1.05rem,1.6vw,1.25rem); } p{ color:var(--ink-soft); } .section--navy p{ color:rgba(255,255,255,.76); } .eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:.76rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--navy-700); margin-bottom:16px; } .eyebrow::before{ content:''; width:22px; height:1px; background:currentColor; } .section--navy .eyebrow{ color:var(--accent-bright); } .section-head{ max-width:720px; margin-bottom:clamp(36px,5vw,56px); } .section-head p{ font-size:1.05rem; margin-top:14px; } .lead{ font-size:clamp(1rem,1.5vw,1.16rem); line-height:1.7; } /* Buttons ----------------------------------------------------------------- */ .btn{ display:inline-flex; align-items:center; gap:9px; padding:14px 26px; border-radius:3px; font-family:var(--font-display); font-weight:600; font-size:.93rem; transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; white-space:nowrap; border:1px solid transparent; } .btn svg{ width:15px; height:15px; flex:none; } .btn--primary{ background:var(--navy-700); color:#fff; } .btn--primary:hover{ background:var(--navy-800); transform:translateY(-2px); box-shadow:var(--shadow-sm); } .btn--light{ background:#fff; color:var(--navy-700); } .btn--light:hover{ background:var(--paper-dim); transform:translateY(-2px); } .btn--ghost{ border-color:var(--line-strong); color:var(--ink); } .btn--ghost:hover{ border-color:var(--navy-700); color:var(--navy-700); transform:translateY(-2px); } .btn--ghost-light{ border-color:var(--line-on-navy); color:#fff; } .btn--ghost-light:hover{ border-color:#fff; background:rgba(255,255,255,.08); transform:translateY(-2px); } .link-arrow{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:600; font-size:.92rem; color:var(--navy-700); } .link-arrow svg{ width:14px; height:14px; transition:transform .22s ease; } .link-arrow:hover svg{ transform:translateX(4px); } .section--navy .link-arrow{ color:var(--accent-bright); } /* Header ------------------------------------------------------------------ */ .site-header{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line); transition:box-shadow .3s ease; } .site-header.is-stuck{ box-shadow:0 6px 24px -16px rgba(27,32,54,.4); } .header-inner{ position:relative; z-index:2; background:inherit; height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:var(--container); margin:0 auto; padding-left:var(--edge); padding-right:var(--edge); padding-inline:var(--edge); } .brand{ display:flex; align-items:center; gap:11px; flex:none; } .brand img{ height:30px; width:auto; } /* Matches the logo artwork exactly (#394367). It previously used --ink (#1b2036), a much darker near-black, so the wordmark read as a different colour to the mark sitting beside it. */ .brand-name{ font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--navy-700); letter-spacing:.01em; line-height:1.1; } html[lang="zh"] .brand-name{ font-size:.95rem; } .nav{ display:flex; align-items:center; gap:34px; margin-left:auto; } .nav a{ font-size:.92rem; font-weight:500; color:var(--ink-soft); position:relative; padding-block:6px; transition:color .2s ease; } .nav a::after{ content:''; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--navy-700); transition:right .25s ease; } .nav a:hover{ color:var(--ink); } .nav a:hover::after{ right:0; } .nav a.is-active{ color:var(--navy-700); font-weight:600; } .nav a.is-active::after{ right:0; } .header-tools{ display:flex; align-items:center; gap:16px; flex:none; } /* Language toggle */ .lang-switch{ display:inline-flex; align-items:center; border:1px solid var(--line-strong); border-radius:999px; overflow:hidden; background:var(--white); } .lang-switch button{ padding:6px 13px; font-size:.78rem; font-weight:600; font-family:var(--font-display); color:var(--ink-soft); transition:background .2s ease, color .2s ease; line-height:1.4; } .lang-switch button.is-active{ background:var(--navy-700); color:#fff; } .lang-switch button:not(.is-active):hover{ background:var(--paper-dim); color:var(--ink); } .nav-toggle{ display:none; flex-direction:column; gap:5px; width:24px; padding:4px 0; } .nav-toggle span{ height:2px; width:100%; background:var(--ink); border-radius:2px; transition:transform .3s ease, opacity .3s ease; } .nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2){ opacity:0; } .nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } @media (max-width:1360px){ .header-tools .btn{ display:none; } .nav{ /* explicit offsets rather than the `inset` shorthand: if a browser does not understand `inset`, every offset falls back to `auto` and the panel is laid out at its static position with its natural width, sticking out past the right edge and creating a sideways scroll. */ position:fixed; top:var(--nav-h); right:0; left:0; width:100%; max-width:100%; /* Height stated explicitly. Relying on top+bottom with height:auto left the panel collapsed to a single row on some engines. dvh accounts for the mobile address bar; vh is the fallback for browsers without it. */ height:calc(100vh - var(--nav-h)); height:calc(100dvh - var(--nav-h)); background:#fff; /* opaque: the page must not show through */ z-index:1; /* under .header-inner, over the page */ overflow-y:auto; /* never hide links on a short screen */ -webkit-overflow-scrolling:touch; flex-direction:column; justify-content:center; gap:30px; padding:24px 0; margin:0; border-top:1px solid var(--line); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-10px); transition:opacity .28s ease, transform .28s cubic-bezier(.4,0,.2,1), visibility 0s linear .28s; } .nav.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); transition:opacity .28s ease, transform .28s cubic-bezier(.4,0,.2,1), visibility 0s; } .nav a{ font-size:1.25rem; font-weight:600; color:var(--ink); } .nav-toggle{ display:flex; } } /* Hero -------------------------------------------------------------------- */ .hero{ position:relative; background:var(--navy-700); color:#fff; overflow:hidden; padding-block:clamp(72px,10vw,132px); } /* Sized so the whole hero -- headline, copy, buttons and all six highlights -- clears a standard laptop viewport without scrolling. The cap is on the block as a whole (padding included); type sizes are unchanged. */ .hero--home{ min-height:min(84vh,760px); display:flex; align-items:center; } /* Roomier again once the viewport can afford it. */ .hero__bg{ position:absolute; inset:0; z-index:0; opacity:.5; overflow:hidden; } /* canvas is absolutely positioned rather than height:100% so it can never feed back into the hero's own height calculation */ .hero__bg canvas{ position:absolute; inset:0; display:block; width:100%; height:100%; } /* Every interior page shares one hero height so What We Do, Our Products, For Suppliers and For Manufacturers read as siblings. Stepped media queries rather than clamp(): the value must exceed the tallest hero's own content (Suppliers, which carries CTA buttons) or that page would grow past the others -- and stepped values are supported everywhere. */ .hero--page{ min-height:560px; display:flex; align-items:center; } @media (max-width:1100px){ .hero--page{ min-height:480px; } } @media (max-width:820px){ .hero--page{ min-height:430px; } } @media (max-width:600px){ .hero--page{ min-height:380px; } } .hero__photo{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; opacity:.16; filter:grayscale(40%); } .hero__inner{ position:relative; z-index:2; } .hero h1{ color:#fff; max-width:15ch; } .hero h1 em{ font-style:normal; color:var(--accent-bright); } .hero__sub{ font-size:clamp(1rem,1.6vw,1.2rem); color:rgba(255,255,255,.78); max-width:60ch; margin-top:22px; line-height:1.68; } .hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; } .hero--page h1{ max-width:20ch; } .hero__crumb{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:14px; } /* Stat strip -------------------------------------------------------------- */ /* Stat rows always divide evenly: the hero's six highlights sit 3 x 2, and .stats--4 is used where a section has exactly four figures. */ .stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px 24px; } .stats--hero{ grid-template-columns:repeat(3,1fr); max-width:840px; } .stats--4{ grid-template-columns:repeat(4,1fr); } @media (max-width:1000px){ .stats--4{ grid-template-columns:repeat(2,1fr); } } @media (max-width:820px){ .stats,.stats--hero{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .stats,.stats--hero,.stats--4{ grid-template-columns:repeat(2,1fr); } } .stat__num{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.9rem,3.4vw,2.7rem); color:var(--navy-700); line-height:1; } .section--navy .stat__num{ color:#fff; } .hero .stat__num{ color:#fff; } .stat__label{ display:block; margin-top:9px; font-size:.87rem; color:var(--ink-soft); max-width:24ch; } .section--navy .stat__label,.hero .stat__label{ color:rgba(255,255,255,.62); } .stats--hero{ margin-top:52px; padding-top:32px; border-top:1px solid var(--line-on-navy); } /* Cards ------------------------------------------------------------------- */ /* Explicit column counts, not auto-fit: auto-fit was silently fitting 4 cards into a .grid--3 row (and 7 badges into a row of 8), producing lopsided 4+2 / 7+1 layouts. Fixed counts with deliberate breakpoints keep every row balanced at every width. */ .grid{ display:grid; gap:22px; } .grid--2{ grid-template-columns:repeat(2,1fr); } .grid--3{ grid-template-columns:repeat(3,1fr); } .grid--4{ grid-template-columns:repeat(4,1fr); } @media (max-width:1000px){ .grid--3,.grid--4{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; } } .card{ background:#fff; border:1px solid var(--line); border-radius:5px; padding:30px 26px; transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease; } .card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-strong); } /* Icon wrappers: these are sometimes , which is inline by default — so width/height would be ignored and the inline