/* ============================================================================ components.css — all component + layout styles Consumes tokens from tokens.css. Mobile-first; desktop refinements live in @media (min-width: 768px) blocks. Class names are plain semantic (no BEM, no utility-first) per CLAUDE.md L1054. Line refs (e.g. L188) point back to CLAUDE.md. ============================================================================ */ /* ============================================================================ 1. Containers (L145–157) ============================================================================ */ .page { max-width: var(--layout-max-width); margin-left: auto; margin-right: auto; padding-left: var(--layout-padding-mobile); padding-right: var(--layout-padding-mobile); } .prose { max-width: var(--prose-max-width); } /* Escape a constrained ancestor and span the full viewport */ .full-bleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } @media (min-width: 768px) { .page { padding-left: var(--layout-padding-desktop); padding-right: var(--layout-padding-desktop); } } /* ============================================================================ 2. Sections — vertical rhythm (L159–170) Section padding sets the top/bottom whitespace. Within a section: the gap AFTER a headline uses --space-headline-to-body; the gap BEFORE a CTA uses --space-body-to-cta; gaps BETWEEN paragraphs inherit the 1.5em rule from base.css (so prose breathes correctly inside section rhythm). ============================================================================ */ .section { padding-top: var(--space-section); padding-bottom: var(--space-section); } /* Anything immediately after a headline gets pushed down by headline-to-body */ .section > .display + *, .section > .section-headline + *, .section > .medium-headline + *, .section > h1 + *, .section > h2 + *, .section > h3 + * { margin-top: var(--space-headline-to-body); } /* CTAs pull away from the preceding body with the larger body-to-CTA gap */ .section > .cta { margin-top: var(--space-body-to-cta); } /* Deliberate tight rhythm — headline + body sit very close. Applied ALONGSIDE .section (e.g.
). Only zeros the headline gap; paragraph-to-paragraph spacing remains unchanged. */ .section-tight > .display + *, .section-tight > .section-headline + *, .section-tight > .medium-headline + *, .section-tight > h1 + *, .section-tight > h2 + *, .section-tight > h3 + * { margin-top: 0; } /* Center the contents of a section — used for "moment of return" beats like the homepage closing, where text and CTA sit on the same axis as a preceding centered inset image. Applied alongside .section. Prose paragraphs inside also get auto margins so their max-width-constrained block sits centered (not just the text inside the block). */ .section-center { text-align: center; } .section-center > p { margin-left: auto; margin-right: auto; } /* Halve the top/bottom padding of a section. Used in pairs around a between-sections image to compress a unified visual beat (e.g. quote → inset image → CTA reading as one closing movement instead of three orphaned sections). Applied alongside .section. */ .section-tight-top { padding-top: clamp(40px, 6vw, 80px); } .section-tight-bottom { padding-bottom: clamp(40px, 6vw, 80px); } /* ---------------------------------------------------------------------------- Journal-post article rhythm (scoped to ) Journal posts stack many short sections — an em-dash label, then the prose it introduces — plus margin-less standalone images. Because every .section pads top AND bottom, adjacent sections double their padding into ~160px dead gaps, so the label floats away from its paragraph and the page reads as glitchy instead of editorial. Here, section spacing is driven by COLLAPSING MARGINS instead, giving one clean gap between blocks: a full break above each label, the label hugging the prose below it, and a tighter rhythm around photos. ---------------------------------------------------------------------------- */ .journal-post main > .section { padding-top: 0; padding-bottom: 0; } /* In label-only sections the label's own 32px is redundant — the section margins set the spacing. (Kept on the title section's label, which sits with an h1 and isn't an only-child.) */ .journal-post main > .section > .section-label:only-child { margin-bottom: 0; } /* Default editorial break between stacked blocks. */ .journal-post main > * + * { margin-top: var(--space-section); } /* Anything adjacent to a standalone photo sits on the tighter photo rhythm (and keeps consecutive insets from butting together). */ .journal-post main > * + img, .journal-post main > * + .photo-pair, .journal-post main > img + *, .journal-post main > .photo-pair + * { margin-top: var(--space-photo); } /* The em-dash label hugs the prose it introduces. */ .journal-post main > .section:has(> .section-label:only-child) + .section { margin-top: var(--space-headline-to-body); } /* The last section's bottom padding is now zero — restore space before the footer. */ .journal-post main { padding-bottom: var(--space-section); } /* ============================================================================ 3. Headlines (L79–86, italic rule L93–99) .display is italic by default (every locked use is italic). .section-headline and .medium-headline are roman (informational). ============================================================================ */ .display { font-family: var(--font-display); font-weight: var(--font-weight-extralight); font-style: italic; font-size: var(--size-display); color: var(--color-nav); line-height: 1.0; text-align: center; } .section-headline { font-family: var(--font-display); font-weight: var(--font-weight-light); font-size: var(--size-section-headline); color: var(--color-nav); line-height: 1.1; } .medium-headline { font-family: var(--font-display); font-weight: var(--font-weight-light); font-size: var(--size-medium-headline); color: var(--color-nav); line-height: 1.15; } /* ============================================================================ 4. Labels (L86) — small all-caps tracked, color inherits from context ============================================================================ */ .label { font-family: var(--font-display); font-weight: var(--font-weight-light); font-size: var(--size-label); letter-spacing: var(--tracking-labels); text-transform: uppercase; } /* Editorial label — small em-dash-prefixed tag that sits above a section ("— Philosophy", "— Weddings at", "— From a client"). The structural move that pushes the page from "big titles website" toward "magazine spread." Wider tracking than .label, mixed-case (preserves the em-dash typography), secondary color so it sits beneath the headline visually. */ .section-label { font-family: var(--font-display); font-weight: var(--font-weight-light); font-size: var(--size-section-label); letter-spacing: var(--tracking-section-label); text-transform: uppercase; color: var(--color-text-secondary); text-align: center; margin-bottom: 32px; } /* Vendor-credit byline links — currently the only links that appear inside a .section-label. Make them obviously clickable by reusing the site's thin always-on underline link language (same register as the .cta underline), kept in the inherited grey so the byline still reads as a quiet masthead. Hover fades to 60% to match the nav links. */ .section-label a { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--color-text-tertiary); text-underline-offset: 4px; transition: opacity var(--motion-duration-hover) var(--motion-easing); } .section-label a:hover { opacity: 0.6; } /* Work-story chapter headings (.section-label.chapter-label) — the 11px gray label disappears while scrolling, so these stay an UPPERCASE tracked label (same register as the rest of the system) but a touch larger and in dark ink. Visible as a waypoint without becoming a headline that out-shouts the couple name and venue above it. Scoped via the extra class so homepage labels, the intro subtitle, and the credits byline keep the small size. Two-class selector wins regardless of source order. */ .section-label.chapter-label { font-size: 16px; color: var(--color-nav); } /* ============================================================================ 5. Bullet lists (L1330–1335) — em-dash markers for editorial restraint ============================================================================ */ .bullet-list { list-style: none; padding-left: 0; max-width: var(--prose-max-width); } .bullet-list > li { position: relative; padding-left: 1.5em; } .bullet-list > li::before { content: "—"; position: absolute; left: 0; color: var(--color-text-tertiary); } .bullet-list > li + li { margin-top: 12px; } /* ============================================================================ 5b. Pricing table — investment-guide.html packages. No cell borders, no row striping, no shaded headers. Hairline rule between rows. Editorial spec-sheet feel, not SaaS pricing card. ============================================================================ */ .pricing-table { width: 100%; max-width: var(--prose-max-width); border-collapse: collapse; text-align: left; } .pricing-table th { font-family: var(--font-display); font-weight: var(--font-weight-light); font-size: var(--size-section-label); letter-spacing: var(--tracking-section-label); text-transform: uppercase; color: var(--color-text-secondary); padding: 16px 0; border-bottom: 1px solid var(--color-text-tertiary); } .pricing-table td { font-family: var(--font-text); font-weight: var(--font-weight-body); font-size: var(--size-body); color: var(--color-text); padding: 24px 0; border-bottom: 1px solid var(--color-text-tertiary); } .pricing-table tr:last-child td { border-bottom: none; } /* ============================================================================ 6. Text-link CTAs (L935–944) Always-on underline under the text. Arrow appended via ::after, translates right on hover. Underline stays put — arrow slides out from under it. ============================================================================ */ .cta { display: inline-block; font-family: var(--font-display); font-weight: var(--font-weight-light); font-size: var(--size-label); letter-spacing: var(--tracking-labels); text-transform: uppercase; color: inherit; text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid currentColor; } .cta::after { content: " →"; display: inline-block; margin-left: 0.4em; transition: transform var(--motion-duration-hover) var(--motion-easing); } .cta:hover::after { transform: translateX(6px); } /* ============================================================================ 7. Site nav (L188–203, 197–201, 929–933, 940–946) Fixed at top. Mobile: monogram centered, MENU absolute top-right. Desktop: monogram centered, link row beneath. ============================================================================ */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 24px var(--layout-padding-mobile); display: flex; flex-direction: column; align-items: center; gap: 16px; background-color: var(--color-bg); transition: transform var(--motion-duration-hover) var(--motion-easing); } @media (min-width: 768px) { .site-nav { padding: 32px var(--layout-padding-desktop); } } /* Overlaid on hero — transparent background, light-colored links */ .site-nav.is-overlay { background-color: transparent; } /* When the mobile menu is open, the white overlay would render the overlay-mode nav (white text + inverted monogram) invisible. Body gets .menu-is-open from main.js while the menu is open — these rules temporarily revert the nav to its solid-background dark-text styling so MENU/CLOSE and the monogram stay visible. */ body.menu-is-open .site-nav.is-overlay { background-color: var(--color-bg); } body.menu-is-open .site-nav.is-overlay .nav-link, body.menu-is-open .site-nav.is-overlay .menu-trigger { color: var(--color-nav); } body.menu-is-open .site-nav.is-overlay .nav-monogram { filter: none; } /* JS toggles this when scrolling down past the hero */ .site-nav.is-hidden { transform: translateY(-100%); } .nav-monogram-link { display: block; line-height: 0; transition: opacity var(--motion-duration-hover) var(--motion-easing); } .nav-monogram-link:hover { opacity: 0.6; } .site-nav.is-overlay .nav-monogram { filter: invert(1); } .nav-monogram { display: block; height: var(--logo-nav-height); width: auto; } .nav-links { display: none; list-style: none; padding: 0; margin: 0; } @media (min-width: 768px) { .nav-links { display: flex; gap: 32px; } } .nav-link { font-family: var(--font-display); font-weight: var(--font-weight-light); font-size: var(--size-label); letter-spacing: var(--tracking-labels); text-transform: uppercase; color: var(--color-nav); text-decoration: none; padding-bottom: 4px; transition: opacity var(--motion-duration-hover) var(--motion-easing); } .site-nav.is-overlay .nav-link { color: var(--color-bg); } .nav-link:hover { opacity: 0.6; } .nav-link.is-active { border-bottom: 1px solid currentColor; } /* ============================================================================ 8. Mobile menu (L956–969) Trigger top-right on mobile only. Overlay covers everything beneath the nav (z-index 99 sits below site-nav's 100 so nav stays visible above overlay). ============================================================================ */ .menu-trigger { position: absolute; top: 24px; right: var(--layout-padding-mobile); font-family: var(--font-display); font-weight: var(--font-weight-light); font-size: var(--size-label); letter-spacing: var(--tracking-labels); text-transform: uppercase; color: var(--color-nav); } .site-nav.is-overlay .menu-trigger { color: var(--color-bg); } /* Inverted overlay — for pages whose hero is high-key/bright (a white wall, pale sky) behind the nav, where the default white overlay text washes out. Add `is-overlay-inverted` alongside `is-overlay` on the