@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap'); /* Apply Poppins-Light globally */ body { font-family: 'Poppins', sans-serif; font-weight: 300; } /* Styling for the main page title (e.g., "Client Work") */ .page-title { font-family: 'Poppins', sans-serif !important; /* Forces Poppins font */ font-size: 3.5em !important; /* Adjust this value to make the main title larger or smaller */ font-weight: 700 !important; /* Example: make it bold, you can use 300 for light, 400 for regular */ letter-spacing: 0.05em !important; /* Adjust letter spacing if desired */ text-align: center; color: white; margin-top: 50px; /* Adjust as needed */ padding-bottom: 20px; /* Add some space below the title */ font-style: normal; /* If you still want Diatype Mono Variable for the main title, uncomment this: */ /* font-family: "Diatype Mono Variable", monospace !important; */ /* font-variation-settings: 'slnt' 0, 'MONO' 1; */ } /* New styles for the Home button */ .button-15 { display: inline-block; margin-left: 20px; margin-top: 62px; color: #fff; text-decoration: none; padding: 10px 15px; border: 1px solid #fff; border-radius: 5px; font-family: 'Poppins', sans-serif; font-size: 1em; transition: background-color 0.3s ease, color 0.3s ease; } /* Corrected hover selector for the button */ .button-15:hover { background-color: #fff; color: #000; } /* Ensure media-item provides a positioning context for its absolute children */ media-item { position: relative; overflow: hidden; aspect-ratio: 16 / 9; /* Common video aspect ratio, adjust as needed */ width: 100%; /* Ensure it takes full width of its grid cell */ } media-item::part(media) { transition: filter 0.3s ease; object-fit: cover; width: 100%; height: 100%; border-radius: 0rem; } /* This is the rule that darkens the image on hover */ .zoomable:hover::part(media) { filter: brightness(0.2); } .hover-caption { opacity: 0; transition: opacity 0.3s ease; color: white; font-size: 1.4rem !important; /* Adjust this value to change caption size */ font-family: 'Poppins', sans-serif !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; /* <<< CHANGED TO CENTER FOR ALIGNMENT >>> */ pointer-events: none; white-space: normal; font-weight: 300; font-style: normal; z-index: 10; padding: 0 10px; /* Add some horizontal padding for wrapped text */ box-sizing: border-box; /* Ensures padding is included in element's total width */ max-width: 90%; /* Limit width to prevent overflowing image */ } /* This is the rule that reveals the caption on hover */ .zoomable:hover .hover-caption { opacity: 1; } .zoomOverlay, .zoomOverlay::part(overlay) { background-color: #000 !important; } media-lightbox::part(overlay) { background-color: #000 !important; } body { background-color: #000 !important; color: #fff; /* Optional: makes default text readable */ } /* Consolidated zoomOverlay background rules */ .zoomOverlay::before { background-color: #000 !important; } /* Existing styles for page layout (unchanged) */ [id="V0125675741"].page { min-height: var(--viewport-height); } [id="V0125675741"] .backdrop { } .mobile [id="V0125675741"] .backdrop { } .mobile [id="V0125675741"] .page-layout { } [id="V0125675741"] .page-content { align-items: flex-start; width: 100%; } /* Clean white HR line */ hr { border: none; border-top: 1px solid #FFFFFF; width: 100%; margin: 40px auto; } /* H2 styling for section titles (e.g., "Commercials", "Music Videos") */ h2 { color: #ffffff !important; /* Make text white */ background-color: rgba(0, 0, 0, 0) !important; /* Ensure background is transparent */ font-size: 3em !important; /* Ensure it's large */ text-align: center !important; margin-top: 80px !important; margin-bottom: 40px !important; font-family: 'Poppins', sans-serif !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; display: block !important; visibility: visible !important; z-index: 9999 !important; position: relative !important; } /* Add padding below each gallery */ .gallery-padding { padding-bottom: 35px; } /* Custom CSS for the scrolling animation (if still in use) */ @keyframes scroll-left { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } .scrolling-container { overflow: hidden; white-space: nowrap; width: 100%; box-sizing: border-box; margin-bottom: 2rem; background-color: rgba(0, 0, 0, 0.62); padding: 10px 0; padding-top: 0px; } .scrolling-text { animation: scroll-left 20s linear infinite; display: inline-block; padding-left: 100%; font-size: 3em; font-weight: bold; color: white; text-transform: uppercase; letter-spacing: 0.1em; font-family: 'Poppins', sans-serif; } @keyframes scroll-right { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } #scrolling-container-right { overflow: hidden; white-space: nowrap; width: 100%; box-sizing: border-box; margin-top: 2rem; margin-bottom: 2rem; background-color: rgba(0, 0, 0, 0.62); padding: 10px 0; padding-top: 116px; } #scrolling-text-right { animation: scroll-right 20s linear infinite; display: inline-block; padding-right: 100%; font-size: 2.8em; font-weight: bold; color: white; text-transform: uppercase; letter-spacing: 0.08em; font-family: 'Poppins', sans-serif; }

FILM TITLE ONE

2023

SECOND FILM

2022

A THIRD MOVIE

2021

THE FINAL CUT

2020

Use code with caution. Html CSS Copy and paste this into your site's global CSS editor. Generated css /* Main container to add padding and center the gallery on the page, similar to the reference site. */ .film-gallery-container { padding: 20px; max-width: 1400px; /* Adjust as needed */ margin: 0 auto; } /* The Grid System for the gallery. Starts as 2 columns and collapses to 1 on smaller screens. */ .film-gallery { display: grid; grid-template-columns: repeat(2, 1fr); /* Two equal-width columns */ gap: 20px; /* The space between the grid items */ } /* Each individual gallery item (the link). This is the MOST IMPORTANT part. It acts as the container for both the image and the hover overlay. */ .film-item { position: relative; /* This makes it the positioning context for the overlay */ display: block; /* Ensures the link behaves like a container */ overflow: hidden; /* Hides anything that spills out */ cursor: pointer; aspect-ratio: 16 / 9; /* Ensures a consistent widescreen shape */ } /* The image styling */ .film-item img { width: 100%; height: 100%; object-fit: cover; /* Crucial: scales image to fill box without stretching */ display: block; /* Removes tiny space below image */ transition: transform 0.4s ease; /* Optional: adds a subtle zoom on hover */ } /* The hover overlay that contains the text */ .hover-overlay { position: absolute; /* Takes the overlay out of normal flow */ top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */ /* Hide it by default */ opacity: 0; /* Smooth fade-in transition */ transition: opacity 0.3s ease-in-out; /* Use Flexbox to center the text perfectly */ display: flex; justify-content: center; align-items: center; } /* The container for the text itself */ .hover-text { text-align: center; color: #fff; } /* Styling for the film title */ .hover-text h2 { font-family: 'Helvetica', 'Arial', sans-serif; /* Use a font close to your site's */ font-size: 1.5rem; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; margin: 0; } /* Styling for the year */ .hover-text p { font-family: 'Helvetica', 'Arial', sans-serif; font-size: 1rem; margin-top: 5px; } /* --- THE HOVER EFFECT --- */ /* When you hover over the main link (.film-item)... */ .film-item:hover .hover-overlay { opacity: 1; /* ...make the overlay visible. */ } /* Optional: a subtle zoom effect on the image when hovering */ .film-item:hover img { transform: scale(1.05); } /* --- RESPONSIVE DESIGN --- */ /* For tablets and mobile phones */ @media (max-width: 768px) { .film-gallery { /* Switch to a single column layout */ grid-template-columns: 1fr; } .hover-text h2 { font-size: 1.2rem; /* Slightly smaller text for smaller screens */ } } /* --- RESPONSIVE DESIGN --- */ /* For tablets and mobile phones */ @media (max-width: 768px) { .film-gallery { /* Switch to a single column layout */ grid-template-columns: 1fr; } .button-15 { /* This is the magic part! It lifts the button out of the page flow and fixes it to the browser window. */ position: fixed; /* Position it 20px from the top and 20px from the left */ top: -60px; left: -15px; /* (Optional but recommended) Ensure the button is on top of all other content */ z-index: 1000; } .hover-text h2 { font-size: 1.2rem; /* Slightly smaller text for smaller screens */ } }

FILMS

Year of the Dragon

Good Luck

Things Behind the Sun

Tenth Generation

Baba, do you remember?

Eleanor in the evening