/* ===================================================================== wired.css — Wired-style editorial skin for Cast's Garage. Shared override layer. Link LAST in so it wins the cascade. Fonts unchanged: Fraunces (headlines) + Inter (body), already loaded. Palette: stark white paper, black ink, hairline rules, green rubrics. Remove this one from a page to fully revert that page. ===================================================================== */ :root{ --wr-ink:#0a0a0a; --wr-body:#2c2a26; --wr-muted:#8a8474; --wr-line:#dcd6c8; --wr-paper:#ffffff; --wr-paper2:#f6f2e9; --wr-accent:#c0392f; --wr-accent2:#a8161b; --wr-red:#c0392f; } /* ---------- Base ---------- */ html,body{background:var(--wr-paper) !important;} body{color:var(--wr-ink);} body::before,body::after{display:none !important;} /* kill decorative textures */ /* Headlines stay Fraunces everywhere (beats the Oswald/Space Grotesk rules) */ h1,h2,h3,.hero h1,.page-hero h1,.sec-head h2,.dk-lead h1, .dk-seclabel h2,.j-card h3,.dk-story h3{ font-family:'Fraunces','Georgia',serif !important; text-transform:none !important; letter-spacing:-.01em !important; -webkit-text-fill-color:currentColor !important; background:none !important; filter:none !important; } /* ---------- Announcement strip -> thin black bar ---------- */ .dk-strip, .dk-strip.site{background:var(--wr-ink) !important;color:#f2ede1 !important;border:0 !important;} .dk-strip .wrap{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;} .dk-strip b{color:#ff8f80 !important;} /* ---------- Masthead / header (beats inline #bg-base) ---------- */ body header{ background:var(--wr-paper) !important; border-top:0 !important; border-bottom:2px solid var(--wr-ink) !important; box-shadow:none !important; } header .brand-name{font-family:'Fraunces','Georgia',serif !important;font-weight:600 !important;color:var(--wr-ink) !important;letter-spacing:-.01em;} header nav.links a,header .drop-toggle{ color:var(--wr-ink) !important;font-weight:700 !important; text-transform:uppercase !important;letter-spacing:.09em !important;font-size:.78rem !important; } header nav.links a:hover,header .dropdown:hover .drop-toggle,header .drop-toggle.active{color:var(--wr-accent2) !important;} header .theme-toggle{color:var(--wr-ink) !important;border-color:var(--wr-line) !important;} header .nav-search input{background:var(--wr-paper2) !important;color:var(--wr-ink) !important;border-color:var(--wr-line) !important;} /* ---------- Rubrics / kickers / tags -> green small caps, no pill ---------- */ .eyebrow,.dk-kicker,.ls-kicker,.j-tag,.dk-story .k,.dk-secnote .k,.k.kicker{ background:none !important;border:0 !important;border-radius:0 !important;padding:0 !important; color:var(--wr-accent2) !important;font-weight:800 !important; text-transform:uppercase !important;letter-spacing:.13em !important;font-size:.7rem !important; } .j-card[data-cat="seller"] .j-tag{color:var(--wr-red) !important;} /* ---------- Section labels -> title with long rule ---------- */ .dk-seclabel{border-bottom:2px solid var(--wr-ink) !important;padding-bottom:10px !important;} .dk-seclabel h2{font-size:1.5rem !important;} .dk-seclabel a{color:var(--wr-accent2) !important;text-transform:uppercase;letter-spacing:.09em;font-weight:800;font-size:.72rem;} /* ---------- Buttons -> squared, editorial ---------- */ .btn,.dk-btn,.btn-primary,.btn-ghost{border-radius:2px !important;box-shadow:none !important;font-family:'Inter',sans-serif !important;} .btn-primary,.dk-btn.accent{background:var(--wr-accent) !important;color:#fff !important;border:1px solid var(--wr-accent) !important;} .btn-primary:hover,.dk-btn.accent:hover{background:var(--wr-accent2) !important;border-color:var(--wr-accent2) !important;transform:translateY(-1px) !important;box-shadow:none !important;} .btn-ghost,.dk-btn.ghost{background:transparent !important;color:var(--wr-ink) !important;border:1px solid var(--wr-ink) !important;} .btn-ghost:hover,.dk-btn.ghost:hover{background:var(--wr-ink) !important;color:#fff !important;transform:translateY(-1px) !important;box-shadow:none !important;} .dk-btn.news{background:#fff !important;color:var(--wr-ink) !important;border:1px solid var(--wr-accent) !important;} .dk-btn.news .nb-tag{background:var(--wr-accent) !important;} /* ---------- Cards / panels -> white, thin border, no heavy shadow ---------- */ .card,.dk-story,.j-card,.dk-secnote,.feat-banner,.tile,.hub-card{ border-radius:3px !important; box-shadow:none !important; } .card,.j-card,.dk-secnote{background:#fff !important;border:1px solid var(--wr-line) !important;} .card:hover,.j-card:hover{box-shadow:0 8px 22px rgba(20,24,31,.10) !important;} .dk-story{border-radius:0 !important;} .dk-story:hover{background:var(--wr-paper2) !important;} .dk-story .no,.j-card .j-num{color:var(--wr-muted) !important;} /* Card / story imagery -> boxed with hairline, contained sizes */ .dk-story .thumb{border:1px solid var(--wr-line) !important;border-radius:2px !important;box-shadow:none !important;background:var(--wr-paper2) !important;} .card img,.tile img,.hub-card img{border-radius:2px !important;} /* ---------- Brand tags rail -> outlined chips ---------- */ .dk-tags a{border-radius:2px !important;border:1px solid var(--wr-ink) !important;background:#fff !important;color:var(--wr-ink) !important;font-family:'Fraunces','Georgia',serif !important;} .dk-tags a:hover{background:var(--wr-ink) !important;color:#fff !important;} /* ---------- Newsletter / subscribe bands -> dark editorial ---------- */ .dk-subbar,.j-sub{background:var(--wr-ink) !important;color:#f2ede1 !important;border-radius:0 !important;box-shadow:none !important;} .dk-subbar h2,.j-sub h2{font-family:'Fraunces','Georgia',serif !important;color:#fff !important;} .dk-subbar p,.j-sub p{color:#c9c9c6 !important;} .dk-subbar button,.j-sub button{background:var(--wr-accent) !important;border-radius:2px !important;box-shadow:none !important;} .dk-subbar input,.j-sub input{border-radius:2px !important;} /* ---------- Footer -> light with hairline ---------- */ footer{background:var(--wr-paper2) !important;color:var(--wr-body) !important;border-top:2px solid var(--wr-ink) !important;} footer a{color:var(--wr-body) !important;} footer a:hover{color:var(--wr-accent2) !important;} footer .foot-col h4{font-family:'Inter',sans-serif !important;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--wr-muted) !important;} footer .brandmark{color:var(--wr-ink) !important;} /* ---------- Section dividers everywhere ---------- */ .block + .block,.dk-sec,.dk-rail{border-top:1px solid var(--wr-line);} /* ---------- Subpage hero -> light editorial banner ---------- */ .hero.page-hero{ background:var(--wr-paper) !important; background-image:none !important; min-height:0 !important; padding:38px 0 28px !important; border-bottom:2px solid var(--wr-ink) !important; color:var(--wr-ink) !important; } .hero.page-hero::before,.hero.page-hero::after{display:none !important;} .page-hero .breadcrumb,.page-hero .breadcrumb a{color:var(--wr-muted) !important;text-shadow:none !important;} .page-hero .eyebrow,.page-hero .ls-kicker{color:var(--wr-accent2) !important;background:none !important;border:0 !important;padding:0 !important;} .page-hero h1{color:var(--wr-ink) !important;text-shadow:none !important;} .page-hero > .wrap > p,.page-hero .hero-copy p,.page-hero .ph-copy p{color:var(--wr-body) !important;text-shadow:none !important;} .page-hero .art-img,.ph-art .art-img{filter:none !important;} /* Shared masthead (topbar + mast + nav) now used on every page */ .wr-topbar,.wr-mast,.wr-nav{width:100%;} .wr-mast .wrap,.wr-nav .wrap,.wr-topbar .wrap{max-width:1240px;} /* ===================================================================== CONTENT LAYER — make in-page content read editorially like the home. ===================================================================== */ /* Section headers: Fraunces title with a heavy bottom rule (like .wr-secbar) */ main h2{font-family:'Fraunces','Georgia',serif !important;font-weight:600 !important; color:var(--wr-ink) !important;letter-spacing:-.01em !important;text-transform:none !important; border-bottom:2px solid var(--wr-ink);padding-bottom:8px;margin:34px 0 18px;} /* ...but never underline headings that sit on dark bands */ .dk-subbar h2,.j-sub h2,.wr-news h2,.feat-banner h2,.hero h2,.page-hero h2{ border-bottom:0 !important;padding-bottom:0 !important;color:inherit !important;} /* Editorial prose measure + color */ main p{color:var(--wr-body);} main .wrap > p,.block p{max-width:74ch;} /* Kickers / phase labels -> green rubric */ .sh-phase-k,.hb-kicker,.sec-kicker,.card-cap-brand,.ls-kicker{ color:var(--wr-accent2) !important;text-transform:uppercase !important; letter-spacing:.13em !important;font-weight:800 !important;font-size:.7rem !important; background:none !important;border:0 !important;padding:0 !important;} /* Generic content cards (incl. inventory car tiles) -> white, hairline, square */ .card,.ls-card,.j-card,.sh-step,.hb-card,.tile,.hub-card{ background:#fff !important;border:1px solid var(--wr-line) !important; border-radius:3px !important;box-shadow:none !important;} .card:hover,.ls-card:hover,.j-card:hover,.sh-step:hover,.hb-card:hover{ box-shadow:0 8px 22px rgba(20,24,31,.10) !important;transform:none !important;} .card h3,.ls-card h3,.hb-card h3,.card-cap-name{ font-family:'Fraunces','Georgia',serif !important;letter-spacing:-.01em !important;color:var(--wr-ink) !important;} /* Pills / badges -> squared editorial */ .tile-pill,.card .pill,.badge,.chip{border-radius:2px !important;} /* Filter chips (guides, newsletter) -> outlined, black when active */ .j-chip{border-radius:2px !important;border:1px solid var(--wr-line) !important; background:#fff !important;text-transform:uppercase;letter-spacing:.08em;font-weight:700;box-shadow:none !important;} .j-chip.active{background:var(--wr-ink) !important;color:#fff !important;border-color:var(--wr-ink) !important;} /* Seller Hub steps -> numbered editorial list */ .sh-steps{gap:0 !important;} .sh-step{padding:20px !important;margin:0 !important;border-top:1px solid var(--wr-line) !important;} .sh-n{font-family:'Fraunces',serif !important;font-weight:600 !important;color:var(--wr-muted) !important; background:none !important;border:0 !important;} .sh-b h3,.sh-b h2,.sh-step h3{font-family:'Fraunces','Georgia',serif !important;color:var(--wr-ink) !important;letter-spacing:-.01em !important;} .sh-go{color:var(--wr-accent2) !important;text-transform:uppercase;letter-spacing:.08em;font-weight:800;font-size:.74rem;} .sh-phase{border-bottom:2px solid var(--wr-ink) !important;padding-bottom:8px !important;} /* Guide reference tables -> hairline editorial tables */ main table,.hw25{border-collapse:collapse !important;width:100%;background:#fff;font-family:'Inter',sans-serif;} main table th,.hw25 th{font-family:'Inter',sans-serif !important;text-transform:uppercase;letter-spacing:.08em; font-size:.72rem;color:var(--wr-ink);border-bottom:2px solid var(--wr-ink) !important;padding:10px 12px;text-align:left;background:#fff !important;} main table td,.hw25 td{border-bottom:1px solid var(--wr-line) !important;padding:9px 12px;color:var(--wr-body);} main table tr:hover td,.hw25 tr:hover td{background:var(--wr-paper2) !important;} /* Content links -> green editorial */ main .wrap a:not(.btn):not(.dk-btn):not(.wr-sub):not(.j-card):not(.card):not(.ls-card):not(.sh-go):hover{color:var(--wr-accent2);} /* River variant with no thumbnail (hub index lists) */ .wr-river.no-thumb .row{grid-template-columns:32px 1fr;} .wr-river .row.j-filter{color:inherit;} .wr-river .row.j-filter .rubric{margin-bottom:4px;} /* Hub section header + filter chip row spacing */ .wr-cardsec .j-cats{border-bottom:0;margin:0 0 10px;padding:0;} /* ===================================================================== HOME PAGE — Wired editorial layout (index.html uses .wr-* markup). Uniquely-named classes; safe to ship site-wide (only home uses them). ===================================================================== */ .wr-home{background:var(--wr-paper);color:var(--wr-ink);font-family:'Inter',system-ui,sans-serif;} .wr-home .wrap{max-width:1240px;margin:0 auto;padding:0 28px;} .wr-home a{color:inherit;text-decoration:none;transition:color .14s ease;} .wr-home img{display:block;max-width:100%;} .wr-hero h1 a,.wr-rail .item h3,.wr-card h3,.wr-river .row h3{transition:color .14s ease;} .wr-hero .img img,.wr-card .img img,.wr-river .row .thumb img{transition:transform .35s ease;} .wr-hero a.img:hover img,.wr-card:hover .img img,.wr-river .row:hover .thumb img{transform:scale(1.04);} .rubric{display:inline-block;font-family:'Inter',sans-serif;font-weight:800;font-size:.68rem;text-transform:uppercase;letter-spacing:.13em;color:var(--wr-accent2);margin-bottom:2px;} .rubric.red{color:var(--wr-red);} .byline{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--wr-muted);font-weight:600;} /* Topbar + masthead + nav */ .wr-topbar{background:var(--wr-ink);color:#f6f2e9;font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;font-weight:600;} .wr-topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding:8px 28px;} .wr-topbar b{color:#ff8f80;} .wr-mast{border-bottom:2px solid var(--wr-ink);background:var(--wr-paper);} .wr-mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 28px 16px;} .wr-logo{display:flex;align-items:center;gap:12px;} .wr-logo img{width:88px;height:88px;} .wr-logo .name{font-family:'Fraunces','Georgia',serif;font-weight:600;font-size:1.9rem;letter-spacing:-.01em;line-height:1;color:var(--wr-ink);} .wr-actions{display:flex;align-items:center;gap:14px;} .wr-sub{background:var(--wr-accent);color:#fff;font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;padding:9px 16px;border-radius:3px;} .wr-icon{width:22px;height:22px;stroke:var(--wr-ink);stroke-width:2;fill:none;} .wr-nav{border-bottom:1px solid var(--wr-line);position:sticky;top:0;background:var(--wr-paper);z-index:20;} .wr-nav .wrap{display:flex;gap:26px;align-items:center;padding:11px 28px;overflow-x:auto;} .wr-nav a{font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--wr-ink);white-space:nowrap;padding:2px 0;border-bottom:2px solid transparent;} .wr-nav a:hover,.wr-nav a.active{border-bottom-color:var(--wr-accent);} /* Lead: feature + right rail */ .wr-lead{padding:34px 0 6px;} .wr-lead .cols{display:grid;grid-template-columns:1.62fr 1fr;gap:0;} .wr-hero{padding-right:40px;border-right:1px solid var(--wr-line);} .wr-hero .img{display:block;width:100%;aspect-ratio:16/9;max-height:420px;overflow:hidden;background:var(--wr-paper2);border:1px solid var(--wr-line);} .wr-hero .img img{width:100%;height:100%;object-fit:cover;} .wr-hero h1{font-family:'Fraunces','Georgia',serif;font-weight:600;font-size:clamp(2rem,3.4vw,3.1rem);line-height:1.03;letter-spacing:-.015em;margin:14px 0 12px;color:var(--wr-ink);} .wr-hero .dek{font-size:1.12rem;line-height:1.5;color:var(--wr-body);max-width:52ch;margin:0 0 12px;} .wr-hero .meta{margin-top:6px;} .wr-rail{padding-left:34px;} .wr-rail .railhead{font-family:'Inter',sans-serif;font-weight:800;font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;padding-bottom:10px;border-bottom:2px solid var(--wr-ink);margin-bottom:4px;color:var(--wr-ink);} .wr-rail .item{display:block;padding:16px 0;border-bottom:1px solid var(--wr-line);} .wr-rail .item h3{font-family:'Fraunces','Georgia',serif;font-weight:600;font-size:1.16rem;line-height:1.16;margin:5px 0 0;letter-spacing:-.01em;color:var(--wr-ink);} .wr-rail .item:hover h3{color:var(--wr-accent2);} /* Section label bar */ .wr-cardsec,.wr-riversec{padding:8px 0 6px;} .wr-secbar{display:flex;align-items:baseline;gap:16px;margin:42px 0 22px;} .wr-secbar h2{font-family:'Fraunces','Georgia',serif;font-weight:600;font-size:1.4rem;letter-spacing:-.01em;margin:0;white-space:nowrap;color:var(--wr-ink);} .wr-secbar .line{flex:1;height:2px;background:var(--wr-ink);transform:translateY(-3px);} .wr-secbar .more{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--wr-accent2);white-space:nowrap;} /* 4-up card grid */ .wr-cards{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:10px;} .wr-card{padding:0 20px;border-left:1px solid var(--wr-line);} .wr-card:first-child{padding-left:0;border-left:0;} .wr-card .img{display:block;width:100%;aspect-ratio:16/10;overflow:hidden;background:var(--wr-paper2);border:1px solid var(--wr-line);margin-bottom:12px;} .wr-card .img img{width:100%;height:100%;object-fit:cover;} .wr-card h3{font-family:'Fraunces','Georgia',serif;font-weight:600;font-size:1.14rem;line-height:1.16;margin:6px 0 8px;letter-spacing:-.01em;color:var(--wr-ink);} .wr-card p{font-size:.92rem;line-height:1.5;color:var(--wr-body);margin:0 0 10px;} .wr-card:hover h3{color:var(--wr-accent2);} /* River */ .wr-river{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;border-top:2px solid var(--wr-ink);} .wr-river .row{display:grid;grid-template-columns:32px 1fr 72px;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--wr-line);} .wr-river .row .no{font-family:'Fraunces',serif;font-weight:600;font-size:1.35rem;color:var(--wr-muted);line-height:1;} .wr-river .row h3{font-family:'Fraunces','Georgia',serif;font-weight:600;font-size:1.05rem;line-height:1.15;margin:3px 0 0;color:var(--wr-ink);} .wr-river .row p{font-size:.84rem;color:var(--wr-body);margin:2px 0 0;} .wr-river .row .thumb{display:block;width:72px;height:52px;overflow:hidden;background:var(--wr-paper2);border:1px solid var(--wr-line);} .wr-river .row .thumb img{width:100%;height:100%;object-fit:cover;} .wr-river .row:hover h3{color:var(--wr-accent2);} /* Brand strip */ .wr-brands{margin:40px 0;padding:26px 0;border-top:1px solid var(--wr-line);border-bottom:1px solid var(--wr-line);} .wr-brands .lbl{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--wr-muted);margin-bottom:14px;} .wr-brands .tags{display:flex;flex-wrap:wrap;gap:10px;} .wr-brands .tags a{font-family:'Fraunces','Georgia',serif;font-size:1.02rem;padding:8px 16px;border:1px solid var(--wr-ink);border-radius:2px;transition:background .12s,color .12s;color:var(--wr-ink);} .wr-brands .tags a:hover{background:var(--wr-ink);color:var(--wr-paper);} /* Newsletter band */ .wr-news{background:var(--wr-ink);color:#f6f2e9;} .wr-news .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;padding:40px 28px;} .wr-news h2{font-family:'Fraunces','Georgia',serif;font-weight:600;font-size:1.9rem;letter-spacing:-.01em;margin:0 0 6px;color:#fff;} .wr-news p{margin:0;color:#c9c9c6;max-width:52ch;} .wr-news form{display:flex;gap:10px;flex-wrap:wrap;} .wr-news input[type=email]{padding:13px 16px;border:1px solid #4a4a44;background:#161613;color:#fff;font:inherit;min-width:260px;border-radius:2px;} .wr-news button{background:var(--wr-accent);color:#fff;border:0;padding:13px 24px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.8rem;border-radius:2px;cursor:pointer;} .wr-news .hp{position:absolute;left:-9999px;} @media(max-width:960px){ .wr-lead .cols{grid-template-columns:1fr;} .wr-hero{padding-right:0;border-right:0;} .wr-rail{padding-left:0;margin-top:26px;} .wr-cards{grid-template-columns:1fr 1fr;gap:26px 0;} .wr-card{border-left:0;padding:0;} .wr-card:nth-child(even){padding-left:22px;border-left:1px solid var(--wr-line);} .wr-river{grid-template-columns:1fr;} } @media(max-width:560px){ .wr-cards{grid-template-columns:1fr;} .wr-card:nth-child(even){padding-left:0;border-left:0;} .wr-logo .name{font-size:1.5rem;} } /* ===================================================================== REFINEMENTS 2026-08-12 — polish pass on the Wired editorial skin. All fixes live here (override layer, loads last, rebuild-safe). ===================================================================== */ /* (1) Home corner seal -> flat editorial tab, pinned bottom-right so it no longer overlaps the "THE LATEST" rail. Kills gloss/gradient/tilt. */ .cg-seal{ position:fixed !important; top:auto !important; bottom:22px !important; right:22px !important; width:auto !important; max-width:220px !important; height:auto !important; border-radius:2px !important; background:var(--wr-ink) !important; color:#f6f2e9 !important; border:1px solid var(--wr-ink) !important; border-left:3px solid var(--wr-accent) !important; box-shadow:0 10px 26px rgba(10,10,10,.26) !important; display:block !important; text-align:left !important; padding:12px 16px !important; gap:0 !important; transform:none !important; opacity:1 !important; animation:none !important; transition:background .16s ease !important; } .cg-seal:hover{transform:none !important;background:#2a0d0d !important;} .cg-seal::after{display:none !important;} .cg-seal .s1{display:none !important;} .cg-seal .s2{font-family:'Fraunces','Georgia',serif !important;font-weight:600 !important;font-size:1.02rem !important;line-height:1.06 !important;color:#fff !important;} .cg-seal .s3{display:block !important;font-family:'Inter',sans-serif !important;font-weight:800 !important;text-transform:uppercase !important;letter-spacing:.14em !important;font-size:.6rem !important;color:#ff8f80 !important;margin-top:6px !important;} .cg-seal-x{top:auto !important;bottom:84px !important;right:16px !important;background:#fbf9f3 !important;color:var(--wr-ink) !important;border:1px solid var(--wr-line) !important;box-shadow:0 3px 8px rgba(0,0,0,.18) !important;} @media(max-width:820px){ .cg-seal{bottom:16px !important;right:14px !important;max-width:190px !important;} .cg-seal .s2{font-size:.92rem !important;} .cg-seal-x{bottom:78px !important;right:10px !important;} } /* (2) Seller Hub "You're ready to go live" callout sits on a dark band — exempt its heading from the main-h2 ink rule so it stays white. */ .sh-done h2{border-bottom:0 !important;padding-bottom:0 !important;color:#fff !important;} /* (3) Home subscribe band -> drop the leftover cartoon white pill so the form reads as part of the black editorial band. */ body.home #contact form{ background:none !important;border:0 !important;border-radius:0 !important; box-shadow:none !important;padding:0 !important; } /* (4) Accent is red sitewide (--wr-accent* set to red above). Seller Hub step kickers follow the accent; inventory status badges already ship red. */ .sh-meta{color:var(--wr-accent2) !important;} /* ===================================================================== HEADER + FOOTER polish 2026-08-12 — spacing & style, all pages. ===================================================================== */ /* --- Alignment: header bars share the exact content column as the footer and page body (they were inset an extra 28px). Bars stay full-bleed; only the inner .wrap is constrained + centered, vertical padding only. */ .wr-topbar .wrap,.wr-mast .wrap,.wr-nav .wrap{ width:min(1160px,92vw) !important;max-width:1160px !important;margin:0 auto !important; } .wr-topbar .wrap{padding:9px 0 !important;} .wr-mast .wrap{padding:22px 0 18px !important;gap:24px !important;} .wr-nav .wrap{padding:12px 0 !important;gap:30px !important;} /* --- Masthead rule hierarchy: hairline under the mast, strong ink rule under the (sticky) nav so the whole header reads as one unit. */ .wr-mast{border-bottom:1px solid var(--wr-line) !important;} .wr-nav{border-bottom:2px solid var(--wr-ink) !important;box-shadow:0 1px 0 rgba(10,10,10,.04) !important;} /* --- Topbar: a touch more air + legibility. */ .wr-topbar{font-size:.68rem !important;letter-spacing:.15em !important;} /* --- Logo + name balance. */ /* Bigger masthead badge - the flat mark holds up at size and the old 44px left the wordmark dominating the lockup. */ .wr-logo img{width:88px !important;height:88px !important;} .wr-logo .name{font-size:1.75rem !important;} /* --- Subscribe: squared editorial, subtle hover. */ .wr-sub{border-radius:2px !important;padding:10px 18px !important;transition:background .14s ease !important;} .wr-sub:hover{background:var(--wr-accent2) !important;} /* --- Nav items: even rhythm + clearer hover/active underline. */ .wr-nav a{padding:4px 0 !important;} .wr-nav a:hover,.wr-nav a.active{border-bottom-color:var(--wr-accent) !important;color:var(--wr-accent2) !important;} /* --- Search icon hover. */ .wr-actions a:hover .wr-icon{stroke:var(--wr-accent) !important;} /* ===================== FOOTER ===================== */ footer{ background:var(--wr-paper2) !important;color:var(--wr-body) !important; border-top:2px solid var(--wr-ink) !important;margin-top:0 !important; padding:54px 0 30px !important; } footer::before{display:none !important;} footer .wrap{width:min(1160px,92vw) !important;max-width:1160px !important;margin:0 auto !important;} .foot-grid{grid-template-columns:1.8fr 1fr 1fr 1fr !important;gap:44px !important;align-items:start !important;} /* Brand column */ .foot-brand .brandmark{font-family:'Fraunces','Georgia',serif !important;font-weight:600 !important;font-size:1.22rem !important;color:var(--wr-ink) !important;letter-spacing:-.01em !important;} .foot-brand p{color:var(--wr-body) !important;font-size:.9rem !important;line-height:1.6 !important;max-width:34ch !important;margin:12px 0 16px !important;} /* Column labels -> editorial section labels with a hairline */ footer .foot-col h4{ font-family:'Inter',sans-serif !important;font-weight:800 !important; text-transform:uppercase !important;letter-spacing:.13em !important;font-size:.7rem !important; color:var(--wr-ink) !important;margin:0 0 14px !important;padding-bottom:10px !important; border-bottom:1px solid var(--wr-line) !important; } .foot-col a{display:block !important;color:var(--wr-body) !important;font-size:.9rem !important;padding:7px 0 !important;line-height:1.3 !important;} .foot-col a:hover{color:var(--wr-accent2) !important;} /* Social chips -> squared editorial */ .foot-socials{gap:10px !important;margin-top:4px !important;} .foot-socials a{border-radius:2px !important;border:1px solid var(--wr-line) !important;color:var(--wr-body) !important;} .foot-socials a:hover{border-color:var(--wr-ink) !important;color:var(--wr-ink) !important;transform:translateY(-2px) !important;} /* Legal row */ .foot-bottom{ margin-top:38px !important;padding-top:20px !important; border-top:1px solid var(--wr-line) !important; color:var(--wr-muted) !important;font-size:.78rem !important;letter-spacing:.01em !important; } .foot-bottom a{color:var(--wr-muted) !important;text-decoration:none !important;border-bottom:1px solid var(--wr-line) !important;padding-bottom:1px;} .foot-bottom a:hover{color:var(--wr-ink) !important;border-bottom-color:var(--wr-ink) !important;} @media(max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr !important;gap:28px !important;} .foot-brand{grid-column:1 / -1 !important;} .wr-mast .wrap{padding:18px 0 14px !important;} } /* ===================================================================== WHITE BACKGROUNDS 2026-08-12 — all page surfaces go pure white. Intentional dark bands (topbar, newsletter band) are left dark. ===================================================================== */ :root{ --wr-paper2:#ffffff; --dk-paper:#ffffff; --dk-paper2:#ffffff; } html,body{background:#ffffff !important;} footer{background:#ffffff !important;} /* Hardcoded cream panels from the legacy theme -> white (keep hairlines) */ .sh-intro, .hws-card, .hw25-tablewrap, .aero-gallery .ph, .guide-doc ul.about-list, .col-card,.rev-card,.podcast-tile,.feature-band, .hx-cover,.hx-spot,.hx-news,.hx-brand, body.items-page .ws-card, body.items-page .wn-step, body.items-page .faq-item{ background:#ffffff !important; } /* white-bg pass, round 2: light-grey sub-panel + table zebra -> white */ .sh-need{background:#ffffff !important;} table.hw25 tbody tr:nth-child(even), main table tbody tr:nth-child(even){background:#ffffff !important;} /* Section headers (home): black highlighted title + white lettering, with a rule that starts at the end of the title and crosses to the right edge (the end of the last article). The "more" link is hidden so the rule reaches the edge cleanly. */ .wr-secbar{align-items:center !important;gap:14px !important;} .wr-secbar h2{ display:inline-block !important;flex:0 0 auto !important;margin:0 !important; background:var(--wr-ink) !important;color:#ffffff !important; font-family:'Fraunces','Georgia',serif !important;line-height:1.12 !important; padding:6px 14px !important;border:0 !important;border-bottom:0 !important;border-radius:2px !important; } .wr-secbar .line{display:block !important;flex:1 1 auto !important;height:2px !important;background:var(--wr-ink) !important;transform:none !important;margin:0 !important;} .wr-secbar .more{display:none !important;} /* river list: drop its own top rule so only the header rule shows */ .wr-riversec .wr-river{border-top:0 !important;} /* wr-cards column variants (Seller Hub phases: 3-up camera, 2-up shipping) */ @media(min-width:961px){ .wr-cards.cols-3{grid-template-columns:repeat(3,1fr) !important;} .wr-cards.cols-2{grid-template-columns:repeat(2,1fr) !important;} } /* ===================================================================== GRAPHIC TILES 2026-08-12 — article/guide teaser cards become branded typographic tiles (no photos). The card itself is the ink field; the title lives in type. First tile of each group is a red accent. (Hero leads keep a generic lifestyle photo; home "Latest from the case" thumbnails keep real car photos — those showcase castings.) ===================================================================== */ .wr-card .img{display:none !important;} /* drop the photo box entirely */ .wr-cards{gap:16px !important;} .wr-card{ background:var(--wr-ink) !important;color:#f6f2e9 !important; border:0 !important;border-left:0 !important;border-radius:3px !important; padding:22px 22px 20px !important; display:flex !important;flex-direction:column !important;min-height:184px !important; transition:transform .14s ease, box-shadow .14s ease !important; } .wr-card .rubric{color:#ff8f80 !important;margin-bottom:2px !important;} .wr-card h3{ color:#fff !important;font-family:'Fraunces','Georgia',serif !important; font-size:1.35rem !important;line-height:1.14 !important;letter-spacing:-.01em !important; margin:6px 0 10px !important; } .wr-card p{color:rgba(246,242,233,.80) !important;margin:0 0 14px !important;} .wr-card .byline{color:rgba(246,242,233,.5) !important;margin-top:auto !important;} .wr-card:hover{transform:translateY(-4px) !important;box-shadow:0 16px 34px rgba(10,10,10,.30) !important;} .wr-card:hover h3{color:#fff !important;} /* one red accent tile per section (the first) */ .wr-cards > .wr-card:first-child{background:#a8161b !important;} .wr-cards > .wr-card:first-child .rubric{color:#ffd9d2 !important;} /* Media page: podcast cover shows fully (album-style), channel-tile icons */ .wr-hero .img.pod{background:var(--wr-ink) !important;} .wr-hero .img.pod img{object-fit:contain !important;} .wr-card .mf-ico{display:inline-flex !important;margin-bottom:8px !important;} .wr-card .mf-ico svg{width:30px !important;height:30px !important;} /* Center the nav links within the content column (desktop) */ @media(min-width:961px){ .wr-nav .wrap{justify-content:flex-start !important;} } /* ===================================================================== GUIDE PAGES — editorial rebuild (all guides, via shared classes). ===================================================================== */ /* drop decorative comic-era decals for a clean editorial surface */ .page-decals,.hero-decals,.fx-decals{display:none !important;} /* Hero: editorial banner — squared request button, cleaner art card */ .hero.page-hero .hero-request{ background:var(--wr-ink) !important;color:#fff !important;border:0 !important;border-radius:2px !important; box-shadow:none !important;font-family:'Inter',sans-serif !important;font-weight:800 !important; text-transform:uppercase !important;letter-spacing:.08em !important;font-size:.68rem !important; } .hero.page-hero .ph-art{border-radius:6px !important;box-shadow:0 16px 34px rgba(10,10,10,.20) !important;} .hero.page-hero .breadcrumb,.hero.page-hero .breadcrumb a{color:var(--wr-muted) !important;font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;} /* Section headings -> black highlighted tag (matches the hub sections) */ .guide-doc h2,.feature-body.article h2{ display:inline-block !important;background:var(--wr-ink) !important;color:#fff !important; font-family:'Fraunces','Georgia',serif !important;font-weight:600 !important; font-size:1.22rem !important;line-height:1.15 !important;letter-spacing:-.01em !important; padding:5px 13px !important;border:0 !important;border-bottom:0 !important;border-radius:2px !important; margin:36px 0 14px !important; } /* "Quick version" note -> editorial pull-note with a red rule */ .feature-body.article .tldr,.guide-doc .tldr{ background:var(--wr-paper2) !important;border:0 !important;border-left:3px solid var(--wr-accent) !important; border-radius:0 !important;box-shadow:none !important;padding:14px 20px !important; } .feature-body.article .tldr strong,.guide-doc .tldr strong{ color:var(--wr-accent2) !important;font-family:'Inter',sans-serif !important; } /* Inline figures -> hairline frame, no heavy shadow */ .guide-doc figure img,.feature-body figure img{ border:1px solid var(--wr-line) !important;border-radius:3px !important;box-shadow:none !important; } .guide-doc figcaption,.feature-body figcaption{color:var(--wr-muted) !important;font-style:italic;font-size:.82rem;} /* Body prose + list markers */ .guide-doc p,.feature-body.article p{color:var(--wr-body) !important;} .guide-doc .about-list li::marker{color:var(--wr-accent) !important;} /* CTA buttons -> squared editorial */ .feature .article-cta .btn,.article-cta .btn{border-radius:2px !important;box-shadow:none !important;text-decoration:none !important;font-family:'Inter',sans-serif !important;transform:none !important;} .feature .article-cta .btn-primary,.article-cta .btn-primary{background:var(--wr-accent) !important;color:#fff !important;border:1px solid var(--wr-accent) !important;} .feature .article-cta .btn-primary:hover,.article-cta .btn-primary:hover{background:var(--wr-accent2) !important;border-color:var(--wr-accent2) !important;} .feature .article-cta .btn-ghost,.article-cta .btn-ghost{background:transparent !important;color:var(--wr-ink) !important;border:1px solid var(--wr-ink) !important;} .feature .article-cta .btn-ghost:hover,.article-cta .btn-ghost:hover{background:var(--wr-ink) !important;color:#fff !important;} /* ===================================================================== DESKPAGE v1 (2026-08-12) — clean editorial refresh for the Diecast Inventory + Hobby Hub guide pages. Scoped to body.deskpage so it only touches those pages (Seller Hub / Media / Newsletter keep their look). Drops the dark photo hero card for a clean full-width header, swaps the black "highlighter" section headers for Fraunces + a hairline rule, turns dark ink guide/hub tiles into white editorial cards, and lightens the inventory toolbar from navy to warm paper. Matches the home desk look. ===================================================================== */ /* ---- Subpage hero: drop the photo art card, go full-width editorial ---- */ body.deskpage .hero.page-hero{ padding:40px 0 30px !important; } body.deskpage .hero.page-hero .ph-art{ display:none !important; } body.deskpage .hero.page-hero > .wrap{ display:block !important; grid-template-columns:none !important; max-width:1120px !important; margin:0 auto !important; padding:6px 26px 2px !important; } body.deskpage .hero.page-hero .ph-copy{ max-width:820px !important; } body.deskpage .hero.page-hero .ph-copy > p, body.deskpage .hero.page-hero .hero-copy p{ max-width:62ch !important; } @media(max-width:900px){ body.deskpage .hero.page-hero > .wrap{ padding:4px 22px 2px !important; } } /* ---- Guide article section headings: clean serif + hairline rule ---- */ body.deskpage .guide-doc h2, body.deskpage .feature-body.article h2{ display:block !important; background:none !important; color:var(--wr-ink) !important; font-family:'Fraunces','Georgia',serif !important; font-weight:600 !important; font-size:1.5rem !important; line-height:1.15 !important; letter-spacing:-.01em !important; padding:0 0 8px !important; margin:40px 0 16px !important; border-bottom:1px solid var(--wr-line) !important; border-radius:0 !important; } body.deskpage .guide-doc h2:first-of-type, body.deskpage .feature-body.article h2:first-of-type{ margin-top:8px !important; } /* ---- Hub section bars: title then long rule (no black box) ---- */ body.deskpage .wr-secbar h2{ display:inline-block !important; background:none !important; color:var(--wr-ink) !important; padding:0 !important; border:0 !important; border-radius:0 !important; } /* ---- Hub teaser cards: dark ink tiles -> white editorial cards ---- */ body.deskpage .wr-cards .wr-card{ background:#fff !important; color:var(--wr-body) !important; border:1px solid var(--wr-line) !important; border-left:1px solid var(--wr-line) !important; border-radius:12px !important; padding:20px 22px !important; min-height:0 !important; } body.deskpage .wr-cards .wr-card .rubric{ color:var(--wr-accent2) !important; } body.deskpage .wr-cards .wr-card h3{ color:var(--wr-ink) !important; } body.deskpage .wr-cards .wr-card p{ color:var(--wr-body) !important; } body.deskpage .wr-cards .wr-card .byline{ color:var(--wr-muted) !important; } body.deskpage .wr-cards > .wr-card:first-child{ background:#fff !important; border-top:3px solid var(--wr-accent) !important; } body.deskpage .wr-cards > .wr-card:first-child .rubric{ color:var(--wr-accent2) !important; } body.deskpage .wr-cards .wr-card:nth-child(even){ border-left:1px solid var(--wr-line) !important; padding:20px 22px !important; } body.deskpage .wr-cards .wr-card:hover{ transform:translateY(-3px) !important; box-shadow:0 10px 26px rgba(20,24,31,.10) !important; } body.deskpage .wr-cards .wr-card:hover h3{ color:var(--wr-accent2) !important; } /* ---- Inventory toolbar: navy -> warm-paper editorial ---- */ body.deskpage .grid-controls{ background:#ffffff !important; border:1.5px solid var(--wr-ink) !important; border-radius:16px !important; box-shadow:none !important; color:var(--wr-body) !important; } body.deskpage .grid-controls .gc-filters{ border-bottom:1px solid var(--wr-line) !important; } body.deskpage .stk-btn{ background:#fff !important; color:var(--wr-ink) !important; border:1px solid var(--wr-ink) !important; border-radius:999px !important; font-family:'Inter',sans-serif !important; text-transform:uppercase !important; letter-spacing:.06em !important; box-shadow:none !important; } body.deskpage .stk-btn:hover{ background:#fff !important; color:var(--wr-ink) !important; border-color:var(--wr-ink) !important; transform:none !important; } body.deskpage .stk-btn.active{ background:var(--wr-ink) !important; color:#fff !important; border-color:var(--wr-ink) !important; box-shadow:none !important; } body.deskpage .grid-controls .gc-search, body.deskpage .grid-controls .gc-series, body.deskpage .grid-controls .gc-sort{ background:#fff !important; color:var(--wr-ink) !important; border:1.5px solid var(--wr-ink) !important; box-shadow:none !important; border-radius:12px !important; } body.deskpage .grid-controls .gc-search::placeholder{ color:var(--wr-muted) !important; } body.deskpage .grid-controls .gc-searchwrap svg{ color:var(--wr-accent2) !important; } body.deskpage .grid-controls .gc-count{ color:var(--wr-muted) !important; font-family:'Inter',sans-serif !important; } /* === Nav links merged into the masthead row (2026-08-14) === */ .wr-mast .wrap .wr-navlinks{display:flex;align-items:center;gap:24px;flex:1 1 auto;justify-content:flex-start;margin-left:32px;overflow-x:auto;} .wr-navlinks a{font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--wr-ink);white-space:nowrap;padding:2px 0;border-bottom:2px solid transparent;text-decoration:none;} .wr-navlinks a:hover,.wr-navlinks a.active{border-bottom-color:var(--wr-accent);color:var(--wr-accent2);} @media(max-width:900px){ .wr-mast .wrap{flex-wrap:wrap;} .wr-mast .wrap .wr-navlinks{order:3;flex-basis:100%;margin-left:0;margin-top:10px;} } /* Newsletter link relocated to the right (where Subscribe was) */ .wr-actions .wr-navlink{font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--wr-ink);white-space:nowrap;padding:2px 0;border-bottom:2px solid transparent;text-decoration:none;} .wr-actions .wr-navlink:hover{color:var(--wr-accent2);border-bottom-color:var(--wr-accent);} /* Masthead badge steps down on small screens. This has to live after the .wr-logo img override above - same specificity, so source order decides. */ @media(max-width:560px){ .wr-logo img{width:68px !important;height:68px !important;} } /* Newsletter is the one call to action in the masthead, so give it a solid block instead of the plain underline the other nav links use. Matches the .wr-sub button treatment already used elsewhere on the site. */ .wr-actions .wr-navlink{ background:var(--wr-accent) !important; color:#fff !important; padding:10px 18px !important; border-radius:3px !important; border-bottom:0 !important; transition:background .14s ease, transform .12s ease !important; } .wr-actions .wr-navlink:hover{ background:var(--wr-accent2) !important; color:#fff !important; transform:translateY(-1px); }