/* ============================================ INNER-PAGE PRIMITIVES Shared aesthetic patterns for every page that isn't the homepage. Three components: 1. .page-hero — photo-backdrop hero with watermark + scripture overture 2. .editorial-numbered — oversized-numeral editorial spread (matches homepage Purpose) 3. .section-cta — dark-gradient closing CTA (matches homepage .cta) These bring the homepage's editorial register to every inner page without duplicating CSS per file. ============================================ */ /* ============================================ NAV — transparent over .page-hero, fades in chrome on scroll. Mirrors the homepage's nav scroll behavior. Activate by adding class="has-page-hero" to . ============================================ */ .has-page-hero .nav .container { border-color: transparent; box-shadow: none; } .has-page-hero .nav .container::before { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } /* Dark-navy glass when scrolled OR when the mega menu opens — matches the homepage + coming-soon glass. Border + shadow on the container; glass on the ::before so the container stays free of backdrop-filter (see nav.css). */ .has-page-hero .nav.scrolled .container, .has-page-hero .nav.mega-open .container { border-color: rgba(255, 255, 255, 0.22); box-shadow: var(--shadow-md); } .has-page-hero .nav.scrolled .container::before, .has-page-hero .nav.mega-open .container::before { background: rgba(18, 30, 54, 0.78); } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .has-page-hero .nav.scrolled .container::before, .has-page-hero .nav.mega-open .container::before { background: rgba(18, 30, 54, 0.34); -webkit-backdrop-filter: blur(22px) saturate(135%); backdrop-filter: blur(22px) saturate(135%); } } /* Nav text stays light in every state (the glass is dark navy throughout). */ .has-page-hero .nav-links a { color: var(--white); } .has-page-hero .nav-aux { border-left-color: rgba(255, 255, 255, 0.18); } .has-page-hero .nav-aux a { color: rgba(255, 255, 255, 0.72); } .has-page-hero .nav-aux a:hover { color: var(--white); } .has-page-hero .nav-toggle span { background: var(--white); } /* Mobile: the links sit inside the white slide-out panel, so they revert to dark ink there (the over-hero white would otherwise be invisible). */ @media (max-width: 1100px) { .has-page-hero .nav-links a, .has-page-hero .nav-aux a { color: var(--charcoal); } } /* ============================================ 1) PAGE HERO — photo backdrop + parallax targets ============================================ */ .page-hero { --scroll-p: 0; position: relative; min-height: 78vh; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--white); overflow: hidden; border-radius: calc(var(--scroll-p) * 28px); transform: scale(calc(1 - var(--scroll-p) * 0.025)); transform-origin: 50% 0%; z-index: 2; will-change: transform, border-radius, box-shadow; } /* Backdrop image — set via inline data-bg in HTML, or a per-page class. Held below content via z-index. */ .page-hero-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; transform: scale(1.04) translate3d(calc(var(--mx, 0) * -8px), calc(var(--my, 0) * -8px), 0); } .page-hero-bg { position: absolute; inset: 0; background: linear-gradient(165deg, rgba(15, 28, 55, 0.62) 0%, rgba(10, 18, 35, 0.55) 50%, rgba(0, 0, 0, 0.68) 100%); z-index: 1; } .page-hero-pattern { position: absolute; inset: 0; opacity: 0.04; background-image: radial-gradient(circle at 22% 50%, var(--white) 1px, transparent 1px), radial-gradient(circle at 78% 22%, var(--white) 1px, transparent 1px), radial-gradient(circle at 60% 82%, var(--white) 1px, transparent 1px); background-size: 60px 60px, 80px 80px, 100px 100px; z-index: 2; } /* Single-word watermark behind the headline */ .page-hero-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) translate3d(calc(var(--mx, 0) * 16px), calc(var(--my, 0) * 16px), 0); font-family: var(--font-heading); font-size: clamp(8rem, 22vw, 22rem); font-weight: 200; letter-spacing: -0.06em; color: rgba(255, 255, 255, 0.04); pointer-events: none; white-space: nowrap; z-index: 2; user-select: none; line-height: 1; text-transform: uppercase; } .page-hero-content { position: relative; z-index: 3; max-width: 880px; padding: 0 24px; transform: translate3d(calc(var(--mx, 0) * 5px), calc(var(--my, 0) * 4px), 0); } /* Hero entrance — staggered fade-up, mirrors the homepage hero rhythm. Each child starts hidden and fades up at its own delay. The transform on .page-hero-content for parallax kicks in only after entrance settles. */ .page-hero-overture, .page-hero-eyebrow, .page-hero h1, .page-hero-lead, .page-hero-actions { opacity: 0; animation: fadeInUp 0.9s var(--ease-calm) forwards; } .page-hero-overture { animation-delay: 0.1s; } .page-hero-eyebrow { animation-delay: 0.3s; } .page-hero h1 { animation-delay: 0.45s; } .page-hero-lead { animation-delay: 0.6s; } .page-hero-actions { animation-delay: 0.75s; } .page-hero-scroll { opacity: 0; animation: fadeInUp 0.9s var(--ease-calm) 0.95s forwards, pageHeroBounce 2s ease-in-out 1.85s infinite; } /* Cormorant scripture overture sits above the eyebrow label — sets the contemplative register before the page even introduces itself. */ .page-hero-overture { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 300; font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.55; color: rgba(255, 255, 255, 0.78); max-width: 600px; margin: 0 auto 28px; } .page-hero-overture cite { display: block; margin-top: 14px; font-family: var(--font-heading); font-style: normal; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.48); } .page-hero-eyebrow { font-family: var(--font-heading); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); margin: 0 0 22px; } .page-hero h1 { font-family: var(--font-heading); font-size: clamp(2.4rem, 5.6vw, 4rem); font-weight: 300; line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 28px; color: var(--white); } .page-hero h1 strong { font-weight: 700; } /* Optional break inside hero h1 — only renders ≥720px so the headline wraps naturally on phones rather than being forced onto two lines. */ .page-hero h1 .h1-br { display: none; } @media (min-width: 720px) { .page-hero h1 .h1-br { display: inline; } } .page-hero-lead { font-family: var(--font-body); font-size: clamp(1.05rem, 1.5vw, 1.2rem); font-weight: 300; line-height: 1.75; color: rgba(255, 255, 255, 0.78); max-width: 620px; margin: 0 auto; } .page-hero-actions { margin-top: 40px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .page-hero-scroll { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); z-index: 3; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.55); text-decoration: none; } .page-hero-scroll svg { width: 20px; height: 20px; } /* Bounce uses translateX(-50%) so it doesn't fight the centering transform. */ @keyframes pageHeroBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } } @media (prefers-reduced-motion: reduce) { .page-hero-bg-img, .page-hero-watermark, .page-hero-content { transform: none !important; } .page-hero-overture, .page-hero-eyebrow, .page-hero h1, .page-hero-lead, .page-hero-actions, .page-hero-scroll { opacity: 1; animation: none !important; } } @media (max-width: 768px) { .page-hero { min-height: 64vh; } /* Keep the watermark subtle on phones too — bumping opacity here turned it into a billboard instead of a watermark. */ .page-hero-watermark { font-size: clamp(6rem, 28vw, 12rem); } .page-hero-overture { font-size: 1.05rem; } } /* ============================================ 2) EDITORIAL NUMBERED SPREAD Repeating the homepage Purpose section's numbered editorial pattern. Reusable per page. ============================================ */ .editorial-numbered { list-style: none; padding: 0; margin: 0; display: grid; row-gap: 56px; max-width: 920px; margin-left: auto; margin-right: auto; } .editorial-numbered > li { display: grid; grid-template-columns: 180px 1fr; align-items: start; column-gap: 32px; padding-top: 36px; border-top: 1px solid var(--hairline); } .editorial-numbered > li:first-child { border-top: 0; padding-top: 0; } .editorial-numbered .ed-num { font-family: var(--font-heading); font-size: clamp(5.5rem, 9vw, 8.5rem); font-weight: 200; line-height: 0.85; letter-spacing: -0.04em; color: rgba(31, 32, 36, 0.14); display: block; user-select: none; margin-top: -8px; } .editorial-numbered h3 { font-family: var(--font-heading); font-size: clamp(1.25rem, 1.8vw, 1.55rem); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); margin: 8px 0 12px; } .editorial-numbered p { font-family: var(--font-body); font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.7; color: var(--text-body); font-weight: 300; max-width: 56ch; margin: 0; } @media (max-width: 900px) { .editorial-numbered > li { grid-template-columns: 1fr; row-gap: 16px; padding-top: 28px; } .editorial-numbered .ed-num { font-size: clamp(4.5rem, 12vw, 6rem); margin-top: 0; } } /* Editorial section watermark — single oversized word behind a headline. */ .editorial-watermark-wrap { position: relative; text-align: center; } .editorial-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -52%); font-family: var(--font-heading); font-size: clamp(7rem, 16vw, 16rem); font-weight: 200; letter-spacing: -0.06em; color: rgba(44, 74, 110, 0.045); pointer-events: none; white-space: nowrap; z-index: 0; user-select: none; line-height: 1; text-transform: uppercase; } @media (max-width: 900px) { .editorial-watermark { display: none; } } /* Hairline rule — the page's quiet breath between epigraph and body. */ .editorial-rule { width: 1px; height: 88px; margin: 56px auto; background: linear-gradient(180deg, transparent, var(--hairline-strong, rgba(31,32,36,0.14)), transparent); } @media (max-width: 900px) { .editorial-rule { height: 64px; margin: 40px auto; } } /* ============================================ 3) SECTION CTA — dark gradient close ============================================ */ .section-cta { background: linear-gradient(135deg, var(--charcoal) 0%, #18243a 60%, var(--accent) 100%); color: var(--white); padding: 120px 0; text-align: center; position: relative; overflow: hidden; } .section-cta::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, var(--white) 1px, transparent 1px), radial-gradient(circle at 80% 70%, var(--white) 1px, transparent 1px); background-size: 80px 80px, 100px 100px; opacity: 0.025; pointer-events: none; } .section-cta .container { position: relative; z-index: 1; } .section-cta .section-label { color: rgba(255, 255, 255, 0.45); margin-bottom: 18px; } .section-cta .section-title, .section-cta h2 { color: var(--white); font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 300; line-height: 1.2; letter-spacing: -0.015em; margin: 0 auto 22px; max-width: 720px; } .section-cta .section-title strong, .section-cta h2 strong { font-weight: 700; } .section-cta-lead { font-family: var(--font-body); font-size: 1.1rem; font-weight: 300; line-height: 1.75; color: rgba(255, 255, 255, 0.72); max-width: 580px; margin: 0 auto 40px; } .section-cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* Inverted primary inside .section-cta (matches .cta override in buttons.css): white pill on dark gradient for contrast. */ .section-cta .btn-primary { background: var(--white); color: var(--accent); border-color: var(--white); } .section-cta .btn-primary:hover { background: transparent; color: var(--white); border-color: var(--white); } /* Closing scripture below CTA — the brand's quiet sign-off. */ .section-cta .scripture { text-align: center; margin: 56px auto 0; max-width: 620px; color: rgba(255, 255, 255, 0.55); } .section-cta .scripture-attr { color: rgba(255, 255, 255, 0.78); } @media (max-width: 768px) { .section-cta { padding: 88px 0; } }