/* ========================================================================== HEATH WEDDINGS — landing v3 "pearl" (CLAUDE REVIEW DRAFT, 2026-10-15) Stylesheet. Layout / motion mechanics are ported from the reference build spec (recruit.pearl-idea.co.jp, sections cited as "ref §n"); colours, type and marks follow the Heath Weddings guide v3.1. Four brand colours only: Black #0D0D0E · Wine #7E2B2E · Champagne #C9AE82 · Paper #EDEDEA (+ the guide's secondary neutrals). ========================================================================== */ /* -------------------------------------------------------------------------- 0. Tokens -------------------------------------------------------------------------- */ :root { --black: #0D0D0E; --wine: #7E2B2E; --champagne: #C9AE82; --paper: #EDEDEA; /* secondary neutrals from the guide */ --line: #2A2A2D; /* hairlines on black */ --panel: #151517; /* raised panel on black */ --mute: #B8B3AA; /* muted text on black (8.9:1) */ --paper-line: #D5D3CC; /* hairlines on paper */ --paper-mute: #55524D; /* muted text on paper (6.5:1) */ --wine-deep: #6A2427; /* hover state for wine surfaces (large shapes only) */ --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif; --font-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace; /* ref §1.8 / brand "Slow Burst": one settle curve everywhere the reference uses a settle */ --ease-settle: cubic-bezier(.22, 1, .36, 1); --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-rise: cubic-bezier(0, .55, .45, 1); --dur: .4s; --transit: var(--dur) var(--ease-out); /* ref --transit-default (all .4s ease-out) */ --radius: 12px; --radius-sm: 8px; --radius-xs: 4px; --hh: 0px; /* fixed header height, set by JS (ref §2.2) */ --ltr: .02em; } /* -------------------------------------------------------------------------- 1. Root sizing — fluid rem, 16px @1920 (ref §1.2) -------------------------------------------------------------------------- */ html { font-size: clamp(9px, .8333333333vw, 1rem); height: 100%; overflow-y: scroll; overflow-x: hidden; scroll-padding-top: max(7.5rem, 120px); /* anchored section tops clear the fixed corner mark */ background: var(--paper); color-scheme: light; } @media screen and (min-width: 48em) and (max-width: 67.5em) { html { font-size: .8125rem; } /* tablet: fluid (the reference's fixed 1080px layout is dropped to avoid horizontal scroll) */ /* 768–1080: catch sub-line wraps inside the hero margin; giant word pair steps down and the second line drops below the first (1440 composition untouched) */ .hero .hero__copy span:first-child b { font-size: min(13rem, 12vw); } .hero .hero__copy span:nth-child(2) { margin-top: .1rem; margin-inline: auto 3rem; } .hero .hero__copy span:nth-child(2) b { font-size: min(10rem, 9.2vw); } } @media screen and (max-width: 47.9375em) { html { font-size: min(3.5897435897vw, .875rem); scroll-padding-top: 6.5rem; } body { font-size: max(15px, 1.0625rem); } .txt-lg, .txt-ll, .txt-md { font-size: max(15px, 1rem); } } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-sans); font-weight: 400; font-size: max(14px, 1.0625rem); line-height: 1.8; letter-spacing: var(--ltr); color: var(--black); background: var(--paper); padding-top: 8rem; /* ref body.home */ word-break: break-word; -webkit-font-smoothing: antialiased; } /* grain — fixed overlay, fine SVG turbulence (brand "film grain", ref §1.1 texture recipe) */ body::after { content: ""; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 260px 260px; opacity: .055; pointer-events: none; z-index: 9000; mix-blend-mode: soft-light; } img, video, svg { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } ul { list-style: none; margin: 0; padding: 0; } h1, h2, h3, h4, p { margin: 0; font-weight: 400; } h1, h2, h3, .ttl-01, .ttl-02, .ttl-04, .ttl-05, .ttl-10, .way__title, .cta-headline, .footer__studio { text-wrap: balance; } p, .txt-ll, .txt-lg, .txt-md, .way__desc { text-wrap: pretty; } ::selection { background: var(--wine); color: var(--paper); } /* Lenis (vendored) — from lenis.css */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* focus — champagne on dark grounds, wine on paper */ :focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; } [data-ground="dark"] :focus-visible, [data-ground="wine"] :focus-visible, .header :focus-visible, .modal-navi :focus-visible, .footer :focus-visible { outline-color: var(--champagne); } .skip { position: absolute; left: 1rem; top: -4rem; background: var(--black); color: var(--paper); padding: .75rem 1.25rem; z-index: 10001; font-family: var(--font-mono); font-size: 12px; } .skip:focus { top: 1rem; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* -------------------------------------------------------------------------- 2. Containers, type helpers (ref §1.4–1.6) -------------------------------------------------------------------------- */ .inner { width: 90%; max-width: 90rem; margin-inline: auto; } .inner-lg { max-width: 100rem; } .inner-xs { max-width: 82rem; } .home-inner { margin-inline: auto; } @media (min-width: 48em) { .home-inner { padding: 0 2.0833333333%; } } @media (max-width: 47.9375em) { .inner, .home-inner { width: 86%; } } .font-display { font-family: var(--font-display); letter-spacing: 0; } .font-display-i { font-family: var(--font-display); font-style: italic; letter-spacing: 0; } .mono { font-family: var(--font-mono); font-weight: 400; text-transform: uppercase; letter-spacing: .12em; font-size: max(11px, .75rem); line-height: 1.6; } .mono-500 { font-weight: 500; } .label-sans { font-family: var(--font-sans); font-weight: 500; font-stretch: 92%; text-transform: uppercase; letter-spacing: .1em; font-size: max(11px, .75rem); } .ttl-01 { font-family: var(--font-display); font-style: italic; font-size: max(44px, 6.25rem); line-height: 1; letter-spacing: 0; } .ttl-02 { font-family: var(--font-display); font-size: max(26px, 3rem); line-height: 1.3; letter-spacing: 0; } .ttl-04 { font-family: var(--font-display); font-size: max(20px, 2rem); line-height: 1.5; letter-spacing: 0; } .ttl-05 { font-family: var(--font-display); font-size: max(18px, 1.5rem); line-height: 1.4; letter-spacing: 0; } .ttl-06 { font-size: max(12px, .8125rem); } .ttl-10 { font-family: var(--font-display); font-style: italic; font-size: max(20px, 1.875rem); line-height: 1.5; letter-spacing: 0; } .txt-ll { font-size: max(15px, 1.375rem); line-height: 1.6; letter-spacing: .01em; } .txt-lg { font-size: max(14px, 1.125rem); line-height: 2; letter-spacing: .04em; } .txt-md { font-size: max(14px, 1rem); line-height: 1.8; letter-spacing: 0; } /* section title bar (ref §7.3 .home-ttl) */ .home-ttl { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; position: relative; padding-bottom: .5rem; margin-bottom: 5.5rem; } .home-ttl::after { content: ""; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0; background: currentColor; opacity: .3; } .home-ttl > .ttl-01 { margin-bottom: -.12em; } .home-ttl .ttl-sub { padding-bottom: .9em; } @media (max-width: 47.9375em) { .home-ttl { margin-bottom: 2.5rem; } .home-ttl .ttl-sub { padding-bottom: .4em; } } /* grounds */ [data-ground="dark"] { background: var(--black); color: var(--paper); } [data-ground="wine"] { color: var(--paper); } [data-ground="paper"] { background: var(--paper); color: var(--black); } .ground-paper-vignette { position: relative; } .ground-paper-vignette::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(140% 120% at 50% 40%, transparent 70%, rgba(13,13,14,.025) 100%); } .ground-paper-vignette > * { position: relative; z-index: 1; } .pc-none { display: none !important; } @media (max-width: 47.9375em) { .pc-none { display: block !important; } .sp-none { display: none !important; } } /* -------------------------------------------------------------------------- 3. Loader (ref §3) — Slow Burst video, copy slide-up, wipe into hero -------------------------------------------------------------------------- */ .loader { display: none; position: fixed; inset: 0; z-index: 10001; background: var(--black); color: var(--paper); overflow: hidden; } html.is-loading .loader { display: block; } .loader__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s var(--ease-out); } .loader.is-video .loader__video { opacity: 1; } .loader__mark { position: absolute; left: 50%; top: 50%; width: 11rem; min-width: 96px; transform: translate(-50%, -50%); opacity: 0; transition: opacity 1.2s var(--ease-out); } .loader.is-fallback .loader__mark { opacity: 1; } .loader.is-fallback .loader__video { display: none; } .loader__copy { position: absolute; right: 0; bottom: 0; width: 100%; padding: 0 8.8541666667% 4.6875% 0; text-align: right; z-index: 2; } .loader__line { overflow: hidden; width: fit-content; margin-inline: auto 0; } .loader__line span { display: block; transform: translateY(110%); transition: transform var(--dur) var(--ease-out); } .loader__line--title { font-family: var(--font-display); font-size: max(32px, 5rem); line-height: 1; letter-spacing: 0; } .loader__line--title em { font-style: italic; color: var(--champagne); } .loader__line--sub { margin-top: .75rem; color: var(--mute); } .loader.is-start .loader__line span { transform: translateY(0); } .loader.is-start .loader__line:nth-child(2) span { transition-delay: .2s; } .loader.is-start .loader__line:nth-child(3) span { transition-delay: .4s; } /* is-end: wipe upward into the hero (reference fades; brief asks for a wipe) */ .loader.is-end { transform: translateY(-100%); transition: transform .6s var(--ease-settle); } .loader.is-end.is-gone { display: none; } @media (max-width: 47.9375em) { .loader__copy { padding: 0 7% 10% 7%; text-align: left; } .loader__line { margin-inline: 0 auto; } } /* -------------------------------------------------------------------------- 4. Header (ref §2) — fixed compact mark persists through the whole page -------------------------------------------------------------------------- */ .header { width: 100%; color: var(--black); transition: color var(--transit); } html[data-ground="dark"] .header, html[data-ground="wine"] .header { color: var(--paper); } /* the mark block: at the top of the page it is a black block (ref .header-logo-bg, multiply) with the compact mark + "Heath Weddings" tag; after is-show the block fades and the mark alone stays fixed in the corner, swapping colour variant with the ground (IntersectionObserver). */ .header__mark { position: fixed; top: 1.5rem; left: 0; z-index: 10000; display: flex; align-items: center; gap: 1.1em; height: 4.0909em; padding: 0 2em 0 2.2em; font-size: max(20px, 1.375rem); line-height: 1; color: var(--paper); transition: color var(--transit); } .header__mark::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--black); mix-blend-mode: multiply; transition: opacity var(--transit), transform .6s var(--ease-settle); transform-origin: left center; } .header__mark .mark { position: relative; width: 2.3em; min-width: 40px; aspect-ratio: 104.48 / 86.02; } .header__mark .mark img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity var(--transit); } .header__mark .mark img.mark--evening { opacity: 1; } .header__mark .tag { font-family: var(--font-display); font-size: 1em; letter-spacing: 0; white-space: nowrap; overflow: hidden; max-width: 12em; transition: max-width .6s var(--ease-settle), opacity var(--transit); } .header__mark .tag em { font-style: italic; color: var(--champagne); } /* is-show (scrollY > mark height): collapse to the bare compact mark */ .header.is-show .header__mark::before { opacity: 0; transform: scaleX(.6); } .header.is-show .header__mark .tag { max-width: 0; opacity: 0; } html[data-ground="paper"] .header.is-show .header__mark .mark img { opacity: 0; } html[data-ground="paper"] .header.is-show .header__mark .mark img.mark--pearl { opacity: 1; } html[data-ground="dark"] .header.is-show .header__mark .mark img { opacity: 0; } html[data-ground="dark"] .header.is-show .header__mark .mark img.mark--evening { opacity: 1; } html[data-ground="wine"] .header.is-show .header__mark .mark img { opacity: 0; } html[data-ground="wine"] .header.is-show .header__mark .mark img.mark--velvet { opacity: 1; } @media (hover: hover) { .header__mark:hover .mark { opacity: .7; transition: opacity var(--transit); } } .header__inner { position: fixed; top: 0; left: 0; width: 100%; z-index: 9998; padding-inline: 4rem 3rem; transition: opacity var(--transit); } /* ref §2.7: inside the CTA the nav/menu/pill fade; the mark itself stays (client request) */ html.is-header-hide .header__inner { opacity: 0; pointer-events: none; } /* scroll progress line (storytelling pattern) — ground-aware colour, driven by --progress from the rAF scroll handler */ .header__progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 9999; pointer-events: none; transform-origin: left center; scale: var(--progress, 0) 1; background: var(--wine); transition: background-color var(--transit); } html[data-ground="dark"] .header__progress, html[data-ground="wine"] .header__progress { background: var(--champagne); } /* nav row (ref §2.3) — mono instead of italic serif */ .gnav { display: flex; justify-content: flex-end; padding-left: 9rem; margin-bottom: .75rem; transition: translate var(--transit); } .gnav ul { display: flex; } .gnav a { display: block; padding: 3.5rem 1rem .75rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em; font-size: max(11px, .8125rem); line-height: 1; } .gnav a > span { display: block; width: fit-content; position: relative; } .gnav a > span::after { content: ""; display: block; width: 100%; height: 1px; background: currentColor; position: absolute; bottom: -.3rem; left: 0; opacity: 0; transition: opacity var(--transit); } @media (hover: hover) and (min-width: 67.5625em) { .gnav li:hover > a > span::after { opacity: 1; animation: .4s textlink_underline ease-in forwards; } } @keyframes textlink_underline { /* ref §2.3 — underline swipe */ 0% { scale: 0 1; transform-origin: left; translate: 70% 0; } 35% { scale: .3 1; transform-origin: left; translate: 70% 0; } 36% { scale: .3 1; transform-origin: right; translate: 0 0; } 55% { scale: 0 1; transform-origin: right; translate: 0 0; } 60% { scale: 0; transform-origin: left; translate: 0 0; } 100% { scale: 1; transform-origin: left; } } /* MENU button (ref §2.4 header-sm) */ .gnav-btn-wrap { position: absolute; top: 0; right: 0; overflow: hidden; padding: 2rem 4rem .75rem 0; z-index: 1; pointer-events: none; transition: translate var(--transit), color var(--transit); } .gnav-btn { display: flex; align-items: center; gap: 1em; width: fit-content; margin-inline: auto 0; padding-block: .75rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em; font-size: max(11px, .8125rem); line-height: 1; transform: translateY(calc(100% + 1.5rem)); transition: transform var(--transit); } .gnav-btn__lines { width: 3.7777em; aspect-ratio: 68 / 5; position: relative; display: block; transition: translate var(--transit); } @media (hover: hover) { .gnav-btn:hover .gnav-btn__lines { translate: 4px 0; } } .gnav-btn__lines i { display: block; width: 100%; height: 1px; background: currentColor; position: absolute; left: 0; transform-origin: 50% 0; transition: top var(--transit), rotate var(--transit); } .gnav-btn__lines i:first-child { top: 0; } .gnav-btn__lines i:last-child { top: calc(100% - 1px); } @media (min-width: 67.5625em) { .header.header-sm .gnav { translate: 0 calc(-100% - .75rem); pointer-events: none; } .header.header-sm .gnav-btn-wrap { pointer-events: auto; } .header.header-sm .gnav-btn { transform: translateY(0); } } .header.is-menu-open .gnav-btn__lines i:first-child { top: 50%; rotate: 15deg; } .header.is-menu-open .gnav-btn__lines i:last-child { top: 50%; rotate: -15deg; } /* Inquire pill (ref §2.5 .btn-cta--primary) */ .btn-cta { margin-inline: auto 0; width: fit-content; transition: translate var(--transit); } .btn-cta a { display: block; min-width: min(13.75rem, 100%); padding: .55em 3.2em .55em 3.2em; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .14em; font-size: max(11px, .8125rem); line-height: 2.2; color: var(--paper); background: var(--black); border: 1px solid rgba(13,13,14,.2); border-radius: 100vmax; backdrop-filter: blur(1.25rem); position: relative; z-index: 1; transition: background-color var(--transit), border-color var(--transit), color var(--transit), transform .16s var(--ease-out); } .btn-cta a > span { display: block; padding-left: 3.4rem; } .btn-cta a::before, .btn-cta a::after { content: ""; margin: auto; width: 4.3333em; height: 1px; position: absolute; top: 0; bottom: 0; } .btn-cta a::before { background: var(--black); left: -4.3333em; transition: background-color var(--transit); } .btn-cta a::after { background: var(--paper); left: 0; transition: background-color var(--transit); } html[data-ground="dark"] .btn-cta a, html[data-ground="wine"] .btn-cta a { background: var(--champagne); color: var(--black); border-color: rgba(201,174,130,.3); } html[data-ground="dark"] .btn-cta a::before, html[data-ground="wine"] .btn-cta a::before { background: var(--champagne); } html[data-ground="dark"] .btn-cta a::after, html[data-ground="wine"] .btn-cta a::after { background: var(--black); } @media (hover: hover) { .btn-cta a:hover { background: var(--wine); border-color: var(--wine); color: var(--paper); box-shadow: 0 10px 28px rgba(13,13,14,.18); } .btn-cta a:hover::before { animation: .4s btn_bar linear .1s forwards; } .btn-cta a:hover::after { animation: .4s btn_bar linear forwards; background: var(--paper); } html[data-ground="dark"] .btn-cta a:hover, html[data-ground="wine"] .btn-cta a:hover { background: var(--paper); border-color: var(--paper); color: var(--black); } html[data-ground="dark"] .btn-cta a:hover::after, html[data-ground="wine"] .btn-cta a:hover::after { background: var(--black); } } @keyframes btn_bar { 0% { scale: 1 1; transform-origin: left; } 25% { scale: 0 1; transform-origin: left; } 75% { scale: 0 1; transform-origin: right; } 100% { scale: 1 1; transform-origin: right; } } .header.is-menu-open .btn-cta a { background: var(--wine); border-color: var(--wine); color: var(--paper); } .header.is-menu-open .btn-cta a::after { background: var(--paper); } /* modal nav (ref §2.6) */ .modal-navi { position: absolute; top: 1.25rem; right: 2.5rem; z-index: 0; height: calc(100svh - 2.5rem); padding: 15em 3em 7.5em; overflow-y: auto; background: rgba(13,13,14,.95); backdrop-filter: blur(10px); color: var(--paper); border-radius: var(--radius); font-size: max(14px, 1rem); line-height: 1.8; transform: translateX(calc(100% + 2.5rem)); transition: transform var(--transit); visibility: hidden; } .header.is-menu-open .modal-navi { transform: translateX(0); visibility: visible; } .modal-navi ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3em 5.5em; } .modal-navi ul a { display: block; width: fit-content; } .modal-navi ul a .en { display: block; font-family: var(--font-display); font-style: italic; font-size: 1.9em; line-height: 1.1; letter-spacing: 0; position: relative; } .modal-navi ul a .en::after { content: ""; display: block; width: 100%; height: 1px; background: currentColor; position: absolute; bottom: -.1em; left: 0; opacity: 0; } .modal-navi ul a .sub { display: block; font-family: var(--font-mono); font-size: max(11px, .75rem); text-transform: uppercase; letter-spacing: .12em; color: var(--mute); margin-top: .3em; } @media (hover: hover) { .modal-navi ul a:hover .en::after { opacity: 1; animation: .4s textlink_underline ease-in forwards; } } .modal-navi__btns { display: none; margin-top: 3em; gap: 1em; } .modal-navi .btn-icon svg { color: var(--black); } .modal-navi .btn a::before { background: var(--champagne); } .modal-navi__meta { margin-top: 4em; color: var(--mute); } .header.is-menu-open .gnav { translate: 0 calc(-100% - .75rem); pointer-events: none; } .header.is-menu-open .gnav-btn-wrap { color: var(--paper); } @media (min-width: 48em) { .header.is-menu-open .gnav-btn-wrap, .header.is-menu-open .btn-cta { translate: -3rem 0; } } /* mobile / tablet header */ @media (max-width: 67.5em) { .header__mark { top: 1rem; font-size: 15px; height: 3.6em; padding: 0 1.4em 0 1.6em; } .header__mark .mark { width: 2.2em; } .header__inner { height: 6rem; padding: 1.1428571429rem; } .gnav { display: none; } .gnav-btn-wrap { pointer-events: auto; padding: 1.6rem 1.5rem 0 0; } .gnav-btn { transform: none; min-height: 44px; padding-block: .95rem; } .header .btn-cta { display: none; } .modal-navi { width: 100%; height: 100svh; padding: 9rem 1.5rem 4rem; top: 0; right: 0; border-radius: 0; transform: translateX(100%); } .modal-navi ul { display: block; } .modal-navi ul li { border-bottom: 1px solid var(--line); } .modal-navi ul a { width: 100%; padding-block: 1.1428571429rem; min-height: 44px; } .modal-navi__btns .btn a { min-height: 44px; } .modal-navi__btns { display: grid; } } /* mobile floating Inquire bar (ref §2.8) */ .floating-btn { display: none; position: fixed; bottom: 0; left: 0; width: 100%; padding: 0 .571rem .571rem; z-index: 9998; opacity: 0; transition: opacity var(--transit); pointer-events: none; } .floating-btn a { display: flex; align-items: center; justify-content: space-between; min-height: 4.571rem; padding: 0 1.5rem; background: var(--wine); color: var(--paper); border-radius: var(--radius-xs); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; } @media (max-width: 47.9375em) { .floating-btn { display: block; } .header.header-sm ~ .floating-btn { opacity: 1; pointer-events: auto; } body:has(.section-cta.is-inview) .floating-btn, body:has(.header.is-menu-open) .floating-btn { opacity: 0; pointer-events: none; } } /* -------------------------------------------------------------------------- 5. Hero collage (ref §4) -------------------------------------------------------------------------- */ .hero { overflow-x: clip; } .hero > .inner { position: relative; } .hero__imgs { padding-top: 55.8125%; position: relative; overflow-anchor: none; } .hero__panel { position: absolute; inset: 0; } .hero__img { overflow: hidden; position: absolute; top: 0; left: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); transition: clip-path .8s var(--ease-settle), margin .8s var(--ease-settle), scale .8s var(--ease-settle), filter .8s var(--ease-settle); filter: grayscale(1); } .hero__img img { width: 100%; height: 100%; object-fit: cover; scale: 1.075; } .hero__img:first-child { z-index: 6; } /* panel A geometry (ref §4.2 table) */ .hero__panel:first-child .hero__img:nth-child(1) { width: 28.125%; aspect-ratio: 450/551; margin-top: 0; margin-left: 41.875%; } .hero__panel:first-child .hero__img:nth-child(2) { width: 23.375%; aspect-ratio: 374/460; margin-top: 6.25%; margin-left: 22.25%; transition-delay: .02s; } .hero__panel:first-child .hero__img:nth-child(3) { width: 20.4375%; aspect-ratio: 327/254; margin-top: 21.4375%; margin-left: 3.3125%; transition-delay: .04s; } .hero__panel:first-child .hero__img:nth-child(4) { width: 32.5%; aspect-ratio: 520/340; margin-top: 34.6875%; margin-left: 11.375%; transition-delay: .06s; } .hero__panel:first-child .hero__img:nth-child(5) { width: 20.625%; aspect-ratio: 330/405; margin-top: 32.75%; margin-left: 43.6875%; transition-delay: .08s; } .hero__panel:first-child .hero__img:nth-child(6) { width: 31.25%; aspect-ratio: 500/615; margin-top: 31.375%; margin-left: 62.75%; transition-delay: .1s; } /* panel B */ .hero__panel:nth-child(2) .hero__img:nth-child(1) { width: 32.5625%; aspect-ratio: 521/397; margin-top: 0; margin-left: 36.5625%; z-index: 2; } .hero__panel:nth-child(2) .hero__img:nth-child(2) { width: 18.9375%; aspect-ratio: 303/241; margin-top: 4.3125%; margin-left: 14.5625%; transition-delay: .02s; } .hero__panel:nth-child(2) .hero__img:nth-child(3) { width: 31.8125%; aspect-ratio: 509/255; margin-top: 20.125%; margin-left: 6.3125%; z-index: 1; transition-delay: .04s; } .hero__panel:nth-child(2) .hero__img:nth-child(4) { width: 20.9375%; aspect-ratio: 335/266; margin-top: 37.5%; margin-left: 23.0625%; transition-delay: .06s; } .hero__panel:nth-child(2) .hero__img:nth-child(5) { width: 28.5%; aspect-ratio: 456/567; margin-top: 24.0625%; margin-left: 44.75%; z-index: 1; transition-delay: .08s; } .hero__panel:nth-child(2) .hero__img:nth-child(6) { width: 30.9375%; aspect-ratio: 495/240; margin-top: 29.5625%; margin-left: 69.8125%; z-index: 2; transition-delay: .1s; } /* pre-load states (ref §4.4) */ .hero__imgs:not(.is-loaded) .hero__img, .hero__imgs:not(.is-loaded2) .hero__img { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); } .hero__imgs.is-loaded:not(.is-loaded2) .hero__panel:first-child .hero__img:first-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } .hero__imgs:not(.is-loaded3) .hero__panel:first-child .hero__img:first-child { margin-top: 10.6875%; margin-left: 35.9375%; } .hero__imgs:not(.is-loaded3) .hero__panel:first-child .hero__img:not(:first-child) { scale: .5; } .hero__imgs:not(.is-loaded3) .hero__panel:first-child .hero__img:nth-child(2) { margin-top: 16.21875%; margin-left: 42.8125%; } .hero__imgs:not(.is-loaded3) .hero__panel:first-child .hero__img:nth-child(3) { margin-top: 16.21875%; margin-left: 42.8125%; } .hero__imgs:not(.is-loaded3) .hero__panel:first-child .hero__img:nth-child(4) { margin-top: 11.65625%; margin-left: 39.375%; } .hero__imgs:not(.is-loaded3) .hero__panel:first-child .hero__img:nth-child(5) { margin-top: 17.59375%; margin-left: 37.34375%; } .hero__imgs:not(.is-loaded3) .hero__panel:first-child .hero__img:nth-child(6) { margin-top: 12.28125%; margin-left: 30.78125%; } .hero__imgs:not(.is-loaded3) .hero__panel:nth-child(2) .hero__img { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); } .hero__imgs.is-loaded3 .hero__img { filter: grayscale(0); } /* panel swap every 6s (ref §4.5) */ @keyframes kenburns { 0% { scale: 1; filter: grayscale(1); } 40% { filter: grayscale(0); } 100% { scale: 1.075; filter: grayscale(0); } } .hero__imgs.is-loaded3.is-panel-show .hero__panel:first-child .hero__img { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); } .hero__imgs.is-loaded3.is-panel-show .hero__panel:nth-child(2) .hero__img img { animation: kenburns 6s ease-in alternate; } .hero__imgs.is-loaded3:not(.is-panel-show) .hero__panel:first-child .hero__img img { animation: kenburns 6s ease-in alternate; } .hero__imgs:not(.is-panel-show) .hero__panel:nth-child(2) .hero__img { clip-path: polygon(50% 60%, 50% 50%, 50% 50%, 50% 50%); } .hero__imgs.is-loaded3.is-panel-show .hero__panel:nth-child(2) .hero__img { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } /* catch copy — stroke-drawn Instrument Serif Italic (ref §4.3) */ .hero__catch { width: 36%; overflow: visible; position: absolute; top: calc(50svh - 8rem); left: 50%; transform: translate(-50%, -50%); opacity: 0; color: var(--black); transition: transform var(--transit), opacity var(--transit); z-index: 7; } .hero__catch svg { width: 100% !important; height: auto; overflow: visible; } .hero__catch .mask-path { fill: none; stroke: #fff; } .hero__catch.is-start { opacity: 1; transition: .2s opacity .1s; } .hero__catch.is-start .mask-path { stroke-dashoffset: 0 !important; transition-property: stroke-dashoffset; transition-duration: var(--duration, .06s); transition-delay: var(--delay, 0s); transition-timing-function: linear; } .hero__imgs.is-loaded .hero__catch { transform: translate(-50%, -50%) scale(.5); opacity: 0; transition: transform var(--transit), opacity var(--transit); } .hero__imgs.is-loaded3 .hero__catch { transform: translate(0, 0) scale(1); top: 20.8286674132%; right: 0; left: auto; opacity: 1; transition: 0s top, 0s left, 0s right, 0s transform, .4s opacity ease-in-out .4s; } @media (min-width: 48em) { .hero__imgs.is-loaded3 .hero__catch { width: 30%; } } .hero__catch-sub { margin-top: 1.25rem; color: var(--paper-mute); white-space: nowrap; font-size: max(11px, .6875rem); } .hero__eyebrow { position: absolute; top: -4.6rem; left: max(18.5rem, 300px); color: var(--paper-mute); display: flex; align-items: center; gap: 1.25rem; } .hero__eyebrow::before { content: ""; width: 4rem; height: 1px; background: currentColor; } /* Scroll down (ref §4.6) */ .home-scroll { writing-mode: vertical-rl; display: flex; justify-content: flex-end; width: 1.875rem; height: calc(100svh - 7.5rem); position: absolute; top: 0; right: -5.9375rem; opacity: 0; pointer-events: none; transition: opacity var(--transit); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .14em; font-size: max(11px, .75rem); color: var(--paper-mute); } .home-scroll__txt { padding-bottom: 14.3125rem; position: relative; } .home-scroll__txt::after { content: ""; width: 1px; height: 13.5625rem; background: currentColor; position: absolute; bottom: 0; left: 50%; margin-left: -.5px; transform-origin: bottom; } .hero__imgs.is-loaded3 + .home-scroll { opacity: 1; pointer-events: auto; } .hero__imgs.is-loaded3 + .home-scroll .home-scroll__txt::after { animation: scroll_bar 2s ease-in-out infinite; } @keyframes scroll_bar { 0% { scale: 1 0; transform-origin: top; } 50% { scale: 1 1; transform-origin: top; } 51% { scale: 1 1; transform-origin: bottom; } 100% { scale: 1 0; transform-origin: bottom; } } /* -------------------------------------------------------------------------- 6. Sticky growing image + statement (ref §5) -------------------------------------------------------------------------- */ .hero__textarea { position: relative; } .hero__copy { margin-top: -2.5rem; margin-bottom: 3.75rem; position: relative; z-index: 2; mix-blend-mode: difference; color: var(--paper); } .hero__copy span { display: block; width: fit-content; overflow: hidden; } .hero__copy span b { display: block; font-weight: 400; font-family: var(--font-display); font-style: italic; letter-spacing: -.01em; line-height: .95; transform: translateY(100%); transition: transform .6s var(--ease-settle); } .hero__copy span:first-child b { font-size: max(64px, min(15rem, 14.5vw)); } .hero__copy span:nth-child(2) { margin-inline: auto 5.5rem; margin-top: -4rem; } .hero__copy span:nth-child(2) b { font-size: max(48px, min(12rem, 11.4vw)); transition-delay: .2s; } .hero__lines { text-align: right; color: var(--black); margin-bottom: 4rem; } .hero__lines p { overflow: hidden; line-height: 1.53; } .hero__lines p span { display: block; transform: translateY(100%); transition: transform var(--transit); } .hero__lines p:nth-child(1) span { transition-delay: .32s; } .hero__lines p:nth-child(2) span { transition-delay: .44s; } .hero__lines p:nth-child(3) span { transition-delay: .56s; } .hero__lines p:nth-child(4) span { transition-delay: .68s; } .hero__items { display: flex; justify-content: space-between; max-width: 108.125rem; margin: 0 auto 6.25rem; width: 90%; } .hero__item { transition: opacity var(--transit); } .hero__item:first-child { width: 40%; margin-top: -9.375rem; opacity: 0; transition-delay: .8s; } .hero__item:nth-child(2) { display: flex; justify-content: flex-end; height: 200svh; margin-top: 8.125rem; width: 50%; position: relative; opacity: 0; transition-delay: .95s; } .hero__textarea.is-inview .hero__copy span b, .hero__textarea.is-inview .hero__lines p span { transform: translateY(0); } .hero__textarea.is-inview .hero__item { opacity: 1; } .hero__sticky { height: 40.625rem; margin-inline: auto 0; position: sticky; top: 0; right: 0; } .hero__sticky.is-height-auto { height: var(--hgt, auto); } .hero__grow { margin: 0; width: var(--wid, 100%); min-width: var(--wid, 100%); height: var(--hgt, 100%); min-height: var(--hgt, 100%); position: relative; filter: grayscale(var(--grayscale, 1)); overflow: hidden; } .hero__item.is-grayscale-finished .hero__grow { filter: grayscale(0); } .hero__grow img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; } .hero__grow figcaption { position: absolute; left: 1.5rem; bottom: 1.25rem; color: var(--paper); text-shadow: 0 1px 12px rgba(13,13,14,.6); } .hero__statement { margin-bottom: 4rem; } .hero__statement .ttl-02 { line-height: 1.35; } .hero__statement .ttl-02 em { font-style: italic; color: var(--wine); } .hero__item .txt-ll p + p { margin-top: 1.25em; } @media (max-width: 47.9375em) { .hero__imgs { padding-top: 139.04%; } .hero__panel:first-child .hero__img:nth-child(1) { width: 41.23%; margin-top: 0; margin-left: 30.96%; } .hero__panel:first-child .hero__img:nth-child(2) { width: 36%; margin-top: 14%; margin-left: 2%; } .hero__panel:first-child .hero__img:nth-child(3) { width: 34%; margin-top: 38%; margin-left: 60%; } .hero__panel:first-child .hero__img:nth-child(4) { width: 47.67%; margin-top: 75.07%; margin-left: 0; } .hero__panel:first-child .hero__img:nth-child(5) { width: 32%; margin-top: 56%; margin-left: 22%; } .hero__panel:first-child .hero__img:nth-child(6) { width: 45.75%; margin-top: 62.33%; margin-left: 54.93%; } .hero__panel:nth-child(2) .hero__img:nth-child(1) { width: 56%; margin-top: 0; margin-left: 22%; } .hero__panel:nth-child(2) .hero__img:nth-child(2) { width: 34%; margin-top: 36%; margin-left: 0; } .hero__panel:nth-child(2) .hero__img:nth-child(3) { width: 52%; margin-top: 50%; margin-left: 46%; } .hero__panel:nth-child(2) .hero__img:nth-child(4) { width: 36%; margin-top: 76%; margin-left: 6%; } .hero__panel:nth-child(2) .hero__img:nth-child(5) { width: 42%; margin-top: 90%; margin-left: 50%; } .hero__panel:nth-child(2) .hero__img:nth-child(6) { width: 50%; margin-top: 108%; margin-left: 0; } .hero__imgs:not(.is-loaded3) .hero__panel:first-child .hero__img { margin-top: 40% !important; margin-left: 25% !important; } .hero__catch { position: relative; width: 100%; top: auto; left: auto; transform: none; margin-top: 1.5rem; } .hero__imgs.is-loaded .hero__catch { transform: none; } .hero__imgs.is-loaded3 .hero__catch { position: relative; width: 100%; top: auto; bottom: auto; left: auto; right: auto; transform: none; } .hero__eyebrow { display: none; } .hero__catch-sub { margin-top: .75rem; } .home-scroll { display: none; } .hero__copy { margin-top: 2.5rem; margin-bottom: 2rem; } .hero__statement .ttl-02 { font-size: 2rem; } .memories__head .ttl-02, .inquiry__intro .ttl-02, .about__text .ttl-02 { font-size: 2.2rem; } .hero__copy span:first-child b { font-size: 4.6rem; } .hero__copy span:nth-child(2) { margin-inline: auto .7rem; margin-top: -1rem; } .hero__copy span:nth-child(2) b { font-size: 3.6rem; } .hero__items { display: block; width: 86%; margin-bottom: 3rem; } .hero__item:first-child { width: 100%; margin-top: 0; } .hero__item:nth-child(2) { display: block; width: 100%; height: auto; margin-top: 2rem; } .hero__sticky, .hero__sticky.is-height-auto { position: static; height: auto; } .hero__grow { width: 100%; min-width: 0; height: auto; min-height: 0; aspect-ratio: 1730/1300; } .hero:has(.is-loaded3) .hero__copy span b, .hero:has(.is-loaded3) .hero__lines p span { transform: translateY(0); } .hero:has(.is-loaded3) .hero__item { opacity: 1; } } /* offscreen = idle: looping animations pause while their section is out of view (IntersectionObserver in main.js) */ .is-idle .hero__img img, .is-idle .memories__strip, .is-idle .work__imgs .slide img { animation-play-state: paused !important; } /* -------------------------------------------------------------------------- 7. Memories marquee (ref §6) -------------------------------------------------------------------------- */ .memories { padding-top: 2rem; } .memories__head { display: flex; flex-direction: column; align-items: flex-end; text-align: right; max-width: 97.25rem; margin-bottom: 4.625rem; } .memories__head .ttl-02 { margin-bottom: 2rem; } .memories__head .ttl-02 em { font-style: italic; color: var(--wine); } .memories__head .mono { margin-bottom: 1.5rem; color: var(--paper-mute); } .memories__body { min-height: 100svh; overflow-x: clip; padding-bottom: 70svh; } .memories__inner { display: flex; flex-direction: column; justify-content: space-between; min-height: 100svh; } .memories__wrap { margin-bottom: 8rem; transition: transform 5s var(--ease-settle); } .memories__wrap:nth-child(odd) { transform: translateX(150vw); } .memories__wrap:nth-child(even) { transform: translateX(-150vw); } .memories__wrap:nth-child(odd) .memories__img { padding-right: 8rem; } .memories__wrap:nth-child(even) .memories__imgs, .memories__wrap:nth-child(even) .memories__strip { flex-direction: row-reverse; } .memories__wrap:nth-child(even) .memories__img { padding-left: 8rem; } .memories__imgs { display: flex; transition: filter 2.5s var(--ease-settle) .5s; filter: grayscale(1); } .memories__strip { display: flex; flex-shrink: 0; white-space: nowrap; } /* rev. 4 — client note: larger marquee frames (25.6rem → 33rem desktop, 16.2rem → 21rem mobile) */ .memories__img { width: 33rem; min-width: 33rem; } .memories__img img { aspect-ratio: 1.5369458128; width: 100%; height: auto; object-fit: cover; } .memories__inner.is-inview .memories__wrap { width: calc(100% + 50vw); } .memories__inner.is-inview .memories__wrap:nth-child(odd) { transform: translateX(-50vw); } .memories__inner.is-inview .memories__wrap:nth-child(even) { transform: translateX(50vw); } .memories__inner.is-inview .memories__wrap:nth-child(odd) .memories__imgs.is-loop .memories__strip { animation: loop_x 36s linear infinite; } .memories__inner.is-inview .memories__wrap:nth-child(even) .memories__imgs.is-loop .memories__strip { animation: loop_x_reverse 36s linear infinite; } .memories__inner.is-inview .memories__imgs { filter: grayscale(0); } /* rev. 6 — each keyframe loop translates exactly one strip length (100% of the strip's own width; every strip in a row is an identical clone, so the seam lands pixel-exact). Marquee s load eagerly (translated content never meets lazy-load thresholds); the idle pause is done by removing/re-adding `.is-loop` in main.js, the play-state rule above is a fallback. */ @keyframes loop_x { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } @keyframes loop_x_reverse { 0% { transform: translateX(0); } 100% { transform: translateX(100%); } } @media (max-width: 47.9375em) { .memories__body { padding-bottom: 30svh; } .memories__wrap { margin-bottom: 4.8rem; transition: transform 2s var(--ease-settle); } .memories__wrap:nth-child(odd) .memories__img { padding-right: 4.4rem; } .memories__wrap:nth-child(even) .memories__img { padding-left: 4.4rem; } .memories__img { width: 21rem; min-width: 21rem; } .memories__head { text-align: left; align-items: flex-start; } } /* -------------------------------------------------------------------------- 8. Stories — testimonials over sticky ambient film (ref §7) -------------------------------------------------------------------------- */ .stories { margin-top: -100svh; margin-bottom: 0; position: relative; z-index: 1; padding-bottom: 13.9375rem; background: transparent; } .stories .home-inner { position: relative; z-index: 1; } @media (min-width: 48em) { .stories .home-inner { padding-top: 25vh; } } .stories__bg { width: 100%; height: 100svh; position: sticky; top: 0; left: 0; opacity: 0; transition: opacity var(--transit); pointer-events: none; z-index: -1; overflow: hidden; background: var(--black); } .stories.is-inview .stories__bg { opacity: 1; } .stories__bg video, .stories__bg .stories__poster { object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; opacity: .55; } .stories__bg .stories__poster { width: 100%; height: 100%; display: none; } .stories__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,13,14,.55), rgba(13,13,14,.75)); } /* black ground must be opaque below the sticky bg so the marquee is wiped */ .stories::before { content: ""; position: absolute; left: 0; right: 0; top: 100svh; bottom: 0; background: var(--black); z-index: -2; } .stories__body { display: grid; grid-template-columns: 1fr 1fr; } .stories__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; } .stories__text { padding: 10rem 2.5rem 10rem 10rem; } @media (min-width: 48em) { .stories__sticky { position: sticky; top: calc(var(--hh, 0px) + 2rem); } } .stories__sticky .ttl-10 { margin-bottom: 3.6rem; } .stories__sticky .ttl-10 em { color: var(--champagne); font-style: italic; } .stories__sticky .txt-lg { color: var(--mute); } .stories__sticky .txt-lg + .txt-lg { margin-top: 1.25em; } .stories__btns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; padding-right: 1rem; margin-top: 4.5rem; } /* card (ref §7.3 .c-interview-list-item) */ .story-card { min-height: 45rem; position: relative; overflow: clip; background: var(--panel); } .story-card--wide { grid-column: 1 / -1; min-height: 32rem; } .story-card::before, .story-card::after { content: ""; width: 102%; height: 100%; position: absolute; top: 0; left: 0; z-index: 5; background: var(--paper-mute); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } .story-card::after { background: var(--paper); scale: 0 1; transform-origin: right; } .story-card.is-inview::before { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transition: .2s clip-path ease-out .2s; } .story-card.is-inview::after { scale: 1 1; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transition: .2s scale ease-out, .2s clip-path ease-out .2s; } .story-card__inner { display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; min-height: inherit; position: relative; padding: 2.875rem 2.3125rem 2.625rem; } .story-card__inner::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(13,13,14,.15) 0%, rgba(13,13,14,.15) 45%, rgba(13,13,14,.82) 100%); transition: opacity var(--transit); } .story-card .num { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .14em; font-size: max(11px, .8125rem); color: var(--paper); line-height: 1; width: fit-content; transform-origin: left; transform: rotate(90deg) translateY(-50%); position: relative; z-index: 2; mix-blend-mode: exclusion; } .story-card__text { padding-top: 7.5rem; color: var(--paper); position: relative; z-index: 2; } .story-card__quote { font-family: var(--font-display); font-style: italic; font-size: max(20px, 2rem); line-height: 1.3; letter-spacing: 0; margin-bottom: 1.5rem; } .story-card--wide .story-card__quote { font-size: max(24px, 2.75rem); max-width: 28em; } .story-card__names { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; margin-bottom: 1.25rem; } .story-card__names .who { font-family: var(--font-display); font-size: max(22px, 2.5rem); line-height: 1; letter-spacing: 0; } .story-card__names .when { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em; font-size: max(11px, .75rem); color: var(--champagne); } .story-card__sample { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em; font-size: max(11px, .6875rem); color: var(--mute); } .story-card__img { position: absolute; inset: 0; z-index: 0; filter: grayscale(1); transition: filter var(--transit); overflow: hidden; } .story-card__img img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: scale .6s var(--ease-settle); } /* rev. 6 — a 16:9 film still in a tall card: same cover-fit, faces kept in the upper half of the crop */ .story-card__img--still img { object-position: 50% 38%; } @media (hover: hover) { .story-card__inner:hover::before { opacity: .85; } .story-card__inner:hover .story-card__img { filter: grayscale(0); } .story-card__inner:hover img { scale: 1.03; } } @media (max-width: 47.9375em) { .stories { padding-bottom: 5rem; } .stories__body { display: flex; flex-direction: column-reverse; } .stories__grid { grid-template-columns: 1fr; gap: 0; } .stories__text { padding: 2rem 0 3rem; } .story-card { min-height: 40.857rem; } .story-card--wide { min-height: 40.857rem; } .story-card__inner { padding: 2.2857rem 1.7142rem; } .stories__btns { grid-template-columns: 1fr; gap: 0; } } /* -------------------------------------------------------------------------- 9. The Work — numbered sticky counter + 4s wipe loop (ref §8) -------------------------------------------------------------------------- */ .work { padding-top: 2rem; padding-bottom: 13.9375rem; } .work__wrp { display: flex; justify-content: space-between; min-height: 100svh; position: relative; } .work__head { display: flex; flex-direction: column; justify-content: space-between; width: 19.5rem; height: calc(100svh - 16.125rem); position: sticky; top: 16.125rem; left: 0; transition: opacity var(--transit); } .work__wrp.is-leaving .work__head { opacity: 0; } /* the column would otherwise slide under the fixed mark as the section ends */ .work__head .ttl-02 { height: 2.1041666667em; line-height: 1; overflow: hidden; letter-spacing: 0; } .work__head .ttl-02 > span { display: block; transition: transform var(--transit); } .work__head .ttl-02 > span > span { display: block; height: calc(2.1041666667em + .25em); } .work__head .num { font-family: var(--font-display); font-style: italic; font-size: 11.25rem; line-height: 1; letter-spacing: 0; overflow: hidden; position: relative; color: var(--champagne); } .work__head .num .static { display: block; } .work__head .num .dynamic { display: block; padding-left: .55em; position: absolute; top: 0; left: 0; transition: transform var(--transit); } .work__head .num .dynamic span { display: block; } .work__wrp[data-products-current="1"] .num .dynamic { transform: translateY(0); } .work__wrp[data-products-current="1"] .ttl-02 > span { transform: translateY(0); } .work__wrp[data-products-current="2"] .num .dynamic { transform: translateY(-1em); } .work__wrp[data-products-current="2"] .ttl-02 > span { transform: translateY(-25%); } .work__wrp[data-products-current="3"] .num .dynamic { transform: translateY(-2em); } .work__wrp[data-products-current="3"] .ttl-02 > span { transform: translateY(-50%); } .work__wrp[data-products-current="4"] .num .dynamic { transform: translateY(-3em); } .work__wrp[data-products-current="4"] .ttl-02 > span { transform: translateY(-75%); } .work__body { width: 73.1382978723%; } .work__contents + .work__contents { margin-top: 17.5rem; } .work__head-sp { display: none; } .work__imgs { aspect-ratio: 1375/820; position: relative; overflow: hidden; margin-bottom: 6.25rem; background: var(--panel); } .work__imgs .slide { width: 100%; height: 100%; position: relative; z-index: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); transition: clip-path 2s ease-in-out; overflow: hidden; } .work__imgs .slide:not(:first-child) { position: absolute; top: 0; left: 0; } .work__imgs .slide.is-current { z-index: 2; clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); } .work__imgs .slide.is-next { z-index: 1; } .work__imgs .slide.is-current img, .work__imgs .slide.is-next img { animation: 16s slide_move linear; } .work__body.is-loop-init .work__imgs > .slide:first-child { z-index: 3; } .work__body.is-loop-init .work__imgs > .slide:first-child img { animation: 16s slide_move linear; } .work__imgs .slide img { width: calc(100% + 15rem); height: 100%; max-width: none; object-fit: cover; transform: translate(calc(-50% + 7.5rem), -50%); position: absolute; top: 50%; left: 50%; } @keyframes slide_move { 0% { transform: translate(-50%, -50%); } 100% { transform: translate(calc(-50% - 15rem), -50%); } } @keyframes slide_move_sp { 0% { transform: translate(-50%, -50%); } 100% { transform: translate(calc(-50% - 8.5714rem), -50%); } } .work__store { padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); margin-bottom: 3.5rem; display: flex; justify-content: space-between; gap: 2rem; color: var(--mute); } .work__store .mono-500 { color: var(--champagne); } .work__textarea { display: flex; justify-content: space-between; column-gap: 2.25rem; padding-right: 4.3636%; margin-bottom: 4rem; } .work__textarea > :nth-child(2) { max-width: 52.6996%; color: var(--mute); } .work__textarea .ttl-04 em { font-style: italic; color: var(--champagne); } .work__contents .btn { padding-right: 4.3636%; display: flex; justify-content: flex-end; } @media (max-width: 47.9375em) { .work { padding-bottom: 10rem; } .work__head { display: none; } .work__body { width: 100%; } .work__contents + .work__contents { margin-top: 4.57rem; } .work__head-sp { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 1.14rem; } .work__head-sp .num { font-family: var(--font-display); font-style: italic; font-size: 2.857rem; line-height: 1; color: var(--champagne); } .work__imgs { margin-bottom: 1.7rem; } .work__imgs .slide.is-current img, .work__imgs .slide.is-next img, .work__body.is-loop-init .work__imgs > .slide:first-child img { animation-name: slide_move_sp; } .work__imgs .slide img { width: calc(100% + 8.5714rem); transform: translate(calc(-50% + 4.2857rem), -50%); } .work__store { margin-bottom: 1.7rem; flex-direction: column; gap: .25rem; } .work__textarea { flex-direction: column; row-gap: 1rem; padding-right: 0; margin-bottom: 1rem; } .work__textarea > :nth-child(2) { max-width: none; } .work__contents .btn { padding-right: 0; justify-content: flex-start; } } /* -------------------------------------------------------------------------- 10. Ways to work together (ref §9.1 Service, as hover-reveal rows) -------------------------------------------------------------------------- */ .ways { padding-bottom: 11.25rem; } .ways__rows { border-top: 1px solid var(--line); } .way { border-bottom: 1px solid var(--line); position: relative; } .way__row { display: grid; grid-template-columns: 6rem 1fr auto; align-items: baseline; gap: 2rem; padding: 2.75rem 0 2.5rem; position: relative; z-index: 1; cursor: pointer; } .way__row:focus-visible { outline-offset: -2px; } .way__row .idx { color: var(--champagne); } .way__title { font-family: var(--font-display); font-size: max(28px, 4rem); line-height: 1; letter-spacing: 0; transition: transform .6s var(--ease-settle), color var(--transit); } .way__title em { font-style: italic; color: var(--champagne); } .way__kind { color: var(--mute); justify-self: end; } .way__desc { grid-column: 2 / -1; color: var(--mute); max-width: 42em; overflow: hidden; max-height: 0; opacity: 0; transition: max-height .6s var(--ease-settle), opacity .5s var(--ease-out) .05s, margin .6s var(--ease-settle); margin-top: 0; } @media (hover: hover) and (pointer: fine) { .way:hover .way__desc, .way:focus-within .way__desc { max-height: 12em; opacity: 1; margin-top: 1rem; } .way:hover .way__title { transform: translateX(1.5rem); } } .way.is-open .way__desc { max-height: 12em; opacity: 1; margin-top: 1rem; } .way__toggle { display: none; } .ways__links { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 2rem; margin-top: 5rem; } .ways__links .lead { max-width: 30em; color: var(--mute); } .ways__links .lead strong { font-weight: 400; color: var(--paper); font-family: var(--font-display); font-size: max(20px, 2rem); display: block; line-height: 1.3; margin-bottom: .75rem; letter-spacing: 0; } .ways__links .btns { display: grid; gap: 1rem; } @media (max-width: 47.9375em) { .ways { padding-bottom: 8rem; } .way__row { grid-template-columns: 3.5rem 1fr; gap: 1rem; padding: 1.75rem 0; } .way__kind { grid-column: 2; justify-self: start; } .way__desc { grid-column: 1 / -1; } .way__title { font-size: 2.6rem; } .ways__links .btns { width: 100%; } } /* -------------------------------------------------------------------------- 11. About (ref §9.2 Culture) -------------------------------------------------------------------------- */ .about { padding: 11rem 0 14.625rem; } .about__grid { display: grid; grid-template-columns: 1fr 1fr; } .about__img { aspect-ratio: 920/960; background: var(--paper-line); } .about__text { display: flex; flex-direction: column; justify-content: flex-end; padding-left: 9.565%; padding-bottom: 2.375rem; } .about__text .ttl-02 { line-height: 1.5; margin-bottom: 2.5rem; } .about__text .ttl-02 em { font-style: italic; color: var(--wine); } .about__text .txt-lg { font-weight: 500; line-height: 1.7; color: var(--black); } .about__text .txt-lg + .txt-lg { margin-top: 1.1em; } .about__text .ttl-04 { margin: 2.5rem 0; color: var(--paper-mute); font-style: italic; } .about__text .btn { display: flex; justify-content: flex-end; } @media (max-width: 47.9375em) { .about { padding: 5rem 0 10rem; } .about__grid { grid-template-columns: 1fr; gap: 2.5rem; } .about__text { padding-left: 0; } .about__text .btn { justify-content: flex-start; } } /* -------------------------------------------------------------------------- 12. Explore — 3 cards (ref §9.3 Company) -------------------------------------------------------------------------- */ .explore { padding-bottom: 13.5625rem; } .explore__items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; } @media (min-width: 67.5625em) { .explore__items { width: calc(100% - 10.4375rem); margin-inline: auto 0; } } .explore-card { position: relative; } .explore-card__img { aspect-ratio: 526/700; overflow: hidden; background: var(--paper-line); } .explore-card__img img { transition: scale .6s var(--ease-settle); } .explore-card .btn { margin-top: 1.5rem; } .explore-card .btn a { width: 100%; min-width: 0; } .explore-card .btn .label { display: flex; flex-direction: column-reverse; gap: .35rem; } .explore-card .btn .label .en { font-family: var(--font-display); font-style: italic; font-size: 1.78em; line-height: 1.1; letter-spacing: 0; text-transform: none; } .explore-card .btn .label .jp { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em; font-size: max(11px, .6875rem); color: var(--paper-mute); font-weight: 400; } .explore-card .btn a::after, .explore-card .btn a::before { bottom: 0; } .explore-card .explore-card__link::before { content: ""; position: absolute; inset: 0; z-index: 2; } @media (hover: hover) { .explore-card:hover .explore-card__img img { scale: 1.03; } .explore-card:hover .btn a { color: var(--wine); } } @media (max-width: 47.9375em) { .explore { padding-bottom: 10rem; } .explore__items { grid-template-columns: 1fr; gap: 3rem; } .explore-card__img { aspect-ratio: 1; } } /* -------------------------------------------------------------------------- 13. Journal — recent weddings (ref §9.4) -------------------------------------------------------------------------- */ .journal { padding-bottom: 13rem; } .journal__list { margin-inline: auto 0; } .post { display: grid; grid-template-columns: max-content 1fr 24.39%; align-items: center; gap: 2rem; padding-block: 1.78em; border-bottom: 1px solid var(--paper-line); } .post:first-child { border-top: 1px solid var(--paper-line); } .post .date { color: var(--paper-mute); } .post .title { font-family: var(--font-display); font-size: max(20px, 2rem); line-height: 1.3; letter-spacing: 0; padding-left: 4em; } .post .title a { background: linear-gradient(180deg, transparent calc(100% - 1px), currentColor 1px) no-repeat 0 100% / 0 100%; transition: background-size var(--transit); } .post .title a em { font-style: italic; color: var(--wine); } .post__meta { display: block; margin-top: .6rem; color: var(--paper-mute); font-size: max(11px, .6875rem); } /* rev. 6: "52 photographs · film" */ @media (hover: hover) { .post .title a:hover { background-size: 100% 100%; } .post:hover .thumb img { scale: 1.03; } } .post .thumb img { transition: scale .6s var(--ease-settle); } .post .thumb { aspect-ratio: 3/2; overflow: hidden; background: var(--paper-line); } .post .thumb img { width: 100%; height: 100%; object-fit: cover; } .journal .btn { display: flex; justify-content: flex-end; margin-top: 3rem; } .journal__note { margin-top: 1rem; color: var(--paper-mute); text-align: right; } @media (max-width: 47.9375em) { .journal { padding-bottom: 8rem; } .post { grid-template-columns: 1fr 30%; gap: 1rem; } .post .date { grid-column: 1 / -1; } .post .title { padding-left: 0; font-size: 1.6rem; } .post .title a { display: inline-block; padding-block: .55rem; min-height: 44px; } .journal .btn, .journal__note { justify-content: flex-start; text-align: left; } } /* -------------------------------------------------------------------------- 14. Section CTA (ref §10) — wine ground per guide ("Inquiry band on wine") -------------------------------------------------------------------------- */ .section-cta { min-height: 100svh; margin-block: 0 0; position: relative; padding-top: 12.5rem; color: var(--black); } .section-cta__copy { height: 100svh; max-height: calc(100svh - var(--top, 0px)); position: sticky; top: var(--top, 0px); left: 0; } .section-cta__copy-inner { width: 90%; max-width: 107.9375rem; margin-inline: auto; } .cta-row { display: flex; justify-content: space-between; gap: 2.625rem; } .cta-row .cta-en { overflow: hidden; } .cta-row:first-child { align-items: flex-end; margin-bottom: .875rem; position: relative; } .cta-row:first-child .cta-en { flex: 1 1 auto; white-space: nowrap; } .cta-row:first-child .cta-img { width: 42%; flex-shrink: 0; margin-top: 1.3125rem; } .cta-row:first-child .cta-img picture { max-width: 33.9375rem; } .cta-row:nth-child(2) .cta-en-wrp { margin-top: .5625rem; } .cta-row:nth-child(2) .cta-img picture { max-width: 32.5625rem; } .cta-img { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); transition: clip-path .7s var(--ease-rise) .6s; } .cta-img picture, .cta-img img { display: block; width: 100%; } .cta-img img { aspect-ratio: 543/259; object-fit: cover; } .cta-en .word { display: block; font-family: var(--font-display); font-style: italic; font-size: max(44px, min(9vw, 13rem)); line-height: .9; letter-spacing: -.01em; transform: translateY(100%); transition: transform .6s var(--ease-settle); } .cta-label { text-transform: uppercase; height: 1.2em; overflow: hidden; font-family: var(--font-mono); letter-spacing: .14em; font-size: max(11px, .8125rem); } .cta-label span { display: flex; align-items: center; gap: 1.5625rem; line-height: 1; transform: translateY(calc(100% + .2em)); transition: transform var(--transit); } .cta-label span::before { content: ""; display: block; width: 7.125rem; height: 1px; background: currentColor; } @media (min-width: 48em) { .cta-label { position: absolute; top: -3.5rem; left: 0; } } .cta-en-wrp .ttl-04 { margin-top: 1.1875rem; letter-spacing: 0; line-height: 1.6; overflow: hidden; color: var(--paper-mute); } .cta-en-wrp .ttl-04 span { display: block; transform: translateY(100%); transition: transform var(--transit); } .section-cta.is-inview .cta-row:first-child .cta-en .word { transform: translateY(0); } .section-cta.is-inview .cta-row:nth-child(2) .cta-en .word { transform: translateY(0); transition-delay: .2s; } .section-cta.is-inview .cta-en-wrp .ttl-04 span { transform: translateY(0); transition-delay: .3s; } .section-cta.is-inview .cta-label span { transform: translateY(0); } .section-cta.is-inview .cta-img { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } /* wine sheet + photo wall */ .section-cta__cta { margin-top: calc((100svh - var(--top, 0px)) * -1); padding-top: calc(100svh - var(--top, 0px)); position: relative; z-index: 1; color: var(--paper); } .section-cta__cta::after { content: ""; width: 100%; height: 200%; background: var(--wine); opacity: var(--opa, 0); position: absolute; top: -100%; left: 0; z-index: -1; pointer-events: none; } .section-cta__cta-inner { padding-top: calc(100svh - var(--top, 0px)); } .section-cta__imgs { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity var(--transit); overflow: clip; } .is-bg-show .section-cta__imgs { opacity: 1; } .section-cta__imgs-sticky { display: grid; gap: 7.125rem; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; height: 100svh; padding-inline: 3.5625rem; scale: var(--scale, 1.5); transform-origin: top center; position: sticky; top: 0; left: 0; } .cta-col { opacity: .3; display: flex; flex-direction: column; } .cta-col ul { display: flex; flex-direction: column; } .cta-col li { padding-bottom: 1.875rem; } .cta-col img { width: 100%; aspect-ratio: 506/644; object-fit: cover; } .cta-col:nth-child(odd) { transform: translateY(var(--moveY, 0px)); } .cta-col:nth-child(2) { flex-direction: column-reverse; justify-content: flex-end; transform: translateY(calc(-50% + var(--moveY-reverse, 0px))); } .cta-col:nth-child(2) ul { flex-direction: column-reverse; } .section-cta__items { height: 200svh; padding-bottom: 25vh; } .section-cta__item { display: flex; align-items: center; justify-content: center; height: 100svh; width: 100%; position: sticky; top: 0; left: 0; z-index: 2; } .section-cta__item-inner { max-width: 103.875rem; width: 90%; } .section-cta__head { margin-bottom: 7rem; text-align: center; } .cta-headline { overflow: hidden; text-align: center; } .cta-headline span { display: block; font-family: var(--font-display); font-style: italic; font-size: max(44px, 9.5rem); line-height: 1; letter-spacing: -.01em; color: var(--paper); transform: translateY(100%); transition: transform .6s var(--ease-settle); } .section-cta__head .ttl-04 { margin-top: 2.25rem; overflow: hidden; color: var(--paper); font-family: var(--font-sans); font-size: max(15px, 1.375rem); line-height: 1.6; } .section-cta__head .ttl-04 span { display: block; transform: translateY(100%); transition: transform var(--transit); } .section-cta__btns { display: grid; opacity: 0; pointer-events: none; transition: opacity var(--transit); gap: .5rem; } @media (min-width: 48em) { .section-cta__btns { grid-template-areas: "BTN1 BTN3" "BTN2 BTN3"; grid-template-columns: repeat(2, minmax(0, 1fr)); } } .cta-btn { border-radius: var(--radius); background: var(--paper); color: var(--black); position: relative; padding: 3.125rem 2.5rem 5.25rem; transition: background-color var(--transit), transform .16s var(--ease-out); } .cta-btn .en { font-family: var(--font-display); font-style: italic; font-size: max(28px, 3.5rem); line-height: 1; letter-spacing: 0; } .cta-btn .sub { margin-top: .75rem; color: var(--paper-mute); } .cta-btn .sub a { position: static; } .cta-btn > a::before { content: ""; position: absolute; inset: 0; z-index: 1; } .cta-btn .circle { display: flex; align-items: center; justify-content: center; width: 3.875rem; aspect-ratio: 1; border: 1px solid var(--black); background: var(--black); color: var(--paper); border-radius: 50%; position: absolute; right: 1.25rem; bottom: 1.25rem; overflow: hidden; transition: background-color var(--transit), border-color var(--transit); } .cta-btn .circle svg { width: 1.4rem; height: 1.4rem; } .cta-btn:first-child { grid-area: BTN1; } .cta-btn:nth-child(2) { grid-area: BTN2; } .cta-btn:nth-child(3) { grid-area: BTN3; background: var(--champagne); color: var(--black); } .cta-btn:nth-child(3) .sub { color: var(--black); opacity: .75; } .cta-btn:nth-child(3) .guides { display: grid; gap: .75rem; margin-top: 2rem; position: relative; z-index: 2; } .cta-btn:nth-child(3) .guides a { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid rgba(13,13,14,.35); padding-block: .75rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em; font-size: max(11px, .8125rem); transition: border-color var(--transit); } .cta-btn:nth-child(3) .circle { background: var(--black); border-color: var(--black); } @media (hover: hover) { .cta-btn:hover { background: #fff; box-shadow: 0 16px 40px rgba(13,13,14,.28); } .cta-btn:hover .circle { background: var(--wine); border-color: var(--wine); } .cta-btn:hover .circle svg { animation: .6s btn_arrow ease-in infinite; } .cta-btn:nth-child(3):hover { background: #d4bc93; } .cta-btn:nth-child(3) .guides a:hover { border-color: var(--black); } } @keyframes btn_arrow { 0% { translate: 0 0; } 49% { translate: calc(2.2222em + 50%) 0; } 50% { translate: calc(2.2222em + 50%) 0; opacity: 0; } 51% { translate: calc(-2.2222em - 50%) 0; opacity: 0; } 52% { translate: calc(-2.2222em - 50%) 0; opacity: 1; } 100% { translate: 0 0; } } .section-cta__cta-inner.is-inview--cta .cta-headline span { transform: translateY(0); } .section-cta__cta-inner.is-inview--cta .section-cta__head .ttl-04 span { transform: translateY(0); transition-delay: .2s; } .section-cta__cta-inner.is-inview--cta .section-cta__btns { opacity: 1; pointer-events: auto; transition-delay: .4s; } .cta-todo { display: block; margin-top: .5rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em; font-size: max(11px, .6875rem); color: var(--wine); } .cta-btn:nth-child(3) .cta-todo { color: var(--black); } /* inquiry form sketch — on wine, paper fields */ .inquiry { background: var(--wine); color: var(--paper); padding: 4rem 0 10rem; position: relative; z-index: 2; } .inquiry__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 4rem; } .inquiry__intro .ttl-02 { line-height: 1.3; margin-bottom: 1.5rem; } .inquiry__intro .ttl-02 em { font-style: italic; color: var(--champagne); } .inquiry__intro .txt-lg { color: var(--paper); opacity: .9; } .inquiry__intro .mono { margin-top: 2rem; color: var(--paper); opacity: .85; } .inquiry__intro .contact-lines { margin-top: 2.5rem; display: grid; gap: .5rem; } .inquiry__intro .contact-lines a { border-bottom: 1px solid rgba(237,237,234,.4); width: fit-content; transition: border-color var(--transit); } .inquiry__intro .contact-lines a:hover { border-color: var(--paper); } .form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } /* rev. 9 — HoneyBook embedded lead form sits in the right column on the wine ground; the widget styles its own fields */ .form--embed { display: block; min-height: 32rem; position: relative; } .form--embed > div[class^="hb-p-"] { min-height: 32rem; } .form--embed .note a { color: var(--paper); border-bottom: 1px solid rgba(237,237,234,.5); } .form .full { grid-column: 1 / -1; } .form label { display: grid; gap: .5rem; align-content: start; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em; font-size: max(11px, .75rem); color: var(--paper); } .form input, .form select, .form textarea { font: inherit; font-family: var(--font-sans); font-size: max(14px, 1.0625rem); letter-spacing: .01em; color: var(--black); background: var(--paper); border: 1px solid var(--paper); border-radius: var(--radius-xs); padding: .9rem 1rem; width: 100%; } .form textarea { min-height: 9rem; resize: vertical; } .form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--champagne); outline-offset: 2px; } .form .actions { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .form .submit { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .14em; font-size: max(11px, .8125rem); background: var(--champagne); color: var(--black); border-radius: 100vmax; padding: 1.1em 2.4em; transition: background-color var(--transit), transform .16s var(--ease-out); } .form .submit:hover { background: var(--paper); } .form .note { color: var(--paper); opacity: .85; } .form .req { color: var(--champagne); margin-left: .25em; } .form .help { font-family: var(--font-sans); text-transform: none; letter-spacing: .01em; font-size: max(13px, .875rem); color: var(--paper); opacity: .8; line-height: 1.5; } /* inline error pattern (not wired): add .is-error to the