:root{ --bg:#070707;--bg2:#0d0d0d;--bg3:#131313; --accent:#F3037E;--accent-dim:rgba(243,3,126,0.14);--accent-ink:#fff; --white:#fff;--grey:#5a5a5e;--grey2:#1c1c1f; --border:rgba(245,245,247,0.06); --chrome-1:#0c0c0d;--chrome-2:#131316;--chrome-3:#1c1c1f; --ink:#f5f5f7;--ink-dim:rgba(245,245,247,0.62);--ink-faint:rgba(245,245,247,0.38); --border-chrome:rgba(255,255,255,0.10);--border-chrome-strong:rgba(255,255,255,0.18); --font:"Helvetica Neue",Helvetica,Arial,sans-serif; --ease:cubic-bezier(0.4,0,0.2,1); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;overflow-x:hidden} /* v2.1 Dossier re-identity: the page ground behind these 46 brand/model pages is now flat --arc-bg (dark), matching the nav and matching dossier.css's own assumption -- see that file's header comment ("Nav and index stay on the site's dark --arc-bg/--arc-ink pair; the file panel is the one surface that switches to parchment -- that contrast IS the design"). The dark ground is load-bearing, not cosmetic: .dos-index on brand pages is a near-transparent white-on-dark overlay with --arc-ink (light) text -- it is genuinely illegible on the old light chrome gradient this rule used to paint here. Everything that used to sit directly on that light body (pkg-card, notify-card, the cart drawer, the footer) keeps working unchanged because each already carries its own light background (chrome-2/chrome-3/parchment) and never relied on the body's ground colour -- only .breadcrumb sat directly on body with no background of its own, so it gets its own light-on-dark colours below. */ body{background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased} /* NAV — now the Arcade .arc-nav component (see /arcade/nav.css, wired via tags in and nav_html() below). It's position:sticky and sits in normal document flow, so unlike the old position:fixed nav it needs no top-padding compensation on the content that follows it -- see the BREADCRUMB rule just below, which used to carry that compensation. */ /* BREADCRUMB -- sits directly on the dark body ground (see above), so it reads off the light arc- ink tokens rather than the old dark-on-light rgba(245,245,247,x) values, which vanished once the body went dark. */ .breadcrumb{padding:20px 20px 0;max-width:960px;margin:0 auto;font-size:11px;color:var(--arc-ink-faint);display:flex;gap:6px;align-items:center;flex-wrap:wrap} .breadcrumb a{color:var(--arc-ink-faint);text-decoration:none;transition:color .2s} .breadcrumb a:hover{color:var(--arc-ink)} .breadcrumb span{color:var(--arc-ink-dim)} /* GEN PILLS */ .gen-row-wrap{padding:0 20px 36px;max-width:960px;margin:0 auto} .gen-row-label{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:rgba(245,245,247,.28);font-weight:700;margin-bottom:10px} .gen-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none} .gen-row::-webkit-scrollbar{display:none} .gen-pill{background:rgba(245,245,247,.06);border:1px solid rgba(245,245,247,.1);border-radius:100px;padding:7px 16px;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(245,245,247,.5);cursor:pointer;white-space:nowrap;transition:all .2s;user-select:none;flex-shrink:0} .gen-pill:hover{border-color:rgba(243,3,126,.5);color:rgba(243,3,126,.8)} .gen-pill.active{background:rgba(243,3,126,.15);border-color:var(--accent);color:var(--accent)} /* Both rows above now render inside .dos-file's cream Case File card (see the breadcrumb comment above for the same underlying issue in reverse): the rgba(245,245,247,x) values are calibrated for the dark page body and are close to unreadable on that light parchment ground, so scope them back to the dark-ink tokens the card itself already uses. */ .dos-file .gen-row-label{color:var(--arc-parchment-ink-dim)} .dos-file .gen-pill{background:rgba(43,34,19,.05);border-color:rgba(43,34,19,.15);color:var(--arc-parchment-ink-dim)} /* SECTION */ .section{padding:0 16px 56px;max-width:960px;margin:0 auto;position:relative;z-index:1} .slbl{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:10px} .slbl::before{content:'';width:20px;height:1px;background:rgba(243,3,126,.4)} .stitle{font-size:clamp(22px,5.5vw,38px);font-weight:900;line-height:1.08;letter-spacing:-1.5px;margin-bottom:10px} .ssub{color:var(--grey);font-size:14px;line-height:1.65;margin-bottom:28px} /* TAB SWITCHER */ .tab-bar{display:flex;gap:2px;margin-bottom:24px;background:rgba(245,245,247,.04);border:1px solid rgba(245,245,247,.08);border-radius:10px;padding:3px} .tab-btn{flex:1;padding:11px 8px;font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;border:none;background:transparent;color:rgba(245,245,247,.35);cursor:pointer;border-radius:8px;transition:all .2s;font-family:inherit;white-space:nowrap} .tab-btn.active{background:rgba(243,3,126,.15);color:var(--accent);border:1px solid rgba(243,3,126,.25)} /* Same dark-page-body colors on .dos-file's light Case File ground as the gen pills above -- .tab-bar's near-invisible container and .tab-btn's washed-out inactive label need the parchment-ink tokens instead. */ .dos-file .tab-bar{background:rgba(43,34,19,.05);border-color:rgba(43,34,19,.12)} .dos-file .tab-btn{color:var(--arc-parchment-ink-dim)} .tab-panel{display:none} .tab-panel.active{display:block} /* PACKAGE CARD */ .pkg-card{border:1px solid rgba(245,245,247,.08);border-radius:16px;padding:22px;margin-bottom:12px;background:var(--chrome-2);position:relative;transition:border-color .25s,transform .2s} .pkg-card:hover{border-color:rgba(245,245,247,.14);transform:translateY(-2px)} .pkg-card.best{border-color:rgba(243,3,126,.25);background:var(--chrome-2)} .pkg-badge{position:absolute;top:-1px;right:20px;background:var(--accent);color:#fff;font-size:9px;font-weight:800;letter-spacing:2px;padding:4px 14px;border-radius:0 0 10px 10px} .pkg-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap} .pkg-name{font-size:18px;font-weight:900;letter-spacing:-.4px;margin-bottom:4px} .pkg-price-wrap{text-align:right;flex-shrink:0} .pkg-price{font-size:30px;font-weight:900;letter-spacing:-1.2px;color:var(--accent)} .pkg-was{font-size:11px;color:rgba(245,245,247,.22);text-decoration:line-through;margin-top:2px} /* CHIPS */ .chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px} .chip{display:inline-flex;align-items:center;gap:6px;background:rgba(245,245,247,.06);border:1px solid rgba(245,245,247,.1);border-radius:100px;padding:5px 11px 5px 12px;font-size:11px;font-weight:600;color:rgba(245,245,247,.7);cursor:default;transition:all .2s;user-select:none} .chip .chip-x{background:none;border:none;padding:0;font-family:inherit;color:rgba(245,245,247,.3);cursor:pointer;font-size:14px;line-height:1;transition:color .15s;margin-left:2px;font-weight:400} .chip .chip-x:hover{color:var(--ink)} .chip .chip-x:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:2px} .chip.removed{opacity:.28;text-decoration:line-through;pointer-events:none} .chip-price{color:rgba(243,3,126,.7);font-size:10px;font-weight:700} /* EXTRAS */ .extras-toggle{background:none;border:1px solid rgba(245,245,247,.1);color:rgba(245,245,247,.45);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:9px 18px;border-radius:8px;cursor:pointer;font-family:inherit;transition:all .2s;margin-bottom:14px} .extras-toggle:hover{border-color:rgba(243,3,126,.4);color:var(--accent)} .extras-grid{display:none;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-bottom:18px} .extras-grid.open{display:grid} .extra-item{font:inherit;text-align:left;width:100%;margin:0;background:rgba(245,245,247,.03);border:1px solid rgba(245,245,247,.08);border-radius:10px;padding:12px 14px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:space-between;gap:8px} .extra-item:hover{border-color:rgba(243,3,126,.3);background:rgba(243,3,126,.05)} .extra-item.added{border-color:rgba(243,3,126,.4);background:rgba(243,3,126,.08)} .extra-item:focus-visible{outline:2px solid var(--accent);outline-offset:1px} .extra-name{font-size:12px;font-weight:600} .extra-price{font-size:12px;font-weight:800;color:var(--accent)} .extra-plus{font-size:18px;color:rgba(245,245,247,.25);transition:color .2s;flex-shrink:0} .extra-item:hover .extra-plus{color:var(--accent)} .extra-item.added .extra-plus{color:var(--accent)} /* PKG FOOTER */ .pkg-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:12px;border-top:1px solid rgba(245,245,247,.06)} .pkg-total-wrap{display:flex;flex-direction:column} .pkg-total-lbl{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:rgba(245,245,247,.25)} .pkg-total{font-size:24px;font-weight:900;letter-spacing:-.8px;color:var(--accent)} .pkg-add-btn{background:var(--accent);color:#fff;border:none;padding:14px 28px;font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;cursor:pointer;border-radius:8px;font-family:inherit;transition:transform .15s,box-shadow .2s;white-space:nowrap} /* Stripping every included item out of a package drives its total to zero or below (Exterior Street bottoms out at -$24), which is not an order anyone can place. The button says so instead of handing the cart a price the server would refuse at checkout anyway (see api/catalogue.js). */ .pkg-add-btn[disabled]{background:var(--chrome-3,#1c1c1f);color:rgba(245,245,247,.5);cursor:not-allowed} .pkg-add-btn[disabled]:hover{transform:none;box-shadow:none} .notify-card{background:var(--chrome-2);border:1px solid var(--border-chrome);border-radius:16px;padding:28px 24px;text-align:center;max-width:520px;margin:0 auto} .notify-hd{font-size:17px;font-weight:900;letter-spacing:-.3px;color:var(--ink);margin-bottom:6px} .notify-sub{font-size:13px;color:var(--ink-dim);line-height:1.6;margin-bottom:18px} .notify-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center} .notify-row input{flex:1;min-width:200px;background:var(--chrome-1);border:1px solid var(--border-chrome-strong);color:var(--ink);padding:12px 14px;border-radius:8px;font-size:13px;font-family:inherit;outline:none} .notify-row input:focus{border-color:var(--accent)} .notify-btn{background:var(--accent);color:#fff;border:none;padding:12px 22px;font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;border-radius:8px;font-family:inherit;white-space:nowrap;transition:transform .15s} .notify-btn:disabled{opacity:.6;cursor:default;transform:none} .notify-done{font-size:13px;font-weight:700;color:var(--accent)} /* FULL BUILD CARD */ .full-card{border:1px solid rgba(243,3,126,.3);border-radius:16px;padding:26px;background:linear-gradient(135deg,var(--chrome-2) 0%,var(--chrome-1) 100%);position:relative;overflow:hidden} .full-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent)} .full-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(243,3,126,.15);border:1px solid rgba(243,3,126,.3);border-radius:100px;padding:5px 14px;font-size:9px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:16px} .full-title{font-size:clamp(22px,5vw,34px);font-weight:900;letter-spacing:-1px;margin-bottom:6px} .full-desc{color:var(--grey);font-size:13px;margin-bottom:20px} .full-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .full-price-block{} .full-price{font-size:42px;font-weight:900;letter-spacing:-2px;color:var(--accent)} .full-save{font-size:12px;color:rgba(245,245,247,.3);margin-top:2px} .full-save span{color:rgba(243,3,126,.7);font-weight:700} .full-btn{background:var(--accent);color:#fff;border:none;padding:16px 36px;font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;cursor:pointer;border-radius:8px;font-family:inherit;transition:transform .15s,box-shadow .2s;white-space:nowrap} /* CART DRAWER */ .co{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:200;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(6px)} .co.open{opacity:1;pointer-events:all} .cd{position:fixed;right:0;top:0;bottom:0;width:100%;max-width:360px;background:var(--chrome-2);border-left:1px solid var(--border);z-index:201;transform:translateX(100%);transition:transform .38s var(--ease);display:flex;flex-direction:column} .cd.open{transform:translateX(0)} .cd-hd{padding:22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between} .cd-title{font-size:14px;font-weight:800;letter-spacing:2px;text-transform:uppercase} .cd-x{background:none;border:none;color:var(--grey);font-size:22px;cursor:pointer} .cd-body{flex:1;overflow-y:auto;padding:20px} .cd-empty{text-align:center;padding:60px 0;color:var(--grey)} .cd-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--border)} .cd-info{flex:1;min-width:0} .cd-name{font-size:13px;font-weight:700;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cd-price{font-size:15px;font-weight:900;color:var(--accent)} .cd-ft{padding:20px;border-top:1px solid var(--border)} .cd-tr{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px} .cd-tl{font-size:12px;color:var(--grey);letter-spacing:1px;text-transform:uppercase} .cd-tv{font-size:24px;font-weight:900;color:var(--accent)} .ck-btn{width:100%;background:var(--accent);color:#fff;border:none;padding:17px;font-size:13px;font-weight:800;letter-spacing:2px;text-transform:uppercase;cursor:pointer;border-radius:8px;transition:transform .15s;margin-bottom:10px;font-family:inherit} .cd-trust{text-align:center;font-size:10px;color:var(--grey)} /* TOAST */ .toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--accent);color:#fff;padding:12px 22px;border-radius:100px;font-size:12px;font-weight:800;z-index:999;transition:transform .45s cubic-bezier(.34,1.56,.64,1);white-space:nowrap;pointer-events:none} .toast.show{transform:translateX(-50%) translateY(0)} /* FOOTER */ footer{background:var(--chrome-3);border-top:1px solid rgba(245,245,247,.06);padding:14px 24px;position:relative;z-index:1} .ft-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .ft-logo{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;font-weight:900;letter-spacing:-.025em;text-transform:uppercase;color:rgba(245,245,247,.35)} .ft-links-row{display:flex;gap:20px;flex-wrap:wrap;align-items:center} .ft-links-row a{color:rgba(245,245,247,.25);text-decoration:none;font-size:11px;font-weight:500;letter-spacing:.3px;transition:color .2s} .ft-links-row a:hover{color:rgba(245,245,247,.7)} .ft-links-row a.ft-contact{color:inherit;opacity:.8;font-size:12px;font-weight:700;letter-spacing:.2px} .ft-links-row a.ft-contact:hover{opacity:1} .ft-copy{font-size:11px;color:rgba(245,245,247,.15)} /* REVEAL */ .rv{opacity:0;transform:translateY(24px);transition:opacity .65s cubic-bezier(.4,0,.2,1),transform .65s cubic-bezier(.4,0,.2,1)} .rv.in{opacity:1;transform:translateY(0)}