/* ========================================================================== Kilo Peptides — wholesale supply site Visual system: minimalist, editorial, architectural. Warm cream ground, charcoal type, one rust accent, gray hairlines. Stark contrast, heavy negative space, asymmetric composition. No glass, no photographic ground, no three-column feature cards. THE PALETTE IS MANDATED AND UNIVERSAL. These four values, and only these: #FAF9F5 cream the ground, everywhere #141413 charcoal type, and the dark structural blocks #D97757 rust interactive accent and fills #B0AEA5 gray hairlines and borders HOW THEY MAY BE COMBINED IS NOT A STYLE CHOICE, IT IS MEASURED: charcoal on cream 17.5:1 body copy, headings, anything cream on charcoal 17.5:1 dark inverted sections rust on charcoal 5.9:1 accent type inside dark blocks charcoal on rust 5.9:1 type sitting ON a rust button rust on cream 2.96:1 FILL ONLY -- never type cream on rust 2.96:1 NEVER. A rust button takes charcoal type, not white. This is the one that gets built wrong by reflex. gray on cream 2.11:1 hairlines only, never type Rust at 2.96:1 against cream also sits a hair under the 3:1 a UI control needs to be identifiable by its boundary, so interactive rust fills carry a charcoal edge rather than floating on the cream unbordered. MOTION is spring, not linear. --ease-spring overshoots slightly and settles; linear fades are what make a page feel like a template. Everything is inside a prefers-reduced-motion guard. ========================================================================== */ :root{ /* --- the four --------------------------------------------------------- */ --cream:#FAF9F5; --charcoal:#141413; --rust:#D97757; --gray:#B0AEA5; /* Derived tints, all from the four above. Kept few on purpose: a long ramp of near-identical greys is how a stark palette turns muddy. */ --cream-2:#F2F0E9; /* a barely-there band, for alternating sections */ --charcoal-70:#5C5B58; /* secondary type -- 6.45:1 cream, 5.96 raised */ /* Tertiary type. #767470 was here, documented as 4.54:1 -- it actually measures 4.43 on cream and 4.09 on the raised band, so it failed AA for normal text in all 31 places it was used: SKUs, spec-table keys, form hints, footer headings, table headers, tab subtitles. #6D6D61 is the same warm neutral hue at 4.97 on cream and 4.59 raised, passing on both. */ --charcoal-50:#6D6D61; /* tertiary type -- 4.97:1 cream, 4.59 raised */ --rust-deep:#C25E3F; /* hover only; never a text colour on cream */ /* #B0AEA5 is the mandated border colour and this is where it belongs: decorative separators between blocks. It measures 2.11:1 on cream, which is right for a hairline and NOT enough for anything a user has to find and click -- so control boundaries use --hair-strong below. */ --hair:var(--gray); /* Control boundaries: inputs, selects, the things a 3:1 identifiability requirement actually applies to. */ --hair-strong:rgba(20,20,19,.34); /* --- semantic aliases -------------------------------------------------- The 1,400 lines of component CSS below were written against these names. */ --paper:var(--cream); --paper-2:var(--cream); --paper-3:var(--cream-2); --ink:var(--charcoal); --ink-2:var(--charcoal-70); --ink-3:var(--charcoal-50); --line:var(--hair); --line-2:var(--hair-strong); --accent:var(--rust); --accent-text:var(--charcoal); /* rust cannot be type on cream */ --accent-soft:rgba(217,119,87,.10); --accent-on:var(--charcoal); /* type ON a rust fill */ --accent-hover:var(--rust-deep); --focus:var(--charcoal); --scrim:rgba(20,20,19,.42); --blue:#5C5B58; --blue-text:var(--charcoal-70); --blue-soft:var(--cream-2); --green:#4F6B52; --green-text:#3D5540; --green-soft:rgba(79,107,82,.10); --clay:#A8452A; /* warnings: 5.8:1 on cream */ --promo-bg:var(--charcoal); --promo-ink:var(--cream); /* Editorial pages do not float. Elevation is a hairline and a lot of space, not a drop shadow. */ --shadow:none; --shadow-lift:0 10px 30px rgba(20,20,19,.09); --radius:4px; --radius-lg:6px; --maxw:1240px; /* --- type ------------------------------------------------------------- Space Grotesk for headings (quirky geometric grotesque — closer to the Styrene-like Anthropic/Geist register than Poppins). Source Serif 4 for reading (editorial text serif, Tiempos-adjacent free stand-in). Fluid throughout: every size below is a clamp() so the scale compresses on a phone instead of stepping at a breakpoint. --type-scale is the editor's size control. */ --type-scale:1; --serif:"Source Serif 4", Georgia, "Times New Roman", serif; --display:"Space Grotesk", "Helvetica Neue", Arial, sans-serif; --body:"Source Serif 4", Georgia, "Times New Roman", serif; --data:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --step--1:clamp(.92rem, .88rem + .18vw, 1.00rem); --step-0 :clamp(1.06rem, 1.00rem + .28vw, 1.18rem); --step-1 :clamp(1.28rem, 1.16rem + .55vw, 1.55rem); --step-2 :clamp(1.60rem, 1.35rem + 1.10vw, 2.25rem); --step-3 :clamp(2.05rem, 1.60rem + 2.10vw, 3.30rem); --step-4 :clamp(2.60rem, 1.80rem + 4.00vw, 5.20rem); --step-5 :clamp(3.20rem, 1.70rem + 7.00vw, 7.50rem); /* --- motion ------------------------------------------------------------ Spring, not linear. The overshoot is small on purpose: enough to feel physical, not enough to look bouncy on a wholesale supply site. */ --dur:.34s; --dur-slow:.62s; --ease:cubic-bezier(.2,.8,.2,1); --ease-spring:cubic-bezier(.34,1.56,.5,1); --lift:-3px; } html{background:var(--cream)} /* ========================================================================== THE GROUND ========================================================================== A flat expanse of #FAF9F5 across a whole viewport is harsh -- it glares, and it makes the page feel like an unstyled document. So the Flatirons photograph stays, but inverted from how it was used before: instead of a dark scrim holding a bright photo down, a CREAM scrim holds it up. The scrim used to sit at ~.80–.88 cream, which buried the Flatirons into anonymous paper tone. It was then lightened to .58–.70 so mountains read through mid-page panels — and charcoal body copy on that composite failed on a phone: Published Pricing sat on bare photograph and the SKU rows were unreadable. Desktop keeps a lighter mid-stop so the rock still shows; phones and the price list get an opaque cream band of their own. */ body::before{ content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background: linear-gradient(180deg, rgba(250,249,245,.82) 0%, rgba(250,249,245,.74) 42%, rgba(250,249,245,.80) 100%), var(--ground-photo, none) center center / cover no-repeat, var(--cream); } body[data-ground="flatirons"]{--ground-photo:url("/img/ground-flatirons-2560.jpg")} body[data-ground="hanginglake"]{--ground-photo:url("/img/ground-hanginglake-2560.jpg")} body[data-ground="tetons"]{--ground-photo:url("/img/ground-tetons-2560.jpg")} body[data-ground="none"]{--ground-photo:none} /* The console gets a plain ground. A photograph behind a two-hundred-row order table is texture competing with the only thing on the page anyone is trying to read -- the storefront can afford atmosphere, a data view cannot. */ body.is-admin{--ground-photo:none} body.is-admin::before{background:var(--cream)} @media (max-width:900px){ body[data-ground="flatirons"]{--ground-photo:url("/img/ground-flatirons-1400.jpg")} body[data-ground="hanginglake"]{--ground-photo:url("/img/ground-hanginglake-1400.jpg")} /* Phones crop the photograph into high-contrast forest texture under the mid-page. Raise the cream until charcoal type clears, even if the rock reads only as warmth. */ body::before{ background: linear-gradient(180deg, rgba(250,249,245,.94) 0%, rgba(250,249,245,.90) 45%, rgba(250,249,245,.93) 100%), var(--ground-photo, none) center center / cover no-repeat, var(--cream); } } /* The one place the photograph is a photograph. A charcoal block bled to the full width with the image behind it, cream type on top -- the stark cream/charcoal contrast the brief asks for, with the picture supplying the texture rather than a flat black rectangle. */ .block-dark{ position:relative; background:var(--charcoal); color:var(--cream); isolation:isolate; } .block-dark::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background: linear-gradient(100deg, rgba(20,20,19,.90) 0%, rgba(20,20,19,.66) 55%, rgba(20,20,19,.52) 100%), var(--ground-photo, none) center 38% / cover no-repeat, var(--charcoal); } .block-dark h1,.block-dark h2,.block-dark h3,.block-dark h4{color:var(--cream)} .block-dark p{color:rgba(250,249,245,.82)} /* Rust is 5.9:1 on charcoal, so inside a dark block it CAN be type -- the one place in the design where that is true. */ .block-dark .label,.block-dark .accent{color:var(--rust)} *,*::before,*::after{box-sizing:border-box} [hidden]{display:none !important} html{ -webkit-text-size-adjust:100%; overflow-x:clip; } body{ margin:0; overflow-x:clip; /* Transparent on purpose: the ground photograph and its cream scrim are painted by the fixed body::before above, and any background here would bury them. */ background:transparent; color:var(--ink); font-family:var(--body); font-size:18px; line-height:1.65; min-height:100vh; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } img{max-width:100%;display:block} a{color:var(--accent-text)} button,input,select,textarea{font-family:var(--display);color:inherit} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .wrap-narrow{max-width:800px;margin:0 auto;padding:0 24px} /* ---------- type ---------- Space Grotesk for every heading, Source Serif 4 for reading. Quirky grotesque over a news serif is the Anthropic/Geist-adjacent register — technical and a little human — without shipping proprietary faces. Every size is a clamp() rather than a breakpoint step, so the scale compresses continuously from desktop to phone. --type-scale multiplies the lot, which is what the editor's text-size control moves. */ h1,h2,h3,h4{ font-family:var(--display); margin:0 0 .45em; font-weight:600; letter-spacing:-.028em; line-height:1.04; text-wrap:balance; color:var(--charcoal); } h1{font-size:calc(var(--step-4) * var(--type-scale));letter-spacing:-.038em;font-weight:500} h2{font-size:calc(var(--step-3) * var(--type-scale));letter-spacing:-.032em;font-weight:500} h3{font-size:calc(var(--step-1) * var(--type-scale));letter-spacing:-.016em;line-height:1.2;font-weight:600} h4{font-size:calc(var(--step-0) * var(--type-scale));letter-spacing:-.01em} p{margin:0 0 1.15em} /* The oversized editorial opener. Used once per page at most -- its whole value is that it is bigger than anything else on the screen. */ .h-display{ font-family:var(--display);font-weight:600; font-size:calc(var(--step-5) * var(--type-scale)); line-height:.94;letter-spacing:-.042em;text-wrap:balance;margin:0 0 .3em; } .data{font-family:var(--data);font-variant-numeric:tabular-nums;letter-spacing:.01em} p{margin:0 0 1em} .lede{font-size:clamp(1.12rem,1.8vw,1.28rem);color:var(--ink-2);line-height:1.6;max-width:62ch} .label{ font-family:var(--display);font-size:.7rem;font-weight:500;letter-spacing:.15em; text-transform:uppercase;color:var(--accent-text);display:block;margin:0 0 14px; } .label-muted{color:var(--ink-3)} .card-key.label-muted{color:var(--ink-3)} .ui{font-family:var(--display)} .num{font-variant-numeric:tabular-nums} .small{font-size:.92rem} .muted{color:var(--ink-3)} .nowrap{white-space:nowrap} /* ---------- announcement bar ---------- */ .promo{ background:var(--promo-bg);color:var(--promo-ink);font-family:var(--display); font-size:.82rem;text-align:center;padding:10px 20px;line-height:1.4; } .promo strong{font-weight:600} .promo a{color:var(--promo-ink);text-decoration:underline;text-underline-offset:2px} /* ---------- header ---------- */ .site-head{ position:sticky;top:0;z-index:60;background:var(--paper); border-bottom:1px solid var(--line); } .head-row{display:flex;align-items:center;gap:28px;height:70px} .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;flex:0 0 auto} .brand-mark{ width:32px;height:32px;border-radius:7px;background:var(--accent);color:var(--accent-on); display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:.8rem; letter-spacing:-.02em;flex:0 0 auto; } .brand-name{font-family:var(--display);font-weight:600;letter-spacing:-.03em;font-size:1.08rem;display:block} .brand-sub{font-family:var(--display);font-size:.6rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);display:block;margin-top:-2px} .nav{display:flex;gap:2px;margin-left:auto;align-items:center;font-family:var(--display)} .nav a{ text-decoration:none;font-size:.9rem;color:var(--ink-2);padding:9px 13px;border-radius:var(--radius); transition:background var(--dur) var(--ease),color var(--dur) var(--ease); } .nav a:hover{background:var(--paper-3);color:var(--ink)} .nav a.is-active{color:var(--ink);font-weight:500} .nav a.nav-cta{margin-left:10px;color:var(--accent-on)} .nav a.nav-cta:hover{color:var(--accent-on);background:var(--accent-hover)} .burger{display:none;margin-left:auto;background:none;border:1px solid var(--line-2);border-radius:var(--radius);padding:9px 11px;cursor:pointer} .burger span{display:block;width:18px;height:1.5px;background:var(--ink);margin:3.5px 0} html.nav-open{overflow:hidden} @media (max-width:940px){ .nav{ position:fixed;inset:70px 0 auto 0;flex-direction:column;align-items:stretch;gap:0; background:var(--paper);border-bottom:1px solid var(--line);padding:8px 16px 18px; display:flex; visibility:hidden;opacity:0;pointer-events:none; transform:translate3d(0,-10px,0); transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility 0s linear var(--dur); box-shadow:var(--shadow); /* The drawer must scroll on its own. On a phone the two mega panels are forced open and stacked inside this drawer (see the max-width:940px block further down), so it holds seven nav links, six product groups, eleven service links and the account row. That is taller than any phone. Without a height cap it simply ran off the bottom of the screen: the drawer is positioned, so the page behind it scrolls instead, and the links past the fold could not be reached at all. dvh, not vh: on iOS Safari 100vh is the height of the viewport WITHOUT the address bar, so a vh-based cap is taller than the visible screen and reintroduces the same unreachable strip. dvh tracks the bar as it hides and shows. The vh line above it is the fallback for browsers that do not know dvh -- slightly too tall there, but scrollable, which is the point. overscroll-behavior stops a flick at the end of the list from chaining into the page underneath and closing the drawer out from under a thumb. */ max-height:calc(100vh - 88px); max-height:calc(100dvh - 88px); overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } .nav.is-open{ visibility:visible;opacity:1;pointer-events:auto;transform:none; transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility 0s; } .nav a{padding:14px 8px;border-bottom:1px solid var(--line)} .nav-cta{margin:12px 0 0} .burger{display:block} } /* ---------- buttons ---------- */ /* Soft rectangles, not stadium pills. A 6px corner matches the rest of the token radius and reads closer to a research brand than a consumer SaaS template. The 2px border is not decoration: primary and ghost are told apart by weight, and a 2px edge survives a glance where a hairline does not. */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--display);padding:12px 24px;border-radius:6px; border:2px solid transparent;font-size:.92rem;font-weight:600;text-decoration:none;cursor:pointer; transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform 220ms var(--ease); white-space:nowrap; } .btn:active{transform:translateY(1px)} .btn[disabled]:active{transform:none} .btn-primary{background:var(--accent);color:var(--accent-on);border-color:var(--accent)} .btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)} .btn-ghost:hover{background:var(--paper-3)} .btn-dark{background:var(--ink);color:var(--paper);border-color:var(--ink)} .btn-dark:hover{opacity:.88} .btn-sm{padding:8px 14px;font-size:.83rem} .btn-block{width:100%} .btn[disabled]{opacity:.42;cursor:not-allowed} /* ---------- gate ---------- */ .gate{ position:fixed;inset:0;z-index:200;background:var(--paper); display:flex;justify-content:center;padding:28px 24px;overflow-y:auto; } .gate-card{max-width:580px;width:100%;text-align:left;margin:auto} .gate-card .brand-mark{width:46px;height:46px;font-size:1.05rem;border-radius:10px;margin-bottom:22px} .gate h1{font-size:clamp(1.6rem,3.8vw,2.15rem);margin-bottom:16px} .gate-terms{border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 22px;background:var(--paper-2);margin:24px 0} .gate-terms li{margin-bottom:12px} .gate-terms li:last-child{margin-bottom:0} .gate-actions{display:flex;gap:12px;flex-wrap:wrap} /* ---------- sections ---------- */ .section{padding:86px 0} .section + .section{border-top:1px solid var(--line)} .section-band{background:var(--paper-3);border-radius:var(--radius-lg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .section-band + .section{border-top:0} .section-tight{padding:56px 0} .hero{padding:88px 0 78px} @media (max-width:700px){.section{padding:56px 0}.hero{padding:52px 0 48px}} .section-head{max-width:64ch;margin-bottom:46px} @media (max-width:960px){.hero-grid{grid-template-columns:1fr;gap:40px}} .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px} /* ---------- feature blocks (4-up) ---------- */ @media (max-width:900px){.features{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.features{grid-template-columns:1fr}} /* ---------- cards / grids ---------- */ .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px} @media (max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}} @media (max-width:620px){.grid-3,.grid-2{grid-template-columns:1fr}} .card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 24px} .card h3{margin-bottom:10px} .card p:last-child{margin-bottom:0} .card-key{ font-family:var(--display);font-size:.68rem;font-weight:500;letter-spacing:.14em; text-transform:uppercase;color:var(--accent-text);display:block;margin-bottom:14px; } .steps{counter-reset:step;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden} .step{background:var(--paper-2);padding:26px 24px;display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start} .step-n{ font-family:var(--display);font-size:.8rem;font-weight:600;color:var(--accent-on);background:var(--accent); border-radius:50%;width:30px;height:30px;display:grid;place-items:center; } .step h3{margin-bottom:5px} .step p{margin:0;color:var(--ink-2);font-size:.94rem} @media (max-width:620px){.step{grid-template-columns:1fr;gap:12px}} /* ---------- price / tier showcase ---------- */ .tier-showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media (max-width:820px){.tier-showcase{grid-template-columns:1fr}} .tier-card{ background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-lg); padding:26px 24px;display:flex;flex-direction:column;gap:10px; } .tier-card.is-only{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .tier-card.is-off{opacity:.62} .tier-price{font-family:var(--display);font-size:2rem;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .tier-strike{text-decoration:line-through;color:var(--ink-3)} /* ---------- catalog ---------- */ .catalog-bar{ display:grid;grid-template-columns:1fr auto auto auto;gap:12px;align-items:center; padding:18px 0;position:sticky;top:70px;z-index:40;background:var(--paper); border-bottom:1px solid var(--line); } @media (max-width:820px){.catalog-bar{grid-template-columns:1fr 1fr;position:static}} .field{ display:flex;align-items:center;gap:8px;background:var(--paper-2); border:1px solid var(--line-2);border-radius:var(--radius);padding:0 13px;height:44px; } .field:focus-within{border-color:var(--focus);box-shadow:0 0 0 3px var(--focus)} .field input,.field select{border:0;background:transparent;outline:none;width:100%;height:100%;font-size:.92rem} .field select{cursor:pointer;-webkit-appearance:none;appearance:none;padding-right:14px} .field svg{flex:0 0 auto;opacity:.5} .catalog-results{min-height:min(46vh,32rem)} .catalog-results .empty{margin-top:0} .prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px} @media (max-width:1240px){.prod-grid{grid-template-columns:repeat(3,1fr)}} @media (max-width:1000px){.prod-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.prod-grid{grid-template-columns:1fr}} .prod{ background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:14px; display:flex;flex-direction:column;gap:9px;cursor:pointer; content-visibility:auto;contain-intrinsic-size:auto 22rem; } .prod-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);background:var(--paper-3);margin-bottom:2px} .prod-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start} .prod-name{font-family:var(--display);font-size:1.05rem;font-weight:600;letter-spacing:-.02em;margin:0;line-height:1.3} .prod-name-sub{font-size:.82em;font-weight:500;color:var(--ink-2);letter-spacing:0} .prod-sku{font-family:var(--display);font-size:.8rem;color:var(--ink-2);letter-spacing:.05em;margin-top:2px} .tag{ font-family:var(--display);font-size:.64rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase; padding:4px 9px;border-radius:20px;background:var(--paper-3);color:var(--ink-2);white-space:nowrap; } .tag-ok{background:var(--green-soft);color:var(--green-text)} .tag-gated{background:var(--accent-soft);color:var(--accent-text)} .tag-warn{background:var(--accent-soft);color:var(--accent-text)} .tag-info{background:var(--blue-soft);color:var(--blue-text)} .tag-accent{background:var(--accent-soft);color:var(--accent-text)} .spec{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:.79rem;margin:0;font-family:var(--display);line-height:1.35} .spec dt{color:var(--ink-2);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;padding-top:2px;font-weight:500} .spec dd{margin:0;color:var(--ink)} .tiers{width:100%;border-collapse:collapse;font-size:.9rem;font-family:var(--display);font-variant-numeric:tabular-nums} .tiers th{ text-align:left;font-size:.72rem;letter-spacing:.11em;text-transform:uppercase; color:var(--ink-3);font-weight:500;padding:0 0 7px;border-bottom:1px solid var(--line); } .tiers td{padding:5px 0;border-bottom:1px solid var(--line)} .tiers td:last-child,.tiers th:last-child{text-align:right} .tiers tr:last-child td{border-bottom:0} .price-locked{ display:flex;align-items:center;gap:7px;font-family:var(--display);font-size:.78rem;color:var(--ink-2); background:var(--paper-3);border-radius:var(--radius);padding:8px 10px; } .prod-foot{margin-top:auto;display:flex;gap:7px;align-items:center;padding-top:2px} .ruo{ font-family:var(--display);font-size:.68rem;line-height:1.5;color:var(--ink-2); margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);max-width:none; } .ruo strong{font-weight:600} .ruo a{color:var(--accent-text)} .empty{text-align:center;padding:70px 20px;border:1px dashed var(--line-2);border-radius:var(--radius-lg);color:var(--ink-3);margin-top:30px} .notice{ display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line); border-left:3px solid var(--accent);background:var(--accent-soft); padding:15px 17px;border-radius:var(--radius);font-size:.92rem;color:var(--ink-2);margin:24px 0; } .notice strong{color:var(--ink)} .notice-info{border-left-color:var(--blue);background:var(--blue-soft)} .notice-ok{border-left-color:var(--green);background:var(--green-soft)} .qty-in{width:96px;border:1px solid var(--line-2);border-radius:var(--radius);padding:8px 9px;background:var(--paper-2);font-size:.86rem;font-variant-numeric:tabular-nums} /* ---------- forms ---------- */ .form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} @media (max-width:700px){.form-grid{grid-template-columns:1fr}} .form-row{display:flex;flex-direction:column;gap:7px} .form-row.full{grid-column:1/-1} label{font-family:var(--display);font-size:.84rem;font-weight:500;color:var(--ink-2)} label .req{color:var(--accent-text)} input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],select,textarea{ width:100%;background:var(--paper-2);border:2px solid var(--line-2);border-radius:var(--radius); padding:12px 13px;font-size:.93rem;outline:none;transition:border-color .12s,box-shadow .12s; } textarea{min-height:110px;resize:vertical;font-family:var(--body)} input:focus,select:focus,textarea:focus{border-color:var(--focus);box-shadow:0 0 0 3px var(--focus)} .check{display:flex;gap:11px;align-items:flex-start;font-family:var(--display);font-size:.88rem;color:var(--ink-2);line-height:1.5} .check input{margin-top:3px;flex:0 0 auto;width:17px;height:17px;accent-color:var(--accent)} .form-hint{font-family:var(--display);font-size:.86rem;color:var(--ink-2)} fieldset{border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;margin:0 0 24px;background:var(--paper-2)} legend{font-family:var(--display);font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);padding:0 8px} /* ---------- tables ---------- */ .table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--paper-2)} table.data{width:100%;border-collapse:collapse;font-size:.92rem;min-width:600px} table.data th{ text-align:left;font-family:var(--display);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-3);font-weight:500;padding:15px 18px;border-bottom:1px solid var(--line);background:var(--paper-3); } table.data td{padding:15px 18px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)} table.data td strong{color:var(--ink);font-family:var(--display);font-weight:600;font-size:.92rem} table.data tr:last-child td{border-bottom:0} /* ---------- prose ---------- */ .prose h2{margin-top:2.2em} .prose h2:first-child{margin-top:0} .prose h3{margin-top:1.8em} .prose ul,.prose ol{padding-left:1.2em;margin:0 0 1.1em;color:var(--ink-2)} .prose li{margin-bottom:.5em} .prose p{color:var(--ink-2)} .prose strong{color:var(--ink);font-weight:600} /* ---------- footer ---------- */ .site-foot{border-top:1px solid var(--line);background:var(--paper-2);padding:58px 0 32px} .foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:36px} @media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px}} .foot-col h4{font-family:var(--display);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin-bottom:14px} .foot-col a{display:block;text-decoration:none;color:var(--ink-2);font-family:var(--display);font-size:.89rem;padding:5px 0} .foot-col a:hover{color:var(--accent-text)} .foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:18px;font-family:var(--display);font-size:.79rem;color:var(--ink-3)} .foot-meta{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap} .foot-admin{ color:var(--ink-3);text-decoration:none;letter-spacing:.04em; opacity:.55;transition:opacity .15s,color .15s; } .foot-admin:hover{opacity:1;color:var(--charcoal);text-decoration:underline;text-underline-offset:3px} .skip{position:absolute;left:-9999px} .skip:focus{left:16px;top:12px;z-index:300;background:var(--ink);color:var(--paper);padding:9px 14px;border-radius:var(--radius)} :focus-visible{outline:3px solid var(--focus);outline-offset:2px} /* Reduced motion must not nuke discrete overlay/visibility, or drawers and dialogs pop with no closed state at all. Instant settling, not display:none. */ @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .mega,.nav,.sheet-dialog,.sheet-dialog::backdrop,.btn,.nav a,.mega-trigger .caret, .mega-cta,.head-search,.head-cart,.card,.prod,.feat-row a{ transition:none!important;animation:none!important;transform:none!important; clip-path:none!important; } } /* ========================================================================== Admin console — dense operations layer Appended section, plus the token block above: --accent-hover and --scrim were added there (and two raw hex values / one raw rgba() above this comment were pointed at them) to get the whole file to zero raw colors — same computed values, so storefront output is unaffected. No other storefront rule above this comment was touched. Same token system as the storefront. --display (Poppins) is used for every rule below — no serif anywhere in the admin. ========================================================================== */ /* ---------- console shell ---------- */ /* ---------- admin console: the same palette, pitched down ---------------- The storefront ground is a vivid cornflower because it has ten seconds to convince someone. The console is where the day is spent — reading tables, comparing numbers, scanning for the row that needs attention — and a saturated ground fights that: it wins every contrast comparison against the data sitting on it, so nothing on the page can look more urgent than the background does. So the console takes the same family one step darker. Indigo night is the ground, indigo the panels, and cornflower is demoted from ground to ACCENT — it now marks the current nav item, which is the one place the brand colour earns its loudness. Yellow stays what it has always been: the thing that means act here, spent only on counts and focus rings. Same palette, different register. Nothing here is a new colour. */ /* The admin console keeps the storefront's palette and changes only the DENSITY. Surfaces are opaque rather than translucent because a two-hundred- row order table is the one place translucency costs more than it returns. Ink and accent tokens are inherited, not restated. */ body.is-admin{ --paper:var(--cream); --paper-2:var(--cream); --paper-3:var(--cream-2); /* side rail, one step off the ground */ /* Hairlines, NOT --cream-2. That value is 1.08:1 against the ground, so pointing --line at it erased every border in the console at once -- table rows, the side rail, the KPI tiles, the editor panels. */ --line:var(--hair); --line-2:var(--hair-strong); --shadow:0 1px 0 rgba(0,0,0,.35); } /* Current page. Sage rather than rust: rust is reserved for "something needs you", and where you already are is not that. The count pills below stay rust and stay louder, because they are the thing that needs you. */ body.is-admin .adm-navi a.on{ background:rgba(79,107,82,.12);color:var(--ink);font-weight:600; box-shadow:inset 3px 0 0 var(--charcoal-50); } body.is-admin .adm-navi a:hover{background:var(--cream-2)} /* Counts ARE "something needs you" — this is the loud element on the page. */ /* Rust fill, charcoal type: 5.9:1. This used to be --focus on --accent-on, which was fine when those were yellow-on-indigo and became charcoal on charcoal -- a 1:1 black blob -- the moment the palette went light. These are the pending-account and awaiting-payment counters, so an invisible one is a missed order. */ body.is-admin .adm-navi .pill{background:var(--rust);color:var(--charcoal)} /* Same rule for the tiles. .kpi.act marks the two that are a queue of work — pending accounts, orders awaiting payment — so their edge is the yellow that means act here, not the neutral white the other tiles carry. Without this the console says "yellow = attention" in the nav and something else entirely eight pixels away. */ body.is-admin .kpi.act::before{background:var(--focus)} /* .adm-top is a direct grid child (sibling of .adm-side and .adm-main) via named grid areas, rather than nested inside .adm-main, so the responsive rule below can place the mobile nav strip between the page title row and the page content without having to reach inside another grid item. */ .adm{ display:grid;grid-template-columns:186px 1fr; grid-template-areas:"side top" "side main"; min-height:70vh;font-family:var(--display); } @media (max-width:860px){ /* Below 860px there is no room for a persistent side rail. Hiding it outright (the old rule) left every admin page but the dashboard with no way to reach Accounts, Catalog, Settings, Messages, etc. Instead the rail becomes a horizontal, keyboard-reachable strip under the page title rather than disappearing. */ .adm{grid-template-columns:1fr;grid-template-areas:"top" "side" "main"} .adm-side{ flex-direction:row;align-items:center;overflow-x:auto;-webkit-overflow-scrolling:touch; border-right:0;border-bottom:1px solid var(--line); } .adm-brand,.adm-user{display:none} .adm-navi{flex-direction:row;gap:4px;padding:8px 12px} .adm-navi a{white-space:nowrap} } /* ---------- console chrome (header / footer) ---------- */ /* Deliberately not .nav: that class hides itself behind a .burger below 940px with no admin burger to reopen it, which would make "View storefront" and "Log out" unreachable on a phone. This is its own, always-visible, always-reachable strip. */ .adm-head .head-row{flex-wrap:wrap} .adm-head-nav{display:flex;align-items:center;gap:6px;margin-left:auto;font-family:var(--display)} .adm-head-nav a{ text-decoration:none;font-size:.86rem;color:var(--ink-2);padding:9px 13px;border-radius:var(--radius); transition:background .12s,color .12s; } .adm-head-nav a:hover{background:var(--paper-3);color:var(--ink)} .adm-head-nav form{margin:0} @media (max-width:480px){.adm-head .head-row{height:auto;padding:10px 0;row-gap:6px}} footer.adm-foot{padding:20px 0} .adm-foot-row{ display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; font-family:var(--display);font-size:.79rem;color:var(--ink-3); } .adm-side{grid-area:side;background:var(--paper-3);border-right:1px solid var(--line);display:flex;flex-direction:column} .adm-brand{padding:18px 16px;border-bottom:1px solid var(--line)} .adm-navi{display:flex;flex-direction:column;gap:2px;padding:12px 10px} .adm-navi a{ display:flex;align-items:center;justify-content:space-between;gap:8px; font-family:var(--display);font-size:.75rem;color:var(--ink-2);text-decoration:none; padding:9px 12px;border-radius:99px;transition:background .12s,color .12s; } .adm-navi a:hover{background:var(--paper-2)} .adm-navi a.on{background:var(--paper-2);color:var(--ink);font-weight:500;box-shadow:var(--shadow)} .adm-navi .pill{ font-family:var(--display);font-size:.66rem;font-weight:600;line-height:1; background:var(--accent);color:var(--accent-on);border-radius:99px;padding:2px 7px; font-variant-numeric:tabular-nums; } .adm-user{margin-top:auto;border-top:1px solid var(--line);padding:14px 16px;font-family:var(--display);font-size:.72rem;color:var(--ink-3)} .adm-main{grid-area:main;padding:0 32px 28px;min-width:0} .adm-top{grid-area:top;padding:28px 32px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px;min-width:0} .adm-h1{font-family:var(--display);font-size:1.25rem;font-weight:600;letter-spacing:-.02em;margin:0} .adm-sec{font-family:var(--display);font-size:.8125rem;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px} /* ---------- KPI tiles ---------- */ .kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} @media (max-width:860px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}} /* KPI tiles double as an , since several are actionable links straight into a filtered list — these rules are harmless no-ops on the plain
tiles that aren't (Payments, Emails). */ .kpi{position:relative;display:block;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px 14px 18px;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .12s} a.kpi:hover{border-color:var(--line-2)} .kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line-2)} .kpi.act::before{background:var(--accent)} .kpi.good::before{background:var(--green)} .kpi.inf::before{background:var(--blue)} .adm-health{ display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px; margin-bottom:22px; } @media (max-width:1100px){.adm-health{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:640px){.adm-health{grid-template-columns:repeat(2,minmax(0,1fr))}} .adm-health-item{ border:1px solid var(--line);border-radius:var(--radius); background:var(--paper-2);padding:12px 14px; } .adm-health-item.is-ok{border-color:rgba(46,125,50,.28)} .adm-health-item.is-warn{border-color:rgba(183,110,42,.35);background:rgba(183,110,42,.06)} .adm-health-k{ display:block;font-family:var(--display);font-size:.68rem;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px; } .adm-health-v{font-family:var(--display);font-size:.9rem;font-weight:500;color:var(--ink)} .adm-split{display:grid;grid-template-columns:1.4fr 1fr;gap:28px} @media (max-width:900px){.adm-split{grid-template-columns:1fr}} .adm-bars{list-style:none;margin:0;padding:0} .adm-bars li{display:grid;grid-template-columns:42px 1fr 40px;gap:10px;align-items:center;margin-bottom:6px} .adm-bars-d,.adm-bars-n{font-family:var(--data);font-size:.75rem;color:var(--ink-3)} .adm-bars-n{text-align:right} .adm-bars-track{height:8px;background:var(--paper-3);border-radius:99px;overflow:hidden} .adm-bars-fill{display:block;height:100%;background:var(--accent);border-radius:99px} .adm-status-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .adm-status-list li a{ display:flex;justify-content:space-between;gap:12px;padding:12px 0; border-bottom:1px solid var(--line);text-decoration:none;color:inherit; font-family:var(--display);font-size:.9rem; } .adm-status-list li a:hover{color:var(--accent)} .adm-passkey-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .adm-passkey-list li{ display:flex;justify-content:space-between;align-items:center;gap:12px; padding:12px 0;border-bottom:1px solid var(--line); } .adm-passkey-list .small{display:block;margin-top:2px} .kpi-n{font-family:var(--display);font-size:1.44rem;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums} .kpi-l{font-family:var(--display);font-size:.72rem;color:var(--ink-3);margin-top:2px} .kpi-d{font-family:var(--display);font-size:.7rem;color:var(--ink-3);margin-top:6px;font-variant-numeric:tabular-nums} /* ---------- data tables ---------- */ .dtable{width:100%;min-width:600px;border-collapse:collapse;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);font-family:var(--display);font-size:.75rem} .dtable th{ text-align:left;text-transform:uppercase;font-size:.66rem;letter-spacing:.08em;font-weight:500; color:var(--ink-3);background:var(--paper-3);padding:9px 12px;border-bottom:1px solid var(--line); white-space:nowrap; } .dtable td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top} .dtable tbody tr:last-child td{border-bottom:0} .dtable tbody tr:hover{background:var(--paper-3)} .dtable .r{text-align:right;font-variant-numeric:tabular-nums} .dtable .mono{font-weight:500;font-variant-numeric:tabular-nums slashed-zero} .dtable .sub{display:block;font-size:.68rem;color:var(--ink-3);margin-top:2px} /* ---------- editor form ---------- */ .ed{display:grid;grid-template-columns:1fr 268px;gap:20px} @media (max-width:860px){.ed{grid-template-columns:1fr}} .ed-panel{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:18px} .ed-panel + .ed-panel{margin-top:20px} .ed-legend{display:block;font-family:var(--display);font-size:.688rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px} .ed-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} @media (max-width:640px){.ed-grid{grid-template-columns:1fr}} .ed-f{display:flex;flex-direction:column;gap:4px} .ed-f.full{grid-column:1/-1} .ed-f label{font-family:var(--display);font-size:.688rem;color:var(--ink-3);font-weight:500} /* Scoped to .adm rather than raised to !important: the storefront's input[type=text] etc. rule is (0,1,1) and beats a bare .ed-in (0,1,0) outright regardless of source order, so text/email/tel/url/number inputs were silently rendering at storefront size while the bare-element select and textarea rules (0,0,1) lost to .ed-in and rendered dense — a visible height mismatch in the same panel. .adm .ed-in is (0,2,0), which beats every one of those unconditionally. */ .adm .ed-in{ width:100%;font-family:var(--display);font-size:.719rem;color:var(--ink);background:var(--paper); border:1px solid var(--line-2);border-radius:var(--radius);padding:8px 10px; outline:none;transition:border-color .12s,box-shadow .12s; } .adm .ed-in:focus{border-color:var(--focus);box-shadow:0 0 0 3px var(--focus);outline:none} .tier-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 26px;gap:8px;align-items:center} .trash{ width:26px;height:26px;display:grid;place-items:center;background:transparent; border:1px solid var(--line-2);border-radius:var(--radius);color:var(--ink-3);cursor:pointer; transition:border-color .12s,color .12s; } .trash:hover{border-color:var(--accent);color:var(--accent)} /* Scoped to label.toggle (0,1,1), not bare .toggle (0,1,0), so it can never land on a plain