/* BOUT SCOUT — theme.css: the site-wide design system, extracted from the Contender Series showpiece (site/static/dwcs.css — the canon). Every primitive is prefixed .bs- so it can never collide with the page-local .dw-* classes. Loads AFTER style.css (so shell rules here win) and BEFORE phase2.css. Dark base + green accent identity; existing CSS vars from style.css are the only palette. All motion is gated behind prefers-reduced-motion: no-preference, and reveal-hiding only applies when the .bs-js class is stamped on (inline script in base.html), so a no-JS visitor always sees a fully rendered page. */ html { scroll-behavior: smooth; } /* ============================= SHELL: NAV ============================== */ /* Roomier DWCS-feel top bar. Supersedes the .topbar/.brand/.mainnav rules that used to live in style.css. */ .topbar { display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; padding: 15px 22px; border-bottom: 1px solid var(--line); background: #0a0e14e6; backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 50; } .brand { font: 800 21px/1 var(--mono); letter-spacing: 1px; color: var(--text); } .brand span { color: var(--accent); } .mainnav { display: flex; gap: 2px; flex-wrap: wrap; } .mainnav a { padding: 9px 12px; border-radius: 6px; color: var(--dim); font: 600 11.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; } .mainnav a:hover { color: var(--text); background: var(--panel2); } .mainnav a.active { color: var(--accent); background: var(--accent-dim); } @media (max-width: 640px) { .topbar { padding: 12px 14px; gap: 10px 14px; } .mainnav a { padding: 8px 9px; font-size: 10.5px; } } /* ============================ SHELL: FOOTER ============================ */ /* The footer is a quiet band, not an afterthought. Supersedes style.css. */ footer { border-top: 1px solid var(--line); margin-top: 0; padding: 52px 20px 58px; text-align: center; background: linear-gradient(180deg, transparent, #0c111966); color: var(--dim); font-size: 12.5px; line-height: 1.75; } footer .bs-kicker { display: block; margin-bottom: 12px; color: var(--accent); } footer p { max-width: 560px; margin: 0 auto; } footer .bs-footnote { margin-top: 10px; font: 11px var(--mono); letter-spacing: .06em; opacity: .8; } /* ============================ PAGE + BANDS ============================= */ /* .bs-page lets full-bleed bands sit flush under the sticky nav (main has 22px top padding). Wrap a whole banded page in it. */ .bs-page { margin-top: -22px; } /* Full-width section. 90–140px vertical padding, one idea per band. Alternate band-a / band-b down the page; band-accent for the one moment that deserves a green wash. */ .bs-band { width: 100vw; margin-left: calc(50% - 50vw); padding: clamp(90px, 8vw + 60px, 140px) 20px; } .bs-band-a { background: var(--bg); } .bs-band-b { background: linear-gradient(180deg, #0c1119, #0e141f 50%, #0c1119); } .bs-band-accent { background: linear-gradient(180deg, #0c1119, #0d1d1a 50%, #0c1119); } .bs-wrap { max-width: 1060px; margin: 0 auto; } .bs-wrap-narrow { max-width: 760px; margin: 0 auto; } /* ============================== KICKER ================================ */ /* Mono microlabel — the little all-caps line above everything. */ .bs-kicker { font: 700 10.5px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); } /* =============================== INTRO ================================ */ /* Large light centered section intro — the conversational realty touch. */ .bs-intro { text-align: center; max-width: 780px; margin: 0 auto 54px; } .bs-intro .bs-kicker { color: var(--accent); } .bs-intro h2 { margin-top: 14px; font-weight: 300; letter-spacing: -.01em; font-size: clamp(28px, 4.6vw, 44px); line-height: 1.12; color: var(--text); } .bs-intro h2 b { font-weight: 750; } .bs-intro h2 em { font-style: italic; font-family: Georgia, "Times New Roman", serif; color: var(--accent); } .bs-intro p { color: var(--dim); margin-top: 14px; font-size: 16px; line-height: 1.65; } /* ================================ CTA ================================= */ /* The big outlined button. .ghost for the quiet sibling. */ .bs-cta { display: inline-block; padding: 16px 34px; min-height: 44px; border: 1px solid var(--accent); border-radius: 8px; color: var(--accent); font: 700 13px var(--mono); text-transform: uppercase; letter-spacing: .14em; background: #00e5a00d; box-shadow: 0 0 24px #00e5a022, inset 0 0 14px #00e5a00e; } .bs-cta:hover { background: var(--accent-dim); box-shadow: 0 0 34px #00e5a03a; } .bs-cta.ghost { border-color: var(--line); color: var(--dim); box-shadow: none; background: transparent; } .bs-cta.ghost:hover { color: var(--text); border-color: var(--dim); } /* ================================ HERO ================================ */ /* Cinematic layered header. Markup:

kicker / h1 / .bs-hero-sub / cta

*/ .bs-hero { position: relative; overflow: hidden; width: 100vw; margin-left: calc(50% - 50vw); min-height: min(88vh, 820px); display: flex; align-items: center; justify-content: center; text-align: center; padding: 120px 20px 100px; background: radial-gradient(1100px 520px at 50% -8%, #12303177, transparent 70%), radial-gradient(900px 480px at 82% 108%, #0e243855, transparent 70%), linear-gradient(180deg, #0a0e14 0%, #0b1119 55%, #0a0e14 100%); } .bs-hero-layer { position: absolute; inset: -6% -2%; pointer-events: none; will-change: transform; } /* the cage: reusable octagon wireframe + floor glow as a data-URI (accent green is baked in — data URIs can't read CSS vars) */ .bs-hero-cage { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 640' preserveAspectRatio='xMidYMid slice'%3E%3Cg transform='rotate(-2 600 360)' fill='none' stroke='%2300e5a0'%3E%3Cpolygon points='849,463 703,609 497,609 351,463 351,257 497,111 703,111 849,257' stroke-opacity='.13' stroke-width='10'/%3E%3Cpolygon points='849,463 703,609 497,609 351,463 351,257 497,111 703,111 849,257' stroke-opacity='.34' stroke-width='2'/%3E%3Cpolygon points='809,447 687,569 513,569 391,447 391,273 513,151 687,151 809,273' stroke-opacity='.09' stroke-width='1.5'/%3E%3C/g%3E%3Cellipse cx='600' cy='520' rx='430' ry='86' fill='%2300e5a0' fill-opacity='.055'/%3E%3Cg stroke='%2300e5a0' stroke-opacity='.15' stroke-width='2'%3E%3Cline x1='80' y1='600' x2='80' y2='612'/%3E%3Cline x1='160' y1='596' x2='160' y2='612'/%3E%3Cline x1='240' y1='602' x2='240' y2='612'/%3E%3Cline x1='960' y1='600' x2='960' y2='612'/%3E%3Cline x1='1040' y1='596' x2='1040' y2='612'/%3E%3Cline x1='1120' y1='602' x2='1120' y2='612'/%3E%3C/g%3E%3C/svg%3E"); background-size: cover; background-position: center; } .bs-hero-grid { background: linear-gradient(#12202e55 1px, transparent 1px), linear-gradient(90deg, #12202e55 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(75% 65% at 50% 45%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(75% 65% at 50% 45%, #000 30%, transparent 100%); } .bs-hero-shade { background: linear-gradient(180deg, #0a0e1488 0%, #0a0e1420 30%, #0a0e1444 68%, var(--bg) 98%); } .bs-hero-inner { position: relative; z-index: 3; max-width: 900px; width: 100%; } .bs-hero .bs-kicker { color: var(--accent); font-size: 12px; letter-spacing: .34em; } .bs-hero h1 { margin: 22px 0 10px; font-weight: 250; letter-spacing: -.02em; font-size: clamp(44px, 9vw, 100px); line-height: 1.0; color: var(--text); } .bs-hero h1 em { font-style: italic; font-family: Georgia, "Times New Roman", serif; font-weight: 400; color: var(--accent); text-shadow: 0 0 44px #00e5a055; } .bs-hero-sub { color: var(--dim); font-size: clamp(15px, 2vw, 19px); line-height: 1.6; max-width: 640px; margin: 18px auto 30px; } .bs-hero-sub b { color: var(--text); font-weight: 650; } .bs-hero-sub .num { color: var(--accent); } .bs-scrolldown { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); color: var(--dim); font: 600 10px var(--mono); letter-spacing: .3em; text-transform: uppercase; z-index: 3; } .bs-scrolldown::after { content: ""; display: block; width: 1px; height: 34px; margin: 8px auto 0; background: linear-gradient(var(--accent), transparent); } /* =============================== CARD ================================= */ /* Elevated panel — the building block for everything boxed. */ .bs-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; } /* ============================== COUNTER =============================== */ /* Boxed big number.

97%label

— server renders the final value as text; JS only animates up to it. */ .bs-counters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 900px; margin: 0 auto; } @media (min-width: 760px) { .bs-counters { grid-template-columns: repeat(4, 1fr); } } .bs-counter { text-align: center; padding: 30px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; } .bs-counter b { display: block; font: 800 clamp(34px, 5vw, 52px)/1 var(--mono); color: var(--accent); text-shadow: 0 0 26px #00e5a033; font-variant-numeric: tabular-nums; } .bs-counter span { display: block; margin-top: 10px; color: var(--dim); font: 600 10.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; } /* unboxed hero variant: a strip of live stats */ .bs-statstrip { display: flex; justify-content: center; gap: 20px 46px; flex-wrap: wrap; margin-top: 36px; } .bs-stat b { display: block; font: 800 clamp(26px, 4vw, 40px)/1 var(--mono); color: var(--accent); text-shadow: 0 0 26px #00e5a033; font-variant-numeric: tabular-nums; } .bs-stat span { display: block; margin-top: 8px; color: var(--dim); font: 600 10.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; } .bs-stat b.small { font-size: clamp(18px, 2.6vw, 26px); line-height: 1.5; } /* centered row for a band's closing CTA */ .bs-ctarow { text-align: center; margin-top: 38px; } /* centered narrow search (hero) */ .bs-herosearch { max-width: 460px; margin: 0 auto; } /* =============================== METER ================================ */ /* Confidence meter.