/* BHK V5.0.227 — Timeline shell, colour tokens, section geometry, stage surfaces, and base Timeline frame ownership. */ /* BHK V5.0.118 — Timeline Playback Deck squared outer shell + rounded inner console + pink/purple CONSOLE authority. V5-native interpretation of the V4 Timeline Deck. Jacket-only. Rail remains global authority. */ .bhk-v5-section--timeline { --bhk-v5-timeline-radius-shell: 0px; --bhk-v5-timeline-radius-inner: var(--v5-public-inner-radius, 12px); --bhk-v5-timeline-radius-control: var(--v5-public-control-radius, 8px); --bhk-v5-timeline-page: #050505; --bhk-v5-timeline-surface: #0b0d0f; --bhk-v5-timeline-surface-2: #141619; --bhk-v5-timeline-surface-3: #202329; --bhk-v5-timeline-text: #f4f5f2; --bhk-v5-timeline-muted: #a8aca8; --bhk-v5-timeline-proof: #ffffff; --bhk-v5-timeline-line: rgba(143,100,255,.30); --bhk-v5-timeline-line-strong: rgba(255,47,213,.56); --bhk-v5-timeline-signal: #ff2fd5; --bhk-v5-timeline-accent: #8f64ff; --bhk-v5-timeline-shadow: rgba(0,0,0,.72); --bhk-v5-timeline-screen: color-mix(in srgb, var(--bhk-v5-timeline-surface) 90%, transparent); --bhk-v5-timeline-panel: color-mix(in srgb, var(--bhk-v5-timeline-surface-2) 86%, transparent); --bhk-v5-timeline-panel-strong: color-mix(in srgb, var(--bhk-v5-timeline-surface-3) 88%, transparent); --bhk-v5-timeline-line-soft: color-mix(in srgb, var(--bhk-v5-timeline-line) 82%, transparent); } .bhk-v5-section--timeline [data-bhk-v5-timeline-colour-mode] { --v5-page: var(--bhk-v5-timeline-page); --v5-surface: var(--bhk-v5-timeline-surface); --v5-surface-2: var(--bhk-v5-timeline-surface-2); --v5-surface-3: var(--bhk-v5-timeline-surface-3); --v5-text: var(--bhk-v5-timeline-text); --v5-muted: var(--bhk-v5-timeline-muted); --v5-line: var(--bhk-v5-timeline-line); --v5-line-strong: var(--bhk-v5-timeline-line-strong); --v5-signal: var(--bhk-v5-timeline-signal); --v5-accent: var(--bhk-v5-timeline-accent); --v5-proof: var(--bhk-v5-timeline-proof); --v5-shadow: var(--bhk-v5-timeline-shadow); } .bhk-v5-section--timeline [data-bhk-v5-timeline-colour-mode="afterhours"] { --bhk-v5-timeline-page: #05030a; --bhk-v5-timeline-surface: #100719; --bhk-v5-timeline-surface-2: #170b25; --bhk-v5-timeline-surface-3: #211030; --bhk-v5-timeline-text: #f8f2ff; --bhk-v5-timeline-muted: #b5a5c4; --bhk-v5-timeline-proof: #ffffff; --bhk-v5-timeline-line: rgba(143,100,255,.36); --bhk-v5-timeline-line-strong: rgba(218,200,255,.62); --bhk-v5-timeline-signal: #ff2fd5; --bhk-v5-timeline-accent: #8f64ff; --bhk-v5-timeline-shadow: rgba(0,0,0,.66); } .bhk-v5-section--timeline [data-bhk-v5-timeline-colour-mode="day"] { --bhk-v5-timeline-page: #f4f0df; --bhk-v5-timeline-surface: #eee4c8; --bhk-v5-timeline-surface-2: #ded2ad; --bhk-v5-timeline-surface-3: #cdbb8b; --bhk-v5-timeline-text: #19160f; --bhk-v5-timeline-muted: #685d49; --bhk-v5-timeline-proof: #000000; --bhk-v5-timeline-line: rgba(46,39,27,.24); --bhk-v5-timeline-line-strong: rgba(46,39,27,.56); --bhk-v5-timeline-signal: #9c251f; --bhk-v5-timeline-accent: #4f3b22; --bhk-v5-timeline-shadow: rgba(76,57,22,.24); } .bhk-v5-section--timeline [data-bhk-v5-timeline-colour-mode="fashion"] { --bhk-v5-timeline-page: #030303; --bhk-v5-timeline-surface: #0d0d0f; --bhk-v5-timeline-surface-2: #17171a; --bhk-v5-timeline-surface-3: #242428; --bhk-v5-timeline-text: #f7f7f7; --bhk-v5-timeline-muted: #a9a9ad; --bhk-v5-timeline-proof: #ffffff; --bhk-v5-timeline-line: rgba(255,255,255,.20); --bhk-v5-timeline-line-strong: rgba(255,255,255,.62); --bhk-v5-timeline-signal: #ffffff; --bhk-v5-timeline-accent: #bfc1c6; --bhk-v5-timeline-shadow: rgba(0,0,0,.72); } .bhk-v5-section--timeline [data-bhk-v5-timeline-colour-mode="pride"] { --bhk-v5-timeline-page: #07070d; --bhk-v5-timeline-surface: #11111b; --bhk-v5-timeline-surface-2: #1a1630; --bhk-v5-timeline-surface-3: #221944; --bhk-v5-timeline-text: #ffffff; --bhk-v5-timeline-muted: #d5cff1; --bhk-v5-timeline-proof: #ffffff; --bhk-v5-timeline-line: rgba(255,47,213,.30); --bhk-v5-timeline-line-strong: rgba(143,100,255,.62); --bhk-v5-timeline-signal: #ff2fd5; --bhk-v5-timeline-accent: #8f64ff; --bhk-v5-timeline-shadow: rgba(0,0,0,.60); } .bhk-v5-section--timeline [data-bhk-v5-timeline-colour-mode="white"] { --bhk-v5-timeline-page: #ffffff; --bhk-v5-timeline-surface: #ffffff; --bhk-v5-timeline-surface-2: #f7f7f7; --bhk-v5-timeline-surface-3: #efefef; --bhk-v5-timeline-text: #111111; --bhk-v5-timeline-muted: #595959; --bhk-v5-timeline-proof: #000000; --bhk-v5-timeline-line: rgba(0,0,0,.18); --bhk-v5-timeline-line-strong: rgba(0,0,0,.48); --bhk-v5-timeline-signal: #111111; --bhk-v5-timeline-accent: #4f4f4f; --bhk-v5-timeline-shadow: rgba(0,0,0,.18); } .bhk-v5-section--timeline [data-bhk-v5-timeline-colour-mode="console"] { --bhk-v5-timeline-page: #050505; --bhk-v5-timeline-surface: #090a0b; --bhk-v5-timeline-surface-2: #121416; --bhk-v5-timeline-surface-3: #1d2024; --bhk-v5-timeline-text: #f4f5f2; --bhk-v5-timeline-muted: #a8aca8; --bhk-v5-timeline-proof: #ffffff; --bhk-v5-timeline-line: rgba(143,100,255,.32); --bhk-v5-timeline-line-strong: rgba(255,47,213,.58); --bhk-v5-timeline-signal: #ff2fd5; --bhk-v5-timeline-accent: #8f64ff; --bhk-v5-timeline-shadow: rgba(0,0,0,.78); } .bhk-v5-section--timeline .bhk-v5-section__seo { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; } .bhk-v5-timelineDeckAlbum { position: relative; overflow: visible; } .bhk-v5-timelineDeckCover { padding: 0 !important; align-content: stretch !important; overflow: hidden; color: var(--v5-text); background: radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--v5-signal) 16%, transparent), transparent 32rem), radial-gradient(circle at 82% 10%, color-mix(in srgb, var(--v5-accent) 14%, transparent), transparent 30rem), linear-gradient(180deg, color-mix(in srgb, var(--v5-surface-3) 82%, transparent), var(--v5-surface)); } .bhk-v5-timelineDeckCover, .bhk-v5-timelineDeckCover * { box-sizing: border-box; } .bhk-v5-timelineDeckAlbum { border-radius: var(--bhk-v5-timeline-radius-shell); } .bhk-v5-timelineDeckAlbum::after, .bhk-v5-timelineDeck::before { border-radius: max(0px, calc(var(--bhk-v5-timeline-radius-shell) - 10px)); } .bhk-v5-timelineDeckCover { border-radius: var(--bhk-v5-timeline-radius-inner); } .bhk-v5-timelineDeck { position: relative; z-index: 2; width: 100%; height: 100%; min-height: 100%; padding: clamp(18px, 2.2vw, 30px); display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; color: var(--v5-text); isolation: isolate; } .bhk-v5-timelineDeck::before, .bhk-v5-timelineDeck::after { content: ""; position: absolute; pointer-events: none; } .bhk-v5-timelineDeck::before { inset: 10px; z-index: 0; border: 1px solid color-mix(in srgb, var(--v5-line-strong) 22%, transparent); } .bhk-v5-timelineDeck::after { inset: 0; z-index: 0; opacity: .055; background-image: linear-gradient(color-mix(in srgb, var(--v5-proof) 46%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--v5-proof) 30%, transparent) 1px, transparent 1px); background-size: 18px 18px; mix-blend-mode: screen; } .bhk-v5-timelineDeck__screen, .bhk-v5-timelineDeck__mixer { position: relative; z-index: 2; border: 1px solid var(--bhk-v5-timeline-line-soft); border-radius: var(--bhk-v5-timeline-radius-inner); overflow: hidden; background: var(--bhk-v5-timeline-screen); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v5-proof) 4%, transparent), 0 20px 44px color-mix(in srgb, var(--v5-shadow) 72%, transparent); } .bhk-v5-timelineDeck__screen { min-height: 0; padding: clamp(16px, 2vw, 24px); display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); gap: 12px; overflow: hidden; } .bhk-v5-timelineDeck__topline, .bhk-v5-timelineDeck__mixerHead, .bhk-v5-timelineDeck__banks { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .bhk-v5-timelineDeck__topline .bhk-v5-kicker, .bhk-v5-timelineDeck__mixerHead strong { color: var(--v5-proof); font-size: 12px; line-height: 1; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; } .bhk-v5-timelineDeck__power { appearance: none; border-radius: var(--bhk-v5-timeline-radius-control); min-height: 34px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid color-mix(in srgb, var(--v5-line-strong) 32%, transparent); background: color-mix(in srgb, var(--v5-proof) 5%, transparent); color: color-mix(in srgb, var(--v5-text) 82%, transparent); font-size: 10px; line-height: 1; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; } .bhk-v5-timelineDeck__power span { width: 10px; border-radius: 50%; height: 10px; display: inline-block; border: 1px solid currentColor; background: color-mix(in srgb, var(--v5-proof) 8%, transparent); } .bhk-v5-timelineDeck.is-powered .bhk-v5-timelineDeck__power { color: var(--v5-proof); border-color: color-mix(in srgb, var(--v5-signal) 58%, transparent); } .bhk-v5-timelineDeck.is-powered .bhk-v5-timelineDeck__power span { background: var(--v5-signal); box-shadow: 0 0 18px color-mix(in srgb, var(--v5-signal) 55%, transparent); } .bhk-v5-timelineDeck.is-standby .bhk-v5-timelineDeck__screen, .bhk-v5-timelineDeck.is-standby .bhk-v5-timelineDeck__mixer { opacity: .62; } .bhk-v5-timelineDeck__selectorMeta em, .bhk-v5-timelineDeck__cluster header { font-size: 10px; line-height: 1; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; font-style: normal; } .bhk-v5-timelineDeck__selectorMeta em, .bhk-v5-timelineDeck__cluster header { color: color-mix(in srgb, var(--v5-text) 64%, transparent); } .bhk-v5-timelineDeck__screen h3 { margin: 0; max-width: 820px; color: var(--v5-proof); font-size: clamp(34px, 4.75vw, 58px); line-height: .92; font-weight: 900; letter-spacing: -.035em; text-transform: uppercase; } .bhk-v5-timelineDeck__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .bhk-v5-timelineDeck__meta > div, .bhk-v5-timelineDeck__details { border: 1px solid color-mix(in srgb, var(--v5-line-strong) 14%, transparent); border-radius: var(--bhk-v5-timeline-radius-control); background: color-mix(in srgb, var(--v5-proof) 4%, transparent); padding: 12px; } .bhk-v5-timelineDeck__meta span { display: block; margin: 0 0 7px; color: var(--v5-accent); font-size: 10px; line-height: 1; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; } .bhk-v5-timelineDeck__meta p, .bhk-v5-timelineDeck__details p { margin: 0; color: color-mix(in srgb, var(--v5-text) 82%, transparent); font-size: 13px; line-height: 1.45; } .bhk-v5-timelineDeck__details { min-height: 0; display: grid; gap: 8px; overflow: auto; scrollbar-width: thin; } .bhk-v5-timelineDeck__mixer { padding: 13px; display: grid; gap: 12px; } .bhk-v5-timelineDeck__selectorMeta { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; text-align: right; } .bhk-v5-timelineDeck__selectorMeta.is-previewing em:first-child { color: var(--v5-signal); } .bhk-v5-timelineDeck__controller { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .bhk-v5-timelineDeck__cluster { min-width: 0; border-radius: var(--bhk-v5-timeline-radius-inner); min-height: 104px; padding: 10px; display: grid; gap: 10px; border: 1px solid color-mix(in srgb, var(--v5-line-strong) 15%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 5%, transparent), color-mix(in srgb, var(--v5-proof) 1%, transparent)), var(--bhk-v5-timeline-panel); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 8%, transparent), inset 0 -12px 24px color-mix(in srgb, var(--v5-shadow) 24%, transparent); } .bhk-v5-timelineDeck__switches { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 7px; } .bhk-v5-timelineDeck__switch, .bhk-v5-timelineDeck__bank { appearance: none; border: 1px solid color-mix(in srgb, var(--v5-line-strong) 18%, transparent); border-radius: var(--bhk-v5-timeline-radius-control); background: linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 7%, transparent), color-mix(in srgb, var(--v5-proof) 2%, transparent)), color-mix(in srgb, var(--v5-surface) 84%, transparent); color: color-mix(in srgb, var(--v5-text) 68%, transparent); cursor: pointer; } .bhk-v5-timelineDeck__switch { min-width: 0; min-height: 60px; padding: 6px 4px; display: grid; justify-items: center; align-content: center; gap: 5px; } .bhk-v5-timelineDeck__switchBody { width: 12px; border-radius: 6px; height: 26px; padding: 2px; display: flex; align-items: flex-end; justify-content: center; border: 1px solid color-mix(in srgb, var(--v5-line-strong) 26%, transparent); background: color-mix(in srgb, var(--v5-proof) 5%, transparent); } .bhk-v5-timelineDeck__switchBody span { display: block; border-radius: 4px; width: 100%; height: 48%; background: color-mix(in srgb, var(--v5-text) 42%, transparent); } .bhk-v5-timelineDeck__switch strong { font-size: 9px; line-height: 1; font-weight: 900; letter-spacing: .08em; } .bhk-v5-timelineDeck__switch:hover, .bhk-v5-timelineDeck__switch:focus-visible, .bhk-v5-timelineDeck__bank:hover, .bhk-v5-timelineDeck__bank:focus-visible { border-color: color-mix(in srgb, var(--v5-signal) 58%, transparent); color: var(--v5-proof); outline: none; } .bhk-v5-timelineDeck__switch.is-active, .bhk-v5-timelineDeck__bank.is-active { border-color: color-mix(in srgb, var(--v5-signal) 74%, transparent); background: color-mix(in srgb, var(--v5-signal) 13%, var(--v5-surface)); color: var(--v5-proof); } .bhk-v5-timelineDeck__switch.is-active .bhk-v5-timelineDeck__switchBody span { height: 86%; background: var(--v5-signal); box-shadow: 0 0 16px color-mix(in srgb, var(--v5-signal) 55%, transparent); } .bhk-v5-timelineDeck__switch.is-disabled, .bhk-v5-timelineDeck__bank.is-disabled, .bhk-v5-timelineDeck__switch:disabled, .bhk-v5-timelineDeck__bank:disabled { opacity: .34; cursor: default; } .bhk-v5-timelineDeck__banks { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; } .bhk-v5-timelineDeck__bank { min-height: 38px; padding: 0 8px; font-size: 10px; line-height: 1; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; } /* V5.0.347 — Timeline Deck 95-B Premium Operator Console Pass. CSS-first console image/readability pass. Preserves Timeline Jacket geometry, renderer, JS runtime, rail, mobile player, API surface, data lanes, and colour-authority JSON. */ @media (min-width: 761px) { .bhk-v5-section--timeline .bhk-v5-timelineDeck { --bhk-v5-timeline-347-edge: color-mix(in srgb, var(--v5-signal) 42%, var(--v5-accent)); --bhk-v5-timeline-347-glass: color-mix(in srgb, var(--v5-proof) 8%, transparent); --bhk-v5-timeline-347-glass-strong: color-mix(in srgb, var(--v5-proof) 15%, transparent); --bhk-v5-timeline-347-shadow: color-mix(in srgb, var(--v5-shadow) 78%, transparent); --bhk-v5-timeline-347-reader: color-mix(in srgb, var(--v5-surface) 86%, #050307); --bhk-v5-timeline-347-led: color-mix(in srgb, var(--v5-signal) 76%, var(--v5-proof)); } .bhk-v5-section--timeline .bhk-v5-timelineDeck__screen, .bhk-v5-section--timeline .bhk-v5-timelineDeck__mixer { isolation: isolate; border-color: color-mix(in srgb, var(--bhk-v5-timeline-347-edge) 44%, transparent) !important; background: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--v5-signal) 16%, transparent), transparent 19rem), radial-gradient(circle at 88% 7%, color-mix(in srgb, var(--v5-accent) 18%, transparent), transparent 20rem), linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 6%, transparent), transparent 31%), var(--bhk-v5-timeline-347-reader) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v5-proof) 9%, transparent), inset 0 0 0 8px color-mix(in srgb, var(--v5-shadow) 33%, transparent), inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 14%, transparent), 0 23px 54px var(--bhk-v5-timeline-347-shadow), 0 0 38px color-mix(in srgb, var(--v5-accent) 10%, transparent) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__screen::before, .bhk-v5-section--timeline .bhk-v5-timelineDeck__screen::after, .bhk-v5-section--timeline .bhk-v5-timelineDeck__mixer::before, .bhk-v5-section--timeline .bhk-v5-timelineDeck__mixer::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__screen::before, .bhk-v5-section--timeline .bhk-v5-timelineDeck__mixer::before { opacity: .42; background-image: linear-gradient(90deg, color-mix(in srgb, var(--v5-proof) 7%, transparent) 1px, transparent 1px), linear-gradient(color-mix(in srgb, var(--v5-proof) 5%, transparent) 1px, transparent 1px); background-size: 36px 36px, 36px 36px; mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); } .bhk-v5-section--timeline .bhk-v5-timelineDeck__screen::after, .bhk-v5-section--timeline .bhk-v5-timelineDeck__mixer::after { opacity: .72; background: linear-gradient(110deg, transparent 0%, color-mix(in srgb, var(--v5-proof) 12%, transparent) 18%, transparent 39%), repeating-linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 4%, transparent) 0 1px, transparent 1px 5px); mix-blend-mode: screen; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__screen > *, .bhk-v5-section--timeline .bhk-v5-timelineDeck__mixer > * { position: relative; z-index: 2; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__meta > div, .bhk-v5-section--timeline .bhk-v5-timelineDeck__details { position: relative; isolation: isolate; overflow: hidden; border-color: color-mix(in srgb, var(--bhk-v5-timeline-347-edge) 30%, transparent) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 7%, transparent), color-mix(in srgb, var(--v5-proof) 2%, transparent)), color-mix(in srgb, var(--v5-surface) 76%, #06040a) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v5-proof) 7%, transparent), inset 0 -18px 34px color-mix(in srgb, var(--v5-shadow) 34%, transparent), 0 12px 28px color-mix(in srgb, var(--v5-shadow) 32%, transparent) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__meta > div::before, .bhk-v5-section--timeline .bhk-v5-timelineDeck__details::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55; background: linear-gradient(90deg, color-mix(in srgb, var(--bhk-v5-timeline-347-led) 52%, transparent) 0 3px, transparent 3px), radial-gradient(circle at 92% 14%, color-mix(in srgb, var(--v5-accent) 14%, transparent), transparent 9rem); } .bhk-v5-section--timeline .bhk-v5-timelineDeck__meta > div > *, .bhk-v5-section--timeline .bhk-v5-timelineDeck__details > * { position: relative; z-index: 2; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__mixer { background: linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 6%, transparent), color-mix(in srgb, var(--v5-shadow) 18%, transparent)), radial-gradient(circle at 50% 0, color-mix(in srgb, var(--v5-signal) 13%, transparent), transparent 18rem), color-mix(in srgb, var(--v5-surface) 90%, #020204) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__messageRail { position: relative; z-index: 3; padding: 4px; border: 1px solid color-mix(in srgb, var(--bhk-v5-timeline-347-edge) 24%, transparent); background: color-mix(in srgb, var(--v5-shadow) 34%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 10%, transparent), inset 0 -10px 20px color-mix(in srgb, var(--v5-shadow) 28%, transparent); } }