/* ================================================================= BREAKPOINTS REFERENCE ================================================================= Mobile: 768px (max-width: 768px for mobile, min-width: 769px for desktop) Tablet: 1024px (for intermediate layouts where needed) Desktop: 1280px (for wide/container layouts where needed) These values are hardcoded in @media queries throughout this file and in footer.php / custom.js. Update all locations if changed. ================================================================= */ /** * D20 Starter Theme * * Fonts | Tokens | Base | Components */ /* ================================================================= FONTS ================================================================= */ /* Manrope - body / UI */ @font-face { font-family: 'Manrope'; src: url('../fonts/Manrope-ExtraLight.woff2') format('woff2'), url('../fonts/Manrope-ExtraLight.woff') format('woff'); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: 'Manrope'; src: url('../fonts/Manrope-Light.woff2') format('woff2'), url('../fonts/Manrope-Light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Manrope'; src: url('../fonts/Manrope-Regular.woff2') format('woff2'), url('../fonts/Manrope-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Manrope'; src: url('../fonts/Manrope-Medium.woff2') format('woff2'), url('../fonts/Manrope-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Manrope'; src: url('../fonts/Manrope-SemiBold.woff2') format('woff2'), url('../fonts/Manrope-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Manrope'; src: url('../fonts/Manrope-Bold.woff2') format('woff2'), url('../fonts/Manrope-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Manrope'; src: url('../fonts/Manrope-ExtraBold.woff2') format('woff2'), url('../fonts/Manrope-ExtraBold.woff') format('woff'); font-weight: 800; font-style: normal; font-display: swap; } /* Barlow Condensed - display / headings */ @font-face { font-family: 'Barlow Condensed'; src: url('../fonts/BarlowCondensed-Medium.woff2') format('woff2'), url('../fonts/BarlowCondensed-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Barlow Condensed'; src: url('../fonts/BarlowCondensed-ExtraBold.woff2') format('woff2'), url('../fonts/BarlowCondensed-ExtraBold.woff') format('woff'); font-weight: 800; font-style: normal; font-display: swap; } /* Covered By Your Grace - handwritten accent */ @font-face { font-family: 'Covered By Your Grace'; src: url('../fonts/CoveredByYourGrace-Regular.woff2') format('woff2'), url('../fonts/CoveredByYourGrace-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } /* ================================================================= TOKENS ================================================================= */ :root { /* Primary - navy blue */ --color-primary-50: #f2f4f8; --color-primary-100: #dce2ee; --color-primary-200: #b3c3dd; --color-primary-300: #7a96c5; --color-primary-400: #4a6eaf; --color-primary-500: #3770c1; --color-primary-600: #2860a8; --color-primary-700: #113870; --color-primary-800: #0d2d5a; --color-primary-900: #082040; /* Secondary - amber / CTA orange */ --color-secondary-50: #fff8ec; --color-secondary-100: #feecc8; --color-secondary-200: #fdd58e; --color-secondary-300: #fbbf54; --color-secondary-400: #f9a730; --color-secondary-500: #f68713; --color-secondary-600: #d46c0a; --color-secondary-700: #b15708; --color-secondary-800: #8e4506; --color-secondary-900: #6b3404; /* Accent - kept for legacy compatibility */ --color-accent-50: #fff3ee; --color-accent-100: #ffe1d4; --color-accent-200: #ffbfa3; --color-accent-300: #ff9b73; --color-accent-400: #fc7d4f; --color-accent-500: #f25d2d; --color-accent-600: #d04920; --color-accent-700: #a83617; /* Neutral - warm sand-tinted */ --color-neutral-50: #f8f7f4; --color-neutral-100: #f1efe9; --color-neutral-200: #e4e1d8; --color-neutral-300: #cfcbbf; --color-neutral-400: #9d988b; --color-neutral-500: #6f6a5f; --color-neutral-600: #4d4940; --color-neutral-700: #34322c; --color-neutral-800: #1f1d19; --color-neutral-900: #141516; /* Error color scale */ --color-error-50: #fef2f2; --color-error-100: #fee2e2; --color-error-200: #fecaca; --color-error-300: #fca5a5; --color-error-400: #f87171; --color-error-500: #ef4444; --color-error-600: #dc2626; --color-error-700: #b91c1c; --color-error-800: #991b1b; --color-error-900: #7f1d1d; /* Brand aliases */ --color-brand: var(--color-primary-700); --color-brand-dark: var(--color-primary-800); --color-brand-light: var(--color-primary-100); --color-brand-accent: var(--color-secondary-500); /* Layout aliases */ --color-bg-light: #fff9f3; --color-bg-warm: #fff9f3; --color-bg-dark: var(--color-primary-800); --color-bg-footer: #060b13; --color-text: var(--color-neutral-900); --color-text-muted: var(--color-neutral-600); --color-text-on-dark: #ffffff; /* Typography */ --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-heading: 'Barlow Condensed', 'Manrope', system-ui, sans-serif; --font-script: 'Covered By Your Grace', 'Manrope', cursive; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); --text-3xl: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem); --text-4xl: clamp(2.5rem, 1.75rem + 2.5vw, 3.5rem); --text-5xl: clamp(3rem, 2rem + 3.5vw, 4.75rem); --text-6xl: clamp(3.5rem, 2.25rem + 4vw, 5.5rem); --leading-tight: 1.05; --leading-snug: 1.2; --leading-normal: 1.55; --leading-relaxed: 1.7; --tracking-tight: -0.01em; --tracking-wide: 0.04em; /* Spacing */ --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4.5rem; --space-4xl: 8.75rem; /* Layout */ --container-max: calc(1490px + (2 * var(--gutter))); --gutter: clamp(1.25rem, 0.5rem + 2.5vw, 2.5rem); /* Misc */ --radius-sm: 0.375rem; --radius: 0.625rem; --radius-lg: 1rem; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(13, 66, 84, 0.08); --shadow: 0 6px 18px -6px rgba(13, 66, 84, 0.18); --shadow-lg: 0 18px 40px -10px rgba(13, 66, 84, 0.22); --shadow-brand: 0 12px 28px -8px rgba(22, 116, 135, 0.45); --transition: 200ms ease; --transition-slow: 350ms cubic-bezier(.2,.7,.3,1); } @media (max-width: 1024px) { :root { --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.5rem; --text-5xl: 3.25rem; --text-6xl: 3.75rem; --space-3xl: 3.5rem; --space-4xl: 4.5rem; } } @media (max-width: 767px) { :root { --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 2.5rem; --text-6xl: 3rem; --space-2xl: 2.25rem; --space-3xl: 3rem; --space-4xl: 3.5rem; } } /* ================================================================= BASE ================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text); background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, video { max-width: 100%; height: auto; display: block; } /* Animate on scroll */ .animate-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); } /* Never hide hero/parallax via scroll animation — boy is exempt so JS can fade it */ .c-hero, .c-hero *:not(.c-hero__boy), .c-hero__parallax, .c-hero__overlay, .c-hero__inner, .c-hero__content, .c-hero__video, .c-accordion__panel, .c-accordion__panel * { opacity: 1 !important; } .c-hero__parallax.animate-on-scroll, .c-accordion__panel .animate-on-scroll, .c-accordion__panel * { transform: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { .animate-on-scroll { opacity: 1; transform: none; transition: none; } } /* Background image utility for components */ [class*="--bg-image"] { position: relative; background: var(--color-bg-dark) center/cover no-repeat; color: #fff; } [class*="--bg-image"] .eyebrow { color: var(--color-brand-light); } [class*="--bg-image"] > .container, [class*="--bg-image"] > [class*="__inner"] { position: relative; z-index: 1; } [class*="__overlay"] { position: absolute; inset: 0; } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-md); font-family: var(--font-heading); font-weight: 800; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: inherit; text-transform: none; } body { color: var(--color-text); } section, article { color: inherit; } [class*="--bg-white"] { color: var(--color-text); } [class*="--bg-light"] { color: var(--color-text); } [class*="--bg-white"] h1, [class*="--bg-white"] h2, [class*="--bg-white"] h3, [class*="--bg-white"] h4, [class*="--bg-white"] h5, [class*="--bg-white"] h6, [class*="--bg-light"] h1, [class*="--bg-light"] h2, [class*="--bg-light"] h3, [class*="--bg-light"] h4, [class*="--bg-light"] h5, [class*="--bg-light"] h6 { color: var(--color-primary-900); } [class*="--bg-dark"] h1, [class*="--bg-dark"] h2, [class*="--bg-dark"] h3, [class*="--bg-dark"] h4, [class*="--bg-dark"] h5, [class*="--bg-dark"] h6, [class*="--bg-brand"] h1, [class*="--bg-brand"] h2, [class*="--bg-brand"] h3, [class*="--bg-brand"] h4, [class*="--bg-brand"] h5, [class*="--bg-brand"] h6, [class*="--bg-image"] h1, [class*="--bg-image"] h2, [class*="--bg-image"] h3, [class*="--bg-image"] h4, [class*="--bg-image"] h5, [class*="--bg-image"] h6, .c-hero h1, .c-hero h2, .c-hero h3, .c-hero h4, .c-hero h5, .c-hero h6, .site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5, .site-footer h6 { color: #fff; } /* Minimal hero is on light bg */ .c-hero--minimal h1, .c-hero--minimal h2, .c-hero--minimal h3 { color: var(--color-primary-900); } p { margin: 0 0 var(--space-md); } p:last-child { margin-bottom: 0; } a { color: var(--color-brand); } /* ================================================================= ACCESSIBILITY ================================================================= */ /* Skip link */ .skip-link { position: absolute; left: -9999px; top: var(--space-sm); background: var(--color-brand); color: #fff; padding: var(--space-sm) var(--space-md); border-radius: var(--radius); font-weight: 600; text-decoration: none; z-index: 9999; } .skip-link:focus { left: var(--space-sm); outline: 2px solid var(--color-brand-dark); outline-offset: 2px; } /* Screen reader only (visually hidden) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Focus visible states */ :focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } /* Focus on dark backgrounds */ [class*="--bg-dark"] :focus-visible, [class*="--bg-brand"] :focus-visible, [class*="--bg-image"] :focus-visible, .site-footer :focus-visible { outline-color: #fff; } /* Minimum tap target size */ button, .btn, input[type="submit"], input[type="button"], a.btn { min-height: 44px; } /* Text overflow handling */ h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; word-break: normal; hyphens: none; } h1 { font-size: var(--text-6xl); line-height: 1; } h2 { font-size: var(--text-5xl); line-height: 1.02; } h3 { font-size: var(--text-3xl); line-height: 1.1; } h4 { font-size: var(--text-2xl); line-height: 1.15; } h5 { font-size: var(--text-xl); line-height: 1.2; } h6 { font-size: var(--text-lg); line-height: 1.25; } p { margin: 0 0 var(--space-lg); } p:last-child { margin-bottom: 0; } /* Prevent iOS text resize issues */ html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Keep elements visible without animation */ .animate-on-scroll { opacity: 1 !important; transform: none !important; } } /* Container */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); } .container--narrow { max-width: 720px; } .container--wide { max-width: 1400px; } /* Prose (WYSIWYG content) */ /* .prose h2 { font-size: var(--text-2xl); margin-top: var(--space-xl); } */ /* .prose h3 { font-size: var(--text-xl); margin-top: var(--space-lg); } */ .prose ul, .prose ol { padding-left: 0; margin: var(--space-md) 0 var(--space-lg); list-style: none; } .prose ul li, .prose ol li { position: relative; padding-left: 2rem; margin-bottom: var(--space-sm); /* line-height: var(--leading-snug); */ line-height: var(--leading-relaxed); } .prose ul li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 14px; height: 14px; border-radius: 50%; background: var(--color-secondary-100); border: 2px solid var(--color-brand); } .prose ul li::after { content: ''; position: absolute; left: 4px; top: 0.75em; width: 6px; height: 3px; border-left: 2px solid var(--color-brand-dark); border-bottom: 2px solid var(--color-brand-dark); transform: rotate(-45deg); } .prose ol { counter-reset: prose-counter; } .prose ol li::before { counter-increment: prose-counter; content: counter(prose-counter); position: absolute; left: 0; top: 0.15em; width: 24px; height: 24px; border-radius: 50%; background: var(--color-brand); color: #fff; font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .prose a { color: var(--color-brand); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--transition); } .prose a:hover { color: var(--color-brand-dark); } .prose strong { color: var(--color-primary-900); } /* Links inside a prose

get an inline orange-angle arrow and no underline, to act as section sub-headers that also link out. */ .prose h3 a { display: inline-flex; align-items: center; gap: 0.35em; text-decoration: none; color: inherit; transition: color var(--transition); } .prose h3 a::after { content: ''; flex-shrink: 0; display: inline-block; width: 0.6em; height: 0.85em; background: url('/wp-content/uploads/orange-angle.svg') center/contain no-repeat; transition: transform var(--transition); } .prose h3 a:hover, .prose h3 a:focus-visible { color: var(--color-brand); } .prose h3 a:hover::after, .prose h3 a:focus-visible::after { transform: translateX(3px); } /* Eyebrow / Subhead */ .eyebrow { display: inline-flex; align-items: center; gap: 0.6em; margin-bottom: var(--space-sm); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-secondary-600); } .eyebrow::before { content: ''; display: inline-block; width: 28px; height: 2px; background: currentColor; opacity: 0.7; } [class*="--bg-dark"] .eyebrow, [class*="--bg-brand"] .eyebrow, [class*="--bg-image"] .eyebrow, .site-footer .eyebrow { color: var(--color-secondary-300); } .subhead { font-size: var(--text-lg); color: var(--color-text-muted); line-height: var(--leading-relaxed); } /* Script accent */ .script { font-family: var(--font-script); font-weight: 400; letter-spacing: 0.01em; } /* Buttons */ .btn { display: inline-flex; align-items: center; text-align:center; justify-content: center; gap: var(--space-xs); padding: 0.5rem 2rem; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; text-transform: uppercase; text-decoration: none; border-radius: var(--radius); border: 2px solid transparent; cursor: pointer; transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition); will-change: transform; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn--primary { background: var(--color-primary-500); color: #fff; border-color: var(--color-primary-500); /* box-shadow: var(--shadow-brand); */ } .btn--primary:hover { background: var(--color-primary-700); border-color: var(--color-primary-700); } .btn--secondary { background: transparent; color: var(--color-brand); border-color: var(--color-brand); } .btn--secondary:hover { background: var(--color-brand); color: #fff; } /* When a secondary button sits inside a component using an image background, swap the brand outline for white so it stays readable on imagery. */ [class*="--bg-image"] .btn--secondary { color: #fff; border-color: #fff; } [class*="--bg-image"] .btn--secondary:hover, [class*="--bg-image"] .btn--secondary:focus-visible { background: rgba(255, 255, 255, 0.15); color: #fff; border-color: #fff; } .btn--accent { background: var(--color-brand-accent); color: #fff; border-color: var(--color-brand-accent); /* box-shadow: 0 12px 28px -8px rgba(242, 93, 45, 0.45); */ } .btn--accent:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); } .btn--white { background: #fff; color: var(--color-brand-dark); border-color: #fff; } .btn--white:hover { background: var(--color-secondary-50); color: var(--color-brand-dark); } .btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); } .btn--outline-light:hover { background: rgba(255,255,255,0.12); border-color: #fff; } .btn--ghost { background: transparent; color: var(--color-brand-dark); border-color: transparent; padding-left: 0.5em; padding-right: 0.5em; } .btn--ghost:hover { color: var(--color-brand); } .link-arrow { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 700; color: var(--color-brand); text-decoration: none; letter-spacing: 0.01em; } .link-arrow svg { width: 1em; height: 1em; transition: transform var(--transition); } .link-arrow:hover svg { transform: translateX(4px); } /* Icons */ svg { width: 24px; height: 24px; flex-shrink: 0; } /* ================================================================= HEADER ================================================================= */ .site-header { position: sticky; top: 0; z-index: 100; background: #fff; transition: box-shadow var(--transition), background-color var(--transition); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 160px; gap: var(--space-lg); max-width:100vw; max-width:100svw; transition: height var(--transition); } .site-header__logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--color-primary-900); font-family: var(--font-heading); font-weight: 800; font-size: var(--text-xl); letter-spacing: var(--tracking-tight); } .site-header__logo img { height: 99px; width: auto; transition: height var(--transition); } /* Scrolled state - always dark navy */ body.scrolled .site-header { background: var(--color-primary-700); border-bottom-color: transparent; box-shadow: 0 6px 32px -8px rgba(5, 15, 40, 0.5); } body.scrolled .site-header__inner { height: 88px; } body.scrolled .site-header__logo img { height: 72px; } body.scrolled .site-nav__menu > li > a { color: rgba(255, 255, 255, 0.85); } body.scrolled .site-nav__menu > li > a:hover, body.scrolled .site-nav__menu > li.current-menu-item > a, body.scrolled .site-nav__menu > li.current-menu-ancestor > a { color: #fff; } body.scrolled .site-nav__phone { color: rgba(255, 255, 255, 0.85); } body.scrolled .site-header__toggle span, body.scrolled .site-header__toggle::before, body.scrolled .site-header__toggle::after { background: #fff; } .site-header__toggle[aria-expanded="true"]:before, .site-header__toggle[aria-expanded="true"]:after{ background:var(--color-brand)!important; } .site-header__toggle { display: flex; flex-direction: column; gap: 5px; padding: var(--space-sm); background: none; border: none; cursor: pointer; } .site-header__toggle span, .site-header__toggle::before, .site-header__toggle::after { content: ''; display: block; width: 24px; height: 2px; background: var(--color-neutral-900); transition: var(--transition); } .site-header__toggle[aria-expanded="true"] { top: 2rem; right: 2rem; padding-right:0; z-index: 9999; position:fixed; } .site-header__toggle[aria-expanded="true"] span { opacity: 0; transform: scaleX(0); } .site-header__toggle[aria-expanded="true"]::before, .site-header__toggle[aria-expanded="true"]::after{ width:32px; /* background-color:var(--primary-500); */ } .site-header__toggle[aria-expanded="true"]::before { transform: translateY(7px) rotate(45deg); } .site-header__toggle[aria-expanded="true"]::after { transform: translateY(-7px) rotate(-45deg); /* border: 1px solid red; */ /* height: 200px!important; */ } .site-nav__menu { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-2xl); } .site-nav__menu > li > a { position: relative; display: inline-flex; align-items: center; padding: 1.5rem 0; font-family: var(--font-heading); font-weight: 500; font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--color-primary-900); transition: color var(--transition); } .site-nav__menu > li > a::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-brand-accent); transform: scaleX(0); transform-origin: left center; transition: transform var(--transition); } .site-nav__menu > li > a:hover, .site-nav__menu > li.current-menu-item > a, .site-nav__menu > li.current-menu-ancestor > a { color: var(--color-brand); } .site-nav__menu > li > a:hover::before, .site-nav__menu > li.current-menu-item > a::before, .site-nav__menu > li.current-menu-ancestor > a::before { transform: scaleX(1); } /* Parent menu items with children */ .site-nav__menu > .menu-item-has-children { position: relative; } .site-nav__menu > .menu-item-has-children > a { display: flex; align-items: center; gap: var(--space-xs); } .site-nav__menu > .menu-item-has-children > a::after { content: ''; border: solid currentColor; border-width: 0 1.5px 1.5px 0; padding: 2.5px; transform: rotate(45deg); margin-top: -2px; transition: transform var(--transition); } @media (max-width:1400px) and (min-width:769px) { .site-header a[href*="tel"], .site-nav__menu > li > a, .site-header .btn--sm{ font-size:1.25rem!important; } .site-nav__actions, .site-nav__menu{ gap:var(--space-xl)!important; } .site-nav__actions{ margin-left:var(--space-xl)!important; } } @media (max-width:990px) and (min-width:769px) { .site-header a[href*="tel"], .site-nav__menu > li > a, .site-header .btn--sm{ font-size:1rem!important; } .site-nav__actions, .site-nav__menu{ gap:var(--space-lg)!important; } .site-nav__actions{ margin-left:var(--space-lg)!important; } } @media (max-width:850px) { .site-header a[href*="tel"]{ display:none; } } /* @media (max-width:820px) and (min-width:769px) { .site-nav__actions, .site-nav__menu{ gap:var(--space-md)!important; } .site-nav__actions{ margin-left:var(--space-md)!important; } } */ /* Desktop dropdown — wide, 2-column grid above the mobile breakpoint */ @media (min-width: 769px) { .site-nav__menu .sub-menu { position: absolute; top: 100%; left: 0; min-width: 460px; list-style: none; margin: 0; padding: var(--space-md); display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-xs); row-gap: 0; background: #fff; border: 1px solid var(--color-neutral-200); border-radius: var(--radius); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--transition), transform var(--transition), visibility var(--transition); } /* If a parent sits near the right edge, flip the dropdown to anchor right so it never gets clipped off-screen. */ .site-nav__menu > .menu-item-has-children:nth-last-child(-n+2) > .sub-menu { left: auto; right: 0; } .site-nav__menu > .menu-item-has-children:hover > .sub-menu, .site-nav__menu > .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .site-nav__menu > .menu-item-has-children:hover > a::after { transform: rotate(-135deg); margin-top: 2px; } .site-nav__menu .sub-menu li { margin: 0; } .site-nav__menu .sub-menu a { display: block; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); font-weight: 700; font-family: var(--font-heading); text-transform: uppercase; font-size: 1.0625rem; letter-spacing: 0.01em; line-height: 1.2; text-decoration: none; color: var(--color-primary-900); transition: background var(--transition), color var(--transition); } .site-nav__menu .sub-menu a:hover, .site-nav__menu .sub-menu a:focus-visible, .site-nav__menu .sub-menu li.current-menu-item > a { background: var(--color-secondary-50); color: var(--color-brand); } } @media (max-width: 768px) { .site-nav { position: fixed; top: 72px; top: 0; left: 0; right: 0; bottom: 0; background: #fff; padding: var(--space-lg) 5%; padding-top: 5rem; transform: translateX(100%); transition: transform var(--transition); overflow-y: auto; } .site-nav.is-open { transform: translateX(0); } body.nav-open { overflow: hidden; } .site-nav__menu { flex-direction: column; gap: 0; } .site-nav__menu > li { display:flex; border-bottom: 1px solid var(--color-neutral-200); /* flex-direction:column; */ /* align-items:flex-start!important; */ } .site-nav__menu > .menu-item-has-children > a, .site-nav__menu > li > a { display: block; padding: 1.5rem 0 1rem 0; /* font-size:1.25rem; */ } .site-nav__menu > li > a { color: var(--color-brand)!important } /* Row layout so the toggle button sits beside the link */ .site-nav__menu > .menu-item-has-children { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content:flex-start; } .site-nav__menu > .menu-item-has-children > a { flex: 1; flex-basis: auto; min-width: 0; /* display: block; */ } /* Sub-menu spans full width on its own row */ .site-nav__menu > .menu-item-has-children > .sub-menu { flex-basis: 100%; } /* Hide the pseudo-element arrow -- the button replaces it */ .site-nav__menu > .menu-item-has-children > a::after { display: none; } /* Toggle button arrow */ .submenu-toggle { background: none; border: none; padding: 1rem; cursor: pointer; color: inherit; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .submenu-toggle::before { content: ''; border: solid var(--color-brand); border-width: 0 2px 2px 0; padding: 8px; transform: rotate(45deg); margin-top: -6px; transition: all var(--transition); display: block; } .site-nav__menu > .menu-item-has-children.is-open > .submenu-toggle::before { transform: rotate(-135deg); margin-top: 2px; } .site-nav__menu .sub-menu { list-style: none; margin: 0; padding: 0 0 var(--space-sm) var(--space-md); padding: 0; max-height: 0; overflow: hidden; transition: all var(--transition); width:100%; } .site-nav__menu > .menu-item-has-children.is-open > .sub-menu { max-height: 500px; overflow-y: scroll; padding-bottom:var(--space-sm); } .site-nav__menu .sub-menu li { } .site-nav__menu .sub-menu a { display: block; padding: .875rem 0; font-weight: 600; /* color: #fff; */ font-size:1rem; text-decoration:none; } .site-nav__menu .sub-menu li.current-menu-item > a, .site-nav__menu .sub-menu a:focus, .site-nav__menu .sub-menu a:hover { color: var(--color-neutral-900)!important; opacity:0.65; } .site-nav__menu > li.current-menu-item > a, .site-nav__menu > li > a:hover, .site-nav__menu > li > a:focus{ color: var(--color-neutral-900)!important; opacity:0.9; } .site-nav__menu .sub-menu li.current-menu-item a, .site-nav__menu .sub-menu a:focus, .site-nav__menu .sub-menu a:hover { color: var(--color-secondary-800); background: var(--color-neutral-50); padding-left:.325rem; } } @media (min-width: 769px) { .site-nav { display: flex; align-items: center; } .site-header__toggle, .site-nav__menu > li.mobile-show, button.submenu-toggle{ display:none!important; } } @media (max-width:768px) { .site-nav__menu > li > a::before{ display:none; } } body.nav-open { overflow: hidden; } /* Header actions (phone + CTA) */ .site-nav__actions { display: flex; align-items: center; gap: var(--space-2xl); margin-top: var(--space-lg); /* padding-top: var(--space-md); */ /* border-top: 1px solid var(--color-neutral-100); */ } .site-nav__phone { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 0.5rem 0.25rem; font-family: var(--font-sans); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em; color: var(--color-primary-900); text-decoration: none; transition: color var(--transition); } .site-nav__phone svg { width: 18px; height: 18px; position: relative; top: 0; color: var(--color-brand-accent); } .site-nav__phone:hover { color: var(--color-brand); } @media (min-width: 769px) { .site-nav__actions { margin-top: 0; margin-left: var(--space-2xl); padding-top: 0; /* padding-left: var(--space-lg); */ border-top: none; /* border-left: 1px solid var(--color-neutral-200); */ } } @media (max-width: 768px) { .site-nav__phone span { display: none; } .site-nav__phone svg { width: 24px; height: 24px; } .site-nav__actions{ flex-wrap:wrap; } .site-nav__actions > a{ flex-basis:100%; justify-content:center; } } /* Small button variant */ .btn--sm { padding: 0.55em 1.4em; font-size: var(--text-sm); min-height: 40px; } /* Large button */ .btn--lg { padding: 0.5rem 2rem; font-size: 1.5rem; } /* ================================================================= MEGA MENU ================================================================= */ .c-mega-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 100; background: #fff; border-top: 1px solid var(--color-neutral-200); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--transition), transform var(--transition), visibility var(--transition); pointer-events: none; } .c-mega-menu.is-active { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .c-mega-menu__inner { padding: var(--space-xl) var(--gutter); } .c-mega-menu__columns { display: flex; gap: var(--space-lg); } .c-mega-menu__col { min-width: 0; } .c-mega-menu__col-title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-sm); color: var(--color-text); } .c-mega-menu__menu { list-style: none; padding: 0; margin: 0; } .c-mega-menu__menu li { margin-bottom: var(--space-xs); } .c-mega-menu__menu a { color: var(--color-text-muted); text-decoration: none; transition: color var(--transition); } .c-mega-menu__menu a:hover { color: var(--color-brand); } .c-mega-menu__menu .sub-menu { list-style: none; padding: 0; margin: var(--space-sm) 0 var(--space-sm) var(--space-sm); } .c-mega-menu__menu .sub-menu a { font-size: var(--text-sm); } .c-mega-menu__text { color: var(--color-text); } .c-mega-menu__image { max-width: 100%; height: auto; border-radius: var(--radius); } .c-mega-menu__contact-info p { display: flex; align-items: flex-start; gap: var(--space-xs); margin-bottom: var(--space-xs); } @media (max-width: 768px) { .c-mega-menu { display: none !important; } } /* ================================================================= FOOTER ================================================================= */ .site-footer { position: relative; background: var(--color-bg-footer); color: #fff; padding: var(--space-3xl) 0 var(--space-lg); } .site-footer__inner { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-2xl); padding-bottom: var(--space-2xl); } @media (max-width: 900px) { .site-footer__inner { grid-template-columns: 1fr; gap: var(--space-xl); } } .site-footer__logo img { width: 268px; height: auto; max-width: 100%; margin-bottom: var(--space-lg); } .site-footer__brand p {color: #fff;max-width: 30ch;font-size: 1.25rem;} .site-footer__tagline { margin-bottom: var(--space-lg); line-height: 1.5; font-weight: 700; } .site-footer__social { display: flex; gap: var(--space-sm); margin-top: var(--space-md); } .site-footer__social a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); transition: background var(--transition), color var(--transition), transform var(--transition); } .site-footer__social a:hover { transform: translateY(-2px); } .site-footer__social a span { display: flex; align-items: center; justify-content: center; } .site-footer__social a:hover { background: var(--color-brand-accent); color: #fff; } .site-footer__social svg { width: 20px; height: 20px; } .site-footer__social-icon { width: 20px; height: 20px; object-fit: contain; } .site-footer__columns { display: flex; flex-wrap: nowrap; gap: var(--space-2xl); padding: 0; padding-top: calc(162px + var(--space-lg)); } .site-footer__col { min-width: 0; } .site-footer__col-title { font-family: var(--font-heading); font-size: 2rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: var(--space-lg); color: var(--color-secondary-500); } .site-footer__menu { list-style: none; padding: 0; margin: 0; } .site-footer__menu li { margin-bottom: var(--space-md); } .site-footer__menu a { color: #fff; text-decoration: none; font-size: 1.375rem; font-weight: 400; transition: color var(--transition); } .site-footer__menu .sub-menu a:hover, .site-footer__menu a:hover { color: var(--color-secondary-500); } .site-footer__menu > li.menu-item-has-children > a { font-family: var(--font-heading); font-size: 2rem; font-weight: 800; color: var(--color-secondary-500); text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.05; display: block; margin-bottom: var(--space-md); } .site-footer__menu > li.menu-item-has-children > a:hover { color: #fff; } .site-footer__menu .sub-menu { list-style: none; padding: 0; margin: 0; } .site-footer__menu #menu-item-80 .sub-menu { column-count:2; } .site-footer__menu .sub-menu a { font-size: 1.25rem; font-weight: 400; color: #fff; } /* Two-column menu layout for wide columns (e.g. Services) */ .site-footer__col--split .site-footer__menu { /* columns: 2; */ display:flex; column-gap: var(--space-4xl); } .site-footer__col--split .site-footer__menu li { break-inside: avoid; } .site-footer__contact-info p { display: flex; align-items: flex-start; gap: var(--space-sm); margin-bottom: var(--space-md); color: #fff; font-size: 1.25rem; } .site-footer__contact-info p svg { color: var(--color-brand-accent); } .site-footer__contact-info a { color: #fff; text-decoration: none; transition: color var(--transition); } .site-footer__contact-info a:hover { color: var(--color-secondary-500); } .site-footer__icon { width: 18px; height: 20px; flex-shrink: 0; margin-top:6px; display: block; } .site-footer__text { color: var(--color-neutral-400); } .site-footer__image { max-width: 100%; height: auto; } @media (max-width: 768px) { .site-footer__columns { flex-direction: column; } .site-footer__col { flex-basis: 100% !important; max-width: 100% !important; } } .site-footer__bottom { margin-top: var(--space-xl); padding-top: var(--space-lg); color: rgba(255,255,255,0.7); font-size: 1rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-sm) var(--space-lg); } .site-footer__bottom-left { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); } .site-footer__copyright { margin: 0; } .site-footer__bottom-nav { display: flex; align-items: center; } .site-footer__bottom-menu { display: flex; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; } .site-footer__bottom-menu a { color: rgba(255,255,255,0.7); text-decoration: none; transition: color var(--transition); } .site-footer__bottom-menu a:hover, .site-footer__bottom-menu a:focus { color: #fff; } .site-footer__credits { margin: 0; } .site-footer__credits a { color: rgba(255,255,255,0.85); text-decoration: none; transition: color var(--transition); } .site-footer__credits a:hover, .site-footer__credits a:focus { color: var(--color-secondary-200); } @media (max-width:900px){ .site-footer__columns { display:none; } } /* ================================================================= COMPONENTS ================================================================= */ /* Adjacent same-background components: collapse top padding */ [class*="--bg-white"] + script + [class*="--bg-white"], [class*="--bg-white"] + [class*="--bg-white"], [class*="--bg-light"] + [class*="--bg-light"], [class*="--bg-dark"] + [class*="--bg-dark"], [class*="--bg-brand"] + [class*="--bg-brand"] { padding-top: 0; } /* ----------------------- UNDER CONSTRUCTION ----------------------- */ .c-under-construction { padding: var(--space-3xl) 0; min-height: 50vh; display: flex; align-items: center; background: var(--color-bg-light); } .c-under-construction h1 { font-size: var(--text-3xl); margin-bottom: var(--space-md); color: var(--color-neutral-700); } .c-under-construction p { color: var(--color-neutral-500); font-size: var(--text-lg); } /* ----------------------- HERO ----------------------- */ .c-hero { position: relative; display: flex; align-items: center; padding: var(--space-4xl) 0 var(--space-3xl); background: var(--color-bg-dark) center/cover no-repeat; color: #fff; overflow: hidden; isolation: isolate; } .c-hero--h-full { min-height: 100vh; } .c-hero--h-large { min-height: 86vh; } .c-hero--h-medium {min-height: 70vh;} .c-hero--h-small { min-height: 44vh; } .c-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 47, 61, 0.55) 0%, rgba(8, 47, 61, 0.35) 45%, rgba(8, 47, 61, 0.75) 100%), linear-gradient(90deg, rgba(8, 47, 61, 0.65) 0%, rgba(8, 47, 61, 0.15) 60%, rgba(8, 47, 61, 0) 100%); opacity: 1 !important; } .c-hero__inner { position: relative; z-index: 1; } .c-hero__content { max-width: 1000px; } .c-hero--center { text-align: center; } .c-hero--center .c-hero__inner { display: flex; flex-direction: column; align-items: center; } .c-hero--center .c-hero__content { margin: 0 auto; } .c-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.6em; margin: 0 0 var(--space-md); font-family: var(--font-sans); font-weight: 700; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-secondary-200); } .c-hero__eyebrow::before { content: ''; width: 36px; height: 2px; background: var(--color-secondary-300); } .c-hero__headline { font-size: var(--text-6xl); line-height: 0.95; margin: 0 0 var(--space-lg); text-shadow: 0 4px 30px rgba(8, 32, 64, 0.35); } .c-hero__subhead { font-family: var(--font-heading); font-weight: 500; font-size: var(--text-xl); color: rgba(255,255,255,0.92); max-width: 1000px; margin-bottom: var(--space-xl); text-transform:uppercase; } .c-hero__subhead p { margin: 0; } .c-hero__buttons { display: flex; flex-wrap: wrap; gap: var(--space-md); } .c-hero--center .c-hero__buttons { justify-content: center; } /* Bottom subtle wave gradient strip */ .c-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 96px; background: linear-gradient(to top, rgba(8, 32, 64, 0.55), rgba(8, 32, 64, 0)); pointer-events: none; z-index: 0; } /* Split layout */ .c-hero--split { background: var(--color-bg-dark); } .c-hero--split .c-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; max-width: none; } .c-hero--split .c-hero__content { max-width: none; } .c-hero--split .c-hero__media { order: 1; } .c-hero--split-left .c-hero__media { order: -1; } .c-hero--split .c-hero__image { width: 100%; height: auto; border-radius: var(--radius); } @media (max-width: 768px) { .c-hero--split .c-hero__inner { grid-template-columns: 1fr; text-align: center; } .c-hero--split .c-hero__media { order: -1; } .c-hero--split .c-hero__buttons { justify-content: center; } } /* Minimal layout */ .c-hero--minimal { background: #fff; color: var(--color-neutral-900); min-height: auto; padding: var(--space-xl) 0; border-bottom: 1px solid var(--color-neutral-200); } .c-hero--minimal .c-hero__headline { font-size: var(--text-3xl); margin-bottom: 0; } /* Parallax */ /* Clip wrapper keeps the oversize parallax div inside the hero bounds even when hero overflow is visible */ .c-hero__bg-clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .c-hero__parallax { position: absolute; inset: -20%; background: center/cover no-repeat; will-change: transform; } .c-hero--parallax { background: transparent; } @media (max-width: 768px) { .c-hero { padding: var(--space-2xl) 0; } .c-hero__headline { font-size: var(--text-3xl); } .c-hero--minimal .c-hero__headline { font-size: var(--text-2xl); } } .c-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Breadcrumbs */ .breadcrumbs { margin-bottom: var(--space-sm); } .breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); } .breadcrumbs__item { display: flex; align-items: center; gap: var(--space-xs); } .breadcrumbs__link { color: var(--color-neutral-500); text-decoration: none; } .breadcrumbs__link:hover { color: var(--color-brand); } .breadcrumbs__sep { color: var(--color-neutral-300); } .breadcrumbs__current { color: var(--color-neutral-700); } /* ----------------------- CONTENT + MEDIA ----------------------- */ .c-content-media { padding: var(--space-4xl) 0; } .c-content-media__inner { display: grid; gap: var(--space-3xl); align-items: center; } .c-content-media__content h2, .c-content-media__content h3 { margin-bottom: var(--space-lg); } .c-content-media__content .prose { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text-muted); } .c-content-media__content .prose strong { color: var(--color-primary-900); font-weight: 900; } @media (min-width: 768px) { .c-content-media__inner { grid-template-columns: 1fr 1fr; gap: var(--space-4xl); } .c-content-media--left .c-content-media__media { order: -1; } } .c-content-media__buttons { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); } .c-content-media__image { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .no-shadow .c-content-media__image { box-shadow: none; } .c-content-media__image img { width: 100%; height: auto; display: block; } .c-content-media__video { position: relative; padding-bottom: 56.25%; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); } .c-content-media__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; } .c-content-media--bg-white { background: #fff; } .c-content-media--bg-light { background: var(--color-bg-light); } .c-content-media--bg-dark { background: linear-gradient(135deg, var(--color-primary-800) 0%, var(--color-primary-900) 100%); color: rgba(255,255,255,0.92); } .c-content-media--bg-dark .prose { color: rgba(255,255,255,0.85); } .c-content-media--bg-dark .prose strong { color: #fff; } .c-content-media--text-white .c-content-media__content, .c-content-media--text-white .c-content-media__content h1, .c-content-media--text-white .c-content-media__content h2, .c-content-media--text-white .c-content-media__content h3, .c-content-media--text-white .c-content-media__content h2 strong, .c-content-media--text-white .c-content-media__content .eyebrow { color: #fff; } .c-content-media--text-white .c-content-media__content .prose { color: rgba(255,255,255,0.85); } .c-content-media--text-white .c-content-media__content .prose strong { color: #fff; } section.c-content-media--bg-dark h2 { color: #fff; } /* ----------------------- CARDS ----------------------- */ .c-cards { padding: var(--space-4xl) 0; } .c-cards__header { text-align: center; max-width: 760px; margin: 0 auto var(--space-3xl); } .c-cards__header h2 { font-size: var(--text-5xl); margin-bottom: var(--space-md); } .c-cards__header .subhead { font-size: var(--text-lg); } .c-cards__buttons { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: flex-start; margin-top: var(--space-xl); } .c-cards__grid { display: grid; gap: var(--space-xl); } @media (min-width: 769px) { .c-cards--cols-2 .c-cards__grid, .c-cards--cols-3 .c-cards__grid, .c-cards--cols-4 .c-cards__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .c-cards--cols-3 .c-cards__grid { grid-template-columns: repeat(3, 1fr); } .c-cards--cols-4 .c-cards__grid { grid-template-columns: repeat(4, 1fr); } } .c-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; overflow: hidden; transition: transform var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition); } a.c-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--color-primary-200); } .c-card__image { margin: 0; overflow: hidden; } .c-card__image img { aspect-ratio: 4/3; object-fit: cover; width: 100%; display: block; transition: transform var(--transition-slow); } a.c-card:hover .c-card__image img { transform: scale(1.04); } .c-card__content { padding: var(--space-xl); flex: 1; display: flex; flex-direction: column; } .c-card__title { font-size: var(--text-2xl); line-height: var(--leading-snug); margin-bottom: var(--space-sm); color: var(--color-primary-900); } .c-card__desc { color: var(--color-text-muted); flex: 1; } .c-card__link { margin-top: var(--space-lg); font-weight: 700; color: var(--color-brand); display: inline-flex; align-items: center; gap: var(--space-xs); letter-spacing: 0.01em; } .c-card__link svg { width: 1em; height: 1em; transition: transform var(--transition); } a.c-card:hover .c-card__link svg { transform: translateX(4px); } /* Card Style: Horizontal */ .c-cards--style-horizontal .c-card { flex-direction: row; } .c-cards--style-horizontal .c-card__image { flex: 0 0 40%; max-width: 40%; } .c-cards--style-horizontal .c-card__image img { aspect-ratio: 1/1; height: 100%; } .c-cards--style-horizontal .c-card__content { justify-content: center; } @media (max-width: 768px) { .c-cards--style-horizontal .c-card { flex-direction: column; } .c-cards--style-horizontal .c-card__image { flex: none; max-width: 100%; } .c-cards--style-horizontal .c-card__image img { aspect-ratio: 16/9; height: auto; } } /* Card Style: Overlay */ .c-cards--style-overlay .c-card { position: relative; min-height: 280px; } .c-cards--style-overlay .c-card__image { position: absolute; inset: 0; } .c-cards--style-overlay .c-card__image img { aspect-ratio: auto; height: 100%; } .c-cards--style-overlay .c-card__image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 60%, transparent 100%); } .c-cards--style-overlay .c-card__content { position: relative; z-index: 1; justify-content: flex-end; color: #fff; } .c-cards--style-overlay .c-card__desc { color: var(--color-neutral-200); } .c-cards--style-overlay .c-card__link { color: #fff; } a.c-cards--style-overlay .c-card:hover .c-card__image img { transform: scale(1.05); } .c-cards--style-overlay .c-card__image img { transition: transform var(--transition); } /* Card Style: Minimal */ .c-cards--style-minimal .c-card { flex-direction: row; box-shadow: none; border: 1px solid var(--color-neutral-200); } .c-cards--style-minimal .c-card__image { order: 2; flex: 0 0 auto; width: 80px; height: 80px; margin: var(--space-lg); margin-left: 0; border-radius: 50%; overflow: hidden; } .c-cards--style-minimal .c-card__image img { aspect-ratio: 1/1; height: 100%; width: 100%; } .c-cards--style-minimal .c-card__content { padding: var(--space-xl); flex: 1; } a.c-cards--style-minimal .c-card:hover { transform: none; box-shadow: none; border-color: var(--color-brand); } .c-cards--bg-white { background: #fff; } .c-cards--bg-light { background: var(--color-bg-light); } .c-cards--bg-dark { background: var(--color-bg-dark); color: #fff; } .c-cards--bg-dark .c-card { background: var(--color-neutral-800); } .c-cards--bg-dark .c-card__desc { color: var(--color-neutral-300); } .c-cards--bg-dark.c-cards--style-minimal .c-card { border-color: var(--color-neutral-700); } .c-cards--bg-dark.c-cards--style-minimal a.c-card:hover { border-color: var(--color-brand-light); } @media (max-width:600px) { .c-cards--style-overlay .c-card__content { padding:var(--space-xl)!important; } } /* ----------------------- OWNER QUOTE ----------------------- */ .c-owner-quote { position: relative; z-index: 2; /* overlap adjacent sections so photo protrudes above/below */ padding: 0; /* padding lives on content column so photo can reach section edges */ } .c-owner-quote__bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; } /* * The class lands on the normally, but the Imagify plugin wraps the * in a with the actual * nested inside. Since object-fit has no effect on , the inner img * would render at natural aspect ratio and only cover the top. We style both * cases so the image always fills the section. */ .c-owner-quote__bg-img, .c-owner-quote__bg picture.c-owner-quote__bg-img, .c-owner-quote__bg picture.c-owner-quote__bg-img > img, .c-owner-quote__bg > picture, .c-owner-quote__bg > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .c-owner-quote__inner { position: relative; z-index: 1; display: flex; align-items: center; gap: clamp(var(--space-xl), 4vw, var(--space-3xl)); } /* Person column — photo overflows section top and bottom */ .c-owner-quote__person { flex-shrink: 0; position: relative; width: clamp(200px, 22vw, 320px); align-self: stretch; z-index: 2; } .c-owner-quote__photo, .c-owner-quote__person picture.c-owner-quote__photo { position: absolute; top: -80px; /* protrude above section */ bottom: -60px; /* protrude below section into next component */ left: 0; width: 100%; object-fit: contain; object-position: bottom center; } /* Imagify wraps img in with inner . Make the inner img inherit the size/object-fit so it doesn't render at natural size. */ .c-owner-quote__person picture.c-owner-quote__photo > img, .c-owner-quote__person > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; display: block; } /* Attribution: anchored to bottom-right of photo column */ .c-owner-quote__attribution { position: absolute; bottom: 6%; left:62%; line-height: 1.1; white-space: nowrap; text-align:center; } .c-owner-quote__name { font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; text-transform: uppercase; letter-spacing: -0.01em; color: var(--color-secondary-400); margin-bottom:.25rem; } .c-owner-quote__role { font-family: var(--font-heading); font-weight: 400; font-size: 1.5rem; text-transform: uppercase; color: #fff; } /* Content column — carries the vertical padding for the section */ .c-owner-quote__content { flex: 1; display: flex; flex-direction: column; gap: var(--space-xl); padding: var(--space-4xl) 0; } .c-owner-quote__headline { font-family: var(--font-heading); font-weight: 800; font-size: clamp(2.25rem, 1.5rem + 3.5vw, 4rem); text-transform: uppercase; letter-spacing: -0.02em; color: #fff; line-height: 0.95; margin: 0; } .c-owner-quote__headline strong { color: var(--color-secondary-500); font-weight: inherit; } .c-owner-quote__quote { font-family: 'Covered By Your Grace', cursive; font-size: clamp(1.375rem, 1rem + 2vw, 2.5rem); line-height: 1.3; color: var(--color-primary-50); margin: 0; quotes: none; } .c-owner-quote__buttons { display: flex; flex-wrap: wrap; gap: var(--space-md); } /* White outline button — always on this dark bg component */ .c-owner-quote__buttons .btn { background: transparent; color: #fff; border-color: #fff; box-shadow: none; } .c-owner-quote__buttons .btn:hover, .c-owner-quote__buttons .btn:focus-visible { background: rgba(255, 255, 255, 0.15); color: #fff; border-color: #fff; } /* 960px and below — keep horizontal layout (photo + name on left, quote on right), stop the photo from overflowing the section, and place attribution directly beneath the photo, centered to it. */ @media (max-width: 960px) { .c-owner-quote__inner { gap: var(--space-md); align-items: center; } /* Photo column: stop stretching the section, allow attribution to flow beneath */ .c-owner-quote__person { width: clamp(120px, 28vw, 220px); height: auto; align-self: center; display: flex; flex-direction: column; align-items: center; margin-top: 0; padding:var(--space-lg) 0; } /* Photo: contained within column instead of overflowing top/bottom */ .c-owner-quote__photo, .c-owner-quote__person picture.c-owner-quote__photo { position: relative; top: auto; bottom: auto; left: auto; width: 100%; height: auto; max-height: clamp(220px, 38vw, 360px); } /* Inner img inside Imagify's wrapper */ .c-owner-quote__person picture.c-owner-quote__photo > img, .c-owner-quote__person > picture > img { position: relative; inset: auto; width: 100%; height: 100%; max-height: clamp(220px, 38vw, 360px); object-fit: contain; object-position: bottom center; } /* Attribution: normal flow, directly beneath the photo, centered to it */ .c-owner-quote__attribution { position: relative; bottom: auto; left: auto; right: auto; margin-top: var(--space-sm); white-space: normal; text-align: center; width: 100%; } .c-owner-quote__name, .c-owner-quote__role { font-size: clamp(1rem, 2.5vw, 1.25rem); } /* Content column: tighter vertical padding at this size */ .c-owner-quote__content { padding: var(--space-2xl) 0; gap: var(--space-md); } .c-owner-quote__headline { /* font-size: clamp(1.5rem, 3.5vw, 2.5rem); */ } .c-owner-quote__quote { font-size: clamp(1.125rem, 1.5rem, 1.625rem); } } /* Below 600px — shrink the photo column a bit more so the quote stays readable */ @media (max-width: 600px) { .c-owner-quote__person { width: clamp(100px, 32vw, 160px); } .c-owner-quote__name, .c-owner-quote__role { font-size: 0.875rem; } /* Inner img inside Imagify's wrapper */ .c-owner-quote__photo, .c-owner-quote__person picture.c-owner-quote__photo, .c-owner-quote__person picture.c-owner-quote__photo > img, .c-owner-quote__person > picture > img { max-height: clamp(400px, 38vw, 360px); } } /* Mobile: swap background image for a brand gradient */ @media (max-width: 768px) { .c-owner-quote__bg { background: linear-gradient(to bottom, #216cd0, #003d91); } .c-owner-quote__bg-img, .c-owner-quote__bg picture.c-owner-quote__bg-img, .c-owner-quote__bg picture.c-owner-quote__bg-img > img, .c-owner-quote__bg > picture, .c-owner-quote__bg > picture > img { display: none; } } /* ----------------------- SERVICE AREA CTA ----------------------- */ .c-service-area-cta { position: relative; padding: var(--space-4xl) 0; display: flex; align-items: center; } .c-service-area-cta__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } /* * The class lands on the normally, but the Imagify plugin wraps the * in a with the actual * nested inside. Since object-fit has no effect on , the inner img * would render at natural aspect ratio and only cover the top. Style both * cases so the image always fills the section. */ .c-service-area-cta__bg-img, .c-service-area-cta__bg picture.c-service-area-cta__bg-img, .c-service-area-cta__bg picture.c-service-area-cta__bg-img > img, .c-service-area-cta__bg > picture, .c-service-area-cta__bg > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .c-service-area-cta__inner { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-3xl); width: 100%; } .c-service-area-cta__content { flex: 1; display: flex; flex-direction: column; gap: var(--space-lg); } .c-service-area-cta__headline { font-family: var(--font-heading); font-weight: 800; font-size: clamp(2rem, 1.5rem + 3vw, 3.75rem); text-transform: uppercase; letter-spacing: -0.02em; color: #fff; line-height: 0.95; margin: 0; } .c-service-area-cta__headline strong { color: var(--color-secondary-500); font-weight: inherit; } .c-service-area-cta__text { font-size: var(--text-lg); color: rgba(255, 255, 255, 0.88); line-height: 1.5; max-width: 680px; } .c-service-area-cta__text p { margin: 0; } .c-service-area-cta__actions { flex-shrink: 0; } .c-service-area-cta__actions .btn { background: transparent; color: #fff; border-color: #fff; box-shadow: none; white-space: nowrap; } .c-service-area-cta__actions .btn:hover, .c-service-area-cta__actions .btn:focus-visible { background: rgba(255, 255, 255, 0.15); color: #fff; border-color: #fff; } @media (max-width: 767px) { .c-service-area-cta__inner { flex-direction: column; align-items: flex-start; gap: var(--space-xl); } .c-service-area-cta__actions { width: 100%; } .c-service-area-cta__actions .btn { width: 100%; justify-content: center; } } /* ----------------------- CTA ----------------------- */ .c-cta { position: relative; padding: var(--space-4xl) 0; overflow: hidden; } .c-cta__inner { display: flex; flex-direction: column; gap: var(--space-lg); position: relative; z-index: 1; max-width: 920px; } .c-cta--center .c-cta__inner { max-width: 760px; } .c-cta__headline { font-size: var(--text-5xl); line-height: 1; margin: 0 0 var(--space-md); } .c-cta__subhead { font-size: var(--text-lg); line-height: var(--leading-relaxed); max-width: 56ch; } .c-cta--center { text-align: center; } .c-cta--center .c-cta__inner { align-items: center; max-width: 760px; margin: 0 auto; } /* Decorative ring for brand-bg CTA */ .c-cta--bg-brand::before, .c-cta--bg-dark::before { content: ''; position: absolute; width: 720px; height: 720px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.08); top: -260px; right: -240px; pointer-events: none; } .c-cta--bg-brand::after, .c-cta--bg-dark::after { content: ''; position: absolute; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(46, 193, 214, 0.35) 0%, rgba(46, 193, 214, 0) 70%); bottom: -180px; left: -120px; pointer-events: none; } @media (min-width: 768px) { .c-cta--split .c-cta__inner, .c-cta--has-form .c-cta__inner { flex-direction: row; justify-content: space-between; align-items: center; gap: var(--space-2xl); } .c-cta--split .c-cta__content, .c-cta--split .c-cta__content, .c-cta--has-form .c-cta__content { flex: 1; flex-basis: 50%; width: 50%; } .c-cta--split .c-cta__form, .c-cta--has-form .c-cta__form { flex: 1; max-width: 50%; flex-basis: 50%; } } .c-cta__content h2 { margin-bottom: var(--space-sm); } .c-cta__content p { margin: 0; } .c-cta__buttons { display: flex; flex-wrap: wrap; gap: var(--space-sm); } .c-cta--center .c-cta__buttons { justify-content: center; } .c-cta__form { background: rgba(255, 255, 255, 0.1); padding: var(--space-xl); border-radius: var(--radius); } .c-cta--bg-light .c-cta__form { background: #fff; box-shadow: var(--shadow); } .c-cta__form .gform_wrapper { margin: 0; } .c-cta__form .gfield { margin-bottom: var(--space-md); } .c-cta__form input:not([type="submit"]), .c-cta__form textarea, .c-cta__form select { width: 100%; padding: var(--space-sm) var(--space-md); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--radius); background: rgba(255, 255, 255, 0.9); font-size: var(--text-base); } .c-cta--bg-dark form label, .c-cta--bg-dark form legend, .c-cta--bg-dark .gfield_description { color: var(--color-neutral-50)!important; } .gform-footer.gform_footer { margin-top: 0!important; } div#gform_fields_1 { row-gap: var(--space-md); } .gform-theme--foundation:where(:not(.gform_editor)) .gfield--type-captcha.gfield--captcha-invisible, .grecaptcha-badge { position: relative !important; bottom: auto !important; right: auto !important; margin-bottom: var(--space-lg) !important; } .gform-theme--foundation:where(:not(.gform_editor)) .gfield--type-captcha.gfield--captcha-invisible { margin-bottom:3.5rem!important; } div.gform-theme--framework .gform-field-label>.gfield_required:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)) { color: var(--color-error-500); } .c-cta--bg-light .c-cta__form input:not([type="submit"]), .c-cta--bg-light .c-cta__form textarea, .c-cta--bg-light .c-cta__form select { border-color: var(--color-neutral-300); background: #fff; } .c-cta__form .gform_button { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 0.75em 1.5em; font-size: var(--text-base); font-weight: 600; text-decoration: none; border-radius: var(--radius); border: 2px solid transparent; cursor: pointer; transition: all var(--transition); /* Default: white button for dark/brand backgrounds */ background: #fff; color: var(--color-brand); border-color: #fff; } .c-cta__form .gform_button:hover { background: var(--color-neutral-100); border-color: var(--color-neutral-100); } /* Light background: use primary button style */ .c-cta--bg-light .c-cta__form .gform_button { background: var(--color-brand); color: #fff; border-color: var(--color-brand); } .c-cta--bg-light .c-cta__form .gform_button:hover { background: var(--color-brand-dark); border-color: var(--color-brand-dark); } .c-cta--bg-brand { background: linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-primary-900) 100%); color: #fff; } .c-cta--bg-dark { background: linear-gradient(135deg, var(--color-primary-900) 0%, #051a23 100%); color: #fff; } .c-cta--bg-light { background: var(--color-bg-light); } .c-cta--bg-light .c-cta__subhead { color: var(--color-text-muted); } /* ---- Site Bottom -- wrapper for global CTA + footer + truck ---- */ .site-bottom { position: relative; } .site-bottom__truck { position: absolute; right: 3.5vw; top: clamp(80px, 18vw, 200px); width: clamp(380px, 62vw, 1167px); height: auto; display: block; pointer-events: none; z-index: 2; } @media (max-width: 1420px) { .site-bottom__truck { top:290px; } } @media (max-width: 1024px) { .site-bottom__truck { top:210px; right:0; } } /* ---- Global CTA redesign ---- */ @media (min-width:769px){ .c-cta--global { overflow: visible; background: linear-gradient(180deg, var(--color-primary-700) 0%, transparent 80%), url('/wp-content/uploads/cta-background.png.webp') center / cover no-repeat, var(--color-primary-500); } } @media (max-width:768px) { .c-cta--global { padding-top:200px!important; padding-bottom:100px!important; background: #044889 url('/wp-content/uploads/cta-backgrorund-mobile.png.webp') center top no-repeat; background-size:contain; position:relative; } .site-bottom__truck { top:480px; right:5vw; } } @media (max-width:400px){ .site-bottom__truck { top:500px; right:2.5vw; } } /* Suppress the decorative rings inherited from c-cta--bg-brand */ .c-cta--global::before, .c-cta--global::after { display: none; } .c-cta--global .c-cta__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: var(--space-2xl); max-width: var(--container-max); position: static; /* break stacking context so quote z-indexes above truck */ } @media (max-width: 900px) { .c-cta--global .c-cta__inner { grid-template-columns: 1fr; } .c-cta__quote { display: none; } } .c-cta--global .c-cta__headline { font-size: clamp(2.5rem, 1.5rem + 2.5vw, 3.75rem); line-height: 1; color: #fff; text-transform: uppercase; letter-spacing: -0.03em; margin-bottom: var(--space-lg); } .c-cta__quote { font-family: var(--font-script); font-size: clamp(1.75rem, 1rem + 1.5vw, 2.5rem); line-height: 1.4; color: var(--color-primary-50); text-align: center; margin: 0; padding-top: var(--space-lg); position: relative; z-index: 3; } .c-cta--global .c-cta__buttons { flex-wrap: wrap; gap: var(--space-md); } /* ----------------------- TESTIMONIALS ----------------------- */ .c-testimonials { padding: var(--space-4xl) 0; } .c-testimonials__header { text-align: center; max-width: 760px; margin: 0 auto var(--space-3xl); } .c-testimonials__header h2 { font-size: var(--text-5xl); } .c-testimonial { text-align: center; max-width: 880px; margin: 0 auto; padding: var(--space-2xl); position: relative; } .c-testimonial::before { content: '\201C'; position: absolute; top: -0.4em; left: 50%; transform: translateX(-50%); font-family: var(--font-heading); font-size: 8rem; line-height: 1; color: var(--color-secondary-200); opacity: 0.6; pointer-events: none; } .c-testimonial__icon { display: none; } .c-testimonial__quote { font-family: var(--font-sans); font-size: var(--text-2xl); font-weight: 500; font-style: normal; line-height: var(--leading-snug); color: var(--color-primary-900); margin-bottom: var(--space-xl); letter-spacing: -0.01em; } .c-testimonial--featured .c-testimonial__quote { font-size: var(--text-3xl); } .c-testimonial__author { display: flex; align-items: center; justify-content: center; gap: var(--space-md); text-align: left; } .c-testimonial__photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid var(--color-secondary-100); } .c-testimonial__author cite { display: block; font-style: normal; font-weight: 700; color: var(--color-primary-900); } .c-testimonial__author span { font-size: var(--text-sm); color: var(--color-text-muted); } /* Slider nav */ .c-testimonials__nav { display: flex; align-items: center; justify-content: center; gap: var(--space-md); margin-top: var(--space-xl); } .c-testimonials__prev, .c-testimonials__next { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 1px solid var(--color-neutral-300); border-radius: 50%; cursor: pointer; transition: var(--transition); } .c-testimonials__prev:hover, .c-testimonials__next:hover { border-color: var(--color-neutral-500); } .c-testimonials__prev svg, .c-testimonials__next svg { width: 20px; height: 20px; } .c-testimonials__dots { display: flex; gap: 1.25rem; align-items:flex-start; } .c-testimonials__dot { width: 10px; height: 10px; background: var(--color-neutral-300); border: none; border-radius: 50%; cursor: pointer; transition: var(--transition); } .c-testimonials__dot:hover, .c-testimonials__dot.is-active { background: var(--color-brand); } /* Grid layout */ .c-testimonials--grid .c-testimonials__grid { display: grid; gap: var(--space-lg); } @media (min-width: 768px) { .c-testimonials--grid .c-testimonials__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .c-testimonials--grid .c-testimonials__grid { grid-template-columns: repeat(3, 1fr); } } .c-testimonials--grid .c-testimonial { text-align: left; background: #fff; padding: var(--space-lg); border-radius: var(--radius); box-shadow: var(--shadow); } .c-testimonials--grid .c-testimonial__author { justify-content: flex-start; } .c-testimonials--grid .c-testimonial__icon { width: 32px; height: 32px; margin: 0 0 var(--space-md); } .c-testimonials--grid .c-testimonial__quote { font-size: var(--text-base); } .c-testimonials--bg-white { background: #fff; } .c-testimonials--bg-light { background: var(--color-bg-light); } .c-testimonials--bg-dark { background: var(--color-bg-dark); color: #fff; } .c-testimonials--bg-dark .c-testimonial__author span { color: var(--color-neutral-400); } /* ----------------------- ACCORDION ----------------------- */ .c-accordion { padding: var(--space-4xl) 0; } .c-accordion__header { text-align: center; margin-bottom: var(--space-3xl); } .c-accordion__header h2 { font-size: var(--text-5xl); } .c-accordion__items { max-width: 880px; margin: 0 auto; border-top: 1px solid var(--color-neutral-200); } .c-accordion__item { border-bottom: 1px solid var(--color-neutral-200); transition: border-color var(--transition); } .c-accordion__item.is-open { border-color: var(--color-primary-200); } .c-accordion__item h3 { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: var(--text-lg); color: var(--color-primary-900); } .c-accordion__trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); width: 100%; padding: var(--space-lg) 0; font: inherit; font-family: var(--font-sans); font-weight: 700; font-size: var(--text-lg); color: var(--color-primary-900); text-align: left; background: none; border: none; cursor: pointer; transition: color var(--transition); } .c-accordion__trigger:hover { color: var(--color-brand); } .c-accordion__icon { width: 32px; height: 32px; flex-shrink: 0; background: var(--color-secondary-100); color: var(--color-brand-dark); border-radius: 50%; padding: 6px; transition: transform var(--transition), background var(--transition); } .c-accordion__item.is-open .c-accordion__icon { transform: rotate(180deg); background: var(--color-brand); color: #fff; } .c-accordion__content { padding: 0 0 var(--space-xl); color: var(--color-text-muted); line-height: var(--leading-relaxed); } .c-accordion--bg-white { background: #fff; } .c-accordion--bg-light { background: var(--color-bg-light); } /* ----------------------- STATS ----------------------- */ .c-stats { padding: var(--space-3xl) 0; } .c-stats__header { text-align: center; max-width: 700px; margin: 0 auto var(--space-2xl); } .c-stats__grid { display: grid; gap: var(--space-xl); text-align: center; } @media (min-width: 769px) { .c-stats__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .c-stats__grid { grid-template-columns: repeat(4, 1fr); } } .c-stat__number { font-size: var(--text-4xl); font-weight: 700; color: var(--color-brand); line-height: 1; } .c-stat__label { margin-top: var(--space-sm); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-neutral-500); } .c-stats--bg-white { background: #fff; } .c-stats--bg-light { background: var(--color-bg-light); } .c-stats--bg-dark { background: var(--color-bg-dark); color: #fff; } .c-stats--bg-dark .c-stat__number { color: var(--color-brand-light); } .c-stats--bg-dark .c-stat__label { color: var(--color-neutral-400); } .c-stats--bg-brand { background: var(--color-brand); color: #fff; } .c-stats--bg-brand .c-stat__number { color: #fff; } .c-stats--bg-brand .c-stat__label { color: rgba(255,255,255,0.8); } /* ----------------------- LOGO GRID ----------------------- */ .c-logos { padding: var(--space-2xl) 0; } .c-logos__header { text-align: center; margin-bottom: var(--space-xl); } .c-logos__header h2 { font-size: var(--text-lg); font-weight: 500; } .c-logos__grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-lg) var(--space-xl); } .c-logos__item { max-width: 140px; height: 48px; display: flex; align-items: center; } .c-logos__item img { max-width: 100%; max-height: 100%; object-fit: contain; transition: filter var(--transition), opacity var(--transition); } .c-logos--gray .c-logos__item img { filter: grayscale(100%); opacity: 0.6; } .c-logos--gray .c-logos__item:hover img { filter: grayscale(0); opacity: 1; } .c-logos--bg-white { background: #fff; } .c-logos--bg-light { background: var(--color-bg-light); } /* ----------------------- FORM SECTION ----------------------- */ .c-form-section { padding: var(--space-4xl) 0; } .c-form-section--center .c-form-section__inner { max-width: 600px; margin: 0 auto; } .c-form-section--center .c-form-section__content { text-align: center; margin-bottom: var(--space-xl); } @media (min-width: 768px) { .c-form-section--split .c-form-section__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: start; } } .c-form-section__form { background: var(--color-bg-light); padding: var(--space-xl); border: none; border-radius: var(--radius-lg); box-shadow: none; } /* Field labels — heading-styled (Barlow Condensed ExtraBold, deep-teal) at a practical label size (matches --text-xl, ~1.25rem). !important throughout to beat Gravity Forms' default label styles. */ .c-form-section__form label, .c-form-section__form .gform-field-label, .c-form-section__form .gfield_label, .c-form-section__form legend { display: block !important; font-family: var(--font-heading) !important; font-weight: 800 !important; font-size: var(--text-xl) !important; line-height: 1.2 !important; letter-spacing: var(--tracking-tight) !important; color: var(--color-primary-900) !important; margin-bottom: var(--space-xs) !important; text-transform: none !important; } /* Required indicator — give it some breathing room from the label text */ .c-form-section__form .gfield_required, .c-form-section__form .gfield_label .gfield_required, .c-form-section__form .gform-field-label .gfield_required, .c-form-section__form legend .gfield_required { margin-left: 0.4em !important; font-family: var(--font-sans) !important; font-size: 0.75em !important; font-weight: 600 !important; letter-spacing: 0 !important; vertical-align: baseline !important; } /* Field descriptions sit just under the label — readable but secondary. */ .c-form-section__form .gfield_description { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-xs); } /* Inputs: gentle border + radius, brand-color focus ring. */ .c-form-section__form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .c-form-section__form textarea, .c-form-section__form select { border-radius: var(--radius) !important; border: 1px solid var(--color-neutral-200) !important; background: #fff; color: var(--color-text); transition: border-color var(--transition), box-shadow var(--transition); } .c-form-section__form input:not([type="submit"]):focus, .c-form-section__form textarea:focus, .c-form-section__form select:focus { outline: none; border-color: var(--color-brand) !important; box-shadow: 0 0 0 3px var(--color-primary-100) !important; } /* Submit button — mirrors .btn / .btn--primary exactly so it reads as the same call-to-action style as the rest of the site. !important throughout to beat Gravity Forms' inline foundation styles. */ .c-form-section__form .gform_button, .c-form-section__form .gform_footer input[type="submit"], .c-form-section__form button[type="submit"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: var(--space-xs) !important; width: auto !important; padding: 0.5rem 2rem !important; font-family: var(--font-heading) !important; font-size: 1.5rem !important; font-weight: 700 !important; text-transform: uppercase !important; text-decoration: none !important; border-radius: var(--radius) !important; border: 2px solid var(--color-primary-500) !important; background: var(--color-primary-500) !important; color: #fff !important; cursor: pointer !important; box-shadow: none !important; transition: transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition); will-change: transform; } .c-form-section__form .gform_button:hover, .c-form-section__form .gform_footer input[type="submit"]:hover, .c-form-section__form button[type="submit"]:hover { background: var(--color-primary-700) !important; border-color: var(--color-primary-700) !important; transform: translateY(-1px); } .c-form-section__form .gform_button:active, .c-form-section__form .gform_footer input[type="submit"]:active, .c-form-section__form button[type="submit"]:active { transform: translateY(0); } /* On a dark-background form section, flip labels and helper text to white. */ .c-form-section--bg-dark .c-form-section__form label, .c-form-section--bg-dark .c-form-section__form .gform-field-label, .c-form-section--bg-dark .c-form-section__form .gfield_label, .c-form-section--bg-dark .c-form-section__form legend { color: var(--color-primary-900); } .c-form-section--bg-white { background: #fff; } .c-form-section--bg-light { background: var(--color-bg-light); } .c-form-section--bg-dark { background: var(--color-bg-dark); color: #fff; } .c-form-section--bg-dark .eyebrow { color: var(--color-brand-light); } /* Match content typography to the content-media component so paragraphs, lists, headings, and emphasis read consistently across the site. */ .c-form-section__content h2, .c-form-section__content h3 { margin-bottom: var(--space-lg); } .c-form-section__content .subhead { margin-bottom: var(--space-lg); } .c-form-section__content .prose { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text-muted); } .c-form-section__content .prose strong { color: var(--color-primary-900); font-weight: 900; } /* Dark / text-white variants — keep parity with content-media on dark surfaces. */ .c-form-section--bg-dark .c-form-section__content, .c-form-section--bg-dark .c-form-section__content h1, .c-form-section--bg-dark .c-form-section__content h2, .c-form-section--bg-dark .c-form-section__content h3, .c-form-section--bg-dark .c-form-section__content h2 strong { color: #fff; } .c-form-section--bg-dark .c-form-section__content .prose { color: rgba(255,255,255,0.85); } .c-form-section--bg-dark .c-form-section__content .prose strong { color: #fff; } .iti__selected-country{ display:none!important; } .gform_body input, .gform_body textarea, .gform_body select { font-size: var(--text-base) !important; padding: 0.875rem 1rem !important; display: block !important; min-height: 48px !important; border-radius: 0 !important; border-color: var(--color-neutral-200); box-shadow: none !important; } .gform_body fieldset, .gform-theme--foundation .gform-grid-row{ margin:0!important; } .gform-theme--foundation .gform_fields, .gform-theme--foundation .gform-grid-row{ gap:1.75rem!important; } .gform-theme--foundation .gform-grid-col{ padding:0!important; } .gform_body input::placeholder, .gform_body textarea::placeholder { color: var(--color-neutral-500); font-size: var(--text-base); } .gform-theme--foundation .gform_footer{ margin-block-start:0!important; margin-top:1.75rem!important; } .gfield_required_text, .gform_validation_error_link, .gfield_validation_message, .gform_submission_error{ color:var(--color-error-700)!important; } .gform-icon--circle-error{ display:none!important; } .gform_validation_errors ol{ padding:0!important; } .gform_validation_errors li{ list-style-type:none; font-size:.875rem!important; } @media (max-width:1140px) { .gform-theme--foundation .gform-grid-row{ flex-direction:column!important; align-items:flex-start!important; } .gform-theme--foundation .gform-grid-col.gform-grid-col--size-auto{ flex-basis:100%!important; inline-size:100%!important; } .gform-theme--foundation .gfield--width-half{ grid-column:span 12!important; } .gform-theme--foundation .gform_fields, .gform-theme--foundation .gform-grid-row{ gap:var(--space-sm)!important; } } /* ----------------------- TEXT BLOCK ----------------------- */ .c-text-block { padding: var(--space-4xl) 0; } /* Constrain the reading column, center it on the page, and center-align text. This is the default for the Narrow and Default width settings. */ .c-text-block__inner { max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; } /* Width: Wide — open up to the full content-media container width and switch the inner text to left-aligned. Suits long-form prose, lists, multi-column content where a centered narrow column doesn't fit. */ .c-text-block__inner.container--wide { max-width: var(--container-max); text-align: left; } /* Headline gets the same shared "section headings" rule applied lower in the file (.c-content-media h2 selector chain). This is just the spacing tweak. */ .c-text-block h2 { margin-bottom: var(--space-lg); } /* Body text matches the prose treatment used in content-media so paragraphs, lists, links, and emphasis all read the same across the site. */ .c-text-block .prose { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text-muted); } .c-text-block .prose strong { color: var(--color-primary-900); font-weight: 900; } /* Dark / brand variants — flip body color like content-media does. */ .c-text-block--bg-dark .prose, .c-text-block--bg-brand .prose { color: rgba(255,255,255,0.85); } .c-text-block--bg-dark .prose strong, .c-text-block--bg-brand .prose strong { color: #fff; } .c-text-block--bg-white { background: #fff; } .c-text-block--bg-light { background: var(--color-bg-light); } .c-text-block--bg-dark { background: linear-gradient(135deg, var(--color-primary-800) 0%, var(--color-primary-900) 100%); color: rgba(255,255,255,0.92); } .c-text-block--bg-brand { background: var(--color-brand); color: #fff; } /* ----------------------- GALLERY ----------------------- */ /* Vertical rhythm matches .c-content-media (--space-4xl base, --space-3xl on small screens via the shared responsive block at the bottom of the file). */ .c-gallery { padding: var(--space-4xl) 0; } /* Header — matches the cards/testimonials/accordion header treatment so all "header above a grid" sections read as the same family. */ .c-gallery__header { text-align: center; max-width: 760px; margin: 0 auto var(--space-3xl); } .c-gallery__header h2, .c-gallery__header h3, .c-gallery__header h4 { line-height: 1.02; margin-bottom: var(--space-md); } .c-gallery__subhead { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text-muted); margin-top: 0; } .c-gallery--bg-dark .c-gallery__subhead, .c-gallery--bg-brand .c-gallery__subhead, .c-gallery--bg-image .c-gallery__subhead { color: rgba(255,255,255,0.85); } /* 4-up grid, center-justified — uses flexbox so the last row centers any leftover items. Scales down to 3 cols on tablet and 2 cols on mobile. */ .c-gallery__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); } .c-gallery__item { flex: 0 0 calc((100% - var(--space-md) * 3) / 4); } @media (max-width: 1024px) { .c-gallery__item { flex: 0 0 calc((100% - var(--space-md) * 2) / 3); } } @media (max-width: 767px) { .c-gallery__item { flex: 0 0 calc((100% - var(--space-md)) / 2); } } /* Legacy cols modifiers no-op: the design system standard is 4-per-row. The modifier selectors remain so existing ACF data doesn't break, but they all produce the same 4-column layout above. */ .c-gallery--cols-2 .c-gallery__grid, .c-gallery--cols-3 .c-gallery__grid, .c-gallery--cols-4 .c-gallery__grid, .c-gallery--cols-5 .c-gallery__grid { /* inherits the .c-gallery__grid flex rules */ } .c-gallery__item { margin: 0; overflow: hidden; border-radius: var(--radius); cursor: pointer; } .c-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); } .c-gallery__item:hover img { transform: scale(1.05); } /* Aspect ratios */ .c-gallery--square .c-gallery__item { aspect-ratio: 1/1; } .c-gallery--landscape .c-gallery__item { aspect-ratio: 4/3; } .c-gallery--portrait .c-gallery__item { aspect-ratio: 3/4; } .c-gallery--wide .c-gallery__item { aspect-ratio: 16/9; } /* Masonry layout */ .c-gallery--masonry .c-gallery__grid { display: block; column-gap: var(--space-md); } .c-gallery--masonry.c-gallery--cols-2 .c-gallery__grid { column-count: 2; } .c-gallery--masonry.c-gallery--cols-3 .c-gallery__grid { column-count: 2; } .c-gallery--masonry.c-gallery--cols-4 .c-gallery__grid { column-count: 2; } .c-gallery--masonry.c-gallery--cols-5 .c-gallery__grid { column-count: 2; } @media (min-width: 768px) { .c-gallery--masonry.c-gallery--cols-3 .c-gallery__grid { column-count: 3; } .c-gallery--masonry.c-gallery--cols-4 .c-gallery__grid { column-count: 3; } .c-gallery--masonry.c-gallery--cols-5 .c-gallery__grid { column-count: 3; } } @media (min-width: 1024px) { .c-gallery--masonry.c-gallery--cols-4 .c-gallery__grid { column-count: 4; } .c-gallery--masonry.c-gallery--cols-5 .c-gallery__grid { column-count: 5; } } .c-gallery--masonry .c-gallery__item { break-inside: avoid; margin-bottom: var(--space-md); aspect-ratio: auto; } .c-gallery--masonry .c-gallery__item img { height: auto; } /* Carousel layout */ .c-gallery__carousel { position: relative; } .c-gallery__track { display: flex; gap: var(--space-md); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: var(--space-sm); } .c-gallery__track::-webkit-scrollbar { display: none; } .c-gallery__slide { flex: 0 0 auto; width: 300px; scroll-snap-align: start; margin: 0; border-radius: var(--radius); overflow: hidden; cursor: pointer; } @media (min-width: 768px) { .c-gallery__slide { width: 400px; } } .c-gallery__slide img { width: 100%; height: 250px; object-fit: cover; transition: transform var(--transition); } @media (min-width: 768px) { .c-gallery__slide img { height: 300px; } } .c-gallery__slide:hover img { transform: scale(1.05); } .c-gallery__prev, .c-gallery__next { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: #fff; border: none; border-radius: 50%; box-shadow: var(--shadow); cursor: pointer; transition: background var(--transition); z-index: 2; } .c-gallery__prev:hover, .c-gallery__next:hover { background: var(--color-neutral-100); } .c-gallery__prev { left: var(--space-sm); } .c-gallery__next { right: var(--space-sm); } .c-gallery__prev svg, .c-gallery__next svg { width: 20px; height: 20px; } /* Backgrounds */ .c-gallery--bg-white { background: #fff; } .c-gallery--bg-light { background: var(--color-bg-light); } .c-gallery--bg-dark { background: var(--color-bg-dark); color: #fff; } .c-gallery--bg-dark .eyebrow { color: var(--color-brand-light); } .c-gallery--bg-dark .c-gallery__subhead { color: var(--color-neutral-400); } /* ----------------------- LIGHTBOX ----------------------- */ .c-lightbox { position: fixed; inset: 0; z-index: 1000000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .c-lightbox.is-open { opacity: 1; pointer-events: auto; } .c-lightbox__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.95); } .c-lightbox__content { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: var(--space-xl); } .c-lightbox__close { position: absolute; top: var(--space-md); right: var(--space-md); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: #fff; cursor: pointer; opacity: 0.7; transition: opacity var(--transition); } .c-lightbox__close:hover { opacity: 1; } .c-lightbox__close svg { width: 28px; height: 28px; } .c-lightbox__prev, .c-lightbox__next { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.1); border: none; border-radius: 50%; color: #fff; cursor: pointer; transition: background var(--transition); } .c-lightbox__prev:hover, .c-lightbox__next:hover { background: rgba(255, 255, 255, 0.2); } .c-lightbox__prev { left: var(--space-md); } .c-lightbox__next { right: var(--space-md); } .c-lightbox__prev svg, .c-lightbox__next svg { width: 24px; height: 24px; } .c-lightbox__figure { max-width: 90vw; max-height: 80vh; margin: 0; text-align: center; } .c-lightbox__image { max-width: 100%; max-height: 75vh; object-fit: contain; } .c-lightbox__caption { color: var(--color-neutral-400); font-size: var(--text-sm); margin-top: var(--space-md); } .c-lightbox__counter { position: absolute; bottom: var(--space-md); left: 50%; transform: translateX(-50%); color: var(--color-neutral-400); font-size: var(--text-sm); } @media (max-width: 768px) { .c-lightbox__prev, .c-lightbox__next { width: 40px; height: 40px; bottom: var(--space-3xl); top: auto; transform: none; } .c-lightbox__prev { left: var(--space-xl); } .c-lightbox__next { right: var(--space-xl); } } /* ----------------------- STICKY CTA ----------------------- */ .c-sticky-cta { display: none; position: fixed; bottom: var(--space-lg); right: var(--space-lg); z-index: 999999; align-items: center; height: 56px; background: var(--color-brand-accent); border-radius: 28px; color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); overflow: hidden; transition: background var(--transition); } @media (max-width: 900px) { .c-sticky-cta { display: flex; } } .c-sticky-cta__toggle { display: flex; align-items: center; height: 56px; padding: 0; background: transparent; border: none; color: #fff; cursor: pointer; } .c-sticky-cta__toggle:active { transform: scale(0.98); } .c-sticky-cta__icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex-shrink: 0; } .c-sticky-cta__icon svg { width: 24px; height: 24px; } .c-sticky-cta__number { display: block; max-width: 0; overflow: hidden; white-space: nowrap; font-weight: 600; font-size: var(--text-base); color: #fff; text-decoration: none; transition: max-width 0.3s ease, padding 0.3s ease; padding: 0; } .c-sticky-cta__close { display: flex; align-items: center; justify-content: center; width: 0; overflow: hidden; flex-shrink: 0; transition: width 0.3s ease, padding 0.3s ease; padding: 0; background: transparent; border: none; color: #fff; cursor: pointer; } .c-sticky-cta__close svg { width: 20px; height: 20px; opacity: 0.8; } /* Expanded state */ .c-sticky-cta.is-open { background: var(--color-brand-dark); } .c-sticky-cta.is-open .c-sticky-cta__number { max-width: 200px; padding-right: var(--space-xs); } .c-sticky-cta.is-open .c-sticky-cta__close { width: 44px; padding-right: var(--space-sm); } /* ================================================================= ICON CARDS ================================================================= */ .c-icon-cards { padding: var(--space-4xl) 0; position: relative; } .c-icon-cards--bg-light { background: var(--color-bg-light); } .c-icon-cards--bg-dark { background: var(--color-neutral-800); color: #fff; } .c-icon-cards--bg-dark h2, .c-icon-cards--bg-dark h3, .c-icon-cards--bg-dark h4 { color: #fff; } .c-icon-cards--bg-brand { background: var(--color-brand); color: #fff; } .c-icon-cards--bg-brand h2, .c-icon-cards--bg-brand h3, .c-icon-cards--bg-brand h4 { color: #fff; } .c-icon-cards__inner { position: relative; z-index: 1; } .c-icon-cards__header { margin-bottom: var(--space-2xl); } .c-icon-cards__header h2, .c-icon-cards__header h3, .c-icon-cards__header h4 { margin-bottom: var(--space-md); } .c-icon-cards__header .subhead { font-size: var(--text-lg); color: var(--color-neutral-600); } .c-icon-cards--bg-dark .c-icon-cards__header .subhead, .c-icon-cards--bg-brand .c-icon-cards__header .subhead, .c-icon-cards--bg-image .c-icon-cards__header .subhead { color: rgba(255,255,255,0.8); } .c-icon-cards__grid { display: grid; gap: 2.5rem; } .c-icon-cards--cols-2 .c-icon-cards__grid { grid-template-columns: repeat(2, 1fr); } .c-icon-cards--cols-3 .c-icon-cards__grid { grid-template-columns: repeat(3, 1fr); } .c-icon-cards--cols-4 .c-icon-cards__grid { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1024px) { .c-icon-cards--cols-3 .c-icon-cards__grid, .c-icon-cards--cols-4 .c-icon-cards__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .c-icon-cards__grid { grid-template-columns: 1fr !important; } } /* Card base */ .c-icon-card { display: flex; flex-direction: column; gap: var(--space-md); } /* Icon positioning */ .c-icon-cards--top .c-icon-card { text-align: left; align-items: flex-start; } .c-icon-cards--left .c-icon-card { flex-direction: row; align-items: flex-start; } /* Card styles */ .c-icon-cards--boxed .c-icon-card { background: #fff; padding: 3rem; border-radius: 16px; box-shadow: var(--shadow-sm); } .c-icon-cards--bg-dark.c-icon-cards--boxed .c-icon-card, .c-icon-cards--bg-brand.c-icon-cards--boxed .c-icon-card, .c-icon-cards--bg-image.c-icon-cards--boxed .c-icon-card { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); } .c-icon-cards--bordered .c-icon-card { border: 1px solid var(--color-neutral-200); padding: 3rem; border-radius: 16px; } .c-icon-cards--bg-dark.c-icon-cards--bordered .c-icon-card, .c-icon-cards--bg-brand.c-icon-cards--bordered .c-icon-card, .c-icon-cards--bg-image.c-icon-cards--bordered .c-icon-card { border-color: rgba(255,255,255,0.2); } /* Icon */ .c-icon-card__icon { width: 72px; height: 72px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--color-secondary-50); border-radius: 9999px; color: var(--color-secondary-500); } .c-icon-card__icon svg { width: 40px; height: 40px; } .c-icon-card__img { width: 100%; height: 100%; object-fit: contain; } .c-icon-cards--bg-dark .c-icon-card__icon, .c-icon-cards--bg-brand .c-icon-card__icon, .c-icon-cards--bg-image .c-icon-card__icon { background: rgba(255,255,255,0.15); color: #fff; } /* Content */ .c-icon-card__content { flex: 1; } .c-icon-card__title { font-family: var(--font-heading); font-size: 2rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; color: var(--color-primary-700); margin-bottom: var(--space-xs); } .c-icon-card__desc { font-size: var(--text-lg); color: var(--color-neutral-900); line-height: 1.5; margin-bottom: var(--space-sm); } .c-icon-cards--bg-dark .c-icon-card__desc, .c-icon-cards--bg-brand .c-icon-card__desc, .c-icon-cards--bg-image .c-icon-card__desc { color: rgba(255,255,255,0.8); } .c-icon-card__link { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 600; color: var(--color-brand); text-decoration: none; transition: gap 0.2s ease; } .c-icon-card__link:hover { gap: var(--space-sm); } .c-icon-card__link svg { width: 16px; height: 16px; } .c-icon-cards--bg-dark .c-icon-card__link, .c-icon-cards--bg-brand .c-icon-card__link, .c-icon-cards--bg-image .c-icon-card__link { color: #fff; } /* ================================================================= MAP EMBED ================================================================= */ .c-map { padding: var(--space-3xl) 0; position: relative; } .c-map--bg-light { background: var(--color-bg-light); } .c-map--bg-dark { background: var(--color-neutral-800); color: #fff; } .c-map--bg-dark h2, .c-map--bg-dark h3, .c-map--bg-dark h4 { color: #fff; } .c-map--bg-brand { background: var(--color-brand); color: #fff; } .c-map--bg-brand h2, .c-map--bg-brand h3, .c-map--bg-brand h4 { color: #fff; } .c-map__inner { position: relative; z-index: 1; } .c-map__header { text-align: center; max-width: 800px; margin: 0 auto var(--space-2xl); } .c-map__header h2, .c-map__header h3, .c-map__header h4 { font-size: var(--text-3xl); margin-bottom: var(--space-md); } .c-map__header .subhead { font-size: var(--text-lg); color: var(--color-neutral-600); } .c-map--bg-dark .c-map__header .subhead, .c-map--bg-brand .c-map__header .subhead, .c-map--bg-image .c-map__header .subhead { color: rgba(255,255,255,0.8); } .c-map__embed { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); } .c-map__embed iframe { display: block; width: 100%; border: 0; } /* Height variants */ .c-map--h-small .c-map__embed iframe { height: 300px; } .c-map--h-medium .c-map__embed iframe { height: 450px; } .c-map--h-large .c-map__embed iframe { height: 600px; } @media (max-width: 767px) { .c-map--h-small .c-map__embed iframe { height: 250px; } .c-map--h-medium .c-map__embed iframe { height: 350px; } .c-map--h-large .c-map__embed iframe { height: 450px; } } /* ================================================================= CONTACT INFO BLOCK ================================================================= */ .c-contact-info { padding: var(--space-4xl) 0; position: relative; } .c-contact-info--bg-white { background: #fff; } .c-contact-info--bg-light { background: var(--color-bg-light); } .c-contact-info--bg-dark { background: linear-gradient(135deg, var(--color-primary-800) 0%, var(--color-primary-900) 100%); color: #fff; } .c-contact-info--bg-dark h2, .c-contact-info--bg-dark h3, .c-contact-info--bg-dark h4 { color: #fff; } .c-contact-info--bg-brand { background: var(--color-brand); color: #fff; } .c-contact-info--bg-brand h2, .c-contact-info--bg-brand h3, .c-contact-info--bg-brand h4 { color: #fff; } .c-contact-info__inner { position: relative; z-index: 1; } .c-contact-info__header { text-align: center; max-width: 760px; margin: 0 auto var(--space-3xl); } .c-contact-info__header h2, .c-contact-info__header h3, .c-contact-info__header h4 { font-size: var(--text-4xl); line-height: 1.05; margin-bottom: var(--space-md); } .c-contact-info__header .subhead { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text-muted); } .c-contact-info--bg-dark .c-contact-info__header .subhead, .c-contact-info--bg-brand .c-contact-info__header .subhead, .c-contact-info--bg-image .c-contact-info__header .subhead { color: rgba(255,255,255,0.85); } /* Items grid — auto-fit cards across the available width, stacks on mobile */ .c-contact-info__items { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); max-width: 1080px; margin: 0 auto; } @media (min-width: 720px) { .c-contact-info__items { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-xl); } } /* Individual item — each is a centered card */ .c-contact-info__item { position: relative; display: flex; flex-direction: row; align-items: center; text-align: left; gap: var(--space-md); padding: var(--space-lg); background: #fff; border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); transition: transform var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition); } /* Stretched-link pattern: an absolutely-positioned pseudo-element on the link covers the entire card so the whole padded surface is clickable. The visible link text still styles itself normally. */ .c-contact-info__item .c-contact-info__link::before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .c-contact-info__item:has(.c-contact-info__link) { cursor: pointer; } /* Hover/focus only applies when the card actually has a link to click. The :has() selector means cards without a link (e.g. Hours) stay static. */ .c-contact-info__item:has(.c-contact-info__link):hover, .c-contact-info__item:has(.c-contact-info__link):focus-within { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--color-primary-200); } /* Light backgrounds: keep card on a clean white so it stands out */ .c-contact-info--bg-white .c-contact-info__item { background: var(--color-bg-light); border-color: var(--color-neutral-200); } /* Dark / brand / image backgrounds: glass-card treatment */ .c-contact-info--bg-dark .c-contact-info__item, .c-contact-info--bg-brand .c-contact-info__item, .c-contact-info--bg-image .c-contact-info__item { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); backdrop-filter: blur(8px); } .c-contact-info--bg-dark .c-contact-info__item:has(.c-contact-info__link):hover, .c-contact-info--bg-dark .c-contact-info__item:has(.c-contact-info__link):focus-within, .c-contact-info--bg-brand .c-contact-info__item:has(.c-contact-info__link):hover, .c-contact-info--bg-brand .c-contact-info__item:has(.c-contact-info__link):focus-within, .c-contact-info--bg-image .c-contact-info__item:has(.c-contact-info__link):hover, .c-contact-info--bg-image .c-contact-info__item:has(.c-contact-info__link):focus-within { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.20); box-shadow: none; } /* Icon — larger, soft coral ring with brand-accent icon color */ .c-contact-info__icon { width: 64px; height: 64px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--color-accent-50); border-radius: 50%; color: var(--color-brand-accent); transition: transform var(--transition); } .c-contact-info__item:has(.c-contact-info__link):hover .c-contact-info__icon, .c-contact-info__item:has(.c-contact-info__link):focus-within .c-contact-info__icon { transform: scale(1.05); } .c-contact-info__icon svg { width: 28px; height: 28px; color: currentColor; } /* Force every SVG element to follow the parent's color, so icons with hardcoded fills/strokes (like the clock SVG's orange) still match. */ .c-contact-info__icon svg [fill]:not([fill="none"]) { fill: currentColor !important; } .c-contact-info__icon svg [stroke]:not([stroke="none"]) { stroke: currentColor !important; } .c-contact-info__icon svg path, .c-contact-info__icon svg circle, .c-contact-info__icon svg rect, .c-contact-info__icon svg line, .c-contact-info__icon svg polyline, .c-contact-info__icon svg polygon { color: currentColor; } .c-contact-info--bg-dark .c-contact-info__icon, .c-contact-info--bg-brand .c-contact-info__icon, .c-contact-info--bg-image .c-contact-info__icon { background: rgba(255,255,255,0.12); color: #fff; } .c-contact-info__content { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); min-width: 0; } /* Label — Barlow Condensed bold, brand-aqua color tag */ .c-contact-info__label { font-family: var(--font-heading); font-size: 0.875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-secondary-700); margin: 0; } .c-contact-info--bg-dark .c-contact-info__label, .c-contact-info--bg-brand .c-contact-info__label, .c-contact-info--bg-image .c-contact-info__label { color: var(--color-secondary-300); } /* Value — bigger, more impactful */ .c-contact-info__value { font-family: var(--font-heading); font-weight: 800; font-size: var(--text-xl); line-height: 1.2; letter-spacing: var(--tracking-tight); color: var(--color-primary-900); margin: 0; word-break: break-word; } .c-contact-info--bg-dark .c-contact-info__value, .c-contact-info--bg-brand .c-contact-info__value, .c-contact-info--bg-image .c-contact-info__value { color: #fff; } .c-contact-info__link { color: var(--color-primary-900); text-decoration: none; transition: color var(--transition); } .c-contact-info__link:hover, .c-contact-info__link:focus-visible { color: var(--color-brand); } .c-contact-info--bg-dark .c-contact-info__link, .c-contact-info--bg-brand .c-contact-info__link, .c-contact-info--bg-image .c-contact-info__link { color: #fff; } .c-contact-info--bg-dark .c-contact-info__link:hover, .c-contact-info--bg-brand .c-contact-info__link:hover, .c-contact-info--bg-image .c-contact-info__link:hover { color: var(--color-secondary-200); } .c-contact-info__empty { text-align: center; color: var(--color-text-muted); font-style: italic; } /* Layout modifier overrides — cards stay icon-left/text-left in both layouts. --inline lays them out horizontally (grid auto-fit), --stacked is a single column. */ .c-contact-info--inline .c-contact-info__items { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .c-contact-info--stacked .c-contact-info__items { grid-template-columns: 1fr; max-width: 480px; } /* ================================================================= ARCHIVE ================================================================= */ .archive-page { padding: var(--space-3xl) 0; } .archive-page__header { margin-bottom: var(--space-2xl); } .archive-page__title { font-size: var(--text-4xl); margin-bottom: var(--space-sm); } .archive-page__description { font-size: var(--text-lg); color: var(--color-neutral-600); max-width: 700px; } .archive-page__description p:last-child { margin-bottom: 0; } /* Archive grid */ .archive-page__grid { display: grid; gap: var(--space-xl); } .archive-page--grid.archive-page--cols-2 .archive-page__grid { grid-template-columns: repeat(2, 1fr); } .archive-page--grid.archive-page--cols-3 .archive-page__grid { grid-template-columns: repeat(3, 1fr); } @media (max-width: 1024px) { .archive-page--grid.archive-page--cols-3 .archive-page__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .archive-page__grid { grid-template-columns: 1fr !important; } } /* List layout */ .archive-page--list .archive-page__grid { display: flex; flex-direction: column; gap: var(--space-lg); } .archive-page--list .archive-card { flex-direction: row; align-items: flex-start; } .archive-page--list .archive-card__image { width: 280px; flex-shrink: 0; } @media (max-width: 767px) { .archive-page--list .archive-card { flex-direction: column; } .archive-page--list .archive-card__image { width: 100%; } } /* Archive card */ .archive-card { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: box-shadow 0.2s ease, transform 0.2s ease; } .archive-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .archive-card__image { display: block; overflow: hidden; } .archive-card__image img { aspect-ratio: 16/9; object-fit: cover; width: 100%; transition: transform 0.3s ease; } .archive-card:hover .archive-card__image img { transform: scale(1.03); } .archive-card__content { padding: var(--space-lg); flex: 1; display: flex; flex-direction: column; } .archive-card__header { margin-bottom: var(--space-sm); } .archive-card__title { font-size: var(--text-xl); line-height: var(--leading-tight); margin-bottom: var(--space-xs); } .archive-card__title a { color: inherit; text-decoration: none; } .archive-card__title a:hover { color: var(--color-brand); } .archive-card__meta { font-size: var(--text-sm); color: var(--color-neutral-500); display: flex; align-items: center; gap: var(--space-xs); } .archive-card__sep { opacity: 0.5; } .archive-card__excerpt { color: var(--color-neutral-600); flex: 1; } .archive-card__excerpt p { margin: 0; } /* Empty state */ .archive-page__empty { text-align: center; padding: var(--space-3xl) var(--space-xl); color: var(--color-neutral-500); } /* Pagination */ .pagination { margin-top: var(--space-2xl); display: flex; justify-content: center; } .pagination__list { display: flex; gap: var(--space-xs); list-style: none; padding: 0; margin: 0; } .pagination__item a, .pagination__item span { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 var(--space-sm); border-radius: var(--radius); text-decoration: none; font-weight: 500; transition: background 0.2s ease, color 0.2s ease; } .pagination__item a { color: var(--color-neutral-700); background: var(--color-neutral-100); } .pagination__item a:hover { background: var(--color-brand); color: #fff; } .pagination__item--current span { background: var(--color-brand); color: #fff; } /* ================================================================= SINGLE POST ================================================================= */ .single-page { padding: var(--space-3xl) 0; } /* Post article */ .single-post { margin-bottom: var(--space-2xl); } .single-post__header { margin-bottom: var(--space-xl); } .single-post__title { font-size: var(--text-4xl); line-height: var(--leading-tight); margin-bottom: var(--space-sm); } .single-post__meta { font-size: var(--text-sm); color: var(--color-neutral-500); } .single-post__image { margin-bottom: var(--space-xl); border-radius: var(--radius); overflow: hidden; } .single-post__image img { width: 100%; height: auto; } .single-post__content { margin-bottom: var(--space-xl); } .single-post__footer { padding-top: var(--space-lg); border-top: 1px solid var(--color-neutral-200); } .single-post__taxonomies { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; margin-bottom: var(--space-sm); } .single-post__taxonomies:last-child { margin-bottom: 0; } .single-post__tax-label { font-weight: 600; color: var(--color-neutral-600); margin-right: var(--space-xs); } .single-post__taxonomies a { color: var(--color-brand); text-decoration: none; } .single-post__taxonomies a:hover { text-decoration: underline; } /* Author box */ .author-box { display: flex; gap: var(--space-lg); padding: var(--space-xl); background: var(--color-neutral-50); border-radius: var(--radius); margin-bottom: var(--space-2xl); } @media (max-width: 600px) { .author-box { flex-direction: column; text-align: center; } } .author-box__avatar { flex-shrink: 0; } .author-box__img { width: 80px; height: 80px; border-radius: 50%; } .author-box__content { flex: 1; } .author-box__name { font-size: var(--text-lg); margin-bottom: var(--space-xs); } .author-box__name a { color: inherit; text-decoration: none; } .author-box__name a:hover { color: var(--color-brand); } .author-box__bio { color: var(--color-neutral-600); margin-bottom: var(--space-sm); } .author-box__bio p:last-child { margin-bottom: 0; } .author-box__link { color: var(--color-brand); text-decoration: none; font-weight: 500; } .author-box__link:hover { text-decoration: underline; } /* Related posts */ .related-posts { margin-bottom: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-neutral-200); } .related-posts__title { font-size: var(--text-2xl); margin-bottom: var(--space-lg); } .related-posts__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } @media (max-width: 767px) { .related-posts__grid { grid-template-columns: 1fr; } } .related-posts__item { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .related-posts__image { display: block; overflow: hidden; } .related-posts__image img { aspect-ratio: 16/9; object-fit: cover; width: 100%; transition: transform 0.3s ease; } .related-posts__item:hover .related-posts__image img { transform: scale(1.03); } .related-posts__item-title { font-size: var(--text-base); padding: var(--space-md); padding-bottom: var(--space-xs); } .related-posts__item-title a { color: inherit; text-decoration: none; } .related-posts__item-title a:hover { color: var(--color-brand); } .related-posts__date { display: block; padding: 0 var(--space-md) var(--space-md); font-size: var(--text-sm); color: var(--color-neutral-500); } /* Post navigation */ .post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); padding-top: var(--space-xl); border-top: 1px solid var(--color-neutral-200); } @media (max-width: 600px) { .post-nav { grid-template-columns: 1fr; } } .post-nav__link { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-lg); background: var(--color-neutral-50); border-radius: var(--radius); text-decoration: none; transition: background 0.2s ease; } .post-nav__link:hover { background: var(--color-neutral-100); } .post-nav__link--empty { opacity: 0; pointer-events: none; } .post-nav__link--next { text-align: right; } .post-nav__label { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); font-weight: 600; color: var(--color-neutral-500); text-transform: uppercase; letter-spacing: 0.05em; } .post-nav__link--next .post-nav__label { justify-content: flex-end; } .post-nav__label svg { width: 16px; height: 16px; } .post-nav__title { font-size: var(--text-lg); font-weight: 600; color: var(--color-neutral-800); line-height: var(--leading-tight); } /* Search form */ .search-form-wrap { margin-bottom: var(--space-2xl); } .search-form { display: flex; gap: var(--space-sm); max-width: 500px; } .search-form label { flex: 1; } .search-form .search-field { width: 100%; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-neutral-300); border-radius: var(--radius); font-size: var(--text-base); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .search-form .search-field:focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } .search-form .search-submit { padding: var(--space-sm) var(--space-lg); background: var(--color-brand); color: #fff; border: none; border-radius: var(--radius); font-weight: 600; cursor: pointer; transition: background 0.2s ease; } .search-form .search-submit:hover { background: var(--color-brand-dark); } /* ================================================================= 404 PAGE ================================================================= */ .error-404 { padding: var(--space-3xl) 0; min-height: 60vh; display: flex; align-items: center; text-align: center; background: var(--color-bg-light); } .error-404 .container { width: 100%; max-width: 600px; } .error-404__code { font-family: var(--font-heading); font-size: clamp(6rem, 20vw, 12rem); font-weight: 700; line-height: 1; color: var(--color-brand); margin-bottom: var(--space-md); } .error-404 h1 { font-size: var(--text-3xl); color: var(--color-neutral-800); margin-bottom: var(--space-md); } .error-404__content { color: var(--color-neutral-600); margin-bottom: var(--space-xl); } .error-404__content p { margin-bottom: var(--space-md); } .error-404__content p:last-child { margin-bottom: 0; } .error-404__actions { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; } /* On the 404 page the hero area sits directly under the header with no other colored section to mask it — give the header a solid brand background so it doesn't float on the page's lighter body color. */ body.error404 .site-header { background: var(--color-primary-800); } .page-content { padding: var(--space-3xl) 0; } .page-content h1 { margin-bottom: var(--space-xl); } /* ================================================================= RESPONSIVE REFINEMENTS - Surfside Pools ================================================================= */ @media (max-width: 1024px) { .c-hero { padding: var(--space-3xl) 0 var(--space-2xl); } .c-hero__headline { font-size: var(--text-5xl); } .c-hero__subhead { font-size: var(--text-lg); } .c-content-media, .c-cards, .c-testimonials, .c-accordion, .c-cta, .c-form-section, .c-gallery, .c-text-block { padding: var(--space-3xl) 0; } .c-content-media__inner { gap: var(--space-2xl); } .c-cta__headline { font-size: var(--text-4xl); } .site-footer { padding: var(--space-3xl) 0 var(--space-lg); } } @media (max-width: 768px) { .site-header__inner {height: 100px;} .site-header__logo img {height: 80px;} body.scrolled .site-header__inner { height: 80px; } body.scrolled .site-header__logo img { height: 60px; } .c-hero { padding: var(--space-2xl) 0; /* text-align: left; */ min-height: 0 !important; } .c-hero--h-medium, .c-hero--h-large, .c-hero--h-full { min-height: 60vh; } .c-hero__headline { font-size: var(--text-5xl); line-height: 1; } .c-hero__subhead { font-size: var(--text-base); margin-bottom: var(--space-lg); } .c-hero__buttons { flex-direction: column; align-items: stretch; gap: var(--space-sm); width: 100%; max-width: 320px; } .c-hero__buttons .btn { justify-content: center; width: 100%; } .c-cta__headline { font-size: var(--text-4xl); } .c-cta__buttons { width: 100%; } .c-cta__buttons .btn { width: 100%; justify-content: center; } .c-cta--center .c-cta__buttons { flex-direction: column; max-width: 320px; margin-left: auto; margin-right: auto; } .c-cards__header h2, .c-testimonials__header h2, .c-accordion__header h2 { font-size: var(--text-4xl); } .c-testimonial { padding: var(--space-xl) var(--space-md); } .c-testimonial__quote { font-size: var(--text-xl); } .c-testimonial::before { font-size: 5rem; top: -0.3em; } .c-card__title { font-size: var(--text-xl); } .c-card__content { padding: var(--space-lg); } .site-footer__columns { flex-direction: column; gap: var(--space-xl); } .site-footer__col { flex-basis: 100% !important; max-width: 100% !important; } .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-sm); } .site-footer__credits { font-size: var(--text-xs); } .c-content-media__buttons { flex-direction: column; align-items: stretch; } .c-content-media__buttons .btn { width: 100%; justify-content: center; } .c-cards__buttons { flex-direction: column; align-items: stretch; } .c-cards__buttons .btn { width: 100%; justify-content: center; } /* Larger tap targets in mobile nav */ .site-nav__phone { padding: var(--space-md) var(--space-sm); font-size: 1.125rem; } .site-nav__phone svg { width: 22px; height: 22px; } } @media (max-width: 480px) { :root { --text-5xl: 2.5rem; --text-6xl: 2.75rem; } .c-hero__headline { font-size: 2.5rem; } .c-cta__headline { font-size: 2rem; } .c-cards__header h2, .c-testimonials__header h2, .c-accordion__header h2 { font-size: 2rem; } } /* ================================================================= SURFSIDE POOLS - BRAND OVERRIDES ================================================================= */ /* Suppress all header transitions on initial load to prevent scroll-restoration nudge */ body.header-init .site-header, body.header-init .site-header::before, body.header-init .site-header__inner, body.header-init .site-header__logo img { transition: none !important; } /* Header gradient shim over dark hero (non-scrolled) */ .site-header { background-color: transparent; border-bottom-color: transparent; box-shadow: none; } /* Gradient lives on ::before so it can cross-fade with the solid scrolled background-color */ .site-header::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(8, 32, 64, 0.72) 0%, rgba(8, 32, 64, 0) 100%); opacity: 1; transition: opacity var(--transition); pointer-events: none; } body.scrolled .site-header { background-color: var(--color-primary-800); } body.scrolled .site-header::before { opacity: 0; } /* Keep inner content above the ::before gradient overlay */ .site-header__inner { position: relative; z-index: 1; } .site-header .btn--sm, .site-header a[href*="tel"], .site-nav__menu > li > a { color: rgba(255, 255, 255, 1); font-weight:900; font-size:1.5rem; letter-spacing:0; } .site-nav__menu > li > a:hover, .site-nav__menu > li.current-menu-item > a, .site-nav__menu > li.current-menu-ancestor > a { color: #fff; } .site-nav__phone { color: rgba(255, 255, 255, 1); font-family:var(--font-heading); font-weight:500;} .site-header__toggle span, .site-header__toggle::before, .site-header__toggle::after { background: #fff; } /* --- Hero bleeds behind transparent header --- */ .c-hero { margin-top: -160px; padding-top: calc(var(--space-4xl) + 120px); padding-bottom: calc(var(--space-4xl) + 40px); } @media (max-width: 768px) { .c-hero { margin-top: -100px; padding-top: calc(var(--space-2xl) + 100px); } } /* --- Hero - navy overlay (replaces teal) --- */ .c-hero__overlay { background: linear-gradient(180deg, rgba(8, 32, 64, 0.55) 0%, rgba(8, 32, 64, 0.30) 45%, rgba(8, 32, 64, 0) 100%), linear-gradient(90deg, rgba(8, 32, 64, 0.65) 0%, rgba(8, 32, 64, 0.15) 60%, rgba(8, 32, 64, 0) 100%); } /* --- Hero - remove bottom fade strip --- */ .c-hero::after { content: none; } /* --- Hero headline - Barlow Condensed ExtraBold uppercase Responsive scale: 48px at narrow widths, scales with viewport, capped at 96px (6rem) on wide screens. */ .c-hero__headline { font-size: clamp(3rem, 1.5rem + 6.5vw, 6rem); line-height: 0.92; text-transform: uppercase; letter-spacing: -0.02em; } .c-hero--minimal .c-hero__headline { text-transform: none; letter-spacing: 0; } /* --- Hero breadcrumbs - white on dark background --- */ .c-hero__breadcrumbs { margin-bottom: var(--space-xs); } .c-hero__breadcrumbs .rank-math-breadcrumb, .c-hero__breadcrumbs .breadcrumbs { font-size: var(--text-sm); } .c-hero__breadcrumbs .rank-math-breadcrumb p { margin: 0; font-family:var(--font-heading); font-weight:500; text-transform:uppercase; font-size:1.25rem; } .c-hero__breadcrumbs .breadcrumbs__link, .c-hero__breadcrumbs .rank-math-breadcrumb a { color: rgba(255, 255, 255, 1); text-decoration: none; transition: color var(--transition); } .c-hero__breadcrumbs .breadcrumbs__link:hover, .c-hero__breadcrumbs .rank-math-breadcrumb a:hover { opacity:0.7!important; } .c-hero__breadcrumbs .breadcrumbs__sep, .c-hero__breadcrumbs .rank-math-breadcrumb .separator { color: rgba(255, 255, 255, 1); padding:0 .25rem; } .c-hero__breadcrumbs .breadcrumbs__current, .c-hero__breadcrumbs .rank-math-breadcrumb span:not(.separator) { color: rgba(255, 255, 255, 0.9); } /* --- btn--accent - use amber/orange secondary scale --- */ .btn--accent { /* box-shadow: 0 12px 28px -8px rgba(246, 135, 19, 0.45); */ background: var(--color-secondary-600); border-color: var(--color-secondary-600); } .btn--accent:hover { background: var(--color-secondary-500); border-color: var(--color-secondary-500); } /* --- Nav actions border - subtle on dark header states --- */ body.has-dark-hero .site-nav__actions, body.scrolled .site-nav__actions { /* border-left-color: rgba(255, 255, 255, 0.2); */ } /* --- Section headings - Barlow Condensed ExtraBold uppercase navy --- */ .c-content-media h2, .c-cards__header h2, .c-testimonials__header h2, .c-accordion__header h2, .c-icon-cards__header h2, .c-gallery__header h2, .c-text-block h2, .c-form-section__content h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(2.25rem, 1.75rem + 2.5vw, 3.75rem); text-transform: uppercase; letter-spacing: -0.02em; color: var(--color-primary-700); } /* Component H2 strong orange accent highlight */ .c-content-media h2 strong, .c-cards__header h2 strong, .c-testimonials__header h2 strong, .c-accordion__header h2 strong, .c-icon-cards__header h2 strong, .c-gallery__header h2 strong, .c-text-block h2 strong, .c-form-section__content h2 strong { color: var(--color-brand-accent); font-weight: inherit; } /* Content Media H2 strong -- own line */ .c-content-media h2 strong { display: block; } /* --- Content Media - warm background variant --- */ .c-content-media--bg-warm { background: var(--color-bg-warm); } /* --- Content Media - 20px image border-radius --- */ .c-content-media__image { border-radius: 20px; overflow: hidden; } .c-content-media__image img, .c-content-media__image { border-radius:20px; } /* --- Content Media + Form Section + Text Block: checklist separator lines + orange-angle marker. All three components share the same prose list treatment so editors can move content between them without restyling. --- */ .c-content-media .prose ul li, .c-form-section__content .prose ul li, .c-text-block .prose ul li { padding-bottom: 20px; margin-bottom: 20px; padding-left: 2.25rem; border-bottom: 1px solid rgba(143, 189, 255, 0.4); text-align: left; } .c-content-media .prose ul li:last-child, .c-form-section__content .prose ul li:last-child, .c-text-block .prose ul li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .c-content-media .prose ul li::before, .c-form-section__content .prose ul li::before, .c-text-block .prose ul li::before { background: url("/wp-content/uploads/orange-angle.svg") center / contain no-repeat; border: none; border-radius: 0; width: 22px; height: 22px; top: 0.1em; } .c-content-media .prose ul li::after, .c-form-section__content .prose ul li::after, .c-text-block .prose ul li::after { content: none; } /* When a text-block is center-aligned (default/narrow widths), let the
    container center but keep each list item's text left-aligned so the orange-angle marker reads correctly next to its label. */ .c-text-block__inner:not(.container--wide) .prose ul, .c-text-block__inner:not(.container--wide) .prose ol { display: inline-block; text-align: left; } /* --- Content Media: Parallax variants --- */ /* Inner is full-width (no container class) -- content column pads to match container inset */ .c-content-media--right-parallax .c-content-media__inner, .c-content-media--left-parallax .c-content-media__inner { gap: 0; } @media (min-width: 768px) { /* Content ~56%, image ~44% -- matches Figma 1069:851 column ratio */ .c-content-media--right-parallax .c-content-media__inner { grid-template-columns: 5fr 4fr; align-items: stretch; } /* Left-parallax: media goes first (order:-1), content gets the wider right column */ .c-content-media--left-parallax .c-content-media__inner { grid-template-columns: 4fr 5fr; align-items: stretch; } .c-content-media--left-parallax .c-content-media__media { order: -1; } /* Frame fills full column height at desktop */ .c-content-media__parallax-frame { height: 100%; min-height: 0; } } .c-content-media--has-parallax { padding: 0; overflow: hidden; } /* Align content left edge with container content edge */ .c-content-media--has-parallax .c-content-media__content { display: flex; flex-direction: column; justify-content: center; padding-top: var(--space-4xl); padding-bottom: var(--space-4xl); padding-left: max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter))); padding-right: var(--space-3xl); z-index:1; } /* Cap text children at 774px -- padding is outside this limit (content-box intent) */ .c-content-media--has-parallax .c-content-media__content > * { max-width: 774px; } /* Left-parallax: content is the right column -- mirror the inset */ .c-content-media--left-parallax .c-content-media__content { padding-left: var(--space-3xl); padding-right: max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter))); z-index:1; position:relative; } .c-content-media__parallax-frame { position: relative; overflow: hidden; min-height: 400px; max-width: 716px; /* Gap between image and right viewport edge */ margin-right: var(--gutter); } @media (max-width: 767px) { .c-content-media--has-parallax .c-content-media__content { padding: var(--space-2xl) var(--gutter); } .c-content-media__parallax-frame{ overflow:visible; } } /* Left-parallax: gap is on the left side */ .c-content-media--left-parallax .c-content-media__parallax-frame { margin-right: 0; margin-left: var(--gutter); } /* Natural aspect ratio -- fills frame width, no horizontal cropping */ .c-content-media__parallax-frame img { position: absolute; top: 0; left: 0; width: 100%; height: auto; max-width: none; display: block; will-change: transform; border-radius: 0; box-shadow: none; z-index: 0; } @media (prefers-reduced-motion: reduce) { .c-content-media__parallax-frame img { will-change: auto; } } /* --- Cards default - Barlow Condensed title + angle-up arrow --- */ .c-card__title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.25rem, 1rem + 0.75vw, 1.625rem); text-transform: uppercase; letter-spacing: -0.01em; color: var(--color-primary-700); } /* Last word + arrow are nowrap -- prevents arrow orphaning to its own line */ a.c-card .c-card__title-end { white-space: nowrap; } a.c-card .c-card__title-end::after { content: ''; display: inline-block; width: 22px; height: 22px; vertical-align: middle; margin-left: 10px; background-color: var(--color-secondary-500); -webkit-mask: url('/wp-content/uploads/angle-up.svg') center / contain no-repeat; mask: url('/wp-content/uploads/angle-up.svg') center / contain no-repeat; transition: background-color var(--transition); } a.c-card:hover .c-card__title-end::after { background-color: var(--color-secondary-600); } /* --- Cards overlay - Figma spec --- */ /* Header: left-aligned, full-width, 40px gap to grid per Figma */ .c-cards--style-overlay .c-cards__header { text-align: left; max-width: none; margin-left: 0; margin-right: 0; margin-bottom: 2.5rem; } .c-cards--style-overlay .c-card { border-radius: 16px; min-height: 441px; border: none; } .c-cards--style-overlay .c-card__content { padding: 48px; gap: 1rem; } .c-cards--style-overlay .c-card__title { font-size: 2rem; letter-spacing: -0.5px; color: #fff; } .c-cards--style-overlay .c-card__desc { color: #fff; font-size: var(--text-lg); line-height: 1.5; flex: none; } /* overlay arrow: 32px white, inline after last word */ .c-cards--style-overlay a.c-card .c-card__title-end::after { width: 32px; height: 32px; background-color: #fff; } .c-cards--style-overlay a.c-card:hover .c-card__title-end::after { background-color: rgba(255, 255, 255, 0.8); } /* overlay gradient: pure black per Figma */ .c-cards--style-overlay .c-card__image::after { background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.2) 100%); } /* --- Testimonials - warm bg + grid: white cards, handwritten quote --- */ .c-testimonials--bg-warm { background: var(--color-bg-warm); } .c-testimonials--grid .c-testimonial { background: #fff; border-radius: 16px; box-shadow: 0 4px 24px -6px rgba(8, 32, 64, 0.1); padding: var(--space-xl); } .c-testimonials--grid .c-testimonial__quote { font-family: var(--font-script); font-size: 1.75rem; font-weight: 400; font-style: normal; line-height: 1.4; color: var(--color-primary-900); letter-spacing: 0; } .c-testimonial__stars { display: flex; gap: 2px; margin-bottom: var(--space-sm); color: var(--color-secondary-400); } .c-testimonial__stars svg { width: 18px; height: 18px; fill: currentColor; } /* --- Testimonials slider - 3-per-slide Figma layout --- */ .c-testimonials--slider .c-testimonials__header { text-align: left; max-width: none; margin-left: 0; margin-right: 0; margin-bottom: 2.5rem; } /* Slider track: all slides laid out horizontally, viewport clips to one at a time */ .c-testimonials__viewport { overflow: hidden; } .c-testimonials__track { display: flex; transition: transform 0.5s ease-in-out; will-change: transform; } @media (prefers-reduced-motion: reduce) { .c-testimonials__track { transition: none; } } .c-testimonials__slide { flex: 0 0 100%; min-width: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } .c-testimonials--slider .c-testimonial { display: flex; flex-direction: column; text-align: left; max-width: none; margin: 0; padding: 49px 31px 49px 49px; background: #fff; border-radius: 16px; min-height: 371px; /* box-shadow: 0 2px 16px rgba(8, 32, 64, 0.08); */ } /* On a white-background slider, the cards lose their visual edge — add a light stroke so they read as distinct surfaces. */ .c-testimonials--bg-white.c-testimonials--slider .c-testimonial { border: 1px solid var(--color-neutral-200); } .c-testimonials--slider .c-testimonial::before { content: none; } .c-testimonials--slider .c-testimonial__stars { gap: 4px; margin-bottom: 1.375rem; flex-shrink: 0; } .c-testimonials--slider .c-testimonial__star { width: 38px; height: 38px; } .c-testimonials--slider .c-testimonial__quote { font-family: var(--font-script); font-size: 2rem; font-weight: 400; font-style: normal; line-height: 1.125; color: #141516; letter-spacing: 0; margin-bottom: 0; flex-grow: 1; margin-block-start:0; margin-inline-start:0; margin-inline-end:0; } .c-testimonials--slider .c-testimonial__author { flex-direction: column; justify-content: flex-start; align-items:flex-start; gap: 0; flex-shrink: 0; margin-top: 0; } .c-testimonials--slider .c-testimonial__author cite { font-weight: 800; font-size: 1.25rem; color: #141516; line-height: 1.5; } .c-testimonials--slider .c-testimonial__author span { font-weight: 400; font-size: 1.25rem; color: #141516; line-height: 1.5; } .c-testimonials--slider .c-testimonials__nav { justify-content: center; margin-top: 2.5rem; } /* Dots: proper circles */ .c-testimonials__dot { padding: 0; flex-shrink: 0; width: 1.5rem; height: 1.5rem; min-height: 1.5rem; background: var(--color-primary-200); } .c-testimonials__dot.is-active, .c-testimonials__dot:hover { background: var(--color-primary-500); } @media (min-width: 1200px) { .c-testimonials__slide { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { .c-testimonials__slide { grid-template-columns: 1fr; } .c-testimonials--slider .c-testimonial { padding: var(--space-xl); min-height: 0; } } /* --- Accordion - Figma card-style spec --- */ .c-accordion__header { margin-bottom: 2.5rem; } .c-accordion__items { border-top: none; max-width: 809px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.875rem; } .c-accordion__item { background: var(--color-primary-50); border-bottom: none; border-radius: 8px; padding: 2rem 2.5rem; transition: none; } .c-accordion__item.is-open { border-color: transparent; } .c-accordion__item h3 { font-family: var(--font-heading); font-weight: 800; font-size: 2rem; text-transform: uppercase; letter-spacing: -0.5px; color: var(--color-primary-700); margin: 0; } .c-accordion__trigger { font-family: var(--font-heading); font-weight: 800; font-size: 2rem; text-transform: uppercase; letter-spacing: -0.5px; color: var(--color-primary-700); padding: 0; justify-content: flex-start; gap: 0.75rem; } .c-accordion__trigger:hover { color: var(--color-primary-700); } /* Orange-angle icon: mask technique, rotates CCW when open */ .c-accordion__icon { display: inline-block; width: 25px; height: 25px; flex-shrink: 0; background-color: var(--color-secondary-500); -webkit-mask: url('/wp-content/uploads/orange-angle.svg') center / contain no-repeat; mask: url('/wp-content/uploads/orange-angle.svg') center / contain no-repeat; border-radius: 0; padding: 0; transition: transform 0.25s ease; } .c-accordion__item.is-open .c-accordion__icon { transform: rotate(-90deg); background-color: var(--color-secondary-500); } /* Panel: collapsed by default, expands via max-height transition */ .c-accordion__panel { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .c-accordion__item.is-open .c-accordion__panel { max-height: 600px; } .c-accordion__content { padding-top: 1.25rem; padding-bottom: 0; font-size: 1.25rem; line-height: 1.5; color: #141516; } @media (max-width:767px) { .c-accordion__trigger { font-size:1.5rem; justify-content:space-between; } } /* ================================================================= BEFORE / AFTER SLIDER ================================================================= */ .c-before-after { padding: var(--space-4xl) 0; } .c-before-after--bg-white { background: #fff; } .c-before-after--bg-light { background: var(--color-bg-light); } .c-before-after--bg-dark { background: var(--color-bg-dark); } .c-before-after__inner { display: grid; gap: var(--space-3xl); align-items: center; } @media (min-width: 768px) { .c-before-after__inner { grid-template-columns: 1fr 1fr; gap: var(--space-4xl); } } /* Content column */ .c-before-after__content h2, .c-before-after__content h3 { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: -0.03em; color: var(--color-primary-700); } .c-before-after__buttons { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); } /* Slider wrapper */ .c-before-after__slider { position: relative; overflow: hidden; border-radius: 20px; aspect-ratio: 729 / 380; cursor: ew-resize; user-select: none; touch-action: pan-y; -webkit-user-select: none; } /* Before / After image panes -- both fill the slider */ .c-before-after__pane { position: absolute; inset: 0; } .c-before-after__pane img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; pointer-events: none; } /* Before pane clips to the left portion, sits on top of after */ .c-before-after__pane--before { z-index: 1; clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0); } /* Divider line -- above both panes */ .c-before-after__divider { position: absolute; top: 0; bottom: 0; left: var(--split, 50%); transform: translateX(-50%); width: 2px; background: rgba(255, 255, 255, 0.6); display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 2; } /* Handle button */ .c-before-after__handle { pointer-events: all; width: 56px; height: 56px; border-radius: 50%; background: #fff; border: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22); cursor: ew-resize; flex-shrink: 0; padding: 0; } .c-before-after__handle img { width: 32px; height: 32px; display: block; pointer-events: none; } /* Decorative caption below slider */ .c-before-after__caption { font-family: var(--font-script); font-size: 2rem; line-height: 1.5; color: var(--color-primary-500); text-align: center; margin-top: 1.25rem; margin-bottom: 0; } @media (max-width: 767px) { .c-before-after__caption { font-size: 1.5rem; } } /* Brand heading overrides */ .c-before-after h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(2.5rem, 2rem + 1.5vw, 3.75rem); text-transform: uppercase; letter-spacing: -0.03em; color: var(--color-primary-700); line-height: 1; margin-bottom: var(--space-xl); } .c-before-after h2 strong, .c-before-after h2 span.accent { color: var(--color-secondary-500); display: block; } /* Decorative brush-stroke underline spans the width of the accent line */ .c-before-after h2 strong::after, .c-before-after h2 span.accent::after { content: ''; display: block; width: min(100%, 458px); aspect-ratio: 458 / 22; background: url('/wp-content/uploads/highlight-2.svg') left center / 100% 100% no-repeat; margin-top: 0.5rem; transform: scaleX(1); transform-origin: left center; clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(0.37, 0, 0.63, 1) 0.25s; } .c-before-after.is-visible h2 strong::after, .c-before-after.is-visible h2 span.accent::after { clip-path: inset(0 0% 0 0); } .c-before-after .prose { font-size: 1.25rem; line-height: 1.5; color: #141516; } /* ================================================================= BEFORE / AFTER SLIDER — FULL WIDTH ================================================================= */ .c-before-after-wide { padding: var(--space-4xl) 0; } .c-before-after-wide--bg-white { background: #fff; } .c-before-after-wide--bg-light { background: var(--color-bg-light); } .c-before-after-wide__header { margin-bottom: var(--space-xl); } .c-before-after-wide h2, .c-before-after-wide h3 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(2.5rem, 2rem + 1.5vw, 3.75rem); text-transform: uppercase; letter-spacing: -0.03em; color: var(--color-primary-700); line-height: 1; margin-bottom: 0; } .c-before-after-wide h2 strong, .c-before-after-wide h2 span.accent, .c-before-after-wide h3 strong, .c-before-after-wide h3 span.accent { color: var(--color-secondary-500); display: block; } /* Wide slider overrides: full container width, adjusted aspect ratio */ .c-before-after-wide__slider { aspect-ratio: 16 / 7; border-radius: 16px; margin-top: var(--space-xl); } @media (max-width: 767px) { .c-before-after-wide__slider { aspect-ratio: 4 / 3; } } /* Underline decoration */ .c-before-after-wide--headline-underline h2 strong, .c-before-after-wide--headline-underline h2 span.accent { display: block; } .c-before-after-wide--headline-underline h2 strong::after, .c-before-after-wide--headline-underline h2 span.accent::after { content: ''; display: block; height: 22px; background: url('/wp-content/uploads/highlight-2.svg') left center / auto 100% no-repeat; margin-top: 0.5rem; transform: scaleX(1); transform-origin: left center; clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(0.37, 0, 0.63, 1) 0.25s; } .c-before-after-wide--headline-underline.is-visible h2 strong::after, .c-before-after-wide--headline-underline.is-visible h2 span.accent::after { clip-path: inset(0 0% 0 0); } @media (prefers-reduced-motion: reduce) { .c-before-after-wide--headline-underline h2 strong::after, .c-before-after-wide--headline-underline h2 span.accent::after { clip-path: inset(0 0% 0 0); transition: none; } } /* ================================================================= HOME HERO ================================================================= */ body.home { overscroll-behavior-y: none; } /* Allow boy to overflow above/below the hero section */ body.home .c-hero { overflow: visible; } /* Bottom gradient blends hero into home-intro primary-500 */ body.home .c-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; background: linear-gradient(to bottom, transparent, var(--color-primary-500)); pointer-events: none; z-index: 3; /* above boy (z-index: 2) */ } /* Reorder content children: h1 first, eyebrow (orange subtitle) second, subhead (service areas) third */ body.home .c-hero .c-hero__content { display: flex; flex-direction: column; align-items: center; } body.home .c-hero .c-hero__headline { order: 1; font-size: clamp(3rem, 1.5rem + 6.5vw, 7.5rem); line-height: 0.92; margin-bottom: var(--space-md); } body.home .c-hero .c-hero__eyebrow { order: 2; } body.home .c-hero .c-hero__subhead { order: 3; text-align: center; } body.home .c-hero .c-hero__inner { z-index: auto; } /* dissolve stacking context so buttons can exceed boy */ body.home .c-hero .c-hero__buttons { order: 4; position: relative; z-index: 4; } /* Eyebrow becomes the orange subtitle below the H1 */ body.home .c-hero .c-hero__eyebrow { font-family: var(--font-heading); font-size: clamp(1.25rem, 1rem + 2vw, 2.5rem); font-weight: 800; line-height: 1; color: var(--color-secondary-500); text-transform: uppercase; letter-spacing: -0.01em; text-shadow: 0 0 40px rgba(0,0,0,0.44); margin: 0 0 var(--space-sm); } body.home .c-hero .c-hero__eyebrow::before { display: none; } /* Subhead becomes the service areas line */ body.home .c-hero .c-hero__subhead { font-family: var(--font-heading); font-size: clamp(1rem, 2.5vw, 1.5rem); font-weight: 500; line-height: 1.67; letter-spacing: 0; text-transform: uppercase; color: #fff; margin-bottom: var(--space-xl); } body.home .c-hero .c-hero__subhead p { margin: 0; } body.home .c-hero .c-hero__subhead strong { display: block; font-size: clamp(1.25rem, 1rem + 2vw, 2.5rem); font-weight: 800; line-height: 1; color: var(--color-secondary-300); text-shadow: 0 0 40px rgba(0,0,0,0.44); letter-spacing: -0.01em; margin-bottom: var(--space-sm); } /* Boy -- horizontally centered, starts high above H1, sinks via JS parallax */ .c-hero__boy { position: absolute; left: 50%; transform: translateX(-50%); top: -380px; width: clamp(220px, 30vw, 520px); height: auto; pointer-events: none; z-index: 2; will-change: transform; } @media (max-width:1340px) { .c-hero__boy { top: -290px; } } @media (max-width:1200px) { .c-hero__boy { top: -230px; } } @media (max-width:1081px) { .c-hero__boy { top: -170px; } } @media (max-width:900px) { .c-hero__boy { top: -100px; } } @media (max-width:768px) { .c-hero__boy { top: -160px; } } @media (max-width:540px) { .c-hero__boy { top: -170px; } } /* ================================================================= HOME INTRO ================================================================= */ /* Solid primary-500 background, no fade-in animation, flush top against hero */ #home-intro { position: relative; z-index: 3; /* above boy so it sinks behind this section */ background: var(--color-primary-500); padding-top: 0; opacity: 1 !important; transform: none !important; transition: none !important; } /* White text on blue background */ #home-intro h2, #home-intro .c-content-media__content h2 { color: #fff; } /* H2 highlight SVG underline on last line */ #home-intro .c-content-media__content h2 { position: relative; } #home-intro .c-content-media__content h2::after { content: ''; display: block; width: 100%; max-width: 548px; height: 41px; background: url('/wp-content/uploads/highlight-1.svg') left / auto 100% no-repeat; margin-top: 0.25rem; transform: rotate(-3.9deg) scaleY(-1); transform-origin: left center; } /* Strong text stays white (dollar amounts) */ #home-intro .prose strong { color: #fff; font-weight: 800; } /* Prose text */ #home-intro .prose { color: rgba(255,255,255,0.9); } /* Wider content column matching Figma 56/44 split */ @media (min-width: 768px) { #home-intro .c-content-media__inner { grid-template-columns: 1.3fr 1fr; } } /* Primary button on dark-background components -- orange matching heroes/CTAs */ .c-content-media--bg-dark .btn--primary, .c-accordion--bg-dark .btn--primary, .c-cards--bg-dark .btn--primary, .c-stats--bg-dark .btn--primary, .c-text-block--bg-dark .btn--primary, #home-intro .btn--primary { background: var(--color-secondary-600); border-color: var(--color-secondary-600); } .c-content-media--bg-dark .btn--primary:hover, .c-accordion--bg-dark .btn--primary:hover, .c-cards--bg-dark .btn--primary:hover, .c-stats--bg-dark .btn--primary:hover, .c-text-block--bg-dark .btn--primary:hover, #home-intro .btn--primary:hover { background: var(--color-secondary-500); border-color: var(--color-secondary-500); } /* Content + Media — optional brush-stroke underline decoration */ .c-content-media--headline-underline h2 strong, .c-content-media--headline-underline h2 span.accent { display: block; } .c-content-media--headline-underline h2 strong::after, .c-content-media--headline-underline h2 span.accent::after { content: ''; display: block; width: min(100%, 458px); aspect-ratio: 458 / 22; background: url('/wp-content/uploads/highlight-2.svg') left center / 100% 100% no-repeat; margin-top: 0.5rem; transform: scaleX(1); transform-origin: left center; clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(0.37, 0, 0.63, 1) 0.25s; } .c-content-media--headline-underline.is-visible h2 strong::after, .c-content-media--headline-underline.is-visible h2 span.accent::after { clip-path: inset(0 0% 0 0); } @media (prefers-reduced-motion: reduce) { .c-before-after h2 strong::after, .c-before-after h2 span.accent::after, .c-content-media--headline-underline h2 strong::after, .c-content-media--headline-underline h2 span.accent::after { clip-path: inset(0 0% 0 0); transition: none; } } /* ================================================================= PRINT STYLES ================================================================= */ @media print { /* Page setup */ @page { margin: 0.75in; size: letter; } /* Reset colors for print */ * { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; } /* Typography adjustments */ body { font-size: 12pt; line-height: 1.5; } h1 { font-size: 24pt; } h2 { font-size: 20pt; } h3 { font-size: 16pt; } h4, h5, h6 { font-size: 14pt; } /* Hide non-printable elements */ .site-header, .site-footer, .site-nav, .mobile-nav-toggle, .skip-link, .c-sticky-cta, .btn, .btn--primary, .btn--secondary, .c-hero__buttons, .c-cta__buttons, .c-content-media__buttons, .c-cards__buttons, .c-cards .c-card__link, .search-form, .post-nav, .pagination, .gform_wrapper, .c-form-section, .global-cta, video, iframe, .c-gallery[data-layout="carousel"], .c-testimonials__nav, .c-testimonials__dots, noscript { display: none !important; } /* Show main content area */ .site-main, main { width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Container adjustments */ .container { max-width: 100% !important; padding: 0 !important; margin: 0 !important; } /* Component spacing for print */ .component { padding: 0.5in 0 !important; margin: 0 !important; page-break-inside: avoid; } /* Hero - simplified */ .c-hero { min-height: auto !important; height: auto !important; padding: 0.25in 0 !important; background: none !important; } .c-hero::before { display: none !important; } .c-hero__content { position: static !important; transform: none !important; } .c-hero__eyebrow { color: #666 !important; } .c-hero__headline { font-size: 28pt !important; } /* Content + Media - stack vertically */ .c-content-media__inner { display: block !important; } .c-content-media__media { max-width: 100% !important; margin-bottom: 0.25in !important; } .c-content-media__media img { max-width: 4in !important; height: auto !important; } /* Cards - grid for print */ .c-cards__grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 0.25in !important; } .c-card { border: 1px solid #ccc !important; padding: 0.15in !important; page-break-inside: avoid; } .c-card__image { max-height: 1.5in !important; overflow: hidden; } /* Testimonials - show all slides flat (no horizontal overflow/transform) */ .c-testimonials__viewport { overflow: visible !important; } .c-testimonials__track { display: block !important; transform: none !important; transition: none !important; } .c-testimonials__slide { display: grid !important; grid-template-columns: 1fr !important; margin-bottom: 0.25in !important; } .c-testimonials__slider .c-testimonial { width: 100% !important; margin-bottom: 0.15in !important; border: 1px solid #ccc !important; padding: 0.15in !important; page-break-inside: avoid; } /* Accordion - expand all for print */ .c-accordion__content { display: block !important; max-height: none !important; overflow: visible !important; padding: 0.1in 0 !important; } .c-accordion__item { border: 1px solid #ccc !important; margin-bottom: 0.1in !important; padding: 0.1in !important; page-break-inside: avoid; } .c-accordion__icon { display: none !important; } /* Stats */ .c-stats__grid { display: flex !important; flex-wrap: wrap !important; gap: 0.25in !important; } .c-stat { flex: 1 1 30% !important; text-align: center; } /* Logo grid */ .c-logos__grid { display: flex !important; flex-wrap: wrap !important; gap: 0.15in !important; } .c-logos__item { width: 1in !important; filter: none !important; } .c-logos__item img { max-width: 100% !important; max-height: 0.75in !important; } /* Gallery - grid only */ .c-gallery__grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 0.1in !important; } .c-gallery__item img { max-height: 1.5in !important; } /* Icon cards */ .c-icon-cards__grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 0.2in !important; } .c-icon-card { border: 1px solid #ccc !important; padding: 0.1in !important; page-break-inside: avoid; } /* Contact info */ .c-contact-info__items { display: block !important; } .c-contact-info__item { margin-bottom: 0.1in !important; } /* Map - show placeholder text */ .c-map__embed { border: 1px solid #ccc !important; padding: 0.25in !important; text-align: center; } .c-map__embed::after { content: "[Map - See website for interactive version]"; display: block; font-style: italic; color: #666 !important; } /* Images */ img { max-width: 100% !important; height: auto !important; page-break-inside: avoid; } /* Links - show URLs */ a[href^="http"]:after, a[href^="https"]:after { content: " (" attr(href) ")"; font-size: 10pt; color: #666 !important; word-break: break-all; } /* Don't show URL for buttons or images */ a.btn:after, a.c-card:after, a > img:after, .c-logos__item a:after { content: none !important; } /* Page break hints */ h1, h2, h3, h4, h5, h6 { page-break-after: avoid; page-break-inside: avoid; } p, blockquote, ul, ol, dl, table, figure { page-break-inside: avoid; } /* Orphan/widow control */ p { orphans: 3; widows: 3; } /* Archive/blog posts */ .archive-page__grid { display: block !important; } .archive-card { display: flex !important; gap: 0.2in !important; border-bottom: 1px solid #ccc !important; padding: 0.15in 0 !important; page-break-inside: avoid; } .archive-card__image { width: 1.5in !important; flex-shrink: 0; } /* Single post */ .single-post__featured { max-height: 3in !important; overflow: hidden; } .author-box { border: 1px solid #ccc !important; padding: 0.15in !important; margin: 0.25in 0 !important; } /* Prose content */ .prose { max-width: 100% !important; } .prose a:after { content: none !important; /* Too noisy in body text */ } /* CTA section - text only */ .c-cta { border: 2px solid #000 !important; padding: 0.25in !important; text-align: center; } /* Background sections - add border for visual separation */ .bg--dark, .bg--brand, .bg--light { border: 1px solid #ccc !important; padding: 0.2in !important; margin: 0.1in 0 !important; } } @media (min-width: 769px) { #menu-item-399 { display: none; } } }