/* ============================================================ LOUPE · LIQUID GLASS + WARM LIGHT TABLE — MARKETING SITE ------------------------------------------------------------ A MATERIAL-ONLY layer. No markup, structure, copy, or color tokens change — only the material of the chrome + working surfaces. Everything is gated behind `html.loupe-glass`. APPLY: add class "loupe-glass" to the element, and load this file AFTER the host stylesheet. REVERT: remove the "loupe-glass" class (this layer goes dormant instantly — zero effect, nothing to undo). INTENSITY (optional): set data-glass="subtle" | "full" on ; default (unset) = balanced. ============================================================ */ /* Token fallbacks — so this layer is self-contained even if the host stylesheet names its tokens differently. Values are the canonical Darkroom palette; safe to delete any the host already defines. */ html.loupe-glass{ --amber:#BA7517; --lit:#E2902A; --ink:#E9E4D6; --dim:#A79E8C; --faint:#766C5A; --keep:#639922; --cut:#B0463E; --surface-hover:#2A2015; --line:#3A3024; --mo:'JetBrains Mono',ui-monospace,monospace; } /* ============================================================ LIQUID GLASS + LIGHT TABLE — marketing site material pass. Floating chrome (nav, buttons, chips, feature cards, the focus side panel + actions, mockup headers, map panel) becomes glass. The working surfaces that show culling (focus stage, decision & candidate grids) become the warm luminous light table with frames as backlit slides. Hero, the philosophy paper band, postcards, contact-sheet film strip, photobook spreads, and the map field stay grounded. Colors + one-amber-per-view unchanged. ============================================================ */ html.loupe-glass{ --g-blur:18px; --g-sat:1.45; --g-bg:rgba(28,22,15,0.58); --g-bg2:rgba(34,27,18,0.64); --g-border:rgba(247,240,224,0.13); --g-rim:inset 0 1px 0 rgba(251,246,234,0.16),inset 0 -1px 0 rgba(0,0,0,0.34); --g-amber-bg:rgba(186,117,23,0.30); --g-amber-border:rgba(232,165,70,0.62); --g-amber-rim:inset 0 1px 0 rgba(255,224,166,0.45),inset 0 -1px 0 rgba(120,70,8,0.5); --g-amber-glow:0 0 0 1px rgba(232,165,70,0.32),0 0 22px rgba(226,144,42,0.42),0 8px 24px rgba(0,0,0,0.45); --lt-panel:linear-gradient(180deg,#f8efda 0%,#efe2c7 52%,#e4d6b8 100%); } /* ---- nav ---- */ html.loupe-glass .nav{background:var(--g-bg);-webkit-backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));border-bottom:1px solid var(--g-border);box-shadow:var(--g-rim),0 8px 28px rgba(0,0,0,0.3)} html.loupe-glass .nav .links a{border-radius:999px} html.loupe-glass .nav .links a:hover{background:var(--g-bg2);color:var(--ink)} html.loupe-glass .nav .links a.cta{border:1px solid var(--g-border);background:var(--g-bg2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--g-rim)} html.loupe-glass .nav .links a.cta:hover{border-color:var(--g-amber-border);background:var(--g-amber-bg);color:#ffdca6;box-shadow:var(--g-amber-rim),var(--g-amber-glow)} /* ---- buttons (amber = glowing glass) ---- */ html.loupe-glass .btn{border-radius:999px;background:var(--g-bg2);-webkit-backdrop-filter:blur(10px) saturate(var(--g-sat));backdrop-filter:blur(10px) saturate(var(--g-sat));border:1px solid var(--g-border);box-shadow:var(--g-rim)} html.loupe-glass .btn:hover{border-color:var(--g-amber-border);color:#ffdca6} html.loupe-glass .btn.amber{background:var(--g-amber-bg);color:#ffdca6;border:1px solid var(--g-amber-border);box-shadow:var(--g-amber-rim),var(--g-amber-glow)} html.loupe-glass .btn.amber:hover{background:rgba(226,144,42,0.42);color:#fff1d8} /* ---- chips → frosted glass ---- */ html.loupe-glass .taglist li, html.loupe-glass .m-chip, html.loupe-glass .m-lchip, html.loupe-glass .m-pchip, html.loupe-glass .m-crchip, html.loupe-glass .m-crbadge, html.loupe-glass .m-btn{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--g-border);background:var(--g-bg2);box-shadow:var(--g-rim)} html.loupe-glass .m-chip.on{background:var(--g-amber-bg);border:1px solid var(--g-amber-border);color:#ffdca6;box-shadow:var(--g-amber-rim),0 0 14px rgba(226,144,42,0.32)} html.loupe-glass .m-pchip.prot{border-color:var(--g-amber-border);box-shadow:var(--g-amber-rim),0 0 12px rgba(226,144,42,0.3);color:#f0d9b3} /* ---- feature cards + pillars + cutting-room cards → glass ---- */ html.loupe-glass .host .pill, html.loupe-glass .grid3 .g3, html.loupe-glass .m-crcard{background:var(--g-bg);-webkit-backdrop-filter:blur(16px) saturate(var(--g-sat));backdrop-filter:blur(16px) saturate(var(--g-sat));border:1px solid var(--g-border);box-shadow:var(--g-rim),0 16px 38px rgba(0,0,0,0.34)} html.loupe-glass .m-crcard.amber{border:1px solid var(--g-amber-border);background:var(--g-amber-bg);box-shadow:var(--g-amber-rim),var(--g-amber-glow)} /* ---- mockup header band + crumb ---- */ html.loupe-glass .m-head{background:var(--g-bg);-webkit-backdrop-filter:blur(14px) saturate(var(--g-sat));backdrop-filter:blur(14px) saturate(var(--g-sat));border-bottom:1px solid var(--g-border)} html.loupe-glass .m-crumb .cur{background:var(--g-bg2);border:1px solid var(--g-border);border-radius:999px} /* ---- map layers panel ---- */ html.loupe-glass .m-mappanel{background:var(--g-bg);-webkit-backdrop-filter:blur(16px) saturate(var(--g-sat));backdrop-filter:blur(16px) saturate(var(--g-sat));border:1px solid var(--g-border);box-shadow:var(--g-rim),0 12px 34px -10px #000c} /* ---- early-access input → glass well ---- */ html.loupe-glass .eaform input[type=email]{background:var(--g-bg2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--g-border);border-radius:999px;box-shadow:var(--g-rim)} /* ===== LIGHT TABLE — the working surfaces ===== */ /* focus stage = lit table; the photo is a mounted slide */ html.loupe-glass .m-stage{background:radial-gradient(70% 80% at 50% 44%,#e8d9ba 0%,#d6c49f 60%,#c0ad87 100%)} html.loupe-glass .m-stage img{border:9px solid #fdfbf4;border-radius:3px;background:#fdfbf4;box-shadow:0 22px 50px rgba(0,0,0,0.55),0 0 0 1px rgba(40,30,16,0.24)} /* focus side panel + actions = glass apparatus */ html.loupe-glass .m-meta{background:var(--g-bg);-webkit-backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));border-left:1px solid var(--g-border);box-shadow:var(--g-rim)} html.loupe-glass .m-acts{background:rgba(18,14,9,0.6);-webkit-backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));border-top:1px solid var(--g-border)} html.loupe-glass .m-acts .a{border-radius:10px} html.loupe-glass .m-acts .bcut{background:rgba(176,70,62,0.26);border-color:rgba(214,110,100,0.6);color:#ff9a8f;box-shadow:inset 0 1px 0 rgba(255,180,170,0.32)} html.loupe-glass .m-acts .bkeep{background:rgba(99,153,34,0.26);border-color:rgba(124,181,52,0.6);color:#9be8b6;box-shadow:inset 0 1px 0 rgba(190,240,170,0.4)} html.loupe-glass .m-acts .bskip{background:var(--g-bg2);border-color:var(--g-border)} /* decision + candidate grids = the light table, frames as backlit slides */ html.loupe-glass .m-tgrid{background:var(--lt-panel);border:1px solid rgba(255,250,240,0.5);border-radius:14px;margin:8px 16px 16px;padding:14px;box-shadow:inset 0 2px 0 rgba(255,255,255,0.7),inset 0 0 0 1px rgba(255,250,238,0.3),inset 0 -30px 60px rgba(120,100,66,0.1),0 24px 60px rgba(0,0,0,0.45)} html.loupe-glass .m-tile{background:#fbf6ea;border:1px solid rgba(40,30,16,0.16);border-radius:4px;padding:5px;box-shadow:0 8px 18px rgba(40,28,12,0.26),0 1px 0 rgba(255,255,255,0.7);overflow:visible} html.loupe-glass .m-tile img{border-radius:2px} html.loupe-glass .m-tile.keep{border-color:var(--keep);box-shadow:0 8px 18px rgba(40,28,12,0.26),0 0 0 1px var(--keep)} html.loupe-glass .m-tile.cut{opacity:1;border-color:rgba(176,70,62,0.55)} html.loupe-glass .m-tile.cut img{filter:grayscale(0.55) brightness(0.74)} html.loupe-glass .m-tile .prot{background:rgba(20,15,8,0.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}