/* Bundled build — modules inlined to remove the @import waterfall. Edit sources in the main project. */ /* ===== base.css ===== */ /* ============================================= base.css — design tokens, reset, root typography Dark + Light themes driven by [data-theme] on . ============================================= */ :root { /* ── Brand palette (fixed, theme-independent) ── Cornell red · Hunyadi yellow · Rich black · Glaucous · Powder blue */ --brand-red: #B31818; --brand-yellow: #F3C26C; --brand-black: #04080F; --brand-blue: #507DBC; --brand-blue-light: #A1C6EA; /* ── DARK THEME (default) ── From the MF design system: red accent, yellow secondary, ink-black ground. */ --color-bg: #04080F; --color-bg-alt: #140A0B; /* surface / card */ --color-text: #FFFFFF; --color-muted: #F3C26C; /* secondary text — Hunyadi yellow */ --color-accent: #B31818; /* primary accent — Cornell red */ --color-accent-hover: #8F1313; --color-on-accent: #FFFFFF; /* text/icon on an accent fill (white on red) */ --color-border: #2A1416; --font-primary: 'Roboto', Arial, sans-serif; --max-width: 1200px; --nav-height: 64px; } /* ── LIGHT THEME ── */ :root[data-theme="light"] { --color-bg: #F3ECE0; --color-bg-alt: #FBF6EC; /* surface / card */ --color-text: #2A0B0B; --color-muted: #6B5A45; /* secondary text — warm brown */ --color-accent: #B31818; /* red accent holds across themes */ --color-accent-hover: #8F1313; --color-on-accent: #FFFFFF; --color-border: #E4D9C6; } /* Smooth cross-fade when the theme flips */ html, body { transition: background-color 0.35s ease, color 0.35s ease; } /* ─── Reset ─── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-primary); font-size: 15px; line-height: 1.6; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } ul { list-style: none; } /* ===== layout.css ===== */ /* ============================================= layout.css — site-wide scaffolding: container, sections, header / nav, footer ============================================= */ /* ─── Layout primitives ─── */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 32px; } .section { padding: 80px 0; /* Offset anchor scroll so the fixed header doesn't cover the section top */ scroll-margin-top: var(--nav-height); } .section-dark { background-color: var(--color-bg-alt); } /* ─── Navigation ─── */ header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background-color: var(--color-bg); border-bottom: 1px solid var(--color-border); height: var(--nav-height); } .navbar { max-width: var(--max-width); margin: 0 auto; padding: 0 32px; height: 100%; display: flex; align-items: center; justify-content: space-between; } .nav-logo a { display: inline-flex; align-items: center; } /* Brand wordmark — yellow fill, black outline via paint-order (legible on either theme) */ .nav-logo-svg { height: 22px; width: auto; display: block; } .nav-logo-svg text { font-family: var(--font-primary); font-weight: 900; font-size: 26px; letter-spacing: 0.02em; fill: var(--brand-yellow); stroke: var(--brand-black); stroke-width: 5px; paint-order: stroke fill; stroke-linejoin: round; } /* Right-side nav actions: theme toggle + hamburger */ .nav-actions { display: flex; align-items: center; gap: 14px; } .theme-toggle { background: none; border: 1px solid var(--color-border); color: var(--color-text); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.2s ease, color 0.2s ease; } .theme-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .ic-sun { fill: none; stroke: currentColor; stroke-width: 2; } .theme-toggle .ic-moon { fill: currentColor; stroke: none; } /* Show sun in dark (→ switch to light), moon in light (→ switch to dark) */ .theme-toggle .ic-moon { display: none; } .theme-toggle .ic-sun { display: block; } :root[data-theme="light"] .theme-toggle .ic-sun { display: none; } :root[data-theme="light"] .theme-toggle .ic-moon { display: block; } .nav-links { display: flex; gap: 36px; } .nav-links a { font-size: 13px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text); transition: color 0.2s ease; } .nav-links a:hover { color: var(--color-accent); } .nav-links a.active { color: var(--color-accent); border-bottom: 2px solid var(--color-accent); padding-bottom: 2px; } .nav-toggle { display: none; background: none; border: none; color: var(--color-text); font-size: 22px; cursor: pointer; } /* ─── Footer ─── */ footer { background-color: var(--color-bg-alt); border-top: 1px solid var(--color-border); padding: 56px 0 32px; font-family: var(--font-primary); } .footer-grid { max-width: var(--max-width); margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; align-items: start; } /* Left */ .footer-brand { display: flex; flex-direction: column; gap: 10px; } .footer-mark { display: block; margin-bottom: 4px; } .footer-mark svg { width: 40px; height: 40px; display: block; } .footer-mark-text { font-family: var(--font-primary); font-weight: 900; font-size: 20px; fill: var(--brand-yellow); stroke: var(--brand-black); stroke-width: 3px; paint-order: stroke fill; stroke-linejoin: round; letter-spacing: -0.02em; } .footer-brand-name { font-size: 15px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text); } .footer-brand-tagline { font-size: 12px; font-weight: 300; color: var(--color-muted); line-height: 1.6; max-width: 220px; } .footer-social { display: flex; gap: 16px; margin-top: 6px; } .footer-social a { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); text-decoration: none; transition: color 0.2s ease; } .footer-social a:hover { color: var(--color-accent); } /* Middle */ .footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; text-align: center; } .footer-nav-heading { grid-column: 1 / -1; } .footer-nav-heading { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 4px; } .footer-nav a { font-size: 13px; font-weight: 400; color: var(--color-muted); text-decoration: none; letter-spacing: 0.04em; transition: color 0.2s ease; } .footer-nav a:hover { color: var(--color-text); } /* Right */ .footer-contact { display: flex; flex-direction: column; gap: 10px; text-align: right; } .footer-contact-heading { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 4px; } .footer-contact p, .footer-contact a { font-size: 13px; color: var(--color-muted); line-height: 1.7; text-decoration: none; transition: color 0.2s ease; } .footer-contact a:hover { color: var(--color-text); } /* Bottom bar */ .footer-bottom { max-width: var(--max-width); margin: 40px auto 0; padding: 20px 32px 0; border-top: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; } .footer-bottom p { font-size: 11px; color: var(--color-muted); letter-spacing: 0.05em; } /* ─── Footer responsive ─── */ @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; gap: 36px; } .footer-nav, .footer-contact { text-align: left; } .footer-bottom { flex-direction: column; gap: 8px; text-align: center; } } /* ─── Nav mobile/tablet (drawer) ─── */ /* 6 menu items need room; collapse to a hamburger on tablet & below. */ @media (max-width: 900px) { .nav-links { display: none; flex-direction: column; position: absolute; top: var(--nav-height); left: 0; right: 0; background: var(--color-bg); padding: 20px 24px; border-bottom: 1px solid var(--color-border); gap: 18px; max-height: calc(100vh - var(--nav-height)); overflow-y: auto; } .nav-links.open { display: flex; } .nav-links a.active { border-bottom: none; padding-bottom: 0; } .nav-toggle { display: block; } } /* ─── Small-screen gutters ─── */ @media (max-width: 600px) { .container, .navbar { padding-left: 20px; padding-right: 20px; } .footer-grid, .footer-bottom { padding-left: 20px; padding-right: 20px; } .nav-logo a { font-size: 16px; } } /* ===== components.css ===== */ /* ============================================= components.css — reusable UI patterns used on 2+ pages, plus legacy/unused patterns flagged for review. ============================================= */ /* ─── Inner Page Hero — used on Work + Upcoming ─── */ .page-hero { margin-top: var(--nav-height); padding: 64px 0 48px; background-color: var(--color-bg); border-bottom: 1px solid var(--color-border); } .page-hero-title { font-size: clamp(24px, 3.75vw, 45px); /* −25% */ font-weight: 900; line-height: 1.1; margin-bottom: 12px; } .page-hero-subtitle { font-size: 14px; font-weight: 300; letter-spacing: 0.25em; text-transform: uppercase; color: var(--color-accent); } /* ============================================= PLANNED — intentional stubs for upcoming features. Not currently referenced by any HTML page; will be wired up as features ship. ============================================= */ /* ── PLANNED: Gallery (no current usage) ── */ .gallery-section { padding: 64px 0 80px; } .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .gallery-item { position: relative; overflow: hidden; cursor: pointer; aspect-ratio: 4 / 3; background-color: #111; } .gallery-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.5s ease; } .gallery-item:hover img { transform: scale(1.07); } .gallery-item-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 60%); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: flex-end; padding: 20px; z-index: 2; } .gallery-item:hover .gallery-item-overlay { opacity: 1; } .gallery-item-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text); } /* Upcoming — teaser badge (no current usage; an alt 'shelf-badge' is inline in upcoming.html) */ .teaser-badge { position: absolute; top: 14px; right: 14px; background: var(--color-accent); color: var(--color-on-accent); font-size: 10px; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; padding: 4px 10px; z-index: 3; } @media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .gallery-grid { grid-template-columns: 1fr; } } /* ── PLANNED: Category title (no current usage) ── */ .category-title { font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent); margin: 48px 0 20px; border-left: 4px solid var(--color-accent); padding-left: 14px; } /* ── PLANNED: Portfolio Grid (no current usage) ── */ .portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; } .portfolio-item { cursor: pointer; } .portfolio-thumb { width: 100%; aspect-ratio: 16 / 9; background-color: #111; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; transition: transform 0.3s ease; } .portfolio-thumb:hover { transform: scale(1.02); } .portfolio-thumb.animation { background-color: #0d1a1a; } .portfolio-thumb.photo { background-color: #1a1a0d; } .thumb-placeholder { font-size: 36px; color: #444; user-select: none; } .portfolio-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.4s ease; } .portfolio-thumb:hover img { transform: scale(1.06); } .play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.25); opacity: 0; transition: opacity 0.3s ease; z-index: 2; } .portfolio-thumb:hover .play-overlay { opacity: 1; } .play-overlay span { width: 52px; height: 52px; border: 2px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; padding-left: 4px; } .portfolio-item-title { font-size: 13px; font-weight: 700; color: var(--color-text); margin-top: 8px; } .portfolio-item-duration { font-size: 12px; color: var(--color-accent); margin-top: 2px; } /* ── PLANNED: About / Team grid (no current usage — current homepage uses .about-grid) ── */ .about-intro { font-size: 16px; color: var(--color-muted); max-width: 720px; line-height: 1.8; margin-bottom: 56px; } .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .team-photo-placeholder { width: 100%; aspect-ratio: 3 / 4; background-color: #111; border: 1px solid var(--color-border); margin-bottom: 16px; } .team-photo { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; display: block; margin-bottom: 16px; filter: grayscale(20%); transition: filter 0.3s ease; } .team-member:hover .team-photo { filter: grayscale(0%); } .team-member-name { font-size: 17px; font-weight: 700; color: var(--color-text); } .team-member-role { font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent); margin: 4px 0 10px; } .team-member-bio { font-size: 13px; color: var(--color-muted); line-height: 1.7; } /* ── PLANNED: Legacy responsive for portfolio + team grids ── */ @media (max-width: 900px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } .team-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .portfolio-grid { grid-template-columns: 1fr; } .team-grid { grid-template-columns: 1fr; } } /* ===== index.css ===== */ /* ============================================= index.css — homepage-only styles (hero, flipboard, hero gallery reveal, about grid, clients, contact form, section title) ============================================= */ /* ─── Hero ─── */ .hero { margin-top: var(--nav-height); min-height: calc(100vh - var(--nav-height)); display: flex; align-items: center; justify-content: center; text-align: center; background-color: var(--color-bg); position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.72) 100%); z-index: 1; } .hero-video-bg { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; width: 100%; height: 100%; z-index: 0; overflow: hidden; } .hero-video-panel { position: relative; overflow: hidden; } .hero-video-panel video { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } .hero-content { position: relative; z-index: 2; padding: 0 24px; } @media (max-width: 768px) { /* TODO: confirm mobile panel behavior with team */ .hero-video-bg { grid-template-columns: 1fr; } .hero-video-panel:not(:nth-child(2)) { display: none; } } .hero-title { font-size: clamp(40px, 7vw, 80px); font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 16px; } .hero-subtitle { font-size: 16px; font-weight: 300; letter-spacing: 0.3em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 40px; } .hero-cta { display: inline-block; border: 1px solid var(--color-accent); color: var(--color-accent); padding: 14px 40px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; transition: background 0.2s ease, color 0.2s ease; } .hero-cta:hover { background: var(--color-accent); color: var(--color-on-accent); } /* ─── Section Title (homepage only) ─── */ .section-title { font-size: clamp(23px, 3.1vw, 40px); font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-text); border-bottom: 3px solid var(--color-accent); display: inline-block; padding-bottom: 8px; margin-bottom: 48px; } /* Centre the Clients/Community heading (inline-block underline stays under text) */ #clients .container { text-align: center; } /* ─── Clients ─── */ /* Clients section spans wider so the two logo groups sit closer to the edges */ #clients .container { max-width: 1380px; } /* Two groups of 5 — each a 2×2 grid with the 5th tile centred beneath */ .client-logo-row { display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: flex-start; gap: 32px 56px; padding: 20px 0; } .client-group { display: grid; grid-template-columns: repeat(2, minmax(160px, 230px)); gap: 20px; flex: 0 1 auto; } .client-logo-item { display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--brand, #888) 10%, #ffffff); border: 1px solid rgba(150, 155, 165, 0.45); border-radius: 8px; padding: 22px 24px; min-height: 100px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45); transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, background 0.25s ease; } /* 5th tile spans both columns but stays one-tile wide, centred between them */ .client-logo-item--center { grid-column: 1 / -1; justify-self: center; width: calc(50% - 10px); } .client-logo-item:hover { transform: translateY(-4px); background: color-mix(in srgb, var(--brand, #888) 18%, #ffffff); box-shadow: 0 12px 30px color-mix(in srgb, var(--brand, #000) 35%, transparent); } .client-logo-item img { max-height: 38px; max-width: 100%; width: auto; object-fit: contain; transition: transform 0.25s ease; } .client-logo-item:hover img { transform: scale(1.05); } /* Per-logo size overrides (base is 38px) */ .client-logo-item img.lg-15x { max-height: 56px; } /* Piramal, Swachh */ .client-logo-item img.lg-2x { max-height: 75px; } /* Zomato, UNDP */ /* IFC — enlarge to fill the tile (logo is transparent already) */ .client-logo-item--fill { padding: 12px 16px; } .client-logo-item--fill img.lg-fill { max-height: 50px; max-width: 100%; } @media (max-width: 560px) { .client-group { grid-template-columns: 1fr; } .client-logo-item--center { grid-column: auto; width: 100%; } .client-logo-item { min-height: 82px; padding: 16px; } } /* Stat sub-labels */ .about-stat-sub { display: block; font-size: 12px; font-weight: 400; letter-spacing: 0.04em; color: var(--color-muted); margin-top: 6px; } /* CTA supporting note */ .about-cta-note { font-size: 14px; color: var(--color-muted); line-height: 1.6; max-width: 320px; } /* ─── About Grid Section ─── */ .about-section { width: 100%; /* Offset anchor scroll so the fixed header doesn't cover the section top */ scroll-margin-top: var(--nav-height); } .about-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); width: 100%; gap: 0; min-height: 600px; } .about-box { min-height: 200px; position: relative; overflow: hidden; } /* Text boxes */ .about-text-box { background-color: var(--color-bg); padding: 48px; display: flex; flex-direction: column; justify-content: center; gap: 20px; } .about-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-accent); } .about-headline { font-size: clamp(28px, 3.5vw, 48px); font-weight: 900; line-height: 1.1; color: var(--color-text); } .about-body { font-size: 15px; color: var(--color-muted); line-height: 1.8; max-width: 480px; } /* Box 4 — stats */ .about-text-box--stat { align-items: center; justify-content: center; gap: 16px; background-color: var(--color-bg-alt); } .about-stat { font-size: clamp(22px, 3vw, 38px); font-weight: 900; letter-spacing: 0.04em; color: var(--color-text); text-align: center; } .about-stat + .about-stat { border-top: 1px solid var(--color-border); padding-top: 16px; width: 100%; text-align: center; } /* Box 5 — CTA */ .about-text-box--cta { align-items: flex-start; justify-content: center; background-color: var(--color-bg); } .about-cta-line { font-size: clamp(26px, 3vw, 44px); font-weight: 900; color: var(--color-text); line-height: 1.15; } .about-cta-btn { display: inline-block; border: 1px solid var(--color-accent); color: var(--color-accent); padding: 12px 32px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; transition: background 0.2s ease, color 0.2s ease; margin-top: 8px; } .about-cta-btn:hover { background: var(--color-accent); color: var(--color-on-accent); } /* Media boxes */ .about-media-box { background-color: var(--color-bg-alt); } .about-media-box > img, .about-media-box video { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* ─── About media slideshow (crossfade loop) ─── */ .about-slideshow { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; } .about-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 1600ms cubic-bezier(0.45, 0, 0.55, 1); will-change: opacity; } .about-slide.is-active { opacity: 1; } @media (prefers-reduced-motion: reduce) { .about-slide { transition: none; } } /* About — tablet */ @media (max-width: 1023px) and (min-width: 768px) { .about-grid { grid-template-columns: 1fr; grid-template-rows: none; min-height: unset; } .about-box { min-height: 280px; } .about-media-box { height: 320px; } } /* About — mobile */ @media (max-width: 767px) { .about-grid { grid-template-columns: 1fr; grid-template-rows: none; min-height: unset; } .about-text-box { padding: 36px 24px; } .about-media-box { height: 240px; min-height: 240px; } } /* ─── Contact section (homepage) — centered ─── */ .contact-section .container { text-align: center; } .contact-section .section-title { margin-bottom: 20px; } .contact-intro { max-width: 620px; margin: 0 auto 40px; font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--color-muted); text-align: left; /* text reads left-aligned, but the block stays centred */ } /* Centre the form block; keep field text left-aligned for readability */ .contact-form { margin-left: auto; margin-right: auto; } .contact-form input, .contact-form textarea { text-align: left; } .contact-form { max-width: 680px; display: flex; flex-direction: column; gap: 16px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .contact-form input, .contact-form textarea { background: var(--color-bg-alt); border: 1px solid var(--color-border); color: var(--color-text); padding: 14px 16px; font-family: var(--font-primary); font-size: 14px; width: 100%; outline: none; transition: border-color 0.2s ease; } .contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--color-muted); font-weight: 900; } .contact-form input:focus, .contact-form textarea:focus { border-color: var(--color-accent); } .contact-form button { align-self: center; background: var(--color-accent); color: var(--color-on-accent); font-family: var(--font-primary); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; padding: 14px 40px; border: none; cursor: pointer; transition: background 0.2s ease; } .contact-form button:hover { background: var(--color-accent-hover); } .contact-form button:disabled { opacity: 0.7; cursor: default; } .form-status { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; min-height: 18px; } .form-status.is-ok { color: var(--brand-blue-light); } .form-status.is-error { color: #ff7a7a; } /* ─── Studio intro + Team ─── */ .team-section { text-align: center; } .studio-intro { max-width: 820px; margin: 0 auto 56px; font-size: clamp(16px, 1.4vw, 19px); font-weight: 300; line-height: 1.85; color: var(--color-muted); } .team-heading { margin-bottom: 48px; } /* Cards read left-aligned inside the centred section */ .team-grid { text-align: left; } /* Portrait frame with graceful fallback until a photo is added */ .team-photo-wrap { position: relative; width: 75%; /* 25% smaller than the full card width */ max-width: 75%; aspect-ratio: 3 / 4; background: var(--color-bg-alt); border: 2px solid var(--color-accent); border-radius: 6px; overflow: hidden; margin: 0 auto 16px; /* centre the reduced photo above the text */ } .team-photo-wrap .team-photo { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; margin-bottom: 0; } /* Text sits under the centred photo (same 75% column), left-aligned within it */ .team-member-name, .team-member-role, .team-member-bio { width: 75%; margin-left: auto; margin-right: auto; } .team-photo-wrap.is-empty::after { content: 'Photo coming soon'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #3a4250; } /* Team — mobile: give photos/text more of the (single-column) width */ @media (max-width: 600px) { .team-section { text-align: center; } .team-photo-wrap { width: 84%; max-width: 84%; } .team-member-name, .team-member-role, .team-member-bio { width: 84%; } .studio-intro { font-size: 16px; margin-bottom: 40px; } } /* ─── Flipboard Word Animation ─── */ .flipboard { display: inline-block; vertical-align: middle; position: relative; background: #ffffff; color: #000000; border-radius: 4px; padding: 4px 12px; overflow: hidden; line-height: 1.1; } .fb-sizer { display: inline; visibility: hidden; font-weight: inherit; pointer-events: none; user-select: none; } .fb-back { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: inherit; color: #000000; background: #ffffff; z-index: 0; } .fb-flap { position: absolute; left: 0; right: 0; z-index: 1; background: #ffffff; overflow: hidden; } .fb-top { top: 0; height: 50%; transform-origin: bottom center; } .fb-bottom { top: 50%; bottom: 0; transform-origin: top center; } .fb-text { position: absolute; left: 0; right: 0; height: 200%; display: flex; align-items: center; justify-content: center; font-weight: inherit; color: #000000; white-space: nowrap; padding: 0 12px; } .fb-top .fb-text { top: 0; } .fb-bottom .fb-text { bottom: 0; } /* ─── Hero Gallery Reveal ─── */ .hero-gallery-wrap { max-height: 0; overflow: hidden; opacity: 0; padding-top: 0; width: 100%; transition: max-height 500ms ease-in-out, opacity 400ms ease, padding-top 500ms ease; } .hero-gallery-wrap.open { max-height: 380px; opacity: 1; padding-top: 40px; } .hero-gallery { width: 1300px; max-width: 100%; height: 300px; display: flex; border-radius: 8px; overflow: hidden; margin: 0 auto; border: 1px solid #ffffff; } .hg-item { flex: 1; background: #1a1a1a; display: flex; align-items: center; justify-content: center; border-right: 1px solid #ffffff; cursor: pointer; transition: background 0.2s ease; } .hg-item:last-child { border-right: none; } .hg-item:hover { background: #222; } .hg-icon { width: 52px; height: 52px; border: 2px solid #444; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #444; font-size: 18px; padding-left: 3px; transition: border-color 0.2s ease, color 0.2s ease; } .hg-item:hover .hg-icon { border-color: #777; color: #777; } @media (max-width: 768px) { .hero-gallery { height: 300px; } } /* ─── Mobile overrides for homepage form + section title ─── */ @media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } .section-title { font-size: 23px; } } /* ===== work.css ===== */ /* ============================================= work.css — Work page (carousel gallery per category) ============================================= */ .work-section { padding: 48px 0 96px; background: var(--color-bg); } .work-category { margin-bottom: 56px; } .work-category:last-child { margin-bottom: 0; } /* ── Rail header (title + arrows) ── */ .work-rail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } /* .category-title is defined in components.css; reset its margins here */ .work-rail-head .category-title { margin: 0; } .work-rail-nav { display: flex; gap: 10px; } .work-arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--color-border); background: #0c1119; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, border-color 0.2s ease; } .work-arrow:hover { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); } /* ── Rail (horizontal scroll-snap carousel) ── */ .work-rail { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; user-select: none; } .work-rail::-webkit-scrollbar { display: none; } .work-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; } .work-rail-track { display: flex; gap: 20px; /* Rail lives inside .container, so it already aligns with the heading; no horizontal inset needed here. */ padding: 6px 0 16px; width: max-content; } /* ── Cards ── */ .work-card { display: flex; flex-direction: column; width: 320px; flex-shrink: 0; scroll-snap-align: start; background: #0c1119; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; color: var(--color-text); transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease, box-shadow 0.25s ease; } .work-card--link { cursor: pointer; } .work-card--link:hover { transform: translateY(-6px); border-color: rgba(243, 194, 108, 0.45); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); } .work-card-thumb { position: relative; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 120% at 30% 20%, rgba(80, 125, 188, 0.28) 0%, transparent 55%), linear-gradient(135deg, #121826 0%, #070b12 100%); overflow: hidden; } .work-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.4s ease; } /* Posters are portrait — contain rather than crop */ .work-card-thumb--poster { background: #04080f; } .work-card-thumb--poster .work-card-img { object-fit: contain; } .work-card--link:hover .work-card-img { transform: scale(1.05); } .work-card-initial { font-size: 64px; font-weight: 900; color: rgba(255, 255, 255, 0.10); letter-spacing: -0.02em; user-select: none; } .work-card-play { position: absolute; width: 52px; height: 52px; border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; padding-left: 4px; background: rgba(0, 0, 0, 0.35); opacity: 0; transform: scale(0.85); transition: opacity 0.25s ease, transform 0.25s ease; } .work-card--link:hover .work-card-play { opacity: 1; transform: scale(1); } .work-card-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; } .work-card-brand { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent); } .work-card-title { font-size: 15px; font-weight: 700; line-height: 1.35; color: #fff; } .work-card-cue { margin-top: auto; padding-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-blue-light); } .work-card-cue--muted { color: #4a5667; } .cue-arrow { display: inline-block; transition: transform 0.25s ease; } .work-card--link:hover .cue-arrow { transform: translate(2px, -2px); } /* ── Responsive ── */ @media (max-width: 560px) { .work-section { padding: 32px 0 72px; } .work-card { width: 78vw; } .work-rail-track { padding: 6px 0 16px; gap: 14px; } } /* ===== direction.css ===== */ /* ============================================= direction.css — Direction page (films directed) iPod-style Cover Flow gallery ============================================= */ .direction-section { padding: 28px 0 44px; background: var(--color-bg); overflow: hidden; } .direction-intro { font-size: 15px; color: var(--color-muted); line-height: 1.7; max-width: 640px; margin-bottom: 0; } /* ── Cover-flow stage ────────────────────────────── Full-bleed, 3D perspective so side covers fan back. */ .cf-stage { position: relative; width: 100%; height: 440px; margin: 0 0 4px; perspective: 1500px; perspective-origin: 50% 45%; outline: none; touch-action: pan-y; /* let vertical page scroll pass through */ cursor: grab; } .cf-stage:active { cursor: grabbing; } .cf-stage:focus-visible { box-shadow: inset 0 0 0 2px rgba(243, 194, 108, 0.5); border-radius: 8px; } .cf-track { position: absolute; inset: 0; transform-style: preserve-3d; } /* ── A single cover ── */ .cf-cover { position: absolute; top: 50%; left: 50%; width: 400px; aspect-ratio: 1 / 1; /* square album-art crop */ margin: 0; padding: 0; border: none; background: none; transform-style: preserve-3d; transform-origin: center center; will-change: transform; /* JS sets translateX(-50%) … ; keep vertical centring here */ margin-top: -200px; /* half of the 400px square */ transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease; cursor: pointer; } .cf-cover-inner { position: relative; display: block; width: 100%; height: 100%; border-radius: 6px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); background: #04080f; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); } .cf-cover img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; } /* Dim + desaturate the flanking covers so the centre pops */ .cf-cover-inner::after { content: ''; position: absolute; inset: 0; background: rgba(4, 8, 15, 0.5); transition: opacity 0.5s ease; } .cf-cover.is-active .cf-cover-inner::after { opacity: 0; } .cf-cover.is-active .cf-cover-inner { border-color: rgba(243, 194, 108, 0.55); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(243, 194, 108, 0.25); } /* Floor reflection — a soft mirrored glow under the active cover */ .cf-cover::after { content: ''; position: absolute; left: 6%; right: 6%; top: 102%; height: 42%; background: linear-gradient(rgba(243, 194, 108, 0.10), rgba(243, 194, 108, 0)); filter: blur(6px); opacity: 0; transition: opacity 0.5s ease; transform: translateZ(-1px); pointer-events: none; } .cf-cover.is-active::after { opacity: 1; } /* Play glyph — only on the active cover */ .cf-play { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; background: rgba(4, 8, 15, 0.5); border: 1.5px solid rgba(255, 255, 255, 0.9); color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center; padding-left: 3px; opacity: 0; transform: scale(0.8); transition: opacity 0.3s ease, transform 0.3s ease; z-index: 4; } .cf-cover.is-active:hover .cf-play { opacity: 1; transform: scale(1); } /* ── Arrows ── */ .cf-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 50; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(4, 8, 15, 0.55); color: #fff; font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; padding-bottom: 3px; transition: background 0.2s ease, opacity 0.2s ease; } .cf-arrow:hover:not(:disabled) { background: rgba(4, 8, 15, 0.85); border-color: var(--color-accent); } .cf-arrow:disabled { opacity: 0.15; cursor: default; } .cf-arrow--prev { left: max(16px, calc(50vw - 560px)); } .cf-arrow--next { right: max(16px, calc(50vw - 560px)); } /* ── Caption (active film) ── */ .cf-caption { text-align: center; min-height: 118px; padding-top: 2px; } .cf-title { font-size: clamp(20px, 2.6vw, 30px); font-weight: 900; line-height: 1.15; color: #fff; margin: 0 auto 6px; max-width: 760px; } .cf-tag { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-blue-light); margin: 0 0 14px; } .cf-watch { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-on-accent); background: var(--color-accent); padding: 10px 20px; border-radius: 4px; transition: transform 0.2s ease, opacity 0.2s ease; } .cf-watch:hover { transform: translateY(-2px); opacity: 0.92; } .cf-watch-icon { font-size: 10px; } /* ── Dots ── */ .cf-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 6px 16px 16px; } .cf-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); border: none; padding: 0; cursor: pointer; transition: background 0.3s ease, transform 0.3s ease; } .cf-dot.is-active { background: var(--color-accent); transform: scale(1.4); } /* ══ RESPONSIVE ══ */ @media (max-width: 768px) { .cf-stage { height: 440px; perspective: 1200px; } .cf-cover { width: 340px; margin-top: -170px; } /* half of 340px square */ .cf-arrow { width: 40px; height: 40px; font-size: 22px; } } @media (max-width: 480px) { .direction-section { padding: 40px 0 56px; } .cf-stage { height: 320px; perspective: 900px; } .cf-cover { width: 68vw; margin-top: -34vw; } /* half of a 68vw square */ .cf-arrow { display: none; } /* swipe only on phones */ .cf-caption { min-height: 150px; } } /* ===== upcoming.css ===== */ /* ============================================= upcoming.css — Upcoming Projects page styles ============================================= */ /* ── Upcoming page — scoped overrides only, no changes to main.css ── */ body { transition: background-color 600ms ease; overflow-x: hidden; } /* Hero goes transparent so body color shows through */ .page-hero { background-color: transparent !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; padding: 20px 0 16px !important; } .page-hero-subtitle { font-size: 16px !important; } /* ── Light-background contrast overrides ── */ body.light-bg .page-hero-title, body.light-bg .page-hero-subtitle { color: #111 !important; } body.light-bg .shelf-title { color: #111 !important; } body.light-bg .shelf-desc { color: #333 !important; } body.light-bg .shelf-arrow { background: rgba(0,0,0,0.25); color: #111; } /* ── Shelf wrapper ── */ .shelf-section { position: relative; padding: 40px 0 0; } .shelf-track-wrapper { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; user-select: none; /* Don't let clicks fall through during drag */ } .shelf-track-wrapper::-webkit-scrollbar { display: none; } .shelf-track-wrapper.is-dragging { cursor: grabbing; scroll-snap-type: none; } /* Padding centres the fixed-width poster cards (first/last included) */ .shelf-track { display: flex; align-items: center; gap: 28px; padding: 24px calc(50vw - 123px); width: max-content; } /* ── Cards (portrait film posters) ── */ .shelf-card { width: 245px; flex-shrink: 0; scroll-snap-align: center; position: relative; aspect-ratio: 5 / 7; border-radius: 6px; overflow: hidden; transform: scale(0.86); opacity: 0.4; transition: transform 0.45s cubic-bezier(.25,.46,.45,.94), opacity 0.45s cubic-bezier(.25,.46,.45,.94), box-shadow 0.45s ease; cursor: pointer; } .shelf-card.active { transform: scale(1); opacity: 1; box-shadow: 0 40px 100px rgba(0,0,0,0.7); cursor: default; } .shelf-card img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; pointer-events: none; } .shelf-badge { position: absolute; top: 16px; right: 16px; background: var(--color-accent); color: var(--color-on-accent); font-family: var(--font-primary); font-size: 10px; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; padding: 4px 10px; z-index: 3; } /* ── Arrow buttons ── */ .shelf-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.45); color: #fff; font-size: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease, opacity 0.2s ease; font-family: var(--font-primary); line-height: 1; padding-bottom: 1px; } .shelf-arrow:hover:not(:disabled) { background: rgba(0,0,0,0.75); } .shelf-arrow:disabled { opacity: 0.15; cursor: default; pointer-events: none; } .shelf-arrow--prev { left: 20px; } .shelf-arrow--next { right: 20px; } /* ── Per-card info text ── */ .shelf-info { position: relative; min-height: 340px; max-width: 720px; margin: 32px auto 0; padding: 0 24px; } .shelf-info-item { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 0 24px; text-align: center; opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; } .shelf-info-item.active { opacity: 1; transform: translateY(0); pointer-events: auto; } .shelf-title { font-family: var(--font-primary); font-size: clamp(20px, 2.8vw, 34px); font-weight: 900; color: var(--color-text); margin-bottom: 10px; transition: color 0.35s ease; line-height: 1.1; } .shelf-desc { font-family: var(--font-primary); font-size: 14px; font-weight: 300; color: #c8cfda; letter-spacing: 0.04em; line-height: 1.75; transition: color 0.35s ease; } /* ── Festival laurels — clean, always-visible row below the logline ── */ .laurel-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 24px; max-width: 640px; margin: 22px auto 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .laurel-row img { height: 60px; width: auto; object-fit: contain; opacity: 0.95; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55)); transition: transform 0.25s ease; } .laurel-row img:hover { transform: scale(1.06); } /* On a light extracted background, laurels are white artwork — invert them */ body.light-bg .laurel-row { border-top-color: rgba(0, 0, 0, 0.15); } body.light-bg .laurel-row img { filter: invert(1) drop-shadow(0 1px 4px rgba(255, 255, 255, 0.4)); } /* ── Dot indicators ── */ .shelf-dots { display: flex; justify-content: center; gap: 8px; padding: 8px 0 18px; /* seek bar sits between the cards and the title */ } .shelf-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.2); transition: background 0.3s ease, transform 0.3s ease; cursor: pointer; border: none; } .shelf-dot.active { background: var(--color-accent); transform: scale(1.4); } /* ── Responsive ── */ @media (max-width: 768px) { .shelf-card { width: 196px; } .shelf-track { padding: 20px calc(50vw - 98px); gap: 20px; } .shelf-info { min-height: 380px; } .laurel-row img { height: 50px; } } @media (max-width: 500px) { .shelf-card { width: 72vw; } .shelf-track { padding: 16px 14vw; gap: 16px; } .shelf-arrow { display: none; } .shelf-info { min-height: 460px; } .laurel-row { gap: 12px 18px; } .laurel-row img { height: 42px; } } /* ===== service.css ===== */ /* ============================================= service.css — Service page styles ============================================= */ /* ── Page wrapper ── */ .service-page { display: flex; flex-direction: column; min-height: calc(100vh - 64px); /* 64px = nav-height; min-height lets footer flow below */ } /* ── Zones ── Top is a fixed share; bottom grows to fill all remaining height so the service panels extend down to the bottom edge (no empty band below). */ .top-zone { flex: 0 0 58%; overflow: hidden; display: grid; grid-template-columns: 65fr 35fr; } .bottom-zone { flex: 1 1 0; overflow: hidden; display: grid; grid-template-columns: repeat(5, 1fr); } /* ══ TOP ZONE — LEFT PANEL ══ */ .left-panel { padding: clamp(28px, 3.5vw, 48px); display: flex; flex-direction: column; justify-content: center; gap: 20px; background: var(--color-bg); } .sp-label { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-muted); } .sp-headline { font-size: clamp(24px, 3vw, 45px); /* −25% */ font-weight: 900; line-height: 1.08; color: var(--color-text); margin: 0; } .sp-rule { width: 56px; height: 3px; background: var(--color-accent); border: none; margin: 0; flex-shrink: 0; } .sp-body { font-size: clamp(13px, 1.1vw, 16px); color: var(--color-muted); line-height: 1.75; max-width: 520px; } /* ══ TOP ZONE — RIGHT PANEL ══ */ .right-panel { position: relative; border-left: 1px solid var(--color-border); background: var(--color-bg-alt); overflow: hidden; display: flex; align-items: center; justify-content: center; } .right-panel img, .right-panel video { position: absolute; width: 70%; height: 70%; object-fit: cover; object-position: center; display: block; /* center then shift 20% of image-width to the right */ top: 50%; left: 50%; transform: translate(-70%, -50%); border: 3px solid var(--color-accent); border-radius: 4px; } /* ══ BOTTOM ZONE — SERVICE PANELS ══ */ .service-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: clamp(16px, 2vw, 24px) 16px; border-right: 1px solid var(--color-border); border-top: 1px solid var(--color-border); background: var(--color-bg); cursor: pointer; transition: background 200ms ease; position: relative; } .service-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--color-accent); transform: scaleX(0); transition: transform 200ms ease; } .service-panel:hover { background: var(--color-bg-alt); } .service-panel:hover::before { transform: scaleX(1); } .service-panel:last-child { border-right: none; } .sp-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--color-accent); flex-shrink: 0; } .sp-icon svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .sp-name { font-size: clamp(11px, 1vw, 14px); font-weight: 900; color: var(--color-text); text-align: center; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.3; } .sp-tagline { font-size: 11px; color: var(--color-muted); text-align: center; letter-spacing: 0.04em; } /* ══ BOTTOM ZONE — ENQUIRY PANEL ══ */ .enquiry-panel { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: clamp(16px, 2vw, 20px) clamp(14px, 1.5vw, 20px); border-top: 1px solid var(--color-border); background: var(--color-bg); } .enquiry-label { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 2px; } .enquiry-panel input { background: transparent; border: none; border-bottom: 1px solid var(--color-border); color: var(--color-text); padding: 7px 0; font-size: 12px; font-family: inherit; outline: none; width: 100%; transition: border-bottom-color 200ms ease; } .enquiry-panel input::placeholder { color: var(--color-muted); } .enquiry-panel input:focus { border-bottom-color: var(--color-accent); } .enquiry-panel button { margin-top: 4px; background: var(--color-accent); color: var(--color-on-accent); border: none; padding: 9px; font-weight: 700; font-size: 11px; font-family: inherit; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; border-radius: 3px; transition: opacity 200ms ease; } .enquiry-panel button:hover { opacity: 0.85; } /* ══ RESPONSIVE ══ */ /* Tablet & below — stop forcing a full-height split; stack into flow */ @media (max-width: 900px) { .service-page { min-height: 0; } .top-zone { flex: none; grid-template-columns: 1fr; overflow: visible; } .left-panel { padding: 48px 24px 36px; } .right-panel { border-left: none; border-top: 1px solid var(--color-border); min-height: 0; padding: 28px 24px; } .right-panel img, .right-panel video { position: relative; top: auto; left: auto; width: 100%; height: auto; aspect-ratio: 3 / 2; max-height: 380px; transform: none; } .bottom-zone { flex: none; grid-template-columns: repeat(2, 1fr); overflow: visible; } .service-panel { padding: 30px 16px; } .service-panel:nth-child(2n) { border-right: none; } .enquiry-panel { grid-column: 1 / -1; border-top: 1px solid var(--color-border); } } /* Phones */ @media (max-width: 560px) { .left-panel { padding: 36px 20px 28px; } .right-panel { padding: 22px 20px; } .right-panel img, .right-panel video { aspect-ratio: 4 / 3; } .bottom-zone { grid-template-columns: 1fr; } .service-panel { border-right: none; } .enquiry-panel { padding: 24px 20px; } } /* ===== contact.css ===== */ /* ============================================= contact.css — Contact page styles ============================================= */ .contact-page { min-height: calc(100vh - 64px - 180px); display: flex; flex-direction: column; justify-content: center; padding: 80px 10% 80px 12%; max-width: 1100px; } /* Two-column: intro/details on the left, enquiry form on the right */ .contact-page--split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(40px, 5vw, 88px); max-width: 1320px; margin: 0 auto; padding: clamp(56px, 7vh, 96px) clamp(24px, 6vw, 72px); } .contact-left, .contact-right { min-width: 0; } /* Right column mirrors the homepage form styling (centred block, left-aligned fields) */ .contact-right { text-align: center; } .contact-page--split .contact-sub { margin-bottom: 48px; } @media (max-width: 900px) { .contact-page--split { grid-template-columns: 1fr; gap: 56px; } .contact-right { text-align: left; } } .contact-headline { font-size: clamp(30px, 4.5vw, 60px); /* −25% */ font-weight: 700; color: var(--color-text); text-align: left; letter-spacing: -0.02em; line-height: 1.08; margin: 0 0 32px; } .contact-headline .accent-dot { color: var(--color-accent); } .contact-sub { font-size: clamp(15px, 1.4vw, 19px); font-weight: 400; color: var(--color-muted); line-height: 1.65; margin: 0 0 56px; max-width: 560px; } .contact-sub .accent-link { color: var(--color-accent); text-decoration: none; transition: opacity 0.2s ease; } .contact-sub .accent-link:hover { opacity: 0.75; } .contact-details { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 520px; } .contact-col { display: flex; flex-direction: column; gap: 8px; } .contact-col-label { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); } .contact-col-value { font-size: 16px; font-weight: 400; color: var(--color-text); line-height: 1.7; text-decoration: none; display: block; transition: color 0.2s ease; } a.contact-col-value:hover { color: var(--color-accent); } .contact-col-sub { font-size: 12px; color: var(--color-muted); letter-spacing: 0.06em; } @media (max-width: 768px) { .contact-page { padding: 60px 24px; } .contact-details { grid-template-columns: 1fr; gap: 36px; } .contact-headline { margin-bottom: 24px; } .contact-sub { margin-bottom: 40px; } }