/* ============================================================ HOUSE LIGHTS — global house switch The same state model as depiction-studio-screening.html: one class on , then let the custom properties do the work. Here it drives the WHOLE site, not one section. (no class) lights ON — the pale press studio. Pixel-for-pixel the shipped design. body.k-dark lights OFF — the black box. Every substrate, rule and ink flips to the screening room. The live theme proofs (.mini, .plate__win, .run__win) are deliberately untouched: they are the product, and they must look the same under either house. ============================================================ */ body.k-dark{ --stock:#0C0D0F; --stock-2:#121316; --sheet:#17181C; --chalk:#F1F1ED; --graphite:#EDEEEA; --room:#16181C; --room-2:#1F2126; --grey:#8A8B87; --grey-2:#A2A39F; --ink-2:#B9BAB6; --ink-3:#9EA09B; --ink-mag:#FF2E86; --amber:#F0B25C; --rule:rgba(241,241,237,.17); --rule-soft:rgba(241,241,237,.085); --rule-inv:rgba(241,241,237,.17); } /* --- fixtures that cannot ride on a token alone --- */ body.k-dark .grain{mix-blend-mode:screen;opacity:.12} body.k-dark .tbl tr:hover td{background:rgba(241,241,237,.055)} body.k-dark .dbtn{color:#0C0D0F} body.k-dark .boxspec__cell:hover{background:var(--room-2)} body.k-dark .plate__scan{ background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,0) 34%,rgba(0,0,0,0) 66%,rgba(0,0,0,.26)); } body.k-dark .hero__plate, body.k-dark .anat__layer, body.k-dark .detail__win, body.k-dark .peek{box-shadow:0 44px 96px -58px #000} /* the room bands keep one step of separation above the substrate */ body.k-dark [data-room]{background-color:var(--room)} /* --- cross-fade between the two houses --- Selectors listed here have no transition of their own, so adding one cannot clobber an existing hover animation. */ body, .hero__stage,.hero__say,.hero__grid span, .bar,.bar__cell,.bar__cell span, .state__lead,.state__cols p,.state__cols h4, .boxspec__g,.boxspec__cell,.boxspec__cell p,.boxspec__cell strong, .plate__sheet,.plate__ttl,.plate__sub,.plate__price b,.plate__price span, .plate__sheet .c::before,.plate__sheet .c::after, .xfade,.list,.row__n,.row__c, .tbl,.tbl th,.tbl td,.tbl .mono,.tbl .nm, .run,.anat,.acq,.colo,.card, .specs,.specs div,.specs dt,.specs dd, .run__rows,.acq__cards,.colo__grid,.colo__base, .eyebrow,.rule,.slug,.body-lg,.body-sm, .detail__bar,.detail__win,.detail__lede,.detail__brief p,.detail__crumb,.detail__url, .grain,.crop::before,.crop::after,.scrollcue .bar,.reg{ transition:background-color .75s var(--ease-2), color .75s var(--ease-2), border-color .75s var(--ease-2), opacity .75s var(--ease-2); } /* proofs never cross-fade */ .mini,.mini *,.mini-frame,.mini-frame iframe,.plate__win,.run__win{transition:none} /* --- the switch itself --- */ .house-sw{ display:inline-flex;align-items:center;gap:9px;padding:5px 6px 5px 11px; border:1px solid currentColor;border-radius:999px;opacity:.78; transition:opacity .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease); } .house-sw:hover{opacity:1;border-color:var(--amber)} .house-sw span{ font-family:var(--f-mono);font-size:9px;letter-spacing:.12em; text-transform:uppercase;white-space:nowrap; } .house-sw i{ position:relative;width:30px;height:16px;border-radius:999px; border:1px solid currentColor;display:block;opacity:.82; } .house-sw i::after{ content:'';position:absolute;top:1px;left:1px;width:12px;height:12px; border-radius:50%;background:var(--amber);transform:translateX(14px); transition:transform .5s var(--ease),background .4s var(--ease); } body.k-dark .house-sw i::after{transform:translateX(0);background:currentColor} /* ============================================================ THEME PAGE — transplanted from Depiction Studio V2 ============================================================ */ .detail{ position:fixed;inset:0;z-index:110;background:var(--stock);color:var(--graphite); overflow:auto;opacity:0;visibility:hidden; transition:opacity .45s var(--ease),visibility .45s; } .detail.on{opacity:1;visibility:visible} .detail__bar{ position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between; gap:18px;padding:16px var(--gut);background:var(--stock);border-bottom:1px solid var(--rule); } .detail__crumb{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)} .detail__crumb b{color:var(--graphite);font-weight:400} .detail__x{font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;border-bottom:1px solid var(--rule);padding-bottom:2px} .detail__x:hover{border-color:var(--ink-mag)} .detail__in{ display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:clamp(24px,4vw,64px);padding:clamp(24px,4vw,56px) var(--gut) clamp(60px,9vw,120px); align-items:start; } .detail__win{ position:relative;z-index:3;isolation:isolate;overflow:hidden;background:var(--sheet); box-shadow:0 40px 90px -60px rgba(0,0,0,.55);aspect-ratio:16/11; } .detail__win.tall{aspect-ratio:4/5} .detail__meta{display:flex;justify-content:space-between;gap:16px;padding-top:12px;flex-wrap:wrap} .detail__side{display:grid;gap:clamp(18px,2.4vw,26px);align-content:start;position:sticky;top:78px} .detail__side h1{margin:0;font-variation-settings:'wdth' 112,'wght' 500;text-transform:uppercase;font-size:clamp(1.9rem,4vw,3rem);line-height:.94;letter-spacing:-.03em} .detail__lede{margin:0;font-size:15px;line-height:1.66;color:var(--ink-2)} .detail__price{display:flex;align-items:baseline;gap:14px} .detail__price b{font-variation-settings:'wdth' 100,'wght' 500;font-weight:400;font-size:clamp(1.9rem,3.2vw,2.5rem);letter-spacing:-.035em} .detail__acts{display:flex;flex-wrap:wrap;gap:9px} .dbtn{ border:1px solid var(--graphite);background:var(--graphite);color:var(--chalk); border-radius:999px;padding:12px 24px;font-family:var(--f-mono);font-size:11px; letter-spacing:.14em;text-transform:uppercase;transition:opacity .35s; } .dbtn:hover{opacity:.85} .dbtn--ghost{background:none;color:var(--graphite);border-color:var(--rule)} .dbtn--ghost:hover{border-color:var(--graphite);opacity:1} .detail__ink{display:flex;gap:4px} .detail__ink i{width:100%;height:22px;display:block} .detail__brief{border-top:1px solid var(--rule);padding-top:18px} .detail__brief h4{margin:0 0 10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--grey);font-weight:400} .detail__brief p{margin:0;font-size:13.5px;line-height:1.68;color:var(--ink-2)} .detail__url{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--grey);word-break:break-all;border-top:1px solid var(--rule);padding-top:14px} .mini-frame iframe{width:1200px;height:2600px;border:0;display:block;background:#fff} .mini-frame.is-live iframe{pointer-events:none} .mini-frame.is-live.is-interactive iframe{pointer-events:auto} .mini-shot{width:1200px;height:auto;display:block} @media (max-width:900px){ .detail__in{grid-template-columns:1fr} .detail__side{position:static} .detail__win{aspect-ratio:4/3} } @media (max-width:560px){ .house-sw span{display:none} .house-sw{padding-left:6px} } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1080px){ .hdr__nav{display:none} .hdr{grid-template-columns:1fr auto} .run__in{grid-template-columns:1fr} .run__stage{position:static} .anat__grid{grid-template-columns:1fr} } @media (max-width:860px){ .plates{grid-template-columns:1fr} .plate--a,.plate--b,.plate--c,.plate--d,.plate--e,.plate--f{grid-column:1/-1;margin-top:0} .run__row{grid-template-columns:24px 1fr auto;gap:11px} .run__row__d{display:none} .hero__l2{max-width:100%} } @media (max-width:560px){ .hero__top{grid-template-columns:1fr;gap:8px} .hero__top p:last-child{text-align:left} .hero__plate{position:relative;right:auto;width:78%;margin:0 0 24px auto} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} [data-rv],[data-rv-clip]{opacity:1!important;transform:none!important;clip-path:none!important} .hero__type .ln i{transform:none!important} } /* ============================================================ STOREFRONT PREVIEW PACING Slow gallery-style movement for real full-page captures. ============================================================ */ .plate:hover .mini-scroll, .plate:focus-visible .mini-scroll, .hero__plate:hover .mini-scroll{ transition:transform 18s linear; } .run__win[data-autoplay="on"] .mini-scroll{ transition:transform 40s linear; } .run__bar .t i.run{ transition:width 40s linear; }