/* ============================================================================ Magenta Light Studios — Studio site stylesheet Dark, premium, cinematic. Magenta brand accent. Mobile-first, accessible. Per-film custom themes override --accent via inline style on . ========================================================================== */ :root { --bg: #08080a; --bg-2: #0e0e12; --bg-3: #14141a; --ink: rgba(238, 238, 240, 0.94); --ink-dim: rgba(202, 202, 210, 0.58); --ink-faint: rgba(170, 170, 182, 0.34); --line: rgba(255, 255, 255, 0.08); --line-2: rgba(255, 255, 255, 0.14); --accent: #ff2e8e; /* MLS magenta */ --accent-2: #ff7ab8; --accent-soft: rgba(255, 46, 142, 0.16); --ok: #5ad19a; --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif; --serif: "Iowan Old Style", "Times New Roman", Times, Georgia, serif; --maxw: 1240px; --radius: 6px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; /* clip (not hidden) prevents horizontal scroll WITHOUT breaking the position:sticky tabs bar on film pages. */ -webkit-font-smoothing: antialiased; overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* Film-grain + magenta vignette overlays */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.55; mix-blend-mode: screen; } body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient(ellipse at 50% -10%, rgba(255, 46, 142, 0.07), transparent 55%); } a { color: inherit; } img { max-width: 100%; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; position: relative; z-index: 3; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* ---------------------------------------------------------------- NAV --- */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; /* Three zones so the links are centred on the VIEWPORT, not on whatever is left over between the logo and the socials — the side zones are equal fractions, so an uneven left/right never drags the centre off. */ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 14px 28px; background: rgba(8, 8, 10, 0.78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); transition: background .3s, border-color .3s; } .nav-left { justify-self: start; min-width: 0; } .nav-right { justify-self: end; display: flex; align-items: center; gap: 6px; } @media (max-width: 640px) { .site-nav { padding: 12px 18px; } } .site-nav.scrolled { background: rgba(8, 8, 10, 0.95); } body { padding-top: var(--nav-h, 68px); } .brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; } .brand-lockup { display: block; height: 42px; } .brand-lockup img { height: 100%; width: auto; display: block; } .footer-brand .brand-lockup { height: 56px; margin-bottom: 10px; } @media (max-width: 640px) { .brand-lockup { height: 34px; } } .brand .brand-mark { width: 34px; height: 34px; display: block; } .brand .brand-mark img, .brand .brand-mark svg { width: 100%; height: 100%; display: block; } .brand .brand-word { font-family: var(--serif); font-size: 17px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); white-space: nowrap; } .brand .brand-word b { color: var(--accent); font-weight: 400; } .nav-links { display: flex; gap: 22px; align-items: center; justify-self: center; } .nav-links a { /* Sized and coloured to the wordmark beside them: its capitals are 9.3px tall in the 42px lockup, which is this font at 12.5px. */ font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); text-decoration: none; transition: color .2s; position: relative; padding: 4px 0; } .nav-links a:hover { color: var(--accent); } /* ---- Header socials (home page) ------------------------------------------ Icons rather than words so seven accounts still fit beside the links. */ .nav-social { display: flex; align-items: center; gap: 4px; } .nav-social a { display: inline-flex; padding: 6px; color: var(--ink-dim); transition: color .2s; } .nav-social a:hover { color: var(--accent); } .nav-social svg { width: 17px; height: 17px; display: block; fill: currentColor; } @media (max-width: 920px) { .nav-social { display: none; } } /* ---- Films dropdown ------------------------------------------------------ The four film views live behind one bar item. The panel is hidden with visibility (not display) so it can fade, and it is anchored to the group so it follows the item at any width. */ .nav-group { position: relative; } .nav-group-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 6px 0; cursor: pointer; color: var(--ink); font-family: var(--mono); font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; } .nav-group-btn:hover, .nav-group.open .nav-group-btn { color: var(--accent); } .nav-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; opacity: .7; transition: transform .2s; } .nav-group.open .nav-caret { transform: rotate(180deg); } .nav-group.current > .nav-group-btn { color: var(--ink); } .nav-group.current > .nav-group-btn::after { content: ""; position: absolute; left: 0; right: 14px; bottom: 0; height: 1px; background: var(--accent); } .nav-menu { position: absolute; top: calc(100% + 10px); left: -14px; min-width: 190px; display: flex; flex-direction: column; padding: 8px 0; border-radius: 8px; background: rgba(8,8,10,.97); border: 1px solid var(--line-2); box-shadow: 0 22px 60px rgba(0,0,0,.5); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s; z-index: 120; } .nav-group.open .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-menu a { padding: 9px 16px; white-space: nowrap; } .nav-menu a:hover { background: rgba(255,255,255,.06); color: var(--accent); } .nav-menu a.current::after { display: none; } html[data-entity="mls"] .nav-menu { background: rgba(255,255,255,.98); } /* Over the hero the bar is transparent, but the panel still needs a surface. */ body[data-hero-overlay] .site-nav:not(.scrolled) .nav-group-btn { color: #fff; } body[data-hero-overlay] .site-nav:not(.scrolled) .nav-group-btn:hover, body[data-hero-overlay] .site-nav:not(.scrolled) .nav-group.open .nav-group-btn { color: #fff; } body[data-hero-overlay] .site-nav:not(.scrolled) .nav-menu { background: rgba(8,8,10,.97); } body[data-hero-overlay] .site-nav:not(.scrolled) .nav-menu a { color: rgba(255,255,255,.82); } body[data-hero-overlay] .site-nav:not(.scrolled) .nav-menu a:hover { color: #fff; } /* On phones the bar is already a stacked panel, so show the group inline. */ @media (max-width: 920px) { .nav-group { width: 100%; } .nav-menu { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; background: none; border: 0; box-shadow: none; padding: 0 0 0 14px; } .nav-group-btn { display: none; } } .nav-links a.current { color: var(--ink); } .nav-links a.current::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--accent); } .nav-toggle { display: none; background: none; border: 1px solid var(--line-2); color: var(--ink); border-radius: 4px; padding: 7px 10px; cursor: pointer; font-size: 16px; line-height: 1; } @media (max-width: 920px) { /* The links panel leaves the grid (it is fixed), so the bar drops to two zones — otherwise the toggle would sit in the middle column. */ .site-nav { grid-template-columns: 1fr auto; } .nav-links { /* The panel is still a grid child here, so the desktop centring would shrink-wrap it to the middle column instead of spanning the bar. */ justify-self: stretch; position: fixed; top: var(--nav-h, 67px); left: 0; right: 0; flex-direction: column; gap: 0; background: rgba(10,10,13,0.98); border-bottom: 1px solid var(--line); max-height: 0; overflow: hidden; transition: max-height .35s ease; align-items: stretch; } .nav-links.open { max-height: 80vh; } .nav-links a { padding: 16px 28px; border-top: 1px solid var(--line); font-size: 13px; } .nav-links a.current::after { display: none; } .nav-toggle { display: block; } } /* --------------------------------------------------------------- MEDIA --- */ /* Reusable media wrapper used for any hero/poster/card slot. Supports