/* Rob Hall — Film Editor | site stylesheet */ /* Google Fonts are loaded via tags in the page (see build.py's page() template) rather than @import here — @import forces the browser to fully fetch and parse this stylesheet before it can even discover the font request, so on pages with lots of competing network traffic (e.g. the showreel page's 12 video embeds) the fonts could lose the race and briefly fall back to a plain font, making that page look inconsistent with others. */ :root{ --bg: #0b0c0e; --panel: #15171b; --panel-2: #1b1e23; --border: rgba(255,255,255,0.08); --text: #e9e7e2; --muted: #a2a0a0; --muted-2: #706e6e; --gold: #cda15c; --gold-2: #e8c589; --rule-red: #8a3a34; --shadow: 0 20px 50px -20px rgba(0,0,0,0.6); --radius: 10px; --maxw: 1080px; } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; height:100%; -webkit-text-size-adjust:100%; text-size-adjust:100%; } body{ margin:0; min-height:100vh; position:relative; z-index:0; background:var(--bg); color:var(--text); font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; } /* Wallpaper glow: fixed to the viewport (not the scrollable page box) so it always looks the same regardless of how tall or short a page's content is — no stretching, no hard seam where a short page's content ends. Note: body must establish its own stacking context (position+z-index above) so this negative-z-index layer paints above body's own flat background instead of being hidden behind it. */ body::before{ content:''; position:fixed; inset:0; z-index:-1; background:radial-gradient(ellipse at top, #2b2f3a 0%, var(--bg) 70%); pointer-events:none; } img{ max-width:100%; display:block; } a{ color:var(--gold); text-decoration:none; } a:hover{ color:var(--gold-2); } .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; } /* ---------- NAV ---------- */ .site-header{ position:sticky; top:0; z-index:100; background:rgba(11,12,14,0.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); } .nav-row{ display:flex; align-items:center; justify-content:space-between; max-width:var(--maxw); margin:0 auto; padding:14px 28px; } .brandmark{ font-family:'Bebas Neue', sans-serif; font-size:1.5rem; letter-spacing:.04em; color:var(--text); white-space:nowrap; } .brandmark span{ color:var(--gold); } @media (max-width:480px){ .nav-row{ padding:12px 20px; } .brandmark{ font-size:1.15rem; letter-spacing:.02em; } } nav.primary{ display:flex; align-items:center; gap:2px; } nav.primary > a, .has-drop > .drop-label{ display:inline-block; padding:8px 14px; font-size:.86rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; border-radius:6px; cursor:pointer; } nav.primary > a:hover, .has-drop > .drop-label:hover{ color:var(--text); background:rgba(255,255,255,0.05); } nav.primary > a.active, .has-drop.active > .drop-label{ color:var(--gold); } .has-drop{ position:relative; } .drop-menu{ position:absolute; top:110%; left:0; min-width:170px; background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:6px; opacity:0; visibility:hidden; transform:translateY(4px); transition:all .15s ease; box-shadow:var(--shadow); } .has-drop:hover .drop-menu, .has-drop:focus-within .drop-menu{ opacity:1; visibility:visible; transform:translateY(0); } .drop-menu a{ display:block; padding:8px 10px; font-size:.86rem; color:var(--muted); border-radius:6px; } .drop-menu a:hover{ background:rgba(255,255,255,0.06); color:var(--gold-2); } .nav-toggle{ display:none; background:none; border:0; color:var(--text); font-size:1.4rem; cursor:pointer; } .nav-mobile-only{ display:none !important; } @media (max-width:820px){ .nav-row{ padding:18px 24px; } nav.primary{ position:fixed; inset:72px 0 0 0; height:0; overflow:hidden; flex-direction:column; align-items:flex-start; background:var(--bg); transition:height .2s ease; padding:0 28px; gap:0; } nav.primary.open{ height:calc(100vh - 72px); padding-top:10px; overflow-y:auto; } nav.primary > a, .has-drop{ width:100%; } .has-drop > .drop-label{ width:100%; } .drop-menu{ position:static; opacity:1; visibility:visible; transform:none; display:none; box-shadow:none; border:none; padding-left:14px; background:none; } .has-drop.open .drop-menu{ display:block; } .nav-toggle{ display:block; font-size:2.2rem; line-height:1; padding:4px 6px; } .nav-mobile-only{ display:block !important; } } /* ---------- CONTACT BARS ---------- */ .agent-bar{ background:var(--panel); border-bottom:1px solid var(--border); font-size:.82rem; color:var(--muted); } .agent-bar .wrap{ padding:10px 28px; display:flex; flex-wrap:wrap; gap:4px 22px; } .agent-bar b{ color:var(--text); } @media (max-width:820px){ .agent-bar .wrap{ flex-direction:column; align-items:flex-start; gap:2px; padding:10px 24px; } .agent-bar .agent-sep{ display:none; } } .contact-strip{ text-align:center; padding:26px 20px; color:var(--muted); font-size:.9rem; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin:56px 0; } .contact-strip b{ color:var(--text); } /* ---------- HERO ---------- */ .hero{ padding:56px 0 10px; } .hero-top{ display:flex; align-items:center; justify-content:flex-start; gap:40px; flex-wrap:nowrap; margin-bottom:34px; } .hero-title{ flex:0 0 auto; white-space:nowrap; } .hero .stills{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); position:relative; flex:0 1 868px; max-width:868px; min-width:0; } .hero .stills img{ width:100%; height:auto; display:block; } .hero .stills::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 45%, rgba(255,255,255,.05) 52%, rgba(255,255,255,0) 62%, rgba(255,255,255,0) 100%); mix-blend-mode:overlay; } .hero h1{ font-family:'Bebas Neue', sans-serif; font-size:3.12rem; letter-spacing:.02em; margin:0; line-height:.95; } .hero .role{ font-size:1.2rem; color:var(--gold); letter-spacing:.14em; text-transform:uppercase; margin:6px 0 0; } .hero .cta-row{ margin-top:22px; display:flex; gap:12px; flex-wrap:wrap; } .hero .cta-row .cv-pdf-cta{ display:none; } @media (max-width:820px){ .hero-top{ flex-direction:column; align-items:flex-start; } .hero .stills{ display:none; } .hero .cta-row{ flex-direction:column; align-items:stretch; } .hero .cta-row .btn{ text-align:center; } .hero .cta-row .assistant-cta{ display:none; } .hero .cta-row .cv-pdf-cta{ display:inline-block; } } @media (max-width:480px){ .hero h1{ font-size:2.64rem; } } .btn{ display:inline-block; padding:11px 20px; border-radius:7px; font-size:.85rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; border:1px solid var(--border); color:var(--text); } .btn:hover{ border-color:var(--gold); color:var(--gold-2); } .btn.solid{ background:var(--gold); border-color:var(--gold); color:#1b1404; } .btn.solid:hover{ background:var(--gold-2); border-color:var(--gold-2); color:#1b1404; } /* ---------- SECTION HEADERS ---------- */ .section-head{ margin:64px 0 26px; } .eyebrow{ font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:700; margin:0 0 6px; } .section-head h2{ font-family:'Bebas Neue', sans-serif; font-size:2.1rem; letter-spacing:.02em; margin:0; padding-bottom:14px; border-bottom:1px solid var(--border); } h1.page-title{ font-family:'Bebas Neue', sans-serif; font-size:2.6rem; letter-spacing:.02em; margin:44px 0 8px; padding-bottom:14px; border-bottom:1px solid var(--border); } /* ---------- FEATURED / POSTER CARD ---------- */ .feature-card{ display:grid; grid-template-columns:260px 1fr; gap:34px; align-items:start; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); } .feature-card.latest{ border-color:rgba(205,161,92,0.5); background:linear-gradient(160deg,#1c1a13,#15171b 55%); } .feature-card .badge{ display:inline-block; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:#1b1404; background:var(--gold); padding:4px 10px; border-radius:20px; font-weight:700; margin-bottom:10px; } .feature-card h3{ font-family:'Bebas Neue',sans-serif; font-size:1.9rem; letter-spacing:.02em; margin:0 0 6px; } .feature-card .meta{ color:var(--muted); font-size:.92rem; margin:0 0 2px; } .feature-card .credit-line{ color:var(--muted); font-size:.92rem; margin:0 0 2px; } .feature-card .synopsis{ margin:16px 0; color:var(--text); } .feature-card .stamp{ font-weight:600; color:var(--gold-2); margin:14px 0 10px; } .feature-card .quotes p{ margin:6px 0; font-style:italic; color:var(--muted); } .feature-card .quotes p b{ color:var(--text); font-style:normal; } .feature-card .stars{ letter-spacing:2px; color:var(--gold); } @media (max-width:680px){ .feature-card{ grid-template-columns:1fr; } .feature-card .poster-frame{ max-width:220px; margin:0 auto; } } /* ---------- TEXT FILM CARD (CV lists) ---------- */ .film-entry{ padding:26px 0; border-bottom:1px solid var(--border); } .film-entry:first-of-type{ padding-top:0; } .film-entry h3{ font-family:'Bebas Neue',sans-serif; font-size:1.55rem; letter-spacing:.02em; margin:0 0 4px; line-height:1.15; } .film-entry .tag{ color:var(--gold-2); font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; font-weight:600; } .film-entry .meta{ color:var(--muted); font-size:.9rem; margin:2px 0; } .film-entry .synopsis{ margin:12px 0 8px; } .film-entry .stamp{ color:var(--gold-2); font-weight:600; font-size:.92rem; } .film-entry .quotes p{ margin:4px 0; font-style:italic; color:var(--muted); font-size:.92rem; } .film-entry .quotes p b{ color:var(--text); font-style:normal; } .film-entry.new-entry{ border:1px solid rgba(205,161,92,0.45); border-radius:var(--radius); padding:24px; background:rgba(205,161,92,0.04); } .film-entry .role-note{ color:var(--muted-2); font-size:.82rem; font-style:italic; } .film-entry h3 .title-sm{ font-size:.7em; } .film-entry.has-poster{ display:grid; grid-template-columns:130px 1fr; gap:28px; align-items:start; } .film-entry.has-poster.new-entry{ grid-template-columns:130px 1fr; } @media (max-width:560px){ .film-entry.has-poster{ grid-template-columns:96px 1fr; gap:16px; } } /* ---------- POSTER FRAME (shared: feature-card & film-entry) ---------- */ /* Simulates a framed poster under glass rather than a bare floating image: a slim metallic/gilt frame (padding + gradient), a soft contact shadow under the frame, and a diagonal glass-reflection highlight drawn with ::after over the artwork. Sits at a slight 3D angle and eases toward flush-on on hover, like tilting to catch/lose the light off the glass. */ .poster-frame{ position:relative; border-radius:8px; padding:3.5px; background:linear-gradient(155deg, #332819 0%, #15100a 45%, #3a2e1d 75%, #100c07 100%); box-shadow: 0 20px 32px -18px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.06); transform:perspective(700px) rotateY(-16deg) rotateX(4deg); transition:transform .4s ease, box-shadow .4s ease; will-change:transform; } .poster-frame:hover{ transform:perspective(700px) rotateY(-6deg) rotateX(2deg); box-shadow: 0 24px 38px -16px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.08); } .poster-frame img.poster{ display:block; width:100%; height:auto; border-radius:3px; position:relative; } .poster-frame::after{ content:''; position:absolute; inset:3.5px; border-radius:3px; background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,.18) 41%, rgba(255,255,255,.05) 50%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%), linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,0) 45%); pointer-events:none; } /* ---------- REFERENCES ---------- */ /* Header layout/sizing matched to the showreel carousel's eyebrow + heading (see .reel-heading-panel .eyebrow / h4). */ .ref-card{ padding:24px 0; border-bottom:1px solid var(--border); } .ref-card h4{ font-family:'Bebas Neue',sans-serif; font-size:1.9rem; letter-spacing:.02em; margin:0 0 4px; } .ref-card .eyebrow{ margin:0 0 10px; } .ref-card blockquote{ margin:0; font-size:1.05rem; color:var(--text); font-style:italic; } /* ---------- PRESS ---------- */ .press-item{ padding:12px 0; border-bottom:1px solid var(--border); } .press-item .date-src{ color:var(--muted); font-size:.85rem; margin:0 0 3px; } .press-item .date-src b{ color:var(--gold-2); } .press-item blockquote{ margin:0 0 4px; font-style:italic; } .press-item .small{ margin:0; } .press-item.new-entry{ border:1px solid rgba(205,161,92,0.45); border-radius:var(--radius); padding:14px 20px; background:rgba(205,161,92,0.04); } .press-list{ padding-bottom:54px; } /* ---------- SHOWREEL CAROUSEL ---------- */ /* The "Jump to" nav used to be a persistent 180px+36px-gap side rail, which left the carousel column (video, heading, clip list) only ~808px wide inside a 1024px .wrap — visibly narrower than the full-width text blocks on References/Biography/etc, which is what actually made this page read as smaller-scale/tighter. The nav now sits as a horizontal row above the carousel instead, so .reel-carousel spans the same full .wrap width as every other page. */ .reel-shell{ display:flex; flex-direction:column; gap:20px; margin-top:30px; } .reel-nav{ display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px; } .reel-nav h3{ font-family:'Bebas Neue',sans-serif; letter-spacing:.1em; font-size:.95rem; color:var(--muted-2); text-transform:uppercase; margin:0 12px 0 0; } .reel-jump{ text-align:left; background:none; border:1px solid var(--border); color:var(--muted); padding:11px 16px; border-radius:7px; font-size:.85rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; font-family:inherit; transition:all .15s ease; } .reel-jump:hover{ color:var(--text); border-color:var(--gold); } .reel-jump.active{ color:#1b1404; background:var(--gold); border-color:var(--gold); } .reel-carousel{ min-width:0; } /* Spacing matched to the rest of the site's rhythm (24-26px paddings/margins used by .ref-card, .film-entry, .section-head etc) so the carousel doesn't feel more cramped/compact than the other pages. */ .reel-heading{ margin-bottom:24px; min-height:1px; } .reel-heading-panel{ display:none; } .reel-heading-panel.active{ display:block; } .reel-heading-panel .eyebrow{ margin-bottom:4px; } .reel-heading-panel h4{ font-family:'Bebas Neue',sans-serif; font-size:1.9rem; letter-spacing:.02em; margin:0; } /* A CSS Grid (rather than flex) lets the arrow buttons be repositioned per breakpoint — flanking just the video row on desktop, or dropped to their own row directly under the position slider on mobile — without needing to move them in the DOM or height-match them via JS. */ .reel-stage{ display:grid; grid-template-columns:192px 1fr 192px; grid-template-rows:auto auto auto; gap:14px; align-items:stretch; } .reel-viewport{ grid-column:2; grid-row:1; } .reel-progress{ grid-column:2; grid-row:2; } .reel-info{ grid-column:2; grid-row:3; } .reel-arrow-prev{ grid-column:1; grid-row:1; } .reel-arrow-next{ grid-column:3; grid-row:1; } .reel-viewport{ position:relative; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--border); } .reel-track{ display:flex; width:100%; transition:transform .55s cubic-bezier(.65,0,.35,1); will-change:transform; } .reel-slide{ flex:0 0 100%; max-width:100%; background:transparent; } .reel-slide-inner{ padding:0; } .video-frame{ position:relative; padding-top:56.25%; border-radius:6px; overflow:hidden; background:#000; } .video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } /* Position indicator: a track with a fixed start/end point and a marker showing where the current clip sits — not a fill/progress bar. The marker can be dragged (or the track clicked) to jump between clips. The element is taller than the visible line so there's a comfortable hit/drag target; the line itself is drawn as a thin centred background. */ .reel-progress{ position:relative; height:20px; margin:20px 6px 0; background:linear-gradient(var(--border), var(--border)) left 10px / 100% 1px no-repeat; cursor:pointer; user-select:none; touch-action:none; } .reel-progress::before, .reel-progress::after{ content:''; position:absolute; top:10px; width:6px; height:6px; border-radius:50%; background:var(--muted-2); transform:translate(-50%,-50%); } .reel-progress::before{ left:0; } .reel-progress::after{ left:100%; } .reel-progress span{ position:absolute; top:10px; left:0; width:10px; height:10px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px var(--bg), 0 0 0 4px var(--gold); transform:translate(-50%,-50%); transition:left .55s cubic-bezier(.65,0,.35,1); cursor:grab; } .reel-progress.dragging span{ cursor:grabbing; transition:none; } #reelTrack.no-anim{ transition:none; } .reel-arrow{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:var(--radius); color:var(--text); background:transparent; cursor:pointer; opacity:.9; transition:opacity .2s ease, border-color .2s ease, color .2s ease; } .reel-arrow-thumb{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; opacity:.35; transition:opacity .2s ease; } .reel-arrow-thumb::after{ content:''; position:absolute; inset:0; background:rgba(0,0,0,.3); } .reel-arrow-icon{ position:relative; z-index:1; flex:0 0 auto; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); background:rgba(10,10,12,.55); backdrop-filter:blur(4px); color:var(--text); transition:border-color .2s ease, background .2s ease, color .2s ease, transform .15s ease; } .reel-arrow-prev .reel-arrow-icon svg{ margin-right:1px; } .reel-arrow-next .reel-arrow-icon svg{ margin-left:1px; } .reel-arrow:hover{ opacity:1; } .reel-arrow:hover .reel-arrow-thumb{ opacity:.5; } .reel-arrow:hover .reel-arrow-icon{ border-color:var(--gold); background:rgba(10,10,12,.75); color:var(--gold-2); } .reel-arrow:active .reel-arrow-icon{ transform:scale(.92); } .reel-info{ margin-top:12px; min-height:1px; } .reel-info-panel{ display:none; } .reel-info-panel.active{ display:block; } .reel-info-panel .clip-list{ margin:0; padding:0; list-style:none; color:var(--muted); font-size:.9rem; text-align:right; } .reel-info-panel .clip-list li{ display:flex; justify-content:flex-end; gap:28px; padding:2px 0; } .reel-info-panel .clip-list li span:first-child{ color:var(--text); } @media (max-width:820px){ .reel-stage{ grid-template-columns:140px 1fr 140px; } } /* Below this point (narrow phones in portrait, or any phone in landscape where height is tight) the arrows drop out from beside the player to their own row directly under the position slider — so the player gets the full available width and its native fullscreen control stays reachable, and the arrows sit right where the slider they control is. */ @media (max-width:600px), (orientation:landscape) and (max-height:500px){ .reel-stage{ grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto auto; gap:10px; } .reel-viewport{ grid-column:1/3; grid-row:1; } .reel-progress{ grid-column:1/3; grid-row:2; } .reel-arrow-prev{ grid-column:1; grid-row:3; justify-self:end; } .reel-arrow-next{ grid-column:2; grid-row:3; justify-self:start; } .reel-info{ grid-column:1/3; grid-row:4; } .reel-arrow{ flex-basis:auto; width:56px; height:56px; border-radius:50%; } .reel-arrow-thumb{ display:none; } .reel-arrow-icon{ width:40px; height:40px; } } /* ---------- BIOGRAPHY ---------- */ .bio-copy p{ margin:0 0 18px; } .bio-copy{ max-width:72ch; padding-bottom:60px; } .bio-photo{ margin:0 0 28px; } .bio-photo img{ width:100%; border-radius:var(--radius); box-shadow:var(--shadow); display:block; } .bio-photo figcaption{ margin-top:8px; font-size:.82rem; color:var(--muted); } .bio-photo figcaption a{ color:var(--muted); text-decoration:underline; } .bio-photo figcaption a:hover{ color:var(--gold-2); } /* ---------- RULES ---------- */ .rules-list{ counter-reset:rule; list-style:none; padding:0; margin:30px 0; } .rules-list li{ counter-increment:rule; position:relative; padding:6px 0 26px 54px; border-left:1px solid var(--border); margin-left:20px; } .rules-list li::before{ content:counter(rule); position:absolute; left:-21px; top:0; width:40px; height:40px; border-radius:50%; background:var(--panel); border:1px solid var(--gold); color:var(--gold-2); display:flex; align-items:center; justify-content:center; font-weight:700; font-family:'Bebas Neue',sans-serif; font-size:1.1rem; } .rules-list h4{ margin:0 0 6px; font-size:1.05rem; letter-spacing:.03em; } .rules-list p{ margin:0; color:var(--muted); } /* utility */ .mt-0{ margin-top:0; } .center{ text-align:center; } .small{ font-size:.85rem; color:var(--muted); }