@import url("https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,200..800&display=swap"); /* * design-system-v2.css * Equinox Audio Visuals — Direction A "The Quiet Room" * Phase 2: Design System v2 * * Per EQUINOX_AUDIT_AND_REIMAGINING.md §4 * All rules are scoped to .v2 on so non-pilot pages are unaffected. * Load this file AFTER stable-header.css on pilot pages only. * * Pilot pages: index.html, work-equinox-wedding.html * * Token source: stable-header.css :root block (v2 tokens section) * Do not add tokens here — add them to stable-header.css :root. */ /* ========================================================================== 1. CANVAS & BODY ========================================================================== */ .v2 { --font-heading: "Newsreader", Georgia, "Times New Roman", serif; background: var(--bone); color: var(--ink); } .v2 body, body.v2 { font-family: var(--font-body-v2); background: var(--bone); color: var(--ink); font-size: var(--scale-3); line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; padding-top: 70px; /* compensate for fixed header */ text-rendering: optimizeLegibility; /* Horizontal bleed: clip on html (see below), not body — avoids fixed overlay / scroll-lock quirks with body overflow */ overflow-x: visible; } /* Contain horizontal overflow at the root so body can stay overflow-x: visible for viewport-fixed UI (e.g. lightbox). */ html:has(body.v2) { overflow-x: hidden; } /* ========================================================================== 2. TYPOGRAPHY — A/V rack rhythm + centered technical authority ========================================================================== */ .v2 h1, .v2 h2, .v2 h3, .v2 h4, .v2 h5, .v2 h6 { color: var(--ink); background: none; -webkit-background-clip: unset; -webkit-text-fill-color: unset; background-clip: unset; animation: none; filter: none; text-wrap: balance; text-align: center; } .v2 h1, .v2 h2, .v2 h3, .v2 h4 { font-family: var(--font-heading); font-optical-sizing: auto; font-weight: 500; font-feature-settings: "ss01" 0, "swsh" 0; font-variant-alternates: normal; } .v2 h5, .v2 h6 { font-family: var(--font-display); font-weight: 400; } .v2 h1 { font-size: var(--scale-7); font-weight: 600; line-height: 1.05; letter-spacing: -0.025em; margin-top: var(--space-h1-top); margin-bottom: var(--space-h1-bottom); } .v2 h2 { font-size: var(--scale-6); line-height: 1.12; letter-spacing: -0.02em; margin-top: var(--space-h2-top); margin-bottom: var(--space-3); padding-bottom: var(--space-heading-hairline-gap); border-bottom: 1px solid var(--brass); } .v2 h3 { font-size: var(--scale-5); line-height: 1.22; letter-spacing: -0.015em; margin-top: var(--space-h3-top); margin-bottom: var(--space-3); padding-bottom: var(--space-heading-hairline-gap); border-bottom: 1px solid var(--brass); } .v2 h4 { font-size: var(--scale-4); line-height: 1.28; letter-spacing: -0.012em; margin-top: var(--space-h2-top); margin-bottom: var(--space-2); } .v2 h5, .v2 h6 { font-size: var(--scale-3); line-height: 1.3; letter-spacing: -0.01em; margin-top: var(--space-h2-top); margin-bottom: var(--space-2); } /* Full-bleed hero headlines — no rack air, no brass hairline */ .v2 .hero h1, .v2 .hero .hero__headline, .v2 .case-study-hero h1, .v2 .case-study-hero .case-study-hero__headline, .v2 .page-hero-v2 h1, .v2 .page-hero-v2 .page-hero-v2__headline, .v2 .work-hero .work-hero__title { margin-top: 0; margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .v2 .work-hero .work-hero__title { margin-bottom: var(--space-2); } .v2 .section-title { font-family: var(--font-heading); font-size: var(--scale-6); color: var(--ink); font-weight: 500; text-align: center; background: none; -webkit-background-clip: unset; -webkit-text-fill-color: unset; background-clip: unset; animation: none; font-feature-settings: "ss01" 0, "swsh" 0; font-variant-alternates: normal; filter: none; letter-spacing: -0.02em; line-height: 1.12; margin-bottom: var(--space-4); } .v2 p { color: var(--ink); max-width: var(--measure); line-height: 1.65; margin-bottom: var(--space-p-bottom); margin-left: auto; margin-right: auto; } .v2 p:last-child { margin-bottom: 0; } .v2 main p, .v2 main li { text-align: center; } .v2 .story-beat__body, .v2 .story-beat__eyebrow { text-align: center; } /* Body text in display serif for editorial sections */ .v2 .display { font-family: var(--font-heading); font-weight: 400; letter-spacing: -0.025em; line-height: 1.02; text-wrap: balance; font-feature-settings: "ss01" 0, "swsh" 0; font-variant-alternates: normal; } /* Suppress swash/alternates on all Fraunces (--font-display) usage */ .v2 h5, .v2 h6 { font-family: var(--font-display); font-weight: 400; font-variation-settings: "WONK" 0; font-feature-settings: "ss01" 0, "swsh" 0; font-variant-alternates: normal; } /* Mono utility — metadata, timecodes, captions, specs */ .v2 .mono { font-family: var(--font-mono); font-size: var(--scale-1); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; } /* ========================================================================== 3. LAYOUT ========================================================================== */ .v2 .container { max-width: var(--container-v2); margin: 0 auto; padding: 0 var(--space-4); } /* ========================================================================== 4. HEADER — brass hairline, mono eyebrow, six-item nav, one CTA ========================================================================== */ .v2 .header-stable { background: var(--bone); border-bottom: 1px solid rgba(18, 18, 18, 0.08); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; overflow: visible; /* allow logo medallion to overhang */ } .v2 .header-left { overflow: visible; } .v2 .header-left .logo-link { display: flex; align-items: center; overflow: visible; } .v2 .header-left .logo-link img, .v2 .logo-badge { height: 84px !important; width: auto !important; position: relative; z-index: 1001; transform: translateY(10px); filter: drop-shadow(0 4px 14px rgba(18, 18, 18, 0.20)); transition: transform 0.2s ease, filter 0.2s ease; } .v2 .logo-link:hover .logo-badge, .v2 .header-left .logo-link:hover img { transform: translateY(10px) scale(1.05); filter: drop-shadow(0 6px 18px rgba(18, 18, 18, 0.28)); } /* Brass accent bar at very top */ .v2 .header-stable::before { content: ""; display: block; height: 2px; background: var(--brass); position: absolute; top: 0; left: 0; right: 0; z-index: 2; } /* Nav links */ .v2 .nav-links a, .v2 .header-center a { color: var(--ink); font-size: var(--scale-2); font-family: var(--font-body-v2); font-weight: 400; background: none; -webkit-text-fill-color: unset; position: relative; transition: color var(--dur-1) var(--ease); } .v2 .nav-links a:hover, .v2 .header-center a:hover { color: var(--ember); background: none; } .v2 .nav-links a::after, .v2 .header-center a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--ember); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease); } .v2 .nav-links a:hover::after, .v2 .header-center a:hover::after { transform: scaleX(1); } /* CTA button in header (legacy btn-primary fallback) */ .v2 .header-right .btn-primary, .v2 .btn-cta { background: var(--ink); color: var(--bone); border-radius: var(--radius-1); font-size: var(--scale-2); font-family: var(--font-body-v2); font-weight: 500; padding: var(--space-2) var(--space-3); border: none; box-shadow: none; transition: background var(--dur-1) var(--ease); transform: none; } .v2 .header-right .btn-primary:hover, .v2 .btn-cta:hover { background: var(--ember); transform: none; box-shadow: none; } /* "Start a project" right-side CTA — Direction A ghost/underline style; Signal Pulse (live) */ @keyframes signal-pulse { 0%, 86%, 100% { box-shadow: 0 0 0 0 transparent; } 90% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ember) 0%, transparent), 0 0 6px 0 color-mix(in srgb, var(--ember) 8%, transparent); } 94% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ember) 12%, transparent), 0 0 18px 2px color-mix(in srgb, var(--ember) 15%, transparent); } 98% { box-shadow: 0 0 0 0 transparent; } } .v2 .nav-cta { color: var(--ink); text-decoration: none; font-size: var(--scale-1); font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding-bottom: 2px; border-bottom: 1.5px solid var(--ember); transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); white-space: nowrap; display: inline-block; position: relative; z-index: 0; animation: signal-pulse 4s cubic-bezier(0.45, 0, 0.2, 1) infinite; } .v2 .nav-cta:hover { color: var(--ember); border-color: var(--ember); background: none; animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .v2 .nav-cta { animation: none; } } @media (max-width: 992px) { .v2 .nav-cta { display: none !important; } /* Show CTA at bottom of mobile nav panel when open */ .v2 body.nav-open .nav-cta, body.nav-open .v2 .nav-cta { display: flex !important; position: fixed; bottom: 0; right: 0; width: 75%; max-width: 400px; z-index: 100002; padding: 1.5rem 2rem; background: var(--ink); border-top: 1px solid rgba(255, 255, 255, 0.1); justify-content: center; color: var(--bone); font-family: var(--font-mono); font-size: var(--scale-1); letter-spacing: 0.08em; text-transform: uppercase; border-bottom: none; text-decoration: none; animation: none; } } /* Mobile nav menu */ .v2 .mobile-nav, .v2 .nav-overlay { background: var(--bone); backdrop-filter: none; -webkit-backdrop-filter: none; } /* Mobile nav open state: force white text on dark slide-in panel */ @media (max-width: 992px) { body.v2.nav-open .header-center a, body.v2.nav-open .nav-links a { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; background: transparent !important; } body.v2.nav-open .header-center a:hover, body.v2.nav-open .nav-links a:hover { color: var(--ember) !important; -webkit-text-fill-color: var(--ember) !important; background: rgba(255, 107, 53, 0.15) !important; } /* Suppress ink underline pseudo-element on dark panel */ body.v2.nav-open .header-center a::after, body.v2.nav-open .nav-links a::after { display: none; } } .v2 .mobile-nav a { color: var(--ink); } /* Mobile menu backdrop — full viewport, distanced blur (fixes legacy 25% “gray slab”) */ @media (max-width: 992px) { body.v2.nav-open::before { content: ""; position: fixed; inset: 0; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; min-height: 100dvh; background: rgba(0, 0, 0, 0.3) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 9998 !important; pointer-events: auto; } } /* ========================================================================== 5. BUTTONS — two variants, zero shimmer, zero gradient ========================================================================== */ /* Primary: solid ink on bone */ .v2 .btn, .v2 .btn-primary { display: inline-block; font-family: var(--font-body-v2); font-size: var(--scale-2); font-weight: 500; padding: var(--space-2) var(--space-3); background: var(--ink); color: var(--bone); border-radius: var(--radius-1); border: none; box-shadow: none; cursor: pointer; text-decoration: none; position: relative; overflow: visible; transition: background var(--dur-1) var(--ease); transform: none; letter-spacing: 0; text-transform: none; filter: none; animation: none; } .v2 .btn::before, .v2 .btn-primary::before { display: none; } .v2 .btn:hover, .v2 .btn-primary:hover { background: var(--ember); color: var(--bone); transform: none; box-shadow: none; filter: none; } /* Ghost: underline only, no fill */ .v2 .btn-ghost, .v2 .btn-secondary { display: inline-block; font-family: var(--font-body-v2); font-size: var(--scale-2); font-weight: 400; padding: 0; background: none; color: var(--ink); border: none; border-bottom: 1px solid var(--ink); padding-bottom: 3px; border-radius: 0; box-shadow: none; cursor: pointer; text-decoration: none; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .v2 .btn-ghost::before, .v2 .btn-secondary::before { display: none; } .v2 .btn-ghost:hover, .v2 .btn-secondary:hover { color: var(--ember); border-color: var(--ember); background: none; transform: none; } /* ========================================================================== 6. HERO — full-bleed still, display headline, no CTA above fold ========================================================================== */ .v2 .hero, .v2 .hero-section { position: relative; height: calc(100vh - 72px); min-height: 600px; background: var(--ink); overflow: hidden; padding: 0; } .v2 .hero::before { background: linear-gradient( 180deg, rgba(18, 18, 18, 0.10) 0%, rgba(18, 18, 18, 0.04) 40%, rgba(18, 18, 18, 0.52) 100% ); background-size: auto; animation: none; } .v2 #hero-video, .v2 .hero-video { display: none; } .v2 .hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: saturate(0.85) contrast(1.02); opacity: 0; transition: opacity 1.4s ease; } .v2 .hero__image.hero-video-loaded { opacity: 1; } .v2 .hero-content, .v2 .hero__content { position: absolute; left: 0; right: 0; bottom: var(--space-6); padding: 0 var(--space-4); z-index: 5; } /* Large centered logo overlay on homepage hero */ .v2 .hero__center-logo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 4; pointer-events: none; } .v2 .hero__center-logo-img { width: clamp(200px, 27vw, 375px); height: auto; opacity: 0.88; filter: drop-shadow(0 8px 40px rgba(10, 10, 10, 0.55)); animation: hero-logo-in 0.5s ease forwards; } @keyframes hero-logo-in { from { opacity: 0; } to { opacity: 0.88; } } .v2 .hero__intro { max-width: var(--container-v2); margin: 0 auto; text-align: center; } .v2 .hero h1, .v2 .hero__headline { font-family: var(--font-heading); font-size: var(--scale-7); color: var(--bone); line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance; max-width: 16ch; margin-left: auto; margin-right: auto; text-align: center; background: none; -webkit-background-clip: unset; -webkit-text-fill-color: var(--bone); background-clip: unset; animation: none; text-shadow: none; filter: none; margin-bottom: 0; } .v2 .hero p, .v2 .hero__sub { color: rgba(244, 239, 230, 0.85); font-family: var(--font-body-v2); font-size: var(--scale-3); max-width: 48ch; margin-top: var(--space-3); margin-left: auto; margin-right: auto; margin-bottom: 0; text-align: center; text-shadow: none; } .v2 .hero__eyebrow { font-family: var(--font-mono); font-size: var(--scale-1); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(244, 239, 230, 0.75); margin-bottom: var(--space-3); text-align: center; } /* ========================================================================== 7. THE LEDGER — signature moment: typographic running event list ========================================================================== */ .v2 .ledger { padding: var(--space-6) 0 var(--space-5); border-bottom: 1px solid rgba(18, 18, 18, 0.08); background: var(--bone); overflow: hidden; } .v2 .ledger__header { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-2); margin-bottom: var(--space-4); padding: 0 var(--space-4); max-width: var(--container-v2); margin-left: auto; margin-right: auto; } .v2 .ledger__title { color: var(--slate); font-family: var(--font-mono); font-size: var(--scale-1); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; } .v2 .ledger__range { color: var(--slate); font-family: var(--font-mono); font-size: var(--scale-1); letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.7; } .v2 .ledger__track { display: flex; gap: var(--space-5); animation: ledgerScroll 90s linear infinite; width: max-content; will-change: transform; } .v2 .ledger__entry { flex-shrink: 0; font-family: var(--font-display); font-size: var(--scale-4); color: var(--ink); white-space: nowrap; font-weight: 400; padding-bottom: var(--space-1); } .v2 .ledger__entry-meta { font-family: var(--font-mono); font-size: var(--scale-1); color: var(--slate); letter-spacing: 0.04em; text-transform: uppercase; margin-right: var(--space-2); opacity: 0.7; } .v2 .ledger__separator { color: var(--brass); margin: 0 var(--space-2); } .v2 .ledger__field-label { font-family: var(--font-mono); font-size: 0.58em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); opacity: 0.6; margin-right: 0.3em; vertical-align: 0.1em; } @keyframes ledgerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .v2 .ledger__track { animation: none; overflow-x: auto; padding-bottom: var(--space-2); } } /* ========================================================================== EVENT SPOTLIGHT — replaces horizontal ledger on homepage Full-bleed photo carousel with crossfade transitions ========================================================================== */ .v2 .event-spotlight { background: var(--ink); padding: 0; } .v2 .event-spotlight__header { display: flex; justify-content: space-between; align-items: baseline; padding: var(--space-2) var(--space-5); background: var(--ink); border-bottom: 1px solid rgba(244, 239, 230, 0.10); } .v2 .event-spotlight__title { font-size: var(--scale-1); text-transform: uppercase; letter-spacing: 0.1em; color: rgba(244, 239, 230, 0.55); } .v2 .event-spotlight__range { font-size: var(--scale-1); letter-spacing: 0.06em; color: rgba(244, 239, 230, 0.35); } .v2 .event-spotlight__stage { position: relative; width: 100%; height: 62vh; min-height: 400px; max-height: 660px; overflow: hidden; } .v2 .event-spotlight__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } .v2 .event-spotlight__slide.is-active { opacity: 1; pointer-events: auto; } .v2 .event-spotlight__img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; } .v2 .event-spotlight__scrim { position: absolute; inset: 0; background: linear-gradient( to top, rgba(10, 10, 18, 0.88) 0%, rgba(10, 10, 18, 0.42) 35%, rgba(10, 10, 18, 0.12) 65%, rgba(10, 10, 18, 0.04) 100% ); } .v2 .event-spotlight__info { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-6) var(--space-5) var(--space-4); } .v2 .event-spotlight__date { font-size: var(--scale-1); color: rgba(244, 239, 230, 0.55); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 0.5rem; } .v2 .event-spotlight__venue { font-family: var(--font-heading); font-size: clamp(2rem, 5.5vw, 4rem); color: var(--bone); line-height: 1.0; letter-spacing: -0.025em; margin-bottom: 0.4rem; font-feature-settings: "ss01" 0, "swsh" 0; } .v2 .event-spotlight__event { font-family: var(--font-body-v2); font-size: var(--scale-3); color: rgba(244, 239, 230, 0.65); font-weight: 400; letter-spacing: 0.01em; } /* Progress pips */ .v2 .event-spotlight__nav { display: flex; gap: 3px; padding: 0 var(--space-5) var(--space-3); background: var(--ink); } .v2 .event-spotlight__pip { flex: 1; height: 2px; background: rgba(244, 239, 230, 0.18); border: none; cursor: pointer; border-radius: 1px; padding: 8px 0; background-clip: content-box; -webkit-background-clip: content-box; transition: background-color 0.3s ease; position: relative; } .v2 .event-spotlight__pip.is-active { background-color: var(--bone); background-clip: content-box; -webkit-background-clip: content-box; } .v2 .event-spotlight__pip:hover { background-color: rgba(244, 239, 230, 0.5); background-clip: content-box; -webkit-background-clip: content-box; } @media (max-width: 768px) { .v2 .event-spotlight__stage { height: 55vw; min-height: 300px; max-height: 480px; } .v2 .event-spotlight__info { padding: var(--space-4) var(--space-3) var(--space-3); } .v2 .event-spotlight__nav { padding: 0 var(--space-3) var(--space-2); } .v2 .event-spotlight__header { padding: var(--space-2) var(--space-3); } } /* ========================================================================== 8. STORY BEAT — short editorial section between hero and work ========================================================================== */ .v2 .story-beat { padding: var(--space-7) 0; background: var(--linen); } .v2 .story-beat__inner { max-width: 52rem; margin: 0 auto; padding: 0 var(--space-4); } .v2 .story-beat__eyebrow { font-family: var(--font-mono); font-size: var(--scale-1); letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate); margin-bottom: var(--space-3); font-weight: 500; } .v2 .story-beat__body { font-family: var(--font-display); font-size: var(--scale-5); line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); margin-bottom: var(--space-4); text-wrap: balance; font-variation-settings: "WONK" 0; font-feature-settings: "ss01" 0, "swsh" 0, "calt" 0, "salt" 0; font-variant-alternates: normal; font-variant-ligatures: no-common-ligatures; } .v2 .story-beat__link { font-size: var(--scale-2); color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; font-family: var(--font-body-v2); transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); text-decoration: none; } .v2 .story-beat__link:hover { color: var(--ember); border-color: var(--ember); } .v2 .story-beat__arrow { display: inline-block; transition: transform var(--dur-2) var(--ease); } .v2 .story-beat__link:hover .story-beat__arrow { transform: translateX(4px); } /* ========================================================================== 9. WORK PREVIEW GRID — three signature stills, editorial layout ========================================================================== */ .v2 .work-preview { padding: var(--space-7) 0; background: var(--bone); } .v2 .work-preview__header { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; margin-bottom: var(--space-5); gap: var(--space-2); } .v2 .work-preview__title { font-family: var(--font-heading); font-size: var(--scale-5); letter-spacing: -0.02em; line-height: 1.1; max-width: none; color: var(--ink); background: none; -webkit-text-fill-color: unset; } .v2 .work-preview__meta { font-family: var(--font-mono); font-size: var(--scale-1); letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate); white-space: nowrap; font-weight: 500; } .v2 .work-preview__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } /* --- work.html portfolio index — centered rack header + signal rows --- */ .v2 .work-index__header { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-2); } .v2 .work-index__title { text-align: center; } .v2 .work-index__intro { margin-left: auto; margin-right: auto; text-align: center; } .v2 .case-row .case-row__body { text-align: center; } .v2 .case-row .case-row__arrow { justify-self: center; } /* --- work.html cinematic hero --- */ .v2 .work-hero .work-hero__content { text-align: center; } /* v2 work card — replaces legacy .work-card */ .v2 .work-card-v2 { display: block; position: relative; overflow: hidden; text-decoration: none; color: inherit; } .v2 .work-card-v2__image-well { overflow: hidden; margin-bottom: var(--space-3); aspect-ratio: 4 / 5; background: var(--slate); border-radius: 0; } .v2 .work-card-v2__image { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease); filter: saturate(0.9); transform: scale(1); } .v2 .work-card-v2:hover .work-card-v2__image { transform: scale(1.02); } .v2 .work-card-v2__number { font-family: var(--font-mono); font-size: var(--scale-1); letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate); text-align: center; margin-bottom: var(--space-1); font-weight: 500; } .v2 .work-card-v2__title { font-family: var(--font-heading); font-size: var(--scale-4); line-height: 1.2; margin-bottom: var(--space-1); color: var(--ink); text-align: center; background: none; -webkit-text-fill-color: unset; } .v2 .work-card-v2__venue { font-family: var(--font-body-v2); font-size: var(--scale-2); color: var(--slate); text-align: center; } /* ========================================================================== 10. TESTIMONIAL — editorial pull-quote, named attribution, dark section ========================================================================== */ /* Dark-background section headings need bone override to beat .v2 h2 { color: var(--ink) } */ .v2 .testimonial-slider-section h2, .v2 .testimonial-slider-section h3 { color: var(--bone); -webkit-text-fill-color: var(--bone); background: none; } .v2 .testimonial-editorial { padding: var(--space-7) 0; background: var(--ink); color: var(--bone); } .v2 .testimonial-editorial__inner { max-width: 56rem; margin: 0 auto; padding: 0 var(--space-4); } .v2 .testimonial-editorial__eyebrow { font-family: var(--font-mono); font-size: var(--scale-1); letter-spacing: 0.04em; text-transform: uppercase; color: var(--brass); margin-bottom: var(--space-4); font-weight: 500; } .v2 .testimonial-editorial__quote { font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.15; letter-spacing: -0.015em; color: var(--bone); margin-bottom: var(--space-5); text-wrap: balance; background: none; -webkit-text-fill-color: unset; animation: none; filter: none; font-variation-settings: "WONK" 0; font-feature-settings: "ss01" 0, "swsh" 0; font-variant-alternates: normal; } .v2 .testimonial-editorial__attribution { font-family: var(--font-mono); font-size: var(--scale-1); color: var(--linen); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.8; } .v2 .testimonial-editorial__name { color: var(--bone); display: block; } /* Placeholder names/titles until approved — search project for .draft-attribution */ .v2 .draft-attribution { text-decoration: underline dotted color-mix(in srgb, var(--brass) 55%, transparent); text-underline-offset: 0.18em; } /* Testimonial quote fade transition */ .v2 .testimonial-editorial__quote, .v2 .testimonial-editorial__attribution { transition: opacity 0.45s ease; } .v2 .testimonial-editorial--fading .testimonial-editorial__quote, .v2 .testimonial-editorial--fading .testimonial-editorial__attribution { opacity: 0; } .v2 .testimonial-editorial__attribution .draft-attribution { text-transform: none; letter-spacing: 0.04em; } /* Override global testimonial slider if present */ .v2 .testimonial-slider, .v2 .testimonials-section { display: none; } /* ========================================================================== 10.5 SERVICE AREA (index) — region grid on bone stable-header "CITIES WE SERVE" uses white type for a legacy dark plate; v2 homepage is bone — restore readable ink/slate and linen cards. ========================================================================== */ .v2 .service-area-subtitle { color: var(--slate); } .v2 .service-area-grid .area-card { background: var(--linen); border: 1px solid rgba(18, 18, 18, 0.1); } .v2 .service-area-grid .area-card:hover { border-color: var(--ember); background: var(--bone); box-shadow: 0 6px 24px rgba(18, 18, 18, 0.08); } .v2 .service-area-grid .area-card .area-city { color: var(--ink); } .v2 .service-area-grid .area-card .area-state { color: var(--slate); } .v2 .service-area-note { color: var(--slate); } .v2 .service-area-note a { color: var(--ember); } .v2 .service-area-note a:hover { color: var(--ink); } /* ========================================================================== 11. FINAL CTA — quiet, single sentence, one ghost link ========================================================================== */ .v2 .final-cta { padding: var(--space-7) 0; background: var(--bone); text-align: center; } .v2 .final-cta__headline { font-family: var(--font-heading); font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 500; line-height: 1.12; letter-spacing: -0.02em; max-width: 22ch; margin: 0 auto var(--space-4); text-wrap: balance; color: var(--ink); background: none; -webkit-text-fill-color: unset; } .v2 .final-cta__link { display: inline-block; font-family: var(--font-body-v2); font-size: var(--scale-3); color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 4px; text-decoration: none; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .v2 .final-cta__link:hover { color: var(--ember); border-color: var(--ember); } /* ========================================================================== 12. METRICS STRIP — mono spec line between hero and ledger ========================================================================== */ .v2 .metrics-strip { padding: var(--space-3) 0; border-top: 1px solid rgba(18, 18, 18, 0.08); border-bottom: 1px solid rgba(18, 18, 18, 0.08); background: var(--bone); } .v2 .metrics-strip p, .v2 .metrics-strip__line { font-family: var(--font-mono); font-size: var(--scale-1); letter-spacing: 0.05em; color: rgba(18, 18, 18, 0.72); /* raised from 0.5 to meet WCAG AA 4.5:1 on --bone */ text-transform: uppercase; text-align: center; max-width: none; margin: 0; } /* ========================================================================== 13. CLIENT LOGO BAR — suppress the legacy marquee on pilot pages; replaced by The Ledger. Show logo bar again if desired by removing this rule and re-adding the .ledger section. ========================================================================== */ .v2 .client-logo-bar { display: none; } /* ========================================================================== 14. CASE STUDY HERO — Direction A format: single still, one sentence ========================================================================== */ .v2 .case-study-hero { position: relative; height: calc(100vh - 72px); min-height: 580px; background: var(--ink); overflow: hidden; display: flex; align-items: flex-end; padding: 0 0 var(--space-6); } .v2 .case-study-hero::before { background: linear-gradient( 180deg, rgba(18, 18, 18, 0.10) 0%, rgba(18, 18, 18, 0.04) 40%, rgba(18, 18, 18, 0.60) 100% ); animation: none; z-index: 2; } .v2 .case-study-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; filter: saturate(0.85) contrast(1.02); z-index: 1; } .v2 .case-study-hero__content { position: relative; z-index: 5; padding: 0 var(--space-4); max-width: var(--container-v2); margin: 0 auto; width: 100%; } /* Case number pinned to top of hero, separate from bottom content */ .v2 .case-study-hero__number { position: absolute; top: var(--space-5); left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--container-v2); padding: 0 var(--space-4); font-family: var(--font-mono); font-size: var(--scale-1); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(244, 239, 230, 0.65); font-weight: 500; z-index: 5; pointer-events: none; } .v2 .case-study-hero__venue { font-family: var(--font-mono); font-size: var(--scale-1); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(244, 239, 230, 0.7); margin-bottom: var(--space-3); } .v2 .case-study-hero h1, .v2 .case-study-hero__headline { font-family: var(--font-heading); font-size: clamp(2.2rem, 4.5vw, 4rem); line-height: 1.18; letter-spacing: -0.01em; word-spacing: 0.04em; color: var(--bone); max-width: 24ch; text-wrap: balance; background: none; -webkit-text-fill-color: var(--bone); background-clip: unset; animation: none; filter: none; text-shadow: none; margin: 0 auto; } /* ========================================================================== 15. CASE STUDY BODY — run-of-show sidebar layout ========================================================================== */ .v2 .case-body { background: var(--bone); padding: var(--space-7) 0; } .v2 .case-body__grid { display: grid; grid-template-columns: 1fr 280px; gap: var(--space-6); max-width: var(--container-v2); margin: 0 auto; padding: 0 var(--space-4); align-items: start; } /* Inside main: beats `.v2 main p, li { text-align: center }` for case prose */ .v2 main .case-body__narrative { max-width: var(--measure); /* 62ch */ margin-left: 0; margin-right: auto; text-align: left; } /* Left-aligned story prose */ .v2 main .case-body__narrative p, .v2 main .case-body__narrative li { text-align: left; } .v2 main .case-body__narrative p { font-family: var(--font-body-v2); font-size: var(--scale-3); line-height: 1.65; color: var(--ink); margin-bottom: var(--space-p-bottom); margin-left: 0; margin-right: auto; max-width: var(--measure); /* 62ch */ } /* Lead / abstract — brass rack line + slightly larger type */ .v2 main .case-body__narrative > p:first-of-type { border-top: 1px solid var(--brass); padding-top: 1.5rem; font-size: 1.15rem; } .v2 main .case-body__narrative h2, .v2 main .case-body__narrative h3, .v2 main .case-body__narrative h4 { text-align: left; margin-left: 0; margin-right: auto; max-width: var(--measure); color: var(--ink); background: none; -webkit-text-fill-color: var(--ink); } /* H2/H3 hairline matches Insights `.article-layout .article-body h2|h3` (brass) */ .v2 main .case-body__narrative h2 { font-family: var(--font-heading); font-size: var(--scale-6); line-height: 1.1; letter-spacing: -0.02em; margin-top: var(--space-h2-top); margin-bottom: var(--space-3); padding-bottom: var(--space-heading-hairline-gap); border-bottom: 1px solid var(--brass); } .v2 main .case-body__narrative h3 { font-family: var(--font-heading); font-size: var(--scale-5); line-height: 1.2; letter-spacing: -0.015em; margin-top: var(--space-h3-top); margin-bottom: var(--space-3); padding-bottom: var(--space-heading-hairline-gap); border-bottom: 1px solid var(--brass); } .v2 main .case-body__narrative h4 { font-family: var(--font-heading); font-size: var(--scale-4); line-height: 1.25; letter-spacing: -0.012em; margin-top: var(--space-h2-top); margin-bottom: var(--space-2); padding-bottom: 0; border-bottom: none; } .v2 main .case-body__narrative h2 + p, .v2 main .case-body__narrative h3 + p, .v2 main .case-body__narrative h4 + p { margin-top: 0; } .v2 main .case-body__narrative ul, .v2 main .case-body__narrative ol { text-align: left; max-width: var(--measure); margin-left: 0; margin-right: auto; margin-bottom: var(--space-4); padding-left: var(--space-4); box-sizing: content-box; } /* Run-of-show sidebar: sticky mono timecode column */ .v2 .run-of-show { position: sticky; top: calc(72px + var(--space-4)); max-height: calc(100vh - 72px - var(--space-4) * 2); overflow-y: auto; background: var(--linen); padding: var(--space-4); border-radius: var(--radius-1); text-align: left; box-shadow: none; } .v2 .run-of-show__title { font-family: var(--font-mono); font-size: var(--scale-1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--brass); margin-bottom: var(--space-3); font-weight: 500; padding-bottom: var(--space-heading-hairline-gap); border-bottom: 1px solid var(--brass); } .v2 .run-of-show__table { width: 100%; border-collapse: collapse; } .v2 .run-of-show__row { display: flex; justify-content: space-between; gap: var(--space-2); margin: 0; padding: 0 0 var(--space-1) 0; border-bottom: 1px solid rgba(18, 18, 18, 0.06); font-family: var(--font-mono); font-size: var(--scale-1); letter-spacing: 0.02em; line-height: 1.6; } .v2 .run-of-show__row:last-child { border-bottom: none; } .v2 .run-of-show__time { color: var(--slate); white-space: nowrap; opacity: 0.8; flex-shrink: 0; } .v2 .run-of-show__event { color: var(--ink); text-align: right; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 0.75rem; } .v2 .run-of-show__spec { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid rgba(18, 18, 18, 0.12); } .v2 .run-of-show__spec-row { display: flex; justify-content: space-between; gap: var(--space-2); padding: 2px 0; font-family: var(--font-mono); font-size: var(--scale-1); line-height: 1.7; letter-spacing: 0.02em; } .v2 .run-of-show__spec-label { color: var(--slate); opacity: 0.7; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.6875rem; } .v2 .run-of-show__spec-value { color: var(--ink); text-align: right; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 0.75rem; } /* ========================================================================== 16. CASE STUDY GALLERY — three stills, no chrome ========================================================================== */ .v2 .case-gallery { padding: var(--space-6) 0; background: var(--bone); } .v2 .case-gallery__inner { max-width: var(--container-v2); margin: 0 auto; padding: 0 var(--space-4); } .v2 .case-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .v2 .case-gallery__item { overflow: hidden; aspect-ratio: 4 / 3; background: var(--slate); cursor: pointer; } .v2 .case-gallery__item img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.88); transition: transform var(--dur-3) var(--ease); display: block; border-radius: 0; } .v2 .case-gallery__item:hover img { transform: scale(1.02); } /* ========================================================================== 17. CASE NAVIGATION — next case footer strip ========================================================================== */ .v2 .case-nav { border-top: 1px solid rgba(18, 18, 18, 0.08); padding: var(--space-5) 0; background: var(--bone); } .v2 .case-nav__inner { max-width: var(--container-v2); margin: 0 auto; padding: 0 var(--space-4); display: flex; justify-content: flex-end; align-items: center; gap: var(--space-4); } .v2 .case-nav__label { font-family: var(--font-mono); font-size: var(--scale-1); letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate); opacity: 0.7; } .v2 .case-nav__link { font-family: var(--font-body-v2); font-size: var(--scale-2); color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 2px; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .v2 .case-nav__link:hover { color: var(--ember); border-color: var(--ember); } /* ========================================================================== 18. FOOTER — letterpress EQ bug, four columns, mono spec line ========================================================================== */ .v2 .main-footer, .v2 footer { background: var(--ink); color: var(--linen); padding: var(--space-6) 0 var(--space-4); position: relative; overflow: hidden; backdrop-filter: none; -webkit-backdrop-filter: none; } /* Letterpress "EQ" bug — hidden */ .v2 .main-footer::after, .v2 .footer-bug { display: none; } .v2 .main-footer .container, .v2 .main-footer .footer-container { position: relative; z-index: 2; } .v2 .main-footer h3, .v2 .main-footer h4, .v2 .footer-col-title { font-family: var(--font-mono); font-size: var(--scale-1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass); font-weight: 500; margin-top: 0; margin-bottom: var(--space-3); padding-bottom: 0; border-bottom: none; text-align: left; background: none; -webkit-text-fill-color: unset; animation: none; filter: none; } .v2 .main-footer a, .v2 .footer-links a { color: var(--linen); font-size: var(--scale-2); font-family: var(--font-body-v2); text-decoration: none; transition: color var(--dur-1) var(--ease); } .v2 .main-footer a:hover, .v2 .footer-links a:hover { color: var(--ember); } /* Ghost button inside dark footer */ .v2 .main-footer .btn-ghost, .v2 .main-footer .btn-secondary { color: var(--linen); border-bottom-color: rgba(244, 239, 230, 0.35); } .v2 .main-footer .btn-ghost:hover, .v2 .main-footer .btn-secondary:hover { color: var(--bone); border-bottom-color: var(--bone); } .v2 .footer-brand__name { font-family: var(--font-heading); font-size: var(--scale-4); color: var(--bone); margin-bottom: var(--space-2); background: none; -webkit-text-fill-color: var(--bone); } .v2 .footer-brand__tagline { color: var(--linen); opacity: 0.75; max-width: 36ch; font-size: var(--scale-2); } /* Mono spec line at footer bottom */ .v2 .footer-spec { border-top: 1px solid rgba(244, 239, 230, 0.12); padding-top: var(--space-3); margin-top: var(--space-5); display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2); } .v2 .footer-spec__line { font-family: var(--font-mono); font-size: var(--scale-1); color: var(--linen); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; } /* ========================================================================== 19. SECTIONS — clean bone/linen alternation, no gradient overlays ========================================================================== */ .v2 section { position: relative; overflow-x: hidden; } .v2 section::before, .v2 section::after { animation: none; } /* Suppress legacy section gradient overlays */ .v2 .hero-section::before, .v2 .page-hero::before { background: linear-gradient( 180deg, rgba(18, 18, 18, 0.10) 0%, rgba(18, 18, 18, 0.04) 40%, rgba(18, 18, 18, 0.52) 100% ); animation: none; } /* Suppress any shimmer grain overlays */ .v2 .testimonial-section::before { display: none; } /* ========================================================================== 20. STICKY MOBILE ACTION BAR — v2 treatment ========================================================================== */ .v2 .sticky-action-bar { background: var(--ink); border-top: 1px solid rgba(244, 239, 230, 0.12); backdrop-filter: none; -webkit-backdrop-filter: none; } .v2 .sticky-action-bar .btn { background: var(--ember); color: var(--bone); border-radius: var(--radius-1); box-shadow: none; } .v2 .sticky-action-bar .btn:hover { background: var(--bone); color: var(--ink); } /* ========================================================================== 22. PHOTOGRAPHY LUT — CSS approximation of warm-grade Direction A aesthetic Derived from §4 / §4.5: warm midtones, low saturation in greens and blues, slight amber lift, soft highlight rolloff. Applied to case study heroes, gallery items, and homepage work-preview cards. filter: brightness(1.03) contrast(0.97) saturate(0.88) sepia(0.12) ========================================================================== */ :root { --lut-filter: brightness(1.03) contrast(0.97) saturate(0.88) sepia(0.12); /* Matches --bone #F4EFE6 — for rgba(var(--bone-rgb), a) legibility plates */ --bone-rgb: 244, 239, 230; } .v2 .case-study-hero__image { filter: var(--lut-filter); } .v2 .case-gallery__item img { filter: var(--lut-filter); } .v2 .work-card__image, .v2 .work-card-v2 img { filter: var(--lut-filter); } /* ========================================================================== 23. PAGE COMPONENTS — Hero, Article Layout, Service Cards, CTA Supports Phase 6 v2 migration of about, services, insights, articles, geo pages, and event-planning-checklist. ========================================================================== */ /* --- 23.1 PAGE HERO (full-bleed image, for non-case-study pages) --- */ .v2 .page-hero-v2 { position: relative; min-height: 52vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--ink); } .v2 .page-hero-v2__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--lut-filter); opacity: 0; transition: opacity 1.4s ease; } .v2 .page-hero-v2__image.hero-video-loaded { opacity: 0.55; } /* Corporate service hero — static studio plate, darker stack for headline contrast */ .v2 .page-hero-v2--corporate-static .page-hero-v2__image { object-fit: cover; filter: brightness(0.4); opacity: 1; transition: none; } .v2 .page-hero-v2--corporate-static .page-hero-v2__image.hero-video-loaded { opacity: 1; } .v2 .page-hero-v2__content { position: relative; z-index: 3; max-width: var(--container-v2); margin: 0 auto; padding: var(--space-7) var(--space-4) var(--space-6); width: 100%; text-align: center; } .v2 .page-hero-v2__eyebrow { font-family: var(--font-mono); font-size: var(--scale-1); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(244, 239, 230, 0.7); margin-bottom: var(--space-2); } .v2 .page-hero-v2__headline { font-family: var(--font-heading); font-size: clamp(2.5rem, 5vw, var(--scale-7)); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; color: var(--bone); max-width: 18ch; text-wrap: balance; margin: 0 auto; background: none; -webkit-text-fill-color: var(--bone); } /* Text-only variant — bone background, no image */ .v2 .page-hero-v2--text { background: var(--bone); min-height: auto; padding: var(--space-7) 0 var(--space-5); align-items: flex-start; } .v2 .page-hero-v2--text .page-hero-v2__headline { color: var(--ink); -webkit-text-fill-color: var(--ink); } .v2 .page-hero-v2--text .page-hero-v2__eyebrow { color: var(--ember); } @media (max-width: 768px) { .v2 .page-hero-v2 { min-height: 44vh; } .v2 .page-hero-v2__content { padding: var(--space-6) var(--space-3) var(--space-5); } .v2 .page-hero-v2__headline { font-size: clamp(2rem, 8vw, 2.75rem); } } /* — Article hero: 12-col “breakout-wide” (aligns with article grid below) — */ .v2 .page-hero-v2--editorial { position: relative; background: var(--ink); min-height: 0; display: block; overflow: hidden; padding: var(--space-4) 0 0; } .v2 .page-hero-v2--editorial .page-hero-v2__inner { position: relative; z-index: 0; margin: 0 auto; } .v2 .page-hero-v2--editorial .page-hero-v2__image-wrap, .v2 .page-hero-v2--editorial .page-hero-v2__inner .breakout-full { position: relative; grid-column: 1 / 13; width: auto; margin: 0; min-height: min(44vh, 420px); border-radius: 0; overflow: hidden; isolation: isolate; } /* Hero image “plate” + left-weighted scrim (Quiet Room legibility) */ .v2 .page-hero-v2--editorial .page-hero-v2__image-wrap::after, .v2 .page-hero-v2--editorial .page-hero-v2__image-container::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%); } .v2 .page-hero-v2--editorial .page-hero-v2__image { position: relative; z-index: 0; width: 100%; height: 100%; min-height: min(44vh, 420px); object-fit: cover; display: block; filter: brightness(0.4) grayscale(0.2); opacity: 1; transition: transform 0.1s ease-out; will-change: transform; } .v2 .page-hero-v2--editorial .page-hero-v2__content { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; max-width: var(--container-v2); margin: 0 auto; width: 100%; box-sizing: border-box; padding: var(--space-7) var(--space-4) var(--space-6); pointer-events: none; text-align: left; } .v2 .page-hero-v2--editorial .page-hero-v2__headline, .v2 .page-hero-v2--editorial .page-hero-v2__title { position: relative; z-index: 5; color: var(--bone); -webkit-text-fill-color: var(--bone); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); margin-left: 0; margin-right: auto; text-align: left; } .v2 .page-hero-v2--editorial .page-hero-v2__eyebrow { position: relative; z-index: 5; } .v2 .page-hero-v2--editorial .page-hero-v2__content a { pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .v2 .page-hero-v2--editorial .page-hero-v2__image { transition: none; will-change: auto; } } @media (max-width: 899px) { .v2 .page-hero-v2--editorial .page-hero-v2__image-wrap, .v2 .page-hero-v2--editorial .page-hero-v2__inner .breakout-full { grid-column: 1 / -1; } } /* ========================================================================== 30. EDITORIAL GRID (Insights) — 12 col asymmetric, “Quiet Room” + margin Col 1: prev rail · Col 2: read/category · Col 3–9: narrative (7) · Col 10–11: field notes · Col 12: next rail Aperture: split sticky rails + fixed bottom bar <1200px. No boxes; hairlines only. ========================================================================== */ .v2 .article-layout { background: var(--bone); padding: var(--space-7) 0; overflow: visible; /* Margin metadata legibility — shared by left rail stack + right field (field notes) */ --v2-metadata-plate-bg: rgba(var(--bone-rgb), 0.85); --v2-metadata-plate-padding: 0.75rem 1rem; --v2-metadata-plate-radius: 2px; } .v2 .article-layout__inner { max-width: var(--container-v2); margin: 0 auto; padding: 0 var(--space-4); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-4); align-items: start; overflow: visible; /* height auto (no fixed height) — row grows with narrative */ } /* One editorial row so side rails share body row height (sticky viewport works) */ .v2 .article-layout__inner > .compass-rail--prev, .v2 .article-layout__inner > .article-margin-left, .v2 .article-layout__inner > .article-field, .v2 .article-layout__inner > .article-body, .v2 .article-layout__inner > .compass-rail--next { grid-row: 1; } /* Col 2: read/category only (prev rail is col 1) */ .v2 .article-margin-left { grid-column: 2 / 3; justify-self: start; align-self: stretch; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; } /* Quiet Room: main narrative, columns 3–9 (7 tracks) */ .v2 .article-layout .article-body { grid-column: 3 / 10; min-width: 0; font-family: var(--font-body-v2); } /* Col 1: vertical “signature” (read + category) — inside .article-margin-left */ .v2 .article-margin-left .article-rail { flex: 0 0 auto; } .v2 .article-rail { justify-self: start; align-self: flex-start; position: sticky; top: calc(72px + var(--space-4)); padding-top: var(--space-1); /* Below header (1000) / compass rails (100); above breakout imagery (~0–1) */ z-index: 8; display: flex; flex-direction: column; align-items: flex-start; gap: 0; text-align: left; } /* Read time + category — frosted plate; brass rule stays inside between labels */ .v2 .article-rail__stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); max-width: 100%; text-align: left; position: relative; z-index: 2; padding: var(--v2-metadata-plate-padding); border-radius: var(--v2-metadata-plate-radius); background: var(--v2-metadata-plate-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); isolation: isolate; } .v2 .article-rail__rule { width: 1px; min-height: 1.5rem; max-height: 2.5rem; background: var(--brass); border: 0; margin: 0; flex-shrink: 0; align-self: center; } /* Reading time + category: vertical meta in col 2 (90° from horizontal) */ .v2 .article-rail__read { font-family: var(--font-mono); font-size: var(--scale-1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ember); white-space: nowrap; margin: 0; line-height: 1.2; writing-mode: vertical-rl; text-orientation: mixed; } .v2 .article-field { grid-column: 10 / 12; align-self: start; position: sticky; top: calc(72px + var(--space-4)); padding: var(--v2-metadata-plate-padding); margin: 0; border-radius: var(--v2-metadata-plate-radius); background: var(--v2-metadata-plate-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); isolation: isolate; z-index: 8; max-width: 100%; min-width: 0; word-break: break-word; text-align: left; } .v2 .article-field .field-note { margin: 0; } .v2 .article-field .field-note + .field-note { margin-top: var(--space-2); } /* Aperture — far-left / far-right rails; sticky vertical mono (see overflow on body .v2 + .article-layout) */ .v2 .compass-rail { position: sticky; top: 220px; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; margin: 0; padding: 0 3.5rem; min-width: 0; align-self: start; } /* Signal plate — frosted bone; full treatment only in active scroll zone (.is-visible) */ .v2 .compass-rail__plate { display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 0; padding: 0; border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; transition: background var(--dur-2) var(--ease), backdrop-filter var(--dur-2) var(--ease), padding var(--dur-2) var(--ease), border-radius var(--dur-2) var(--ease); } @media (min-width: 1200px) { .v2 .article-layout .compass-rail.is-visible .compass-rail__plate { padding: 1.2rem 0.6rem; border-radius: 4px; background: rgba(var(--bone-rgb), 0.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } } @media (prefers-reduced-motion: reduce) { .v2 .compass-rail__plate { transition: none; } } .v2 .compass-rail--next .compass-rail__plate { align-self: flex-end; } .v2 .article-layout__inner > .compass-rail--prev { grid-column: 1 / 2; justify-self: start; } .v2 .article-layout__inner > .compass-rail--next { grid-column: 12 / 13; justify-self: end; align-items: flex-end; } /* Short brass “pointer” beside the link (not floor-to-ceiling) */ .v2 .compass-rail__link::before { content: ""; position: absolute; top: 50%; width: 0; height: 80px; box-sizing: border-box; border: 0 solid var(--brass); border-left-width: 1px; margin: 0; padding: 0; background: none; pointer-events: none; z-index: -1; } .v2 .compass-rail--prev .compass-rail__link::before { left: 0; right: auto; transform: translateY(-50%); } .v2 .compass-rail--next .compass-rail__link::before { left: auto; right: 0; border-left: none; border-right: 1px solid var(--brass); transform: translateY(-50%); } .v2 .compass-rail__link { position: relative; z-index: 1; font-family: var(--font-mono); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ember); text-decoration: none; writing-mode: vertical-rl; text-orientation: mixed; white-space: nowrap; line-height: 1; margin: 0; padding: 0; transition: color var(--dur-2) var(--ease); } .v2 .compass-rail__link:hover, .v2 .compass-rail__link:focus-visible { color: var(--ink); } /* Desktop (≥1200px): rails fade in once narrative is in view (.is-visible on each nav) */ @media (min-width: 1200px) { .v2 .article-layout .compass-rail { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s ease, visibility 0.35s ease; } .v2 .article-layout .compass-rail.is-visible { opacity: 1; visibility: visible; pointer-events: auto; } } @media (min-width: 1200px) and (prefers-reduced-motion: reduce) { .v2 .article-layout .compass-rail { transition: none; } } /* Fixed bottom bar — <1200px (rails hidden) */ .v2 .article-compass-bar { display: none; } @media (max-width: 1199px) { .v2 .article-layout__inner { display: block; } .v2 .article-margin-left { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--space-3) var(--space-4); width: 100%; margin-bottom: var(--space-2); } .v2 .compass-rail { display: none !important; } .v2 .article-compass-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; top: auto; transform: none; flex-direction: row; align-items: center; justify-content: space-between; margin: 0; padding: var(--space-2) var(--space-4); padding-bottom: max(var(--space-2), env(safe-area-inset-bottom, 0px)); background: var(--bone); border-top: 1px solid var(--brass); z-index: 50; box-sizing: border-box; } .v2 .article-compass-bar__link { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ember); text-decoration: none; margin: 0; padding: 0; writing-mode: horizontal-tb; text-orientation: mixed; } .v2 .article-compass-bar__link:hover, .v2 .article-compass-bar__link:focus-visible { color: var(--ink); } .v2 .article-compass-bar__rule { width: 1px; min-width: 1px; min-height: 1.5rem; height: 1.5rem; margin: 0 var(--space-3); background: var(--brass); flex-shrink: 0; } body.v2:has(.article-compass-bar) main { padding-bottom: max(4.25rem, calc(3.5rem + env(safe-area-inset-bottom, 0px))); } } @media (min-width: 1200px) { .v2 .article-compass-bar { display: none !important; } } .v2 .field-note { font-family: var(--font-mono); font-size: var(--scale-1); line-height: 1.45; color: var(--ember); margin: 0 0 var(--space-3); letter-spacing: 0.03em; text-align: left; } .v2 .field-note__label { display: block; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8em; color: var(--ember); opacity: 0.55; margin-bottom: 2px; text-align: left; } /* Legacy / fallback article-meta (if present) — flat, no box */ .v2 .article-meta { position: sticky; top: calc(72px + var(--space-4)); max-height: calc(100vh - 72px - var(--space-4) * 2); overflow-y: auto; background: transparent; padding: 0; border-radius: 0; } .v2 .article-meta__label { font-family: var(--font-mono); font-size: var(--scale-1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ember); margin-bottom: var(--space-1); } .v2 .article-meta__value { font-family: var(--font-mono); font-size: var(--scale-1); color: var(--ink); margin-bottom: var(--space-3); line-height: 1.4; } /* Lead paragraph — Quiet Room: display serif, brass hairline, ink drop cap */ .v2 .article-layout__body > p:first-of-type, .v2 .article-layout .article-body > p:first-of-type { font-family: var(--font-display); font-size: var(--scale-4); line-height: 1.45; letter-spacing: -0.02em; font-weight: 400; border-top: 1px solid var(--brass); padding-top: var(--space-3); margin-top: 0; margin-left: 0; margin-right: auto; margin-bottom: var(--space-p-bottom); max-width: var(--measure); color: var(--ink); text-align: left; } .v2 .article-layout__body > p:first-of-type::first-letter, .v2 .article-layout .article-body > p:first-of-type::first-letter { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem, 4.5vw, 3.25rem); line-height: 0.88; color: var(--ink); float: left; margin: 0.05em 0.14em 0 0; padding-right: 0.02em; } /* Editorial rail: headings + prose share one left edge (--measure / 62ch) */ .v2 .article-layout__body h2, .v2 .article-layout .article-body h2, .v2 .article-layout__body h3, .v2 .article-layout .article-body h3, .v2 .article-layout__body h4, .v2 .article-layout .article-body h4 { text-align: left; max-width: var(--measure); margin-left: 0; margin-right: auto; } .v2 .article-layout__body h2, .v2 .article-layout .article-body h2 { font-family: var(--font-heading); font-size: var(--scale-5); color: var(--ink); margin-top: var(--space-h2-top); margin-bottom: var(--space-3); padding-bottom: var(--space-heading-hairline-gap); border-bottom: 1px solid var(--brass); background: none; -webkit-text-fill-color: var(--ink); } .v2 .article-layout__body h3, .v2 .article-layout .article-body h3 { font-family: var(--font-heading); font-size: var(--scale-4); color: var(--ink); margin-top: var(--space-h3-top); margin-bottom: var(--space-3); padding-bottom: var(--space-heading-hairline-gap); border-bottom: 1px solid var(--brass); background: none; -webkit-text-fill-color: var(--ink); } .v2 .article-layout__body h4, .v2 .article-layout .article-body h4 { font-family: var(--font-heading); font-size: var(--scale-4); line-height: 1.25; letter-spacing: -0.012em; color: var(--ink); margin-top: var(--space-h2-top); margin-bottom: var(--space-2); padding-bottom: 0; border-bottom: none; background: none; -webkit-text-fill-color: var(--ink); } .v2 .article-layout__body p, .v2 .article-layout__body li, .v2 .article-layout .article-body p, .v2 .article-layout .article-body li { font-family: var(--font-body-v2); font-size: var(--scale-3); line-height: 1.65; color: var(--ink); max-width: var(--measure); margin-left: 0; margin-right: auto; margin-bottom: var(--space-p-bottom); text-align: left; } .v2 .article-layout__body ul, .v2 .article-layout__body ol, .v2 .article-layout .article-body ul, .v2 .article-layout .article-body ol { padding-left: var(--space-4); margin-bottom: var(--space-4); margin-left: 0; margin-right: auto; max-width: var(--measure); box-sizing: content-box; } .v2 .article-layout .article-body ul li { margin-bottom: 0.5rem; } /* List item labels — ember on bone/linen ~5.3:1, WCAG AA */ .v2 .article-layout .article-body ul li strong, .v2 .article-layout .article-body ol li strong, .v2 .article-layout .article-body ul li b, .v2 .article-layout .article-body ol li b { color: var(--ember); font-weight: 600; } .v2 .article-layout .article-body ul li::marker, .v2 .article-layout .article-body ol li::marker { color: var(--ember); } .v2 .article-layout .article-body ol li::marker { font-weight: 600; } /* Prose “halo” when full-bleed media exists — keeps body copy readable beside heavy imagery */ .v2 .article-layout .article-body:has(.breakout-full) p, .v2 .article-layout .article-body:has(.media-break) p, .v2 .article-layout .article-body:has(.breakout-full) li, .v2 .article-layout .article-body:has(.media-break) li { text-shadow: 0 0 20px rgba(244, 239, 230, 0.55), 0 0 32px rgba(244, 239, 230, 0.35); } /* Full-bleed / section break: subtle ink veil over photo (0.1 opacity layer) */ .v2 .article-layout .article-body .breakout-full:has(> img)::after, .v2 .article-layout .article-body .media-break:has(> img)::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(18, 18, 18, 0.1); } /* Artistic breakouts: right bleed (narrative 2–8 → 2–11) and full 12-col */ .v2 .article-layout .article-body .breakout-right, .v2 .article-layout .article-body .breakout-wide { position: relative; z-index: 0; width: calc(100% * 10 / 7); max-width: none; margin-left: 0; margin-bottom: var(--space-4); margin-top: 0; } .v2 .article-layout .article-body img, .v2 .article-layout .article-body .breakout-right img, .v2 .article-layout .article-body .breakout-wide img { width: 100%; height: auto; display: block; filter: brightness(1) grayscale(0); border-radius: 0; } /* Full-bleed (cols 1–12 within article container) */ .v2 .article-layout .article-body .breakout-full, .v2 .article-layout .article-body .media-break { position: relative; z-index: 0; width: calc(100% * 12 / 7); max-width: none; margin-left: calc(-1 * 100% / 7); margin-bottom: var(--space-5); margin-top: 0; } .v2 .article-layout .article-body .media-break { /* Visual reset between sections — hairline, no box */ margin-top: var(--space-2); margin-bottom: var(--space-6); padding: var(--space-2) 0; border: solid var(--brass); border-width: 1px 0; opacity: 1; } .v2 .article-layout .article-body .media-break img, .v2 .article-layout .article-body .breakout-full img { position: relative; z-index: 0; width: 100%; height: auto; max-height: min(60vh, 480px); object-fit: cover; display: block; filter: brightness(1) grayscale(0); border-radius: 0; } .v2 .article-layout .article-body h2.breakout-full, .v2 .article-layout .article-body .breakout-full--type { width: calc(100% * 12 / 7); max-width: none; margin-left: calc(-1 * 100% / 7); margin-right: 0; font-family: var(--font-heading); text-align: left; font-weight: 400; color: var(--ink); padding: var(--space-3) 0; border: none; border-bottom: none; border-top: 1px solid var(--brass); margin-top: var(--space-5); margin-bottom: var(--space-3); background: none; -webkit-text-fill-color: var(--ink); } .v2 .article-related { background: var(--linen); padding: var(--space-6) 0; } .v2 .article-related__inner { max-width: var(--container-v2); margin: 0 auto; padding: 0 var(--space-4); } .v2 .article-related__title { font-family: var(--font-mono); font-size: var(--scale-1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ember); margin-bottom: var(--space-5); } .v2 .article-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } .v2 .article-related__card { background: var(--bone); border-radius: var(--radius-1); padding: 0; text-decoration: none; display: block; overflow: hidden; transition: background var(--dur-2) var(--ease); } .v2 .article-related__card:hover { background: var(--linen); } .v2 .article-related__card-image { height: 130px; overflow: hidden; } .v2 .article-related__card-image img { width: 100%; height: 100%; object-fit: cover; filter: var(--lut-filter); transition: transform 0.35s ease; display: block; } .v2 .article-related__card:hover .article-related__card-image img { transform: scale(1.04); } .v2 .article-related__card-label { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ember); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-1); padding: var(--space-2) var(--space-3) 0; } .v2 .article-related__card-title { font-family: var(--font-heading); font-size: var(--scale-3); color: var(--ink); line-height: 1.3; padding: 0 var(--space-3) var(--space-3); } @media (max-width: 899px) { .v2 .article-rail, .v2 .article-field, .v2 .article-meta { position: static; } .v2 .article-rail { text-align: left; margin-bottom: var(--space-2); width: 100%; flex-direction: row; justify-content: flex-start; } .v2 .article-rail__stack { writing-mode: horizontal-tb; text-orientation: mixed; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: var(--space-2) var(--space-4); } .v2 .article-rail__read, .v2 .article-rail__category { writing-mode: horizontal-tb; } .v2 .article-rail__rule { min-height: 0; width: 1px; min-width: 1px; height: 1.25rem; border: none; border-left: 1px solid var(--brass); } .v2 .article-field { margin-bottom: var(--space-4); } .v2 .article-layout .article-body { margin-bottom: 0; } .v2 .article-layout .article-body .breakout-right, .v2 .article-layout .article-body .breakout-wide, .v2 .article-layout .article-body .breakout-full, .v2 .article-layout .article-body .media-break { width: 100% !important; margin-left: 0 !important; } .v2 .article-layout .article-body h2.breakout-full { width: 100% !important; margin-left: 0 !important; } .v2 .article-meta { margin-bottom: var(--space-4); } } @media (max-width: 992px) { .v2 .article-related__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .v2 .article-related__grid { grid-template-columns: 1fr; } } /* --- 23.3 SERVICE CARDS + CONTENT SECTIONS (services, about, geo pages) --- */ .v2 .content-section-v2 { background: var(--bone); padding: var(--space-7) 0; } .v2 .content-section-v2--linen { background: var(--linen); } .v2 .content-section-v2__inner { max-width: var(--container-v2); margin: 0 auto; padding: 0 var(--space-4); } .v2 .content-section-v2__prose { max-width: var(--measure); margin-left: auto; margin-right: auto; font-family: var(--font-body-v2); font-size: var(--scale-3); line-height: 1.65; color: var(--ink); } .v2 .content-section-v2__prose > h2:first-child { margin-top: 0; } .v2 .content-section-v2__inner > h2:first-child { margin-top: 0; } .v2 .content-section-v2__prose p { margin-bottom: var(--space-p-bottom); } /* Service detail pages (services-corporate / weddings / galas): max-breath vertical rhythm — hub unchanged */ body.v2.services-detail .page-hero-v2 { margin-bottom: 2rem; } /* First impression: connect hero to opening narrative; later sections keep 15rem top */ body.v2.services-detail .page-hero-v2 + .content-section-v2 { padding-top: 6rem; } body.v2.services-detail .content-section-v2 { padding-top: 15rem; padding-bottom: 15rem; } body.v2.services-detail .cta-section-v2 { padding-top: 15rem; padding-bottom: 15rem; } body.v2.services-detail .content-section-v2 .service-grid-v2 { margin-top: 10rem; } body.v2.services-detail .pricing-approach { margin-top: 8rem; gap: 10rem; } /* Narrative: left rail + measure lock + paragraph air (hub services.html has no .services-detail) */ body.v2.services-detail .content-section-v2__prose { max-width: var(--measure); margin-left: 0; margin-right: auto; text-align: left; } body.v2.services-detail .content-section-v2__prose p, body.v2.services-detail .content-section-v2__prose li { text-align: left; } body.v2.services-detail .content-section-v2__prose p { margin-bottom: 1.25rem; margin-left: 0; margin-right: 0; } body.v2.services-detail .content-section-v2__prose p:last-child { margin-bottom: 0; } body.v2.services-detail .content-section-v2__prose p:has(+ h2), body.v2.services-detail .content-section-v2__prose p:has(+ h3) { margin-bottom: 4rem; } body.v2.services-detail .content-section-v2__prose li { margin-bottom: 0.5rem; } body.v2.services-detail .content-section-v2__prose blockquote p { text-align: left; margin-left: 0; margin-right: 0; } body.v2.services-detail .content-section-v2__prose > h2:first-child, body.v2.services-detail .content-section-v2__prose > h3:first-child { margin-top: 0; } body.v2.services-detail .content-section-v2__prose h2 { margin-top: 8rem; text-align: left; padding-bottom: 0.25rem; } body.v2.services-detail .content-section-v2__prose h3 { margin-top: 8rem; margin-bottom: var(--space-2); text-align: left; padding-bottom: 0.25rem; } /* Section titles outside __prose (e.g. How Pricing Works.) — left + brass hairline, not centered rack */ body.v2.services-detail .content-section-v2__inner > h2 { text-align: left; padding-bottom: 0.25rem; } body.v2.services-detail .service-card-v2__title { margin-bottom: var(--space-1); } .v2 .service-grid-v2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-5); } .v2 .service-card-v2 { background: var(--linen); border-radius: var(--radius-1); padding: var(--space-4); box-shadow: none; display: flex; flex-direction: column; } .v2 a.service-card-v2 { text-decoration: none; border: 1.5px solid transparent; transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); } .v2 a.service-card-v2:hover { border-color: var(--ember); background: var(--bone); } .v2 a.service-card-v2:hover .service-card-v2__cta { color: var(--ink); } .v2 .service-card-v2__icon { color: var(--ember); margin-bottom: var(--space-2); } .v2 .service-card-v2__icon svg { stroke: var(--ember); } .v2 .service-card-v2__title { font-family: var(--font-heading); font-size: var(--scale-4); color: var(--ink); margin-bottom: var(--space-2); text-align: center; } .v2 .service-card-v2__body { font-family: var(--font-body-v2); font-size: var(--scale-2); color: var(--slate); line-height: 1.6; flex: 1; text-align: center; } .v2 .service-card-v2__cta { font-family: var(--font-mono); font-size: var(--scale-1); color: var(--ember); letter-spacing: 0.04em; margin-top: var(--space-3); transition: color var(--dur-2) var(--ease); } .v2 .cta-section-v2 { background: var(--ink); padding: var(--space-7) 0; text-align: center; } /* Free Checklist Banner */ .v2 .checklist-banner { background: var(--ink); padding: var(--space-6) 0; border-top: 1px solid rgba(244, 239, 230, 0.1); } .v2 .checklist-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); } .v2 .checklist-banner__eyebrow { color: var(--brass); margin-bottom: var(--space-2); display: block; } .v2 .checklist-banner__headline { font-family: var(--font-heading); font-size: var(--scale-5); font-weight: 500; color: var(--bone); -webkit-text-fill-color: var(--bone); background: none; margin-bottom: var(--space-2); letter-spacing: -0.02em; } .v2 .checklist-banner__body { font-family: var(--font-body-v2); font-size: var(--scale-2); color: var(--linen); max-width: 56ch; line-height: 1.6; } .v2 .checklist-banner__cta { flex-shrink: 0; display: inline-block; font-family: var(--font-body-v2); font-size: var(--scale-2); color: var(--bone); border: 1px solid rgba(244, 239, 230, 0.5); padding: var(--space-2) var(--space-4); border-radius: var(--radius-1); text-decoration: none; white-space: nowrap; transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .v2 .checklist-banner__cta:hover { background: var(--bone); border-color: var(--bone); color: var(--ink); } @media (max-width: 640px) { .v2 .checklist-banner__inner { flex-direction: column; align-items: flex-start; } .v2 .checklist-banner__cta { align-self: flex-start; } } .v2 .cta-section-v2__inner { max-width: 640px; margin: 0 auto; padding: 0 var(--space-4); } .v2 .cta-section-v2__headline { font-family: var(--font-heading); font-size: var(--scale-6); font-weight: 500; color: var(--bone); -webkit-text-fill-color: var(--bone); background: none; margin-bottom: var(--space-4); text-wrap: balance; } .v2 .cta-section-v2__link { font-family: var(--font-mono); font-size: var(--scale-2); color: var(--ember); text-decoration: none; letter-spacing: 0.04em; border-bottom: 1px solid var(--ember); padding-bottom: 2px; } .v2 .cta-section-v2__link:hover { color: var(--bone); border-color: var(--bone); } /* --- 23.4 INSIGHTS GRID (bone cards on linen) + filter buttons --- */ .v2 .insights-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); padding: 0 var(--space-4); max-width: var(--container-v2); margin-left: auto; margin-right: auto; } .v2 .insights-filter__btn { font-family: var(--font-mono); font-size: var(--scale-1); letter-spacing: 0.06em; text-transform: uppercase; background: var(--linen); color: var(--ink); border: none; padding: var(--space-1) var(--space-3); border-radius: 999px; cursor: pointer; transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease); } .v2 .insights-filter__btn.active, .v2 .insights-filter__btn:hover { background: var(--ember); color: var(--bone); } .v2 .insights-cards-section { background: var(--linen); padding: var(--space-7) 0; } .v2 .insights-cards-section__inner { max-width: var(--container-v2); margin: 0 auto; padding: 0 var(--space-4); } .v2 .insights-grid-v2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } .v2 .insight-card-v2 { background: var(--bone); border-radius: var(--radius-1); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: background var(--dur-2) var(--ease); } .v2 .insight-card-v2:hover { background: var(--linen); } .v2 .insight-card-v2__image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; filter: var(--lut-filter); } .v2 .insight-card-v2__body { padding: var(--space-3) var(--space-3) var(--space-4); flex: 1; display: flex; flex-direction: column; } .v2 .insight-card-v2__label { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ember); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-1); } .v2 .insight-card-v2__title { font-family: var(--font-heading); font-size: var(--scale-3); color: var(--ink); line-height: 1.3; margin-bottom: var(--space-2); } .v2 .insight-card-v2__excerpt { font-family: var(--font-body-v2); font-size: var(--scale-2); color: var(--slate); line-height: 1.55; flex: 1; } @media (max-width: 992px) { .v2 .insights-grid-v2 { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .v2 .insights-grid-v2 { grid-template-columns: 1fr; } .v2 .service-grid-v2 { grid-template-columns: 1fr; } } @media (max-width: 768px) { .v2 .service-grid-v2 { grid-template-columns: 1fr 1fr; } } /* ========================================================================== 25. GALLERY LIGHTBOX ========================================================================== */ /* ========================================================================== CASE STUDY FLYTHROUGH — full-width video embed ========================================================================== */ .v2 .case-flythrough { background: var(--ink); padding: var(--space-7) 0; } .v2 .case-flythrough__inner { max-width: min(1200px, 92vw); margin: 0 auto; } .v2 .case-flythrough__label { color: var(--brass); margin-bottom: var(--space-3); display: block; } .v2 .case-flythrough__viewport { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius-1); overflow: hidden; } .v2 .case-flythrough__video { width: 100%; height: 100%; object-fit: contain; display: block; } .v2 .case-flythrough__caption { font-family: var(--font-mono); font-size: var(--scale-1); letter-spacing: 0.03em; color: rgba(244, 239, 230, 0.45); margin-top: var(--space-3); max-width: 72ch; line-height: 1.6; } /* Gallery items — zoom cursor + subtle scale on hover */ .v2 .case-gallery__item { overflow: hidden; cursor: zoom-in; border-radius: var(--radius-1); } .v2 .case-gallery__item img { transition: transform var(--dur-3) var(--ease); display: block; width: 100%; } .v2 .case-gallery__item:hover img { transform: scale(1.04); } /* Lightbox overlay — above fixed header (1000), signal plates (~0–50), and compass rails (100) */ .eq-lightbox { position: fixed; inset: 0; background: rgba(10, 10, 10, 0.96); z-index: 9999 !important; display: flex; align-items: center; justify-content: center; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity 0.22s ease, visibility 0.22s ease; } .eq-lightbox.is-open { opacity: 1; visibility: visible; } .eq-lightbox__img-wrap { max-width: min(90vw, 1120px); max-height: 78vh; display: flex; align-items: center; justify-content: center; } .eq-lightbox__img { max-width: 100%; max-height: 78vh; object-fit: contain; filter: saturate(0.88) contrast(1.02); display: block; border-radius: 2px; } .eq-lightbox__caption { font-family: var(--font-mono); font-size: var(--scale-1); color: rgba(244, 239, 230, 0.45); letter-spacing: 0.04em; margin-top: var(--space-3); text-align: center; max-width: 60ch; padding: 0 var(--space-4); line-height: 1.5; } .eq-lightbox__counter { font-family: var(--font-mono); font-size: 0.75rem; color: rgba(244, 239, 230, 0.3); letter-spacing: 0.08em; margin-top: var(--space-2); } .eq-lightbox__close, .eq-lightbox__prev, .eq-lightbox__next { position: fixed; background: none; border: none; cursor: pointer; color: rgba(244, 239, 230, 0.6); font-family: var(--font-mono); padding: var(--space-3); line-height: 1; z-index: 10000 !important; transition: color 0.15s ease; } .eq-lightbox__close:hover, .eq-lightbox__prev:hover, .eq-lightbox__next:hover { color: var(--bone); } .eq-lightbox__close { top: var(--space-4); right: var(--space-4); font-size: 1.25rem; } .eq-lightbox__prev, .eq-lightbox__next { top: 50%; transform: translateY(-50%); font-size: 2rem; } .eq-lightbox__prev { left: var(--space-3); } .eq-lightbox__next { right: var(--space-3); } /* ========================================================================== GEO NEARBY PILLS — override for v2 bone/linen backgrounds ========================================================================== */ .v2 .geo-nearby { background: var(--linen); border: 1px solid rgba(18, 18, 18, 0.1); border-radius: var(--radius-1); } .v2 .geo-nearby h3 { color: var(--ink); font-family: var(--font-mono); font-size: var(--scale-1); letter-spacing: 0.08em; text-transform: uppercase; text-align: center; border-bottom: none; padding-bottom: 0; margin-top: 0; margin-bottom: var(--space-3); } .v2 .geo-nearby-tag { background: var(--bone); border: 1px solid rgba(18, 18, 18, 0.15); color: var(--ink); font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.04em; } .v2 a.geo-nearby-tag:hover { background: var(--ember); border-color: var(--ember); color: var(--bone); } /* ========================================================================== HOMEPAGE INSIGHT CARDS — v2 palette overrides ========================================================================== */ .v2 .insights-highlight-section { background: var(--linen); padding: var(--space-7) 0; } .v2 .insights-highlight-section .section-title { color: var(--ink); } .v2 .insights-highlight-section .section-subtitle { color: var(--slate); } .v2 .insight-highlight-card { display: block; background: var(--linen); border: 1px solid rgba(18, 18, 18, 0.08); border-radius: var(--radius-1); overflow: hidden; text-decoration: none; color: var(--ink); cursor: pointer; transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); transform: none; } .v2 .insight-highlight-card:hover { background: var(--bone); border-color: var(--ember); transform: none; box-shadow: none; text-decoration: none; color: var(--ink); } .v2 .insight-highlight-card h3 { font-family: var(--font-heading); font-size: var(--scale-4); color: var(--ink); background: none; -webkit-text-fill-color: var(--ink); margin-bottom: var(--space-2); } .v2 .insight-highlight-card p { font-family: var(--font-body-v2); font-size: var(--scale-2); color: var(--slate); line-height: 1.6; } .v2 .insight-category { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ember); background: none; padding: 0; border-radius: 0; font-weight: 400; display: inline; } .v2 .insight-read-cta { display: inline-block; margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--scale-1); letter-spacing: 0.04em; color: var(--ember); border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: color var(--dur-2) var(--ease); } .v2 .insight-highlight-card:hover .insight-read-cta { color: var(--ink); } /* ========================================================================== ARTICLE PAGINATION — prev / all articles / next ========================================================================== */ .v2 .article-pagination { max-width: var(--container-v2); margin: 0 auto var(--space-6); padding: var(--space-4) var(--space-4); display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-3); align-items: center; border-top: 1px solid rgba(18,18,18,0.1); border-bottom: 1px solid rgba(18,18,18,0.1); background: var(--linen); } .v2 .article-pagination__prev, .v2 .article-pagination__next { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 4px; transition: color var(--dur-2) var(--ease); } .v2 .article-pagination__next { text-align: right; align-items: flex-end; } .v2 .article-pagination__prev:hover, .v2 .article-pagination__next:hover { color: var(--ember); } .v2 .article-pagination__dir { font-family: var(--font-mono); font-size: var(--scale-1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ember); } .v2 .article-pagination__prev:hover .article-pagination__dir, .v2 .article-pagination__next:hover .article-pagination__dir { color: var(--ink); } .v2 .article-pagination__title { font-family: var(--font-heading); font-size: var(--scale-3); line-height: 1.3; max-width: 28ch; } .v2 .article-pagination__all { font-family: var(--font-mono); font-size: var(--scale-1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--brass); text-decoration: none; white-space: nowrap; border-bottom: 1px solid var(--brass); padding-bottom: 1px; transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); } .v2 .article-pagination__all:hover { color: var(--ember); border-color: var(--ember); } @media (max-width: 600px) { .v2 .article-pagination { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; } .v2 .article-pagination__all { grid-column: 1 / -1; text-align: center; order: -1; margin-bottom: var(--space-2); } .v2 .article-pagination__title { display: none; } } /* ========================================================================== SCROLL REVEAL — sections fade up as they enter the viewport ========================================================================== */ .eq-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.65s ease, transform 0.65s ease; } .eq-reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .eq-reveal { opacity: 1; transform: none; transition: none; } } /* ========================================================================== 24. RESPONSIVE ========================================================================== */ @media (max-width: 900px) { .v2 .work-preview__grid { grid-template-columns: 1fr; gap: var(--space-5); } .v2 .work-preview__header { flex-direction: column; align-items: center; } .v2 .case-body__grid { grid-template-columns: 1fr; } .v2 .run-of-show { position: static; margin-top: var(--space-5); } .v2 .case-gallery__grid { grid-template-columns: 1fr 1fr; } .v2 .hero h1, .v2 .hero__headline { font-size: clamp(2.5rem, 10vw, 4rem); } .v2 .ledger__track { animation-duration: 60s; } } @media (max-width: 540px) { .v2 .case-gallery__grid { grid-template-columns: 1fr; } .v2 .testimonial-editorial__quote { font-size: clamp(1.5rem, 6vw, 2.25rem); } .v2 .final-cta__headline { font-size: clamp(1.75rem, 7vw, 2.25rem); } } /* ========================================================================== 24. PRICING APPROACH — services pages, no "starting at" numbers ========================================================================== */ .v2 .pricing-approach { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-5); align-items: start; margin-top: var(--space-4); } /* Narrative reads as spec sheet, not marketing: left rail (no .pricing-section — use __prose) */ .v2 .content-section-v2__inner:has(.pricing-approach) > h2 { text-align: left; } .v2 .pricing-approach__prose { text-align: left; margin-left: 0; margin-right: auto; } .v2 .pricing-approach__prose p, .v2 .pricing-approach__prose ul { text-align: left; } .v2 .pricing-approach__aside .pricing-approach__card, .v2 .pricing-approach__aside .pricing-approach__list li { text-align: left; } .v2 .pricing-approach__prose p { font-family: var(--font-body-v2); font-size: var(--scale-3); line-height: 1.65; color: var(--ink); max-width: 58ch; margin: 0 0 1.1rem; } .v2 .pricing-approach__prose p:first-child { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; line-height: 1.3; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 1.25rem; } .v2 .pricing-approach__card { background: var(--bone); border: 1px solid rgba(18,18,18,0.1); border-radius: var(--radius-2); padding: var(--space-4); position: sticky; top: var(--space-4); } .v2 .pricing-approach__card-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember); margin-bottom: 1rem; display: block; } .v2 .pricing-approach__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; } .v2 .pricing-approach__list li { font-family: var(--font-body-v2); font-size: 0.95rem; line-height: 1.5; color: var(--ink); padding-left: 1.1rem; position: relative; } .v2 .pricing-approach__list li::before { content: ''; position: absolute; left: 0; top: 0.55rem; width: 5px; height: 5px; border-radius: 50%; background: var(--ember); } @media (max-width: 820px) { .v2 .pricing-approach { grid-template-columns: 1fr; } .v2 .pricing-approach__card { position: static; } } /* ========================================================================== 25. PROCESS TIMELINE + FAQ — process.html ========================================================================== */ /* Hero font fix + breathing room */ .v2 .process-page-hero { padding-bottom: var(--space-7); min-height: 0; } .v2 .process-page-hero .page-hero-v2__headline { font-feature-settings: "ss01" 0, "swsh" 0; font-variant-alternates: normal; } .v2 .process-timeline { padding: var(--space-8, 6rem) var(--space-4) var(--space-7); background: var(--bone); } .v2 .process-timeline__inner { max-width: var(--container-v2); margin: 0 auto; display: flex; flex-direction: column; gap: 0; position: relative; /* Rail lives in the left gutter, outside grid columns */ padding-left: 2rem; } .v2 .process-timeline__inner::before { content: ''; position: absolute; left: 0.6rem; /* center of the 2rem left gutter */ top: 1.5rem; bottom: 1.5rem; width: 1px; background: linear-gradient(to bottom, transparent 0%, rgba(18,18,18,0.12) 3%, rgba(18,18,18,0.12) 97%, transparent 100%); pointer-events: none; } /* Each step: meta | title | body+detail */ .v2 .process-step { display: grid; grid-template-columns: 8rem 1fr 1.6fr; grid-template-rows: auto auto; column-gap: var(--space-5); row-gap: 0; padding: var(--space-5) 0 var(--space-4); border-bottom: 1px solid rgba(18,18,18,0.07); position: relative; align-items: start; } .v2 .process-step:last-child { border-bottom: none; } /* Amber node on the rail — sits in the left gutter */ .v2 .process-step::before { content: ''; position: absolute; left: calc(-2rem + 0.6rem - 5px); /* gutter center minus node half-width */ top: calc(var(--space-5) + 0.8rem); width: 10px; height: 10px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 4px var(--bone); z-index: 2; } /* Left column: step number + timing */ .v2 .process-step__meta { grid-column: 1; grid-row: 1 / 3; padding-top: 0.2rem; display: flex; flex-direction: column; gap: 0.35rem; } .v2 .process-step__number { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember); margin: 0; } .v2 .process-step__timing { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--slate); line-height: 1.4; display: block; margin: 0; } /* Middle column: title */ .v2 .process-step__title { grid-column: 2; grid-row: 1; font-family: var(--font-heading); font-size: clamp(1.6rem, 2.5vw, 2.1rem); font-weight: 500; line-height: 1.12; color: var(--ink); margin: 0; letter-spacing: -0.015em; align-self: start; text-align: left; border-bottom: none; padding-bottom: 0; } /* Right column: body + detail */ .v2 .process-step__body { grid-column: 3; grid-row: 1; font-family: var(--font-body-v2); font-size: var(--scale-3); line-height: 1.65; color: var(--ink); margin: 0 0 var(--space-3); text-align: left; } .v2 .process-step__detail { grid-column: 3; grid-row: 2; border-left: 2px solid rgba(200,104,28,0.3); padding: 0.75rem 1rem; background: rgba(200,104,28,0.04); border-radius: 0 var(--radius-1) var(--radius-1) 0; margin-top: var(--space-2); max-width: 52ch; } .v2 .process-step__detail-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember); margin-bottom: 0.4rem; display: block; } .v2 .process-step__detail-text { font-family: var(--font-body-v2); font-size: 0.9rem; line-height: 1.6; color: var(--slate); text-align: left; } /* FAQ */ .v2 .process-faq { display: flex; flex-direction: column; gap: 0; margin-top: var(--space-5); max-width: 72ch; } .v2 .process-faq__item { border-bottom: 1px solid rgba(18,18,18,0.1); padding: var(--space-4) 0; } .v2 .process-faq__item:first-child { padding-top: 0; } .v2 .process-faq__item:last-child { border-bottom: none; } .v2 .process-faq__q { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 500; color: var(--ink); margin: 0 0 0.65rem; line-height: 1.28; } .v2 .process-faq__a { font-family: var(--font-body-v2); font-size: var(--scale-3); line-height: 1.65; color: var(--ink); margin: 0; } /* Responsive collapses */ @media (max-width: 900px) { .v2 .process-timeline__inner { padding-left: 1.75rem; } .v2 .process-timeline__inner::before { left: 0.5rem; } .v2 .process-step { grid-template-columns: 7rem 1fr; grid-template-rows: auto auto auto; } .v2 .process-step::before { left: calc(-1.75rem + 0.5rem - 5px); } .v2 .process-step__meta { grid-column: 1; grid-row: 1; flex-direction: column; gap: 0.3rem; } .v2 .process-step__title { grid-column: 2; grid-row: 1; } .v2 .process-step__body { grid-column: 1 / 3; grid-row: 2; margin-top: var(--space-3); } .v2 .process-step__detail { grid-column: 1 / 3; grid-row: 3; } } @media (max-width: 600px) { .v2 .process-timeline { padding: var(--space-6) var(--space-3); } .v2 .process-timeline__inner { padding-left: 1.5rem; } .v2 .process-timeline__inner::before { left: 0.4rem; } .v2 .process-step { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; padding: var(--space-4) 0 var(--space-3); } .v2 .process-step::before { left: calc(-1.5rem + 0.4rem - 5px); top: calc(var(--space-4) + 0.5rem); } .v2 .process-step__meta { grid-column: 1; grid-row: 1; flex-direction: row; gap: 0.75rem; flex-wrap: wrap; } .v2 .process-step__title { grid-column: 1; grid-row: 2; font-size: clamp(1.4rem, 6vw, 1.8rem); margin-top: 0.25rem; } .v2 .process-step__body { grid-column: 1; grid-row: 3; margin-top: 0; } .v2 .process-step__detail { grid-column: 1; grid-row: 4; max-width: 100%; } } /* ========================================================================== 26. PROCESS TEASER — homepage band linking to /process.html ========================================================================== */ .v2 .process-teaser { background: var(--ink); padding: var(--space-7) var(--space-4); } .v2 .process-teaser__inner { max-width: var(--container-v2); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; } .v2 .process-teaser__eyebrow { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember); margin-bottom: 0.75rem; } .v2 .process-teaser__headline { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 500; color: #f5f0e8; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 1rem; } .v2 .process-teaser__body { font-family: var(--font-body-v2); font-size: var(--scale-3); line-height: 1.65; color: rgba(245,240,232,0.72); max-width: 42ch; margin-bottom: 1.5rem; } .v2 .process-teaser__link { font-family: var(--font-body-v2); font-size: 0.95rem; font-weight: 500; color: var(--ember); text-decoration: none; letter-spacing: 0.01em; transition: opacity 0.2s ease; } .v2 .process-teaser__link:hover { opacity: 0.75; } .v2 .process-teaser__steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; border-left: 1px solid rgba(245,240,232,0.12); } .v2 .process-teaser__steps li { font-family: var(--font-body-v2); font-size: 1.05rem; color: rgba(245,240,232,0.65); padding: 0.8rem 0 0.8rem 1.5rem; border-bottom: 1px solid rgba(245,240,232,0.07); display: flex; align-items: baseline; gap: 0.9rem; transition: color 0.2s ease; } .v2 .process-teaser__steps li:last-child { border-bottom: none; } .v2 .process-teaser__steps li:hover { color: rgba(245,240,232,0.9); } .v2 .process-teaser__steps li span { font-size: 0.72rem; letter-spacing: 0.1em; color: var(--ember); opacity: 0.8; flex-shrink: 0; } @media (max-width: 820px) { .v2 .process-teaser__inner { grid-template-columns: 1fr; gap: var(--space-5); } .v2 .process-teaser__steps { border-left: none; border-top: 1px solid rgba(245,240,232,0.12); } .v2 .process-teaser__steps li { padding-left: 0; padding-top: 0.75rem; } } /* ========================================================================== 26b. PROCESS SECTION + ASSURANCE LEDGER — shields, grid, atmospheric art Homepage + process.html: undo global .v2 h2 / .v2 main p centering; backdrop + scrim. ========================================================================== */ /* Shared backdrop: image + dark scrim (paths relative to site root / CSS file location) */ .v2 .process-section { position: relative; overflow: hidden; } .v2 .process-section__backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url('assets/index-process.jpg') center / cover no-repeat; } .v2 .process-section__backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 165deg, rgba(10, 10, 12, 0.88) 0%, rgba(18, 16, 14, 0.9) 45%, rgba(10, 10, 12, 0.92) 100% ); } /* Homepage band — sit content above artwork */ .v2 .process-section.process-teaser { background: transparent; padding: var(--space-7) var(--space-4); } .v2 .process-section.process-teaser .process-teaser__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; max-width: var(--container-v2); margin: 0 auto; text-align: left; } .v2 .process-section.process-teaser .process-teaser__left { text-align: left; } .v2 .process-section.process-teaser .process-teaser__headline, .v2 .process-section.process-teaser .process-teaser__body, .v2 .process-section.process-teaser .process-teaser__link { text-align: left; } .v2 .process-section.process-teaser .process-teaser__headline { border-bottom: none; margin-top: 0; padding-bottom: 0; } .v2 .process-section.process-teaser .process-teaser__steps { position: relative; z-index: 1; text-align: left; } .v2 .process-section.process-teaser .process-teaser__steps li { text-align: left; justify-content: flex-start; } /* Process page — timeline above scrim; left-aligned six-column grid */ .v2 .process-section.process-timeline { background: transparent; padding: var(--space-8, 6rem) var(--space-4) var(--space-7); color: rgba(244, 239, 230, 0.92); } .v2 .process-section.process-timeline .process-timeline__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0; max-width: var(--container-v2); margin: 0 auto; padding-left: 2rem; text-align: left; } .v2 .process-section.process-timeline .process-timeline__inner::before { background: linear-gradient( to bottom, transparent 0%, rgba(244, 239, 230, 0.14) 3%, rgba(244, 239, 230, 0.14) 97%, transparent 100% ); } .v2 .process-section.process-timeline .process-step { text-align: left; align-items: start; } .v2 .process-section.process-timeline .process-step::before { box-shadow: 0 0 0 4px rgba(18, 16, 14, 0.95); } .v2 .process-section.process-timeline .process-step__meta { text-align: left; align-items: flex-start; } .v2 .process-section.process-timeline .process-step__number { text-align: left; } .v2 .process-section.process-timeline .process-step__timing { color: rgba(244, 239, 230, 0.55); } /* Kill global centered h2 + brass hairline inside timeline steps */ .v2 .process-section.process-timeline .process-step__title { text-align: left; border-bottom: none; margin-top: 0; padding-bottom: 0; color: #f5f0e8; } .v2 .process-section.process-timeline .process-step__body, .v2 .process-section.process-timeline .process-step__detail-text { text-align: left; color: rgba(244, 239, 230, 0.82); } .v2 .process-section.process-timeline .process-step__detail { background: rgba(244, 239, 230, 0.06); border-left-color: rgba(200, 104, 28, 0.55); } .v2 .process-section.process-timeline .process-step { border-bottom-color: rgba(244, 239, 230, 0.1); } /* The Ledger — atmospheric plate (keeps ink type readable) */ .v2 .ledger.assurance-ledger { position: relative; background: transparent; overflow: hidden; } .v2 .ledger.assurance-ledger::before { content: ''; position: absolute; inset: 0; z-index: 0; background: url('assets/index-process.jpg') center / cover no-repeat; opacity: 0.22; filter: saturate(0.75); pointer-events: none; } .v2 .ledger.assurance-ledger::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 180deg, rgba(244, 239, 230, 0.55) 0%, rgba(244, 239, 230, 0.92) 38%, rgba(244, 239, 230, 0.97) 100% ); } .v2 .ledger.assurance-ledger > .ledger__header, .v2 .ledger.assurance-ledger > .ledger__track { position: relative; z-index: 2; } @media (max-width: 820px) { .v2 .process-section.process-teaser .process-teaser__inner { grid-template-columns: 1fr; gap: var(--space-5); } } @media (max-width: 900px) { .v2 .process-section.process-timeline .process-timeline__inner { padding-left: 1.75rem; } } @media (max-width: 600px) { .v2 .process-section.process-timeline .process-timeline__inner { padding-left: 1.5rem; } } /* ========================================================================== 27. TRUST STRIP — hard proof-points band on homepage ========================================================================== */ .v2 .trust-strip { padding: var(--space-6) var(--space-4); background: var(--bone); border-top: 1px solid rgba(18,18,18,0.08); border-bottom: 1px solid rgba(18,18,18,0.08); } .v2 .trust-strip__inner { max-width: var(--container-v2); margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: var(--space-3); } .v2 .trust-strip__item { display: flex; align-items: center; gap: 0.9rem; padding: 0 0.5rem; } .v2 .trust-strip__icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(200,104,28,0.08); color: var(--ember); } .v2 .trust-strip__text { display: flex; flex-direction: column; gap: 0.2rem; } .v2 .trust-strip__value { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 500; color: var(--ink); line-height: 1.2; letter-spacing: -0.005em; } .v2 .trust-strip__label { font-family: var(--font-body-v2); font-size: 0.8rem; color: var(--slate); line-height: 1.35; } .v2 .trust-strip__divider { width: 1px; height: 40px; background: rgba(18,18,18,0.1); } @media (max-width: 900px) { .v2 .trust-strip__inner { grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-3); } .v2 .trust-strip__divider { display: none; } } @media (max-width: 540px) { .v2 .trust-strip__inner { grid-template-columns: 1fr; } .v2 .trust-strip__item { justify-content: flex-start; } } /* ========================================================================== 28. CASE STUDY PREV/NEXT BUTTONS — v2 override for fixed nav arrows ========================================================================== */ .v2 .next-event-button, .v2 .previous-event-button { background: rgba(18,18,18,0.72) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; color: rgba(244,239,230,0.9) !important; border: 1px solid rgba(244,239,230,0.15) !important; border-radius: var(--radius-1) !important; padding: 0.65rem 1.1rem !important; font-family: var(--font-body-v2) !important; font-size: 0.85rem !important; font-weight: 500 !important; letter-spacing: 0.01em !important; box-shadow: 0 2px 12px rgba(0,0,0,0.35) !important; opacity: 1 !important; top: auto !important; bottom: var(--space-6) !important; transform: none !important; } .v2 .next-event-button { right: var(--space-4) !important; } .v2 .previous-event-button { left: var(--space-4) !important; } .v2 .next-event-button:hover, .v2 .previous-event-button:hover { background: rgba(18,18,18,0.9) !important; color: #fff !important; transform: none !important; box-shadow: 0 4px 16px rgba(0,0,0,0.45) !important; } /* ========================================================================== 29. CONTACT + ABOUT — dark wizard (contact.html); team grid (about.html) Scoped with .contact-page / .about-page so global .v2 main p / .v2 h2 do not flatten layout or force light “prose card” styling on the planner. ========================================================================== */ /* --- Contact: isolate main prose centering --- */ .v2.contact-page main p, .v2.contact-page main li { text-align: left; } /* --- Dark multi-step wizard (contact only) --- */ .v2.contact-page .project-planner-section { padding: 10rem 0 var(--space-10); background: linear-gradient(135deg, #0a0a12 0%, #141422 45%, #101018 100%); } .v2.contact-page .planner-form-container { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-2); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45); padding: 2.5rem; } .v2.contact-page .planner-promise-strip { display: flex; align-items: center; gap: 0; padding: 1.5rem 1.75rem; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-2); margin-bottom: 2rem; } .v2.contact-page .planner-promise-stat { flex: 1; text-align: center; padding: 0 0.75rem; } .v2.contact-page .planner-promise-stat__value { display: block; font-family: var(--font-heading); font-size: 1.625rem; font-weight: 500; color: #f5f0e8; line-height: 1; margin-bottom: 0.35rem; letter-spacing: -0.01em; } .v2.contact-page .planner-promise-stat__label { display: block; font-family: var(--font-body-v2); font-size: 0.8rem; color: rgba(244, 239, 230, 0.62); line-height: 1.45; } .v2.contact-page .planner-promise-divider { width: 1px; height: 2.75rem; background: rgba(255, 255, 255, 0.14); flex-shrink: 0; } .v2.contact-page .progress-bar { background: rgba(255, 255, 255, 0.12); } .v2.contact-page .progress-fill { background: var(--ember); } .v2.contact-page .progress-step { color: rgba(255, 255, 255, 0.38); font-family: var(--font-mono), ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.06em; } .v2.contact-page .progress-step.active { color: rgba(244, 239, 230, 0.95); } .v2.contact-page .progress-step.completed { color: var(--ember); } .v2.contact-page .form-step h2 { font-family: var(--font-heading); color: #f5f0e8; font-weight: 500; text-align: left; border-bottom: none; padding-bottom: 0; margin-top: 0; } .v2.contact-page .step-description { color: rgba(244, 239, 230, 0.72); text-align: left; } .v2.contact-page .option-content { position: relative; background: rgba(255, 255, 255, 0.05); border: 2px solid rgba(255, 255, 255, 0.12); color: rgba(244, 239, 230, 0.92); text-align: center; } .v2.contact-page .option-content svg { color: rgba(244, 239, 230, 0.45); } .v2.contact-page .option-content span { color: rgba(244, 239, 230, 0.88); } .v2.contact-page .option-card:hover .option-content { border-color: rgba(200, 104, 28, 0.55); background: rgba(255, 255, 255, 0.08); } .v2.contact-page .option-card input:checked + .option-content { border: 2px solid var(--ember); background: rgba(200, 104, 28, 0.12); box-shadow: 0 0 0 3px rgba(200, 104, 28, 0.2); } .v2.contact-page .option-card input:checked + .option-content svg { color: var(--ember); } .v2.contact-page .option-card input:checked + .option-content::after { content: '✓'; position: absolute; top: 0.4rem; right: 0.5rem; font-size: 0.75rem; font-weight: 700; color: #fff; background: var(--ember); width: 1.25rem; height: 1.25rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1.25rem; text-align: center; } .v2.contact-page .checkbox-content { position: relative; background: rgba(255, 255, 255, 0.05); border: 2px solid rgba(255, 255, 255, 0.12); color: rgba(244, 239, 230, 0.92); } .v2.contact-page .checkbox-content svg { color: rgba(244, 239, 230, 0.45); } .v2.contact-page .checkbox-content span { color: rgba(244, 239, 230, 0.88); } .v2.contact-page .checkbox-card:hover .checkbox-content { border-color: rgba(200, 104, 28, 0.55); background: rgba(255, 255, 255, 0.07); } .v2.contact-page .checkbox-card input:checked + .checkbox-content { border: 2px solid var(--ember); background: rgba(200, 104, 28, 0.12); box-shadow: 0 0 0 3px rgba(200, 104, 28, 0.2); } .v2.contact-page .checkbox-card input:checked + .checkbox-content svg { color: var(--ember); } .v2.contact-page .checkbox-card input:checked + .checkbox-content::after { content: '✓'; position: absolute; top: 0.4rem; right: 0.5rem; font-size: 0.75rem; font-weight: 700; color: #fff; background: var(--ember); width: 1.25rem; height: 1.25rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1.25rem; text-align: center; } .v2.contact-page .planner-form-container .form-group label { color: rgba(244, 239, 230, 0.85); font-family: var(--font-body-v2); font-size: var(--scale-2); } .v2.contact-page .planner-form-container .form-group input, .v2.contact-page .planner-form-container .form-group select, .v2.contact-page .planner-form-container .form-group textarea { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.18); color: #f5f0e8; font-family: var(--font-body-v2); } .v2.contact-page .planner-form-container .form-group input::placeholder, .v2.contact-page .planner-form-container .form-group textarea::placeholder { color: rgba(244, 239, 230, 0.38); } .v2.contact-page .planner-form-container .form-group input:focus, .v2.contact-page .planner-form-container .form-group select:focus, .v2.contact-page .planner-form-container .form-group textarea:focus { border-color: var(--ember); box-shadow: 0 0 0 3px rgba(200, 104, 28, 0.2); outline: none; background: rgba(200, 104, 28, 0.06); } .v2.contact-page .planner-form-container .form-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgba(244,239,230,0.55)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; } .v2.contact-page .planner-form-container .form-group select option { color: #f5f0e8; background: #1a1a24; } .v2.contact-page .btn-planner.btn-next, .v2.contact-page .btn-planner.btn-submit { background: var(--ember); color: #fff; border: none; font-family: var(--font-body-v2); letter-spacing: 0.04em; border-radius: var(--radius-1); box-shadow: 0 4px 18px rgba(200, 104, 28, 0.35); } .v2.contact-page .btn-planner.btn-next:hover, .v2.contact-page .btn-planner.btn-submit:hover { background: #b85a18; color: #fff; box-shadow: 0 6px 22px rgba(200, 104, 28, 0.45); } .v2.contact-page .btn-planner.btn-back { background: transparent; color: rgba(244, 239, 230, 0.78); border: 1px solid rgba(255, 255, 255, 0.22); font-family: var(--font-body-v2); border-radius: var(--radius-1); } .v2.contact-page .btn-planner.btn-back:hover { color: #f5f0e8; border-color: rgba(244, 239, 230, 0.45); } .v2.contact-page .form-navigation { border-top: 1px solid rgba(255, 255, 255, 0.12); } .v2.contact-page .sidebar-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-2); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25); } .v2.contact-page .sidebar-card h3 { color: #f5f0e8; font-family: var(--font-heading); font-weight: 500; margin-bottom: 1.25rem; text-align: left; border-bottom: none; padding-bottom: 0; } .v2.contact-page .sidebar-card p { color: rgba(244, 239, 230, 0.72); text-align: left; } .v2.contact-page .sidebar-benefits { gap: 1.1rem; } .v2.contact-page .benefit-item { align-items: flex-start; } .v2.contact-page .benefit-item span { color: rgba(244, 239, 230, 0.88); } .v2.contact-page .benefit-item svg { color: var(--ember); flex-shrink: 0; } .v2.contact-page .sidebar-email-link { color: var(--ember); } .v2.contact-page .sidebar-email-link:hover { color: #f5f0e8; } .v2.contact-page .sidebar-testimonial { border-left: 3px solid var(--ember); background: rgba(255, 255, 255, 0.04); } .v2.contact-page .testimonial-quote { color: rgba(244, 239, 230, 0.9); font-family: var(--font-display); font-style: italic; } .v2.contact-page .testimonial-attribution { color: var(--ember); font-weight: 500; } .v2.contact-page .form-success h2 { color: #f5f0e8; font-family: var(--font-heading); text-align: center; border-bottom: none; } .v2.contact-page .form-success p { color: rgba(244, 239, 230, 0.78); text-align: center; } .v2.contact-page .form-success .btn { margin-top: 0.5rem; } /* --- About: Meet the Team — headshot + bio side by side --- */ .v2.about-page main .about-team p, .v2.about-page main .about-team li { text-align: left; } .v2 .about-team { display: grid; grid-template-columns: min(220px, 34vw) minmax(0, 1fr); gap: var(--space-5) var(--space-6); align-items: start; margin-top: var(--space-4); max-width: 900px; margin-left: 0; margin-right: auto; text-align: left; } .v2 .about-team__media { margin: 0; } .v2 .about-team__media img { width: 100%; max-width: 220px; height: auto; display: block; border-radius: var(--radius-1); object-fit: cover; } .v2 .about-team__bio h3 { font-family: var(--font-heading); font-size: var(--scale-4); color: var(--ink); margin: 0 0 var(--space-1); text-align: left; border-bottom: none; padding-bottom: 0; } .v2 .about-team__role { font-family: var(--font-mono); font-size: var(--scale-1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ember); margin: 0 0 var(--space-2); } .v2 .about-team__bio .about-team__text { font-family: var(--font-body-v2); font-size: var(--scale-3); line-height: 1.65; color: var(--ink); margin: 0; } @media (max-width: 640px) { .v2 .about-team { grid-template-columns: 1fr; justify-items: start; max-width: 100%; } .v2 .about-team__media img { max-width: 200px; } } /* ========================================================================== 30. INSIGHTS EDITORIAL NAV — static metadata, fixed blue pill prev/next Applies to all article-*.html using data-compass-rails="editorial". ========================================================================== */ /* Metadata: scroll with page (no sticky) */ .v2 .article-layout[data-compass-rails="editorial"] .article-rail { position: static; top: auto; padding-top: 0; } .v2 .article-layout[data-compass-rails="editorial"] .article-field { position: static; top: auto; } .v2 .article-layout[data-compass-rails="editorial"] .article-rail__stack { position: static; } /* Wider narrative row — side columns freed for fixed pills */ @media (min-width: 1200px) { .v2 .article-layout[data-compass-rails="editorial"] .article-layout__inner { grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: var(--space-4); padding-left: max(var(--space-4), 5.5rem); padding-right: max(var(--space-4), 5.5rem); } .v2 .article-layout[data-compass-rails="editorial"] .article-margin-left { grid-column: 1 / 2; } .v2 .article-layout[data-compass-rails="editorial"] .article-body { grid-column: 2 / 9; } .v2 .article-layout[data-compass-rails="editorial"] .article-field { grid-column: 9 / 11; } /* Fixed viewport pills (Work-style interaction via .button--pill.button--blue) */ .v2 .article-layout[data-compass-rails="editorial"] .compass-rail { position: fixed; top: 50%; transform: translateY(-50%); z-index: 101; margin: 0; padding: 0; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; display: flex; align-items: center; justify-content: center; width: auto; min-width: 0; } .v2 .article-layout[data-compass-rails="editorial"] .compass-rail--prev { left: max(0.65rem, env(safe-area-inset-left, 0px)); right: auto; } .v2 .article-layout[data-compass-rails="editorial"] .compass-rail--next { right: max(0.65rem, env(safe-area-inset-right, 0px)); left: auto; } .v2 .article-layout[data-compass-rails="editorial"] .compass-rail__plate { padding: 0; border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } .v2 .article-layout[data-compass-rails="editorial"] .compass-rail__link::before { display: none; } } /* Shared pill + blue surface (matches Work nav hover energy: ember ring, lift, glow) */ .v2 .button.button--pill.button--blue { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.85rem 1.35rem; border-radius: 9999px; font-family: var(--font-body-v2); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; line-height: 1.2; color: #f5f0e8; background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 4px 16px rgba(29, 78, 216, 0.35); transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; writing-mode: horizontal-tb; text-orientation: mixed; } .v2 .button.button--pill.button--blue:hover, .v2 .button.button--pill.button--blue:focus-visible { border-color: var(--ember); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 107, 53, 0.35); background: linear-gradient(180deg, #2f6feb 0%, #204ecf 100%); outline: none; } /* Mobile bottom bar: same pill treatment */ @media (max-width: 1199px) { .v2 .article-layout[data-compass-rails="editorial"] .article-compass-bar { justify-content: space-between; gap: var(--space-3); padding-left: max(var(--space-3), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-3), env(safe-area-inset-right, 0px)); background: rgba(244, 239, 230, 0.96); border-top: 1px solid rgba(18, 18, 18, 0.08); } .v2 .article-layout[data-compass-rails="editorial"] .article-compass-bar__rule { display: none; } .v2 .article-layout[data-compass-rails="editorial"] .article-compass-bar__link { flex: 0 0 auto; } } /* Beat legacy vertical mono on compass links when pills are applied */ .v2 .article-layout[data-compass-rails="editorial"] .compass-rail__link.button.button--pill.button--blue, .v2 .article-layout[data-compass-rails="editorial"] .article-compass-bar__link.button.button--pill.button--blue { writing-mode: horizontal-tb; text-orientation: mixed; font-family: var(--font-body-v2); letter-spacing: 0.08em; font-weight: 600; margin: 0; padding: 0.85rem 1.35rem; }