/* ============================================================ KOMASA INC — Porcelain design system White glass surfaces · hairline strokes · green accent ============================================================ */ :root{ /* --muted was #69758a, which failed WCAG 1.4.3 AA on every ground it appears over: 4.45:1 on the body gradient's top stop, 4.14 at the middle, 3.87 at the bottom and 4.29 through glass. The gradient darkens down the page, so the footer was the worst case. #5f6a7e is 12% toward ink, solved against the DARKEST stop so it passes everywhere: 5.22 / 4.85 / 4.54 / 5.03. It is the lightest permitted text colour in the system -- don't lighten it again. */ --ink:#141a22; --slate:#3a4552; --muted:#5f6a7e; /* rgb triplets live next to their hex so an rgba() literal elsewhere can never drift from the token again — that is exactly how the line-card corner glow and the kicker dash kept the old hue-128 green through the 2026-08-16 retint. */ --green-rgb:39,158,105; --green-light-rgb:110,222,171; --green:#279e69; --green-dark:#1f7d53; --green-soft:#e8f6ea; --green-glow:rgba(var(--green-rgb),.45); --blue:#0F6CBD; --blue-dark:#0B5493; --cyan:#3fc9e8; --cyan-deep:#19a8cc; --edge:#e2e6ec; --edge-soft:#eef1f5; --glass-hi:rgba(255,255,255,.62); --glass-lo:rgba(255,255,255,.30); --shadow-soft:0 10px 30px -12px rgba(18,28,44,.20); --shadow-card:0 24px 60px -18px rgba(18,28,44,.28); --radius:18px; --maxw:1340px; --green-light:#6edeab;--green-lighter:#a4f2cf; /* Promoted from index.html's inline block, because it is no longer scene-only. --green-dark clears 5.10:1 on pure white, but the body gradient darkens from #f8fafd to #e4ebf3 down the page, and against the lower half it drops to 4.41 / 4.33 / 4.29 / 4.25 -- under AA. Every kicker now uses this instead, which holds 5.86-7.04 across the whole gradient. */ --green-on-stage:#196542; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:Montserrat,system-ui,-apple-system,sans-serif; color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden; background:linear-gradient(180deg,#f8fafd 0%,#eef2f7 40%,#e9eef5 75%,#e4ebf3 100%); } a{text-decoration:none;color:inherit} img{display:block;max-width:100%} ::selection{background:var(--green-soft);color:var(--green-dark)} /* ---------- ambient background ---------- */ .blobs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} .blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform} .blob.b1{width:44vw;height:44vw;left:-10vw;top:-14vw;background:radial-gradient(circle,#d3f0f9 0%,transparent 65%)} .blob.b2{width:38vw;height:38vw;right:-8vw;top:26vh;background:radial-gradient(circle,#dcf2e2 0%,transparent 65%)} .blob.b3{width:46vw;height:46vw;left:24vw;bottom:-20vw;background:radial-gradient(circle,#e3ecf7 0%,transparent 62%)} /* ---------- liquid glass nav ---------- */ .nav{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center; gap:clamp(10px,3vw,22px); padding:12px clamp(18px,4vw,46px); background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.56)); backdrop-filter:blur(26px) saturate(190%);-webkit-backdrop-filter:blur(26px) saturate(190%); border-bottom:1px solid rgba(255,255,255,.7); box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 10px 30px -18px rgba(18,28,44,.25)} /* The logo link is a flex item and used to inherit flex-shrink:1, so once the nav ran out of room flexbox crushed the and img{max-width:100%} squashed the logo's width while height stayed pinned at 26px — 82% aspect distortion at 768px, 78% at 375px. flex:0 0 auto on both the link and the img makes the brand un-squashable (same fix already applied to .lang and .burger); the clamp is what actually shrinks it on small screens, proportionally. :first-child so the RFQ .btn keeps its own shrink behaviour. */ .nav > a:first-child{flex:0 0 auto} /* 30px is proportioned, not maximised. 38px was the measured ceiling and read as too big: it left 0.5px of air in the 39px content box and matched the CTA's height exactly, so a solid full-height hexagon spanned the bar edge to edge and competed with the primary action. Three criteria agree on 30-32: mark occupies 60-75% of the 39px content box -> 24-30px (30 = 77%) logo stays under the 38px CTA, identity < action -> <=32px (30 = 79%) wordmark reads against the 15px nav links -> 30-34px (30 = 1.06x) The old mark sat at 0.92x the link text, which was timid; 1.06x lets the brand lead without shouting. Below ~390px the width budget binds before 30px does — the language toggle and burger are fixed, so the room left for the mark grows with the viewport. RE-MEASURED 2026-09-04 for the Industrial Emerald lockup. Its trimmed aspect is 6.20 against the old mark's 5.686, so it is 9.4% wider at the same height, and the old 16vw - 29px taper broke the narrow end: at 320px the burger overran the content edge by 10px and ate the whole 18px right gutter; at 360px it sat 12px into it. The budget is measured, not guessed — nav width, minus 2x the padding clamp, minus the fixed 126px of language toggle + burger, minus three gap clamps: viewport logo budget fits height this clamp slack 320px 128px 20.6px 20.0px 4px 360px 165px 26.7px 25.7px 6px 375px 179px 28.9px 27.9px 6px >=390px 193px+ 31.1px+ 30.0px 7px+ 30px still caps it: that number came from the logo's HEIGHT against the 39px content box and the 38px CTA, neither of which the aspect change touched. Re-measure again if the aspect, the toggle, or the burger ever changes. */ .nav .logo{height:clamp(20px,14.5vw - 26.5px,30px);width:auto;flex:0 0 auto} .nav .spacer{flex:1} .nav .links{display:flex;gap:22px;font-size:15px;font-weight:700;color:var(--ink)} .nav .links a{position:relative;padding:4px 0;transition:color .18s} .nav .links a:hover,.nav .links a.on{color:var(--green-dark)} .nav .links a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--green)} /* real