/* * 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. Use `clip`, not `hidden`. `overflow-x: hidden` on html/body promotes the element into a scroll container, which silently breaks `position: sticky` on every descendant — that was the reason the public-beta banner was failing to stick. `clip` gives the same horizontal-clip behaviour without changing the scroll-container, so descendant sticky positioning works. */ overflow-x: clip; } 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; } } /* bitcoin-movies.com — same hero lockup, longer word; slightly smaller type */ .bitcoin-movies-wordmark { display: inline-block; font-family: 'Bebas Neue', 'Oswald', sans-serif; font-size: 11rem; font-weight: 400; letter-spacing: 0.05em; border: 4px solid #E50914; padding: 0.3rem 2rem; 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%; } .bitcoin-movies-wordmark .wm-bitcoin { color: #fff; } .bitcoin-movies-wordmark .wm-movies { color: #E50914; } @media (max-width: 1280px) { .bitcoin-movies-wordmark { font-size: 8.5rem; padding: 0.28rem 1.6rem; } } @media (max-width: 1100px) { .bitcoin-movies-wordmark { font-size: 6.2rem; padding: 0.25rem 1.3rem; } } @media (max-width: 768px) { .bitcoin-movies-wordmark { font-size: 4.5rem; padding: 0.22rem 1rem; border-width: 3px; } } @media (max-width: 480px) { .bitcoin-movies-wordmark { font-size: 3.4rem; padding: 0.18rem 0.75rem; border-width: 2px; letter-spacing: 0.04em; } } @media (max-width: 360px) { .bitcoin-movies-wordmark { font-size: 2.75rem; padding: 0.15rem 0.55rem; } } /* ─── Unified site header (Netflix-style) ─── */ .site-header { display: flex; align-items: center; justify-content: space-between; /* 2026-05-23: side padding tuned twice. First pass — fully zeroed (owner: "take out the margins on either side") — but flush-to-edge text read raw. Second pass — restored a minimal 1rem on each side (owner: "we still need a BIT of margin"). Logo + rightmost social icon now sit 16px in from the viewport edge instead of jamming the chrome. The 1400px content-column cap from the original `padding: 0.9rem max(3rem, calc((100% - 1400px) / 2))` stays gone — header is still full-bleed. */ padding: 0.9rem 1rem; 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; /* Stick the navbar to the top of the viewport, sitting directly under the public-beta banner. nav-session.js measures the banner and writes its height into --beta-banner-height on so the offset stays correct across breakpoints (the banner reflows / shortens on phones). When PUBLIC_BETA is false, the var is unset and the fallback (0px) sticks the navbar flush at the top. z-index sits below the banner's 100. */ position: sticky; top: var(--beta-banner-height, 0px); z-index: 90; } /* 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; } /* "Account" link — sits immediately left of the right-clustered nav (just after the logo). .site-header nav has flex:1 + justify-content:flex-end, so this intrinsic-width link naturally hugs the left next to the logo. Matches nav-link typography. Only rendered by SiteNav (authed Next routes), not the brochure nav. */ .site-header .nav-account { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #aaa; text-decoration: none; margin-left: 1.25rem; white-space: nowrap; } .site-header .nav-account:hover { color: #fff; } .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. 2026-05-23: side padding + left margin zeroed (owner spec — "no margins in the navbar"). The rightmost social icon now sits flush against the viewport edge. The left margin (was 2rem, separating nav from logo) is also zero; nav still right-clusters via flex:1 + justify-content:flex-end, so the visible layout is unchanged on the left side. */ flex: 1; justify-content: flex-end; align-items: center; gap: 0.7rem; padding: 0; border: none; max-width: none; margin: 0; 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. 2026-05-07: the signin-cta is now FIRST in the nav DOM (so on mobile it lands at the top of the drawer). On desktop we use flex `order: 99` to preserve its old right-of-the-lifecycle- cluster visual position. */ .site-header nav a.signin-cta { flex: 0 0 auto; max-width: none; margin: 0; margin-left: 0.6rem; margin-right: 1.6rem; order: 99; } /* Section label is mobile-only — hide on desktop. */ .site-header nav .nav-section-label { display: none; } .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 lifecycle nav items (Pitch / Pump / Produce / Profit / Prize). Owner spec 2026-05-26 PM (third pass for the nav): plain minimal — small grey label, small red number, no discs, no per-step palette. Hover turns label red; active gets the red underline already defined above on .site-header nav a.active. Numbers stay red regardless of state so the eye can scan the sequence at a glance. */ .site-header nav a .step-num { display: inline-block; margin-right: 0.35em; font-size: 0.78em; font-weight: 700; color: #E50914; vertical-align: baseline; } /* Three-market top nav (2026-06-04, owner). One colour per audience — the same red/yellow/green the landing page uses for the three layers: WATCH red — Netflix on the front PRODUCE yellow — Fiverr in the middle (studios; Prizes live here) EXCHANGE green — Pump.fun on the back Each label holds its hue in every state; hover brightens, active adds a matching underline. Brighter reds/greens than the brand chrome so the labels stay legible on black (brand #E50914 remains the active-accent + social-icon colour). Shared by the React SiteNav and the brochure nav. */ /* IMPORTANT: there is a `body nav a { color:#aaa !important }` reset further down (≈L386) that greys EVERY nav link. To beat it the colour rules need the same `body .site-header …` prefix + `!important` that the social icons use — otherwise the markets render grey. Font-size doesn't need !important (no !important override) but gets the body prefix too for consistency. */ body .site-header nav a.nav-market { font-weight: 800; font-size: 0.82rem; } body .site-header nav a.mkt-subscribe { color: #3b9eff !important; } /* CHAT (PITCH) — blue, left of Watch (owner 2026-06-22). */ body .site-header nav a.mkt-chat { color: #1d9bf0 !important; } body .site-header nav a.mkt-chat:hover { color: #4db1f5 !important; } body .site-header nav a.mkt-chat.active { border-bottom-color: #1d9bf0 !important; } /* The funnel nav (owner 2026-06-22): Pitch blue · Produce yellow · Pump green · Profit red — the four React stage surfaces. (mkt-produce yellow is defined just below.) */ body .site-header nav a.mkt-pitch { color: #1d9bf0 !important; } body .site-header nav a.mkt-pitch:hover { color: #4db1f5 !important; } body .site-header nav a.mkt-pitch.active { border-bottom-color: #1d9bf0 !important; } body .site-header nav a.mkt-pump { color: #6bff8a !important; } body .site-header nav a.mkt-pump:hover { color: #9affb3 !important; } body .site-header nav a.mkt-pump.active { border-bottom-color: #6bff8a !important; } body .site-header nav a.mkt-profit { color: #ff6b73 !important; } body .site-header nav a.mkt-profit:hover { color: #ff9098 !important; } body .site-header nav a.mkt-profit.active { border-bottom-color: #ff6b73 !important; } /* WATCH ↔ TRADE colours swapped (owner 2026-06-20): Watch green, Trade red. */ body .site-header nav a.mkt-watch { color: #5be584 !important; } body .site-header nav a.mkt-produce { color: #facc15 !important; } body .site-header nav a.mkt-exchange { color: #E50914 !important; } body .site-header nav a.mkt-subscribe:hover { color: #6cb6ff !important; } body .site-header nav a.mkt-watch:hover { color: #86efac !important; } body .site-header nav a.mkt-produce:hover { color: #fde047 !important; } body .site-header nav a.mkt-exchange:hover { color: #ff3b3b !important; } body .site-header nav a.mkt-subscribe.active { border-bottom-color: #3b9eff !important; } body .site-header nav a.mkt-watch.active { border-bottom-color: #5be584 !important; } body .site-header nav a.mkt-produce.active { border-bottom-color: #facc15 !important; } body .site-header nav a.mkt-exchange.active { border-bottom-color: #E50914 !important; } /* /account home cards as menu rows — hidden on desktop, shown only in the mobile hamburger drawer (owner 2026-06-20). */ .site-header nav a.nav-card { display: none; } /* 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