/* BHK V5.0.227 — Timeline typography, readability, title/copy scale, label parity, and text hierarchy ownership. */ /* V5.0.166 — Timeline readability + copy space polish. CSS-only follow-up to V5.0.165 hardware polish. Reduces event title scale toward the 40px brand-title reference, enlarges editorial copy, and lets the details well use the available screen space. */ @media (min-width: 761px) { .bhk-v5-section--timeline .bhk-v5-timelineDeck__screen { grid-template-rows: auto auto auto auto minmax(0, 1fr) !important; align-content: stretch !important; gap: 10px !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__screen h3, .bhk-v5-section--timeline .bhk-v5-timelineDeck__current h3 { max-width: 100% !important; font-size: clamp(30px, 3.15vw, 40px) !important; line-height: .96 !important; letter-spacing: -.045em !important; text-wrap: balance; margin-block: 0 !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__details { align-self: stretch !important; min-height: clamp(178px, 20vw, 238px) !important; height: 100% !important; padding: 15px 16px !important; display: grid !important; align-content: start !important; gap: 10px !important; overflow: auto !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__details p { margin: 0 !important; max-width: 100% !important; font-size: clamp(16px, 1.14vw, 18px) !important; line-height: 1.45 !important; font-weight: 500 !important; letter-spacing: -.012em !important; color: color-mix(in srgb, var(--v5-text) 92%, transparent) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__meta p, .bhk-v5-section--timeline .bhk-v5-timelineDeck__meta article p, .bhk-v5-section--timeline .bhk-v5-timelineDeck__meta > div p { font-size: clamp(11.5px, .82vw, 13px) !important; line-height: 1.34 !important; } } /* V5.0.167 — Timeline full-deck expansion + meta copy size match. CSS-only follow-up to V5.0.165 and V5.0.166. Expands the Playback Deck surface inside the existing 900x900 jacket, keeps title scale controlled, and makes Technology/Impact copy match the readable P/details size. */ @media (min-width: 761px) { .bhk-v5-section--timeline .bhk-v5-timelineDeck { width: 100% !important; height: 100% !important; min-height: 100% !important; padding: clamp(10px, 1.2vw, 16px) !important; gap: 10px !important; grid-template-rows: minmax(0, 1fr) auto !important; align-self: stretch !important; justify-self: stretch !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck::before { inset: 5px !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck::after { background-size: 14px 14px !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__screen { min-height: 0 !important; height: 100% !important; padding: clamp(15px, 1.6vw, 22px) !important; grid-template-rows: auto auto auto auto minmax(0, 1fr) !important; gap: 9px !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__mixer { padding: clamp(10px, 1.1vw, 13px) !important; gap: 9px !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__mixerHead { min-height: 28px !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__cluster { min-height: 92px !important; padding: 8px !important; gap: 7px !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switches { gap: 5px !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switch { min-height: 50px !important; padding: 5px 3px !important; gap: 3px !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__banks { gap: 6px !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__bank { min-height: 31px !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__details { min-height: clamp(190px, 21vw, 255px) !important; height: 100% !important; padding: 14px 15px !important; align-self: stretch !important; overflow: auto !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__details p, .bhk-v5-section--timeline .bhk-v5-timelineDeck__meta p, .bhk-v5-section--timeline .bhk-v5-timelineDeck__meta article p, .bhk-v5-section--timeline .bhk-v5-timelineDeck__meta > div p { font-size: clamp(16px, 1.14vw, 18px) !important; line-height: 1.45 !important; font-weight: 500 !important; letter-spacing: -.012em !important; color: color-mix(in srgb, var(--v5-text) 92%, transparent) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__meta { gap: 9px !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__meta > div, .bhk-v5-section--timeline .bhk-v5-timelineDeck__meta article { padding: 12px 13px !important; min-height: 86px !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__screen h3, .bhk-v5-section--timeline .bhk-v5-timelineDeck__current h3 { font-size: clamp(30px, 3.15vw, 40px) !important; line-height: .96 !important; letter-spacing: -.045em !important; margin-block: 0 !important; } } /* V5.0.218 — Timeline Deck Kicker + Active Title Width Discipline. The Timeline Playback Deck label now uses the shared kicker class, and the active desktop title is narrowed by 30% without changing deck geometry. */ .bhk-v5-timelineDeck__topline .bhk-v5-timelineDeck__kicker { display: block; color: color-mix(in srgb, var(--v5-signal) 92%, var(--v5-proof)); text-shadow: 0 0 18px color-mix(in srgb, var(--v5-accent) 22%, transparent); } @media (min-width: 901px) { .bhk-v5-section--timeline .bhk-v5-timelineDeck__screen > h3[data-bhk-v5-timeline-role="title"] { max-width: 70% !important; justify-self: start; } } /* V5.0.219 — Timeline Deck Kicker Bio Visual Parity. Matches the Timeline Playback Deck kicker to the Bio jacket kicker's live visual treatment: 16px regular text, soft purple text, purple-black badge fill, 3px top signal rule, and no glow. No Timeline deck geometry, JS behavior, rail, colour authority values, mobile player, API surface, section order, or Projects boundary changes are introduced. */ .bhk-v5-section--timeline .bhk-v5-timelineDeck__topline .bhk-v5-kicker.bhk-v5-timelineDeck__kicker { display: inline-block; color: var(--v5-text); background: var(--v5-surface-2); border-top: 3px solid color-mix(in srgb, var(--v5-signal) 40%, var(--v5-line-strong)); box-shadow: none; text-shadow: none; font-size: 16px; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 1; } /* V5.0.347 — Timeline reader hierarchy + kinetic typography-lite. Improves reading confidence without new font files or JS velocity tracking. */ @media (min-width: 761px) { .bhk-v5-section--timeline .bhk-v5-timelineDeck__screen > h3[data-bhk-v5-timeline-role="title"] { color: color-mix(in srgb, var(--v5-proof) 94%, var(--v5-accent)) !important; text-shadow: 0 1px 0 color-mix(in srgb, var(--v5-shadow) 60%, transparent), 0 0 22px color-mix(in srgb, var(--v5-accent) 13%, transparent) !important; font-variation-settings: "wght" 830, "wdth" 94; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__meta > div > span { position: relative !important; display: inline-flex !important; align-items: center !important; gap: 7px !important; width: max-content !important; max-width: 100% !important; padding-inline-start: 10px !important; color: color-mix(in srgb, var(--v5-signal) 68%, var(--v5-proof)) !important; font-weight: 720 !important; letter-spacing: .045em !important; text-shadow: 0 0 16px color-mix(in srgb, var(--v5-signal) 18%, transparent) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__meta > div > span::before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; transform: translateY(-50%); background: color-mix(in srgb, var(--v5-signal) 72%, var(--v5-proof)); box-shadow: 0 0 12px color-mix(in srgb, var(--v5-signal) 42%, transparent); pointer-events: none; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__details p, .bhk-v5-section--timeline .bhk-v5-timelineDeck__meta p, .bhk-v5-section--timeline .bhk-v5-timelineDeck__meta > div p { color: color-mix(in srgb, var(--v5-text) 95%, var(--v5-proof)) !important; text-shadow: 0 1px 0 color-mix(in srgb, var(--v5-shadow) 48%, transparent) !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__details p { max-width: 68ch !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__topline .bhk-v5-kicker.bhk-v5-timelineDeck__kicker { border: 1px solid color-mix(in srgb, var(--v5-accent) 28%, transparent) !important; border-top: 3px solid color-mix(in srgb, var(--v5-signal) 45%, var(--v5-accent)) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 8%, transparent), color-mix(in srgb, var(--v5-shadow) 16%, transparent)), color-mix(in srgb, var(--v5-surface) 90%, #05030a) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 10%, transparent), 0 10px 20px color-mix(in srgb, var(--v5-shadow) 24%, transparent) !important; } } /* V5.0.376 — Timeline cluster readout typography tightening. Keeps the existing Timeline copy and selector messages intact while giving cluster labels rail-grade operator clarity. */ @media (min-width: 761px) { .bhk-v5-section--timeline .bhk-v5-timelineDeck__cluster > header, .bhk-v5-section--timeline .bhk-v5-timelineDeck__selectorMeta em, .bhk-v5-section--timeline .bhk-v5-timelineDeck__selectorMeta b { -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__cluster > header { font-size: 10px !important; font-weight: 820 !important; text-transform: uppercase !important; } .bhk-v5-section--timeline .bhk-v5-timelineDeck__switchLabel, .bhk-v5-section--timeline button.bhk-v5-timelineDeck__bank { font-variant-numeric: tabular-nums; } }