/* ========================================================================== marketing.css - LiveCast Systems / BreakCast OS marketing foundation F1-foundation lane, W1 overnight push 2026-07-02. Design Read: B2B creator-tools marketing site for sports-card breakers (Streamlabs-grade), dark broadcast-hardware neon-chrome language, native CSS tokens + system font stacks tonight (deploy-time font decision pending). Dials (RULED, metaprompt W1a): VARIANCE 7 / MOTION 7 / DENSITY 5. BRAND OVERRIDE (pinned): dark broadcast-hardware neon-chrome. Glow and backlight are brand fidelity here; the taste skill's default neon caution is overridden by its own brief-first rule (SKILL.md Sections 0/4.2). Locks (taste skill pre-flight): - Theme lock: dark only, every section. No light sections. - Accent lock: ONE page accent, --accent (backlit teal). Board embeds are product content and carry their own kit theme colors; that is the product on camera, not a second page accent. - Shape lock (documented rule): panels/cards 16px, buttons/inputs 10px, media/asset slots 16px. The embedded board keeps the kit's own 18px frame. - No pure #000 / #fff anywhere. No em-dash characters in this file. ========================================================================== */ /* ---- 1. Tokens ---------------------------------------------------------- */ :root { /* base palette: machined near-blacks, chrome steel text ramp */ --bg-0: #07090c; /* page base */ --bg-1: #0a0c10; /* section alt (matches kit board environment) */ --surface: #10141a; /* raised panel */ --surface-2: #161b23; /* higher panel / dropdown */ --line: rgba(159, 179, 200, 0.16); /* hairline on dark */ --line-strong: rgba(159, 179, 200, 0.30); --text: #e8ecf1; /* chrome white */ --text-muted: #9fb3c8; /* chrome steel */ --text-faint: #74849b; /* metadata; AA-safe for small text on bg-0/bg-1/surface (contrast table in CONVENTIONS.md) */ /* accent system: ONE accent. Neon brand-mint (matches the logo mark). This is the shared source of truth; every page mirrors these five values inline. */ --accent: #72ef5f; --accent-strong: #9ef58f; /* hover / high-emphasis text on dark */ --accent-ink: #06220c; /* text ON accent surfaces */ --accent-glow: rgba(114, 239, 95, 0.35); --accent-dim: rgba(114, 239, 95, 0.12); /* board semantics (reserved for the embed + explicit sold/hit UI copy) */ --sold-red: #ff4d2e; --cash-green: #39e07a; /* type: system stacks TONIGHT. Deploy-time font decision pending operator: {{DEPLOY_FONT_DECISION}} (candidates per taste skill 4.1: Geist, Space Grotesk, Cabinet Grotesk; NOT Inter-by-default). */ --font-sans: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace; /* type scale (fluid) */ --fs-display: clamp(2.5rem, 1.4rem + 4.2vw, 4.25rem); --fs-h1: clamp(2.1rem, 1.3rem + 2.8vw, 3.25rem); --fs-h2: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); --fs-h3: 1.3rem; --fs-lead: 1.185rem; --fs-body: 1rem; --fs-small: 0.875rem; --fs-micro: 0.75rem; /* spacing scale (DENSITY 5: working spacing, not art-gallery) */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-section: clamp(3.5rem, 2rem + 5vw, 6rem); /* shape lock */ --r-panel: 16px; --r-control: 10px; /* z scale (documented; do not freelance z-index values) */ --z-nav: 100; --z-dropdown: 110; --z-modal: 200; /* motion (MOTION 7): fluid CSS, spring-flavored curve */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --t-fast: 160ms; --t-med: 320ms; --t-slow: 640ms; color-scheme: dark; } /* ---- 2. Base ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg-0); padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); /* GLOBAL INVARIANT (item 6): notch/rounded-corner safe area on the body edges; a no-op (all env() -> 0) on every non-notched device */ color: var(--text); font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--accent); color: var(--accent-ink); } img, video { max-width: 100%; display: block; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-strong); } /* A11Y FIX (WCAG 1.4.1 link-in-text-block, axe-baseline.json, 90 nodes): links inside running prose must not rely on color alone to be distinguishable from surrounding text. Scoped to
(and to .crumbs specifically) so nav / button / footer links -- which use the same --accent teal by design -- are visually unchanged; :not(.btn) excludes CTA buttons that happen to sit inside a

for layout (e.g. the "Get your board" button on feature-obs.html / how-it-works.html). */ main :where(p, li, .crumbs) a:not(.btn) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } main :where(p, li, .crumbs) a:not(.btn):hover { text-decoration-thickness: 2px; } /* A11Y FIX FOLLOW-UP: the

wrap above (banner landmark) shrink-wraps to exactly .nav's height, which leaves position:sticky no room within its containing block -- the nav scrolled away instead of staying pinned (caught by a manual sticky-scroll regression check, not by axe). display:contents removes the wrapper's own box from layout (.nav-inner lays out as if it were a direct child of , restoring the original sticky/backdrop behavior byte-for-byte) while Chromium's accessibility tree still exposes
as role=banner (verified via CDP Accessibility.getFullAXTree: banner count stays 1). Scoped to body > header so it never touches the OTHER, unrelated
elements this site already has nested inside
(page-head / docs-head / hero-gallery). */ body > header { display: contents; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--sp-4); top: -48px; background: var(--surface-2); color: var(--text); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-control); z-index: var(--z-modal); transition: top var(--t-fast) var(--ease-out); } .skip-link:focus { top: var(--sp-2); } /* ---- 3. Layout ----------------------------------------------------------- */ .container { max-width: 1200px; margin-inline: auto; padding-inline: var(--sp-5); } .container-wide { max-width: 1400px; margin-inline: auto; padding-inline: var(--sp-5); } .section { padding-block: var(--sp-section); } .section-alt { background: var(--bg-1); } /* asymmetric split (VARIANCE 7 default hero family; collapses < 768px) */ .split { display: grid; gap: var(--sp-7); align-items: center; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .split-reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } /* Hero dead-space fix (Polish iter 1): top-align the hero grid so the shorter text column does not float below its taller media/panel sibling. Hero-scoped ONLY; the mid-page .split / .split-reverse feature rows keep align-items:center (intentional). */ .hero .split, .hero-section .split, .hero .hero-grid { align-items: start; } .grid-2 { display: grid; gap: var(--sp-6); grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { display: grid; gap: var(--sp-6); grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 767px) { .split, .split-reverse, .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } .container, .container-wide { padding-inline: var(--sp-4); } } .hr { border: 0; border-top: 1px solid var(--line); margin-block: var(--sp-6); } /* ---- 4. Type ------------------------------------------------------------- */ .display, h1, h2, h3 { margin: 0 0 var(--sp-4); font-weight: 800; letter-spacing: -0.02em; } .display { font-size: var(--fs-display); line-height: 1.02; } h1 { font-size: var(--fs-h1); line-height: 1.06; } h2 { font-size: var(--fs-h2); line-height: 1.12; } h3 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 700; } p { margin: 0 0 var(--sp-4); max-width: 65ch; } .lead { font-size: var(--fs-lead); color: var(--text-muted); } .muted { color: var(--text-muted); } .mono { font-family: var(--font-mono); } /* Eyebrow: taste-skill restraint rule applies MECHANICALLY: max 1 eyebrow per 3 sections per page; hero counts as one. */ .eyebrow { display: inline-block; margin-bottom: var(--sp-3); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } .accent-text { color: var(--accent); } /* stat: numbers are mono per DENSITY discipline; only REAL or clearly-mock data */ .stat-value { font-family: var(--font-mono); font-size: var(--fs-h2); font-weight: 700; color: var(--text); } .stat-label { font-size: var(--fs-small); color: var(--text-muted); } /* ---- 5. Buttons ---------------------------------------------------------- Contrast (computed, WCAG21 formula, see CONVENTIONS.md): accent #4fe3c1 on ink #052019 = 11.9:1; text #e8ecf1 on surface #10141a = 14.8:1. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 0.72rem 1.4rem; border-radius: var(--r-control); border: 1px solid transparent; font: 700 var(--fs-body) / 1.2 var(--font-sans); white-space: nowrap; /* CTA wrap ban: labels stay one line */ cursor: pointer; user-select: none; transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-med) var(--ease-out), background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); } .btn:active { transform: translateY(1px) scale(0.985); } .btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 6px 22px -8px var(--accent-glow); } .btn-primary:hover { background: var(--accent-strong); color: var(--accent-ink); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset, 0 8px 30px -8px var(--accent-glow); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-dim); } /* ---- 6. Console panels (the hardware language, page-side) ---------------- */ .panel { background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); border-radius: var(--r-panel); padding: var(--sp-6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 30px -18px rgba(0, 0, 0, 0.9); } .panel-backlit { border-color: rgba(79, 227, 193, 0.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 24px -6px var(--accent-glow), 0 10px 30px -18px rgba(0, 0, 0, 0.9); } .pill { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.25rem 0.75rem; border-radius: 999em; border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-small); color: var(--text-muted); } /* ---- 7. Mega-nav (Product / Resources / Pricing / Login) ----------------- HTML snippet lives in CONVENTIONS.md. Desktop: hover/focus-within dropdowns. Mobile (< 900px): links collapse into the
burger. Height 68px. */ .nav { position: sticky; top: 0; z-index: var(--z-nav); /* GLOBAL INVARIANT (item 6): sticky nav touches the top screen edge; inset it below a notch/Dynamic-Island/rounded-corner instead of running under it. height stays an EXPLICIT, DEFINITE value (68px + the inset) so .nav-inner's height:100% keeps resolving exactly as before -- calc() with env() defaults to plain 68px, byte-for- byte the old behavior, on every non-notched device. */ height: calc(68px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); background: rgba(7, 9, 12, 0.86); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .nav-inner { max-width: 1400px; height: 100%; margin-inline: auto; padding-inline: var(--sp-5); display: flex; align-items: center; gap: var(--sp-6); } .nav-brand { font-weight: 800; font-size: 1.12rem; letter-spacing: -0.01em; color: var(--text); display: inline-flex; align-items: center; gap: var(--sp-2); } .nav-brand:hover { color: var(--text); } .nav-brand .brand-mark { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(160deg, var(--accent), #1c8a73); box-shadow: 0 0 12px -2px var(--accent-glow); } /* Brand lockup (Workstream A, 2026-07-08 sitewide brand integration): the real kit lockup replaces the text-only .brand-mark treatment above (now unused, left in place as a documented fallback shape). Sizing is height-driven; the width/height attrs carry the true aspect ratio (zero CLS). */ .nav-logo { display: block; height: 30px; width: auto; } .footer-logo { display: block; height: 56px; width: auto; } @media (max-width: 519px) { .nav-logo { height: 24px; } } .nav-menu { display: flex; align-items: center; gap: var(--sp-2); margin-right: auto; list-style: none; padding: 0; } .nav-item { position: relative; } .nav-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; /* GLOBAL INVARIANT item 6: WCAG touch-target floor */ padding: 0.55rem 0.85rem; border-radius: var(--r-control); color: var(--text-muted); font-weight: 600; font-size: var(--fs-small); } .nav-link:hover, .nav-item:focus-within > .nav-link { color: var(--text); background: var(--surface); } .nav-caret { font-size: 0.7em; opacity: 0.7; } .nav-drop { position: absolute; left: 0; top: calc(100% + 10px); min-width: 260px; padding: var(--sp-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.02) inset; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), visibility var(--t-fast); z-index: var(--z-dropdown); } .nav-item:hover > .nav-drop, .nav-item:focus-within > .nav-drop { opacity: 1; visibility: visible; transform: translateY(0); } .nav-drop a { display: block; padding: var(--sp-3); border-radius: var(--r-control); color: var(--text); font-weight: 600; font-size: var(--fs-small); } .nav-drop a:hover { background: var(--surface); color: var(--accent-strong); } .nav-drop .drop-desc { display: block; font-weight: 400; color: var(--text-muted); font-size: var(--fs-micro); margin-top: 2px; } .nav-cta { display: flex; align-items: center; gap: var(--sp-3); } .nav-burger { display: none; } @media (max-width: 899px) { .nav-menu, .nav-cta .btn-ghost { display: none; } .nav-burger { display: block; margin-left: auto; position: relative; } .nav-burger > summary { list-style: none; cursor: pointer; padding: 0.55rem 0.85rem; border: 1px solid var(--line-strong); border-radius: var(--r-control); color: var(--text); font-weight: 700; font-size: var(--fs-small); } .nav-burger > summary::-webkit-details-marker { display: none; } .nav-burger[open] > .nav-burger-panel { position: absolute; right: 0; top: calc(100% + 10px); min-width: 240px; max-width: calc(100vw - 2 * var(--sp-4)); box-sizing: border-box; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-panel); padding: var(--sp-3); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9); z-index: var(--z-dropdown); } .nav-burger-panel a { display: block; padding: var(--sp-3); border-radius: var(--r-control); color: var(--text); font-weight: 600; } .nav-burger-panel a:hover { background: var(--surface); } } /* ---- 8. Footer ------------------------------------------------------------ Legal links point at legal/*.html (canonical filenames in CONVENTIONS.md). The legal-counterparty d/b/a string NEVER appears here (legal wrapper rule, CONVENTIONS.md section 5): footer identity is "LiveCast Systems" only. */ .footer { border-top: 1px solid var(--line); background: var(--bg-1); padding-block: var(--sp-8) var(--sp-6); font-size: var(--fs-small); color: var(--text-muted); } .footer-grid { display: grid; gap: var(--sp-7); grid-template-columns: 2fr 1fr 1fr 1fr; } @media (max-width: 767px) { .footer-grid { grid-template-columns: 1fr 1fr; } } .footer h4 { margin: 0 0 var(--sp-3); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); } .footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); } .footer a { color: var(--text-muted); } .footer a:hover { color: var(--accent-strong); } .footer-legal { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; color: var(--text-faint); } /* ---- 9. Asset placeholder slots (Appendix H) ------------------------------ Pending generated assets render as LABELED slots so review is never blocked. Usage:
Swap-in later: replace the div with the real