/* * 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; font-size: 12rem; font-weight: 400; letter-spacing: 0.06em; 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%; } .bmovies-wordmark .wm-b { color: #fff; } .bmovies-wordmark .wm-movies { color: #E50914; } @media (max-width: 1100px) { .bmovies-wordmark { font-size: 8rem; padding: 0.3rem 1.6rem; } } @media (max-width: 768px) { .bmovies-wordmark { font-size: 5rem; padding: 0.25rem 1.1rem; border-width: 3px; } } @media (max-width: 480px) { .bmovies-wordmark { font-size: 3.6rem; padding: 0.2rem 0.9rem; border-width: 2px; letter-spacing: 0.04em; } } @media (max-width: 360px) { .bmovies-wordmark { font-size: 3rem; padding: 0.15rem 0.75rem; } } /* ─── 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; } /* 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; /* Spread the 8 nav links + sign-in CTA evenly across the rest of the header bar. justify-content: space-around + flex: 1 on the