/* * bMovies cinematic dark theme. * * Black background (#000 / #0a0a0a), Netflix red (#E50914) * accents, white text. Applied across all brochure pages. * * This file overrides the inline brutalist black-on-white * styles that each page ships. Linked AFTER mobile.css in * every so it cascades on top of both the inline styles * and the mobile breakpoints. * * Specificity: uses `body` or higher to beat inline rules. */ /* ─── Global ─── */ html, body { /* Mobile horizontal-scroll guard. Any child with overflow (wide absolute-positioned hero carousels, badges, long code blocks) gets clipped at the viewport edge instead of pushing layout sideways. Vertical scroll is untouched. */ overflow-x: hidden; } body { background: #000 !important; color: #e5e5e5 !important; /* Canonical body font — set here so every brochure page inherits the same default without having to remember to declare it. Individual pages can still override for hero/headings. Prevents the nav font drift that invest.html suffered before this line existed. */ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; } /* ─── Landing page wordmark ─── */ /* Giant "bMovies" banner at the top of the hero on index.html. Lives in theme.css so media queries can scale it instead of being frozen at 12rem like the old inline style. */ .bmovies-wordmark { display: inline-block; font-family: 'Bebas Neue', 'Oswald', sans-serif; /* Bumped from 12rem to 15rem so the wordmark stretches to the ends of the hero strapline ("PITCH YOUR AWESOME IDEA,") at 1440px — the two now read as one vertical block. Wider horizontal padding (2.6rem, was 2rem) adds a little extra runway on either side of the letters so the red border frames the text rather than hugging it. */ font-size: 15rem; font-weight: 400; letter-spacing: 0.06em; border: 4px solid #E50914; padding: 0.3rem 2.6rem; line-height: 1; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.95), 0 0 40px rgba(229, 9, 20, 0.3); max-width: 100%; } .bmovies-wordmark .wm-b { color: #fff; } .bmovies-wordmark .wm-movies { color: #E50914; } @media (max-width: 1280px) { .bmovies-wordmark { font-size: 11rem; padding: 0.3rem 2rem; } } @media (max-width: 1100px) { .bmovies-wordmark { font-size: 8rem; padding: 0.3rem 1.6rem; } } @media (max-width: 768px) { .bmovies-wordmark { font-size: 6.5rem; padding: 0.25rem 1.3rem; border-width: 3px; } } @media (max-width: 480px) { .bmovies-wordmark { font-size: 4.8rem; padding: 0.2rem 1rem; border-width: 2px; letter-spacing: 0.04em; } } @media (max-width: 360px) { .bmovies-wordmark { font-size: 3.8rem; padding: 0.15rem 0.8rem; } } /* ─── Unified site header (Netflix-style) ─── */ .site-header { display: flex; align-items: center; justify-content: space-between; /* Full-bleed black bar but logo + nav stay aligned to the 1400px content column. The max() trick: on wide screens the side padding grows to (viewport - 1400) / 2 so the inner content is centered; on narrow screens it falls back to a 3rem minimum. */ padding: 0.9rem max(3rem, calc((100% - 1400px) / 2)); background: #000; border-bottom: 1px solid #222; max-width: none; margin: 0; /* Reserve the vertical space the nav will occupy once nav-session.js populates the empty
. Every consumer page ships with
and hydrates it at the end of ; without this min-height, the page's main content paints first at the top of the viewport, then jumps down ~40px when the nav lands — that's the "weird flash" seen on first paint of every consumer page. Matches the measured populated-header height. */ min-height: 3.8rem; box-sizing: border-box; } /* Logo — Option 1 (Bebas Neue) + Option 12 (red border badge) */ .site-header .logo { font-family: 'Bebas Neue', 'Oswald', 'Inter', sans-serif; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.06em; color: #fff; text-decoration: none; display: inline-flex; align-items: center; border: 2px solid #E50914; padding: 0.15rem 0.7rem; line-height: 1.1; text-shadow: 1px 2px 4px rgba(229, 9, 20, 0.3); } .site-header .logo span { color: #E50914; } .site-header nav { display: flex; /* Right-clustered layout in three deliberate zones: zone A — Pitch / Raise / Produce / Sell — tight cluster (gap:0.7rem) so the 4 lifecycle links read as one group. zone B — Sign-in / Studio CTA — a bigger margin on either side of the CTA splits it visually from both the lifecycle cluster and the socials cluster. zone C — social icons + $bMovies token — their own gap added via padding + a light margin between adjacent icons so they breathe. Global gap is the lifecycle tightness; CTA + socials extend their own margins on top to create the three-zone rhythm. */ flex: 1; justify-content: flex-end; align-items: center; gap: 0.7rem; padding: 0 1.5rem 0 2rem; border: none; max-width: none; margin: 0 0 0 2rem; background: transparent; } /* Lifecycle links — PITCH / RAISE / PRODUCE / SELL — spread equally across the top. Each claims flex:1 of the available horizontal space between the logo and the Sign-in / Studio CTA, so the four cells grow at the same rate regardless of viewport width. text-align:center keeps the label centred inside its stretched cell so the rhythm reads as balanced. */ .site-header nav > a:not(.nav-social):not(.signin-cta) { flex: 1; text-align: center; } /* Sign-in / Studio CTA sits between the lifecycle cluster and the socials cluster. Inherits the 0.7rem base gap on both sides; overrides with a larger margin-right to push the socials further right so they breathe. A small margin-left separates it from the last lifecycle link without being dramatic — STUDIO reads as close-ish to the nav group but clearly distinct. */ .site-header nav a.signin-cta { flex: 0 0 auto; max-width: none; margin: 0; margin-left: 0.6rem; margin-right: 1.6rem; } .site-header nav a { padding: 0.5rem 1rem; /* Font pinned here so no page can accidentally override it through a body font-family declaration. The shared nav MUST look identical on every page. */ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #aaa; text-decoration: none; border-bottom: 2px solid transparent; } .site-header nav a:hover { color: #fff; } .site-header nav a.active { color: #fff; border-bottom-color: #E50914; } /* Step number prefix on the six lifecycle nav items (Studio, Pitch, Fund, Produce, Publish, Watch). Injected from NAV_LINKS[].n in js/nav-session.js. Muted grey by default; the number on the active item turns red to match the underline. */ .site-header nav a .step-num { display: inline-block; margin-right: 0.35em; font-size: 0.78em; font-weight: 700; /* Brand red for every step number (1 through 6), regardless of hover / active state. The step is what the navbar is selling — "this is step N of the lifecycle" — so it stays red so the eye can scan the sequence at a glance. */ color: #E50914; vertical-align: baseline; } .site-header nav a:hover .step-num, .site-header nav a.active .step-num { color: #E50914; } /* Social icons in the navbar — X, Instagram, YouTube. Rendered from SOCIAL_LINKS in js/nav-session.js so one edit covers both navbar and footer. Very tight horizontal padding + negative margin between adjacent icons overrides the nav's 0.6rem gap so the three socials and the token coin cluster together as a visual group on the far right. */ .site-header nav a.nav-social { /* Socials take their natural width (no flex-grow). Each icon carries its own horizontal padding + a modest between-icon margin so adjacent socials sit with visible breathing room rather than packed shoulder-to-shoulder. */ flex: 0 0 auto; padding: 0.4rem 0.55rem; color: #E50914; border-bottom: none; display: inline-flex; align-items: center; justify-content: center; margin-left: 0; } /* Between adjacent socials (X → IG → YT → $bMovies token): a small extra margin on top of the nav's 0.7rem gap so the icons sit with obvious air around each, not in a tight strip. */ .site-header nav a.nav-social + a.nav-social { margin-left: 0.35rem; } /* First social — the CTA's 1.6rem margin-right already handles the gap between Sign-in/Studio and the socials cluster, so the first social needs no extra runway. */ .site-header nav a.nav-social:first-of-type { margin-left: 0; } .site-header nav a.nav-social svg { width: 14px; height: 14px; display: block; } .site-header nav a.nav-social:hover { color: #ff3642; } /* ─── Legacy header overrides (for pages not yet migrated) ─── */ body header { background: #000; border-bottom-color: #222 !important; } body h1, body header h1 { color: #fff !important; } body .tagline, body header .tagline { color: #777 !important; } /* ─── Legacy nav overrides ─── */ body nav { border-bottom-color: #222 !important; background: #000; } body nav a { color: #aaa !important; } body nav a:hover { color: #fff !important; } body nav a.active { color: #fff !important; border-bottom-color: #E50914 !important; } body .site-header nav a.nav-social { color: #E50914 !important; } body .site-header nav a.nav-social:hover { color: #ff3642 !important; } /* ─── Site footer ─── */ .site-footer { background: #0a0a0a; border-top: 1px solid #222; padding: 3rem; margin-top: 4rem; } .footer-inner { max-width: 1400px; margin: 0 auto; text-align: center; } .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; margin-bottom: 1.5rem; } .footer-links a { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #666; text-decoration: none; } .footer-links a:hover { color: #fff; } .footer-copy { font-size: 0.6rem; color: #444; letter-spacing: 0.05em; } /* Social row — X + future socials. Sits between the links and the copyright. Injected by js/nav-session.js so it's one source of truth for all brochure pages. */ .footer-social { display: flex; justify-content: center; gap: 1rem; margin: 1rem 0 1.2rem; } .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid #2a2a2a; color: #888; transition: color 0.15s, border-color 0.15s, background 0.15s; } .footer-social a:hover { color: #fff; border-color: #E50914; background: rgba(229, 9, 20, 0.1); } .footer-social svg { width: 14px; height: 14px; display: block; } /* ─── Hamburger (mobile nav toggle) ─── */ /* Hidden on desktop. Injected by nav-session.js between the logo and