/* ==================================================================== settr — Hero v2 · LIGHT THEME OVERRIDES Activated by .hero-light on . Inverts the hero board, the dark nav wrap, the marquee banner, and every nested panel/score/ticker to a light surface while keeping the green signal accent. Last-loaded so later rules win over hero-live.css. ==================================================================== */ /* ---- Board + nav wrap ----------------------------------------------- */ .hero-light .hl-board, .hero-light .hl-nav-wrap, .hero-light .site-nav-wrap--dark{ background: var(--bg); color: var(--fg); } .hero-light .hl-board::before{ background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.05) 1px, transparent 0); } .hero-light .hl-nav-wrap .nav, .hero-light .site-nav-wrap--dark .nav{ border-bottom: 1px solid var(--line); } /* Un-invert the brand mark/wordmark */ .hero-light .hl-nav-wrap .brand-wm, .hero-light .hl-nav-wrap .brand-mark img, .hero-light .site-nav-wrap--dark .brand-wm, .hero-light .site-nav-wrap--dark .brand-mark img{ filter: none; } .hero-light .hl-nav-wrap .brand, .hero-light .site-nav-wrap--dark .brand{ color: var(--fg); } .hero-light .hl-nav-wrap .brand-tag, .hero-light .site-nav-wrap--dark .brand-tag{ color: var(--muted); border-color: var(--line); } .hero-light .hl-nav-wrap .nav-links a, .hero-light .site-nav-wrap--dark .nav-links a{ color: var(--muted); } .hero-light .hl-nav-wrap .nav-links a:hover, .hero-light .hl-nav-wrap .nav-links a[data-active="true"], .hero-light .site-nav-wrap--dark .nav-links a:hover, .hero-light .site-nav-wrap--dark .nav-links a[data-active="true"]{ color: var(--fg); } .hero-light .hl-nav-wrap .nav-login, .hero-light .site-nav-wrap--dark .nav-login{ color: var(--muted); } .hero-light .hl-nav-wrap .nav-login:hover, .hero-light .site-nav-wrap--dark .nav-login:hover{ color: var(--fg); } .hero-light .hl-nav-wrap .nav-cta, .hero-light .site-nav-wrap--dark .nav-cta{ background: var(--fg) !important; background-color: var(--fg) !important; color: var(--bg) !important; border-color: var(--fg) !important; } .hero-light .hl-nav-wrap .nav-cta:hover, .hero-light .site-nav-wrap--dark .nav-cta:hover{ background: transparent; color: var(--fg); border-color: var(--line); } /* ---- Marquee flips BACK to dark when hero is light ------------------- */ .hero-light[data-layout="live"] .marquee{ background: #161614; color: #FAFAF8; border-bottom: 0; } .hero-light[data-layout="live"] .marquee::after{ background: linear-gradient(180deg, rgba(250,250,248,0.06) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.45) 100%); } .hero-light[data-layout="live"] .marquee-fade-l{ background: linear-gradient(to right, #161614 30%, rgba(22,22,20,0)); } .hero-light[data-layout="live"] .marquee-fade-r{ background: linear-gradient(to left, #161614 30%, rgba(22,22,20,0)); } .hero-light[data-layout="live"] .m-v{ color: #FAFAF8; } .hero-light[data-layout="live"] .m-t{ color: rgba(250,250,248,0.55); } .hero-light[data-layout="live"] .m-item::after{ background: rgba(250,250,248,0.14); } /* ---- Stamp strip ----------------------------------------------------- */ .hero-light .hl-stamp{ border-bottom-color: var(--line); color: var(--muted); } .hero-light .hl-stamp .l{ color: var(--fg); } .hero-light .hl-stamp .r{ color: var(--muted); } /* ---- Headline area --------------------------------------------------- */ .hero-light .hl-kicker{ color: var(--muted); } .hero-light .hl-headline, .hero-light .hl-sub strong{ color: var(--fg); } .hero-light .hl-sub{ color: var(--muted); } .hero-light .hl-live-pill{ color: var(--fg); border-color: var(--line); background: rgba(0,0,0,0.02); } .hero-light .hl-cycle-meta{ color: var(--faint); } /* ---- Operator panel chrome ------------------------------------------ */ .hero-light .hl-panel{ background: #fff; border-color: var(--line); } .hero-light .hl-panel-head{ border-bottom-color: var(--line); color: var(--muted); } .hero-light .hl-panel-head .l{ color: var(--fg); } .hero-light .hl-panel-head .l .sq{ background: var(--fg); } .hero-light .hl-panel-head .sep{ color: var(--faint); } /* ---- Stage rail ------------------------------------------------------ */ .hero-light .hl-rail .axis{ background: rgba(0,0,0,0.10); } .hero-light .hl-rail .node .dot{ background: #fff; border-color: rgba(0,0,0,0.22); } .hero-light .hl-rail .node .dot::after{ background: rgba(0,0,0,0.20); } .hero-light .hl-rail .node[data-state="done"] .dot{ border-color: rgba(0,0,0,0.65); } .hero-light .hl-rail .node[data-state="done"] .dot::after{ background: var(--fg); } .hero-light .hl-rail .node .label .name{ color: var(--muted); } .hero-light .hl-rail .node[data-state="done"] .label .name, .hero-light .hl-rail .node[data-state="active"] .label .name{ color: var(--fg); } /* ---- Asset thumb ----------------------------------------------------- */ .hero-light .hl-asset-thumb{ background: #ECEAE4; border-color: var(--line); } .hero-light .hl-asset-thumb video, .hero-light .hl-asset-thumb img{ background: #ECEAE4; } .hero-light .hl-asset-thumb .badge, .hero-light .hl-asset-thumb .dur{ color: var(--fg); background: rgba(255,255,255,0.86); border-color: var(--line); } /* ---- Section labels + score rows + actions -------------------------- */ .hero-light .hl-sec-label{ color: var(--muted); } .hero-light .hl-sec-label strong{ color: var(--fg); } .hero-light .hl-sec-label .seq{ color: var(--faint); } .hero-light .hl-scorerow .v{ color: var(--fg); } .hero-light .hl-scorerow .bar{ background: rgba(0,0,0,0.08); } .hero-light .hl-scorerow .bar i{ background: rgba(0,0,0,0.55); } .hero-light .hl-action{ border-color: var(--line); background: rgba(0,0,0,0.015); } .hero-light .hl-action.live{ background: color-mix(in oklab, var(--state-pos) 8%, transparent); border-color: color-mix(in oklab, var(--state-pos) 35%, var(--line)); } .hero-light .hl-action .ahead .tag{ color: var(--muted); } .hero-light .hl-action.live .ahead .tag{ color: var(--fg); } .hero-light .hl-action .ahead .stat{ color: var(--faint); } .hero-light .hl-action .lead{ color: var(--fg); } /* ---- Feedback cells -------------------------------------------------- */ .hero-light .hl-feedback{ border-color: var(--line); } .hero-light .hl-feedback .cell{ border-right-color: var(--line); } .hero-light .hl-feedback .k{ color: var(--muted); } .hero-light .hl-feedback .v{ color: var(--fg); } /* ---- Summary + next-list -------------------------------------------- */ .hero-light .hl-summary{ border-top-color: var(--line); color: var(--muted); } .hero-light .hl-summary .row .v{ color: var(--fg); } .hero-light .hl-nextlist{ border-top-color: var(--line); } .hero-light .hl-nextlist .nl-head{ color: var(--muted); } .hero-light .hl-nextlist .nl-h-l strong{ color: var(--fg); } .hero-light .hl-nextlist .nl-h-sep{ color: var(--faint); } .hero-light .hl-nextlist .nl-h-cohort{ color: var(--fg); } .hero-light .hl-nextlist:not(.show) .nl-h-r{ color: var(--faint); } .hero-light .hl-nextlist .nl-anchor{ border-color: var(--line); background: rgba(0,0,0,0.02); } .hero-light .nl-anchor .nl-a-tag{ color: var(--muted); border-color: var(--line); } .hero-light .nl-anchor .nl-a-handle{ color: var(--fg); } .hero-light .nl-anchor .nl-a-meta{ color: var(--muted); } .hero-light .hl-nextlist .nl-rows-head{ color: var(--faint); } .hero-light .hl-nextlist .nl-row{ border-bottom-color: rgba(0,0,0,0.06); } .hero-light .nl-row .nl-n{ color: var(--faint); } .hero-light .nl-row .nl-handle{ color: var(--fg); } .hero-light .nl-row .nl-region{ color: var(--muted); } .hero-light .nl-row .nl-bar{ background: rgba(0,0,0,0.08); } .hero-light .nl-row .nl-sim{ color: var(--fg); } .hero-light .nl-row .nl-sim em{ color: var(--muted); } .hero-light .hl-nextlist .nl-foot{ border-top-color: var(--line); color: var(--muted); } .hero-light .hl-nextlist .nl-dot{ background: rgba(0,0,0,0.32); } .hero-light .hl-nextlist .nl-foot-r{ color: var(--fg); } /* ---- Ticker --------------------------------------------------------- */ .hero-light .hl-ticker{ background: rgba(0,0,0,0.02); border-top-color: var(--line); } .hero-light .hl-ticker-track .it{ color: var(--muted); } .hero-light .hl-ticker-track .it::before{ background: rgba(0,0,0,0.32); } .hero-light .hl-ticker-track .it.sig{ color: var(--fg); } /* ---- CTAs ----------------------------------------------------------- */ .hero-light .hl-cta{ border-color: var(--line); color: var(--fg); } .hero-light .hl-cta.primary{ background: var(--fg); color: var(--bg); border-color: var(--fg); } .hero-light .hl-cta-tail{ color: var(--muted); } .hero-light .hl-cta-tail .dot{ background: var(--faint); }