/* ========================================================================= L'Atelier de MIA — Homepage (Phase 1) Five locked movements from Master Playbook §4: M1 Overture — full-bleed image + ONE headline placement (this repo uses `.headline--band`: a 40vh ivory band DIRECTLY BELOW the image, never inside). M2 Invitation — ivory canvas, founder paragraph, one primary link. M3 Archive Glimpse — a single editorial image + a line + a link. M4 The House — a founder-voiced line + a link. M5 Closing — a serif line + one quiet link. Vertical rhythm: each movement is separated by at least `--space-8` (128px) on desktop, `--space-7` (96px) on mobile. The fold is never a hard cut — movements flow into each other, but each has a clear centre. No buttons. No accent colours. No decorative frames. Type, space, and one action per movement. ========================================================================= */ /* ============ Shared — the one column the house writes into ============= */ .home-block { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-5); } .home-block--narrow { max-width: 720px; } /* Movement dividers — hairline, not ornaments. */ .home hr.movement-divider { appearance: none; border: 0; height: 1px; background: var(--hairline); margin: var(--space-8) auto; max-width: 1280px; width: calc(100% - (var(--space-5) * 2)); } @media (max-width: 899px) { .home hr.movement-divider { margin: var(--space-7) auto; } } /* ========================================================================= M1 — HERO (full-bleed, Oscar de la Renta style) ========================================================================= */ /* Full-viewport image with text overlay bottom-left. Nav overlays on top transparently via data-nav-mask on . */ .hero { position: relative; width: 100%; height: 100svh; min-height: 560px; overflow: hidden; } .hero__media { display: block; width: 100%; height: 100%; } .hero__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; } /* Text overlay — bottom-left, over the image (Oscar de la Renta style) */ .hero__overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-7) var(--space-5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); background: linear-gradient( 0deg, rgba(26, 22, 18, 0.30) 0%, rgba(26, 22, 18, 0) 60% ); } .hero__eyebrow { font-family: var(--font-sans); font-size: 13px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); } .hero__title { margin: 0; font-family: var(--font-sans); font-size: 42px; font-weight: 300; letter-spacing: -0.01em; line-height: 1.1; text-transform: uppercase; color: var(--white); } .hero__link { font-family: var(--font-sans); font-size: 14px; font-weight: 400; letter-spacing: 0.02em; color: var(--white); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: opacity var(--dur-fast) var(--ease); } .hero__link:hover { opacity: 0.75; } @media (max-width: 899px) { .hero { min-height: 480px; } .hero__title { font-size: var(--type-display-size-mobile); } .hero__overlay { padding: var(--space-6) var(--space-4); } } /* ========================================================================= M2 — INVITATION ========================================================================= */ /* Ivory canvas, founder's paragraph, one primary link. Body text is type-body-editorial (serif, 19px). Line length ≤ 48ch. */ .invitation { padding: var(--space-7) 0; background: var(--canvas); } .invitation__inner { max-width: 720px; margin: 0 auto; padding: 0 var(--space-5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); } .invitation__eyebrow { font-family: var(--type-label-caps-font); font-size: var(--type-label-caps-size); font-weight: var(--type-label-caps-weight); letter-spacing: var(--type-label-caps-tracking); text-transform: var(--type-label-caps-case); color: var(--muted); } .invitation__body { margin: 0; max-width: 48ch; font-family: var(--type-body-editorial-font); font-size: var(--type-body-editorial-size); font-weight: var(--type-body-editorial-weight); line-height: 1.7; color: var(--fg); } .invitation__body em { font-style: italic; } @media (max-width: 899px) { .invitation { padding: var(--space-7) 0; } } /* ========================================================================= M3 — ARCHIVE GLIMPSE ========================================================================= */ /* A single editorial image, a caption line, and a quiet link into the archive. The image is wide but not full-bleed — it is set inside the same home-block gutter as the text movements so it reads as "a piece the house chose to show you", not a marketing banner. */ .archive-glimpse { padding: var(--space-7) 0; background: var(--canvas); } .archive-glimpse__media { max-width: 1080px; margin: 0 auto var(--space-5); padding: 0 var(--space-5); } .archive-glimpse__image { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; } .archive-glimpse__caption { max-width: 720px; margin: 0 auto; padding: 0 var(--space-5); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); } .archive-glimpse__line { margin: 0; max-width: 36ch; font-family: var(--type-subheadline-font); font-size: var(--type-subheadline-size); font-weight: var(--type-subheadline-weight); letter-spacing: var(--type-subheadline-tracking); line-height: 1.3; color: var(--fg); } .archive-glimpse__line em { font-style: italic; } @media (max-width: 899px) { .archive-glimpse { padding: var(--space-7) 0; } .archive-glimpse__image { aspect-ratio: 3 / 4; } } /* ========================================================================= M4 — THE HOUSE ========================================================================= */ /* Founder-voiced line + link. No image. Pure type against canvas. */ .the-house { padding: var(--space-8) 0; background: var(--canvas-deep); } .the-house__inner { max-width: 720px; margin: 0 auto; padding: 0 var(--space-5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); } .the-house__eyebrow { font-family: var(--type-label-caps-font); font-size: var(--type-label-caps-size); font-weight: var(--type-label-caps-weight); letter-spacing: var(--type-label-caps-tracking); text-transform: var(--type-label-caps-case); color: var(--muted); } .the-house__line { margin: 0; max-width: 36ch; font-family: var(--type-headline-font); font-size: var(--type-headline-size); font-weight: var(--type-headline-weight); letter-spacing: var(--type-headline-tracking); line-height: 1.2; color: var(--fg); } .the-house__line em { font-style: italic; } @media (max-width: 899px) { .the-house { padding: var(--space-7) 0; } } /* ========================================================================= M5 — CLOSING ========================================================================= */ /* A serif line + one quiet link. Centred. Generous breathing room. */ .closing { padding: var(--space-8) 0; background: var(--canvas); text-align: center; } .closing__inner { max-width: 720px; margin: 0 auto; padding: 0 var(--space-5); display: flex; flex-direction: column; align-items: center; gap: var(--space-5); } .closing__line { margin: 0; max-width: 28ch; font-family: var(--type-subheadline-font); font-size: var(--type-subheadline-size); font-weight: var(--type-subheadline-weight); letter-spacing: var(--type-subheadline-tracking); line-height: 1.3; color: var(--fg); font-style: italic; } @media (max-width: 899px) { .closing { padding: var(--space-7) 0; } } /* ========================================================================= SCROLL-REVEAL (opt-in, activated by js/home.js) ========================================================================= */ /* M2–M5 fade up on first reveal. Duration --dur-reveal. The js sets .reveal on each movement's inner wrapper, then .is-visible when the element scrolls into view. Under prefers-reduced-motion, tokens collapse durations to 0ms — the element snaps into place. */ .reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Stagger siblings by 100ms — use .reveal--delay-1, .reveal--delay-2 etc. */ .reveal--delay-1 { transition-delay: 100ms; } .reveal--delay-2 { transition-delay: 200ms; } .reveal--delay-3 { transition-delay: 300ms; }