/* ============================================================ CLAD ยท GALLERY LIGHT THEME โ€” Layer 1 (tokens + utility overrides) Active ONLY when has class "clad-light". Zero behavior change. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,420;9..144,560&display=swap'); html.clad-light{ --paper:#f3f0e9; --paper2:#eae6dc; --card:#ffffff; --ink:#1c1a16; --gl-body:#403c34; --gl-muted:#6f6a5e; --gl-line:#ddd7c9; --gl-amber:#a4762a; --gl-amber-b:#c08c35; --stage:#23211c; } html.clad-light body{background:var(--paper)!important;color:var(--gl-body)} html.clad-light .glass-panel{background:rgba(255,255,255,.82);border-color:var(--gl-line);backdrop-filter:blur(10px)} html.clad-light .font-serif-display{font-family:'Fraunces','Cinzel',Georgia,serif} /* ---- surfaces ---- */ html.clad-light .bg-black{background-color:var(--paper)} html.clad-light .bg-zinc-950,html.clad-light .bg-zinc-900, html.clad-light .bg-zinc-900\/50,html.clad-light .bg-zinc-900\/40{background-color:var(--card)} html.clad-light .bg-zinc-800{background-color:var(--paper2)} html.clad-light .bg-white{background-color:var(--ink)} html.clad-light .bg-white\/5,html.clad-light .bg-white\/10{background-color:rgba(28,26,22,.06)} /* ---- text ---- */ html.clad-light .text-white{color:var(--ink)} html.clad-light .text-black{color:var(--paper)} html.clad-light .text-zinc-300,html.clad-light .text-zinc-400{color:var(--gl-body)} html.clad-light .text-zinc-500,html.clad-light .text-zinc-600, html.clad-light .text-zinc-700,html.clad-light .text-zinc-800{color:var(--gl-muted)} /* ---- borders ---- */ html.clad-light .border-white\/5,html.clad-light .border-white\/10, html.clad-light .border-white\/20,html.clad-light .border-white\/30, html.clad-light .border-zinc-800{border-color:var(--gl-line)} html.clad-light .border-white{border-color:var(--ink)} /* ---- amber system (deepened for light bg, 5.6:1) ---- */ html.clad-light .text-amber-500,html.clad-light .text-amber-400{color:var(--gl-amber)} html.clad-light .bg-amber-500,html.clad-light .bg-amber-400{background-color:var(--gl-amber)} html.clad-light .border-amber-500,html.clad-light .border-amber-500\/10, html.clad-light .border-amber-500\/30,html.clad-light .border-amber-500\/50{border-color:var(--gl-amber)} html.clad-light .bg-amber-500 .text-black,html.clad-light .bg-amber-500.text-black, html.clad-light .bg-amber-400.text-black{color:#fff} /* primary CTA: dark-ink buttons that were white-on-black */ html.clad-light .bg-white.text-black,html.clad-light .bg-white .text-black{color:var(--paper)} /* ---- future hook: dark "viewing room" for the render stage (Layer 2) ---- */ html.clad-light .clad-stage-dark{background-color:var(--stage)!important} /* == PATCH02 == */ /* ---- hover-state fixes: light theme made these invisible ---- */ html.clad-light .hover\:text-white:hover{color:var(--ink)} html.clad-light .hover\:bg-white\/5:hover{background-color:rgba(28,26,22,.06)} html.clad-light .hover\:bg-white\/10:hover{background-color:rgba(28,26,22,.09)} html.clad-light .hover\:border-white:hover{border-color:var(--ink)} html.clad-light .hover\:border-white\/30:hover{border-color:var(--gl-line)} html.clad-light .hover\:bg-white:hover{background-color:var(--ink)} html.clad-light .hover\:text-amber-400:hover{color:var(--gl-amber-b)} /* ---- viewing room: keep amber + light text readable on the dark stage ---- */ html.clad-light .clad-stage-dark .text-zinc-400, html.clad-light .clad-stage-dark .text-zinc-500, html.clad-light .clad-stage-dark .text-zinc-600{color:#b7b3a6} html.clad-light .clad-stage-dark .text-white{color:#f2efe6} html.clad-light .clad-stage-dark .hover\:text-white:hover{color:#f2efe6} html.clad-light .clad-stage-dark .border-white\/10{border-color:rgba(255,255,255,.14)} html.clad-light .clad-stage-dark .bg-zinc-900{background-color:rgba(20,19,16,.7)} /* ---- type floor: lift the microscopic labels (flag-gated, reviewable) ---- */ html.clad-light .text-\[7px\]{font-size:10px} html.clad-light .text-\[8px\]{font-size:10.5px} html.clad-light .text-\[9px\]{font-size:11px} html.clad-light .text-\[10px\]{font-size:11.5px} html.clad-light .tracking-\[0\.4em\]{letter-spacing:.18em} html.clad-light .tracking-\[0\.5em\]{letter-spacing:.2em} html.clad-light .tracking-\[0\.8em\]{letter-spacing:.28em} /* == PATCH03 == */ /* ---- near-solid black sheets -> warm white panels ---- */ html.clad-light .bg-black\/90, html.clad-light .bg-black\/95{background-color:rgba(255,255,255,.96)} /* ---- dim scrims: stay dark (correct for light UIs), just warmed ---- */ html.clad-light .bg-black\/50{background-color:rgba(28,26,22,.38)} html.clad-light .bg-black\/70, html.clad-light .bg-black\/80{background-color:rgba(28,26,22,.55)} /* ---- translucent zinc panels -> light equivalents ---- */ html.clad-light .bg-zinc-900\/10{background-color:rgba(28,26,22,.05)} html.clad-light .bg-zinc-900\/30, html.clad-light .bg-zinc-900\/40, html.clad-light .bg-zinc-900\/50{background-color:rgba(255,255,255,.72)} html.clad-light .bg-zinc-900\/60{background-color:rgba(255,255,255,.8)} html.clad-light .bg-zinc-900\/95{background-color:rgba(255,255,255,.95)} /* ---- gradient cards -> flat Gallery card (kills dark gradients cleanly) ---- */ html.clad-light .bg-gradient-to-t, html.clad-light .bg-gradient-to-b, html.clad-light .bg-gradient-to-br{background-image:none;background-color:var(--card)} /* ---- strays ---- */ html.clad-light .text-zinc-200{color:var(--gl-body)} html.clad-light .border-zinc-700{border-color:var(--gl-line)} /* ---- inside the dark viewing room, scrims/panels keep their dark look ---- */ html.clad-light .clad-stage-dark .bg-black\/50{background-color:rgba(0,0,0,.5)} html.clad-light .clad-stage-dark .bg-black\/70{background-color:rgba(0,0,0,.7)} html.clad-light .clad-stage-dark .bg-black\/80{background-color:rgba(0,0,0,.8)} html.clad-light .clad-stage-dark .bg-zinc-900\/50{background-color:rgba(20,19,16,.6)} /* == PATCH04 == */ /* ---- 1) compact controls: tighter floor for BUTTON labels so segmented rows (Atmosphere etc.) fit their containers ---- */ html.clad-light button.text-\[9px\], html.clad-light button.text-\[10px\], html.clad-light button .text-\[9px\], html.clad-light button .text-\[10px\]{font-size:10px;letter-spacing:.06em} html.clad-light button.text-\[8px\], html.clad-light button .text-\[8px\]{font-size:9.5px;letter-spacing:.05em} /* ---- 2) icons/text inside dark chip & scrim buttons stay light ---- */ html.clad-light .bg-black\/40.text-white, html.clad-light .bg-black\/50.text-white, html.clad-light .bg-black\/60.text-white, html.clad-light .bg-black\/70.text-white, html.clad-light .bg-black\/80.text-white{color:#f3f0e9} html.clad-light .bg-black\/40 .text-white, html.clad-light .bg-black\/50 .text-white, html.clad-light .bg-black\/60 .text-white, html.clad-light .bg-black\/70 .text-white, html.clad-light .bg-black\/80 .text-white{color:#f3f0e9} html.clad-light .bg-black\/40 svg, html.clad-light .bg-black\/50 svg, html.clad-light .bg-black\/60 svg, html.clad-light .bg-black\/70 svg, html.clad-light .bg-black\/80 svg{color:#f3f0e9;stroke:currentColor} /* == PATCH04B == */ /* ---- atmosphere & other 7px grid buttons: fit the fixed grid ---- */ html.clad-light button.text-\[7px\]{font-size:8.5px;letter-spacing:.03em} /* ---- filmstrip delete chip: light chip, dark X, red danger hover ---- */ html.clad-light .bg-black\/70.text-white\/70{ background-color:rgba(243,240,233,.94); color:#1c1a16; border:1px solid rgba(28,26,22,.25); } html.clad-light .bg-black\/70.text-white\/70:hover{ background-color:rgba(220,60,60,.92); color:#fff;border-color:transparent; } /* keep the X glyph sized to its 16px chip */ html.clad-light .w-4.text-\[9px\]{font-size:9px} /* == PATCH04C == */ /* filmstrip delete chip โ€” forced light, red on hover */ html.clad-light button.rounded-full.w-4.h-4{ background-color:rgba(243,240,233,.95)!important; color:#1c1a16!important; border:1px solid rgba(28,26,22,.3)!important; } html.clad-light button.rounded-full.w-4.h-4:hover{ background-color:rgba(220,60,60,.92)!important; color:#fff!important;border-color:transparent!important; } /* == PATCH08B == */ /* danger zone: deep legible wine-red on paper (5.5:1+) */ html.clad-light .text-red-500,html.clad-light .text-red-400, html.clad-light .text-red-300{color:#8d3038} html.clad-light .border-red-500,html.clad-light .border-red-500\/30, html.clad-light .border-red-500\/50,html.clad-light .border-red-900, html.clad-light .border-red-900\/50{border-color:rgba(141,48,56,.45)} html.clad-light .bg-red-500\/10,html.clad-light .bg-red-900\/10, html.clad-light .bg-red-900\/20,html.clad-light .bg-red-950{background-color:rgba(141,48,56,.07)} html.clad-light .bg-red-500,html.clad-light .bg-red-600{background-color:#8d3038;color:#fff} html.clad-light .hover\:bg-red-500:hover,html.clad-light .hover\:bg-red-600:hover{background-color:#6f242b;color:#fff} html.clad-light .hover\:text-red-500:hover,html.clad-light .hover\:text-red-400:hover{color:#6f242b} /* == PATCH14 == */ /* decorative photo overlays (pointer-events-none gradients) keep their dark gradient in light mode โ€” fixes washed-out project thumbnails */ html.clad-light .pointer-events-none.bg-gradient-to-t, html.clad-light .pointer-events-none.bg-gradient-to-b, html.clad-light .pointer-events-none.bg-gradient-to-br{ background-color:transparent!important; background-image:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0) 55%)!important; } /* == PATCH14B == */ /* light gallery: renders in full color, always */ html.clad-light .grayscale{filter:none!important} /* == PATCH19 == */ /* wordmark refresh flash: Tiffany in dark, deepened Tiffany teal on paper */ .clad-logo-refreshing{color:#0ABAB5!important} html.clad-light .clad-logo-refreshing{color:#0d8f8b!important} /* == PATCH22 == */ /* project-card text sits on photos: cream + soft shadow in light mode */ html.clad-light .\[content-visibility\:auto\] p, html.clad-light .\[content-visibility\:auto\] span{ color:#f3f0e9!important; text-shadow:0 1px 6px rgba(0,0,0,.55); } /* == PATCH25 == */ /* hint text must never look like typed content */ html.clad-light input::placeholder, html.clad-light textarea::placeholder{color:#a8a294!important;opacity:1} /* PATCH 87: Mood Board Studio spec + adjustments readable in light mode. House formula - frosted inserts, ink letters. Fires ONLY under clad-light; dark mode keeps the inline styles untouched. */ html.clad-light .mood-spec-input{color:var(--ink)!important;background:rgba(52,211,153,.10)!important} html.clad-light .mood-adjust-input{color:var(--ink)!important;background:rgba(28,26,22,.06)!important;border-color:rgba(28,26,22,.25)!important} html.clad-light .mood-spec-input::placeholder,html.clad-light .mood-adjust-input::placeholder{color:rgba(28,26,22,.45)!important}