/* ============================================================================= Torin Gunnell Digital (TGD) — Site Styles ----------------------------------------------------------------------------- Hand-coded, original. Design system per CLAUDE.md §5 (warm-luxury editorial). Do NOT import or copy any other studio's CSS. This is TGD's own. CONTENTS 1. Design tokens 2. Reset & base 3. Typography 4. Layout primitives & utilities 5. Buttons & links 6. Reveal-on-scroll motion (gated behind html.js) 7. Header: announcement bar, nav, hamburger, mobile menu 8. Media sections (full-bleed reel, framed media, aspect-ratio boxes) 9. Home: intro, featured portfolio, mid-page film, about teaser 10. Portfolio grid (asymmetric) 11. Film page (Vimeo embed, story, stills) 12. Investment, Who We Are, Contact 13. Footer CTA + site footer 14. Accessibility + responsive + reduced motion MEDIA NOTE No media lives in this repo (CLAUDE.md hard rule). Photos / hover clips are referenced from Cloudflare R2; full films embed from Vimeo. Until those are uploaded, aspect-ratio boxes show a warm placeholder fill so layout is stable and intentional rather than broken. MOTION NOTE Reveal animations only apply when is set (scripts.js adds it). With no JS, everything is visible. JS adds `.is-visible` on scroll-in. ========================================================================== */ /* ============================================================================= 1. Design tokens ========================================================================== */ :root { /* Color (CLAUDE.md §5) */ --bg: #f4efe7; /* warm paper — primary background */ --bg-deep: #efe7da; /* slightly deeper paper for gradients */ --ink: #1c1a17; /* warm near-black — primary text */ --ink-soft: #6f6960; /* muted text, captions, labels */ --line: rgba(28, 26, 23, .14); /* hairline borders */ --accent: #9a7b4f; /* understated brass — hover/detail only */ --dark: #1c1a17; /* dark sections / inverted blocks */ --paper-on-dark: #f4efe7; /* Type */ --font-display: "Cormorant Garamond", Garamond, "Times New Roman", serif; --font-ui: "Jost", "Helvetica Neue", Arial, sans-serif; /* Layout */ --container: 1680px; --measure: 60ch; /* readable text column */ --gutter: clamp(1.25rem, 5vw, 4rem); /* Header */ --announcement-h: 38px; --nav-h: 80px; --header-h: calc(var(--announcement-h) + var(--nav-h)); /* Spacing scale */ --space-2xs: .5rem; --space-xs: .875rem; --space-sm: 1.25rem; --space-md: 2rem; --space-lg: clamp(3rem, 7vw, 6rem); --space-xl: clamp(5rem, 12vw, 11rem); /* Motion (CLAUDE.md §5) */ --ease: cubic-bezier(.4, 0, .2, 1); --dur: .4s; } html.announcement-dismissed { --announcement-h: 0px; } /* ============================================================================= 2. Reset & base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-weight: 300; font-size: clamp(1rem, .95rem + .2vw, 1.125rem); line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } body.nav-open { overflow: hidden; } img, picture, video, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } h1, h2, h3, h4, p, figure { margin: 0; } /* ============================================================================= 3. Typography ========================================================================== */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.08; letter-spacing: .005em; } h1 { font-size: clamp(2.75rem, 6.5vw, 6.5rem); } h2 { font-size: clamp(2rem, 4.5vw, 4rem); } h3 { font-size: clamp(1.5rem, 2.6vw, 2.25rem); } em { font-style: italic; } strong { font-weight: 500; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } /* Large editorial lead/statement type. */ .lead { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.6rem); line-height: 1.2; } .statement { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 5vw, 4.25rem); line-height: 1.1; } .statement em, .accent-text { color: var(--accent); font-style: italic; } /* Trim the bottom whitespace below the brand statement before the about teaser. */ .brand-statement { padding-bottom: var(--space-md); } /* Tighten the gap between the filmmaker teaser and the investment preview. */ .section--pair-top { padding-bottom: var(--space-md); } .section--pair-bottom { padding-top: var(--space-md); } /* ---- Investment preview: text + button left, staggered images right ---- */ .invest-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; } .invest-preview-text .statement { margin-bottom: 2rem; } .invest-preview-eyebrow { display: block; margin-bottom: 1rem; } .invest-preview-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 2rem; } .invest-preview-list a { font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.8rem); display: inline-block; transition: color var(--dur) var(--ease); } .invest-preview-list a:hover { color: var(--accent); } /* Two overlapping vertical images: a larger one behind, a smaller one overlapping its lower-left, echoing the reference collage. */ .invest-images { position: relative; } .invest-img--back { width: 72%; margin-left: auto; } .invest-img--front { position: absolute; left: 0; bottom: -8%; width: 46%; } @media (max-width: 760px) { .invest-preview-grid { grid-template-columns: 1fr; } /* Keep the collage but give it room below the text. */ .invest-images { margin-top: 2rem; padding-bottom: 2rem; } } /* Uppercase eyebrow / label / nav micro-type (Jost, wide tracking). */ .eyebrow { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .26em; font-size: .72rem; font-weight: 400; color: var(--ink-soft); } /* ============================================================================= 4. Layout primitives & utilities ========================================================================== */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--space-xl); } .section--tight { padding-block: var(--space-lg); } /* Inner pages have no hero behind the fixed header — clear it. */ body:not(.has-hero) main { padding-top: var(--header-h); } html.announcement-dismissed body:not(.has-hero) main { padding-top: var(--nav-h); } /* Page title band for inner pages. */ .page-head { text-align: center; padding-block: var(--space-lg) var(--space-md); } .page-head .eyebrow { display: block; margin-bottom: 1rem; } .page-head p { max-width: 52ch; margin: 1.25rem auto 0; color: var(--ink-soft); } .text-center { text-align: center; } .measure { max-width: var(--measure); } .center-col { margin-inline: auto; } .stack > * + * { margin-top: var(--space-md); } .stack-lg > * + * { margin-top: var(--space-lg); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ============================================================================= 5. Buttons & links ========================================================================== */ .btn { display: inline-block; font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .2em; font-size: .72rem; font-weight: 400; line-height: 1; padding: 1.15em 2.5em; border: 1px solid var(--ink); color: var(--ink); background: transparent; border-radius: 0; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .btn:hover { background: var(--ink); color: var(--bg); } .btn--light { border-color: var(--paper-on-dark); color: var(--paper-on-dark); } .btn--light:hover { background: var(--paper-on-dark); color: var(--ink); } /* Quieter secondary button — sits beside a primary .btn without competing. */ .btn--ghost { border-color: var(--line); color: var(--ink-soft); } .btn--ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); } /* Two (or more) buttons on a single row; wraps gracefully on narrow screens. */ .btn-row { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; } .split-text .btn-row { margin-top: 1.75rem; } /* Text link with a thin brass underline that grows on hover. */ .link-underline { display: inline-block; font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .2em; font-size: .74rem; position: relative; padding-bottom: .3em; } .link-underline::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); } .link-underline:hover::after { transform: scaleX(1); } /* Inline prose links. */ .prose a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dur) var(--ease); } .prose a:hover { color: var(--accent); } /* ============================================================================= 6. Reveal-on-scroll motion (only when html.js) ========================================================================== */ html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; } html.js .reveal.is-visible { opacity: 1; transform: none; } /* Stagger helper: children animate in sequence when parent has .stagger. */ html.js .stagger.is-visible > * { transition-delay: var(--d, 0ms); } /* ============================================================================= 7. Header ========================================================================== */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; color: var(--paper-on-dark); transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); } /* Solid paper header after scrolling away from a dark hero. */ .site-header.is-solid { background: var(--bg); color: var(--ink); box-shadow: 0 1px 0 var(--line); } /* Hide on scroll-down, reveal on scroll-up (JS toggles .is-hidden). */ .site-header.is-hidden { transform: translateY(-100%); } /* ---- Announcement bar ---- */ .announcement { /* min-height (not fixed height) so the bar grows for a wrapped 2nd/3rd line on narrow phones instead of clipping it under overflow:hidden. */ min-height: var(--announcement-h); display: flex; align-items: center; justify-content: center; /* Keep copy off both edges and clear of the absolute close button so it never clips against the screen edge when it wraps on mobile. */ padding-inline: calc(var(--gutter) + 1.75rem); background: var(--dark); color: var(--paper-on-dark); position: relative; overflow: hidden; } html.announcement-dismissed .announcement { display: none; } .announcement p { margin: 0; /* drop base 1em bottom margin that offset flex centering */ font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .22em; font-size: .68rem; line-height: 1; /* reset inherited 1.65 so flex-centering truly centers */ text-align: center; /* centre wrapped lines instead of hugging the left edge */ } /* Narrow phones: tighten tracking so the copy stays two tidy lines. */ @media (max-width: 600px) { .announcement p { letter-spacing: .14em; line-height: 1.25; } } .announcement a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); } .announcement-close { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); width: 16px; height: 16px; opacity: .8; } .announcement-close:hover { opacity: 1; } .announcement-close::before, .announcement-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 1px; background: currentColor; } .announcement-close::before { transform: translate(-50%, -50%) rotate(45deg); } .announcement-close::after { transform: translate(-50%, -50%) rotate(-45deg); } /* ---- Primary nav ---- */ .nav { height: var(--nav-h); max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .nav-group { display: flex; gap: clamp(1.25rem, 2.5vw, 2.75rem); } .nav-group--left { justify-self: start; } .nav-group--right { justify-self: end; } .nav-link { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .2em; font-size: .72rem; font-weight: 400; position: relative; padding-block: .4em; white-space: nowrap; } .nav-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); } .nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); } /* Real Estate: a small outlined button so realtors spot their entrance without the wedding nav losing its quiet. Inherits currentColor, so it reads paper over dark heroes and ink once the header goes solid. */ .nav-link--cta { border: 1px solid currentColor; padding: .55em 1.1em; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .nav-link--cta::after { content: none; } /* no underline — the border is the affordance */ .nav-link--cta:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); } /* ---- Brand: TGD monogram SVG, masked so it inherits currentColor ---- Using the SVG as a CSS mask lets the single black-on-transparent file render white over the dark hero and ink once the header goes solid — no per-page inline SVG or separate light/dark files needed (CLAUDE.md §5). */ .brand { justify-self: center; line-height: 0; display: inline-flex; } .brand-logo { display: block; width: 54px; height: 54px; background-color: currentColor; /* the visible colour of the mark */ -webkit-mask: url("/TGD_logo.svg") center / contain no-repeat; mask: url("/TGD_logo.svg") center / contain no-repeat; transition: width var(--dur) var(--ease), height var(--dur) var(--ease); } /* Visually-hidden text label still lives inside .brand for screen readers. */ /* ---- Hamburger ---- */ .hamburger { display: none; justify-self: end; width: 30px; height: 18px; position: relative; z-index: 120; } .hamburger span, .hamburger span::before, .hamburger span::after { content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), top var(--dur) var(--ease); } .hamburger span { top: 50%; margin-top: -.75px; } .hamburger span::before { top: -8px; } .hamburger span::after { top: 8px; } .hamburger[aria-expanded="true"] span { transform: rotate(45deg); } .hamburger[aria-expanded="true"] span::before { top: 0; opacity: 0; } .hamburger[aria-expanded="true"] span::after { top: 0; transform: rotate(-90deg); } /* ---- Mobile menu ---- */ .mobile-menu { position: fixed; inset: 0; z-index: 110; background: var(--bg); color: var(--ink); padding: calc(var(--nav-h) + 2rem) var(--gutter) 3rem; display: flex; flex-direction: column; justify-content: center; gap: var(--space-lg); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur); } body.nav-open .mobile-menu { opacity: 1; visibility: visible; transform: none; } .mobile-menu nav { display: flex; flex-direction: column; gap: .5rem; } .mobile-menu nav a { font-family: var(--font-display); font-size: clamp(2rem, 9vw, 3.25rem); } .mobile-menu .mobile-meta { display: flex; gap: 1.5rem; } /* ============================================================================= 8. Media sections & aspect-ratio boxes ========================================================================== */ /* Warm placeholder fill for media boxes before R2/Vimeo assets exist. */ .media-fill { background: linear-gradient(135deg, var(--bg-deep), #e6dccb); } .media-box { position: relative; overflow: hidden; width: 100%; } .media-box > picture, .media-box > img, .media-box > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ratio-16-9 { aspect-ratio: 16 / 9; } .ratio-4-5 { aspect-ratio: 4 / 5; } .ratio-5-4 { aspect-ratio: 5 / 4; } .ratio-3-2 { aspect-ratio: 3 / 2; } .ratio-1-1 { aspect-ratio: 1 / 1; } /* Looping clip layered over its poster (revealed on hover for cards). */ .hover-clip { z-index: 1; opacity: 0; transition: opacity .5s var(--ease); } /* ---- Full-bleed hero reel ---- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: var(--paper-on-dark); background: var(--dark); overflow: hidden; } .hero .media-box { position: absolute; inset: 0; } .hero video, .hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; /* Even darkening so the centered headline stays legible over bright footage. */ background: radial-gradient(ellipse at center, rgba(28,26,23,.28) 0%, rgba(28,26,23,.42) 100%), linear-gradient(to top, rgba(28,26,23,.45) 0%, rgba(28,26,23,.1) 40%, rgba(28,26,23,.25) 100%); pointer-events: none; } /* Centered hero content (reference layout): eyebrow + stacked headline. */ .hero { align-items: center; } .hero-inner { position: relative; z-index: 2; width: 100%; max-width: var(--container); margin-inline: auto; padding: var(--gutter); text-align: center; } .hero .eyebrow { color: var(--paper-on-dark); opacity: .85; margin-bottom: 1.5rem; display: block; } .hero-title { color: var(--paper-on-dark); font-size: clamp(1.5rem, 4vw, 3.5rem); line-height: 1.1; letter-spacing: .01em; } /* Second line: lighter weight + italic, slightly larger for the romantic accent. */ .hero-title em { display: block; font-weight: 300; font-style: italic; margin-top: .12em; } .scroll-cue { position: absolute; left: 50%; bottom: 1.5rem; z-index: 2; transform: translateX(-50%); color: var(--paper-on-dark); font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .24em; font-size: .62rem; display: flex; flex-direction: column; align-items: center; gap: .6rem; } .scroll-cue::after { content: ""; width: 1px; height: 30px; background: currentColor; opacity: .6; } /* ---- Mid-page full-bleed film section ---- */ .feature-film { position: relative; min-height: 72vh; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--paper-on-dark); background: var(--dark); overflow: hidden; } .feature-film .media-box { position: absolute; inset: 0; } .feature-film video, .feature-film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Cover-fill a Vimeo background iframe: it letterboxes by default, so scale it to overflow the box (16:9) and center, cropping edges instead of bars. */ .bg-vimeo { position: absolute; inset: 0; overflow: hidden; } .bg-vimeo iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: 56.25vw; /* 16:9 of viewport width */ min-height: 100%; min-width: 177.78vh; /* 16:9 of viewport height — guarantees full cover */ border: 0; pointer-events: none; } .feature-film::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(28,26,23,.4); pointer-events: none; } .feature-film .feature-inner { position: relative; z-index: 2; padding: var(--gutter); } .feature-film h2 { color: var(--paper-on-dark); } .feature-film p { color: var(--paper-on-dark); opacity: .9; margin: 1rem auto 1.75rem; max-width: 42ch; } /* ============================================================================= 9. Home: intro, about teaser ========================================================================== */ .intro { text-align: center; } .intro .eyebrow { display: block; margin-bottom: 1.5rem; } .intro .lead { max-width: 24ch; margin-inline: auto; } /* Full-width, centered prose variant (collaboration section): wider, readable measure for multi-sentence paragraphs rather than the one-line lead. */ .intro--full .lead { max-width: 38ch; margin-inline: auto; font-size: clamp(1.6rem, 3.2vw, 2.9rem); line-height: 1.25; } /* Tighter vertical rhythm for this intro block (less whitespace above/below). */ .intro--full { padding-block: var(--space-lg); } /* Wedding Films intro: span the full container width (matches the grid below). */ .films-intro .lead { max-width: none; } .intro--wide .lead { max-width: 30ch; } .intro .btn { margin-top: 2.5rem; } /* Split intro: copy on the left, a 4:3 film player on the right. */ .intro--split { padding-block: var(--space-lg); text-align: left; } .intro--split .intro-split-grid { display: grid; /* Give the copy the wider column so it spreads across the left. */ grid-template-columns: 1.25fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; } /* Left-aligned; spans the full left column. Larger type so the longer lines stay in proportion to the wider measure. */ .intro--split .intro-copy { max-width: none; } .intro--split .lead { max-width: none; margin-inline: 0; font-size: clamp(1.6rem, 2.7vw, 2.8rem); line-height: 1.25; } .intro--split .intro-heading { margin-bottom: 1.25rem; line-height: 1.05; } .intro--split .intro-player .video-embed { aspect-ratio: 4 / 3; } /* Resting thumbnail over the player; fades out on hover/click (set by JS). */ [data-vol-player] .video-poster { position: absolute; inset: 0; z-index: 2; background-color: var(--dark); background-size: cover; background-position: center; cursor: pointer; opacity: 1; transition: opacity var(--dur) var(--ease); } [data-vol-player] .video-poster.is-hidden { opacity: 0; pointer-events: none; } /* Gentle centre scrim so the play badge stays legible on bright stills. */ [data-vol-player] .video-poster::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(28,26,23,.32) 0%, rgba(28,26,23,.06) 60%); pointer-events: none; } /* "Tap to play" badge centred on the resting thumbnail. */ .play-hint { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: .9rem; color: var(--paper-on-dark); pointer-events: none; text-shadow: 0 1px 8px rgba(28, 26, 23, .45); } .play-circle { width: clamp(3.5rem, 6vw, 4.75rem); height: clamp(3.5rem, 6vw, 4.75rem); display: grid; place-items: center; border: 1px solid rgba(244, 239, 231, .8); border-radius: 50%; background: rgba(28, 26, 23, .28); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); } .play-circle svg { transform: translateX(1px); } /* optically centre the triangle */ .play-label { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .26em; font-size: .62rem; font-weight: 400; } /* Subtle lift when hovering the player (before it fades to video). */ [data-vol-player]:hover .play-circle { background: rgba(28, 26, 23, .5); transform: scale(1.06); } /* Mute/unmute toggle overlaid on the player. */ .vol-toggle { position: absolute; right: clamp(.6rem, 1.5vw, 1rem); bottom: clamp(.6rem, 1.5vw, 1rem); z-index: 3; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 1px solid rgba(244, 239, 231, .4); border-radius: 50%; background: rgba(28, 26, 23, .5); color: var(--paper-on-dark); cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .vol-toggle:hover { background: rgba(28, 26, 23, .8); border-color: var(--accent); } .vol-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .vol-icon { width: 20px; height: 20px; display: block; } /* Default (muted, aria-pressed="false"): show the muted icon. */ .vol-toggle .vol-icon--on { display: none; } .vol-toggle[aria-pressed="true"] .vol-icon--muted { display: none; } .vol-toggle[aria-pressed="true"] .vol-icon--on { display: block; } @media (max-width: 900px) { /* Stack: copy first, player beneath. */ .intro--split .intro-split-grid { grid-template-columns: 1fr; gap: var(--space-md); } .intro--split .intro-copy { max-width: 60ch; } } /* About teaser: image + text side by side. */ .about-teaser { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; } .about-teaser .about-copy { max-width: 42ch; } .about-teaser .eyebrow { display: block; margin-bottom: 1.5rem; } .about-teaser h2 { margin-bottom: 1.5rem; } .about-teaser .link-underline { margin-top: 1.75rem; } /* ============================================================================= 10. Portfolio grid (asymmetric) ========================================================================== */ .section-head { text-align: center; margin-bottom: var(--space-lg); } .section-head .eyebrow { display: block; margin-bottom: 1rem; } /* Left-aligned uppercase label with a hairline rule extending to the right. */ .section-label { display: flex; align-items: center; gap: 1.25rem; margin-bottom: var(--space-md); font-family: var(--font-ui); font-weight: 400; text-transform: uppercase; letter-spacing: .22em; font-size: .78rem; color: var(--ink); } .section-label span { flex: 0 0 auto; } .section-label::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); } /* Featured 3-up strip on the home page. */ .featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.75rem, 1.5vw, 1.25rem); } /* Embedded-trailer variant: card holds an inline Vimeo player with the couple/venue caption beneath. The .video-embed box handles the ratio; this film was shot 4:3, so its box matches to avoid pillarbox bars. */ .film-card--embed .film-meta { margin-top: .9rem; } .film-card--embed .video-embed { aspect-ratio: 4 / 3; } /* Full-width + portfolio-grid embed cards read better as 16:9. */ .film-card--embed.span-6 .video-embed, .film-card--embed.span-3 .video-embed, .film-card--embed.span-2 .video-embed { aspect-ratio: 16 / 9; } /* Standard interactive player card (real Vimeo controls + sound, clickable). */ .film-card--player .video-embed { aspect-ratio: 16 / 9; } /* Hover-to-play affordance. */ .film-card--embed { cursor: pointer; } .film-card--embed iframe { pointer-events: none; } /* hover drives play, not the player UI */ /* Full portfolio: asymmetric rows via explicit spans. */ .portfolio-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(.75rem, 1.5vw, 1.25rem); } .portfolio-grid .film-card { grid-column: span 2; } /* default: 3-up */ .portfolio-grid .span-3 { grid-column: span 3; } /* 2-up row */ .portfolio-grid .span-6 { grid-column: span 6; } /* full-bleed */ .portfolio-grid .span-2 { grid-column: span 2; } /* 3-up */ /* ---- Film card ---- */ .film-card { display: block; } .film-card .media-box { border-radius: 0; } .film-card:hover .hover-clip { opacity: 1; } .film-card .poster { transition: transform .8s var(--ease); } .film-card:hover .poster { transform: scale(1.04); } .film-meta { margin-top: 1rem; } .film-couple { font-family: var(--font-display); font-size: clamp(1.35rem, 2vw, 1.9rem); line-height: 1.1; } .film-couple .amp { font-style: italic; color: var(--accent); padding-inline: .1em; } .film-venue { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .18em; font-size: .68rem; color: var(--ink-soft); margin-top: .4rem; } /* ============================================================================= 11. Film page ========================================================================== */ .film-hero { text-align: center; max-width: 60ch; margin-inline: auto; } .film-hero .eyebrow { display: block; margin-bottom: 1rem; } .film-hero h1 { margin-bottom: .75rem; } .film-hero .film-venue { font-size: .8rem; } /* Responsive Vimeo embed (16:9 padding box). */ .video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--dark); overflow: hidden; } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Hover-to-reveal: a thumbnail covers the player (hiding Vimeo's resting button). On first hover or click, JS adds .is-hidden so it fades out and STAYS gone — the player keeps showing even after the mouse leaves. */ .film-card--player .video-poster { position: absolute; inset: 0; z-index: 2; background-size: cover; background-position: center; cursor: pointer; opacity: 1; transition: opacity var(--dur) var(--ease); } .film-card--player .video-poster.is-hidden { opacity: 0; pointer-events: none; } .film-story { max-width: 60ch; margin-inline: auto; text-align: center; } .film-story p { font-size: 1.15rem; line-height: 1.8; } .stills-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.75rem, 1.5vw, 1.25rem); } /* ============================================================================= 12. Investment, Who We Are, Contact ========================================================================== */ /* ---- Investment ---- */ .invest-intro { text-align: center; max-width: 56ch; margin-inline: auto; } .invest-intro .eyebrow { display: block; margin-bottom: 1rem; } /* Hero subhead + a wider centered measure for the editorial intro. */ .hero-sub { color: var(--paper-on-dark); opacity: .9; margin-top: 1rem; font-size: 1.05rem; } .measure-wide { max-width: 50ch; } /* Collections intro: heading left, body + includes list right. */ .collections-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 5rem); align-items: start; } .collections-body p { margin-bottom: 1rem; } .includes-list { display: flex; flex-direction: column; gap: .6rem; margin-top: .5rem; } .includes-list li { position: relative; padding-left: 1.4rem; font-family: var(--font-ui); letter-spacing: .02em; } .includes-list li::before { content: ""; position: absolute; left: 0; top: .65em; width: 8px; height: 1px; background: var(--accent); } /* Deliverable split rows: square image one side, text the other. */ .deliverables { display: flex; flex-direction: column; gap: var(--space-lg); } .split-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; } .split-row--reverse .split-media { order: 2; } .split-row--top { align-items: start; } .split-row--top .split-text { max-width: none; } .split-text { max-width: 46ch; } .split-text p { margin-top: 1.25rem; } /* Accent section heading used on the deliverable rows. */ .title-accent { font-family: var(--font-display); font-size: clamp(1.8rem, 3.2vw, 2.8rem); line-height: 1.1; } .split-text .eyebrow { display: block; margin-bottom: .75rem; } .split-text .title-accent { margin-bottom: .75rem; } /* "New" badge beside a label. */ .badge { display: inline-block; margin-left: .5rem; padding: .15em .6em; background: var(--accent); color: var(--bg); border-radius: 999px; font-size: .6rem; letter-spacing: .14em; } /* Numbered package deliverables. */ .package-list { list-style: none; counter-reset: pkg; margin: 1.5rem 0; display: flex; flex-direction: column; gap: .65rem; } .package-list li { counter-increment: pkg; position: relative; padding-left: 2rem; font-family: var(--font-ui); letter-spacing: .01em; } .package-list li::before { content: counter(pkg); position: absolute; left: 0; top: 0; font-family: var(--font-display); font-size: 1rem; color: var(--accent); line-height: 1.4; } /* Testimonial over a full-bleed media feature (reuses .feature-film). */ .testimonial-feature { min-height: 70vh; } .testimonial-feature .feature-inner { max-width: 78ch; } .testimonial blockquote, .testimonial { margin: 0; } .testimonial p { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.4rem); line-height: 1.3; color: var(--paper-on-dark); } .testimonial cite { display: block; margin-top: 1.5rem; font-family: var(--font-ui); font-style: normal; text-transform: uppercase; letter-spacing: .2em; font-size: .72rem; color: var(--paper-on-dark); opacity: .85; } /* On-paper testimonial quote (in a split-row, ink on paper). */ .testimonial-quote { margin: 0; } .testimonial-quote p { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 2.1rem); line-height: 1.35; } .testimonial-quote cite { display: block; margin-top: 1.5rem; font-family: var(--font-ui); font-style: normal; text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; color: var(--ink-soft); } .testimonial-quote .amp { font-style: italic; color: var(--accent); } /* Boutique closing statement. */ .boutique h2 { margin-bottom: 1.5rem; } .boutique .lead { margin-bottom: 2rem; } /* Destination: the elevated, full-bleed standout below the three packages. */ .destination-band { min-height: 88vh; } .destination-band::after { /* Deeper, more cinematic scrim than the standard feature-film. */ background: linear-gradient(to top, rgba(28,26,23,.75) 0%, rgba(28,26,23,.45) 50%, rgba(28,26,23,.55) 100%); } .destination-band .feature-inner { max-width: 56ch; } .destination-band .eyebrow { color: var(--paper-on-dark); opacity: .85; display: block; margin-bottom: 1.25rem; } .destination-title { color: var(--paper-on-dark); font-size: clamp(3rem, 9vw, 7rem); line-height: 1; font-style: italic; margin-bottom: 1.5rem; } .destination-band p { color: var(--paper-on-dark); opacity: .92; margin: 0 auto 2rem; max-width: 46ch; } .tier-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(1rem, 3vw, 2.5rem); } .tier { border: 1px solid var(--line); padding: clamp(2rem, 4vw, 3rem); display: flex; flex-direction: column; } .tier h3 { margin-bottom: .5rem; } .tier .tier-price { font-family: var(--font-display); font-size: 1.5rem; color: var(--accent); margin-bottom: 1.5rem; } .tier ul { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 2rem; } .tier li { padding-left: 1.25rem; position: relative; } .tier li::before { content: ""; position: absolute; left: 0; top: .7em; width: 7px; height: 1px; background: var(--accent); } .tier .btn { margin-top: auto; align-self: flex-start; } /* ---- Who We Are ---- */ .about-lead { max-width: 24ch; margin-inline: auto; text-align: center; } .about-body { max-width: 60ch; margin-inline: auto; } .about-body p { font-size: 1.1rem; line-height: 1.8; } /* ---- All The Things ---- */ /* Torin's signature line beneath the "why this exists" letter. */ .letter-sign { margin-top: 2rem; font-family: var(--font-display); font-size: 1.5rem; font-style: italic; } .letter-sign span { display: block; margin-top: .35rem; font-family: var(--font-ui); font-style: normal; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); } /* Inclusive "Love is Love" closing statement. */ .inclusive { border-top: 1px solid var(--line); } .inclusive p { font-size: 1.05rem; line-height: 1.8; } .inclusive .inclusive-flag { font-size: 1.6rem; display: block; margin-bottom: 1rem; } /* Featured example film: a large, centred autoplaying 16:9 player. */ .featured-player { max-width: 1100px; margin-inline: auto; } .featured-player .video-embed { box-shadow: 0 30px 80px -40px rgba(28, 26, 23, .5); } /* Photography gallery: uniform 4:5 grid (every photo cropped to 4:5 cover). JS hides any slot whose image fails to load. */ .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.6rem, 1.5vw, 1rem); } .gallery-grid figure { margin: 0; } .gallery-grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: var(--bg-deep); } @media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .gallery-grid { grid-template-columns: 1fr; } } /* Deliverables: single sticky media beside a collapsible accordion. */ .deliverables-feature .split-media { position: sticky; top: calc(var(--nav-h) + 1.5rem); } .accordion { margin-top: 1.75rem; border-top: 1px solid var(--line); } .accordion details { border-bottom: 1px solid var(--line); } .accordion summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: clamp(.85rem, 2vw, 1.25rem); padding: 1.35rem 0; font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.2; transition: color var(--dur) var(--ease); } .accordion summary::-webkit-details-marker { display: none; } .accordion summary:hover { color: var(--accent); } .accordion summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } .accordion .acc-num { flex: none; font-family: var(--font-ui); font-size: .72rem; letter-spacing: .18em; color: var(--accent); } .accordion .acc-title { flex: 1; } /* Plus icon that becomes a minus when the panel is open. */ .accordion .acc-icon { flex: none; position: relative; width: 1rem; height: 1rem; } .accordion .acc-icon::before, .accordion .acc-icon::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; } .accordion .acc-icon::before { width: 1rem; height: 1px; transform: translate(-50%, -50%); } .accordion .acc-icon::after { width: 1px; height: 1rem; transform: translate(-50%, -50%); transition: transform var(--dur) var(--ease); } .accordion details[open] .acc-icon::after { transform: translate(-50%, -50%) scaleY(0); } .accordion .acc-body { padding: 0 0 1.6rem; max-width: 52ch; } .accordion .acc-body p { margin: 0 0 1.2rem; font-family: var(--font-ui); line-height: 1.8; color: var(--ink-soft); } @media (max-width: 900px) { /* No sticky media when the layout stacks. */ .deliverables-feature .split-media { position: static; } } /* ---- Contact ---- */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; } .contact-intro .eyebrow { display: block; margin-bottom: 1rem; } .contact-intro h1 { margin-bottom: 1.5rem; } .contact-detail { margin-top: 2rem; } .contact-detail dt { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .18em; font-size: .68rem; color: var(--ink-soft); margin-bottom: .25rem; } .contact-detail dd { margin: 0 0 1.25rem; font-size: 1.05rem; } .form-field { margin-bottom: 1.5rem; } .form-field label { display: block; font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .16em; font-size: .68rem; color: var(--ink-soft); margin-bottom: .5rem; } .form-field input, .form-field textarea, .form-field select { width: 100%; font-family: var(--font-ui); font-size: 1rem; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: .65rem 0; border-radius: 0; transition: border-color var(--dur) var(--ease); } .form-field textarea { resize: vertical; min-height: 120px; } .form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--accent); } /* Submission feedback, written by scripts.js. On success the fields collapse (is-sent) and the thank-you message stands alone. */ .form-status { margin: 1.5rem 0 0; font-family: var(--font-ui); font-size: .98rem; line-height: 1.7; color: var(--ink); } .form-status--error { color: #8a3b2e; } .contact-form.is-sent .form-field, .contact-form.is-sent .btn { display: none; } .contact-form.is-sent .form-status { margin-top: 0; } /* ============================================================================= 13. Footer CTA + site footer ========================================================================== */ .footer-cta { position: relative; min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--paper-on-dark); background: var(--dark); overflow: hidden; } .footer-cta .media-box { position: absolute; inset: 0; } .footer-cta video, .footer-cta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .footer-cta::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(28,26,23,.5); } .footer-cta .footer-cta-inner { position: relative; z-index: 2; padding: var(--gutter); } .footer-cta h2 { color: var(--paper-on-dark); margin-bottom: 1.5rem; } .site-footer { background: var(--bg); padding-block: var(--space-lg); border-top: 1px solid var(--line); } .footer-top { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .footer-brand .brand-logo { width: 46px; height: 46px; } .footer-nav { display: flex; gap: clamp(2rem, 5vw, 4rem); flex-wrap: wrap; justify-content: center; } .footer-col h3 { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .2em; font-size: .68rem; font-weight: 400; color: var(--ink-soft); margin-bottom: 1rem; } .footer-col ul { display: flex; flex-direction: column; gap: .6rem; } .footer-col a { font-size: .95rem; transition: color var(--dur) var(--ease); } .footer-col a:hover { color: var(--accent); } .footer-social { display: flex; gap: 1rem; justify-self: end; } .footer-social a { transition: color var(--dur) var(--ease); } .footer-social a:hover { color: var(--accent); } .footer-bottom { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .footer-bottom p { font-size: .72rem; letter-spacing: .04em; color: var(--ink-soft); } /* ============================================================================= 14. Accessibility + responsive + reduced motion ========================================================================== */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--ink); color: var(--bg); padding: .75rem 1.25rem; } .skip-link:focus { left: 1rem; top: 1rem; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ---- Tablet ---- */ @media (max-width: 1024px) { .nav-group { display: none; } .hamburger { display: block; grid-column: 3; justify-self: end; } .brand { justify-self: start; grid-column: 1; } .about-teaser { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; } /* Portfolio collapses toward 2-up. */ .portfolio-grid { grid-template-columns: repeat(2, 1fr); } .portfolio-grid .film-card, .portfolio-grid .span-2, .portfolio-grid .span-3 { grid-column: span 1; } .portfolio-grid .span-6 { grid-column: span 2; } } /* ---- Mobile ---- */ /* Investment page: stack the split layouts on narrower screens. */ @media (max-width: 800px) { .collections-intro { grid-template-columns: 1fr; } .split-row { grid-template-columns: 1fr; gap: 1.5rem; } .split-row--reverse .split-media { order: 0; } .split-text { max-width: none; } } @media (max-width: 680px) { .featured-grid { grid-template-columns: 1fr; } .portfolio-grid { grid-template-columns: 1fr; } .portfolio-grid .span-6 { grid-column: span 1; } .stills-grid { grid-template-columns: 1fr; } .footer-top { grid-template-columns: 1fr; justify-items: center; text-align: center; } .footer-social { justify-self: center; } .footer-bottom { flex-direction: column; align-items: center; text-align: center; } .hero .hero-actions { flex-direction: column; align-items: flex-start; } } /* ---- Reduced motion ---- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } html.js .reveal { opacity: 1; transform: none; } }