/* 24-desktop-studio.css — Blue Hour DESKTOP STUDIO restyle (match the reference). Restyle (surfaces + TYPOGRAPHY) of the EXISTING >=1024 three-panel session: left rail .tabbar · center #s-session · right #v9SongBrain · top bar #dtTopBar. Append-only. No markup / grid / behavior changes. NO background images — center is a solid petrol gradient + a subtle teal grain (the design-system grain, baked as a low-alpha background layer, not a stretched raster and not a scroll overlay). Maps the build-kit recipe to the real session selectors (.rail-*, .v9-*, .sb-*, .dt-*). Fonts already loaded: Cormorant Garamond, Outfit, DM Mono, Fraunces. Linked LAST in index.html so it wins the cascade. */ @media (min-width: 1024px) { /* ═══ 0 · FOUNDATIONS ═══ */ /* The --dt-* surface ramp is now CANONICAL in 01-tokens.css (Blue Hour spec); this file no longer re-declares it (the old too-dark #040a0c/#060d0f/#0a1315 override was the "24-desktop still wins" drift the migration killed). Only the edge-light treatments stay local. */ :root { --dt-edge: rgba(var(--ivory-rgb),0.13); --dt-edge-top: rgba(var(--ivory-rgb),0.22); --dt-edge-active: rgba(var(--gold-rgb),0.26); } /* Text tokens to the DS roles so meta is readable on petrol (the old #555 'mute' sat ~1.7:1 = invisible). ivory #e7dfc6 · ash #b9b09a · mute #808080. Scoped to the session so Home/Library/Vault are untouched. */ body.session-active { --t1: var(--stz-ivory); /* prose / titles / values */ --t2: var(--stz-ash); /* muted prose / section */ --t3: var(--stz-mute); /* labels */ --t4: var(--stz-mute); /* labels (was #555 'faint') */ background-color: var(--dt-void); /* the void behind the 1px panel gaps */ } /* ═══ 1 · SHELL & PANELS ═══ */ /* Top bar — Tier 3 (raised), flat. Elevation by brightness, not a gradient. */ #dtTopBar, body.session-active #dtTopBar { background: var(--dt-raised); border-bottom: 1px solid var(--stz-hairline); box-shadow: inset 0 1px 0 rgba(var(--ivory-rgb),0.05); } /* Left rail + Song Brain — Tier 2 (surface), flat petrol. Faint grain only (teal DS noise, ~0.012 alpha). No gradient — elevation is the surface tier. */ body.session-active .tabbar, body.session-active #v9SongBrain { background-color: var(--dt-surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.38 0 0 0 0 0.58 0 0 0 0 0.64 0 0 0 0.012 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 180px 180px; box-shadow: inset 0 1px 0 rgba(var(--ivory-rgb),0.06); } body.session-active .tabbar { border-right: 1px solid var(--stz-hairline); } body.session-active #v9SongBrain { border-left: 1px solid var(--stz-hairline); } /* Center — Tier-1 recessed well, flat petrol (var(--dt-well)). The live session wears body.ff-noir, whose #s-session rule (16-freeform-noir.css) WINS by specificity and paints the actual stage; this is the non-ff-noir fallback. Thin cream frame hairlines only — no all-around black vignette (it banded). */ body.session-active #s-session { background-color: var(--dt-well); box-shadow: inset 1px 0 0 rgba(var(--ivory-rgb),0.06), inset -1px 0 0 rgba(var(--ivory-rgb),0.06); } /* ═══ 2 · TOP BAR CONTENTS ═══ */ /* Wordmark "stanzai" — serif italic gold + a glowing gold dot. */ body.session-active #dtTopBar .dt-topbar-mark { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400; font-size: 20px; color: var(--stz-gold-hi); letter-spacing: 0; } body.session-active #dtTopBar .dt-topbar-mark .mark-dot { background: var(--stz-gold); box-shadow: 0 0 12px -2px rgba(var(--gold-rgb),0.7); } /* Breadcrumb + phase pill */ body.session-active #dtTopBar .dt-topbar-label { font-family: 'DM Mono', monospace; color: #808080; } body.session-active #dtTopBar .dt-topbar-label .dt-label-phase { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stz-gold); } /* Icon buttons — cream at rest, ivory on hover */ body.session-active #dtTopBar .dt-icon-btn { color: rgba(var(--ivory-rgb),0.6); } body.session-active #dtTopBar .dt-icon-btn:hover { color: var(--stz-ivory); } /* ═══ 3 · LEFT RAIL ═══ */ /* New-song button — gold edge-light, never a fill. */ body.session-active .rail-new { background: rgba(var(--gold-rgb),0.06); border: 1px solid rgba(var(--gold-rgb),0.26); border-radius: 12px; color: var(--stz-gold-hi); } body.session-active .rail-new .rn-label { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; } /* Search — dark glass, faint placeholder */ body.session-active .rail-search { background: rgba(var(--ivory-rgb),0.030); color: var(--t1); } body.session-active .rail-search::placeholder { color: #555; } body.session-active .rail-vault { background: rgba(var(--ivory-rgb),0.022); } /* Group header ("Today") — mono, cream-readable mute */ body.session-active .rail-group-label { font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: #808080; } /* Song row — title is OUTFIT (sans), not serif; mono meta; readable mute */ body.session-active .rail-item .item-title { font-family: 'Outfit', sans-serif; font-style: normal; font-weight: 400; font-size: 14px; color: var(--stz-ivory); } body.session-active .rail-item .item-sub { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: #808080; } body.session-active .rail-item:hover { background: rgba(var(--ivory-rgb),0.030); } /* Active row — cream wash + a glowing 2px gold left bar; title stays ivory */ body.session-active .rail-item.active { background: rgba(var(--ivory-rgb),0.05); border-left-color: var(--stz-gold); box-shadow: inset 2px 0 0 var(--stz-gold), -1px 0 8px rgba(var(--gold-rgb),0.0); } body.session-active .rail-item.active .item-title { color: var(--stz-ivory); } /* Footer link readability */ body.session-active .rail-footer .link { color: #808080; } /* THE REAL "CHATS" LIST is .v9-sess-row (NOT .rail-item). Chat rows carry an inline style="color:var(--t3)" baked into the markup (index.html ~12418) — an inline style beats any class rule, which is why the title colour never moved. Override it with !important; lift the meta off --t4 (#555 = invisible). Left ungated by .session-active so it lands in every view that shows the list. */ .v9-sess-title { color: var(--stz-ivory) !important; } .v9-sess-meta { color: #9a9486 !important; } /* ═══ 4 · CENTER — CONVERSATION ═══ */ /* Session strip (DNA bar) hairline */ body.session-active #s-session .center-context { border-bottom: 1px solid rgba(var(--ivory-rgb),0.13); } /* AI message — eyebrow + BIG SERIF prose (the headline change: serif, not sans) */ body.session-active .v9-ai-label { display: inline-flex; align-items: center; gap: 8px; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(216,182,118,0.6); margin-bottom: 10px; } body.session-active .v9-ai-label::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--stz-gold); box-shadow: 0 0 8px rgba(var(--gold-rgb),0.55); } body.session-active .v9-ai { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-style: normal; font-size: 20px; line-height: 1.6; color: var(--stz-ivory); max-width: 600px; } /* User bubble — teal-glass, serif, asymmetric radius */ body.session-active .v9-user { max-width: 460px; padding: 12px 18px; font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 18px; line-height: 1.5; color: var(--stz-ivory); background: linear-gradient(180deg, rgba(30,48,48,0.46) 0%, rgba(8, 17, 18,0.62) 40%, rgba(5, 11, 12,0.66) 70%, rgba(14, 25, 26,0.50) 100%); border: 1px solid rgba(var(--teal-rgb),0.24); border-top-color: rgba(186,228,216,0.34); border-radius: 18px 18px 4px 18px; box-shadow: inset 0 1px 0 rgba(190,230,220,0.10), 0 10px 26px -10px rgba(0,0,0,0.55); } /* "Stanzai's pick" artifact (.v9-concept / .rec) — gold frame all around + halo */ body.session-active .v9-concept, body.session-active .v9-concept.rec { background: linear-gradient(180deg, rgba(236,231,218,0.06) 0%, rgba(236,231,218,0.018) 8%, transparent 17%), linear-gradient(180deg, rgba(2, 12, 14,0.92), rgba(1, 6, 8,0.96)); border: 1px solid rgba(var(--gold-rgb),0.42); border-top-color: rgba(236,200,120,0.55); border-radius: 16px; padding: 22px 24px; box-shadow: inset 0 1px 0 rgba(236,200,120,0.12), inset 0 14px 28px -14px rgba(236,231,218,0.05), 0 6px 16px rgba(0,0,0,0.45), 0 28px 56px -16px rgba(0,0,0,0.80), 0 0 26px rgba(var(--gold-rgb),0.10); } body.session-active .v9-concept-num { display: inline-flex; align-items: center; gap: 8px; font-family: 'DM Mono', monospace; text-transform: uppercase; color: var(--stz-gold); } body.session-active .v9-concept-num::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--stz-gold); box-shadow: 0 0 8px rgba(var(--gold-rgb),0.55); } body.session-active .v9-concept-title { font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--stz-ivory); } /* Suggestion chips — frosted glass pills; .glow is the gold primary */ body.session-active .v9-chip { background: linear-gradient(180deg, rgba(24, 31, 33,0.55), rgba(6, 10, 12,0.78) 45%, rgba(10, 16, 18,0.62)); border: 1px solid rgba(var(--ivory-rgb),0.13); border-radius: 999px; color: rgba(var(--ivory-rgb),0.78); font-family: 'Outfit', sans-serif; font-weight: 300; font-size: 13px; padding: 7px 14px; } /* Primary gold chip ("Show me directions" etc.) reads like the final-lyrics Save/Create CTA (.fl-cta-primary) — editorial gold, NOT a utilitarian mono-uppercase label (the CTA's own CSS notes that register on purpose). Founder 2026-06-17: match it to the save button + drop the all-caps. */ body.session-active .v9-chip.glow { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 400; font-size: 17px; letter-spacing: 0.005em; text-transform: none; color: var(--stz-gold-hi); padding: 8px 18px; background: rgba(var(--gold-rgb),0.04); border-color: rgba(var(--gold-rgb),0.55); box-shadow: 0 0 12px rgba(var(--gold-rgb),0.10); } /* Composer — serif input + gold send circle */ body.session-active .v9-input { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 18px; background: linear-gradient(180deg, rgba(18, 26, 28,0.55), rgba(5, 10, 11,0.82)); border: 1px solid rgba(var(--ivory-rgb),0.13); color: var(--stz-ivory); } body.session-active .v9-input::placeholder { color: #555; } body.session-active .v9-send { width: 46px; height: 46px; border-radius: 999px; border: 1px solid rgba(var(--gold-rgb),0.5); color: var(--stz-gold-hi); background: linear-gradient(180deg, rgba(24, 31, 33,0.55), rgba(6, 10, 12,0.78) 45%, rgba(10, 16, 18,0.62)); box-shadow: 0 0 16px -2px rgba(var(--gold-rgb),0.30); } /* ═══ 5 · SONG BRAIN ═══ */ body.session-active #v9SongBrain .sb-title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400; font-size: 22px; color: var(--stz-ivory); } body.session-active #v9SongBrain .sb-subtitle { font-family: 'DM Mono', monospace; color: #808080; } /* Phase timeline nodes — done sage · active gold halo · todo hollow cream */ body.session-active .sb-phase-dot.done { background: var(--sage); box-shadow: none; } body.session-active .sb-phase-dot.seeded { background: transparent; border: 1.5px solid rgba(var(--ivory-rgb),0.16); } body.session-active .sb-phase-dot.pending { background: transparent; border: 1.5px solid rgba(var(--ivory-rgb),0.16); } body.session-active .sb-phase-dot.active { background: var(--stz-gold); box-shadow: 0 0 0 4px rgba(var(--gold-rgb),0.12), 0 0 16px -2px rgba(var(--gold-rgb),0.5); } body.session-active .sb-phase-label { font-family: 'Outfit', sans-serif; font-size: 14.5px; font-weight: 500; color: #808080; } body.session-active .sb-phase-label.active { color: var(--stz-ivory); } /* Song DNA — mono key · serif italic value */ body.session-active .sb-field-key { font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: #808080; } body.session-active .sb-field-val { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: 15px; color: var(--stz-ivory); } } /* prefers-reduced-transparency: collapse glass to solid Blue-Hour ink. */ @media (min-width: 1024px) and (prefers-reduced-transparency: reduce) { body.session-active .tabbar, body.session-active #s-session, body.session-active #v9SongBrain { background: #0a161a; } }