/* ================================ style.css — Full updated file Thumbnails: 16:9, square corners Buttons: semi-transparent (video visible through) Gallery rows: three rows share the viewport height with tiny gaps Text color: orange (R:75 G:29 B:12) + tiny blur Site-wide background video supported (DavidHeroBak.mp4) Minimal, targeted edits only to address the prompt ================================ */ /* Reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Root variables */ :root{ --site-bg: #000; --text: rgb(75,29,12); /* UPDATED: all text now orange */ --title-color: rgb(75,29,12); /* Titles / email */ --muted: #9a9a9a; --accent: #ffcc00; --max-width: 1400px; --brand-font: 'DM Sans', Arial, Helvetica, sans-serif; --container-padding: 24px; --gutter: 32px; /* each gallery row will take a third of available vertical space (header accounted separately) */ --thumb-row-height: calc((100vh - 92px - 16px) / 3); --thumb-inner-height: calc(var(--thumb-row-height) - 160px); /* fallback not used directly */ --focus-outline: rgba(255,204,0,0.18); } /* Base */ html, body { height: 100%; /* make body transparent so the video element can be visible behind everything */ background: transparent; color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: var(--brand-font); line-height: 1.6; overflow-x: hidden; /* UPDATED: subtle blur for all text */ text-shadow: 0 0 1px rgba(75,29,12,0.25); } /* Prevent scroll while loading */ body.loading { overflow: hidden; } /* ================================ PRELOADER ================================ */ #preloader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: #000; } /* Changed preloader video sizing: - Previously the preloader video was using full-screen min-width/min-height + transform scale (that made it act like a background). You asked to make the loader video size the same as on WhyDoIMakeFilms.html (max-width:80%, max-height:80%) so it appears centered and contained. - Also added support for the alternate #loader id (used on WhyDoIMakeFilms.html) so both pages behave identically when preloading. */ #preloader video, #loader video { /* contain the video inside the preloader dialog */ max-width: 80%; max-height: 80%; width: auto; height: auto; display: block; object-fit: contain; /* no absolute positioning needed because #preloader uses flex centering */ position: relative; transform: none; } /* mobile tweak for loader to be slightly larger relative to screen */ @media (max-width: 768px) { #preloader video, #loader video { max-width: 90%; max-height: 70%; } } /* Hide main UI during preloader */ body.loading header, body.loading main, body.loading footer { display: none; } /* ================================ SITE-WIDE BACKGROUND VIDEO (DavidHeroBak.mp4) — ensure video sits behind content The HTML snippet must be present on each page (placed immediately after ): ================================ */ .site-bg-video { position: fixed; inset: 0; z-index: -1; /* behind page content */ overflow: hidden; pointer-events: none; /* allow clicks through to page UI */ background: #000; /* fallback color while video loads */ } .site-bg-video video { position: absolute; top: 50%; left: 50%; width: auto; height: 100%; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); object-fit: cover; -o-object-fit: cover; will-change: transform; } /* ensure page content sits above the background video layer */ main, footer, header, .about-featured, .partners-strip { position: relative; z-index: 1; } /* Slight mobile tweak so the focal area remains visible */ @media (max-width: 768px) { .site-bg-video video { transform: translate(-50%, -50%) scale(1.02); } } /* Respect user preference for reduced motion: hide video and fall back to poster */ @media (prefers-reduced-motion: reduce) { .site-bg-video, .site-bg-video video { display: none !important; } } /* ================================ HEADER ================================ */ .site-header { position: fixed; top: 0; left: 0; width: 100%; height: 72px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--container-padding); z-index: 60; /* let background video show through but keep text readable */ background: rgba(0,0,0,0.18); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .left-nav, .right-nav { display: flex; align-items: center; gap: 12px; } .right-nav { justify-self: end; } .brand-link { justify-self: center; font-weight: 700; font-size: 20px; letter-spacing: -0.6px; color: var(--text); text-decoration: none; padding: 6px 8px; display: inline-block; } .header-btn, .header-btn:visited { display: inline-block; padding: 8px 14px; border-radius: 22px; /* semi-transparent so video peeks through */ background: rgba(255,255,255,0.10); color: var(--text); border: 1px solid rgba(255,255,255,0.06); font-size: 14px; line-height: 1; transition: background .18s ease, transform .12s ease, color .12s ease; } .header-btn:hover { background: rgba(255,255,255,0.95); color: #000; transform: translateY(-2px); } /* focus visible */ .header-btn:focus, .brand-link:focus { outline: 3px solid var(--focus-outline); outline-offset: 3px; border-radius: 6px; } /* ================================ MAIN layout ================================ */ main { padding-top: 92px; /* room for header */ width: 100%; padding-left: var(--container-padding); padding-right: var(--container-padding); box-sizing: border-box; } /* container (keeps about/profile constrained) */ .container { max-width: var(--max-width); margin: 0 auto; } /* ================================ GALLERY: three rows share the viewport, 3 columns Thumbs kept 16:9; buttons semi-transparent so video shows through ================================ */ .video-gallery { width: 100%; margin: 0 auto; box-sizing: border-box; } /* grid: 3 columns, each row uses --thumb-row-height (which is 1/3 of available viewport) */ .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: var(--thumb-row-height); gap: 8px var(--gutter); /* small vertical gap, horizontal gutter preserved */ width: calc(100% - (var(--container-padding) * 2)); margin: 0 auto 120px auto; /* bottom margin so About never overlaps */ align-items: start; justify-items: center; padding: 6px 0; } /* gallery item fills its grid cell (always visible; no fade) */ .gallery-item { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; box-sizing: border-box; /* show immediately (no fade) */ opacity: 1; transform: none; transition: none; } /* thumbnails: match calculated thumb width (cell), preserve 16:9 and keep max-height so they don't get squished */ :root { --thumb-cell-width: calc((100vw - (var(--container-padding) * 2) - (var(--gutter) * 2)) / 3); } .gallery-item img { width: var(--thumb-cell-width); aspect-ratio: 16 / 9; height: auto; max-height: calc(var(--thumb-row-height) - 74px); /* leave room for button + breathing */ object-fit: cover; border-radius: 0; display: block; transition: transform .28s ease, box-shadow .18s ease; } /* subtle hover zoom on thumb */ .gallery-item:hover img, .gallery-item:focus-within img { transform: scale(1.03); box-shadow: 0 18px 40px rgba(0,0,0,0.45); } /* buttons: semi-transparent so the background video is visible through gutters & buttons */ .gallery-btn { margin-top: 12px; width: var(--thumb-cell-width); max-width: 100%; padding: 12px 16px; border-radius: 0; background: rgba(0,0,0,0.32); color: var(--text); text-decoration: none; text-align: center; font-size: 15px; font-weight: 600; border: 1px solid rgba(255,255,255,0.06); transition: background .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); line-height: 1.25; } .gallery-item:hover .gallery-btn { background: rgba(255,255,255,0.9); color: #000; transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,0.45); } /* ================================ ABOUT section — slight translucent panel so video shows behind but section readable ================================ */ .about-featured { display: flex; gap: 48px; align-items: center; margin-top: 48px; padding-bottom: 28px; flex-wrap: wrap; /* translucent 'glass' so video shows but text is legible */ background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 10px; padding: 28px; } .about-featured .featured-text { flex: 1 1 540px; min-width: 320px; } .about-featured .featured-text h2 { color: var(--title-color); font-size: 28px; margin-bottom: 12px; } .about-featured .featured-text p { color: var(--text); font-size: 16px; line-height: 1.7; } .about-featured .featured-video { flex: 0 0 380px; display: flex; justify-content: center; align-items: center; } .about-featured .featured-video img { width: 100%; max-width: 380px; height: auto; border-radius: 12px; object-fit: cover; } /* social logos */ .social-logos { margin-top: 18px; display: flex; gap: 18px; align-items: center; } .social-logos img { width: 28px; height: 28px; object-fit: contain; } /* ================================ FOOTER - make the email look like a title (red) and remove underline/blue - translucent so video shows behind footer too ================================ */ footer { margin-top: 40px; padding: 40px var(--container-padding); text-align: center; color: var(--muted); background: rgba(0,0,0,0.50); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 10px; } footer p a[href^="mailto:"] { color: var(--title-color); /* red/orange */ text-decoration: none; font-weight: 600; } footer p a[href^="mailto:"]:hover { text-decoration: underline; /* optional on hover */ } /* footer social logos */ .footer-social-logos { margin: 16px 0; display: flex; gap: 18px; justify-content: center; align-items: center; } .footer-social-logos img { width: 28px; height: 28px; object-fit: contain; } /* ================================ RESPONSIVE adjustments ================================ */ /* medium screens: keep 3 columns but reduce thumb heights a bit */ @media (max-width: 1400px) { :root { --thumb-row-height: calc((100vh - 92px - 16px) / 3); } .gallery-item img { max-height: 420px; } :root { --thumb-cell-width: calc((100% - (var(--gutter) * 2)) / 3); } } /* tablet: 2 per row and thumbs adapt */ @media (max-width: 1100px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); width: calc(100% - (var(--container-padding) * 2)); grid-auto-rows: auto; } :root { --thumb-cell-width: calc((100% - var(--gutter)) / 2); } .gallery-item img { width: var(--thumb-cell-width); aspect-ratio: 16 / 9; max-height: 420px; } .gallery-btn { width: var(--thumb-cell-width); } } /* mobile: single column, stacked with natural heights */ @media (max-width: 768px) { .gallery-grid { grid-template-columns: 1fr; gap: 20px; width: calc(100% - 32px); grid-auto-rows: auto; } .gallery-item { padding: 24px 0; min-height: auto; } .gallery-item img { width: 100%; height: auto; max-height: none; aspect-ratio: auto; } .gallery-btn { width: 100%; padding: 12px 14px; font-size: 14px; } .about-featured .featured-video { order: -1; } /* optional: show image before text on very small screens */ } /* Accessibility focus */ .header-btn:focus, .brand-link:focus, .gallery-btn:focus { outline: 3px solid var(--focus-outline); outline-offset: 3px; border-radius: 6px; } /* headings consistent */ h1,h2,h3,h4 { color: var(--title-color); } /* helpers */ .u-center { margin-left: auto; margin-right: auto; text-align: center; } .u-muted { color: var(--muted); }