/* Proxima Nova - add your Adobe Fonts embed or self-hosted @font-face */ /* Example Adobe Fonts embed would go in as */ :root { /* Colors - Dark Theme */ --color-bg: #101012; --color-surface: #18181a; --color-surface-raised: #1f1f22; --color-border: #2a2a2d; --color-border-light: #3a3a3e; --color-text: #f0f0f0; --color-text-secondary: #a0a0a5; --color-text-muted: #909095; --color-accent: #e85d04; --color-accent-hover: #ff6b0a; /* Overlay colors (rgba versions of --color-bg) */ --color-overlay-light: rgba(16, 16, 18, 0.3); --color-overlay-medium: rgba(16, 16, 18, 0.5); --color-overlay-heavy: rgba(16, 16, 18, 0.9); --color-overlay-solid: rgba(16, 16, 18, 0.92); --color-overlay-dense: rgba(16, 16, 18, 0.95); /* Typography */ --font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Font sizes */ --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; /* Spacing scale */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; /* Layout */ --max-width: 1200px; --spacing: 1.5rem; } *, *::before, *::after { box-sizing: border-box; } html { font-size: 106.25%; /* 17px base */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; font-family: var(--font-family); font-weight: var(--weight-regular); line-height: 1.65; color: var(--color-text); background: var(--color-bg); } /* Typography Scale */ h1, h2, h3, h4 { font-family: var(--font-family); line-height: 1.15; margin: 0 0 0.5em; color: var(--color-text); } h1 { font-size: 2.25rem; font-weight: var(--weight-bold); letter-spacing: -0.02em; } h2 { font-size: 1.75rem; font-weight: var(--weight-semibold); letter-spacing: -0.01em; } h3 { font-size: 1.375rem; font-weight: var(--weight-medium); } h4 { font-size: 1.125rem; font-weight: var(--weight-medium); } p { margin: 0 0 1em; } a { color: var(--color-accent); text-decoration: none; transition: color 0.2s ease; } a:hover, a:focus { color: var(--color-accent-hover); } img { max-width: 100%; height: auto; display: block; } /* Header & Navigation */ header { position: sticky; top: 0; background: var(--color-overlay-solid); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); z-index: 100; } nav { max-width: var(--max-width); margin: 0 auto; padding: 1.75rem var(--spacing); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } nav .logo { display: flex; align-items: center; } nav .logo img { height: 72px; width: auto; } nav .logo:hover { opacity: 0.9; } /* Menu Toggle (hamburger) */ .menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; margin-right: -0.5rem; } .menu-toggle span { display: block; width: 24px; height: 2px; background: var(--color-text); margin: 5px 0; transition: transform 0.3s ease, opacity 0.3s ease; } .menu-toggle.is-open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .menu-toggle.is-open span:nth-child(2) { opacity: 0; } .menu-toggle.is-open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } .nav-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 2rem; } nav a { color: var(--color-text-secondary); font-weight: var(--weight-medium); font-size: 1rem; transition: color 0.2s ease; } nav a:hover, nav a:focus { color: var(--color-text); } /* Dropdown Navigation */ .dropdown { position: relative; } .dropdown-menu { display: none; position: absolute; top: 100%; left: -1rem; margin: 0; min-width: 200px; list-style: none; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: 8px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); padding: 0.5rem 0; } /* Invisible bridge for hover tolerance */ .dropdown::after { content: ""; position: absolute; top: 100%; left: -1rem; right: -1rem; height: 0.75rem; display: none; } .dropdown:hover::after { display: block; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } .dropdown-menu li { padding: 0; } .dropdown-menu a { display: block; padding: 0.625rem 1.25rem; font-weight: var(--weight-regular); } .dropdown-menu a:hover { background: var(--color-surface); color: var(--color-text); } /* Main Content */ main { max-width: var(--max-width); margin: 0 auto; padding: calc(var(--spacing) * 2) var(--spacing); position: relative; z-index: 1; } /* Sidebar Layout */ .layout-sidebar { display: grid; grid-template-columns: 1fr 280px; gap: calc(var(--spacing) * 3); align-items: start; } .layout-sidebar article { max-width: 65ch; } .layout-sidebar .sidebar { position: sticky; top: calc(130px + var(--spacing)); } /* Full Width Layout */ .layout-full article { max-width: none; } /* Default article (no layout wrapper) */ article { max-width: 65ch; } article.full-width, article.film { max-width: none; } /* Sidebar Styles */ .sidebar { font-size: 0.9375rem; } .sidebar-section { margin-bottom: calc(var(--spacing) * 1.5); } .sidebar-section h4 { font-size: 0.75rem; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); margin-bottom: 0.75rem; } .sidebar-nav { list-style: none; padding: 0; margin: 0; } .sidebar-nav li { margin-bottom: 0.5rem; } .sidebar-nav a { color: var(--color-text-secondary); font-weight: var(--weight-medium); transition: color 0.2s ease; } .sidebar-nav a:hover { color: var(--color-text); } .sidebar-nav a.active { color: var(--color-accent); } .sidebar-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; padding: var(--space-sm); } .sidebar-card h4 { color: var(--color-text); margin-bottom: var(--space-xs); } .sidebar-card p { color: var(--color-text-secondary); font-size: var(--font-size-sm); margin-bottom: var(--space-sm); } .sidebar-card p:last-child { margin-bottom: 0; } .sidebar-links { list-style: none; padding: 0; margin: 0; } .sidebar-links li { padding: 0.5rem 0; border-bottom: 1px solid var(--color-border); } .sidebar-links li:last-child { border-bottom: none; padding-bottom: 0; } .sidebar-links a { color: var(--color-text-secondary); font-size: 0.875rem; } article h2 { margin-top: 2em; } article ul, article ol { margin: 0 0 1.5em; padding-left: 1.5em; } article li { margin-bottom: 0.5em; } .hero-image { width: 100%; max-height: 500px; object-fit: cover; margin-bottom: var(--spacing); border-radius: 8px; } .meta { color: var(--color-text-muted); font-size: 0.875rem; font-weight: var(--weight-regular); } .status { display: inline-block; background: var(--color-accent); color: var(--color-bg); padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.08em; border-radius: 4px; } /* Hero Video Section */ .hero-video { position: relative; width: 100vw; margin-left: calc(-50vw + 50%); height: 70vh; min-height: 500px; max-height: 800px; overflow: hidden; margin-top: calc(var(--spacing) * -2); margin-bottom: calc(var(--spacing) * 2); } .hero-video video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; width: auto; height: auto; object-fit: cover; } .hero-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, var(--color-overlay-light) 0%, var(--color-overlay-medium) 50%, var(--color-overlay-heavy) 100% ); pointer-events: none; } .hero-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: var(--spacing); z-index: 1; } .hero-content h1 { font-size: clamp(2.5rem, 7vw, 5rem); font-weight: var(--weight-bold); margin-bottom: 0.25em; letter-spacing: -0.03em; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5); } .hero-content .tagline { font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: var(--weight-regular); color: var(--color-text); opacity: 0.9; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); } /* Stats Banner */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--spacing); padding: calc(var(--spacing) * 1.5) 0; border-bottom: 1px solid var(--color-border); margin-bottom: calc(var(--spacing) * 2); } .stat { text-align: center; padding: 1rem 0.5rem; } .stat-number { font-size: 2.5rem; font-weight: var(--weight-bold); color: var(--color-accent); display: block; line-height: 1; margin-bottom: 0.25rem; letter-spacing: -0.02em; } .stat-label { font-size: 0.875rem; font-weight: var(--weight-medium); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; } /* Card Grid */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--spacing); list-style: none; padding: 0; margin: 0; } .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; transition: border-color 0.2s ease, transform 0.2s ease; } .card:hover { border-color: var(--color-border-light); transform: translateY(-2px); } .card img { aspect-ratio: 16/9; object-fit: cover; width: 100%; } .card-content { padding: var(--space-md); } .card h3 { margin-bottom: 0.5rem; } .card h3 a { color: var(--color-text); } .card h3 a:hover { color: var(--color-accent); } .card p { color: var(--color-text-secondary); font-size: 1rem; margin: 0; line-height: 1.55; } .card .status { margin-bottom: 0.75rem; } /* Buttons */ /* Post List */ .post-list { list-style: none; padding: 0; margin: 0; } .post-list li { padding: calc(var(--spacing) * 1.25) 0; border-bottom: 1px solid var(--color-border); } .post-list li:first-child { padding-top: 0; } .post-list time { display: block; color: var(--color-text-muted); font-size: 0.875rem; font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.25rem; } .post-list h2, .post-list h3 { margin-top: 0; margin-bottom: 0.25rem; } .post-list h2 a, .post-list h3 a { color: var(--color-text); } .post-list h2 a:hover, .post-list h3 a:hover { color: var(--color-accent); } .post-list p { color: var(--color-text-secondary); margin: 0; } /* Section Header */ .section-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--spacing); } .section-header h2 { margin-bottom: 0; } .section-header-link { font-size: 0.875rem; color: var(--color-text-muted); font-weight: var(--weight-medium); } .section-header-link:hover { color: var(--color-accent); } /* Partners */ .section-link { margin-top: 1.5rem; } .section-link a { color: var(--color-text-secondary); font-weight: var(--weight-medium); } .section-link a:hover { color: var(--color-accent); } .partners { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing); } .partner-logos { display: flex; align-items: center; justify-content: center; gap: calc(var(--spacing) * 3); flex-wrap: wrap; } .partner-logos img { height: 40px; width: auto; opacity: 0.6; filter: grayscale(100%) brightness(1.5); transition: opacity 0.2s ease, filter 0.2s ease; } .partner-logos img:hover { opacity: 1; filter: grayscale(0%) brightness(1); } /* Footer */ footer { border-top: 1px solid var(--color-border); padding: calc(var(--spacing) * 3) 0; margin-top: calc(var(--spacing) * 2); background: var(--color-surface); } .footer-content { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--spacing); } .footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--spacing) * 2); margin-bottom: calc(var(--spacing) * 2); } .footer-col h4 { font-size: 0.75rem; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin: 0 0 1rem; } .footer-col a { display: flex; align-items: center; gap: 0.5rem; color: var(--color-text-secondary); font-size: 0.9375rem; padding: 0.375rem 0; } .footer-col a:hover { color: var(--color-text); } .footer-col a svg { flex-shrink: 0; opacity: 0.7; } .footer-col a:hover svg { opacity: 1; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: calc(var(--spacing) * 1.5); border-top: 1px solid var(--color-border); } .footer-legal { display: flex; gap: 1.5rem; } .footer-legal a { color: var(--color-text-muted); font-size: 0.8125rem; } .footer-legal a:hover { color: var(--color-text-secondary); } .copyright { color: var(--color-text-muted); font-size: 0.8125rem; margin: 0; } @media (max-width: 768px) { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: calc(var(--spacing) * 1.5); } .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; } } /* Mascot Grid */ .mascot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--spacing); } .mascot-card { display: block; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; transition: border-color 0.2s ease, transform 0.2s ease; color: var(--color-text); } .mascot-card:hover { border-color: var(--color-border-light); transform: translateY(-2px); } .mascot-card:hover h3 { color: var(--color-accent); } .mascot-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; } .mascot-card-content { padding: var(--space-md); } .mascot-card h3 { margin-bottom: 0.25rem; } .mascot-card .client { color: var(--color-accent); font-size: var(--font-size-sm); font-weight: var(--weight-semibold); margin-bottom: var(--space-sm); } .mascot-card p:last-child { color: var(--color-text-secondary); font-size: var(--font-size-sm); margin: 0; } /* Tables */ table { width: 100%; border-collapse: collapse; margin: var(--spacing) 0; font-size: 0.9375rem; } th, td { padding: 0.875rem 1rem; text-align: left; border-bottom: 1px solid var(--color-border); } th { font-weight: var(--weight-semibold); color: var(--color-text); background: var(--color-surface); } td { color: var(--color-text-secondary); } /* Focus States */ a:focus-visible, button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* Section spacing */ section { margin-bottom: calc(var(--spacing) * 3); } section h2 { margin-bottom: var(--spacing); } section > p:first-of-type { color: var(--color-text-secondary); font-size: 1.0625rem; } /* Horizontal rule */ hr { border: none; border-top: 1px solid var(--color-border); margin: calc(var(--spacing) * 2) 0; } /* Blockquotes */ blockquote { border-left: 3px solid var(--color-accent); margin: 1.5em 0; padding: 0.5em 0 0.5em 1.5em; color: var(--color-text-secondary); font-style: italic; } blockquote p:last-child { margin-bottom: 0; } /* Strong/Bold */ strong, b { font-weight: var(--weight-semibold); color: var(--color-text); } /* Code (for any technical content) */ code { background: var(--color-surface); padding: 0.2em 0.4em; border-radius: 4px; font-size: 0.875em; } /* Error Page */ .error-page { text-align: center; padding: calc(var(--spacing) * 4) var(--spacing); } .error-page h1 { font-size: clamp(5rem, 15vw, 10rem); color: var(--color-accent); margin-bottom: 0.25em; line-height: 1; } .error-page p { font-size: 1.125rem; color: var(--color-text-secondary); margin-bottom: 0.5em; } .error-nav { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; } /* Buttons */ .btn, a.btn { display: inline-block; background: var(--color-accent); color: #fff; padding: 0.875rem 1.75rem; font-family: var(--font-family); font-size: var(--font-size-sm); font-weight: var(--weight-semibold); text-decoration: none; border-radius: 6px; border: 2px solid var(--color-accent); cursor: pointer; transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease; } .btn:hover, .btn:focus, a.btn:hover, a.btn:focus { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: #fff; transform: translateY(-1px); } .btn--small { padding: 0.625rem 1.25rem; font-size: var(--font-size-sm); } .btn--secondary { background: transparent; color: var(--color-text); border-color: var(--color-border-light); } .btn--secondary:hover, .btn--secondary:focus { background: var(--color-surface); border-color: var(--color-text-secondary); color: var(--color-text); } /* Newsletter Signup */ .newsletter { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: calc(var(--spacing) * 2); text-align: center; margin: calc(var(--spacing) * 2) 0; } .newsletter h2 { margin-bottom: 0.5rem; } .newsletter p { color: var(--color-text-secondary); margin-bottom: 1.5rem; } .newsletter-form { display: flex; gap: 0.75rem; max-width: 480px; margin: 0 auto; } .newsletter-form input[type="email"] { flex: 1; padding: 0.75rem 1rem; font-family: var(--font-family); font-size: 1rem; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 6px; color: var(--color-text); } .newsletter-form input[type="email"]:focus { outline: none; border-color: var(--color-accent); } .newsletter-form input[type="email"]::placeholder { color: var(--color-text-muted); } .newsletter-small { font-size: 0.8125rem; color: var(--color-text-muted); margin-top: 1rem; margin-bottom: 0; } /* Footer Newsletter (compact) */ .footer-newsletter { margin-bottom: 2rem; } .footer-newsletter p { color: var(--color-text-secondary); font-size: 0.9375rem; margin-bottom: 1rem; } .footer-newsletter .newsletter-form { max-width: 400px; } .footer-newsletter .newsletter-form input[type="email"] { padding: 0.625rem 1rem; font-size: 0.9375rem; } .footer-newsletter .btn { padding: 0.625rem 1.25rem; font-size: 0.875rem; } /* Contact Form */ .contact-form { max-width: 600px; } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; font-weight: var(--weight-medium); margin-bottom: 0.5rem; color: var(--color-text); } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.875rem 1rem; font-family: var(--font-family); font-size: 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 6px; color: var(--color-text); transition: border-color 0.2s ease; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--color-accent); } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--color-text-muted); } .form-group textarea { min-height: 150px; resize: vertical; } .form-group select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23707075' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; } .form-checkbox { display: flex; align-items: flex-start; gap: 0.75rem; } .form-checkbox input[type="checkbox"] { width: auto; margin-top: 0.25rem; accent-color: var(--color-accent); } .form-checkbox label { font-weight: var(--weight-regular); font-size: 0.9375rem; color: var(--color-text-secondary); margin-bottom: 0; } /* Events Section */ .events-list { list-style: none; padding: 0; margin: 0; } .events-list li { display: flex; gap: 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--color-border); } .events-list li:last-child { border-bottom: none; } .event-date { flex-shrink: 0; text-align: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; padding: 0.75rem 1rem; min-width: 70px; } .event-date .month { display: block; font-size: 0.75rem; font-weight: var(--weight-semibold); color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.05em; } .event-date .day { display: block; font-size: 1.5rem; font-weight: var(--weight-bold); color: var(--color-text); line-height: 1.2; } .event-details h4 { margin-bottom: 0.25rem; } .event-details p { color: var(--color-text-secondary); font-size: 0.9375rem; margin: 0; } /* In Development Section */ .in-development { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: calc(var(--spacing) * 2); text-align: center; margin-top: calc(var(--spacing) * 2); } .in-development h2 { margin-bottom: 0.5rem; } .in-development p { color: var(--color-text-secondary); margin-bottom: 1.5rem; } /* Press Kit */ .press-kit { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 1.5rem; display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; } .press-kit-info { flex: 1; min-width: 200px; } .press-kit-info h3 { margin-bottom: 0.25rem; } .press-kit-info p { color: var(--color-text-secondary); font-size: 0.9375rem; margin: 0; } /* Film Grid */ .film-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing); } .film-card { display: block; text-decoration: none; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .film-card:hover { border-color: var(--color-border-light); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3); } .film-card:hover .film-card-poster { transform: scale(1.03); } .film-card-poster { aspect-ratio: 2 / 3; background-image: var(--bg-image); background-size: cover; background-position: center; background-color: var(--color-surface-raised); position: relative; overflow: hidden; transition: transform 0.3s ease; } .film-card-status { position: absolute; top: 0.75rem; left: 0.75rem; background: var(--color-accent); color: var(--color-bg); padding: 0.25rem 0.625rem; font-size: 0.6875rem; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.06em; border-radius: 4px; } .film-card-type { display: inline-block; font-size: 0.6875rem; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); margin-bottom: 0.375rem; } .film-card-content { padding: 1.25rem; } .film-card-content h3 { font-size: 1.125rem; font-weight: var(--weight-semibold); color: var(--color-text); margin: 0 0 0.25rem; line-height: 1.3; } .film-card-year { font-size: 0.875rem; font-weight: var(--weight-medium); color: var(--color-accent); margin: 0 0 0.5rem; } .film-card-description { font-size: 0.875rem; color: var(--color-text-secondary); margin: 0; line-height: 1.5; } @media (max-width: 1024px) { .film-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .film-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .film-card-content { padding: 1rem; } .film-card-content h3 { font-size: 1rem; } .film-card-description { display: none; } } /* Film Hero */ .film-hero { position: relative; width: 100vw; margin-left: calc(-50vw + 50%); height: 50vh; min-height: 360px; max-height: 560px; overflow: hidden; margin-top: calc(var(--spacing) * -2); margin-bottom: calc(var(--spacing) * 2); } .film-hero video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; width: auto; height: auto; object-fit: cover; } .film-hero-image { position: absolute; inset: 0; background-image: var(--bg-image); background-size: cover; background-position: center; } .film-hero-overlay { position: absolute; inset: 0; background: linear-gradient( to top, var(--color-overlay-dense) 0%, rgba(16, 16, 18, 0.4) 50%, rgba(16, 16, 18, 0.2) 100% ); display: flex; align-items: flex-end; } .film-hero-content { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: calc(var(--spacing) * 2) var(--spacing); } .film-hero-content h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: var(--weight-bold); margin: 0; letter-spacing: -0.02em; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5); } .film-hero-content .status { margin-top: 1rem; } .film-hero-content .film-logline { font-size: 1.25rem; font-weight: var(--weight-regular); color: rgba(255, 255, 255, 0.85); margin: 0.5rem 0 0; max-width: 600px; } /* Hero with poster - flex layout, poster on right, breaking out */ .film-hero--with-poster { overflow: visible; margin-bottom: 0; z-index: 2; } .film-hero--with-poster + .layout-full { padding-top: calc(var(--spacing) * 2); } .film-hero--with-poster .film-hero-content { display: flex; align-items: flex-end; gap: 3rem; } .film-hero-text { flex: 1; min-width: 0; } .film-type { display: inline-block; font-size: 0.75rem; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent); margin-bottom: 0.5rem; } .film-hero-poster { flex-shrink: 0; width: 280px; margin-bottom: -160px; position: relative; z-index: 10; } .film-hero-poster img { width: 100%; border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); } .film-hero-actions { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; } .film-hero-actions .btn { padding: 0.625rem 1.25rem; font-size: 0.875rem; } /* No hero, but has poster */ .film-header--with-poster { display: flex; gap: 2rem; align-items: flex-start; margin-bottom: 2rem; } .film-header-poster { flex-shrink: 0; width: 180px; } .film-header-poster img { width: 100%; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); } .film-header-text { flex: 1; } .film-header-text h1 { margin-top: 0; } @media (max-width: 768px) { .film-hero { height: 40vh; min-height: 280px; } .film-hero--with-poster { margin-bottom: calc(var(--spacing) * 2); } .film-hero--with-poster .film-hero-content { flex-direction: column; align-items: flex-start; gap: 1.5rem; } .film-hero-poster { width: 140px; margin-bottom: 0; order: -1; } .film-hero-content .film-logline { font-size: 1rem; } .film-header--with-poster { flex-direction: column; gap: 1.5rem; } .film-header-poster { width: 140px; } } /* Film Detail Styles */ .film-logline { font-size: 1.25rem; color: var(--color-text-secondary); margin: 0.25rem 0 1rem; } .film-synopsis { font-size: 1.125rem; line-height: 1.7; color: var(--color-text); margin-bottom: 2rem; max-width: 65ch; } .film-synopsis p { margin: 0; } .film-meta { display: flex; gap: 2.5rem; padding: 1.25rem 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); margin-bottom: 2rem; } .film-meta-item { display: flex; flex-direction: column; gap: 0.25rem; } .film-meta-label { font-size: 0.75rem; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); } .film-meta-value { font-size: 1rem; font-weight: var(--weight-medium); color: var(--color-text); } @media (max-width: 640px) { .film-meta { flex-direction: column; gap: 1rem; } } /* Film Details Bar */ .film-details { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; padding: 1.25rem 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); margin-bottom: 1.5rem; } .film-details-item { display: flex; flex-direction: column; gap: 0.25rem; } .film-details-label { font-size: 0.6875rem; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); } .film-details-value { font-size: 0.9375rem; font-weight: var(--weight-medium); color: var(--color-text); } /* Film Credits */ .film-credits { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); } /* Film Body: Two-column layout */ .film-body { display: block; } .film-body--with-sidebar { display: grid; grid-template-columns: 1fr 280px; gap: 3rem; align-items: start; } .film-main { min-width: 0; } .film-main > *:first-child { margin-top: 0; } /* Film Sidebar */ .film-sidebar { align-self: start; position: sticky; top: calc(72px + 3.5rem + 2rem); } .film-sidebar-inner { display: flex; flex-direction: column; gap: 2rem; padding: 1.5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; } .film-sidebar-section h3 { font-size: 0.6875rem; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); margin-bottom: 0.75rem; } .film-watch-links { display: flex; flex-direction: column; gap: 0.5rem; } .film-watch-links .btn { width: 100%; text-align: center; padding: 0.75rem 1rem; } .film-credits h2 { font-size: 1.25rem; margin-top: 0; margin-bottom: 1.25rem; } .film-credits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; } .film-credits-item { display: flex; flex-direction: column; gap: 0.375rem; } .film-credits-item--cast { grid-column: 1 / -1; } .film-credits-label { font-size: 0.6875rem; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); } .film-credits-value { font-size: 0.9375rem; color: var(--color-text); } .film-cast-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.5rem 1.5rem; } .film-cast-list li { font-size: 0.9375rem; color: var(--color-text-secondary); } .film-cast-list li strong { color: var(--color-text); font-weight: var(--weight-medium); } /* Film External Links */ .film-external-links { display: flex; flex-direction: column; gap: 0.5rem; } .film-external-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 6px; color: var(--color-text-secondary); font-size: 0.8125rem; font-weight: var(--weight-medium); text-decoration: none; transition: all 0.15s ease; } .film-external-link:hover { background: var(--color-surface-raised); border-color: var(--color-border-light); color: var(--color-text); } .film-external-link svg { flex-shrink: 0; width: 20px; height: 20px; opacity: 0.7; } .film-external-link:hover svg { opacity: 1; } /* Film Content (markdown) */ .film-content { margin-top: 2rem; } .film-content h2 { font-size: 1.25rem; margin-top: 2rem; margin-bottom: 1rem; } .film-content h2:first-child { margin-top: 0; } @media (max-width: 640px) { .film-details { gap: 1rem 1.5rem; } .film-credits-grid { grid-template-columns: 1fr; } .film-cast-list { grid-template-columns: 1fr; } } /* Film Trailers */ .film-trailers { margin-top: 2rem; } .film-trailers h2 { margin-top: 0; margin-bottom: 1rem; } .trailer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 1.5rem; } .trailer-item h3 { font-size: 1rem; margin: 0 0 0.5rem; color: var(--color-text-secondary); } .video-embed { position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0; overflow: hidden; border-radius: 8px; } .video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Related Films - Full Bleed Pre-Footer */ .related-section { width: 100vw; margin-left: calc(-50vw + 50%); background: var(--color-surface); border-top: 1px solid var(--color-border); padding: 1.5rem 0; margin-top: 2rem; /* Compensate for main's padding-bottom (3rem) + footer's margin-top (3rem) = 6rem to create seamless connection with footer (same background color) */ margin-bottom: calc(var(--spacing) * -4); } .related-section-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--spacing); } .related-section h2 { margin: 0 0 1rem; font-size: 0.875rem; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); } .related-films { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 180px)); gap: 1rem; } .film-card-small .film-card-poster { aspect-ratio: 2 / 3; } .film-card-small .film-card-content { padding: 0.75rem; } .film-card-small .film-card-content h3 { font-size: 0.875rem; } @media (max-width: 768px) { .related-films { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .related-films { grid-template-columns: 1fr; } } /* Mobile adjustments */ @media (max-width: 768px) { :root { --spacing: 1.25rem; } h1 { font-size: 1.75rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } /* Sidebar collapses on mobile */ .layout-sidebar { grid-template-columns: 1fr; } .layout-sidebar .sidebar { position: static; order: -1; margin-bottom: var(--spacing); } /* Film sidebar collapses on mobile */ .film-body--with-sidebar { grid-template-columns: 1fr; gap: 2rem; } .film-sidebar { order: -1; position: static; align-self: auto; } .film-sidebar-inner { flex-direction: row; flex-wrap: wrap; gap: 1.5rem; } .film-sidebar-section { flex: 1; min-width: 140px; } .film-watch-links { flex-direction: row; flex-wrap: wrap; } .film-watch-links .btn { width: auto; flex: 1; min-width: 120px; } .hero-video { height: 60vh; min-height: 400px; } /* Mobile Navigation */ .menu-toggle { display: block; } .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-surface); border-bottom: 1px solid var(--color-border); flex-direction: column; gap: 0; padding: 1rem var(--spacing) 1.5rem; max-height: calc(100vh - 100px); overflow-y: auto; } .nav-menu.is-open { display: flex; } .nav-menu > li { width: 100%; border-bottom: 1px solid var(--color-border); } .nav-menu > li:last-child { border-bottom: none; } .nav-menu > li > a { display: block; padding: 1rem 0; font-size: 1.125rem; } .dropdown-menu { position: static; box-shadow: none; border: none; background: transparent; padding: 0 0 0.75rem 1rem; border-radius: 0; min-width: 0; } .dropdown .dropdown-menu { display: block; } .dropdown::after { display: none !important; } .dropdown-menu a { padding: 0.5rem 0; font-size: 1rem; color: var(--color-text-muted); } .dropdown-menu a:hover { background: transparent; color: var(--color-text); } .stats { grid-template-columns: repeat(2, 1fr); } .stat-number { font-size: 2rem; } .card-grid { grid-template-columns: 1fr; } .footer-nav { flex-direction: column; gap: 0.75rem; } .newsletter-form { flex-direction: column; } .press-kit { flex-direction: column; text-align: center; } .events-list li { flex-direction: column; gap: 1rem; } .event-date { align-self: flex-start; } } /* Play Showreel Button */ .play-showreel { display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; background: rgba(255, 255, 255, 0.15); border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 50%; cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .play-showreel svg { width: 40px; height: 40px; color: white; margin-left: 4px; /* Visual centering for play icon */ } .play-showreel:hover { background: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.7); transform: scale(1.08); } .play-showreel:focus-visible { outline: 2px solid white; outline-offset: 4px; } /* Post Styles */ article.post { max-width: none; } .post-header { max-width: 65ch; margin: 0 auto calc(var(--spacing) * 2); position: static; border: none; } .post-header time { display: block; font-size: 0.875rem; font-weight: var(--weight-medium); color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; } .post-header h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; margin-bottom: 0.5rem; } .post-header .post-description, .post-header p { font-size: 1.25rem; color: var(--color-text-secondary); line-height: 1.5; margin: 0; border: none; } .post-content { max-width: 65ch; margin: 0 auto; } .post-content p, .post-content ul, .post-content ol, .post-content blockquote { margin-bottom: 1.5em; } .post-content img { width: calc(100% + 8rem); max-width: none; margin-left: -4rem; margin-right: -4rem; margin-top: 2rem; margin-bottom: 2rem; border-radius: 8px; } @media (max-width: 768px) { .post-content img { width: calc(100% + 2.5rem); margin-left: -1.25rem; margin-right: -1.25rem; border-radius: 0; } } /* Press List */ .press-list { list-style: none; padding: 0; margin: 0; } .press-item { padding: calc(var(--spacing) * 1.25) 0; border-bottom: 1px solid var(--color-border); } .press-item:first-child { padding-top: 0; } .press-item time { display: block; font-size: 0.8125rem; font-weight: var(--weight-medium); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.25rem; } .press-item h3 { margin: 0 0 0.25rem; } .press-item h3 a { color: var(--color-text); } .press-item h3 a:hover { color: var(--color-accent); } .press-source { display: inline-block; font-size: 0.8125rem; font-weight: var(--weight-semibold); color: var(--color-accent); margin-bottom: 0.5rem; } .press-item p { color: var(--color-text-secondary); font-size: 0.9375rem; margin: 0; line-height: 1.5; } .film-press { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); } .film-press .press-item { padding: 0.75rem 0; border-bottom: none; } /* Studio Statement */ .studio-statement { text-align: center; padding: calc(var(--spacing) * 2) var(--spacing); max-width: 800px; margin: 0 auto calc(var(--spacing) * 2); } .studio-statement p { font-size: clamp(1.125rem, 2.5vw, 1.375rem); line-height: 1.7; color: var(--color-text-secondary); margin: 0; } /* Hero Tagline */ .hero-tagline { font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: var(--weight-medium); color: rgba(255, 255, 255, 0.9); margin: 1.5rem 0 0; letter-spacing: 0.15em; text-transform: uppercase; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5); } /* Video Lightbox */ .video-lightbox { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.95); z-index: 1000; align-items: center; justify-content: center; padding: var(--spacing); } .video-lightbox.is-open { display: flex; } .lightbox-close { position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: none; color: white; font-size: 2.5rem; cursor: pointer; opacity: 0.7; transition: opacity 0.2s ease; line-height: 1; padding: 0.5rem; } .lightbox-close:hover { opacity: 1; } .lightbox-content { width: 100%; max-width: 1100px; } .lightbox-content .video-embed { border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } /* Card Stack */ .card-stack { display: flex; flex-direction: column; gap: var(--spacing); margin: calc(var(--spacing) * 1.5) 0; } .card-stack .card { padding: calc(var(--spacing) * 1.5); } .card-stack .card h3 { color: var(--color-accent); font-size: 1.25rem; margin: 0 0 0.75rem; } .card-stack .card p { color: var(--color-text-secondary); margin: 0; line-height: 1.6; max-width: none; } .card-stack .card p + p { margin-top: 1rem; } .heart-acronym { font-size: 0.9375rem; } .heart-acronym strong { color: var(--color-accent); } /* Team Grid */ .team-grid { display: flex; flex-direction: column; gap: calc(var(--spacing) * 2); } .team-member { padding-bottom: calc(var(--spacing) * 2); border-bottom: 1px solid var(--color-border); } .team-member:last-child { border-bottom: none; padding-bottom: 0; } .team-member-info { margin-bottom: 1rem; } .team-member h3 { font-size: 1.375rem; margin: 0 0 0.25rem; } .team-member-role { font-size: 0.9375rem; font-weight: var(--weight-medium); color: var(--color-accent); margin: 0; } .team-member > p { color: var(--color-text-secondary); line-height: 1.7; margin: 0; } /* Page Wide Layout */ article.page-wide { max-width: none; } .page-wide-header { max-width: 800px; margin: 0 auto calc(var(--spacing) * 2); text-align: center; border: none; } .page-wide-header h1 { margin-bottom: 0.5rem; } .page-description, .page-intro { font-size: 1.25rem; color: var(--color-text-secondary); margin: 0 0 1rem; max-width: 65ch; } .page-wide-content { max-width: 800px; margin: 0 auto; } /* Constrain text elements for readability */ .page-wide-content p, .page-wide-content ul, .page-wide-content ol, .page-wide-content blockquote { max-width: 65ch; } .page-wide-content h2 { margin-top: calc(var(--spacing) * 3); } /* Wide elements break out of container */ .page-wide-content .wide { width: 90vw; max-width: 1100px; margin-left: 50%; transform: translateX(-50%); } .page-wide-content img.wide { width: 100%; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); margin-top: calc(var(--spacing) * 2); margin-bottom: calc(var(--spacing) * 2); } /* Allow wide images to break out of paragraph wrappers */ .page-wide-content p:has(> img.wide), .page-wide-content figure.wide { width: 90vw; max-width: 1100px; margin-left: 50%; transform: translateX(-50%); } .page-wide-content p:has(> img.wide) img { width: 100%; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } @media (max-width: 768px) { .page-wide-content .wide, .page-wide-content p:has(> img.wide), .page-wide-content figure.wide { width: 100vw; max-width: none; border-radius: 0; } .page-wide-content img.wide, .page-wide-content p:has(> img.wide) img { border-radius: 0; box-shadow: none; } } /* Studio Feature */ .studio-feature { display: grid; grid-template-columns: 1.2fr 1fr; gap: calc(var(--spacing) * 2); align-items: center; margin: calc(var(--spacing) * 2) 0; } .studio-feature > img { width: 100%; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } .studio-feature-content h2 { margin-top: 0; } .studio-feature-content p { color: var(--color-text-secondary); font-size: 1.0625rem; line-height: 1.6; } .studio-feature-content ul { list-style: none; padding: 0; margin: 1.5rem 0 0; } .studio-feature-content li { position: relative; padding-left: 1.5rem; margin-bottom: 0.75rem; color: var(--color-text-secondary); } .studio-feature-content li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; background: var(--color-accent); border-radius: 50%; } @media (max-width: 768px) { .studio-feature { grid-template-columns: 1fr; gap: var(--spacing); } .studio-feature-image { order: -1; } } /* About Navigation (bottom of page-wide layouts) */ .about-nav { margin-top: calc(var(--spacing) * 3); padding-top: calc(var(--spacing) * 2); border-top: 1px solid var(--color-border); } .about-nav h2 { font-size: 0.75rem; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); margin: 0 0 1.25rem; } .about-nav-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .about-nav-item { display: block; padding: 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; transition: border-color 0.2s ease, transform 0.2s ease; } .about-nav-item:hover { border-color: var(--color-border-light); transform: translateY(-2px); } .about-nav-label { display: block; font-weight: var(--weight-semibold); color: var(--color-text); margin-bottom: 0.25rem; } .about-nav-item:hover .about-nav-label { color: var(--color-accent); } .about-nav-desc { display: block; font-size: 0.875rem; color: var(--color-text-muted); } /* Page Hero */ .page-hero { position: relative; width: 100vw; margin-left: calc(-50vw + 50%); height: 60vh; min-height: 400px; max-height: 650px; overflow: hidden; margin-top: calc(var(--spacing) * -2); margin-bottom: calc(var(--spacing) * 2); } .page-hero-image { position: absolute; inset: 0; background-size: cover; background-position: top center; } .page-hero-overlay { position: absolute; inset: 0; background: linear-gradient( to top, var(--color-bg) 0%, rgba(16, 16, 18, 0.3) 30%, transparent 60% ); display: flex; align-items: flex-end; } .page-hero-content { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: calc(var(--spacing) * 2) var(--spacing); } .page-hero-content h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5); } .page-hero-content p { font-size: 1.25rem; color: rgba(255, 255, 255, 0.85); margin: 0.5rem 0 0; max-width: 600px; } @media (max-width: 768px) { .page-hero { height: 40vh; min-height: 280px; } } /* Contact Page */ .contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--spacing) * 3); align-items: start; } .contact-intro { font-size: 1.125rem; color: var(--color-text-secondary); line-height: 1.6; margin: 0 0 calc(var(--spacing) * 2); } .contact-block { margin-bottom: calc(var(--spacing) * 1.5); } .contact-block h2 { font-size: 0.75rem; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); margin: 0 0 0.5rem; } .contact-block p { margin: 0; font-size: 1.0625rem; } .contact-block p + p { margin-top: 0.25rem; } .contact-block a { color: var(--color-text); font-weight: var(--weight-medium); } .contact-block a:hover { color: var(--color-accent); } .contact-social { list-style: none; padding: 0; margin: 0; display: flex; gap: 1.5rem; } .contact-social a { color: var(--color-text-secondary); } .contact-social a:hover { color: var(--color-accent); } .contact-location { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: calc(var(--spacing) * 1.5); } .contact-location h2 { font-size: 0.75rem; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); margin: 0 0 1rem; } .contact-location address { font-style: normal; line-height: 1.6; color: var(--color-text-secondary); margin-bottom: 1.25rem; } .contact-location address strong { color: var(--color-text); font-weight: var(--weight-semibold); } .contact-map iframe { display: block; border: 1px solid var(--color-border); border-radius: 8px; } .contact-map .map-link { display: block; margin-top: 0.75rem; font-size: 0.8125rem; color: var(--color-text-muted); } .contact-map .map-link:hover { color: var(--color-accent); } @media (max-width: 768px) { .contact-layout { grid-template-columns: 1fr; gap: calc(var(--spacing) * 2); } .contact-location { order: -1; } } /* Case Study */ .case-study-meta { font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); } .case-study-meta strong { color: var(--color-text-secondary); } /* Reduce motion for users who prefer it */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .film-card, .card, .btn { transform: none !important; } } /* Performance hints for animated elements */ .film-card, .card, .btn, .menu-toggle span { will-change: transform; } /* World Map */ .map-container { margin: 0 0 calc(var(--spacing) * 2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; } /* Map Hero - full width above main */ .map-hero { background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .map-hero .world-map-wrapper { max-width: 1400px; margin: 0 auto; } .world-map-wrapper { position: relative; width: 100%; } .world-map-img { width: 100%; height: auto; display: block; } .map-pins { position: absolute; inset: 0; pointer-events: none; } .map-pin { position: absolute; left: var(--pin-x); top: var(--pin-y); transform: translate(-50%, -50%); pointer-events: auto; } .map-pin-dot { display: block; width: 12px; height: 12px; background: var(--color-accent); border-radius: 50%; box-shadow: 0 0 0 4px rgba(232, 93, 4, 0.3); transition: transform 0.2s ease, box-shadow 0.2s ease; } .map-pin:hover .map-pin-dot { transform: scale(1.2); box-shadow: 0 0 0 6px rgba(232, 93, 4, 0.4); } .map-pin-label { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); font-size: 11px; font-weight: var(--weight-medium); color: var(--color-text-secondary); white-space: nowrap; opacity: 0; transition: opacity 0.2s ease; } .map-pin-label--above { top: auto; bottom: calc(100% + 8px); } .map-pin:hover .map-pin-label { opacity: 1; } @media (min-width: 768px) { .map-pin-label { opacity: 1; } } /* Styled Photo */ .photo-styled { display: block; max-width: 100%; margin: calc(var(--spacing) * 2) auto; transform: rotate(-1.5deg); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.4); border-radius: 4px; } /* Photo Grid */ .photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing); width: 90vw; max-width: 1100px; margin: calc(var(--spacing) * 2) 0; margin-left: 50%; transform: translateX(-50%); } .photo-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; aspect-ratio: 4 / 3; } @media (max-width: 600px) { .photo-grid { grid-template-columns: 1fr; } } /* Country Grid */ .country-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--spacing); margin: var(--spacing) 0; } .country-item { display: flex; flex-direction: column; gap: 0.25rem; padding: var(--space-sm); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; } .country-item strong { color: var(--color-text); font-weight: var(--weight-semibold); } .country-item span { font-size: var(--font-size-sm); color: var(--color-text-secondary); }