/* DAQIN 大秦 — v4 design system. Change from v3: the site is now RED ON WHITE by default, with the previous "dark shelf" palette preserved as an opt-in dark theme. Theming contract ---------------- :root → light (red/white), the default :root[data-theme="dark"] → dark shelf The element carries data-theme. app.js sets it from localStorage, or from prefers-color-scheme on a first visit. Every colour below is a variable — no component hard-codes a hex, so a theme swap can never half-apply. Fonts: Space Grotesk display / Source Sans 3 body / Noto Serif SC glyphs. */ :root{ /* surfaces */ --bg:#FFFFFF; --bg-2:#FBF7F4; --panel:#FFFFFF; --panel-2:#F5EFEA; /* ink */ --text:#17120F; --text-dim:rgba(23,18,15,.72); --mut:#6E635C; /* brand red — `red` for surfaces/accents, `red-ink` for text & fills that carry white type (AA-compliant at 6.4:1 against white) */ --red:#C33A26; --red-ink:#A32E21; --red-soft:rgba(195,58,38,.10); --glow:rgba(195,58,38,.14); /* supporting */ --jade:#5F7A6E; --line:rgba(23,18,15,.13); --line-strong:rgba(23,18,15,.26); --footer-bg:#17120F; --shadow:0 1px 2px rgba(23,18,15,.05),0 8px 24px -16px rgba(23,18,15,.18); --ease:cubic-bezier(.16,1,.3,1); --head-h:62px; /* live-measured by app.js — never trust a guess */ } :root[data-theme="dark"]{ --bg:#0F1213; --bg-2:#151A1C; --panel:#1B2124; --panel-2:#20272B; --text:#F2EDE3; --text-dim:rgba(242,237,227,.68); --mut:#98A39E; /* Tumšā akcenta atvasinājums (2026-08-18): pilnpiesātināts #D64B36 uz #0F1213 lasās neona. Abi toņi atvasināti no veikala fiziskiem materiāliem — ķīniešu lakas / zīmoga pastas (印泥) sarkanā: teksta akcents #CE5843 (4.57:1 pret fonu, AA), virsmas ar baltu tekstu #B8432F (5.41:1 zem balta, AA). Aprēķināts, ne uzminēts. */ --red:#CE5843; --red-ink:#B8432F; --red-soft:rgba(206,88,67,.12); --glow:rgba(206,88,67,.24); --jade:#7E948A; --line:rgba(126,148,138,.2); --line-strong:rgba(126,148,138,.38); --footer-bg:#0A0D0E; --shadow:none; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} /* Mobilā kļūda "tukša labā mala": .slide.alt pirms animācijas stāv +28px pa labi. overflow-x tikai uz telefona pārlūkos neliedz izvērst skata platumu — lapa kļūst platāka par ekrānu un ļauj "pastaigāt" pa labo pusi. Klipojam arī ; `clip` (ne `hidden`), lai nekļūst par ritināšanas konteineru un position:sticky/fixed turpina strādāt normāli. */ html{overflow-x:clip} body{ font-family:'Source Sans 3',system-ui,sans-serif; background:var(--bg);color:var(--text); line-height:1.65;font-size:16.5px;overflow-x:clip; transition:background .25s ease,color .25s ease; } h1,h2,h3{font-family:'Space Grotesk',sans-serif;font-weight:700;line-height:1.04;letter-spacing:-.025em} img{max-width:100%;display:block} .container{width:min(1140px,92%);margin:0 auto} .num{font-variant-numeric:tabular-nums} ::selection{background:var(--red);color:#fff} /* visible keyboard focus everywhere — v3 had none */ :focus-visible{outline:2px solid var(--red);outline-offset:2px} .skip{position:absolute;left:-9999px;top:0;background:var(--red-ink);color:#fff;padding:10px 16px;z-index:100} .skip:focus{left:8px;top:8px} /* ---------------- header ---------------- */ header{ position:sticky;top:0;z-index:60; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(14px) saturate(120%); border-bottom:1px solid var(--line); } @supports not (background:color-mix(in srgb,red 50%,transparent)){ header{background:var(--bg)} } .nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0} /* min-width:0 is load-bearing. Without it the wordmark refuses to shrink below its content width, and on a 320–360px screen it pushes .nav-tools (theme + burger) clean off the right edge — the overlap this rebuild had to fix. body{overflow-x:hidden} was hiding the damage rather than preventing it. */ .wordmark{text-decoration:none;display:flex;align-items:center;gap:12px;color:var(--text);min-width:0;flex:0 1 auto} .wordmark .zh{font-family:'Noto Serif SC',serif;font-size:1.7rem;color:var(--red);line-height:1;flex-shrink:0} .wordmark .lat{display:flex;flex-direction:column;line-height:1.05;min-width:0} .wordmark .lat b{font-family:'Space Grotesk',sans-serif;font-size:1.12rem;letter-spacing:.14em} .wordmark .lat small{ font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--jade); font-weight:600;margin-top:2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* the tools block must never be the thing that gives way */ .nav-tools{flex-shrink:0} .nav-links{display:flex;gap:26px;align-items:center;list-style:none} .nav-links a{ text-decoration:none;font-size:.85rem;font-weight:600;color:var(--text-dim); border-bottom:2px solid transparent;padding-bottom:3px;transition:color .2s; } .nav-links a:hover{color:var(--text)} .nav-links a.active{border-bottom-color:var(--red);color:var(--text)} .langs{display:flex;gap:10px;margin-left:8px;padding-left:16px;border-left:1px solid var(--line)} .langs button{background:none;border:0;cursor:pointer;font-family:inherit;font-size:.76rem;font-weight:700;color:var(--text);opacity:.4} .langs button.on{opacity:1;color:var(--red)} /* theme toggle — sits beside the burger on mobile, in the bar on desktop */ .nav-tools{display:flex;align-items:center;gap:6px} .theme-toggle{ background:none;border:1px solid var(--line);cursor:pointer; width:38px;height:38px;display:grid;place-items:center;color:var(--text); transition:border-color .2s,background .2s; } .theme-toggle:hover{border-color:var(--red);background:var(--red-soft)} .theme-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round} .theme-toggle .i-moon{display:none} :root[data-theme="dark"] .theme-toggle .i-sun{display:none} :root[data-theme="dark"] .theme-toggle .i-moon{display:block} /* burger — three bars, right-hand side, morphs into an X */ .burger{ display:none;background:none;border:1px solid var(--line);cursor:pointer; width:38px;height:38px;padding:0;position:relative; } .burger span{ display:block;position:absolute;left:50%;width:19px;height:2px;background:var(--text); transform:translateX(-50%);transition:transform .28s var(--ease),opacity .18s linear; } .burger span:nth-child(1){top:12px} .burger span:nth-child(2){top:18px} .burger span:nth-child(3){top:24px} .burger[aria-expanded="true"] span:nth-child(1){transform:translateX(-50%) translateY(6px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateX(-50%) translateY(-6px) rotate(-45deg)} /* ---------------- hero ---------------- */ .hero{position:relative;min-height:88svh;display:flex;align-items:center;overflow:hidden} .hero::before{content:"";position:absolute;top:-20%;right:-8%;width:70vw;height:70vw;max-width:900px;max-height:900px;background:radial-gradient(closest-side,var(--glow),transparent 70%);pointer-events:none} .glyph-bg{position:absolute;font-family:'Noto Serif SC',serif;color:var(--red);opacity:.055;line-height:.9;pointer-events:none;user-select:none} :root:not([data-theme="dark"]) .glyph-bg{opacity:.07} .hero .glyph-bg{font-size:clamp(14rem,32vw,26rem);right:-4%;bottom:-10%} .hero-grid{display:grid;grid-template-columns:6.5fr 5.5fr;gap:30px;align-items:center;position:relative;z-index:2;width:min(1140px,92%);margin:0 auto;padding:60px 0} .hero .eyebrow{font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--jade);font-weight:700;margin-bottom:20px} .hero h1{font-size:clamp(2.4rem,6vw,4.6rem);color:var(--text)} .hero h1 em{font-style:normal;color:var(--red)} .hero .sub{margin-top:20px;font-size:clamp(1rem,1.5vw,1.15rem);max-width:44ch;color:var(--text-dim)} .hero-ctas{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap} .hero-visual{position:relative} /* Galvenās lapas foto (veikala iekšskats, 4/3) — pedestal aizvietots ar īstu bildi. */ .hero-photo img{aspect-ratio:4/3;box-shadow:var(--shadow)} .pedestal{position:relative;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center} .pedestal::before{content:"";position:absolute;inset:12%;background:radial-gradient(closest-side,var(--glow),transparent 72%);filter:blur(6px)} .pedestal::after{content:"";position:absolute;left:18%;right:18%;bottom:8%;height:1px;background:linear-gradient(90deg,transparent,var(--line-strong),transparent)} .pedestal .slot{position:relative;width:74%;aspect-ratio:3/4;border:1.5px dashed var(--jade);background:var(--panel-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:20px;color:var(--jade)} .slot .s-label{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700} .slot .s-desc{font-size:.78rem;color:var(--mut);max-width:26ch} /* ---------------- buttons ---------------- */ .btn{ display:inline-block;background:var(--red-ink);color:#fff;text-decoration:none; padding:14px 30px;font-weight:700;font-size:.86rem;border:none;cursor:pointer; font-family:'Space Grotesk',sans-serif;letter-spacing:.02em; transition:background .2s,transform .15s; } .btn:hover{background:var(--red);transform:translateY(-1px)} .btn.ghost{background:transparent;color:var(--text);border:1.5px solid var(--line-strong)} .btn.ghost:hover{background:var(--panel-2);border-color:var(--red)} /* ---------------- fact strip ---------------- */ .facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)} .facts .container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 22px;padding:16px 0} .facts span{font-size:.82rem;color:var(--mut)} .facts b{color:var(--text);font-weight:600} section{padding:92px 0;scroll-margin-top:calc(var(--head-h) + 12px);position:relative} .kicker{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:14px} h2{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:14px;color:var(--text)} .lead{max-width:56ch;color:var(--text-dim)} /* Globālais reset noņem rindkopu atstarpes — vairāku .lead rindkopu stāsts ("Saimnieka vārdiem") salipa vienā blīvā blokā. */ .lead + .lead{margin-top:14px} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center} /* Īsts foto divkolonnu blokā. Bez rāmja un bez akcenta svītras — bilde pati ir akcents. 3/2 ir avota proporcija, tāpēc `cover` neko negriež. */ .ph{margin:0} .ph img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover} /* Saimnieka portrets ir stāvs kadrs — 3/2 šķērsgriezums nocirstu seju. Rāda pilnu kadru, ierobežojot platumu, lai kolonna nekļūst pārmērīgi gara. */ .owner-photo{max-width:420px;margin:0 auto;width:100%} .owner-photo img{aspect-ratio:auto;object-fit:contain} /* ---------------- showcase ---------------- */ .showcase{background:var(--bg-2);overflow:hidden} .showcase .glyph-bg{font-size:clamp(10rem,24vw,20rem);left:-3%;top:-6%} .legend-grid{display:grid;grid-template-columns:5fr 7fr;gap:54px;align-items:center;position:relative;z-index:2} .legend-ledger{list-style:none} .legend-ledger li{padding:20px 4px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:14px;cursor:default;transition:background .2s} .legend-ledger li:first-child{border-top:1px solid var(--line)} .legend-ledger li:hover{background:var(--red-soft)} .legend-ledger .l-img{ width:54px;height:54px;flex:0 0 auto;background:var(--panel-2); border:1px solid var(--line);display:flex;align-items:center;justify-content:center; } .legend-ledger .l-img img{width:100%;height:100%;object-fit:contain;padding:5px} .legend-ledger .zh{font-family:'Noto Serif SC',serif;color:var(--red);font-size:1.1rem;min-width:3.2em} .legend-ledger b{font-family:'Space Grotesk',sans-serif;font-size:1.02rem;color:var(--text)} .legend-ledger p{font-size:.85rem;color:var(--mut);margin-top:2px} .legend-ledger .l-price{margin-left:auto;font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--text-dim);white-space:nowrap;text-align:right} .legend-ledger .l-price .b-stock{font-size:.56rem;padding:2px 7px;letter-spacing:.06em} /* ---------------- category filter (two tiers) ---------------- */ .cat-bar{display:flex;gap:8px;flex-wrap:wrap;margin:30px 0 0} .cat-bar button{ background:transparent;border:1px solid var(--line);padding:9px 18px;cursor:pointer; font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.8rem;color:var(--text-dim); transition:all .15s; } .cat-bar button:hover{border-color:var(--red);color:var(--text)} .cat-bar button.on{background:var(--red-ink);color:#fff;border-color:var(--red-ink)} /* sub-tier: lighter, visually subordinate to the group row above it */ .sub-bar{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 0;padding-left:2px} .sub-bar:empty{display:none} .sub-bar button{ background:transparent;border:1px solid transparent;border-bottom:1px solid var(--line); padding:6px 12px;cursor:pointer;font-family:inherit;font-weight:600;font-size:.76rem; color:var(--mut);transition:all .15s; } .sub-bar button:hover{color:var(--text);border-bottom-color:var(--red)} .sub-bar button.on{color:var(--red);border-bottom-color:var(--red);background:var(--red-soft)} /* ---------------- product cards ---------------- */ .prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px} .prod{background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .25s var(--ease),border-color .25s} .prod:hover{transform:translateY(-4px);border-color:var(--line-strong)} .prod .p-img{ aspect-ratio:4/3;background:radial-gradient(ellipse at 50% 68%,var(--glow),transparent 70%),var(--panel-2); display:flex;align-items:center;justify-content:center;color:var(--jade);font-size:.66rem; letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--line); text-align:center;padding:8px; /* Flex vienumam min-height ir `auto`, tāpēc gara portreta bilde stiepa šo kasti garāku par aspect-ratio 4/3 — rindā kartītes izgāja nelīdzenas (369 px pret 450 px). min-height:0 + overflow:hidden pietur rāmi. */ min-height:0;overflow:hidden; } /* Packshots are shot on white with the whole pack in frame — `cover` would crop the brand off the top. `contain` keeps the product intact; the padding stops it from touching the card edge. */ .prod .p-img img{ width:100%;height:100%;max-width:100%;max-height:100%;min-height:0; object-fit:contain;padding:12px;box-sizing:border-box; } .prod .p-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1} .prod .p-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px} .prod h3{font-size:1rem;color:var(--text)} .prod .p-zh{font-family:'Noto Serif SC',serif;color:var(--jade);font-size:.8rem} .prod .p-desc{font-size:.84rem;color:var(--mut);flex:1} .prod .p-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding-top:10px;border-top:1px dotted var(--line)} .prod .p-price{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.05rem;color:var(--text)} .prod .p-unit{font-size:.72rem;color:var(--mut);font-weight:400} /* ---------- discount ---------- Driven by the `discount` column in the owner's spreadsheet; 0 renders nothing at all, so a shop with no offers on never shows an empty sale slot. */ .p-was,.l-was{color:var(--mut);font-weight:400;font-size:.82em;margin-right:2px} .p-price.sale{color:var(--red)} .b-sale{ display:inline-block;background:var(--red);color:#fff;font-family:'Space Grotesk',sans-serif; font-weight:700;font-size:.6rem;letter-spacing:.08em;padding:3px 7px;margin-left:6px; white-space:nowrap;vertical-align:middle; } .prod .p-foot{flex-wrap:wrap;gap:4px} .legend-ledger .l-price .b-sale{font-size:.55rem;padding:2px 6px} @media print{.b-sale{background:none;color:#000;border:1px solid #000}} .badges{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .b-spice{color:var(--red);font-size:.78rem;letter-spacing:1px} .b-veg{border:1px solid var(--jade);color:var(--jade);font-size:.62rem;font-weight:700;padding:2px 7px;letter-spacing:.06em} /* Saimnieka "visbiežāk" tags no izklājlapas — datu nesēja zīme, ne dekors. */ .b-top{background:var(--red-soft);color:var(--red-ink);font-size:.62rem;font-weight:700;padding:2px 7px;letter-spacing:.06em;text-transform:uppercase} :root[data-theme="dark"] .b-top{color:#E8836F} .b-stock{font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px} .b-stock.in{background:rgba(95,122,110,.16);color:#3F5A4E} .b-stock.out{background:var(--red-soft);color:var(--red-ink)} :root[data-theme="dark"] .b-stock.in{background:rgba(126,148,138,.16);color:#A9BDB3} :root[data-theme="dark"] .b-stock.out{color:#E8836F} /* Tumšajā tēmā baltais uzraksts prasa tumšāko lakas toni zem sevis — --red (teksta akcents) tur dotu tikai 4.12:1. */ :root[data-theme="dark"] .b-sale{background:var(--red-ink)} :root[data-theme="dark"] .btn:hover{background:#C24E38} .prod.sold{opacity:.55} .prod.sold .p-img{filter:grayscale(1)} .stock-note{margin-top:22px;font-size:.8rem;color:var(--mut);border-left:3px solid var(--jade);padding:8px 14px;background:var(--bg-2)} /* honest empty state for a group with no items yet */ .empty-state{ grid-column:1/-1;border:1.5px dashed var(--line-strong);background:var(--bg-2); padding:44px 30px;text-align:center;color:var(--mut); } .empty-state b{display:block;font-family:'Space Grotesk',sans-serif;color:var(--text);font-size:1.05rem;margin-bottom:6px} .empty-state p{font-size:.88rem;max-width:46ch;margin:0 auto} /* ---------------- printable price list ---------------- */ .print-ledger{background:var(--panel);border:1px solid var(--line);padding:36px 40px;margin-top:56px} .print-ledger h2{font-size:1.4rem} .ledger{list-style:none;margin-top:22px} .ledger li{display:flex;align-items:baseline;gap:10px;padding:11px 2px;border-bottom:1px solid var(--line);font-size:.94rem} .ledger li:first-child{border-top:1px solid var(--line)} .ledger .l-name{font-weight:600;color:var(--text)} .ledger .l-dots{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px)} .ledger .l-val{color:var(--mut);white-space:nowrap} .ledger .l-sub{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--jade);font-weight:700;margin:16px 0 4px} @media print{ body{background:#fff;color:#111} header,.hero,.cat-bar,.sub-bar,.facts,footer,.no-print,.showcase,.steps,.faq,.map{display:none!important} .print-ledger{border:0;padding:0;background:#fff;box-shadow:none} .ledger .l-name{color:#111}.ledger .l-val{color:#444} .print-ledger h2,.kicker,.ledger .l-sub{color:#111} } /* ---------------- steps ---------------- */ .steps{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--line);margin-top:34px} .step{background:var(--panel);padding:28px 26px} .step .s-no{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--red);font-size:.85rem;letter-spacing:.1em} .step h3{margin:10px 0 8px;font-size:1.05rem;color:var(--text)} .step p{font-size:.86rem;color:var(--mut)} /* ---------------- form ---------------- */ .form-wrap{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--red);padding:44px;max-width:640px;margin:36px auto 0;box-shadow:var(--shadow)} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} .field{display:flex;flex-direction:column;gap:6px} .field.full{grid-column:1/-1} .field label{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)} .field input,.field textarea,.field select{ border:1px solid var(--line-strong);padding:11px 13px;font-family:inherit; /* Mobilā kļūda "dīvains zoom": iOS Safari pietuvina lapu, fokusējot lauku, kura fonts ir zem 16px (.95rem × 16.5 = 15.7px), un atpakaļ neattālina. max() notur 16px minimumu, nemainot izskatu uz galddatora. */ font-size:max(.95rem,16px); background:var(--bg);color:var(--text);border-radius:0; } .field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--red);border-color:transparent} .submit{grid-column:1/-1;justify-self:start} .radio-row{display:flex;flex-direction:column;gap:9px;font-size:.92rem;color:var(--text-dim)} .radio-row label{display:flex;align-items:baseline;gap:9px;cursor:pointer} .radio-row input{accent-color:var(--red)} .consent{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:.82rem;color:var(--mut)} .consent input{accent-color:var(--red);margin-top:4px;flex-shrink:0} .consent a{color:var(--red-ink);text-decoration:underline} :root[data-theme="dark"] .consent a{color:#E8836F} /* ---------------- faq + map ---------------- */ .faq details{border-bottom:1px solid var(--line)} .faq details:first-of-type{border-top:1px solid var(--line)} .faq summary{cursor:pointer;padding:18px 40px 18px 2px;font-weight:600;list-style:none;position:relative;font-size:.98rem;color:var(--text)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);color:var(--red);font-size:1.3rem} .faq details[open] summary::after{content:"−"} .faq .a{padding:0 2px 20px;font-size:.9rem;color:var(--mut);max-width:70ch} .map iframe{width:100%;height:360px;border:0} :root[data-theme="dark"] .map iframe{filter:grayscale(.3) contrast(1.05)} /* ---------------- footer ---------------- */ footer{background:var(--footer-bg);color:rgba(242,237,227,.66);padding:48px 0;font-size:.85rem;border-top:1px solid var(--line)} footer .container{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap} footer a{color:#E8836F;text-decoration:none} footer a:hover{text-decoration:underline} footer nav a{display:block;color:rgba(242,237,227,.82);margin-bottom:6px} footer .f-legal{font-size:.76rem;color:rgba(242,237,227,.5);margin-top:10px;line-height:1.7} .demo-badge{font-size:.68rem;letter-spacing:.08em;border:1px solid rgba(242,237,227,.3);padding:6px 13px;display:inline-block} /* ---------------- subpage head ---------------- */ .page-head{padding:56px 0 8px;position:relative} .page-head h1{font-size:clamp(2rem,4.6vw,3.2rem)} .page-head .eyebrow{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--jade);font-weight:700;margin-bottom:12px} .page-head p{margin-top:12px;max-width:52ch;color:var(--text-dim)} /* ---------------- legal / long-form copy ---------------- */ .prose{max-width:74ch} .prose h2{font-size:clamp(1.3rem,2.4vw,1.7rem);margin:38px 0 10px} .prose h3{font-size:1.05rem;margin:24px 0 8px;color:var(--text)} .prose p,.prose li{color:var(--text-dim);font-size:.95rem} .prose ul,.prose ol{margin:10px 0 10px 22px} .prose li{margin-bottom:6px} .prose a{color:var(--red-ink);text-decoration:underline} :root[data-theme="dark"] .prose a{color:#E8836F} .prose table{width:100%;border-collapse:collapse;margin:14px 0;font-size:.9rem} .prose th,.prose td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top} .prose th{background:var(--bg-2);font-weight:700;color:var(--text)} .prose .updated{font-size:.8rem;color:var(--mut);border-left:3px solid var(--red);padding:6px 12px;background:var(--bg-2)} /* ---------------- motion ---------------- */ .slide{opacity:0;transform:translateX(-28px);transition:opacity .6s var(--ease),transform .6s var(--ease)} .slide.alt{transform:translateX(28px)} .slide.vis{opacity:1;transform:none} .rise{opacity:0;transform:translateY(26px) scale(.94);transition:opacity .8s var(--ease),transform .8s var(--ease)} .rise.vis{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .slide,.rise{opacity:1!important;transform:none!important;transition:none} html{scroll-behavior:auto} .burger span,body{transition:none} } /* ---------------- mobile ---------------- v3 bug: the drawer was `top:58px`, a guessed header height. When the wordmark wrapped, the header grew and the drawer slid underneath it, covering the logo and the burger. It also had no scrolling, so a long menu was unreachable. v4 anchors the drawer to the measured --head-h and lets it scroll. */ @media (max-width:860px){ /* backdrop-filter on

makes it the containing block for fixed descendants, so the drawer's top/bottom resolved against the 63px header and collapsed to 57px — the menu opened but showed nothing. On mobile the filter goes away (denser bg compensates); the drawer regains the viewport. */ header{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)} .nav-links{ position:fixed;left:0;right:0;top:var(--head-h);bottom:0; background:var(--bg); flex-direction:column;align-items:flex-start; padding:28px 6% calc(28px + env(safe-area-inset-bottom,0px)); gap:22px; transform:translateX(100%); transition:transform .3s var(--ease); overflow-y:auto;overscroll-behavior:contain; border-top:1px solid var(--line); z-index:55; } .nav-links.open{transform:none} .nav-links a{font-size:1.05rem;padding-bottom:6px} .langs{margin-left:0;padding-left:0;border-left:0;padding-top:16px;border-top:1px solid var(--line);width:100%;gap:18px} .langs button{font-size:.95rem} .burger{display:block} /* body scroll lock while the drawer is open */ body.nav-open{overflow:hidden} .hero{min-height:auto} .hero-grid{grid-template-columns:1fr;gap:34px;padding:44px 0} .pedestal{aspect-ratio:auto;padding:20px 0} .pedestal .slot{width:88%;aspect-ratio:4/3} .legend-grid{grid-template-columns:1fr;gap:34px} .two-col{grid-template-columns:1fr;gap:32px} .prod-grid{grid-template-columns:1fr} .steps{grid-template-columns:1fr} .form-grid{grid-template-columns:1fr} .form-wrap{padding:28px 22px} section{padding:60px 0} .hero .glyph-bg{font-size:12rem;right:-12%;bottom:-4%} .showcase .glyph-bg{font-size:9rem} .print-ledger{padding:26px 20px} footer .container{flex-direction:column;gap:22px} } /* very small phones — the 320px floor required by Annex 1 §5 */ @media (max-width:380px){ .wordmark .zh{font-size:1.45rem} .wordmark .lat b{font-size:1rem;letter-spacing:.1em} /* the strapline is the first thing to go — the logo and the controls matter more */ .wordmark .lat small{display:none} .wordmark{gap:9px} .nav-tools{gap:4px} .theme-toggle,.burger{width:34px;height:34px} .burger span{width:17px} .burger span:nth-child(1){top:10px} .burger span:nth-child(2){top:16px} .burger span:nth-child(3){top:22px} .btn{padding:12px 22px;font-size:.82rem} .hero-ctas{gap:9px} .container{width:94%} }