/* ============================================================ Sugarloaf Landscape and Nursery: locked direction "Grown Here (customized)" Heading: Playfair Display · Body: Inter · Accent #2E5736 · Ink #0F1B3D Radius 6px · Density: generous ============================================================ */ /* ---------- Fonts (self-hosted, §6b) ---------- */ @font-face { font-family: 'Playfair Display'; src: url('/assets/fonts/playfair-var.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Playfair Display'; src: url('/assets/fonts/playfair-italic-var.woff2') format('woff2'); font-weight: 400 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { /* Wave 8 (8.2): handwritten flourish face; loads only where .script-flourish renders. Perf pass 2026-07-02: Basic-Latin subset (identical outlines, calt kept) - the full file rode the contact page's critical chain for one flourish line. */ font-family: 'Caveat'; src: url('/assets/fonts/caveat-var-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } /* Metric-matched fallbacks so any swap is invisible (§6b #4) */ @font-face { font-family: 'Playfair Display Fallback'; src: local('Times New Roman'); size-adjust: 112.16%; ascent-override: 96.51%; descent-override: 23.66%; line-gap-override: 0%; } @font-face { font-family: 'Inter Fallback'; src: local('Arial'); size-adjust: 107.4%; ascent-override: 90.2%; descent-override: 22.48%; line-gap-override: 0%; } /* ---------- Tokens ---------- */ :root { --bg: #FFFFFF; --surface: #FFFFFF; --surface-alt: #F3F6F1; --ink: #0F1B3D; --muted: #5A6478; --accent: #2E5736; --accent-deep: #1F3D25; --accent-on: #FFFFFF; --line: rgba(15, 27, 61, 0.12); --gold: #D9A441; --gold-bright: #E8BE62; --gold-deep: #A8761F; --gold-on: #14251A; /* launch-audit 2026-07-02: was #1C2E20 - 4.29:1 worst vs the gradient's dark end inside the gold-button glyph band; one step darker clears 4.5:1 */ --radius: 6px; --font-heading: 'Playfair Display', 'Playfair Display Fallback', Georgia, serif; --font-body: 'Inter', 'Inter Fallback', system-ui, sans-serif; --shadow-card: 0 2px 6px rgba(15, 27, 61, 0.05), 0 12px 32px rgba(15, 27, 61, 0.07); --ease: cubic-bezier(0.25, 0.74, 0.22, 0.99); --nav-h: 76px; } /* ---------- Reset + base ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { overflow-x: clip; } /* Lenis smooth-scroll (self-hosted; JS adds .lenis/.lenis-smooth to only when smooth scroll is active - not under reduced-motion). Overrides native smooth-behavior so anchor jumps don't double-animate. No iframe pointer-events rule on purpose: the Google Map embed must stay interactive. */ html.lenis, html.lenis body { height: auto; } html.lenis, .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } body { font-family: var(--font-body); font-synthesis: none; background: var(--bg); color: var(--ink); font-size: clamp(1rem, 0.5vw + 0.875rem, 1.125rem); line-height: 1.65; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; } img { max-width: 100%; display: block; } a { color: var(--accent); } h1, h2, h3, .stat b, blockquote { font-family: var(--font-heading); } h1, h2, h3, .hero-sub, .lede, .section-eyebrow, .cta-label { text-wrap: balance; } p { text-wrap: pretty; } button, a { touch-action: manipulation; } /* 3.4 universal focus ring: 2px accent + 4px offset; light tint on dark surfaces so keyboard focus never sinks into green/navy panels or the hero photo */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } .hero :focus-visible, .page-hero :focus-visible, .statband :focus-visible, .closer :focus-visible, .cta-band :focus-visible, .site-footer :focus-visible, .callbar :focus-visible, .site-header:not(.is-scrolled):not(.is-open) :focus-visible { outline-color: #CDE3CF; } .site-header.is-scrolled :focus-visible, .site-header.is-open :focus-visible { outline-color: var(--accent); } .container { width: min(1160px, 100% - 48px); margin-inline: auto; } @media (max-width: 640px) { .container { width: calc(100% - 40px); } } /* ---------- Buttons (refined: gradient depth, no chunky underline) ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--font-body); font-weight: 600; font-size: 1rem; letter-spacing: 0.01em; text-decoration: none; border-radius: var(--radius); padding: 15px 28px; min-height: 48px; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); } .btn .arr { transition: transform 0.25s var(--ease); font-family: var(--font-body); } .btn-primary { background: linear-gradient(160deg, #3A6A42 0%, var(--accent) 46%, #234529 100%); color: var(--accent-on); box-shadow: 0 12px 26px -12px rgba(31, 61, 37, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.16); } .btn-ghost { color: var(--ink); border: 1.5px solid rgba(15, 27, 61, 0.24); background: transparent; } .btn-light { background: linear-gradient(165deg, #FFFFFF 0%, #EFF3ED 100%); color: var(--accent-deep); box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.9); } /* Gold CTA: the pop button for green/dark surfaces (operator: CTAs must POP on green) */ .btn-gold { background: linear-gradient(160deg, var(--gold-bright) 0%, var(--gold) 48%, var(--gold-deep) 100%); color: var(--gold-on); font-weight: 700; box-shadow: 0 14px 30px -12px rgba(70, 48, 8, 0.65), inset 0 1px 0 rgba(255, 244, 214, 0.55); } @media (hover: hover) { .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(31, 61, 37, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .btn-primary:hover .arr, .btn-light:hover .arr, .btn-gold:hover .arr { transform: translateX(4px); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } .btn-light:hover { transform: translateY(-2px); } .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 20px 38px -12px rgba(70, 48, 8, 0.72), inset 0 1px 0 rgba(255, 244, 214, 0.65); } } /* 3.7 press feedback: the lift settles back under the pointer/finger */ .btn-primary:active { transform: translateY(0); box-shadow: 0 6px 14px -8px rgba(31, 61, 37, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12); } .btn-light:active { transform: translateY(0); } .cta-microline { font-size: 0.88rem; color: var(--muted); margin-top: 12px; } /* Cedar-style text CTA: label · thin bar · arrow */ .link-arrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-body); font-weight: 600; font-size: 1rem; color: var(--ink); text-decoration: none; padding: 12px 2px; min-height: 48px; } .link-arrow::before { content: ""; order: 2; width: 1px; height: 20px; background: currentColor; opacity: 0.35; } .link-arrow .arr { order: 3; transition: transform 0.25s var(--ease); } .link-arrow.on-dark { color: #FFFFFF; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); } @media (hover: hover) { .link-arrow:hover .arr { transform: translateX(6px); } .link-arrow:hover { color: var(--accent); } .link-arrow.on-dark:hover { color: #DCEBDD; } } /* ---------- Header (P-003 transparent → solid) ---------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 60; background: transparent; transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease), padding 0.3s var(--ease); padding: 14px 0; } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .site-header.is-scrolled, .site-header.is-open { background: var(--surface); box-shadow: 0 1px 12px rgba(15, 27, 61, 0.08); padding: 8px 0; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; position: relative; } .brand img { height: 56px; width: auto; transition: height 0.3s var(--ease), opacity 0.3s var(--ease); } .brand .logo-dark { position: absolute; left: 0; top: 0; opacity: 0; } .is-scrolled .brand .logo-white, .is-open .brand .logo-white { opacity: 0; } .is-scrolled .brand .logo-dark, .is-open .brand .logo-dark { opacity: 1; } .is-scrolled .brand img, .is-open .brand img { height: 48px; } .primary-nav { display: flex; align-items: center; gap: 28px; } .primary-nav > a, .has-dropdown > a { color: #FFFFFF; text-decoration: none; font-weight: 600; font-size: 0.99rem; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); transition: color 0.2s var(--ease); } .is-scrolled .primary-nav > a, .is-scrolled .has-dropdown > a, .is-open .primary-nav > a, .is-open .has-dropdown > a { color: var(--ink); text-shadow: none; } @media (hover: hover) { /* Over the transparent header the photo is dark: hover to the light accent tint (same as hero em), not deep green (sinks into foliage). */ .primary-nav > a:hover, .has-dropdown > a:hover { color: #CDE3CF; } .is-scrolled .primary-nav > a:hover, .is-scrolled .has-dropdown > a:hover, .is-open .primary-nav > a:hover, .is-open .has-dropdown > a:hover { color: var(--accent); } } .nav-call { background: linear-gradient(160deg, var(--gold-bright) 0%, var(--gold) 48%, var(--gold-deep) 100%); color: var(--gold-on) !important; padding: 12px 22px; border-radius: var(--radius); font-weight: 700 !important; text-shadow: none !important; box-shadow: 0 10px 24px -12px rgba(70, 48, 8, 0.6), inset 0 1px 0 rgba(255, 244, 214, 0.5); transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease); display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .nav-call svg { flex-shrink: 0; opacity: 0.9; } @media (hover: hover) { .nav-call:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(70, 48, 8, 0.7), inset 0 1px 0 rgba(255, 244, 214, 0.6); } } /* Services dropdown (§7a: hover-bridge + focus-within) */ .has-dropdown { position: relative; } .has-dropdown::after { content: ""; position: absolute; left: -16px; right: -16px; top: 100%; height: 18px; } /* Miller-Septic-style split panel: two labeled columns, center divider, arrow tip */ .submenu { position: absolute; top: calc(100% + 14px); left: 50%; display: grid; grid-template-columns: repeat(2, 292px); column-gap: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 18px 48px rgba(15, 27, 61, 0.16); padding: 14px; opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s; } .submenu::before { content: ""; position: absolute; left: 50%; top: 16px; bottom: 16px; width: 1px; background: var(--line); } .submenu::after { content: ""; position: absolute; top: -6.5px; left: 50%; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg); background: var(--surface); border-left: 1px solid var(--line); border-top: 1px solid var(--line); } .submenu-group { min-width: 0; } .submenu-label { display: block; padding: 4px 12px 8px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); } .has-dropdown:hover .submenu, .has-dropdown:focus-within .submenu { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .submenu a { display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px; border-radius: 8px; text-decoration: none; color: var(--ink); } @media (hover: hover) { .submenu a:hover { background: var(--surface-alt); } } .submenu .ico { width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px; background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 16px; transition: background 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease); } .submenu b { display: block; font-size: 0.95rem; } .submenu span { font-size: 0.875rem; color: var(--muted); line-height: 1.4; } /* Mobile nav */ .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 10px; color: #FFFFFF; } .is-scrolled .nav-toggle, .is-open .nav-toggle { color: var(--ink); } .nav-toggle svg { display: block; } @media (max-width: 920px) { .primary-nav { /* The drawer is its OWN position:fixed layer (top = the header's real bottom, set by JS as --drawer-top so no see-through strip). It must NOT be an overflow-scroll container nested inside the position:fixed header - iOS cannot scroll that, so the touch leaked into a horizontal drag/back-swipe ("nav scoots left, can't scroll"). A top-level fixed scroller works. */ position: fixed; top: var(--drawer-top, var(--nav-h)); left: 0; right: 0; bottom: 0; background: var(--surface); flex-direction: column; align-items: stretch; gap: 0; padding: 10px 24px 26px; box-shadow: 0 24px 40px rgba(15, 27, 61, 0.14); display: none; /* body scroll locks while the menu is open, so the drawer scrolls itself */ overflow-y: auto; -webkit-overflow-scrolling: touch; /* momentum on iOS */ touch-action: pan-y; /* vertical only - kill the horizontal scoot / edge back-swipe */ overscroll-behavior: contain; /* never chain to the page behind */ padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px)); } .is-open .primary-nav { display: flex; } .primary-nav > a, .has-dropdown > a { color: var(--ink); text-shadow: none; padding: 14px 0; border-bottom: 1px solid var(--line); display: block; } .has-dropdown::after { display: none; } .submenu { position: static; opacity: 1; visibility: visible; transform: none; display: block; box-shadow: none; border: 0; width: 100%; padding: 0 0 6px 8px; } .submenu::before, .submenu::after { display: none; } .submenu-label { padding-top: 10px; } .primary-nav > .nav-call { display: inline-flex; } .nav-call { margin-top: 16px; text-align: center; border-bottom-width: 4px; } .nav-toggle { display: block; } } /* ---------- Hero (§12d Portfolio-Forward: still, image-overlay-text-bottom) ---------- */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; color: #FFFFFF; } .hero-media { position: absolute; inset: 0; overflow: hidden; } .hero-media img { width: 100%; height: 100%; object-fit: cover; } /* Ken Burns settle: one-shot slow push-in, then holds (operator-requested motion) */ html.js-motion .hero .hero-media img { animation: lc-hero-zoom 4.5s cubic-bezier(0.3, 0.1, 0.4, 1) both; transform-origin: 32% 28%; will-change: transform; backface-visibility: hidden; /* clean compositor layer */ } /* Start already overscanned (never at exactly scale 1) so no image edge ever rests on the .hero-media clip boundary - kills the right-edge subpixel flicker during the zoom. Keeps the same push-in feel. */ @keyframes lc-hero-zoom { from { transform: scale(1.035); } to { transform: scale(1.09); } } .hero-media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(520px 420px at 18% 72%, rgba(217, 164, 65, 0.16) 0%, rgba(217, 164, 65, 0) 65%), /* Wave 11 (11.3): mid-band deepened 0.05/0.16 → 0.18/0.28 so the eyebrow trust line stops fighting the sunlit lawn; anchors untouched (P-002) */ linear-gradient(180deg, rgba(10, 18, 40, 0.42) 0%, rgba(10, 18, 40, 0.18) 30%, rgba(10, 18, 40, 0.28) 58%, rgba(9, 20, 14, 0.78) 100%); } .hero-content { position: relative; z-index: 2; padding: calc(var(--nav-h) + 60px) 0 84px; max-width: 780px; } .hero .eyebrow { font-size: 0.92rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 1; /* Wave 11 (11.3): tight inner layer hardens glyph edges where the trust line crosses bright photo patches (Wave 2 em-shadow precedent) */ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.45); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .hero .badge-public { display: inline-flex; align-items: center; gap: 7px; /* Wave 11 (11.3): white frost lifted the photo BEHIND the white label (frost- model p05 2.4:1 over the lawn); dark glass keeps the chip and wins contrast */ background: rgba(9, 20, 14, 0.38); border: 1px solid rgba(255, 255, 255, 0.4); backdrop-filter: blur(4px); padding: 5px 13px; border-radius: 999px; font-size: 0.875rem; letter-spacing: 0.06em; /* Wave 8 (8.6): 14px floor in the hero conversion surface */ } .hero h1 { font-size: clamp(2.6rem, 5.2vw, 4.3rem); font-weight: 700; line-height: 1.07; letter-spacing: -0.012em; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); margin-bottom: 24px; } .hero h1 em { font-style: italic; color: #CDE3CF; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55); } /* Gold gradient-clipped accent phrase (the hero's pop moment) */ .hero h1 em.hero-grad { background: linear-gradient(96deg, #E4B85E 0%, var(--gold-bright) 42%, #EFCE7C 78%, #F2D389 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.45)); } .hero-sub { font-size: clamp(1.06rem, 1.4vw, 1.24rem); line-height: 1.6; max-width: 620px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); margin-bottom: 34px; } .hero-cta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; } .hero .cta-microline { color: rgba(255, 255, 255, 0.85); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); width: 100%; margin-top: 4px; } .hero .btn-ghost { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.6); text-shadow: 0 1px 6px rgba(0,0,0,0.35); } @media (hover: hover) { .hero .btn-ghost:hover { border-color: #FFFFFF; color: #FFFFFF; background: rgba(255,255,255,0.1); } } /* Mobile: the bottom-anchored hero content ran taller than the viewport, pushing the "call ahead" microline below the fold and orphaning it. Tighten the top/ bottom padding, hero-sub gap, and CTA stack so it sits up with the buttons. */ @media (max-width: 640px) { .hero .hero-content { padding: calc(var(--nav-h) + 18px) 0 30px; } .hero-sub { margin-bottom: 24px; } .hero-cta { gap: 12px; } .hero .cta-microline { margin-top: 2px; } } /* ---------- Stat band (signature move #1 - the gold offset moment) ---------- Operator note 2026-07-02: everything read green-on-green; this band is now the complementary-accent surface that breaks the monochrome. Harvest gold, deep green numerals, tighter rhythm. */ .statband { background: #FFFFFF; color: var(--ink); position: relative; z-index: 2; box-shadow: 0 -22px 44px -30px rgba(15, 27, 61, 0.35), 0 22px 44px -30px rgba(15, 27, 61, 0.28); border-top: 1px solid rgba(15, 27, 61, 0.06); border-bottom: 1px solid rgba(15, 27, 61, 0.06); } .statband .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 36px 0; } .stat { position: relative; padding-top: 14px; } .stat::before { content: ""; position: absolute; top: 0; left: 1px; width: 34px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--gold) 0%, var(--gold-deep) 100%); } .stat b { display: block; font-size: clamp(1.9rem, 3vw, 2.7rem); font-weight: 700; line-height: 1.05; color: var(--accent); } .stat span { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; /* launch-audit 2026-07-02: was rgba(44,58,30,.85) - sampled 3.19:1 worst on the dark-radial corner under the 4th label; solid near-black ink holds ≥4.5:1 band-wide (#14251A re-sampled 4.48:1 at the single worst corner pixel; one step darker clears it) */ color: var(--muted); display: block; margin-top: 6px; } @media (max-width: 820px) { .statband .container { grid-template-columns: repeat(2, 1fr); gap: 22px 18px; padding: 30px 0; } } /* ---------- Sections ---------- */ .section { padding: clamp(76px, 9vw, 128px) 0; } .section-alt { background: var(--surface-alt); } .section-eyebrow { color: var(--accent); font-weight: 700; font-size: 0.875rem; /* Wave 8 (8.6): 14px floor, same micro-label system */ letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; } .section h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 700; line-height: 1.14; letter-spacing: -0.01em; max-width: 720px; margin-bottom: 18px; } .section .lede { color: var(--muted); font-size: 1.08rem; max-width: 62ch; margin-bottom: 48px; } .accent-rule { width: 64px; height: 4px; background: var(--accent); border-radius: 2px; margin-bottom: 26px; } /* ---------- Two doorways ---------- */ .doorways { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .doorway { background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); box-shadow: var(--shadow-card); padding: clamp(30px, 4vw, 46px); display: flex; flex-direction: column; align-items: flex-start; position: relative; overflow: hidden; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } /* 3.2 gradient top-bar sweeps in while the doorway is held */ .doorway::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--accent-deep) 0%, var(--accent) 45%, #CDE3CF 100%); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); } @media (hover: hover) { .doorway:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(15, 27, 61, 0.05), 0 26px 56px -20px rgba(15, 27, 61, 0.2); } .doorway:hover::before { transform: scaleX(1); } } .doorway .tag { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; } .doorway h3 { font-size: clamp(1.45rem, 2vw, 1.8rem); font-weight: 600; margin-bottom: 12px; } .doorway p { color: var(--muted); margin-bottom: 22px; } .doorway ul { list-style: none; margin: 0 0 26px; width: 100%; } .doorway li { padding: 9px 0 9px 30px; position: relative; color: var(--ink); font-size: 1rem; border-bottom: 1px solid var(--line); } .doorway li:last-child { border-bottom: 0; } .doorway li::before { content: "✓"; position: absolute; left: 2px; color: var(--accent); font-weight: 800; } .doorway .btn { margin-top: auto; } @media (max-width: 820px) { .doorways { grid-template-columns: 1fr; } } /* ---------- Service cards ---------- */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .card { background: var(--surface); border: 1px solid rgba(15, 27, 61, 0.06); border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 27, 61, 0.04), 0 18px 44px -18px rgba(15, 27, 61, 0.14); padding: 36px 30px; display: flex; flex-direction: column; align-items: flex-start; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } @media (hover: hover) { .card:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(15, 27, 61, 0.04), 0 30px 60px -20px rgba(15, 27, 61, 0.22); } .card:hover .card-link .arr { transform: translateX(6px); } /* 3.2 icon morph: chip fills to accent while the card is held (4.8: ring flips to a light inner keyline so depth survives the fill) */ .card:hover .ico, .submenu a:hover .ico { background: var(--accent); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 5px 12px -4px rgba(31, 61, 37, 0.5); } } .card .ico { width: 48px; height: 48px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; transition: background 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease); } /* 4.8 icon depth: hairline accent ring + soft drop shadow on every icon chip */ .card .ico, .submenu .ico, .contact-rows .cr-ico { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent), 0 3px 8px -3px rgba(31, 61, 37, 0.28); } .card .ico svg { width: 24px; height: 24px; } .card h3 { font-size: 1.32rem; font-weight: 600; margin-bottom: 10px; } .card p { color: var(--muted); font-size: 1rem; margin-bottom: 18px; } .card .card-link { margin-top: auto; font-weight: 600; font-size: 0.95rem; text-decoration: none; color: var(--accent); display: inline-flex; align-items: center; gap: 10px; } /* Wave 8 (8.4): stretch the card link over its card so the whole card is the tap target (matches the hover-lift affordance; cards contain no other links) */ .card { position: relative; } .card .card-link::after { content: ""; position: absolute; inset: 0; } .card .card-link .arr { transition: transform 0.25s var(--ease); } .card-cta { background: var(--ink); border-color: var(--ink); color: #fff; } .card-cta h3 { color: #fff; } .card-cta p { color: rgba(255, 255, 255, 0.78); } @media (max-width: 980px) { .cards { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .cards { grid-template-columns: 1fr; } } /* ---------- Mechanism / comparison ---------- */ .answer-capsule { font-size: 1.08rem; line-height: 1.7; color: var(--ink); max-width: 66ch; margin-bottom: 44px; } .compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .compare-col { background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); padding: 30px 26px; } .compare-col.win { border: 2px solid var(--accent); box-shadow: var(--shadow-card); position: relative; } .compare-col .tag { display: block; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } .compare-col.win .tag { color: var(--accent); } .compare-col h3 { font-size: 1.22rem; font-weight: 600; margin-bottom: 10px; } .compare-col p { color: var(--muted); font-size: 1rem; } @media (max-width: 900px) { .compare { grid-template-columns: 1fr; } } /* ---------- Reviews (aligned grid, featured center) ---------- */ .reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; } .review { background: var(--surface); border: 1px solid rgba(15, 27, 61, 0.06); border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 27, 61, 0.04), 0 18px 44px -18px rgba(15, 27, 61, 0.14); padding: 34px 30px; display: flex; flex-direction: column; } .review.featured { border-top: 4px solid var(--accent); padding-top: 31px; /* compensate 4px top border so stars align across the row */ box-shadow: 0 2px 4px rgba(15, 27, 61, 0.05), 0 28px 60px -18px rgba(15, 27, 61, 0.2); } .review .stars { color: var(--accent); letter-spacing: 3px; font-size: 1rem; margin-bottom: 14px; } .review blockquote { font-size: 1.04rem; line-height: 1.6; font-weight: 500; color: var(--ink); margin-bottom: 18px; } .review cite { font-style: normal; font-size: 0.88rem; color: var(--muted); font-weight: 600; margin-top: auto; display: block; padding-top: 14px; border-top: 1px solid var(--line); } .review-aggregate { margin-top: 44px; text-align: center; color: var(--muted); font-size: 0.92rem; } @media (max-width: 900px) { .reviews { grid-template-columns: 1fr; } .review-aggregate { margin-top: 34px; } } /* ---------- Visit block ---------- */ .visit { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; } .visit-media { border-radius: calc(var(--radius) + 8px); overflow: hidden; box-shadow: var(--shadow-card); } .visit-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; } .visit-facts { list-style: none; margin: 26px 0 30px; } .visit-facts li { padding: 11px 0 11px 32px; position: relative; border-bottom: 1px solid var(--line); color: var(--ink); } .visit-facts li:last-child { border-bottom: 0; } .visit-facts li::before { content: "✓"; position: absolute; left: 2px; color: var(--accent); font-weight: 800; } .fact-note { display: block; font-size: 0.875rem; color: var(--muted); margin-top: 2px; } @media (max-width: 900px) { .visit { grid-template-columns: 1fr; } } /* ---------- Service area ---------- */ .area-towns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; max-width: 760px; } .area-towns span { border: 1px solid var(--line); border-radius: 999px; padding: 8px 18px; font-size: 0.92rem; color: var(--ink); background: var(--surface); } .area-towns .primary-town { background: var(--accent); color: var(--accent-on); border-color: var(--accent); font-weight: 600; } /* ---------- FAQ (§7b: centered column, left-aligned content) ---------- */ .faq-head { text-align: center; } .faq-head h2 { margin-inline: auto; } .faq-head .lede { margin-inline: auto; } .faq-list { max-width: 780px; margin-inline: auto; } .faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); margin-bottom: 14px; overflow: hidden; } .faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 20px 24px; font-family: var(--font-body); font-weight: 600; font-size: 1.04rem; text-align: left; } .faq-item summary::-webkit-details-marker { display: none; } /* 2.4 circular accent toggle: CSS-drawn cross morphs + to − on open */ .faq-item summary::after { content: ""; width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background-color: color-mix(in srgb, var(--accent) 10%, #fff); background-image: linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)); background-size: 12px 2px, 2px 12px; background-position: center center; background-repeat: no-repeat; transition: transform 0.3s var(--ease), background-size 0.3s var(--ease), background-color 0.3s var(--ease); } @media (hover: hover) { .faq-item summary:hover::after { background-color: color-mix(in srgb, var(--accent) 18%, #fff); } } .faq-item[open] summary::after { background-size: 12px 2px, 2px 0px; transform: rotate(180deg); background-color: color-mix(in srgb, var(--accent) 16%, #fff); } .faq-item .faq-body { padding: 0 24px 22px; color: var(--muted); text-align: left; } .faq-item .faq-body p { max-width: 66ch; } .faq-item .faq-body p + p { margin-top: 12px; } /* ---------- Closer (layered green) ---------- */ .closer { background: radial-gradient(110% 160% at 12% -10%, rgba(255, 248, 226, 0.16) 0%, rgba(255, 248, 226, 0) 48%), radial-gradient(70% 120% at 82% 10%, rgba(217, 164, 65, 0.13) 0%, rgba(217, 164, 65, 0) 55%), radial-gradient(90% 150% at 92% 115%, rgba(9, 24, 13, 0.6) 0%, rgba(9, 24, 13, 0) 55%), linear-gradient(140deg, #376440 0%, var(--accent) 46%, #1E3B24 100%); color: var(--accent-on); text-align: center; } .closer h2 { color: #FFFFFF; margin-inline: auto; } .closer .lede { color: rgba(255, 255, 255, 0.82); margin-inline: auto; } .closer .hero-cta { justify-content: center; } .closer .btn-ghost { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.55); } @media (hover: hover) { .closer .btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: #fff; color: #fff; } } .closer .cta-microline { color: rgba(255, 255, 255, 0.75); } /* Agency certification cards (commercial page) - gold-accented credential trio */ .cert-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: clamp(28px, 4vw, 40px); } .cert-card { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: calc(var(--radius) + 4px); padding: 26px 24px 24px; box-shadow: var(--shadow-card); } .cert-card .cert-ico { width: 42px; height: 42px; border-radius: 11px; margin-bottom: 16px; display: grid; place-items: center; color: var(--gold-on); background: linear-gradient(160deg, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-deep) 100%); } .cert-card .cert-ico svg { width: 22px; height: 22px; } .cert-card h3 { font-size: 1.12rem; font-weight: 600; line-height: 1.25; margin-bottom: 8px; } .cert-card p { color: var(--muted); font-size: 0.95rem; margin: 0; } @media (max-width: 820px) { .cert-cards { grid-template-columns: 1fr; } } /* ---------- Footer ---------- */ .site-footer { background: linear-gradient(170deg, #14251A 0%, #0E1A11 100%); color: #FFFFFF; padding: 52px 0 26px; } .footer-cert { font-size: 0.82rem; color: rgba(255, 255, 255, 0.58); margin-top: 12px; max-width: 46ch; line-height: 1.5; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 44px; margin-bottom: 52px; } .site-footer img.footer-logo { height: 84px; width: auto; margin-bottom: 16px; } .site-footer p, .site-footer li, .site-footer a { color: rgba(255, 255, 255, 0.78); font-size: 0.95rem; } .site-footer .footer-grid > div > p { font-size: 1rem; max-width: 44ch; } .site-footer h2 { /* Wave 11 (11.3): these were h4, skipping h2 in every page outline; same micro-label rendering (explicit family/size/margin beat the h2 globals) */ font-family: var(--font-body); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; line-height: 1.65; } .site-footer ul { list-style: none; } .site-footer .footer-links-2col { columns: 2; column-gap: 28px; } .site-footer .footer-links-2col li { break-inside: avoid; } .site-footer li { padding: 5px 0; } /* Wave 8 (8.4): taller hit areas on footer links without changing the list rhythm. 29px pitch caps the hit box at 29px (44px boxes would overlap neighbors); meets the WCAG 2.5.8 24px floor; recorded as the one sub-44 exception. */ .site-footer ul a { display: inline-block; padding: 5px 0; margin: -5px 0; } .site-footer a { text-decoration: none; } @media (hover: hover) { .site-footer a:hover { color: #FFFFFF; } } .footer-legal { border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 22px; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 0.82rem; color: rgba(255, 255, 255, 0.55); } /* Wave 8 (8.4): invisible 44px hit area on the attribution link */ .footer-legal .lc-attr a { display: inline-block; padding: 13px 0; margin: -13px 0; } .footer-legal .lc-attr a { color: var(--gold); font-weight: 600; text-decoration: underline; } @media (hover: hover) { .footer-legal .lc-attr a:hover { color: var(--gold-bright); } } .last-updated { font-size: 0.8rem; color: rgba(255,255,255,0.45); } @media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr; gap: 34px; } } .section-centered .container { text-align: center; } .section-centered h2, .section-centered .lede { margin-inline: auto; } .section-centered .accent-rule { margin-inline: auto; } .section-centered .checklist { margin-inline: auto; text-align: left; } .section-centered .reviews { text-align: left; } /* ---------- Partial-row centering (operator doctrine 2026-07-02): a grid row with fewer items than columns is CENTERED, never left-orphaned */ .reviews:has(> .review:first-child:last-child) { grid-template-columns: minmax(0, 620px); justify-content: center; } .reviews:has(> .review:first-child:last-child) .review { margin-bottom: 8px; } .reviews { margin-bottom: 40px; } .compare:has(> .compare-col:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 430px)); justify-content: center; } .cards:has(> .card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 400px)); justify-content: center; } .cat-grid:has(> .cat:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 400px)); justify-content: center; } @media (max-width: 900px) { .compare:has(> .compare-col:nth-child(2):last-child), .cards:has(> .card:nth-child(2):last-child), .cat-grid:has(> .cat:nth-child(2):last-child) { grid-template-columns: 1fr; } } /* ---------- Lightbox (gallery, operator-requested) ---------- */ .gallery-item { cursor: zoom-in; } .lightbox { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; background: rgba(9, 16, 11, 0.92); padding: 4vh 4vw; } .lightbox.open { display: flex; } .lightbox img { max-width: min(1400px, 92vw); max-height: 82vh; width: auto; height: auto; border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); } .lightbox figcaption { position: absolute; left: 50%; bottom: 5vh; transform: translateX(-50%); color: rgba(255, 255, 255, 0.9); font-size: 0.95rem; text-align: center; max-width: 80vw; } .lightbox .lb-close, .lightbox .lb-prev, .lightbox .lb-next { position: absolute; background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; width: 48px; height: 48px; cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; transition: background 0.2s var(--ease); } @media (hover: hover) { .lightbox button:hover { background: rgba(255, 255, 255, 0.22); } } .lightbox .lb-close { top: 20px; right: 20px; } .lightbox .lb-prev { left: 16px; top: 50%; transform: translateY(-50%); } .lightbox .lb-next { right: 16px; top: 50%; transform: translateY(-50%); } /* ---------- Mobile callbar (§7a: hidden on load, reveals on scroll, safe-area fix) ---------- */ .callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none; background: var(--accent-deep); padding: 12px 16px; /* Home-indicator clearance WITHOUT stacking a base value on top of the inset: max() means the strip below the buttons is only as tall as the safe area (or 14px on non-notch), not inset + 14px - no oversized empty bar. */ padding-bottom: max(14px, env(safe-area-inset-bottom)); /* iOS Safari + Chrome collapse their bottom toolbar on scroll. A fixed bottom:0 bar can flash a strip of page/background below it during that collapse. Bleed the bar's own color ~48px past its bottom edge so only the bar color ever shows in the transient gap (off-screen on a settled view). */ box-shadow: 0 48px 0 0 var(--accent-deep); transform: translateY(calc(100% + 48px + env(safe-area-inset-bottom, 0px))); transition: transform 0.3s var(--ease); gap: 12px; } .callbar.is-visible { transform: translateY(0); } /* Hide the sticky CTA while the mobile drawer is open (the drawer covers the screen; the callbar's higher z-index would otherwise show over it). */ .site-header.is-open ~ .callbar { transform: translateY(calc(100% + 48px)); } .callbar a { flex: 1; text-align: center; text-decoration: none; font-weight: 700; font-size: 0.98rem; padding: 13px 10px; border-radius: var(--radius); min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; transition: transform 0.15s var(--ease); } .callbar a:active { transform: scale(0.97); } .callbar .cb-call { background: linear-gradient(160deg, var(--gold-bright) 0%, var(--gold) 48%, var(--gold-deep) 100%); color: var(--gold-on); box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.5); } .callbar .cb-directions { border: 2px solid rgba(255, 255, 255, 0.55); color: #FFFFFF; } @media (max-width: 720px) { .callbar { display: flex; } } /* ---------- Interior page components (inherit homepage patterns) ---------- */ .page-hero { position: relative; min-height: 44vh; min-height: 44svh; display: flex; align-items: flex-end; color: #FFFFFF; /* 3.3 subtle radial lift behind the H1 block on solid green heroes (photo heroes cover this layer; their legibility is P-002 scrim work) */ background: radial-gradient(52% 88% at 24% 70%, rgba(205, 227, 207, 0.13) 0%, rgba(205, 227, 207, 0) 68%), linear-gradient(140deg, #24462B 0%, #1E3B24 100%); } .page-hero.has-photo .hero-media { position: absolute; inset: 0; overflow: hidden; } .page-hero.has-photo .hero-media img { width: 100%; height: 100%; object-fit: cover; } .page-hero.has-photo .hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 18, 40, 0.44) 0%, rgba(10, 18, 40, 0.12) 40%, rgba(9, 20, 14, 0.78) 100%); } .page-hero .hero-content { position: relative; z-index: 2; padding: calc(var(--nav-h) + 36px) 0 44px; max-width: 820px; } /* 5.3 page-hero eyebrow: uppercase micro-label (was inheriting plain body text) */ .page-hero .eyebrow { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; /* Wave 8 (8.6): 14px floor; carries the §7.4 trust signal */ text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* 5.3 hero-rhythm families: service / place / utility differ in measure + eyebrow. Locked tokens only; homepage .hero is its own gate-approved family. */ .page-hero--service .eyebrow::before { content: ""; display: inline-block; width: 26px; height: 2px; background: #CDE3CF; border-radius: 1px; } .page-hero--place .eyebrow { color: #CDE3CF; } .page-hero--place .hero-content { max-width: 740px; } .page-hero--place .hero-sub { max-width: 560px; } .page-hero--utility .hero-content { max-width: 680px; } .page-hero--utility .hero-sub { max-width: 520px; } /* 5.4 about-page signature: ghost founding-year numeral on the solid utility hero */ .page-hero { overflow: hidden; } .page-hero .hero-yearmark { position: absolute; z-index: 1; right: -0.04em; bottom: -0.16em; font-family: var(--font-heading); font-style: italic; font-weight: 700; font-size: clamp(10rem, 26vw, 22rem); line-height: 1; letter-spacing: -0.04em; color: rgba(205, 227, 207, 0.11); pointer-events: none; user-select: none; } @media (max-width: 720px) { /* small screens show the whole numeral instead of a cropped fragment */ .page-hero .hero-yearmark { font-size: 6.5rem; right: 16px; bottom: -0.06em; } } .page-hero h1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.012em; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); margin-bottom: 18px; } .page-hero h1 em { font-style: italic; color: #CDE3CF; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55); } .page-hero .hero-sub { margin-bottom: 26px; } .breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.75); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); margin-bottom: 20px; } .breadcrumbs a { color: rgba(255, 255, 255, 0.9); text-decoration: none; } /* Wave 8 (8.4): invisible 44px hit area, layout unchanged */ .breadcrumbs a { display: inline-block; padding: 11px 3px; margin: -11px -3px; } @media (hover: hover) { .breadcrumbs a:hover { color: #FFFFFF; text-decoration: underline; } } .breadcrumbs .sep { opacity: 0.5; } /* Two-column split: text beside image or aside card */ .split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; } .split.flip { grid-template-columns: 1fr 1.1fr; } .split-media { border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card); } .split-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; } @media (max-width: 900px) { .split, .split.flip { grid-template-columns: 1fr; } } /* Numbered process steps */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; counter-reset: step; } .step { background: var(--surface); border: 1px solid rgba(15, 27, 61, 0.06); border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 27, 61, 0.04), 0 18px 44px -18px rgba(15, 27, 61, 0.14); padding: 34px 30px; counter-increment: step; position: relative; } .step::before { content: "0" counter(step); font-family: var(--font-heading); font-weight: 700; font-size: 2rem; color: color-mix(in srgb, var(--accent) 32%, transparent); display: block; margin-bottom: 14px; } .step h3 { font-size: 1.28rem; font-weight: 600; margin-bottom: 10px; } .step p { color: var(--muted); font-size: 1rem; } @media (max-width: 900px) { .steps { grid-template-columns: 1fr; } } .steps.steps-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1000px) { .steps.steps-4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .steps.steps-4 { grid-template-columns: 1fr; } } /* Checklist (inherits visit-facts look, general purpose) */ .checklist { list-style: none; margin: 26px 0 30px; max-width: 640px; } .checklist li { padding: 11px 0 11px 32px; position: relative; border-bottom: 1px solid var(--line); color: var(--ink); } .checklist li:last-child { border-bottom: 0; } .checklist li::before { content: "✓"; position: absolute; left: 2px; color: var(--accent); font-weight: 800; } /* Category grid (plant categories on trees/perennials pages) */ .cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } /* Exactly 4 cats → 2×2 (no lonely orphan on a second row). 3 stays 3-across, 6 stays two rows of three. */ .cat-grid:has(> .cat:nth-child(4):last-child) { grid-template-columns: 1fr 1fr; } .cat { background: var(--surface); border: 1px solid rgba(15, 27, 61, 0.06); border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 27, 61, 0.04), 0 14px 34px -16px rgba(15, 27, 61, 0.12); padding: 26px 24px; } .cat h3 { font-size: 1.14rem; font-weight: 600; margin-bottom: 8px; } .cat p { color: var(--muted); font-size: 1rem; } @media (max-width: 900px) { .cat-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .cat-grid { grid-template-columns: 1fr; } } /* 5.4 perennials signature: the variety list reads as nursery rows, not cards, so the page stops rhyming with the nursery page's cat-grid (same tokens) */ .rows-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(36px, 5vw, 72px); } .rows-list .row-item { padding: 24px 0; border-bottom: 1px solid rgba(15, 27, 61, 0.10); } .rows-list .row-item:nth-last-child(-n+2) { border-bottom: none; } .rows-list .row-item h3 { font-size: 1.3rem; font-weight: 600; margin-bottom: 8px; } .rows-list .row-item p { color: var(--muted); font-size: 1rem; } @media (max-width: 720px) { .rows-list { grid-template-columns: 1fr; } .rows-list .row-item:nth-last-child(2) { border-bottom: 1px solid rgba(15, 27, 61, 0.10); } } /* Gallery (work page) */ .gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; } .gallery-item { border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card); position: relative; } /* height: auto releases the height="" presentational hint so aspect-ratio actually engages; without it the 873px-tall source forced a mismatched row and a dead white void under its neighbor (Wave 4 gut-test catch) */ .gallery-item img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 10; object-fit: cover; } .gallery-item figcaption { padding: 16px 20px; background: var(--surface); font-size: 0.92rem; color: var(--muted); border-top: 3px solid var(--accent); transition: color 0.3s var(--ease); } @media (max-width: 800px) { .gallery-grid { grid-template-columns: 1fr; } } /* Gallery carousel (operator: the stacked galleries made /work too vertical). Horizontal scroll-snap rail + overlay arrows on desktop; native swipe on touch. The lightbox still works - items stay .gallery-item. */ .gallery-carousel { position: relative; margin-top: clamp(20px, 3vw, 32px); } .gallery-carousel__rail { display: flex; gap: clamp(16px, 2vw, 24px); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scroll-padding-left: 2px; padding: 4px 2px 18px; scrollbar-width: thin; scrollbar-color: var(--accent) var(--surface-alt); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .gallery-carousel__rail::-webkit-scrollbar { height: 8px; } .gallery-carousel__rail::-webkit-scrollbar-track { background: var(--surface-alt); border-radius: 999px; } .gallery-carousel__rail::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 999px; } .gallery-carousel__rail .gallery-item { flex: 0 0 clamp(258px, 38vw, 420px); scroll-snap-align: start; margin: 0; } /* Carousel items scroll laterally, not on vertical reveal. Keep them visible so an off-screen item is never a focusable-but-invisible target (WCAG 2.4.7 Focus Visible) - the rail reveals as a unit via its section, not per item. */ html.js-motion .gallery-carousel__rail .gallery-item.reveal { opacity: 1; translate: none; } .gallery-carousel .carousel-btn { position: absolute; top: calc(50% - 40px); z-index: 4; width: 46px; height: 46px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(15,27,61,.08), 0 12px 28px rgba(15,27,61,.14); display: grid; place-items: center; cursor: pointer; color: var(--ink); transition: background 0.2s var(--ease), border-color 0.2s var(--ease), opacity 0.2s var(--ease); } .gallery-carousel .carousel-btn--prev { left: -10px; } .gallery-carousel .carousel-btn--next { right: -10px; } .gallery-carousel .carousel-btn svg { width: 20px; height: 20px; } @media (hover: hover) { .gallery-carousel .carousel-btn:hover:not(:disabled) { background: var(--surface-alt); border-color: var(--accent); } } .gallery-carousel .carousel-btn:disabled { opacity: 0; pointer-events: none; } @media (hover: none) { .gallery-carousel .carousel-btn { display: none; } } /* ---------- 4.6/4.7 framed-image treatment (visit / split / gallery frames) ---------- Soft accent-tinted outer glow + 1px inner hairline ring on every framed photo. Visit/split photos also get a gentle bottom fade that grounds them into the page. Heroes are NOT double-treated: the P-002 scrim is their bottom fade. */ .visit-media, .split-media { position: relative; } .visit-media, .split-media, .gallery-item { box-shadow: 0 2px 6px rgba(15, 27, 61, 0.05), 0 26px 52px -20px rgba(31, 61, 37, 0.24); } .visit-media::after, .split-media::after, .gallery-item::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(15, 27, 61, 0.10); } .visit-media::after, .split-media::after { background: linear-gradient(180deg, rgba(9, 20, 14, 0) 70%, rgba(9, 20, 14, 0.20) 100%); } /* 4.9 gallery hover: lift + gentle image zoom + caption emphasis. Lift rides `transform` (reveals own `translate`, per the Wave 3 contract); captions stay visible at rest because they carry the design-concept disclosure (§12c honesty), so emphasis is a color deepen, not a fade-in. */ .gallery-item { transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } .gallery-item img { transition: transform 0.5s var(--ease); } @media (hover: hover) { .gallery-item:hover { transform: translateY(-6px); box-shadow: 0 2px 6px rgba(15, 27, 61, 0.05), 0 32px 62px -20px rgba(31, 61, 37, 0.30); } .gallery-item:hover img { transform: scale(1.035); } .gallery-item:hover figcaption { color: var(--ink); } } /* Contact page: action-first layout */ .contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 4vw, 56px); align-items: start; } @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } } .contact-card { background: var(--surface); border: 1px solid rgba(15, 27, 61, 0.06); border-radius: 12px; box-shadow: var(--shadow-card); padding: 34px 30px; } .contact-card h2 { font-size: 1.5rem; margin-bottom: 18px; } .contact-rows { list-style: none; } .contact-rows li { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--line); } .contact-rows li:last-child { border-bottom: 0; } .contact-rows .cr-ico { width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0; background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent); display: flex; align-items: center; justify-content: center; } .contact-rows b { display: block; font-size: 0.96rem; } .contact-rows span, .contact-rows a { font-size: 0.92rem; color: var(--muted); text-decoration: none; } @media (hover: hover) { .contact-rows a:hover { color: var(--accent); } } .map-embed { border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card); } .map-embed iframe { display: block; width: 100%; height: 320px; border: 0; } /* Form (§9c compliant) */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-grid .full { grid-column: 1 / -1; } @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } } .field label { display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 6px; color: var(--ink); } .field input, .field textarea { width: 100%; padding: 13px 14px; font-size: 16px; font-family: var(--font-body); border: 1.5px solid rgba(15, 27, 61, 0.18); border-radius: var(--radius); background: #FFFFFF; color: var(--ink); } .field input:focus, .field textarea:focus { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); border-color: var(--accent); } .field textarea { min-height: 130px; resize: vertical; } .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-success { display: none; background: color-mix(in srgb, var(--accent) 10%, #fff); border: 1.5px solid var(--accent); border-radius: var(--radius); padding: 18px 20px; color: var(--accent-deep); font-weight: 600; } .form-success.show { display: block; } /* Wave 7 (7.1): form card gradient top accent bar + expectation-setter block */ .contact-card--form { position: relative; overflow: hidden; } .contact-card--form::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--accent-deep) 0%, var(--accent) 45%, #CDE3CF 100%); } .form-expect { list-style: none; margin: 0 0 22px; padding: 0 0 18px; border-bottom: 1px solid var(--line); } .form-expect li { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-size: 0.95rem; padding: 3px 0; } .form-expect li::before { content: ""; flex-shrink: 0; width: 14px; height: 2px; border-radius: 1px; background: var(--accent); margin-top: 0.6em; } /* Full-width CTA band (interior closer, lighter than homepage closer) */ .cta-band { background: radial-gradient(110% 160% at 12% -10%, rgba(255, 248, 226, 0.16) 0%, rgba(255, 248, 226, 0) 48%), radial-gradient(70% 120% at 82% 10%, rgba(217, 164, 65, 0.13) 0%, rgba(217, 164, 65, 0) 55%), radial-gradient(90% 150% at 92% 115%, rgba(9, 24, 13, 0.6) 0%, rgba(9, 24, 13, 0) 55%), linear-gradient(140deg, #376440 0%, var(--accent) 46%, #1E3B24 100%); color: #FFFFFF; border-radius: 16px; padding: clamp(40px, 5vw, 64px); display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; } .cta-band h2 { color: #FFFFFF; font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 8px; max-width: 560px; } .cta-band p { color: rgba(255, 255, 255, 0.82); max-width: 520px; } /* Wave 7 (7.4): trust microline under the band button */ .cta-band-action { display: flex; flex-direction: column; align-items: flex-start; } .cta-band .cta-microline { color: rgba(255, 255, 255, 0.75); margin-top: 10px; max-width: none; } /* Wave 7 gut-test: in-copy links on the dark band were global accent green (illegible on green). Light tint + underline, hover to white. */ .cta-band p a { color: #CDE3CF; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } @media (hover: hover) { .cta-band p a:hover { color: #FFFFFF; } } /* ---------- Motion system (exemplar-inspired: load-in fade + scroll reveals) ---------- Contract: hidden start-states live ONLY behind html.js-motion (added by JS), so no-JS shows everything. Reduced-motion resolves to final state instantly. */ /* Reveals ride the separate `translate` property so `transform` stays free for hover lifts (.card/.doorway); a transform here would out-specificity them and silently kill the lift. Hover-relevant properties join the transition list (undelayed) because this rule owns the element's list. */ html.js-motion .reveal { opacity: 0; translate: 0 16px; transition: opacity 0.55s var(--ease) var(--d, 0s), translate 0.55s var(--ease) var(--d, 0s), transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } html.js-motion .reveal.is-visible { opacity: 1; translate: none; } /* Wave 18: showpiece fade+rise - a deeper, blur-resolving rise for the few headline moments (editorial display, section-lead H2s, collage head). Rides translate + filter so it never collides with hover transforms (Wave 3 contract). Blur is cheap here because it's on a handful of elements, not every reveal. */ html.js-motion .reveal-lg { opacity: 0; translate: 0 34px; filter: blur(7px); transition: opacity 0.8s var(--ease) var(--d, 0s), translate 0.8s var(--ease) var(--d, 0s), filter 0.8s var(--ease) var(--d, 0s), transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } html.js-motion .reveal-lg.is-visible { opacity: 1; translate: none; filter: none; } /* Cinematic staggered hero reveal (homepage; Air Lion-calibrated, ≤1.8s total) */ html.js-motion .hero-reveal { opacity: 0; animation: lc-hero-resolve 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both; } html.js-motion .hero-reveal[data-delay="1"] { animation-delay: 0.15s; } html.js-motion .hero-reveal[data-delay="2"] { animation-delay: 0.4s; } html.js-motion .hero-reveal[data-delay="3"] { animation-delay: 0.65s; } html.js-motion .hero-reveal[data-delay="4"] { animation-delay: 0.9s; } html.js-motion .hero-reveal[data-delay="5"] { animation-delay: 1.1s; } @keyframes lc-hero-resolve { from { opacity: 0; filter: blur(10px); transform: scale(0.986); } to { opacity: 1; filter: blur(0); transform: none; } } /* Interior page-heroes keep the single gentle load-in */ html.js-motion .page-hero .hero-content { animation: lc-load-in 0.7s var(--ease) 0.1s both; } @keyframes lc-load-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* Hero scroll cue (Cedar-style vertical text + line) */ .scroll-cue { position: absolute; right: 40px; bottom: 44px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 12px; color: rgba(255, 255, 255, 0.85); font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; writing-mode: vertical-rl; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); } .scroll-cue::after { content: ""; width: 1px; height: 56px; background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0)); animation: lc-cue 2.4s var(--ease) infinite; } @keyframes lc-cue { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } @media (max-width: 920px) { .scroll-cue { display: none; } } /* ---------- Wave 8: flourish + per-page delights ---------- */ /* 8.2: handwritten aside. Brand flourish line only; never a person's signature. */ .script-flourish { font-family: 'Caveat', cursive; font-size: 1.75rem; font-weight: 600; line-height: 1.2; color: var(--accent-deep); rotate: -1.5deg; width: fit-content; margin: 4px 0 26px; } /* 8.3: family marks on the lead section eyebrow (plant pages = leaf, place pages = pin) */ .section-eyebrow--leaf::before, .section-eyebrow--pin::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 7px; vertical-align: -2.5px; opacity: 0.85; background-repeat: no-repeat; background-size: contain; } .section-eyebrow--leaf::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E5736' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%3E%3C/svg%3E"); } .section-eyebrow--pin::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E5736' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); } /* 8.3: one polaroid-tilt gallery item on /work; picks itself up straight on hover */ .gallery-item--tilt { rotate: -1.4deg; } @media (hover: hover) { .gallery-item--tilt { transition: rotate 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } .gallery-item--tilt:hover { rotate: 0deg; } } /* Wave 13 (13.4): text-link hover colors join the shared ease family. Nav links already eased at 0.2s; footer/breadcrumb/contact/band links snapped. Transition lives on the base selector (eases in AND out); no new :hover rules (§7c). */ .site-footer a, .footer-legal .lc-attr a, .breadcrumbs a, .contact-rows a, .cta-band p a { transition: color 0.2s var(--ease); } /* ---------- Wave 18: editorial imagery ("take it to 11") ---------- Real customer photos (Tier 0, harvested from the client's Facebook/Instagram) in magazine moves adapted from the cedarsprings.net exemplar: a full-bleed band with oversize lowercase display type overlapping the photo edge, an offset collage over an ink panel, photo-topped service cards. Motion stays inside the ceiling: one-shot IO reveals on `translate`/`clip-path`, native scroll. */ /* A · Full-bleed editorial band */ .edit-band { position: relative; background: var(--ink); color: #FFFFFF; overflow: clip; } .edit-band .band-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: min(84vh, 720px); } .band-media { position: relative; overflow: hidden; } .band-media img { width: 100%; height: 100%; object-fit: cover; } .band-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(56px, 8vw, 116px) max(28px, calc((100vw - 1160px) / 2)) clamp(56px, 8vw, 116px) clamp(20px, 3vw, 48px); } .band-kicker { font-size: 0.9rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-bright); margin-bottom: 18px; } .band-display { font-family: var(--font-heading); font-weight: 500; text-transform: lowercase; font-size: clamp(2.5rem, 5.4vw, 4.4rem); line-height: 1.05; letter-spacing: -0.01em; color: #FFFFFF; margin: 0 0 24px; /* Cedar centerfold move: the headline rides out over the photo edge */ margin-left: clamp(-200px, -11vw, -48px); position: relative; z-index: 2; text-shadow: 0 2px 26px rgba(15, 27, 61, 0.6), 0 1px 8px rgba(15, 27, 61, 0.45); text-wrap: balance; } .band-display .gold-ital { font-style: italic; background: linear-gradient(96deg, #E4B85E 0%, var(--gold-bright) 42%, #EFCE7C 78%, #F2D389 100%); -webkit-background-clip: text; background-clip: text; color: transparent; /* the white line rides the photo (legible with its shadow on any texture); the gold line steps back onto flat navy, where gold always wins - the stagger cancels the h2's negative pull for this line only */ display: block; margin-left: clamp(48px, 11vw, 200px); } .band-copy .lede { color: rgba(255, 255, 255, 0.84); max-width: 46ch; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.7; } .band-copy .link-arrow { margin-top: 28px; } @media (max-width: 900px) { .edit-band .band-grid { grid-template-columns: 1fr; min-height: 0; } .band-media { aspect-ratio: 4 / 3; } .band-copy { padding: 40px max(20px, calc((100vw - 1160px) / 2)) 52px; } .band-display { margin-left: 0; font-size: clamp(2.3rem, 9vw, 3.2rem); text-shadow: none; } .band-display .gold-ital { margin-left: 0; } } /* B · Pinned photo gallery - sticky caption + scrolling photo track (Wave 18). Delivers pinned-layer depth (C) + parallax drift (D) honestly: the caption holds while the real-work photos slide up past it, magazine-centerfold style. Sticky lives OUTSIDE any overflow:clip ancestor (the section doesn't clip), so it actually pins - and it's gated to desktop + no-reduced-motion below. */ .collage-pin { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 44px); margin-top: clamp(24px, 3vw, 40px); } .collage-pin__aside .lede { margin-bottom: 22px; } .collage-pin__track { display: flex; flex-direction: column; gap: clamp(22px, 3.2vw, 40px); } .cg { position: relative; overflow: hidden; margin: 0; border-radius: calc(var(--radius) + 6px); box-shadow: 0 6px 18px rgba(15, 27, 61, 0.14), 0 22px 48px rgba(15, 27, 61, 0.16); } .cg img { width: 100%; height: 100%; object-fit: cover; } .collage-pin__track .cg { aspect-ratio: 3 / 2; } .cg figcaption { position: absolute; left: 12px; bottom: 12px; z-index: 2; background: rgba(15, 27, 61, 0.72); color: #FFFFFF; font-size: 0.82rem; letter-spacing: 0.02em; line-height: 1.35; padding: 6px 13px; border-radius: 999px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } @media (min-width: 900px) { .collage-pin { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(40px, 5vw, 78px); align-items: start; } .collage-pin__track { gap: clamp(44px, 5vw, 76px); } .collage-pin__track .cg:nth-child(1) { aspect-ratio: 16 / 10; } .collage-pin__track .cg:nth-child(2) { aspect-ratio: 5 / 4; margin-left: clamp(28px, 6vw, 92px); } .collage-pin__track .cg:nth-child(3) { aspect-ratio: 16 / 10; margin-right: clamp(20px, 3vw, 56px); } /* The offset middle photo is inset from the left, so its bottom-left tag sat mid-layout and crowded the photo below. Pin its caption to the RIGHT edge (operator note) - reads as an editorial alternation down the track. */ .collage-pin__track .cg:nth-child(2) figcaption { left: auto; right: 12px; } /* THE PIN (C): caption holds while the photo track scrolls past it. Sticky is NOT an animation, so the universal reduced-motion reset can't disable it - it needs its own no-preference guard (critic's catch). */ @media (prefers-reduced-motion: no-preference) { .collage-pin__aside { position: sticky; top: calc(var(--nav-h) + 56px); align-self: start; } } } @media (max-width: 560px) { .cg figcaption { position: static; display: inline-block; margin: 8px 0 0; background: none; color: var(--muted); padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; } .collage-pin__track .cg { overflow: visible; aspect-ratio: auto; } .collage-pin__track .cg img { border-radius: calc(var(--radius) + 6px); } } /* C · Photo-topped service cards (replaces flat icon cards on the homepage) */ .card-photo { padding: 0; } .card-photo .card-img { aspect-ratio: 16 / 10; overflow: hidden; border-radius: calc(var(--radius) + 5px) calc(var(--radius) + 5px) 0 0; } .card-photo .card-img img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.6s var(--ease); } @media (hover: hover) { .card-photo:hover .card-img img { scale: 1.06; } } .card-photo .card-body { padding: 20px 26px 26px; display: flex; flex-direction: column; align-items: flex-start; } .card-photo .card-body h3 { margin-top: 0; } /* D · Doorway photo headers */ .doorway-img { align-self: stretch; margin: calc(clamp(30px, 4vw, 46px) * -1) calc(clamp(30px, 4vw, 46px) * -1) 24px; aspect-ratio: 16 / 7; overflow: hidden; position: relative; z-index: 0; } .doorway-img img { width: 100%; height: 100%; object-fit: cover; } .doorway::before { z-index: 1; } /* D2 · Two-up photo strip (About story) */ .photo-duo { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(16px, 2.4vw, 26px); margin: clamp(28px, 4vw, 44px) 0 clamp(10px, 2vw, 18px); } .photo-duo .cg { aspect-ratio: 4 / 3; } .photo-duo .cg + .cg { aspect-ratio: auto; } @media (max-width: 700px) { .photo-duo { grid-template-columns: 1fr; } .photo-duo .cg + .cg { aspect-ratio: 4 / 3; } } /* E · Visit media caption chip */ .visit-media { position: relative; } .visit-media figcaption { position: absolute; left: 14px; bottom: 14px; background: rgba(15, 27, 61, 0.72); color: #FFFFFF; font-size: 0.85rem; letter-spacing: 0.02em; padding: 7px 14px; border-radius: 999px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* F · Clip reveal (edit-band photo + collage). Rides clip-path so it can't collide with hover transforms or the translate reveals. One-shot via the same .reveal IO; .reveal-clip overrides the hidden state. */ html.js-motion .reveal.reveal-clip { opacity: 1; translate: none; clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease) var(--d, 0s); } html.js-motion .reveal.reveal-clip--r { clip-path: inset(0 0 0 100%); } html.js-motion .reveal.reveal-clip.is-visible { clip-path: inset(0 0 0 0); } /* F · Spec-panel reveal on service cards (Wave 18) - honest per-card facts, ALWAYS in the DOM. Overlaid on the photo bottom so revealing it never reflows the card row. On hover-capable pointers it slides up on hover/focus-within; on touch it's a static always-visible strip; under reduced-motion it's static with no transition. Rides its own translateY - different element from the card lift (transform on .card) and the img zoom (scale), so no contract collision. */ .card-photo .card-img { position: relative; } .card-spec-wrap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 30px 16px 14px; background: linear-gradient(0deg, rgba(15,27,61,0.9) 0%, rgba(15,27,61,0.66) 55%, rgba(15,27,61,0) 100%); } .card-spec { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 7px; } .card-spec li { font-size: 0.76rem; line-height: 1.35; color: #FFFFFF; white-space: nowrap; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.32); border-radius: 999px; padding: 3px 10px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } @media (hover: hover) { .card-photo .card-spec-wrap { transform: translateY(101%); opacity: 0; transition: transform 0.42s var(--ease), opacity 0.34s var(--ease); } .card-photo:hover .card-spec-wrap, .card-photo:focus-within .card-spec-wrap { transform: translateY(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .card-photo .card-spec-wrap { transition: none; } } /* ---------- Wave 18: scroll-driven depth (progressive enhancement) ---------- Layered ONLY where animation-timeline is supported AND motion is allowed. The static base above is complete on its own, so Firefox / older Safari / reduced- motion all render a finished page. Native scroll-driven = compositor-run, no JS scroll listeners; stays in sync with the light Lenis (real document scroll). */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { /* E · Immersive hero - parallax the hero CONTENT (never the LCP image) on EXIT only, so nothing animates during the paint-critical first frame. As the hero scrolls away, the headline drifts up and fades, deepening the recede. The .hero section box is untouched, so the callbar/header IO that keys off .hero is unaffected. */ .hero .hero-content { animation: lc-hero-exit linear both; animation-timeline: view(); animation-range: exit -5% exit 96%; } @keyframes lc-hero-exit { to { translate: 0 -42px; opacity: 0.6; } } /* D · Parallax drift on the editorial-band maples (the primary image moment), desktop only. Oversized 114% inside the band's overflow:hidden frame. The img is TOP-ANCHORED, so all 14% of overscan sits below the frame - the drift must stay NEGATIVE (pan up into the bottom slack). A positive end would pull the top edge below y=0 and expose the navy behind it (verify pass caught this). -2%..-10% of 1.14H = 0.114H max, inside the 0.14H bottom slack. Rides `translate` and composes with the clip-path wipe on the wrapper (different element). */ @media (min-width: 900px) { .band-media img { height: 114%; animation: lc-band-drift linear both; animation-timeline: view(); animation-range: cover; } @keyframes lc-band-drift { from { translate: 0 -2%; } to { translate: 0 -10%; } } } /* D · Whisper of drift on the two SECONDARY gallery photos only (never the anchor, per the critic). Individual `translate` composes BEFORE `scale`, so the ±11px is scaled ×1.12 (~12.3px effective); scale 1.12 gives 6% per-side slack (~16px at the shortest ~279px photo near the 901px gate), covering it with margin. Gated min-width:901px - above the 560px overflow:visible rule. */ @media (min-width: 901px) { .collage-pin__track .cg:nth-child(2) img, .collage-pin__track .cg:nth-child(3) img { scale: 1.12; animation: lc-cg-drift linear both; animation-timeline: view(); animation-range: cover; } @keyframes lc-cg-drift { from { translate: 0 -11px; } to { translate: 0 11px; } } } /* E (interior) · Bring the homepage hero recede to every interior page-hero: keep the load-in (auto timeline) AND add the exit-parallax (view timeline) as a second animation. LCP image untouched - only the content drifts. */ html.js-motion .page-hero .hero-content { animation: lc-load-in 0.7s var(--ease) 0.1s both, lc-hero-exit-move linear both; animation-timeline: auto, view(); animation-range: normal, exit -5% exit 96%; } /* translate-only exit so it never touches `opacity` and mask lc-load-in's 0→1 fade (the exit animation is later in the list and would win opacity). */ @keyframes lc-hero-exit-move { to { translate: 0 -42px; } } /* D (interior) · Parallax drift on interior feature images (design/build split photos), the same move as the editorial band. scale gives crop slack so the aspect-ratio layout height is untouched; ±14px ×1.1 stays inside it. Non-LCP. */ @media (min-width: 900px) { .split-media img { scale: 1.14; animation: lc-feature-drift linear both; animation-timeline: view(); animation-range: cover; } @keyframes lc-feature-drift { from { translate: 0 -14px; } to { translate: 0 14px; } } } } } /* ---------- Reduced motion (§7c #10) ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } .callbar { transition: none; } html.js-motion .reveal { opacity: 1 !important; translate: none !important; } html.js-motion .reveal-lg { filter: none !important; } html.js-motion .reveal.reveal-clip { clip-path: none !important; } html.js-motion .hero-content { opacity: 1; transform: none; } .scroll-cue::after { animation: none; } } /* ---------- Wave 11: resilience + a11y baseline ---------- */ /* 11.2 skip link: first tab stop on every page; off-screen until keyboard focus */ .skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; background: var(--surface); color: var(--accent-deep); font-weight: 700; font-size: 0.95rem; text-decoration: none; padding: 13px 22px; min-height: 44px; border-radius: var(--radius); box-shadow: 0 10px 30px rgba(15, 27, 61, 0.22); display: inline-flex; align-items: center; } .skip-link:focus { top: 12px; } /* the skip target is a landmark, not a control; no ring on programmatic focus */ main:focus-visible { outline: none; } /* 11.1 no-JS form fallback note (rendered from