@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap'); /* ============================================================ WARM THEME โ€” phase 1 (John approved W7 in #proposals, 2026-10-12: "Move the whole site to the new warm high-end look (like /custom-work/), replacing the blue blueprint grid ... footer first, then headers/hero, then shop"). Phase 1 = page ground, text/link/card colours and the footer. The header/nav (sitenav.js #f3dNav) and hero typography are deliberately untouched. SOURCE: ~/bin/warm_theme.css. Loaded LAST in on every public page by ~/bin/warm_theme_pass.py (run by pages_deploy_clean.sh on the upload mirror once live), so it overrides each page family's own tokens without editing ~10 separate generators: A shop/home family --bg --panel --panel2 --line --txt --dim (light + dark) B styles.css family --bg --bg-card --text --text-muted --accent --border (guides, /3d-printing-melbourne/ ...) C one-offs --card --fg --mut (ai, shop/add) ยท --paper --ink --muted --navy --chip (lab) Tokens mirror ~/bin/build_custom_work_page.py (#f6f4f0 ground, #1b1a18 ink, #1c1a17 footer). ============================================================ */ /* ---- warm palette: light is the default, html[data-theme=dark] = warm dark ---- */ html:root{ --w-bg:#f6f4f0; --w-bg2:#efebe4; --w-panel:#fffdfa; --w-tile:#ebe7e0; --w-ink:#1b1a18; --w-muted:#5f5a52; --w-line:#e2ddd4; --w-hair:rgba(27,26,24,.14); --w-link:#00718f; --w-btn:#1b1a18; --w-btn-ink:#ffffff; --w-sel:#1b1a18; --w-sel-ink:#f6f4f0; --w-foot:#1c1a17; --w-foot-ink:#efe9e1; --w-foot-muted:#b3aa9e; --w-foot-line:#3a352f; --w-foot-link:#e9e3da; --w-brass:#c9a46b; } html[data-theme=dark]:root{ --w-bg:#151311; --w-bg2:#1b1916; --w-panel:#1f1c19; --w-tile:#2a2622; --w-ink:#efe9e1; --w-muted:#aaa298; --w-line:#332e28; --w-hair:rgba(239,233,225,.14); --w-link:#4fc3dc; --w-btn:#efe9e1; --w-btn-ink:#1b1a18; --w-sel:#efe9e1; --w-sel-ink:#151311; --w-foot:#0f0e0c; --w-foot-line:#2a2622; } /* ---- family tokens โ†’ warm (specificity 0,2,1 beats a page's :root / html[data-theme=..]) ---- */ html:root:not(#w0){ /* A */ --bg:var(--w-bg); --panel:var(--w-panel); --panel2:var(--w-bg2); --pane:var(--w-panel); --line:var(--w-line); --txt:var(--w-ink); --dim:var(--w-muted); /* B */ --bg-alt:var(--w-bg2); --bg-card:var(--w-panel); --bg-card-hover:var(--w-tile); --text:var(--w-ink); --text-muted:var(--w-muted); --text-dim:var(--w-muted); --accent:var(--w-ink); --accent-glow:rgba(168,131,79,.14); --border:var(--w-hair); /* C */ --card:var(--w-panel); --fg:var(--w-ink); --mut:var(--w-muted); --code:var(--w-bg2); /* lab */ --paper:var(--w-bg); --ink:var(--w-ink); --muted:var(--w-muted); --navy:var(--w-ink); --chip:var(--w-tile); } /* light only: accent text to AA on the warm ground. #0090ad/#00b4d8 text was 2.2-3.7:1; #00718f (the header "Get a Quote" teal) is 5.1:1. Buttons filled with --cyan flip to white text (5.6:1). */ html:root:not([data-theme=dark]):not(#w0){ --cyan:#00718f; --cyan2:#005c74; --cyanTxt:#005c74; /* quote engine (qe.css) */ --bg2:var(--w-bg2); --line2:#cfc7ba; --mute:var(--w-muted); --acc:#00718f; --acc2:#00718f; --acc-soft:rgba(0,113,143,.09); --ok:#0f6e3d; } html:not([data-theme=dark]) :is(button.add,button.add:hover,.toast,.fbtadd,.btn.primary,.jb-btn,.cfg .go,#pmAdd,#fbtcart button,#checkout,#cartBtn .n,#slbar .go,.mini.o,.soonflag,.dtbadge,.dl a,.submit,.stickybuy button,.pstrip a,#dsgAdd,.gt-btn,button.go){color:#fff!important} html:not([data-theme=dark]) .eco{color:#2f7a4a} html:not([data-theme=dark]) #f3dpop button.go{background:#00718f!important;color:#fff!important} html:not([data-theme=dark]) header.hd .sub{color:var(--w-muted)} html:not([data-theme=dark]) label[for=privacy-check]{color:var(--w-muted)!important} html:not([data-theme=dark]) label[for=privacy-check] a{color:#00718f!important} html:not([data-theme=dark]) .fitflag{color:#7fdcf0} html[data-theme=dark] :is(#f3dpop button.go,.jb-btn,button.go){color:#04222b!important} /* ---- page ground: warm off-white, no blueprint grid ---- */ html body{background-color:var(--w-bg)!important;background-image:none!important;color:var(--w-ink)} html body::before{background:none!important} /* the faint cyan 44px grid on shop/home pages */ video.bgvid{display:none!important} /* fixed full-page blueprint-drawing video behind home (navy at .6 in dark mode) */ ::selection{background:var(--w-sel);color:var(--w-sel-ink)} /* ---- B: styles.css blueprint leftovers (hard-coded pale-ink / white-alpha values) ---- */ .btn-primary{background:var(--w-btn)!important;color:var(--w-btn-ink)!important;border-color:var(--w-btn)!important} .btn-primary:hover{background:#3a352f!important} html[data-theme=dark] .btn-primary:hover{background:#fff!important} .btn-secondary,.btn-outline{color:var(--w-ink)!important;border-color:var(--w-hair)!important} .prod-card-img .img-hover{background:var(--w-tile)} .guide-table td{border-bottom-color:var(--w-hair)} .guide-table th{border-bottom-color:var(--w-ink)} .guide-faq details,.guide-video video,.guide-stats{border-color:var(--w-hair)} .guide-more{border-top-color:var(--w-hair)} .guide-stats{background:var(--w-hair)} .guide-pick{background:var(--w-panel);border-color:var(--w-line)} .guide-pick strong,.guide-stats b{color:var(--w-ink)} .guide-crumbs a{color:var(--w-muted)} .guide-body a:not(.btn):not(.gt-btn),.container p a:not(.btn){text-decoration:underline;text-decoration-color:var(--w-hair);text-underline-offset:3px} .fsub{border-color:var(--w-line)!important;background:var(--w-panel)!important} .fsub-form input{background:var(--w-bg)!important;border-color:var(--w-hair)!important;color:var(--w-ink)!important} .fsub-done{color:var(--w-link)} [style*="border:1px solid rgba(255,255,255"]{border-color:var(--w-hair)!important} .contact-form input,.contact-form select,.contact-form textarea{background:var(--w-panel);color:var(--w-ink);border-color:var(--w-hair)} .contact-form select option{background:var(--w-panel)} .card,.bg-card,[class*="card"]{border-color:var(--w-line)} /* old styles.css fixed nav (only shown where sitenav.js is absent) */ .nav{background:rgba(246,244,240,.92)!important;border-bottom-color:var(--w-line)!important} html[data-theme=dark] .nav{background:rgba(21,19,17,.92)!important} .nav .nav-links a:not(.btn){color:var(--w-ink)} /* ---- footer: warm charcoal, no grid (all families; not the cart drawer's