@import 'hvac-motifs.css'; @import 'hvac-text-stroke.css'; /* Tailor Landing Blocks — Accessible Visual System (WCAG 2.2 AA) */ :root { /* Beach Resort Minimalist Palette */ --generic-primary: #0077be; /* Deep Ocean Blue */ --generic-secondary: #40b4e3; /* Tropical Sky */ --generic-accent: #f2e6d0; /* Fine Sand */ --generic-success: #22c55e; --generic-warning: #f59e0b; --generic-error: #ef4444; --generic-neutral-50: #fbfcfd; /* Airy White */ --generic-neutral-100: #f1f5f9; /* Soft Mist */ --generic-neutral-200: #e2e8f0; --generic-neutral-300: #cbd5e1; --generic-neutral-500: #64748b; --generic-neutral-600: #475569; --generic-neutral-700: #334155; --generic-neutral-900: #0f172a; /* Midnight Blue-Black */ --generic-text-strong: #0f172a; --generic-text-body: #334155; --generic-text-muted: #64748b; --generic-text-subtle: #94a3b8; --generic-on-dark: #ffffff; --generic-on-dark-muted: rgba(255, 255, 255, 0.85); --generic-surface: #ffffff; --generic-surface-alt: #f8fafc; --generic-surface-muted: #f1f5f9; --generic-border-soft: #e2e8f0; --generic-border-strong: #cbd5e1; --generic-focus-ring-light: #0077be; --generic-focus-ring-dark: #fde047; --generic-focus-glow-light: rgba(0, 119, 190, 0.15); --generic-focus-glow-dark: rgba(253, 224, 71, 0.35); --generic-gradient-primary-start: #0077be; --generic-gradient-primary-end: #40b4e3; --generic-gradient-dark-start: #0f172a; --generic-gradient-dark-end: #1e293b; --generic-brand-800: #1f3f6b; --generic-brand-700: #2f5faa; --generic-brand-600: #0077be; --generic-brand-500: #40b4e3; --generic-brand-100: #dbe9ff; --generic-brand-050: #f1f6ff; --generic-radius-sm: 4px; --generic-radius-md: 8px; --generic-radius-lg: 12px; --generic-shadow-xs: 0 1px 3px rgba(15, 23, 42, 0.05); --generic-shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.08); --generic-shadow-md: 0 12px 24px rgba(15, 23, 42, 0.1); --generic-shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.12); --generic-transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* Dark-theme overrides for the generic token family — flip text + surface colors when [data-theme="dark"] is set on . Brand identity tokens (primary, secondary, accent) and structural tokens (radius, shadow, focus rings) stay constant. See docs/journal/architecture/ light-dark-theme.md for the full taxonomy. */ :root[data-theme="dark"] { --generic-text-strong: #f1f5fb; --generic-text-body: #c8cdd6; --generic-text-muted: #94a3b8; --generic-text-subtle: #64748b; /* on-dark tokens stay light — they're designed for dark backgrounds and now appear on the page's ambient dark surface too. */ --generic-surface: #0f1419; --generic-surface-alt: #161c24; --generic-surface-muted: #1a2230; --generic-surface-base: #0c1116; --generic-border-soft: rgba(245, 247, 255, 0.10); --generic-border-strong: rgba(245, 247, 255, 0.18); /* Shadows pick up a touch of the page color for ambient depth on dark */ --generic-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.45); --generic-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.45); --generic-shadow-md: 0 12px 24px rgba(0, 0, 0, 0.50); --generic-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.55); --generic-shadow-card: 0 8px 20px rgba(0, 0, 0, 0.40); } /* Shared layout + typography */ .builder-blocks { display: flex; flex-direction: column; gap: clamp(1.75rem, 4vw, 2.5rem); /* overflow-x: hidden was forcing overflow-y to auto per the CSS spec, which made .builder-blocks a scroll container that broke position: sticky descendants (category-strip docking behavior). overflow-x: clip gives the same visual containment without creating a scroll container. */ overflow-x: clip; } .block-wrapper { display: block; margin: 0; } .block-wrapper + .block-wrapper { margin-top: clamp(1.75rem, 4vw, 2.5rem); } .block-fallback { border-radius: var(--generic-radius-md); border: 2px dashed rgba(197, 48, 48, 0.6); background: rgba(254, 222, 222, 0.6); padding: 2rem; color: #742a2a; } .block-loading { background: linear-gradient(90deg, #f0f4fa 25%, #e5ecf5 50%, #f0f4fa 75%); background-size: 200% 100%; animation: loading 1.5s infinite; min-height: 200px; border-radius: var(--generic-radius-md); } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Parallax-hero is excluded — it owns --parallax-hero-fg and its own text-shadow (deep-night drop), and these wrapper-level h-rules would override both. Same exclusion pattern as line ~289 above. */ .block-wrapper:not(.block-wrapper--parallax-hero-block) h1, .block-wrapper:not(.block-wrapper--parallax-hero-block) h2, .block-wrapper:not(.block-wrapper--parallax-hero-block) h3, .block-wrapper:not(.block-wrapper--parallax-hero-block) h4 { color: var(--block-heading-color, var(--generic-text-strong)); line-height: 1.25; letter-spacing: -0.015em; paint-order: stroke fill; -webkit-text-stroke: 2px var(--block-stroke-color, rgb(0, 8, 24)); text-shadow: 0 0 1px var(--block-stroke-color, rgba(0, 8, 24, 1)), 0 4px 10px rgba(0, 10, 30, 0.55); } .block-wrapper p, .block-wrapper li { color: var(--block-body-color, var(--generic-text-body)); font-size: 1.05rem; line-height: 1.75; } .block-wrapper .rich-text p, .block-wrapper .rich-text li { margin-bottom: 1rem; } /* Canonical block-level color tokens. Cascade: theme defaults → page palette (--page-*) → block palette overrides (palette-overrides.htm). Every layer can override the next by setting only the relevant token, so a single editor change at any level flows through to every text/surface element. */ .builder-block { --block-heading-color: var(--page-fg, var(--generic-text-strong)); --block-body-color: var(--page-fg, var(--generic-text-body)); --block-muted-color: var(--page-muted, var(--generic-text-muted)); --block-accent-color: var(--page-accent, var(--primary-color, #0077be)); --block-surface-color: var(--page-surface, var(--generic-surface, #ffffff)); color: var(--block-body-color); background-color: var(--block-bg-color, transparent); } /* Dark-palette blocks invert the muted token so descendants get legible light-on-dark text. Still chains through --page-muted so a page-level override (e.g. brand teal callout text) propagates. */ .builder-block.stats-block--primary, .builder-block.stats-block--dark, .builder-block.scoreboard-block--primary, .builder-block.scoreboard-block--dark, .builder-block.testimonials-block, .builder-block.testimonials-block--primary, .builder-block.testimonials-block--dark { --block-muted-color: var(--page-muted, var(--generic-on-dark-muted)); } /* Light/standard/minimal/muted display variants reaffirm white-card defaults regardless of palette (their cards are always white). Each reset still chains through page-level tokens so any layer above can override. */ .builder-block.stats-block--standard, .builder-block.stats-block--light, .builder-block.stats-block--minimal, .builder-block.stats-block--muted { --block-muted-color: var(--page-muted, var(--generic-text-muted)); --block-heading-color: var(--page-fg, var(--heading-color, #0f172a)); } .block-wrapper { width: 100%; position: relative; } .block-wrapper--width-narrow { max-width: min(62rem, 100%); margin-inline: auto; } .block-wrapper--width-fixed { max-width: min(36rem, 100%); margin-inline: auto; } .block-wrapper--width-wide { max-width: min(78rem, 100%); margin-inline: auto; } .block-wrapper--width-full { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .block-wrapper--align-center:not(.block-wrapper--width-full) { margin-left: auto; margin-right: auto; } .block-wrapper--align-end:not(.block-wrapper--width-full) { margin-left: auto; margin-right: 0; } .block-wrapper--align-start:not(.block-wrapper--width-full) { margin-left: 0; margin-right: auto; } .block-wrapper--width-full > .builder-block { border-radius: 0; border: none; box-shadow: none; padding-block: var(--block-vertical-padding) !important; padding-inline: clamp(1.5rem, 5vw, 4rem); background: var(--generic-surface-muted); --block-heading-color: var(--generic-text-strong); --block-body-color: var(--generic-text-body); color: var(--block-body-color); } .block-wrapper--width-full > .builder-block .container { max-width: 100% !important; } .block-wrapper--width-narrow > .builder-block .container { max-width: 62rem !important; } .block-wrapper--width-fixed > .builder-block .container { max-width: 36rem !important; } .block-wrapper--width-wide > .builder-block .container { max-width: 78rem !important; } .block-wrapper--width-narrow > .builder-block .container-fluid { max-width: 62rem !important; margin-inline: auto; } .block-wrapper--width-fixed > .builder-block .container-fluid { max-width: 36rem !important; margin-inline: auto; } .block-wrapper--width-wide > .builder-block .container-fluid { max-width: 78rem !important; margin-inline: auto; } /* The parallax-hero owns its own color/text-shadow via --parallax-hero-fg (always-dark atmospheric surface). Excluding it here prevents the !important catchall from flipping the hero headline to the mode-aware --block-heading-color on light pages (which renders as dark slate on the deep-night page-bg — unreadable). Same pattern as the wrapper- section catchalls further down. */ .builder-block:not(.parallax-hero) :is(h1, h2, h3, h4, h5, h6) { color: var(--block-heading-color, inherit) !important; paint-order: stroke fill; -webkit-text-stroke: 2px var(--block-stroke-color, rgb(0, 8, 24)); text-shadow: 0 0 1px var(--block-stroke-color, rgba(0, 8, 24, 1)), 0 4px 10px rgba(0, 10, 30, 0.55); } /* Catchall body-color for inline text inside blocks (defends against CMS rich-text spans that have no class). Excludes elements that own their own semantic color via the block-token cascade — buttons, badges, accent text, descriptions, captions, intros, role labels — so those can opt into --block-accent-color / --block-muted-color / --block-heading-color without fighting !important. See architecture/block-color-token-cascade.md § "Rules for new code". */ .builder-block :is(p, li, blockquote, span, strong, em, small):not( .btn, .btn *, .badge, .badge *, .research-block__methodology-value, .research-block__methodology-label, .research-block__methodology-description, .stats-block__number, .stats-block__suffix, .stats-block__description, .scoreboard-card__number, .scoreboard-card__suffix, .scoreboard-card__description, .pricing-table-block__subtitle, .pricing-table-block__description, .pricing-table-block__features li, .faq-block__intro, .faq-block__answer p, .faq-block__answer li, .howto-block__intro, .howto-block__step-instruction p, .howto-block__step-instruction li, .team-card__role, .team-card__bio, .team-card__link, /* Parallax hero is an always-dark atmospheric surface — its text must read light regardless of page theme. See architecture/light-dark-theme.md § Group C. The `.parallax-hero__title *` clause keeps the italic gradient (cool→warm) from being overwritten by --block-body-color. */ .parallax-hero__eyebrow, .parallax-hero__lede, .parallax-hero__title, .parallax-hero__title *, .parallax-hero__cta, .parallax-hero__cta *, .parallax-hero__trust, .parallax-hero__trust *, .parallax-hero__trust-item, .parallax-hero__trust-sep, /* Section list intro / entry titles / entry bodies have their own --section-list-* tokens that chain through the cascade correctly; the catchall would override them. */ .section-list__title, .section-list__lede, .section-list__entry-title, .section-list__entry-body, .section-list__see-all, /* Category strip items use --category-strip-* tokens (own chain). */ .category-strip__label, .category-strip__items li, .category-strip__items a ) { color: var(--block-body-color, inherit) !important; } /* Vertical rhythm tightening */ :root { --block-vertical-padding: clamp(1.75rem, 4.5vw, 2.75rem); } .block-wrapper > section, .block-wrapper > div, .block-wrapper > article { padding-block: var(--block-vertical-padding) !important; } /* Navigation helpers */ .block-skip-link { position: absolute; top: -40px; left: 6px; background: var(--generic-primary); color: var(--generic-on-dark); padding: 8px 12px; text-decoration: none; z-index: 1000; border-radius: var(--generic-radius-sm); } .block-skip-link:focus { top: 6px; } /* Chart Block */ .chart-block { --chart-block-height: 420px; padding: 4.5rem 0; background: var(--generic-surface); color: var(--block-body-color, var(--generic-text-body)); border-radius: var(--generic-radius-lg); } .chart-block--light { background: linear-gradient(145deg, #f7fafc, #eef3f9); } .chart-block--muted { background: linear-gradient(145deg, #edf2f9, #e4ebf5); } .chart-block--white { background: var(--generic-surface); } .chart-block--primary { background: linear-gradient(145deg, var(--generic-gradient-primary-start), var(--generic-gradient-primary-end)); color: var(--generic-on-dark); } .chart-block--dark { background: linear-gradient(160deg, var(--generic-gradient-dark-start), var(--generic-gradient-dark-end)); color: var(--generic-on-dark); } .chart-block__title { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; margin-bottom: 1rem; text-align: center; } .builder-block .builder-block__title, .builder-block [class$='__title'] { text-align: center; } .chart-block__description { font-size: 1.05rem; line-height: 1.7; color: var(--block-muted-color, var(--generic-text-muted)); max-width: 640px; margin: 0 auto 2rem; } .chart-block--primary .chart-block__description, .chart-block--dark .chart-block__description { color: var(--generic-on-dark-muted); } .chart-block__container { max-width: 780px; margin: 0 auto; position: relative; height: var(--chart-block-height, 420px); } .chart-block__canvas { height: var(--chart-block-height, 420px); min-height: var(--chart-block-height, 420px); border-radius: var(--generic-radius-md); box-shadow: var(--generic-shadow-sm); background: var(--generic-surface); padding: 1rem; } .chart-block__canvas canvas { width: 100% !important; height: 100% !important; } /* Call To Action */ .call-to-action-block { padding: 4rem 0; border-radius: var(--generic-radius-lg); position: relative; overflow: hidden; } .call-to-action-block::after { content: ''; position: absolute; inset: 0; opacity: 0.18; background: radial-gradient(circle at top right, rgba(255,255,255,0.4), transparent 60%), radial-gradient(circle at bottom left, rgba(255,255,255,0.35), transparent 55%); pointer-events: none; } .call-to-action-block .container { position: relative; z-index: 1; } .call-to-action-block__title { font-size: clamp(2.1rem, 4vw, 2.8rem); font-weight: 700; margin-bottom: 1rem; color: inherit; } .call-to-action-block__description { font-size: 1.1rem; line-height: 1.75; max-width: 720px; margin: 0 auto 2rem; color: inherit; } .call-to-action-block__action .btn { padding: 0.95rem 2.8rem; border-radius: 999px; font-weight: 600; letter-spacing: 0.01em; transition: var(--generic-transition); box-shadow: var(--generic-shadow-sm); } .call-to-action-block__primary { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--generic-brand-800), var(--generic-brand-700)); color: var(--generic-on-dark); border: none; text-decoration: none; position: relative; z-index: 0; } .call-to-action-block--light .call-to-action-block__primary, .call-to-action-block--outline .call-to-action-block__primary { background: linear-gradient(135deg, var(--generic-brand-700), var(--generic-brand-600)); color: var(--generic-on-dark); } .call-to-action-block__primary::after { content: ""; position: absolute; inset: -6px; border-radius: 999px; border: 3px solid transparent; box-shadow: none; pointer-events: none; transition: box-shadow 150ms ease, border-color 150ms ease; z-index: -1; } .call-to-action-block__action .btn:hover { transform: translateY(-2px); box-shadow: var(--generic-shadow-md); } .call-to-action-block__primary:focus, .call-to-action-block__primary:focus-visible { outline: none !important; } .call-to-action-block__primary:focus::after, .call-to-action-block__primary:focus-visible::after { border-color: var(--generic-focus-ring-dark); box-shadow: 0 0 0 4px var(--generic-focus-glow-dark); } .call-to-action-block__secondary-link { color: rgba(17, 31, 51, 0.88); font-weight: 600; text-decoration: underline; } .call-to-action-block__secondary-link:focus, .call-to-action-block__secondary-link:focus-visible { outline: none !important; box-shadow: none !important; text-decoration: underline; position: relative; } .call-to-action-block__secondary-link::after { content: ""; position: absolute; inset: -4px -8px; border-radius: 6px; border: 3px solid transparent; box-shadow: none; pointer-events: none; transition: box-shadow 150ms ease, border-color 150ms ease; } .call-to-action-block__secondary-link:focus::after, .call-to-action-block__secondary-link:focus-visible::after { border-color: var(--generic-focus-ring-light); box-shadow: 0 0 0 4px var(--generic-focus-glow-light); } .call-to-action-block--primary .call-to-action-block__secondary-link:focus, .call-to-action-block--primary .call-to-action-block__secondary-link:focus-visible, .call-to-action-block--dark .call-to-action-block__secondary-link:focus, .call-to-action-block--dark .call-to-action-block__secondary-link:focus-visible { outline: none !important; } .call-to-action-block--primary .call-to-action-block__secondary-link:focus::after, .call-to-action-block--primary .call-to-action-block__secondary-link:focus-visible::after, .call-to-action-block--dark .call-to-action-block__secondary-link:focus::after, .call-to-action-block--dark .call-to-action-block__secondary-link:focus-visible::after { border-color: var(--generic-focus-ring-dark); box-shadow: 0 0 0 4px var(--generic-focus-glow-dark); } .call-to-action-block--primary { background: linear-gradient(135deg, #23487a, #3c6eb8); color: var(--generic-on-dark); } .call-to-action-block--light { background: linear-gradient(130deg, #f1f6fd, #e4ecf8); color: var(--block-heading-color, var(--generic-text-strong)); } .call-to-action-block--outline { background: var(--generic-surface); color: var(--block-heading-color, var(--generic-text-strong)); border: 1px solid var(--generic-border-soft); } .call-to-action-block--primary .call-to-action-block__secondary-link, .call-to-action-block--dark .call-to-action-block__secondary-link { color: rgba(255, 255, 255, 0.92); } .call-to-action-block--primary .call-to-action-block__secondary-link:focus::after, .call-to-action-block--primary .call-to-action-block__secondary-link:focus-visible::after, .call-to-action-block--dark .call-to-action-block__secondary-link:focus::after, .call-to-action-block--dark .call-to-action-block__secondary-link:focus-visible::after { border-color: rgba(255, 255, 255, 0.7); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35); } /* Pricing Table Bespoke tokens default to the canonical --block-* cascade so page-level palette overrides propagate. Hardcoded hex/gradients only kick in when no upstream value exists. See architecture/block-color-token-cascade.md. */ .pricing-table-block { --pricing-bg: var(--block-bg-color, #f6f8ff); --pricing-text: var(--block-body-color, var(--generic-text-body)); --pricing-card-bg: var(--block-surface-color, #ffffff); --pricing-card-border: var(--block-stroke-color, rgba(31, 63, 107, 0.08)); --pricing-card-shadow: 0 10px 24px rgba(31, 63, 107, 0.08); --pricing-card-text: var(--block-body-color, var(--generic-text-body)); --pricing-featured-bg: linear-gradient(135deg, #eef3ff, #dbe6ff); --pricing-featured-text: var(--block-heading-color, var(--generic-text-strong)); --pricing-featured-border: rgba(31, 63, 107, 0.25); --pricing-featured-shadow: 0 14px 32px rgba(31, 63, 107, 0.16); --pricing-badge-bg: rgba(31, 63, 107, 0.12); --pricing-badge-text: var(--block-accent-color, var(--generic-primary)); --pricing-feature-check: var(--generic-success); --pricing-primary-btn-bg: linear-gradient(135deg, var(--block-accent-color, #1f3f6b), #3b6ec1); --pricing-primary-btn-text: #ffffff; padding: 4rem 0; background: var(--pricing-bg); color: var(--pricing-text); } .pricing-table-block__header { max-width: 720px; margin: 0 auto 3rem; } .pricing-table-block__subtitle { color: var(--block-muted-color, var(--generic-text-muted)); font-size: 1.05rem; margin-top: 0.75rem; } .pricing-table-block__plan { position: relative; height: 100%; background: var(--pricing-card-bg); border-radius: var(--generic-radius-lg); box-shadow: var(--pricing-card-shadow); padding: 2.25rem 2rem; display: flex; flex-direction: column; gap: 1.5rem; border: 1px solid var(--pricing-card-border); color: var(--pricing-card-text); } .pricing-table-block__plan--featured { background: var(--pricing-featured-bg); color: var(--pricing-featured-text); border: 1px solid var(--pricing-featured-border); box-shadow: var(--pricing-featured-shadow); } .pricing-table-block__plan-name { font-size: 1.45rem; font-weight: 700; margin-bottom: 0.35rem; color: inherit; } .pricing-table-block__badge { display: inline-block; margin-left: 0.5rem; padding: 0.15rem 0.65rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; border-radius: 999px; background: var(--pricing-badge-bg); color: var(--pricing-badge-text); } .pricing-table-block__plan-price { display: flex; align-items: baseline; gap: 0.35rem; font-weight: 700; font-size: 1.1rem; color: inherit; } .pricing-table-block__amount { font-size: 2.2rem; } .pricing-table-block__amount--contact { font-size: 1.4rem; font-weight: 600; text-transform: uppercase; } .pricing-table-block__period { color: inherit; font-size: 0.92rem; opacity: 0.75; } .pricing-table-block__plan--featured .pricing-table-block__period, .pricing-table-block__plan--featured .pricing-table-block__description, .pricing-table-block__plan--featured .pricing-table-block__features li { color: var(--pricing-featured-text); } .pricing-table-block__description { margin: 0; color: inherit; opacity: 0.85; font-size: 0.98rem; } .pricing-table-block__features { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; } .pricing-table-block__features li { display: flex; gap: 0.5rem; align-items: flex-start; } .pricing-table-block__features li::before { content: '✔'; color: var(--pricing-feature-check); font-weight: 600; margin-top: -0.1rem; } .pricing-table-block__action .btn { width: 100%; font-weight: 600; border-radius: var(--generic-radius-md); } .pricing-table-block__plan--featured .pricing-table-block__action .btn { background: var(--pricing-primary-btn-bg); color: var(--pricing-primary-btn-text); border: none; } .pricing-table-block__plan--featured .pricing-table-block__action .btn.btn-primary:hover, .pricing-table-block__plan--featured .pricing-table-block__action .btn.btn-primary:focus { filter: brightness(0.95); } .pricing-table-block__action .btn:focus, .pricing-table-block__action .btn:focus-visible { outline-width: 3px !important; outline-style: solid !important; outline-color: var(--generic-focus-ring-light) !important; outline-offset: 3px; box-shadow: 0 0 0 4px var(--generic-focus-glow-light) !important; } /* Featurette */ .featurette-block { padding: 4rem 0; } .featurette-block .container { max-width: 1050px; } .featurette-block__content { padding: 1rem 2rem; } .featurette-block__title { font-size: clamp(2rem, 3.5vw, 2.6rem); font-weight: 700; margin-bottom: 1.2rem; } .featurette-block__description { font-size: 1.1rem; line-height: 1.8; color: var(--block-muted-color, var(--generic-text-muted)); } .featurette-block__button { margin-top: 1.75rem; } .featurette-block__image img { border-radius: var(--generic-radius-lg); box-shadow: var(--generic-shadow-md); } .featurette-block--right .featurette-block__content { text-align: left; } /* Scoreboard / Stats */ .scoreboard-block { padding: 4rem 0; border-radius: var(--generic-radius-lg); background: linear-gradient(160deg, #1f3763, #2d4f8e); color: var(--generic-on-dark); position: relative; overflow: hidden; } .scoreboard-block::before { content: ""; position: absolute; inset: -20% -15%; background: radial-gradient(65% 70% at 20% 30%, rgba(108, 176, 255, 0.38), transparent 65%), radial-gradient(55% 60% at 80% 70%, rgba(255, 209, 153, 0.35), transparent 70%); filter: blur(40px); opacity: 0.72; pointer-events: none; } .scoreboard-block__title { text-align: center; font-size: clamp(2.1rem, 4vw, 2.9rem); margin-bottom: 2.5rem; } .scoreboard-block__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; } .scoreboard-card { background: rgba(255, 255, 255, 0.1); border-radius: var(--generic-radius-md); padding: 1.75rem 1.5rem; text-align: center; box-shadow: 0 22px 36px rgba(12, 26, 45, 0.24); border: 1px solid rgba(255, 255, 255, 0.22); transition: var(--generic-transition); backdrop-filter: blur(6px); } .scoreboard-card:hover { transform: translateY(-4px); box-shadow: 0 26px 46px rgba(12, 26, 45, 0.32); } .scoreboard-card__icon { display: inline-flex; width: 54px; height: 54px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.22); margin-bottom: 1rem; font-size: 1.35rem; } .scoreboard-card__number { font-size: clamp(2.2rem, 4vw, 2.8rem); font-weight: 700; color: #ffffff; } .scoreboard-card__suffix { font-size: 0.42em; font-weight: 700; margin-left: 0.06em; margin-top: 0.18em; line-height: 1; } .scoreboard-card__description { color: rgba(245, 247, 255, 0.78); margin-top: 0.75rem; } .stats-block__comparison { display: inline-flex; align-items: center; gap: 0.45rem; margin-bottom: 0.85rem; padding: 0.3rem 0.75rem; border-radius: 999px; background: rgba(255, 255, 255, 0.12); font-weight: 600; font-size: 0.95rem; } .stats-block__comparison-value { display: inline-flex; align-items: center; } .stats-block__comparison-value--before { color: rgba(245, 247, 255, 0.82); } .stats-block__comparison-value--after { color: #ffffff; } .stats-block__comparison-divider { font-size: 1.1rem; color: rgba(245, 247, 255, 0.82); } .stats-block--standard .stats-block__comparison, .stats-block--minimal .stats-block__comparison { background: rgba(31, 63, 107, 0.08); color: var(--block-heading-color, var(--generic-text-strong)); } .stats-block--standard .stats-block__comparison-value--before, .stats-block--minimal .stats-block__comparison-value--before, .stats-block--standard .stats-block__comparison-divider, .stats-block--minimal .stats-block__comparison-divider { color: var(--block-muted-color, var(--generic-text-muted)); } .stats-block--standard .stats-block__comparison-value--after, .stats-block--minimal .stats-block__comparison-value--after { color: var(--block-heading-color, var(--generic-text-strong)); } .stats-block { padding: 4rem 0; } .stats-block .row { row-gap: 2rem; } .stats-block__item { background: var(--generic-surface); border-radius: var(--generic-radius-md); padding: 2rem 1.5rem; box-shadow: var(--generic-shadow-sm); transition: var(--generic-transition); } .stats-block__item:hover { transform: translateY(-3px); box-shadow: var(--generic-shadow-md); } /* Comparison Table */ .comparison-table-block { padding: 4rem 0; background: var(--generic-surface); border-radius: var(--generic-radius-lg); border: 1px solid var(--generic-border-soft); box-shadow: var(--generic-shadow-xs); } .comparison-table-block__title { text-align: center; font-size: clamp(2rem, 3.5vw, 2.7rem); font-weight: 700; margin-bottom: 1rem; } .comparison-table-block__caption { caption-side: bottom; text-align: center; font-size: 0.95rem; color: var(--block-muted-color, var(--generic-text-muted)); padding-top: 1rem; } .comparison-table-block__table-wrapper { margin-top: 2rem; } .comparison-table-block__table { width: 100%; border-collapse: separate; border-spacing: 0; } .comparison-table-block__header, .comparison-table-block__cell { padding: 1.25rem 1rem; border-bottom: 1px solid var(--generic-border-soft); vertical-align: top; background: var(--generic-surface); } .comparison-table-block__header { font-weight: 700; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.04em; } .comparison-table-block__cell--highlight, .comparison-table-block__header--highlight { background: linear-gradient(180deg, rgba(47, 111, 177, 0.08), rgba(47, 111, 177, 0)); border-top: 3px solid var(--generic-accent); } .table-block__table { width: 100%; border-collapse: separate; border-spacing: 0; } .table-block__row--highlight { background: rgba(47, 111, 177, 0.08); } .table-block__cell { padding: 1rem; border-bottom: 1px solid var(--generic-border-soft); } .table-block__footnote { margin-top: 1.5rem; font-size: 0.95rem; color: var(--block-muted-color, var(--generic-text-muted)); } /* Hero Block */ .hero-block { position: relative; width: 100vw; margin-left: calc(50% - 50vw); min-height: auto; display: flex; align-items: center; padding: 0; --hero-gradient: #ffffff; --hero-accent: rgba(0, 0, 0, 0.1); --hero-accent-secondary: rgba(0, 0, 0, 0.05); --hero-photo: none; --hero-title-color: #000000; --hero-text-color: #212529; color: var(--hero-text-color); background: var(--hero-gradient); overflow: hidden; } .hero-block[data-has-photo="true"] { background-image: var(--hero-gradient), var(--hero-photo); background-size: cover, cover; background-position: center center, center center; } .hero-block__inner { width: min(1140px, 100%); margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) 1.5rem; } @media (max-width: 1024px), (prefers-reduced-motion: reduce) { .hero-block__inner { padding: clamp(2.5rem, 8vw, 4rem) 1.25rem; } } .hero-block--bg-aurora { --hero-gradient: linear-gradient(145deg, rgba(50, 86, 156, 0.9), rgba(96, 142, 220, 0.86)); --hero-accent: rgba(140, 210, 255, 0.45); --hero-accent-secondary: rgba(255, 219, 173, 0.4); } .hero-block--bg-sunrise { --hero-gradient: linear-gradient(150deg, rgba(77, 35, 128, 0.92), rgba(255, 115, 88, 0.88)); --hero-accent: rgba(255, 211, 182, 0.58); --hero-accent-secondary: rgba(255, 255, 191, 0.5); } .hero-block--bg-ocean { --hero-gradient: linear-gradient(150deg, rgba(20, 78, 118, 0.92), rgba(32, 142, 178, 0.82)); --hero-accent: rgba(120, 255, 230, 0.45); --hero-accent-secondary: rgba(86, 190, 255, 0.4); } .hero-block--bg-custom { /* custom gradient provided via inline CSS variable */ } .hero-block::before, .hero-block::after { display: none; } .hero-block__overlay { position: absolute; inset: 0; background: transparent; z-index: 0; } .hero-block--light .hero-block__overlay { background: linear-gradient(120deg, rgba(241, 245, 255, 0.72), rgba(226, 233, 255, 0.48)); } .hero-block--medium .hero-block__overlay { background: linear-gradient(120deg, rgba(19, 31, 53, 0.55), rgba(24, 46, 82, 0.38)); } .hero-block--dark .hero-block__overlay { background: linear-gradient(120deg, rgba(10, 20, 36, 0.75), rgba(15, 30, 56, 0.55)); } .hero-block--parallax { background-attachment: fixed; } .hero-block--parallax[data-has-photo="true"] { background-attachment: fixed, fixed; } @media (max-width: 1024px), (prefers-reduced-motion: reduce) { .hero-block--parallax { background-attachment: scroll; } .hero-block--parallax[data-has-photo="true"] { background-attachment: scroll, scroll; } } .hero-block__content { position: relative; z-index: 1; max-width: 820px; } .hero-block--center .hero-block__content { margin: 0 auto; text-align: center; } .hero-block--left .hero-block__content { margin-right: auto; text-align: left; } .hero-block--right .hero-block__content { margin-left: auto; text-align: right; } .hero-block__title { font-size: clamp(2.4rem, 4.8vw, 3.4rem); font-weight: 700; margin-bottom: 1.4rem; letter-spacing: -0.01em; max-width: 20ch; color: var(--hero-title-color, var(--block-heading-color, #ffffff)); text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55), 0 1px 6px rgba(0, 0, 0, 0.35); } .hero-block__subtitle { font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height: 1.75; color: var(--hero-text-color, var(--block-body-color, #ffffff)); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.25); margin-bottom: 2rem; max-width: 640px; } .hero-block__actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; justify-content: center; } .hero-block--center .hero-block__actions { justify-content: center; } .hero-block--right .hero-block__actions { justify-content: flex-end; } .hero-block__btn-primary, .hero-block__btn-secondary { border-radius: var(--generic-radius-sm); font-weight: 600; letter-spacing: 0.03em; min-height: 48px; padding-inline: 1.75rem; transition: var(--generic-transition); } .hero-block__btn-primary { position: relative; background: linear-gradient(130deg, #27519a, #3e6fca); color: #ffffff; border: 1px solid rgba(31, 63, 107, 0.12); box-shadow: 0 8px 24px rgba(31, 63, 107, 0.22); } .hero-block__btn-primary:hover, .hero-block__btn-primary:focus { transform: translateY(-1px); background: linear-gradient(130deg, #214682, #355fae); box-shadow: 0 16px 36px rgba(31, 63, 107, 0.26); } .hero-block__btn-secondary, .hero-block__btn-secondary.btn-outline-light { background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(31, 63, 107, 0.3); color: #1f3f6b; box-shadow: 0 10px 24px rgba(31, 63, 107, 0.12); } .hero-block__btn-secondary:hover, .hero-block__btn-secondary:focus { background: #ffffff; border-color: rgba(31, 63, 107, 0.45); color: #163060; } .hero-block--height-auto { min-height: auto; } .hero-block--height-40 { min-height: 40vh; } .hero-block--height-60 { min-height: 60vh; } .hero-block--height-80 { min-height: 80vh; } .hero-block--height-100 { min-height: 100vh; } .hero-block--palette-navy { --hero-gradient: linear-gradient(135deg, #1f3f6b, #2f5faa); --hero-accent: rgba(255, 255, 255, 0.12); --hero-accent-secondary: rgba(255, 255, 255, 0.1); --hero-title-color: #ffffff; --hero-text-color: #ffffff; color: var(--hero-text-color); } .hero-block--palette-navy .hero-block__btn-primary { background: linear-gradient(130deg, #ffffff, #dbe9ff); color: #1f3f6b; border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 16px 36px rgba(12, 26, 52, 0.28); } .hero-block--palette-navy .hero-block__btn-primary:hover, .hero-block--palette-navy .hero-block__btn-primary:focus { background: linear-gradient(130deg, #f5f8ff, #cadcff); color: #143372; } .hero-block--palette-navy .hero-block__btn-secondary, .hero-block--palette-navy .hero-block__btn-secondary.btn-outline-light { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.55); color: #ffffff; } .hero-block--palette-sky { --hero-gradient: linear-gradient(125deg, #f1f6ff, #e6efff); --hero-title-color: var(--generic-text-strong); --hero-text-color: var(--generic-text-muted); color: var(--hero-text-color); } .hero-block--palette-sky .hero-block__btn-primary { background: linear-gradient(130deg, #1f3f6b, #3b6ec1); color: #ffffff; } .hero-block--palette-sky .hero-block__btn-secondary, .hero-block--palette-sky .hero-block__btn-secondary.btn-outline-light { background: #ffffff; border-color: rgba(31, 63, 107, 0.18); color: #1f3f6b; } .hero-block--palette-slate { --hero-gradient: linear-gradient(135deg, #1f2a3b, #111927); --hero-accent: rgba(255, 255, 255, 0.18); --hero-accent-secondary: rgba(255, 255, 255, 0.1); --hero-title-color: #ffffff; --hero-text-color: rgba(255, 255, 255, 0.9); color: var(--hero-text-color); } .hero-block--palette-slate .hero-block__btn-primary { background: linear-gradient(130deg, #ffffff, #e4ecff); color: #1f2a3b; border-color: rgba(255, 255, 255, 0.25); } .hero-block--palette-slate .hero-block__btn-secondary, .hero-block--palette-slate .hero-block__btn-secondary.btn-outline-light { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.45); color: #ffffff; } .hero-block--palette-emerald { --hero-gradient: linear-gradient(135deg, var(--generic-brand-800), var(--generic-brand-700)); --hero-accent: rgba(255, 255, 255, 0.2); --hero-accent-secondary: rgba(255, 255, 255, 0.12); --hero-title-color: #ffffff; --hero-text-color: rgba(255, 255, 255, 0.9); color: var(--hero-text-color); } .hero-block--palette-emerald .hero-block__btn-primary { background: linear-gradient(130deg, #ffffff, var(--generic-brand-100)); color: var(--generic-brand-800); } .hero-block--palette-emerald .hero-block__btn-secondary, .hero-block--palette-emerald .hero-block__btn-secondary.btn-outline-light { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.45); color: #ffffff; } .hero-block--palette-sunset { --hero-gradient: linear-gradient(135deg, var(--generic-brand-700), var(--generic-brand-500)); --hero-accent: rgba(255, 255, 255, 0.18); --hero-accent-secondary: rgba(255, 255, 255, 0.1); --hero-title-color: #ffffff; --hero-text-color: rgba(255, 255, 255, 0.9); color: var(--hero-text-color); } .hero-block--palette-sunset .hero-block__btn-primary { background: linear-gradient(130deg, var(--generic-brand-800), var(--generic-brand-700)); color: #ffffff; border-color: rgba(255, 255, 255, 0.32); } .hero-block--palette-sunset .hero-block__btn-secondary, .hero-block--palette-sunset .hero-block__btn-secondary.btn-outline-light { background: rgba(255, 255, 255, 0.9); border-color: rgba(31, 63, 107, 0.35); color: var(--generic-brand-800); } /* Content Image Block */ .content-image-block { padding: 4.5rem 0; background: #ffffff; color: var(--block-body-color, var(--generic-text-body)); border-top: 1px solid rgba(219, 227, 240, 0.6); border-bottom: 1px solid rgba(219, 227, 240, 0.6); } .content-image-block::before { display: none; } .content-image-block--white { background: #ffffff; } .content-image-block--light { background: var(--generic-surface-alt); } .content-image-block--muted { background: var(--generic-surface-muted); } .content-image-block--primary { background: var(--generic-primary); color: var(--generic-on-dark); } .content-image-block__content { max-width: 520px; padding-right: 1rem; } .content-image-block__title { font-size: clamp(2.2rem, 4.2vw, 2.8rem); font-weight: 700; margin-bottom: 1rem; color: var(--block-heading-color, var(--generic-text-strong)); letter-spacing: -0.012em; } .content-image-block--primary .content-image-block__title { color: var(--generic-on-dark); } .content-image-block__eyebrow { display: inline-flex; align-items: center; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--generic-accent); margin-bottom: 0.75rem; } .content-image-block__text { font-size: 1.05rem; line-height: 1.7; color: var(--block-muted-color, var(--generic-text-muted)); margin-bottom: 1.75rem; } .content-image-block--primary .content-image-block__text { color: var(--generic-on-dark-muted); } .content-image-block__action { margin-top: 1.5rem; } .content-image-block__action .btn { border-radius: var(--generic-radius-sm); font-weight: 600; padding: 0.85rem 1.6rem; min-width: 180px; letter-spacing: 0.01em; box-shadow: none; transition: var(--generic-transition); } .content-image-block__action .btn-primary { background: var(--generic-primary); border-color: transparent; box-shadow: 0 12px 24px rgba(17, 32, 51, 0.18); } .content-image-block--primary .content-image-block__action .btn-primary { background: var(--generic-on-dark); color: var(--generic-primary); } .content-image-block__action .btn-primary:hover, .content-image-block__action .btn-primary:focus { background: #16365a; color: #ffffff; transform: translateY(-2px); } .content-image-block__action .btn-outline-light, .content-image-block__action .btn-outline-primary { border-width: 2px; color: var(--generic-primary); border-color: rgba(31, 63, 107, 0.3); background: transparent; } .content-image-block__action .btn-outline-light:hover, .content-image-block__action .btn-outline-primary:hover, .content-image-block__action .btn-outline-light:focus, .content-image-block__action .btn-outline-primary:focus { background: rgba(31, 63, 107, 0.08); color: var(--generic-primary); transform: translateY(-2px); } .content-image-block__image { position: relative; } .content-image-block__image::before { display: none; } .content-image-block__image img { position: relative; z-index: 1; width: 100%; border-radius: var(--generic-radius-lg); box-shadow: 0 14px 24px rgba(18, 32, 53, 0.12); } /* Features Grid */ .features-grid-block { padding: 5rem 0; background: #ffffff; border-top: 1px solid rgba(219, 227, 240, 0.6); border-bottom: 1px solid rgba(219, 227, 240, 0.6); } .features-grid-block__title { font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 700; margin-bottom: 0.75rem; } .features-grid-block__subtitle { font-size: 1.1rem; color: var(--block-muted-color, var(--generic-text-muted)); max-width: 620px; margin: 0 auto 2.5rem; line-height: 1.7; } .features-grid-block__item { background: #ffffff; border-radius: var(--generic-radius-md); padding: 2rem 1.5rem; height: 100%; border: 1px solid rgba(215, 224, 236, 0.7); box-shadow: none; transition: var(--generic-transition); text-align: left; position: relative; } .features-grid-block__item:focus-within, .features-grid-block__item:hover { transform: translateY(-4px); box-shadow: var(--generic-shadow-sm); border-color: var(--generic-border-strong); } .features-grid-block__icon { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; border-radius: 18px; background: rgba(31, 63, 107, 0.12); color: var(--generic-primary); font-size: 1.5rem; margin-bottom: 1.25rem; box-shadow: var(--generic-shadow-xs); } .features-grid-block__item-title { font-size: 1.3rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--block-heading-color, var(--generic-text-strong)); max-width: 22ch; } .features-grid-block__item-description { color: var(--block-muted-color, var(--generic-text-muted)); font-size: 1rem; line-height: 1.6; } /* Stats Block */ .stats-block { padding: 5rem 0; background: #ffffff; } .stats-block { color: var(--block-body-color, var(--generic-text-body)); } .stats-block--standard { background: #ffffff; --block-heading-color: var(--generic-text-strong); --block-body-color: var(--generic-text-body); } .stats-block--light { background: var(--generic-surface-alt); } .stats-block--muted { background: var(--generic-surface-muted); } .stats-block--primary { background: linear-gradient(150deg, var(--generic-gradient-primary-start), var(--generic-gradient-primary-end)); color: var(--generic-on-dark); } .stats-block--dark { background: linear-gradient(160deg, var(--generic-gradient-dark-start), var(--generic-gradient-dark-end)); color: var(--generic-on-dark); } .stats-block--standard.stats-block--primary, .stats-block--standard.stats-block--dark { background: #ffffff; color: var(--block-body-color, var(--generic-text-body)); } .stats-block__title { position: relative; z-index: 1; font-size: clamp(2rem, 4vw, 2.7rem); font-weight: 700; margin-bottom: 3rem; } .stats-block--standard .stats-block__title, .stats-block--light .stats-block__title, .stats-block--muted .stats-block__title { color: var(--block-heading-color, var(--generic-text-strong)); } .stats-block--primary .stats-block__title, .stats-block--dark .stats-block__title { color: #ffffff; } .stats-block--standard.stats-block--primary .stats-block__title, .stats-block--standard.stats-block--dark .stats-block__title { color: var(--block-heading-color, var(--generic-text-strong)); } .stats-block__grid { position: relative; z-index: 1; } .stats-block__item { text-align: center; padding: 1.5rem 1rem; } .stats-block--standard .stats-block__item, .stats-block--light .stats-block__item, .stats-block--muted .stats-block__item { background: var(--generic-surface); border-radius: var(--generic-radius-md); border: 1px solid var(--generic-border-soft); box-shadow: var(--generic-shadow-xs); } .stats-block__icon { font-size: 2.25rem; color: var(--generic-accent); margin-bottom: 0.75rem; display: inline-flex; } .stats-block--primary .stats-block__icon, .stats-block--dark .stats-block__icon { color: rgba(245, 247, 255, 0.85); } .stats-block__figure { display: flex; align-items: baseline; justify-content: center; gap: 0; line-height: 1; margin-bottom: 0; } .stats-block__number { font-size: clamp(2.2rem, 3.5vw, 3rem); font-weight: 800; line-height: 1; color: var(--stats-number-color, var(--block-accent-color)); letter-spacing: -0.02em; } .stats-block__suffix { font-size: 0.45em; font-weight: 700; margin-left: 0.08em; align-self: flex-start; margin-top: 0.3em; line-height: 1; color: inherit; } .stats-block__description { font-size: 0.92rem; color: var(--block-muted-color); font-weight: 500; margin-top: 0.4rem; line-height: 1.4; } /* Testimonials Block */ .testimonials-block { padding: 5rem 0; background: #000000; color: #f9fbff; border-top: none; border-bottom: none; } .testimonials-block__title { font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 700; margin-bottom: 1.5rem; color: #ffffff; } .testimonials-block__grid { display: grid; align-items: stretch; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); } .testimonials-block__grid-item { display: flex; } .testimonials-block__item { background: #ffffff; color: #0f0f0f; border-radius: 18px; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18); padding: clamp(1.7rem, 3vw, 2.3rem); height: 100%; display: flex; flex-direction: column; gap: 1rem; position: relative; transition: transform 160ms ease, box-shadow 160ms ease; } .testimonials-block__item::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 6px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.08)); border-top-left-radius: inherit; border-top-right-radius: inherit; } .testimonials-block__item::after { content: ""; position: absolute; inset: 12px; border-radius: 14px; background: linear-gradient(135deg, rgba(244, 247, 255, 0.35), rgba(255, 255, 255, 0)); pointer-events: none; opacity: 0; transition: opacity 160ms ease; } .testimonials-block__item:hover, .testimonials-block__item:focus-within { transform: translateY(-4px); box-shadow: 0 20px 36px rgba(13, 27, 49, 0.18); } .testimonials-block__item:hover::after, .testimonials-block__item:focus-within::after { opacity: 1; } .testimonials-block--cards .testimonials-block__item { background: linear-gradient(150deg, rgba(255, 255, 255, 1), rgba(225, 225, 225, 1)); border: 1px solid rgba(0, 0, 0, 0.08); color: #0f0f0f; box-shadow: 0 35px 65px rgba(0, 0, 0, 0.25); } .testimonials-block--cards .testimonials-block__item::before { background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.05)); opacity: 0.4; } .testimonials-block--cards .testimonials-block__item::after { background: linear-gradient(135deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0)); } .testimonials-block--cards { --block-body-color: #0f0f0f; --block-heading-color: #0f0f0f; } .testimonials-block__rating { color: #0f0f0f; font-size: 1rem; } .testimonials-block--cards .testimonials-block__rating { color: #0f0f0f; text-shadow: none; } .testimonials-block__quote { font-size: clamp(1.05rem, 2.1vw, 1.18rem); line-height: 1.75; color: #0f0f0f; margin: 0; font-weight: 500; letter-spacing: -0.005em; } .testimonials-block__author { display: flex; align-items: center; gap: 1rem; margin-top: auto; } .testimonials-block__author-photo img { width: 58px; height: 58px; object-fit: cover; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.08); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16); } .testimonials-block--cards .testimonials-block__author-photo img { border-color: rgba(0, 0, 0, 0.15); box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22); } .testimonials-block__author-name { font-weight: 600; color: #0f0f0f; } .testimonials-block__author-title { color: rgba(60, 60, 60, 0.92); font-size: 0.92rem; font-weight: 600; letter-spacing: 0.01em; } .testimonials-block__author-school { color: rgba(82, 82, 82, 0.85); font-size: 0.9rem; } .testimonials-block--cards .testimonials-block__quote { color: #0f0f0f; } .testimonials-block--cards .testimonials-block__author-name { color: #0f0f0f; } .testimonials-block--cards .testimonials-block__author-title { color: rgba(60, 60, 60, 0.92); } .testimonials-block--cards .testimonials-block__author-school { color: rgba(82, 82, 82, 0.82); } /* CTA Block */ .cta-block { padding: 5rem 0; position: relative; } .cta-block--primary { background: var(--generic-primary); color: var(--generic-on-dark); } .cta-block--secondary { background: #ffffff; color: var(--block-body-color, var(--generic-text-body)); border-top: 1px solid rgba(219, 227, 240, 0.6); border-bottom: 1px solid rgba(219, 227, 240, 0.6); } .cta-block--white { background: var(--generic-surface); color: var(--block-body-color, var(--generic-text-body)); border-top: 1px solid var(--generic-border-soft); border-bottom: 1px solid var(--generic-border-soft); } .cta-block__title { color: var(--block-heading-color, var(--generic-text-strong)); } .cta-block--primary .cta-block__title { color: var(--generic-on-dark); } .cta-block__title { font-size: clamp(2.3rem, 4.5vw, 3.2rem); font-weight: 700; margin-bottom: 1rem; } .cta-block__subtitle { font-size: 1.15rem; line-height: 1.7; color: var(--block-muted-color, var(--generic-text-muted)); max-width: 640px; margin: 0 auto 1.5rem; } .cta-block--primary .cta-block__subtitle { color: var(--generic-on-dark-muted); } .cta-block__urgency { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(31, 63, 107, 0.12); color: var(--block-heading-color, var(--generic-text-strong)); padding: 10px 18px; border-radius: 999px; font-size: 0.95rem; font-weight: 600; margin-bottom: 1.5rem; } .cta-block--primary .cta-block__urgency { background: rgba(245, 247, 255, 0.16); color: var(--generic-on-dark); } .cta-block__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .cta-block__btn-primary, .cta-block__btn-secondary { border-radius: var(--generic-radius-sm); font-weight: 600; min-height: 48px; padding-inline: 1.75rem; transition: var(--generic-transition); } .cta-block__btn-primary { background: var(--generic-primary); color: var(--generic-on-dark); border: 1px solid transparent; box-shadow: var(--generic-shadow-xs); } .cta-block__btn-primary:hover, .cta-block__btn-primary:focus { background: #183152; color: var(--generic-on-dark); box-shadow: var(--generic-shadow-sm); } .cta-block__btn-secondary, .cta-block__btn-secondary.btn-outline-light { border: 2px solid var(--generic-primary); color: var(--generic-primary); background: transparent; box-shadow: none; } .cta-block__btn-secondary:hover, .cta-block__btn-secondary:focus { background: rgba(31, 63, 107, 0.08); } /* Paragraph Block */ .paragraph-block { padding: 4.5rem 0; background: #ffffff; border-top: 1px solid rgba(219, 227, 240, 0.6); border-bottom: 1px solid rgba(219, 227, 240, 0.6); } .paragraph-block__title { font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 700; margin-bottom: 1.25rem; } .paragraph-block__content { font-size: 1.05rem; line-height: 1.75; color: var(--block-muted-color, var(--generic-text-muted)); } .paragraph-block__media img { width: 100%; border-radius: var(--generic-radius-lg); box-shadow: var(--generic-shadow-md); } /* Detailed Block */ .detailed-block { padding: 4.75rem 0; background: #ffffff; } .detailed-block--light, .detailed-block--white { background: #ffffff; } .detailed-block--dark { background: #0f1b2d; color: var(--generic-on-dark); } .detailed-block__title { font-size: clamp(2.1rem, 4vw, 2.7rem); font-weight: 700; margin-bottom: 1.25rem; } .detailed-block__content { color: var(--block-muted-color, var(--generic-text-muted)); margin-bottom: 1.5rem; font-size: 1.05rem; line-height: 1.7; } .detailed-block--dark .detailed-block__content { color: var(--generic-on-dark-muted); } .detailed-block__list { list-style: none; padding: 0; margin: 0 0 1.5rem; } .detailed-block__list-item { position: relative; padding-left: 1.75rem; margin-bottom: 0.75rem; color: var(--block-body-color, var(--generic-text-body)); font-weight: 500; } .detailed-block__list-item::before { content: '\2713'; position: absolute; left: 0; top: 0.1rem; color: var(--generic-success); font-weight: 700; } .detailed-block--dark .detailed-block__list-item { color: var(--generic-on-dark); } .detailed-block__media img { width: 100%; border-radius: var(--generic-radius-lg); box-shadow: var(--generic-shadow-md); } /* Image Slice — full-bleed background image with absolutely-positioned overlay text */ .image-slice-block { position: relative; overflow: hidden; min-height: clamp(260px, 36vw, 480px); display: flex; flex-direction: column; padding: 0 !important; background: #0f172a; } .builder-blocks > .block-wrapper:not(.block-wrapper--width-full) > section.builder-block.image-slice-block:not(.hero-block):not(.video-hero-block) { padding: 0 !important; } /* Height variants */ .image-slice-block--height-sm { min-height: clamp(160px, 20vw, 220px); } .image-slice-block--height-md { min-height: clamp(260px, 36vw, 480px); } .image-slice-block--height-lg { min-height: clamp(380px, 50vw, 600px); } .image-slice-block--height-xl { min-height: clamp(500px, 65vw, 760px); } .image-slice-block__background { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .image-slice-block__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; opacity: 0; transform: translate3d(0, 0, 0) scale(1); transition: opacity var(--image-slice-transition-duration, 800ms) var(--image-slice-transition-easing, ease-in-out), transform var(--image-slice-transition-duration, 800ms) var(--image-slice-transition-easing, ease-in-out); will-change: opacity, transform; z-index: 1; } .image-slice-block__image.is-active { opacity: 1; z-index: 2; } .image-slice-block__image.is-prev { z-index: 1; } .image-slice-block__background--fade .image-slice-block__image { transform: translate3d(0, 0, 0) scale(1); } .image-slice-block__background--slide .image-slice-block__image { transform: translate3d(4%, 0, 0) scale(1); } .image-slice-block__background--slide .image-slice-block__image.is-active { transform: translate3d(0, 0, 0) scale(1); } .image-slice-block__background--zoom .image-slice-block__image { transform: translate3d(0, 0, 0) scale(1.08); } .image-slice-block__background--zoom .image-slice-block__image.is-active { transform: translate3d(0, 0, 0) scale(1); } /* Overlay base */ .image-slice-block__overlay { position: relative; z-index: 1; width: 100%; flex: 1; padding: 0; background: transparent; display: flex; flex-direction: column; justify-content: flex-end; } /* Content base */ .image-slice-block__content { display: flex; flex-direction: column; width: 100%; max-width: 100%; padding: 0.55rem 1.5rem; border-radius: 0; background: transparent; } /* ── Pill (Default) ──────────────────────────────────── */ .image-slice-block--overlay-pill .image-slice-block__overlay { justify-content: center; align-items: center; padding: 1.5rem; } .image-slice-block--overlay-pill .image-slice-block__overlay > .container { display: flex; justify-content: center; align-items: center; padding: 0; max-width: none; } .image-slice-block--overlay-pill .image-slice-block__content { background: transparent; padding: 0; align-items: center; text-align: center; } .image-slice-block--overlay-pill .image-slice-block__text { display: table; margin: 0 auto; max-width: min(560px, 92%); border-radius: 999px; padding: 0.55rem 2.25rem; background: rgba(8, 14, 28, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.14); text-align: center; } /* Pill size variants */ .image-slice-block--size-sm.image-slice-block--overlay-pill .image-slice-block__text { max-width: min(300px, 88%); padding: 0.4rem 1.5rem; } .image-slice-block--size-lg.image-slice-block--overlay-pill .image-slice-block__text { max-width: min(820px, 96%); padding: 0.7rem 2.5rem; } .image-slice-block--overlay-pill .image-slice-block__text :is(h1, h2, h3, h4, h5, h6) { color: #ffffff !important; font-size: clamp(0.9rem, 1.8vw, 1.15rem); font-weight: 600; letter-spacing: 0.01em; line-height: 1.3; margin: 0; } .image-slice-block--overlay-pill .image-slice-block__text p { color: rgba(255, 255, 255, 0.88) !important; font-size: clamp(0.78rem, 1.3vw, 0.92rem); margin: 0; } /* ── Dark Strip ──────────────────────────────────────── */ .image-slice-block--overlay-dark .image-slice-block__overlay { justify-content: flex-end; } .image-slice-block--overlay-dark .image-slice-block__overlay > .container { padding: 0; max-width: none; } .image-slice-block--overlay-dark .image-slice-block__content { border-radius: 0; padding: 0.65rem 2rem; background: rgba(8, 15, 28, 0.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); max-width: 100%; } .image-slice-block--overlay-dark .image-slice-block__text :is(h1, h2, h3, h4) { color: #ffffff !important; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); } .image-slice-block--overlay-dark .image-slice-block__text :is(p, li, a, span) { color: rgba(255, 255, 255, 0.92) !important; } /* ── Gradient / Style B ──────────────────────────────── */ .image-slice-block--overlay-gradient .image-slice-block__overlay, .image-slice-block--overlay-light .image-slice-block__overlay { background: linear-gradient(to top, rgba(5, 12, 28, 0.84) 0%, transparent 30% ); justify-content: flex-end; padding-bottom: 0.75rem; } .image-slice-block--overlay-gradient .image-slice-block__overlay > .container, .image-slice-block--overlay-light .image-slice-block__overlay > .container { padding: 0; max-width: none; } .image-slice-block--overlay-gradient .image-slice-block__content, .image-slice-block--overlay-light .image-slice-block__content { background: transparent; border-radius: 0; padding: 0.55rem 2rem; max-width: 100%; } .image-slice-block--overlay-gradient .image-slice-block__text :is(h1, h2, h3, h4, h5, h6), .image-slice-block--overlay-light .image-slice-block__text :is(h1, h2, h3, h4, h5, h6) { color: #ffffff !important; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); } .image-slice-block--overlay-gradient .image-slice-block__text :is(p, li, a, span, strong, em), .image-slice-block--overlay-light .image-slice-block__text :is(p, li, a, span, strong, em) { color: rgba(255, 255, 255, 0.88) !important; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); } /* ── Glass Strip ─────────────────────────────────────── */ .image-slice-block--overlay-transparent .image-slice-block__overlay { justify-content: flex-end; } .image-slice-block--overlay-transparent .image-slice-block__overlay > .container { padding: 0; max-width: none; } .image-slice-block--overlay-transparent .image-slice-block__content { background: rgba(15, 23, 42, 0.52); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid rgba(255, 255, 255, 0.10); border-radius: 0; padding: 0.65rem 2rem; max-width: 100%; } .image-slice-block--overlay-transparent .image-slice-block__text :is(h1, h2, h3, h4, h5, h6) { color: #ffffff !important; } .image-slice-block--overlay-transparent .image-slice-block__text :is(p, li, a, span, strong, em) { color: rgba(255, 255, 255, 0.92) !important; } /* Position alignment (pill overrides to center) */ .image-slice-block__content--left { text-align: left; align-items: flex-start; } .image-slice-block__content--center { text-align: center; align-items: center; } .image-slice-block__content--right { text-align: right; align-items: flex-end; } /* Text base */ .image-slice-block__text { width: 100%; font-size: clamp(0.88rem, 1.6vw, 1rem); line-height: 1.6; } .image-slice-block__text :is(h1, h2) { font-size: clamp(1.75rem, 4.2vw, 3rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 0.4em; } .image-slice-block__text h3 { font-size: clamp(1.1rem, 2.5vw, 1.6rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; margin-bottom: 0.4em; } .image-slice-block__text p { margin-bottom: 0.65em; } .image-slice-block__text p:last-child { margin-bottom: 0; } .image-slice-block__text :is(h1, h2, h3) + p { margin-top: 0; } @media (max-width: 767px) { .image-slice-block { min-height: 220px; } .image-slice-block__content--right { align-items: flex-start; text-align: left; } .image-slice-block--overlay-pill .image-slice-block__content { border-radius: 14px; max-width: 94%; padding: 0.5rem 1.25rem; } } /* Scoreboard Block */ .scoreboard-block { padding: 5rem 0; background: #ffffff; border-top: 1px solid rgba(219, 227, 240, 0.6); border-bottom: 1px solid rgba(219, 227, 240, 0.6); } .scoreboard-block--light { background: #ffffff; } .scoreboard-block--dark { background: linear-gradient(160deg, var(--generic-gradient-dark-start), var(--generic-gradient-dark-end)); color: var(--generic-on-dark); } .scoreboard-block--primary { background: linear-gradient(140deg, #f5f8ff, #e9f0ff); color: var(--block-heading-color, var(--generic-text-strong)); position: relative; overflow: hidden; } .scoreboard-block--primary::before { content: ""; position: absolute; inset: -14% -12%; background: radial-gradient(50% 60% at 18% 28%, rgba(79, 129, 236, 0.18), transparent 70%), radial-gradient(45% 55% at 80% 72%, rgba(30, 63, 107, 0.14), transparent 75%); filter: blur(28px); opacity: 0.55; pointer-events: none; } .scoreboard-block__title { text-align: center; font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 700; margin-bottom: 3rem; } .scoreboard-block__grid { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; } .scoreboard-card { flex: 1 1 220px; max-width: 260px; background: var(--generic-surface); border-radius: var(--generic-radius-md); padding: 1.75rem 1.4rem; text-align: center; box-shadow: var(--generic-shadow-card); border: 1px solid var(--generic-border-soft); display: flex; flex-direction: column; align-items: center; gap: 0.4rem; } .scoreboard-card__icon { width: 3rem; height: 3rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem; background: rgba(47, 111, 177, 0.12); color: var(--generic-accent); font-size: 1.5rem; } .scoreboard-block--primary .scoreboard-card__icon { background: rgba(31, 63, 107, 0.12); color: var(--generic-primary); } .scoreboard-card__number { display: inline-flex; align-items: flex-start; justify-content: center; font-size: clamp(2rem, 3.2vw, 2.6rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--primary-color, #0077be); margin-bottom: 0; } .scoreboard-block--dark .scoreboard-card__number { color: var(--secondary-color, #40b4e3); } .scoreboard-card__description { color: var(--block-muted-color, var(--generic-text-muted)); font-size: 0.92rem; margin-top: 0.4rem; line-height: 1.4; } .scoreboard-block__empty { text-align: center; color: var(--block-muted-color, var(--generic-text-muted)); font-style: italic; } /* Carousel */ .carousel-block__toggle { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: 0.5rem; border-radius: var(--generic-radius-md); font-weight: 600; background: rgba(18, 32, 53, 0.1); color: var(--block-heading-color, var(--generic-text-strong)); border: 1px solid var(--generic-border-soft); padding: 0.65rem 1.2rem; transition: var(--generic-transition); } .carousel-block__toggle[aria-pressed="true"] { background: rgba(18, 32, 53, 0.2); } .carousel-block__toggle:focus, .carousel-block__toggle:focus-visible { outline-width: 3px !important; outline-style: solid !important; outline-color: var(--generic-focus-ring-light) !important; outline-offset: 3px; box-shadow: 0 0 0 4px var(--generic-focus-glow-light) !important; } .carousel-block .carousel { position: relative; } .carousel-block .carousel-inner { border-radius: var(--generic-radius-lg); overflow: hidden; } .carousel-block__image { display: block; width: 100%; height: clamp(280px, 42vw, 620px); object-fit: cover; } .block-wrapper--width-full > :is(.image-slice-block, .carousel-block) { padding-inline: 0 !important; border-radius: 0 !important; background: transparent; } .block-wrapper--width-full > :is(.image-slice-block, .carousel-block) > .container { max-width: 100% !important; padding-left: clamp(1rem, 4vw, 3rem); padding-right: clamp(1rem, 4vw, 3rem); } .carousel-block .carousel-caption { --block-heading-color: #ffffff; --block-body-color: rgba(255, 255, 255, 0.92); background: linear-gradient(180deg, rgba(15, 23, 42, 0.78), rgba(15, 23, 42, 0.6)); backdrop-filter: blur(8px); border-radius: var(--generic-radius-md); padding: clamp(1.25rem, 3vw, 1.8rem); margin: clamp(1.25rem, 3vw, 2rem); } .carousel-block .carousel-caption h3, .carousel-block .carousel-caption p { color: #ffffff !important; text-shadow: 0 3px 18px rgba(10, 20, 36, 0.55); } .carousel-block .carousel-control-prev, .carousel-block .carousel-control-next { width: auto !important; height: auto !important; bottom: auto !important; background: transparent !important; border: none !important; padding: 0.4rem 0.65rem; top: 50%; transform: translateY(-50%); opacity: 1; } .carousel-block .carousel-control-prev { left: 0.75rem; } .carousel-block .carousel-control-next { right: 0.75rem; } .carousel-block .carousel-control-prev-icon, .carousel-block .carousel-control-next-icon { width: 2.5rem; height: 2.5rem; background-color: rgba(12, 24, 44, 0.7); color: #ffffff !important; border-radius: 999px; background-size: 45%; background-position: 55% 50%; filter: drop-shadow(0 6px 14px rgba(10, 20, 36, 0.45)); } .builder-blocks .carousel-block .carousel-control-prev-icon, .builder-blocks .carousel-block .carousel-control-next-icon { color: #ffffff !important; } .carousel-block .carousel-control-prev:focus, .carousel-block .carousel-control-prev:focus-visible, .carousel-block .carousel-control-next:focus, .carousel-block .carousel-control-next:focus-visible { outline-width: 3px !important; outline-style: solid !important; outline-color: var(--generic-focus-ring-dark) !important; outline-offset: 3px; box-shadow: 0 0 0 4px var(--generic-focus-glow-dark) !important; } /* Team Leaders */ .team-leaders-block { padding: 5rem 0; background: #ffffff; } .team-leaders-block--light { background: #ffffff; color: var(--block-body-color, var(--generic-text-body)); --block-heading-color: var(--generic-text-strong); --block-body-color: var(--generic-text-body); } .team-leaders-block--dark { background: #101c30; color: var(--generic-on-dark); } .team-leaders-block__title { font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 700; margin-bottom: 1rem; } .team-leaders-block__intro { max-width: 720px; margin: 0 auto 2.5rem; color: var(--block-muted-color, var(--generic-text-muted)); font-size: 1.05rem; line-height: 1.7; } .team-leaders-block--dark .team-leaders-block__intro { color: var(--generic-on-dark-muted); } .team-leaders-block__grid { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .team-card { background: var(--block-surface-color, var(--generic-surface)); border-radius: var(--generic-radius-md); padding: 2rem 1.5rem; text-align: center; box-shadow: var(--generic-shadow-xs); border: 1px solid var(--block-stroke-color, var(--generic-border-soft)); height: 100%; display: flex; flex-direction: column; gap: 0.75rem; } .team-leaders-block--dark .team-card { background: rgba(15, 23, 42, 0.4); border: 1px solid rgba(245, 247, 255, 0.12); color: var(--generic-on-dark); } .team-card__photo img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin: 0 auto; box-shadow: var(--generic-shadow-sm); } .team-card__name { font-size: 1.2rem; font-weight: 600; color: var(--block-heading-color, var(--generic-text-strong)); } .team-card__role { color: var(--block-muted-color, var(--generic-text-muted)); font-weight: 500; margin: 0; } .team-card__bio { font-size: 0.98rem; color: var(--block-muted-color, var(--generic-text-muted)); flex-grow: 1; } .team-leaders-block--dark .team-card__bio { color: var(--generic-on-dark-muted); } .team-leaders-block--dark .team-card__role { color: rgba(255, 255, 255, 0.75); } .team-card__link { font-weight: 600; color: var(--block-accent-color, var(--generic-primary)); text-decoration: underline; } /* Case Studies */ .case-studies-block { padding: 4.75rem 0; background: #ffffff; } .case-studies-block--light, .case-studies-block--primary, .case-studies-block--dark { background: #ffffff; color: var(--block-body-color, var(--generic-text-body)); } .case-studies-block__title { font-size: clamp(2.1rem, 4.5vw, 2.9rem); font-weight: 700; margin-bottom: 1rem; } .case-studies-block__subtitle { color: var(--block-muted-color, var(--generic-text-muted)); max-width: 700px; margin: 0 auto 2.5rem; font-size: 1.05rem; line-height: 1.7; } .case-studies-block--primary .case-studies-block__subtitle, .case-studies-block--dark .case-studies-block__subtitle { color: var(--generic-on-dark-muted); } .case-studies-block__grid { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .case-studies-card { background: #ffffff; border-radius: var(--generic-radius-md); border: 1px solid rgba(215, 224, 236, 0.7); box-shadow: none; padding: 1.9rem 1.6rem; display: flex; flex-direction: column; gap: 0.9rem; height: 100%; } .case-studies-card--highlight { border: 2px solid var(--generic-warning); box-shadow: 0 16px 30px rgba(183, 121, 31, 0.25); } .case-studies-card__media img { max-width: 160px; width: 100%; display: block; margin: 0 auto; } .case-studies-card__title { font-size: 1.25rem; font-weight: 600; color: var(--block-heading-color, var(--generic-text-strong)); } .case-studies-block--primary .case-studies-card__title, .case-studies-block--dark .case-studies-card__title { color: var(--generic-on-dark); } .case-studies-card__description, .case-studies-card__results { font-size: 0.98rem; color: var(--block-muted-color, var(--generic-text-muted)); } .case-studies-block--primary .case-studies-card__description, .case-studies-block--primary .case-studies-card__results, .case-studies-block--dark .case-studies-card__description, .case-studies-block--dark .case-studies-card__results { color: var(--generic-on-dark-muted); } .case-studies-card__link { font-weight: 600; color: var(--generic-primary); text-decoration: underline; } .case-studies-block--primary .case-studies-card__link, .case-studies-block--dark .case-studies-card__link { color: var(--generic-on-dark); } .case-studies-block__empty { text-align: center; color: var(--block-muted-color, var(--generic-text-muted)); font-style: italic; } /* -------------------------------------------------- Refined neutral styling pass (2025-09-30) Keeps every block clean, readable, and consistent. --------------------------------------------------- */ :root { --generic-surface-base: #ffffff; --generic-surface-muted: #f6f8fb; --generic-border-soft: rgba(214, 223, 235, 0.9); --generic-border-strong: rgba(148, 169, 196, 0.65); --generic-shadow-card: 0 18px 34px rgba(15, 27, 45, 0.12); } .builder-blocks { gap: 3rem; } .builder-blocks > .block-wrapper:not(.block-wrapper--width-full) > section:not(.hero-block):not(.video-hero-block):not(.parallax-hero) { background: var(--generic-surface-base); border: 1px solid var(--generic-border-soft); border-radius: 18px; padding: clamp(2.5rem, 4vw, 3.25rem) clamp(1.75rem, 3vw, 2.75rem); box-shadow: var(--generic-shadow-card); /* Chain through --page-* so the section catchall doesn't kill the cascade. Previously these were hardcoded hex which beat every block-level reassign (see audit L5). */ /* Chain through theme tokens so dark-mode :root[data-theme="dark"] overrides reach this layer too. Hardcoded hex fallback only kicks in when neither --page-fg nor --heading-color is defined (which shouldn't happen in practice — theme.css always defines them). */ --block-heading-color: var(--page-fg, var(--heading-color, #182b45)); --block-body-color: var(--page-fg, var(--text-color, #3b485d)); color: var(--block-body-color); } .builder-blocks > .block-wrapper:not(.block-wrapper--width-full) > section:not(.hero-block):not(.video-hero-block):not(.parallax-hero) h2, .builder-blocks > .block-wrapper:not(.block-wrapper--width-full) > section:not(.hero-block):not(.video-hero-block):not(.parallax-hero) h3 { color: var(--block-heading-color, #182b45); } .builder-blocks > .block-wrapper:not(.block-wrapper--width-full) > section:not(.hero-block):not(.video-hero-block):not(.parallax-hero) p, .builder-blocks > .block-wrapper:not(.block-wrapper--width-full) > section:not(.hero-block):not(.video-hero-block):not(.parallax-hero) li { color: var(--block-body-color, #3b485d); } .builder-blocks > .block-wrapper:not(.block-wrapper--width-full) > section:not(.hero-block):not(.video-hero-block):not(.parallax-hero) .btn-primary { background: var(--block-accent-color, #1a3559); border: 1px solid var(--block-accent-color, #1a3559); box-shadow: 0 10px 24px rgba(26, 53, 89, 0.25); } .builder-blocks > .block-wrapper:not(.block-wrapper--width-full) > section:not(.hero-block):not(.video-hero-block):not(.parallax-hero) .btn-primary:hover, .builder-blocks > .block-wrapper:not(.block-wrapper--width-full) > section:not(.hero-block):not(.video-hero-block):not(.parallax-hero) .btn-primary:focus { background: var(--block-accent-color, #132742); border-color: var(--block-accent-color, #132742); filter: brightness(0.92); } .builder-blocks > .block-wrapper:not(.block-wrapper--width-full) > section:not(.hero-block):not(.video-hero-block):not(.parallax-hero) .btn-outline-light, .builder-blocks > .block-wrapper:not(.block-wrapper--width-full) > section:not(.hero-block):not(.video-hero-block):not(.parallax-hero) .btn-outline-primary { color: #1a3559; border: 1px solid rgba(26, 53, 89, 0.4); } .builder-blocks > .block-wrapper:not(.block-wrapper--width-full) > section:not(.hero-block):not(.video-hero-block):not(.parallax-hero) .btn-outline-light:hover, .builder-blocks > .block-wrapper:not(.block-wrapper--width-full) > section:not(.hero-block):not(.video-hero-block):not(.parallax-hero) .btn-outline-primary:hover { background: rgba(26, 53, 89, 0.08); color: #1a3559; } /* ============================================================ Coastal-banner page-bg surface override ------------------------------------------------------------ On pages with .has-coastal-page-bg (home, currently), the sitewide parallax wave field is the visual identity. The default white card wrapper above would cover it — instead, give every block a low-alpha dark-tinted glass panel so the wave field reads through. Mirrors design/Coastal Breeze Banner.html § .section-services / .section-areas overlays (lines ~584-614) — same tint family, same backdrop-filter blur (14px / saturate 140%) as the design's sticky strips. Buttons + text inside flip via the override of --block-* tokens to the on-dark family — same chain as banner-dark variants on category-strip + section-list blocks. ============================================================ */ .has-coastal-page-bg .builder-blocks > .block-wrapper:not(.block-wrapper--width-full) > section:not(.hero-block):not(.video-hero-block):not(.parallax-hero) { /* !important fights the !important on the .stats-block / .scoreboard-block / .testimonials-block / etc. surface-base catchall further down. Specificity alone (0,7,1 vs 0,1,0) loses against !important. */ background: rgba(8, 18, 38, 0.55) !important; border-color: rgba(190, 220, 250, 0.18); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); /* On the deep-night atmospheric surface, headings and body must read light regardless of page theme (Group C tokens per architecture/light-dark-theme.md). */ --block-heading-color: rgb(240, 248, 255); --block-body-color: rgb(232, 244, 255); --block-muted-color: rgba(214, 232, 248, 0.78); --block-accent-color: var(--brand-cyan, rgb(140, 220, 255)); --block-surface-color: rgba(8, 18, 38, 0.55); --block-stroke-color: transparent; color: var(--block-body-color); } /* Heading + body color overrides for the glass surface — these beat the (0,1,1) heading catchalls at line ~136 and the body catchall at line ~150 by adding .has-coastal-page-bg prefix (specificity 0,2,1 > 0,1,1). */ .has-coastal-page-bg .builder-blocks > .block-wrapper:not(.block-wrapper--width-full) > section:not(.hero-block):not(.video-hero-block):not(.parallax-hero) :is(h1, h2, h3, h4, h5, h6) { color: var(--block-heading-color); } .has-coastal-page-bg .builder-blocks > .block-wrapper:not(.block-wrapper--width-full) > section:not(.hero-block):not(.video-hero-block):not(.parallax-hero) :is(p, li, blockquote) { color: var(--block-body-color); } /* On .has-coastal-page-bg, the inner .hero-block (used for mid-page content heros, distinct from the top parallax-hero) was excluded from the wrapper glass override because the wrapper catchall has :not(.hero-block). It still rendered as solid rgb(15, 23, 42) + placeholder bg-image — covering the wave field. Replace with the same glass treatment so the page-bg shows through. */ .has-coastal-page-bg .hero-block:not(.parallax-hero) { background: rgba(8, 18, 38, 0.55) !important; background-image: none !important; -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-radius: 18px; --block-heading-color: rgb(240, 248, 255); --block-body-color: rgb(232, 244, 255); color: var(--block-body-color); } /* Block-variant overrides that re-declare --block-* tokens (e.g. .research-block--light at line ~2993, .stats-block--light, etc.) target the same element as my wrapper catchall above. Even though my catchall has higher specificity, browsers seem to resolve var re-assignment differently when both rules target the same element — possibly due to the section type selector being lower priority in the cascade than expected. Override here with maximum-specific :is() compound to defeat them. */ .has-coastal-page-bg .builder-blocks .builder-block:is( .research-block, .research-block--light, .research-block--primary, .stats-block, .scoreboard-block--primary, .scoreboard-block--light, .scoreboard-block--dark, .testimonials-block, .team-leaders-block, .case-studies-block, .case-studies-block--light, .content-image-block--white, .detailed-block--light, .image-slice-block--overlay-light, .pricing-table-block--palette-navy, .pricing-table-block--palette-light, .features-grid-block, .featurette-block, .paragraph-block, .headline-block, .headline-block--list, .call-to-action-block--banner, .chart-block, .comparison-table-block, .comparison-table-block--comparison, .category-block, .carousel-block, .project-gallery-block ) { --block-heading-color: rgb(240, 248, 255) !important; --block-body-color: rgb(232, 244, 255) !important; --block-muted-color: rgba(214, 232, 248, 0.78) !important; color: rgb(232, 244, 255); } /* Focus-visible outline for keyboard navigation on home — many blocks set outline-style: none which breaks accessibility. Add a visible brand-cyan ring on focus-visible (keyboard tab, not click). Limited to home so service/area pages aren't affected. */ .has-coastal-page-bg a:focus-visible, .has-coastal-page-bg button:focus-visible { outline: 2px solid var(--brand-cyan, rgb(140, 220, 255)) !important; outline-offset: 3px; border-radius: 4px; } /* Button contrast on the dark glass surface — design uses dark text on the coral-cyan gradient primary CTA (Banner.html:437, color: #0a1530). When .btn-primary inherits the brand-cyan accent as its bg, white text fails contrast against the light cyan. Force dark text on cyan bgs, and use brand-cyan as bg consistently. */ .has-coastal-page-bg .builder-blocks .btn-primary { color: rgb(10, 21, 48) !important; background: linear-gradient(110deg, rgb(120, 200, 255) 0%, rgb(255, 180, 150) 100%) !important; border-color: transparent !important; box-shadow: 0 14px 36px -10px rgba(120, 200, 255, 0.50), 0 8px 24px -10px rgba(255, 150, 130, 0.45) !important; } .has-coastal-page-bg .builder-blocks .btn-primary:hover, .has-coastal-page-bg .builder-blocks .btn-primary:focus { color: rgb(10, 21, 48) !important; transform: translateY(-2px); } /* Secondary link "View Specials" etc. inside CTA blocks — was dark navy (#0f172a) on dark glass. Use brand cyan for legibility. */ .has-coastal-page-bg .builder-blocks .call-to-action-block__secondary-link, .has-coastal-page-bg .builder-blocks .research-block__secondary { color: var(--brand-cyan, rgb(140, 220, 255)) !important; } .has-coastal-page-bg .builder-blocks .call-to-action-block__secondary-link:hover, .has-coastal-page-bg .builder-blocks .research-block__secondary:hover { color: var(--brand-cyan-soft, rgb(190, 230, 255)) !important; } .has-coastal-page-bg .hero-block:not(.parallax-hero) .hero-block__overlay { /* The overlay sits on top of the now-transparent surface — its dark gradient was tuned for the original slate-900 bg. Tone it down so it doesn't double-darken the glass. */ background: linear-gradient(120deg, rgba(8, 18, 38, 0.25), rgba(14, 28, 58, 0.18)); } /* Stats / scoreboard numbers should retain the brand accent (cyan blue) on the deep-night surface — they're the focal. */ .has-coastal-page-bg .builder-blocks .stats-block__number, .has-coastal-page-bg .builder-blocks .stats-block__suffix, .has-coastal-page-bg .builder-blocks .scoreboard-card__number, .has-coastal-page-bg .builder-blocks .scoreboard-card__suffix { color: var(--brand-cyan, rgb(140, 220, 255)); } /* Inner cards (testimonial cards, team cards, case-study cards, service cards, stat cards) need their own glass treatment — they're nested inside an already-glass parent, so use a slightly lighter tint to maintain layered depth. */ .has-coastal-page-bg .builder-blocks :is( .testimonial-card, .team-card, .case-studies-card, .service-card, .stats-block__card, .scoreboard-card, .pricing-table-block__plan, .feature-card, .faq-block__item ) { background: rgba(14, 28, 58, 0.65); border-color: rgba(190, 220, 250, 0.20); color: var(--block-body-color, rgb(232, 244, 255)); } .content-image-block, .paragraph-block, .detailed-block, .features-grid-block, .stats-block, .scoreboard-block, .testimonials-block, .team-leaders-block, .case-studies-block, .research-block, .cta-block--secondary { background: var(--generic-surface-base) !important; border-top: 1px solid var(--generic-border-soft); border-bottom: 1px solid var(--generic-border-soft); } .content-image-block__image img, .paragraph-block__media img, .detailed-block__media img, .team-card__photo img, .case-studies-card__media img { box-shadow: 0 16px 32px rgba(15, 27, 45, 0.18); } .features-grid-block__item, .testimonials-block__item, .case-studies-card { border: 1px solid rgba(212, 220, 234, 0.9); box-shadow: 0 12px 26px rgba(13, 23, 40, 0.12); } .stats-block::after { display: none; } .hero-block { background: radial-gradient(circle at 15% 20%, rgba(54, 104, 163, 0.35), rgba(15, 27, 45, 0.95)); } .hero-block__overlay { background: linear-gradient(120deg, rgba(12, 24, 44, 0.55), rgba(24, 46, 82, 0.32)); } .video-hero-block__overlay--light { background: rgba(15, 27, 45, 0.24); } .video-hero-block__overlay--medium { background: rgba(15, 27, 45, 0.45); } .video-hero-block__overlay--dark { background: rgba(15, 27, 45, 0.6); } .content-image-block__eyebrow, .features-grid-block__subtitle, .testimonials-block__author-title, .team-leaders-block__intro, .case-studies-block__subtitle, .research-block__abstract { color: #44536b; } .block-wrapper--content-image .content-image-block__title, .block-wrapper--detailed-block .detailed-block__title, .block-wrapper--paragraph-block .paragraph-block__title, .block-wrapper--features-grid .features-grid-block__title, .block-wrapper--stats-block .stats-block__title, .block-wrapper--scoreboard-metrics .scoreboard-block__title, .block-wrapper--testimonials .testimonials-block__title, .block-wrapper--team-leaders .team-leaders-block__title, .block-wrapper--case-studies-grid .case-studies-block__title, .block-wrapper--research-block .research-block__title, .block-wrapper--cta-block .cta-block__title { letter-spacing: -0.01em; margin-bottom: 1.4rem; } /* Research Block Bespoke methodology tokens default through the canonical --block-* cascade. The --primary variant flips the surface and stroke tokens for the dark gradient backdrop, but each still chains through --page-* — see architecture/block-color-token-cascade.md. */ .research-block { padding: 5rem 0 4rem; background: var(--block-bg-color, #ffffff); color: var(--block-body-color, #0f172a); --block-heading-color: var(--page-fg, #0f172a); --block-body-color: var(--page-fg, #1f2a3b); --research-methodology-bg: var(--block-surface-color, #ffffff); --research-methodology-border: var(--block-stroke-color, #d1dae8); --research-methodology-label: var(--block-heading-color, #0f1d36); --research-methodology-value: var(--block-heading-color, #111827); --research-methodology-text: var(--block-muted-color, #475569); } .research-block--light { background: var(--block-bg-color, #ffffff); color: var(--block-body-color, var(--generic-text-body)); --block-heading-color: var(--page-fg, var(--generic-text-strong)); --block-body-color: var(--page-fg, var(--generic-text-body)); } .research-block--primary { background: linear-gradient(140deg, #1f3f6b 0%, #2f5faa 100%); color: var(--block-body-color, #f4f7ff); --block-heading-color: var(--page-fg, #f5f8ff); --block-body-color: var(--page-fg, rgba(239, 246, 255, 0.92)); --research-methodology-bg: rgba(255, 255, 255, 0.12); --research-methodology-border: rgba(166, 190, 255, 0.32); --research-methodology-label: var(--block-heading-color, rgba(255, 255, 255, 0.9)); --research-methodology-value: var(--block-heading-color, #ffffff); --research-methodology-text: var(--block-muted-color, rgba(233, 240, 255, 0.85)); } .research-block__title { font-size: clamp(2.1rem, 4.5vw, 3rem); font-weight: 700; margin-bottom: 2rem; } .research-block__body { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr) auto; align-items: flex-start; } .research-block__abstract { font-size: 1.05rem; line-height: 1.8; color: var(--block-body-color, #1f2a3b); } .research-block__badge { display: flex; justify-content: flex-end; } .research-block__badge--left { justify-content: flex-start; } .research-block__badge--center { justify-content: center; } .research-block__badge img { max-width: 190px; } .research-block__methodology { margin-top: 3rem; background: linear-gradient(135deg, rgba(241, 244, 249, 0.92), rgba(248, 250, 255, 0.92)); border-radius: var(--generic-radius-xl); padding: clamp(2rem, 4vw, 3rem); border: 1px solid rgba(17, 31, 53, 0.08); position: relative; overflow: hidden; } .research-block__methodology::before { content: ""; position: absolute; inset: 0; background: radial-gradient(520px circle at 12% 30%, rgba(43, 86, 160, 0.12), transparent 62%), radial-gradient(480px circle at 88% 70%, rgba(255, 198, 109, 0.14), transparent 65%); opacity: 0.8; pointer-events: none; z-index: 0; } .research-block__methodology > * { position: relative; z-index: 1; } .research-block--primary .research-block__methodology { background: linear-gradient(155deg, rgba(10, 22, 46, 0.88), rgba(27, 55, 102, 0.95)); } .research-block__methodology-grid { display: grid; gap: clamp(1.25rem, 3vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .research-block__methodology-item { background: var(--research-methodology-bg); border-radius: var(--generic-radius-lg); border: 1px solid var(--research-methodology-border); padding: clamp(1.1rem, 2.2vw, 1.6rem); box-shadow: 0 24px 45px rgba(19, 41, 75, 0.08); display: grid; gap: 0.45rem; position: relative; } .research-block__methodology-item::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(255, 255, 255, 0.0), rgba(242, 246, 255, 0.35)); opacity: 0; transition: opacity 160ms ease; pointer-events: none; } .research-block__methodology-item:hover::before, .research-block__methodology-item:focus-within::before { opacity: 1; } .research-block__methodology-label { font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; color: var(--research-methodology-label, #0f1d36); } .research-block__methodology-value { display: block; font-size: 1.35rem; font-weight: 600; color: var(--research-methodology-value, #111827); margin-top: 0.2rem; } .research-block__methodology-description { font-size: 0.98rem; color: var(--research-methodology-text, #475569); margin: 0.5rem 0 0; } .research-block__actions { margin: 2.5rem 0 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } .research-block__primary, .research-block__secondary { display: inline-flex; align-items: center; justify-content: center; padding: 0.9rem 2.2rem; border-radius: var(--generic-radius-sm); font-weight: 600; text-decoration: none; min-height: 48px; transition: var(--generic-transition); } .research-block__primary { background: var(--generic-accent); color: var(--generic-on-dark); box-shadow: var(--generic-shadow-xs); } .research-block__primary:hover, .research-block__primary:focus { background: #275d92; } .research-block__primary-icon { width: 1.25rem; height: 1.25rem; margin-right: 0.5rem; display: inline-block; background: url('data:image/svg+xml,') center/contain no-repeat; } .research-block__secondary { border: 2px solid var(--generic-primary); color: var(--generic-primary); background: transparent; } .research-block--primary .research-block__secondary { border-color: rgba(255, 255, 255, 0.7); color: #ffffff; } .research-block__secondary:hover, .research-block__secondary:focus { background: rgba(31, 63, 107, 0.08); } .research-block--primary .research-block__secondary:hover, .research-block--primary .research-block__secondary:focus { background: rgba(255, 255, 255, 0.15); } .research-block__disclaimer { margin-top: 2rem; color: var(--generic-text-subtle); font-size: 0.95rem; } .research-block--primary .research-block__disclaimer { color: var(--generic-on-dark-muted); } /* Video Hero */ .video-hero-block { position: relative; min-height: auto; display: flex; align-items: center; justify-content: center; overflow: hidden; } .video-hero-block__media { position: absolute; inset: 0; } .video-hero-block__video, .video-hero-block__media img { width: 100%; height: 100%; object-fit: cover; } .video-hero-block__overlay { position: absolute; inset: 0; } .video-hero-block__overlay--light { background: rgba(15, 23, 42, 0.35); } .video-hero-block__overlay--medium { background: rgba(15, 23, 42, 0.55); } .video-hero-block__overlay--dark { background: rgba(15, 23, 42, 0.72); } .video-hero-block__container { position: relative; z-index: 1; width: 100%; } .video-hero-block__content { max-width: 760px; margin: 0 auto; text-align: center; padding: 2rem 1.5rem; } .video-hero-block--left .video-hero-block__content { text-align: left; margin-left: 0; } .video-hero-block--right .video-hero-block__content { text-align: right; margin-right: 0; } .video-hero-block__title { font-size: clamp(2.5rem, 6vw, 3.8rem); font-weight: 700; margin-bottom: 1.1rem; color: var(--generic-on-dark); } .video-hero-block--text-dark .video-hero-block__title { color: var(--block-heading-color, var(--generic-text-strong)); } .video-hero-block__subtitle { font-size: 1.2rem; color: var(--generic-on-dark-muted); margin-bottom: 1rem; } .video-hero-block--text-dark .video-hero-block__subtitle { color: var(--block-muted-color, var(--generic-text-muted)); } .video-hero-block__description { font-size: 1.05rem; color: var(--generic-on-dark-muted); margin-bottom: 1.75rem; } .video-hero-block--text-dark .video-hero-block__description { color: var(--block-muted-color, var(--generic-text-muted)); } .video-hero-block__actions { display: inline-flex; gap: 1rem; flex-wrap: wrap; justify-content: center; } .video-hero-block__btn { min-width: 170px; min-height: 48px; border-radius: var(--generic-radius-sm); } .video-hero-block--text-dark .video-hero-block__btn.btn-outline-light { border-color: var(--generic-primary); color: var(--generic-primary); } .video-hero-block--text-dark .video-hero-block__btn.btn-outline-light:hover, .video-hero-block--text-dark .video-hero-block__btn.btn-outline-light:focus { background: rgba(31, 63, 107, 0.08); } /* Category Block (category_list partial) */ .category-block { padding: 4.5rem 0; background: var(--generic-surface); } .category-block h2 { font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 700; margin-bottom: 1.5rem; } .category-entry-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--generic-border-soft); } .category-entry-list li { border-bottom: 1px solid var(--generic-border-soft); padding: 1rem 0; display: flex; flex-direction: column; gap: 0.35rem; } .category-entry-list a { color: var(--generic-primary); font-weight: 600; text-decoration: none; } .category-entry-list a:hover, .category-entry-list a:focus { text-decoration: underline; } .category-entry-list .excerpt { color: var(--block-muted-color, var(--generic-text-muted)); font-size: 0.95rem; line-height: 1.6; } .category-entry-date { font-size: 0.9rem; color: var(--generic-text-subtle); margin-top: 0.15rem; } /* Table Block */ .table-block { padding: 5rem 0; background: var(--generic-surface-alt); } .table-block--striped { background: var(--generic-surface-muted); } .table-block--bordered { background: var(--generic-surface-alt); } .table-block--compact { background: var(--generic-surface-alt); } .table-block__title { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; margin-bottom: 1.25rem; color: var(--block-heading-color, var(--generic-text-strong)); } .table-block__intro { margin-bottom: 2rem; color: var(--block-muted-color, var(--generic-text-muted)); } .table-block__table-wrapper { position: relative; border-radius: var(--generic-radius-md); box-shadow: var(--generic-shadow-xs); background: var(--generic-surface); padding: 1rem; border: 1px solid var(--generic-border-soft); } .table-block__table { margin-bottom: 0; color: var(--block-body-color, var(--generic-text-body)); } .table-block__head th { font-size: 0.95rem; letter-spacing: 0.03em; text-transform: uppercase; background: rgba(47, 111, 177, 0.12); color: var(--block-heading-color, var(--generic-text-strong)); } .table-block__row--body:hover { background: rgba(47, 111, 177, 0.08); } .table-block__row--highlight { background: rgba(31, 122, 85, 0.12); } .table-block__cell { vertical-align: middle; font-size: 1rem; } .table-block__cell--center { text-align: center; } .table-block__cell--start { text-align: left; } .table-block__cell--end { text-align: right; } .table-block__cell--highlight { font-weight: 600; color: var(--generic-primary); } .table-block__caption { margin-top: 1rem; font-size: 0.95rem; color: var(--block-muted-color, var(--generic-text-muted)); } .table-block__footnote { margin-top: 0.75rem; font-size: 0.9rem; color: var(--block-muted-color, var(--generic-text-muted)); } .table-block--bordered .table-block__table { border: 1px solid rgba(21, 32, 51, 0.12); } .table-block--compact .table-block__table td, .table-block--compact .table-block__table th { padding-top: 0.5rem; padding-bottom: 0.5rem; } .table-block__table-wrapper::-webkit-scrollbar { height: 8px; } .table-block__table-wrapper::-webkit-scrollbar-thumb { background: rgba(21, 32, 51, 0.35); border-radius: 999px; } /* Responsive adjustments */ @media (max-width: 992px) { .detailed-block__media, .paragraph-block__media { margin-top: 2rem; } .research-block__body { grid-template-columns: 1fr; } .research-block__badge { justify-content: center; } .content-image-block__image::after { inset: -24px; } } @media (max-width: 768px) { .builder-blocks { gap: 3rem; } .hero-block { min-height: 60vh; padding: 3rem 0; } .hero-block__actions, .cta-block__actions { flex-direction: column; align-items: stretch; } .hero-block__btn-primary, .hero-block__btn-secondary, .cta-block__btn-primary, .cta-block__btn-secondary, .video-hero-block__btn { width: 100%; max-width: 320px; margin: 0 auto; } .features-grid-block__item, .testimonials-block__item { margin-bottom: 1.5rem; } .research-block__methodology { padding: 1.5rem; } } @media (max-width: 576px) { .hero-block__content, .content-image-block__content, .stats-block__content, .testimonials-block__content, .cta-block__content, .video-hero-block__content { padding: 0 1rem; } .features-grid-block__title, .testimonials-block__title, .cta-block__title, .case-studies-block__title { font-size: 2rem; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .features-grid-block__item, .testimonials-block__item, .hero-block__actions a, .cta-block__actions a, .research-block__primary, .research-block__secondary, .table-block__row { transition: none; } .features-grid-block__item:hover, .testimonials-block__item:hover, .scoreboard-card:hover { transform: none; } } /* High contrast preferences */ @media (prefers-contrast: more) { .hero-block__overlay, .video-hero-block__overlay { background: rgba(0, 0, 0, 0.72) !important; } .cta-block__btn-secondary, .research-block__secondary { border-width: 3px; } .table-block__table-wrapper { border-color: var(--generic-border-strong); } } /* Hero Block Styles */ .hero-block { position: relative; min-height: 60vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(135deg, var(--generic-brand-700) 0%, var(--generic-brand-500) 100%); } .hero-block--type-image.hero-block--has-image { background-size: cover; background-position: center; background-repeat: no-repeat; } .hero-block--type-gradient { background-image: linear-gradient(135deg, var(--generic-brand-700) 0%, var(--generic-brand-500) 100%); } .hero-block--type-solid { background-color: #0f172a; } .hero-block__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .hero-block__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--hero-overlay-color, rgba(0, 0, 0, 0.4)); z-index: 2; } .hero-block__inner { position: relative; z-index: 3; width: 100%; max-width: 1200px; margin: 0 auto; padding: 2rem; } .hero-block__content { text-align: center; color: white; } .hero-block--left .hero-block__content { text-align: left; } .hero-block--right .hero-block__content { text-align: right; } .hero-block__title { font-size: 3rem; font-weight: bold; margin-bottom: 1rem; line-height: 1.2; } .hero-block__subtitle { font-size: 1.25rem; margin-bottom: 2rem; opacity: 0.9; } .hero-block__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .hero-block--left .hero-block__actions { justify-content: flex-start; } .hero-block--right .hero-block__actions { justify-content: flex-end; } .hero-block__btn-primary, .hero-block__btn-secondary { padding: 0.75rem 2rem; font-size: 1.1rem; text-decoration: none; border-radius: 0.5rem; transition: all 0.3s ease; } .hero-block__btn-primary { background: var(--generic-brand-600); color: white; border: 2px solid var(--generic-brand-600); } .hero-block__btn-primary:hover { background: var(--generic-brand-800); border-color: var(--generic-brand-800); } .hero-block__btn-secondary { background: transparent; color: white; border: 2px solid white; } .hero-block__btn-secondary:hover { background: white; color: var(--block-heading-color, var(--generic-text-strong)); } @media (max-width: 768px) { .hero-block__title { font-size: 2rem; } .hero-block__subtitle { font-size: 1rem; } .hero-block__actions { flex-direction: column; align-items: center; } .hero-block--left .hero-block__actions, .hero-block--right .hero-block__actions { align-items: center; } } /* Project Gallery Block */ .project-gallery-block { padding: var(--luxury-gap) 0; } .project-gallery-block__grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr)); } .project-gallery-block__grid--2 { grid-template-columns: repeat(2, 1fr); } .project-gallery-block__grid--3 { grid-template-columns: repeat(3, 1fr); } .project-gallery-block__grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 991px) { .project-gallery-block__grid--3, .project-gallery-block__grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .project-gallery-block__grid--2, .project-gallery-block__grid--3, .project-gallery-block__grid--4 { grid-template-columns: 1fr; } } .project-gallery-item { overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .project-gallery-item:hover { transform: translateY(-8px); } .project-gallery-item__media { position: relative; margin: 0; width: 100%; aspect-ratio: var(--gallery-aspect-ratio, 4/3); overflow: hidden; } .project-gallery-item__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .project-gallery-item:hover .project-gallery-item__media img { transform: scale(1.1); } .project-gallery-item__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 5%, rgba(0, 0, 0, 0.65) 13%, rgba(0, 0, 0, 0.2) 26%, transparent 83% ); display: flex; align-items: flex-end; padding: 1.5rem; transition: background 0.4s ease; } .project-gallery-item:hover .project-gallery-item__overlay { background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.85) 25%, rgba(0, 0, 0, 0.72) 45%, rgba(0, 0, 0, 0.25) 68%, transparent 82% ); } .project-gallery-item__content { color: #fff; } .project-gallery-item__category { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 0.4rem; } .project-gallery-item__title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.4rem; } .project-gallery-item__description { font-size: 0.875rem; line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Enhanced Case Studies Card */ .case-studies-card { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease !important; } .case-studies-card:hover { transform: translateY(-8px); box-shadow: var(--generic-shadow-card) !important; } .case-studies-card__content { display: flex; flex-direction: column; gap: 1rem; height: 100%; } .case-studies-card__cta { margin-top: auto; padding-top: 1rem; } /* Category List Block */ .category-block { padding: var(--luxury-gap) 0; } .category-block__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); } .category-card { /* Chain through --surface-color so dark-mode flip works. Previously hardcoded #fff which stayed white in dark mode while text colors flipped light — making titles invisible white-on-white on listing pages. */ background: var(--surface-color, #fff); border-radius: 16px; padding: 2rem; height: 100%; display: flex; flex-direction: column; border: 1px solid var(--generic-border-soft); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .category-card:hover { transform: translateY(-8px); box-shadow: var(--generic-shadow-card) !important; border-color: var(--primary-color); background-image: linear-gradient( 135deg, transparent 0%, color-mix(in srgb, var(--primary-color, #0077be) 7%, transparent) 18%, color-mix(in srgb, var(--primary-color, #0077be) 5%, transparent) 82%, transparent 100% ); } .category-card__date { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--secondary-color); font-weight: 700; margin-bottom: 1rem; display: block; } .category-card__title { font-size: 1.4rem; font-weight: 700; margin-bottom: 1rem; line-height: 1.3; } .category-card__title a { color: var(--heading-color); text-decoration: none; transition: color 0.3s ease; } .category-card__title a:hover { color: var(--block-accent-color, var(--primary-color)); } .category-card__excerpt { font-size: 0.95rem; color: var(--text-color); line-height: 1.6; margin-bottom: 1.5rem; } .category-card__footer { margin-top: auto; } .category-card__link { font-weight: 700; font-size: 0.9rem; color: var(--block-accent-color, var(--primary-color)); text-decoration: none; display: inline-flex; align-items: center; transition: transform 0.3s ease; } .category-card__link:hover { transform: translateX(5px); } /* Dark-mode override: brand-cyan-deep (#0077be / rgb(0,119,190)) has contrast 3.86 on the dark-mode card bg rgb(15,20,25) — fails AA. Use the lighter brand-cyan (rgb(140,220,255)) which gives 8+ ratio. */ :root[data-theme="dark"] .category-card__link { color: var(--brand-cyan, rgb(140, 220, 255)); } /* Light-mode override: same #0077be has contrast 3.95 on the light-mode card bg rgb(244,247,252) — fails AA (4.5 needed). Use deep navy #1a4575 to push the ratio to ~7.9:1. */ :root[data-theme="light"] .category-card__link { color: #1a4575; } :root[data-theme="light"] .category-card__link:hover { color: #0d1a2e; } /* Service Showcase (Features Grid) */ .features-grid-block__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } .features-grid-block__grid--2 { grid-template-columns: repeat(2, 1fr); } .features-grid-block__grid--3 { grid-template-columns: repeat(3, 1fr); } .features-grid-block__grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 991px) { .features-grid-block__grid--3, .features-grid-block__grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .features-grid-block__grid--2, .features-grid-block__grid--3, .features-grid-block__grid--4 { grid-template-columns: 1fr; } } .service-card { background: #fff; border-radius: 20px; padding: 2.5rem; text-align: center; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid var(--generic-border-soft); } .service-card:hover { transform: translateY(-10px); box-shadow: var(--generic-shadow-card) !important; } .service-card__icon-wrapper { width: 80px; height: 80px; background: var(--surface-alt); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; color: var(--block-accent-color, var(--primary-color)); font-size: 2rem; transition: all 0.4s ease; } .service-card:hover .service-card__icon-wrapper { background: var(--primary-color); color: #fff; transform: rotateY(180deg); } .service-card__title { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; } .service-card__description { font-size: 1rem; line-height: 1.6; color: var(--text-color); margin: 0; } /* Luxury Testimonials */ .testimonials-block { padding: var(--luxury-gap) 0; } .testimonials-block__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr)); } .testimonial-card { background: var(--block-surface-color, #fff); border-radius: 24px; padding: 2.5rem; display: flex; flex-direction: column; border: 1px solid var(--block-stroke-color, var(--generic-border-soft)); position: relative; transition: all 0.4s ease; } .testimonial-card:hover { box-shadow: var(--generic-shadow-card) !important; } .testimonial-card__rating { margin-bottom: 1.5rem; color: var(--generic-warning); font-size: 0.9rem; } .testimonial-card__quote { font-size: 1.1rem; line-height: 1.7; font-style: italic; color: var(--block-body-color, var(--text-color)); margin-bottom: 2rem; position: relative; } .testimonial-card__footer { margin-top: auto; display: flex; align-items: center; gap: 1rem; } .testimonial-card__photo { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; border: 3px solid var(--surface-alt); } .testimonial-card__photo img { width: 100%; height: 100%; object-fit: cover; } .testimonial-card__name { display: block; font-weight: 700; font-size: 1.1rem; color: var(--block-heading-color, var(--heading-color)); font-style: normal; } .testimonial-card__meta { font-size: 0.85rem; color: var(--block-muted-color, #4b5563); opacity: 1; } /* -------------------------------------------------- 2026-05-13 Block Rendering Harmonization Snapshot-driven frontend polish + WCAG-focused fixes. --------------------------------------------------- */ .builder-blocks > .block-wrapper > section.builder-block:not(.parallax-hero):not(.hero-block):not(.video-hero-block) { padding-left: clamp(1rem, 2.8vw, 2.5rem) !important; padding-right: clamp(1rem, 2.8vw, 2.5rem) !important; } .builder-blocks > .block-wrapper > section.builder-block:not(.hero-block):not(.video-hero-block) { overflow: visible; } .builder-blocks .hero-block__content { max-width: min(70rem, 100%); margin-inline: auto; display: grid; gap: 1rem; } .builder-blocks .hero-block { background-color: #0f172a; } .builder-blocks .hero-block__title.luxury-text-hero { font-size: clamp(2rem, 4.7vw, 3.6rem) !important; line-height: 1.08 !important; max-width: 18ch; margin-inline: auto; margin-bottom: 0 !important; } .builder-blocks .hero-block--left .hero-block__title.luxury-text-hero { margin-inline: 0 auto; } .builder-blocks .hero-block--right .hero-block__title.luxury-text-hero { margin-inline: auto 0; } .builder-blocks .hero-block__subtitle.luxury-text-focal { font-size: clamp(1.05rem, 2vw, 1.4rem) !important; line-height: 1.5 !important; max-width: 48ch; margin-inline: auto; margin-top: 0.9rem; margin-bottom: 0 !important; } .builder-blocks .hero-block--left .hero-block__subtitle.luxury-text-focal { margin-inline: 0 auto; } .builder-blocks .hero-block--right .hero-block__subtitle.luxury-text-focal { margin-inline: auto 0; } .builder-blocks .hero-block__actions { margin-top: 0.35rem; row-gap: 0.75rem; } .builder-blocks .luxury-text-hero.reveal-init.is-revealed, .builder-blocks .is-revealed .luxury-text-hero.reveal-init { transform: translateY(0) !important; } /* Headline list width variants */ .headline-block__list--narrow { max-width: 680px; margin-left: auto; margin-right: auto; } .builder-blocks :is( .call-to-action-block__title, .paragraph-block__title, .content-image-block__title, .detailed-block__title, .headline-block__title, .headline-block__main-title, .features-grid-block__title, .featurette-block__title, .stats-block__title, .scoreboard-block__title, .chart-block__title, .comparison-table-block__title, .testimonials-block__title, .team-leaders-block__title, .case-studies-block__title, .carousel-block__title, .pricing-table-block__title, .research-block__title, .project-gallery-block .luxury-text-hero, .category-block .luxury-text-hero ) { font-size: clamp(1.75rem, 3.4vw, 3.1rem) !important; line-height: 1.18 !important; max-width: 24ch; margin-left: auto; margin-right: auto; text-wrap: balance; } .builder-blocks :is( .features-grid-block__subtitle, .call-to-action-block__description, .cta-block__subtitle, .content-image-block__text, .featurette-block__description, .team-leaders-block__intro, .case-studies-block__subtitle, .pricing-table-block__subtitle, .research-block__abstract, .headline-block__subtitle, .headline-block__main-subtitle ) { font-size: clamp(1rem, 1.2vw, 1.15rem) !important; line-height: 1.65 !important; max-width: 68ch; margin-inline: auto; } .builder-blocks :is( .luxury-btn-striking, .featurette-block__button, .case-studies-card__link, .pricing-table-block__action .btn, .research-block__primary, .research-block__secondary, .cta-block__btn-primary, .cta-block__btn-secondary, .hero-block__btn-primary, .hero-block__btn-secondary, .content-image-block__action .btn ) { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; max-width: 100%; white-space: normal; overflow-wrap: anywhere; word-break: normal; text-align: center; line-height: 1.3; min-height: 48px; } .builder-blocks .case-studies-card__link.luxury-btn-striking, .builder-blocks .pricing-table-block__action .btn { width: 100%; } .builder-blocks .featurette-block__button { width: fit-content; max-width: min(100%, 38ch); } .builder-blocks .case-studies-card__link.luxury-btn-striking { border-radius: 12px !important; padding: 0.75rem 1rem !important; text-transform: none !important; letter-spacing: 0.01em !important; } .builder-blocks :is( .featurette-block__button, .pricing-table-block__action .btn, .research-block__primary, .research-block__secondary, .cta-block__btn-primary, .cta-block__btn-secondary, .hero-block__btn-primary, .hero-block__btn-secondary, .case-studies-card__link, .team-card__link, .category-card__link )::after { content: "\2192"; font-size: 0.95em; line-height: 1; margin-left: 0.35rem; flex: none; } .builder-blocks .research-block__primary { background: #1f3f6b; background-color: #1f3f6b; color: #ffffff; border: 1px solid #17314f; box-shadow: 0 10px 20px rgba(19, 45, 78, 0.22); width: min(100%, 48ch); } .builder-blocks .research-block__primary-icon { color: #ffffff !important; } .builder-blocks .research-block__primary .research-block__primary-icon { color: #ffffff !important; } .builder-blocks .research-block__secondary { width: min(100%, 48ch); } .builder-blocks .research-block__primary:hover, .builder-blocks .research-block__primary:focus { background: #15314f; color: #ffffff; } .builder-blocks .carousel-block .carousel-caption { background-color: rgba(15, 23, 42, 0.78); left: 50%; right: auto; transform: translateX(-50%); width: min(92%, 44rem); margin: 0; bottom: clamp(0.75rem, 2vw, 1.5rem); padding: clamp(0.9rem, 2vw, 1.35rem); } .builder-blocks .carousel-block .carousel-caption h3 { font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.2; margin-bottom: 0.45rem; } .builder-blocks .carousel-block .carousel-caption p { margin: 0; font-size: clamp(0.95rem, 1.35vw, 1.05rem); line-height: 1.5; max-height: 7.5em; overflow: auto; overflow-wrap: anywhere; } .builder-blocks .carousel-block .carousel-caption .btn { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; white-space: normal; line-height: 1.3; overflow-wrap: anywhere; text-align: center; margin-top: 0.65rem; padding: 0.5rem 0.85rem; border-radius: 0.5rem; border: 1px solid rgba(15, 23, 42, 0.22); color: #0f172a; background: rgba(248, 250, 252, 0.96); min-height: 44px; } .builder-blocks .carousel-block .carousel-caption .btn::after { content: "\2192"; font-size: 0.95em; line-height: 1; margin-left: 0.35rem; } /* Keep button-like links visually button-like even when global link underlines are enabled. */ .builder-blocks :is( .hero-block__btn-primary, .hero-block__btn-secondary, .cta-block__btn-primary, .cta-block__btn-secondary, .featurette-block__button, .case-studies-card__link, .pricing-table-block__action .btn, .research-block__primary, .research-block__secondary, .call-to-action-block__primary, .content-image-block__action .btn, .carousel-block .carousel-caption .btn ) { text-decoration: none !important; } .builder-blocks .case-studies-card__description, .builder-blocks .case-studies-card__results, .builder-blocks .team-card__bio, .builder-blocks .pricing-table-block__description, .builder-blocks .pricing-table-block__features li { overflow-wrap: anywhere; } .builder-blocks .pricing-table-block__action { margin-top: auto; } @media (max-width: 768px) { .builder-blocks .hero-block__title.luxury-text-hero { max-width: 16ch; } .builder-blocks .hero-block__subtitle.luxury-text-focal { max-width: 32ch; } .builder-blocks .featurette-block__button, .builder-blocks .case-studies-card__link.luxury-btn-striking, .builder-blocks .research-block__primary, .builder-blocks .research-block__secondary { width: 100%; } } /* -------------------------------------------------- 2026-05-13 WCAG + Aesthetic Pass (Playwright/Axe) --------------------------------------------------- */ /* Remove decorative heading shadows inside rendered builder blocks. These shadows were being interpreted as low-contrast text-shadow pairs by axe. Parallax-hero title is excluded — it intentionally uses a deep-night drop-shadow so the headline reads against the layered SVG background. That shadow is a high-contrast dark-over-light pairing (not the low- contrast pair axe flags). */ .builder-blocks :is( h1, h2, h3, h4, h5, h6, .luxury-text-hero, .luxury-text-focal, .service-card__title, .team-card__name, .case-studies-card__title, .testimonial-card__name ):not(.parallax-hero__title) { text-shadow: none !important; } /* Project gallery overlay text — (0,3,0) specificity to beat: - body color rule at (0,2,2) via :not() clause - WCAG heading text-shadow reset at (0,2,0) above Both rules also have !important, so specificity decides the winner. */ .project-gallery-item__overlay .project-gallery-item__content .project-gallery-item__category { color: rgba(255, 255, 255, 0.9) !important; text-shadow: 0 1px 2px rgba(0,0,0,1), 0 2px 8px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.8) !important; } .project-gallery-item__overlay .project-gallery-item__content .project-gallery-item__title { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,1), 0 2px 10px rgba(0,0,0,0.95), 0 4px 24px rgba(0,0,0,0.85), 0 0 40px rgba(0,0,0,0.7) !important; } .project-gallery-item__overlay .project-gallery-item__content .project-gallery-item__description { color: rgba(255, 255, 255, 0.92) !important; text-shadow: 0 1px 2px rgba(0,0,0,1), 0 2px 8px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.8) !important; } /* Re-enable text-shadow on hero headings over imagery/video — the blanket reset above is correct for white-background blocks but kills legibility over photo/video backgrounds. Covers both --has-image (background photo) and --type-video (gradient/video) variants. */ .builder-blocks .hero-block--has-image .hero-block__title, .builder-blocks .hero-block--type-video .hero-block__title { text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55), 0 1px 6px rgba(0, 0, 0, 0.35) !important; } .builder-blocks .hero-block--has-image .hero-block__subtitle, .builder-blocks .hero-block--type-video .hero-block__subtitle { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.25) !important; } /* Two-column context: cap display-font heading size so it doesn't overwhelm a 50% column */ .builder-blocks .detailed-block__title.luxury-text-hero, .builder-blocks .content-image-block__title.luxury-text-hero, .builder-blocks .featurette-block__title.luxury-text-hero { font-size: clamp(1.8rem, 3.8vw, 2.6rem) !important; line-height: 1.2 !important; } /* Ensure all CTA surfaces in block output can wrap and remain legible on narrow widths. */ .builder-blocks .call-to-action-block__action .btn, .builder-blocks .call-to-action-block__secondary-link { white-space: normal !important; overflow-wrap: anywhere; word-break: normal; } .builder-blocks .call-to-action-block__primary, .builder-blocks .call-to-action-block__secondary-link { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; } .builder-blocks .call-to-action-block__primary { background-color: #1a3559 !important; } .builder-blocks .call-to-action-block__primary::before, .builder-blocks .call-to-action-block__secondary-link::before { content: "\2192"; line-height: 1; font-size: 0.95em; margin-left: 0.15rem; order: 2; } /* Fix highlighted comparison table cells to AA contrast. */ .table-block__cell--highlight { color: #005680; } /* Global button override in theme.css forces a low-contrast blue on this control. Reassert an AA-compliant dark button in the block namespace. */ .carousel-block__toggle { background: #0f4c81 !important; border-color: #0f4c81 !important; color: #ffffff !important; } .carousel-block__toggle:hover, .carousel-block__toggle:focus-visible { background: #0b3a63 !important; border-color: #0b3a63 !important; color: #ffffff !important; } .carousel-block__toggle[aria-pressed="true"] { background: #082b49 !important; border-color: #082b49 !important; color: #ffffff !important; } /* -------------------------------------------------- 2026-05-13 Positioning Micro-Pass (Non-Destructive) --------------------------------------------------- */ /* Center incomplete final rows without changing card content, color, or typography systems. */ .builder-blocks .team-leaders-block__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 18rem)); justify-content: center; } .builder-blocks .case-studies-block__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 20rem)); justify-content: center; } /* Center card-style repeater grids (features + testimonial cards). */ .builder-blocks .features-grid-block__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 19rem)); justify-content: center; } .builder-blocks .testimonials-block--cards .testimonials-block__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 22rem)); justify-content: center; } /* Keep empty category states visually anchored under headings. */ .builder-blocks .category-block__empty { margin: clamp(2rem, 4vw, 3rem) auto; max-width: 44ch; text-wrap: balance; color: var(--generic-text-subtle); font-size: 1rem; padding: 2rem; border: 1px dashed var(--generic-border-soft); border-radius: var(--generic-radius-md); } /* ============================================================ Testimonials — Carousel display mode ============================================================ */ .testimonials-block--carousel .testimonials-block__grid { display: block; } .testimonials-block--carousel .testimonials-block__grid-item { display: none; justify-content: center; } .testimonials-block--carousel .testimonials-block__grid-item.is-active { display: flex; } .testimonials-block--carousel .testimonial-card { max-width: 44rem; width: 100%; text-align: center; } .testimonials-block--carousel .testimonial-card__footer { justify-content: center; } .testimonials-block--carousel .testimonial-card__quote::before { content: '\201C'; font-size: 5rem; line-height: 0; position: absolute; top: 0.6rem; left: -0.25rem; color: var(--block-accent-color, var(--primary-color)); opacity: 0.18; font-family: Georgia, serif; } .testimonials-carousel__nav { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 2rem; } .testimonials-carousel__btn { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 2px solid var(--primary-color, #0077be); background: var(--primary-color, #0077be); color: #ffffff; font-size: 1.5rem; line-height: 1; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; display: flex; align-items: center; justify-content: center; padding: 0; } .testimonials-carousel__btn:hover, .testimonials-carousel__btn:focus-visible { background: var(--primary-hover, #1a75bc); border-color: var(--primary-hover, #1a75bc); color: #ffffff; outline: none; } .testimonials-carousel__dots { display: flex; gap: 0.5rem; align-items: center; } .testimonials-carousel__dot { width: 8px; height: 8px; border-radius: 50%; background: #c8d9e8; border: none; padding: 0; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .testimonials-carousel__dot.is-active { background: var(--primary-color, #0077be); transform: scale(1.4); } /* -------------------------------------------------- 2026-05-14 Adversarial Layout Fixes Root cause: the global `section` rule in theme.css adds 80px gutters to block wrappers, which are section elements. --------------------------------------------------- */ .builder-blocks > .block-wrapper { padding-left: clamp(1rem, 5vw, 5rem) !important; padding-right: clamp(1rem, 5vw, 5rem) !important; } .builder-blocks > .block-wrapper--width-full, .builder-blocks > .block-wrapper--parallax-hero-block { padding-left: 0 !important; padding-right: 0 !important; } /* Site footer on pages with the coastal page-bg — design's .site-footer is transparent over the atmospheric wave field with a cyan-tinted border-top (Banner.html:915). The default Bootstrap `bg-dark` would cover the wave field with solid #343a40 gray. */ body:has(.has-coastal-page-bg) > footer.bg-dark, body:has(.builder-page.home-page) > footer.bg-dark { background: transparent !important; border-top: 1px solid rgba(190, 220, 250, 0.16); padding: 60px 0 36px !important; /* Match the design's footer text color tint — cool light against the deep-night bg. */ color: rgb(216, 230, 246) !important; } body:has(.has-coastal-page-bg) > footer.bg-dark a, body:has(.builder-page.home-page) > footer.bg-dark a { color: rgb(216, 230, 246); } body:has(.has-coastal-page-bg) > footer.bg-dark a:hover, body:has(.builder-page.home-page) > footer.bg-dark a:hover { color: var(--brand-cyan, rgb(140, 220, 255)); } /* The parallax-hero is always full-bleed (the blueprint description at builder-page.yaml promises "Full-bleed hero", but the entry's layout_width field isn't enforced — make it permanent here). */ .builder-blocks > .block-wrapper--parallax-hero-block { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .builder-blocks > .block-wrapper--hero-block { padding-left: 0 !important; padding-right: 0 !important; } .builder-blocks > .block-wrapper > section.builder-block { box-sizing: border-box; width: 100%; } .builder-blocks > .block-wrapper:not(.block-wrapper--width-full) > section.builder-block:not(.hero-block):not(.video-hero-block) { max-width: 1440px; margin-left: auto; margin-right: auto; } .builder-blocks > .block-wrapper--hero-block > section.hero-block { width: 100vw; margin-left: calc(50% - 50vw); padding-left: 0 !important; padding-right: 0 !important; } .builder-blocks .hero-block__content { text-align: center !important; margin-inline: auto !important; } .builder-blocks .hero-block__title.luxury-text-hero, .builder-blocks .hero-block__subtitle.luxury-text-focal { margin-inline: auto !important; text-align: center !important; } .builder-blocks .hero-block__actions, .builder-blocks .hero-block--left .hero-block__actions, .builder-blocks .hero-block--right .hero-block__actions { justify-content: center !important; } .builder-blocks > .block-wrapper > section.builder-block > :is(.container, .container-fluid) { max-width: 100%; } .builder-blocks :is( .luxury-btn-striking, .featurette-block__button, .case-studies-card__link, .pricing-table-block__action .btn, .research-block__primary, .research-block__secondary, .cta-block__btn-primary, .cta-block__btn-secondary, .hero-block__btn-primary, .hero-block__btn-secondary, .content-image-block__action .btn, .call-to-action-block__action .btn, .call-to-action-block__secondary-link, .detailed-block__button, .team-card__link ) { min-width: 0; min-height: 44px !important; overflow-wrap: break-word; word-break: normal; hyphens: auto; } .builder-blocks .team-card__link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.55rem 0.75rem; text-align: center; } .builder-blocks .pricing-table-block__badge { background: var(--pricing-badge-bg, #dbe7f8); color: var(--pricing-badge-text, var(--block-accent-color, #1f3f6b)); } .builder-blocks .pricing-table-block__plan-price { flex-wrap: wrap; min-width: 0; } .builder-blocks .pricing-table-block__period { overflow-wrap: break-word; min-width: 0; } .builder-blocks .table-block__table-wrapper, .builder-blocks .comparison-table-block__table-wrapper { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .builder-blocks .table-block__table { width: 100%; } .builder-blocks .table-block__cell, .builder-blocks .table-block__head th { overflow-wrap: break-word; word-break: normal; hyphens: auto; } .builder-blocks .table-block__head th, .builder-blocks .table-block__cell--highlight { color: #0f172a; } .builder-blocks .table-block__head th { background: #eaf2fb; } .builder-blocks .table-block__row--highlight, .builder-blocks .table-block__cell--highlight, .builder-blocks .comparison-table-block__cell--highlight, .builder-blocks .comparison-table-block__header--highlight { background: #edf7f3; } .builder-blocks .research-block__methodology-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .builder-blocks .research-block__methodology-item { min-width: 0; } .builder-blocks .research-block__methodology-label, .builder-blocks .research-block__methodology-value, .builder-blocks .research-block__methodology-description { overflow-wrap: break-word; word-break: normal; } .builder-blocks .testimonial-card__meta, .builder-blocks .testimonials-block__author-title, .builder-blocks .testimonials-block__author-school, .builder-blocks .testimonials-block__quote { color: #4b5563 !important; opacity: 1 !important; } .builder-blocks .testimonials-block__title { color: #182b45 !important; } .builder-blocks .testimonials-carousel__btn { width: 44px; min-width: 44px; height: 44px; flex: 0 0 44px; } .builder-blocks .testimonials-carousel__dot { position: relative; width: 44px; height: 44px; background: transparent; transform: none; } .builder-blocks .testimonials-carousel__dot::before { content: ""; position: absolute; inset: 50% auto auto 50%; width: 8px; height: 8px; border-radius: 50%; background: #8fb9dc; transform: translate(-50%, -50%); } .builder-blocks .testimonials-carousel__dot.is-active::before { background: var(--primary-color, #0077be); transform: translate(-50%, -50%) scale(1.35); } @media (hover: none), (max-width: 768px) { .builder-blocks .project-gallery-item__overlay { opacity: 1; background: linear-gradient(to top, rgba(15, 23, 42, 0.88) 0%, rgba(15, 23, 42, 0.46) 70%, rgba(15, 23, 42, 0.08) 100%); } .builder-blocks .project-gallery-item__content { transform: translateY(0); } } @media (max-width: 768px) { .builder-blocks > .block-wrapper { padding-left: clamp(0.75rem, 4vw, 1rem) !important; padding-right: clamp(0.75rem, 4vw, 1rem) !important; } .builder-blocks > .block-wrapper--hero-block { padding-left: 0 !important; padding-right: 0 !important; } .builder-blocks > .block-wrapper > section.builder-block { padding-left: clamp(0.9rem, 4vw, 1.25rem) !important; padding-right: clamp(0.9rem, 4vw, 1.25rem) !important; } .builder-blocks > .block-wrapper--hero-block > section.hero-block { width: 100vw; margin-left: calc(50% - 50vw); padding-left: 0 !important; padding-right: 0 !important; } .builder-blocks > .block-wrapper > section.builder-block > :is(.container, .container-fluid) { padding-left: 0; padding-right: 0; } .builder-blocks :is( .call-to-action-block__title, .paragraph-block__title, .content-image-block__title, .detailed-block__title, .headline-block__title, .headline-block__main-title, .features-grid-block__title, .featurette-block__title, .stats-block__title, .scoreboard-block__title, .chart-block__title, .comparison-table-block__title, .testimonials-block__title, .team-leaders-block__title, .case-studies-block__title, .carousel-block__title, .pricing-table-block__title, .research-block__title, .project-gallery-block .luxury-text-hero, .category-block .luxury-text-hero ) { font-size: clamp(1.65rem, 8vw, 2.25rem) !important; max-width: 18ch; } .builder-blocks :is( .case-studies-card__link, .pricing-table-block__action .btn, .research-block__primary, .research-block__secondary, .detailed-block__button, .featurette-block__button ) { width: 100%; padding-left: 0.85rem !important; padding-right: 0.85rem !important; font-size: 0.95rem; line-height: 1.35; } .builder-blocks .pricing-table-block__plan { padding: 1.5rem; } .builder-blocks .pricing-table-block__plan-price { align-items: flex-start; } .builder-blocks .pricing-table-block__period { flex-basis: 100%; } .builder-blocks .case-studies-card { padding: 1.35rem; } .builder-blocks .case-studies-card__media img { max-width: 100%; } .builder-blocks .research-block__methodology { padding: 1rem; overflow: visible; } .builder-blocks .research-block__actions { display: grid; grid-template-columns: 1fr; } .builder-blocks .testimonials-carousel__nav { gap: 0.25rem; flex-wrap: wrap; } .builder-blocks .testimonials-carousel__dots { gap: 0; justify-content: center; flex: 1 1 12rem; flex-wrap: wrap; } .builder-blocks .testimonial-card__footer { flex-direction: column; align-items: center; text-align: center; } .builder-blocks .testimonial-card__photo { flex: 0 0 54px; width: 54px; height: 54px; } .builder-blocks .testimonial-card__photo img { width: 54px; height: 54px; max-width: none; } } @media (max-width: 576px) { .builder-blocks .table-block__table { table-layout: fixed; min-width: 0; } .builder-blocks .table-block__head th, .builder-blocks .table-block__cell { padding: 0.6rem 0.4rem; font-size: 0.84rem; line-height: 1.4; } .builder-blocks .table-block__caption, .builder-blocks .table-block__footnote { overflow-wrap: break-word; } .builder-blocks .project-gallery-item__overlay { padding: 1rem; } } /* ============================================================ Project Gallery — Lightbox ============================================================ */ .gallery-lightbox { position: fixed; inset: 0; z-index: 9000; background: rgba(5, 10, 20, 0.95); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .gallery-lightbox.is-open { opacity: 1; pointer-events: auto; } .gallery-lightbox__inner { position: relative; max-width: min(90vw, 1200px); max-height: 90vh; display: flex; flex-direction: column; align-items: center; } .gallery-lightbox__img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 8px; display: block; } .gallery-lightbox__caption { margin-top: 0.75rem; color: rgba(255, 255, 255, 0.75); font-size: 0.9rem; text-align: center; max-width: 56ch; } .gallery-lightbox__counter { color: rgba(255, 255, 255, 0.45); font-size: 0.8rem; margin-top: 0.3rem; } .gallery-lightbox__close { position: fixed; top: 1.25rem; right: 1.5rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.1); color: #ffffff; font-size: 1.25rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; padding: 0; z-index: 1; } .gallery-lightbox__close:hover { background: rgba(255, 255, 255, 0.22) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.7) !important; } .gallery-lightbox__prev, .gallery-lightbox__next { position: fixed; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.1); color: #ffffff; font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; padding: 0; z-index: 1; } .gallery-lightbox__prev { left: 1.25rem; } .gallery-lightbox__next { right: 1.25rem; } .gallery-lightbox__prev:hover, .gallery-lightbox__next:hover { background: rgba(255, 255, 255, 0.22) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.7) !important; } .project-gallery-item__media { cursor: zoom-in; } @media (max-width: 600px) { .gallery-lightbox__prev { left: 0.4rem; } .gallery-lightbox__next { right: 0.4rem; } } /* -------------------------------------------------- 2026-05-14 Block Design Standards Pass Prevent oversized button text from wrecking card layouts. Buttons in blocks are CTA elements — cap at 2 lines. --------------------------------------------------- */ .builder-blocks .case-studies-card__link.luxury-btn-striking { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: center; } .builder-blocks .research-block__primary, .builder-blocks .research-block__secondary { max-width: 40ch; white-space: normal; overflow-wrap: break-word; text-overflow: clip; overflow: visible; } /* -------------------------------------------------- 2026-05-14 Research Block Positioning/Sizing Pass Tune internal hierarchy without changing content model. --------------------------------------------------- */ .builder-blocks .research-block__body { column-gap: clamp(1.5rem, 3vw, 2.5rem); row-gap: clamp(1rem, 2.4vw, 1.75rem); align-items: start; grid-template-columns: minmax(0, 1fr) minmax(140px, 22vw); } .builder-blocks .research-block__abstract { max-width: min(72ch, 100%); margin-block: 0; } .builder-blocks .research-block__badge { align-self: start; justify-self: end; min-width: 0; display: flex; align-items: flex-start; } .builder-blocks .research-block__badge img { display: block; width: clamp(176px, 22vw, 280px); max-width: min(100%, 280px); max-height: clamp(96px, 14vw, 168px); height: auto; object-fit: contain; object-position: center; border-radius: 8px; } .builder-blocks .research-block__methodology { margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.15rem, 2.8vw, 2rem); } .builder-blocks .research-block__methodology-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: clamp(0.9rem, 2vw, 1.25rem); justify-items: stretch; align-items: stretch; } .builder-blocks .research-block__methodology-item { height: 100%; align-content: start; width: 100%; max-width: none; } .builder-blocks .research-block__actions { margin: clamp(1.75rem, 3vw, 2.4rem) 0 1.25rem; align-items: stretch; } /* Center research block internals (content alignment override). */ .builder-blocks .research-block__title, .builder-blocks .research-block__abstract, .builder-blocks .research-block__disclaimer { text-align: center !important; margin-inline: auto !important; } .builder-blocks .research-block__body { grid-template-columns: minmax(0, 1fr); justify-items: center; width: min(100%, 58rem); margin-inline: auto; } .builder-blocks .research-block__badge, .builder-blocks .research-block__badge.research-block__badge--left, .builder-blocks .research-block__badge.research-block__badge--center { justify-self: center !important; justify-content: center !important; width: 100%; margin-inline: auto; } .builder-blocks .research-block__methodology { width: min(100%, 72rem); margin-left: auto; margin-right: auto; } .builder-blocks .research-block__actions { justify-content: center !important; } .builder-blocks .research-block--text-left .research-block__title, .builder-blocks .research-block--text-left .research-block__abstract, .builder-blocks .research-block--text-left .research-block__disclaimer { text-align: left; margin-inline: 0 auto; } .builder-blocks .research-block--text-left .research-block__actions { justify-content: flex-start; } .builder-blocks .research-block--text-left .research-block__badge { justify-self: start; } .builder-blocks .research-block--text-center .research-block__title, .builder-blocks .research-block--text-center .research-block__abstract, .builder-blocks .research-block--text-center .research-block__disclaimer { text-align: center; margin-inline: auto; } .builder-blocks .research-block--text-center .research-block__actions { justify-content: center; } .builder-blocks .research-block--text-center .research-block__badge { justify-self: center; } .builder-blocks .research-block--text-right .research-block__title, .builder-blocks .research-block--text-right .research-block__abstract, .builder-blocks .research-block--text-right .research-block__disclaimer { text-align: right; margin-inline: auto 0; } .builder-blocks .research-block--text-right .research-block__actions { justify-content: flex-end; } .builder-blocks .research-block--text-right .research-block__badge { justify-self: end; } /* In the centered research layout, keep badge placement visually anchored. */ .builder-blocks .research-block__badge.research-block__badge--left { justify-self: center !important; justify-content: center !important; } .builder-blocks .research-block__badge.research-block__badge--center { justify-self: center !important; justify-content: center !important; } @media (max-width: 992px) { .builder-blocks .research-block__body { grid-template-columns: 1fr; } .builder-blocks .research-block__badge { justify-self: center; justify-content: center; } .builder-blocks .research-block__badge--left { justify-content: flex-start; } .builder-blocks .research-block__badge--center { justify-content: center; } .builder-blocks .research-block__badge img { max-width: clamp(140px, 42vw, 196px); max-height: clamp(72px, 26vw, 124px); } } @media (max-width: 768px) { .builder-blocks .research-block__abstract { max-width: 100%; } .builder-blocks .research-block__methodology { width: 100%; } .builder-blocks .research-block__methodology-grid { display: block !important; width: 100%; } .builder-blocks .research-block__methodology-item { display: block; width: 100% !important; min-width: 100% !important; max-width: none !important; margin-bottom: 0.85rem; } .builder-blocks .research-block__methodology-item:last-child { margin-bottom: 0; } .builder-blocks .research-block__actions { gap: 0.7rem; } } /* Testimonials carousel: make active dot visually distinct with size + color */ .builder-blocks .testimonials-carousel__dot::before { transition: background 0.2s ease, width 0.2s ease, height 0.2s ease; } .builder-blocks .testimonials-carousel__dot.is-active::before { width: 12px; height: 12px; } /* Page-level color theme: ensure builder-blocks wrapper respects variable */ .builder-blocks { background-color: var(--page-bg, transparent); color: var(--page-fg, inherit); } /* -------------------------------------------------- 2026-05-18 CTA Defensive Sizing Any in-block button accepts arbitrary editor text. Long labels were wrapping into 4+ lines with mid-word breaks, wrecking card alignment. Cap to 2 lines + ellipsis, with a reasonable max-width so cards stay visually balanced when label is long. Keep responsive sizing intact. --------------------------------------------------- */ .builder-blocks .pricing-table-block__action .btn, .builder-blocks .featurette-block__button, .builder-blocks .detailed-block__button, .builder-blocks .content-image-block__button, .builder-blocks .cta-block__button, .builder-blocks .call-to-action-block__button { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; } /* Strengthen research-block CTA buttons so very long labels truncate cleanly instead of stretching to multiple lines. Tighter clamp on narrow viewports. */ .builder-blocks .research-block__primary, .builder-blocks .research-block__secondary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; max-width: 32ch; } /* Defensive sizing for stats-block suffix. The suffix field accepts any string (e.g. "+", "%", "k") but if an editor enters paragraph text, the flex row spills the description sideways and destroys the card. Cap at a sensible short label width. */ .builder-blocks .stats-block__suffix, .builder-blocks .scoreboard-card__suffix { max-width: 4ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* -------------------------------------------------- FAQ Block Consumes the canonical --block-* token cascade so a single editor change at any cascade layer flows through. Two layout modes: accordion (native
) and stacked (always open). --------------------------------------------------- */ .builder-block.faq-block { padding: 4rem 0; } .faq-block__header { max-width: 56rem; margin-inline: auto; } .faq-block__title { color: var(--block-heading-color); margin-bottom: 0.75rem; } .faq-block__intro { color: var(--block-muted-color); font-size: 1.05rem; line-height: 1.6; } .faq-block__list { max-width: 56rem; margin-inline: auto; display: flex; flex-direction: column; gap: 0.85rem; } .faq-block__item { background: var(--block-surface-color); border: 1px solid var(--generic-border-soft); border-radius: var(--generic-radius-md); box-shadow: var(--generic-shadow-xs); padding: 1rem 1.25rem; transition: var(--generic-transition); } .faq-block__item[open], .faq-block__item:hover { box-shadow: var(--generic-shadow-sm); border-color: var(--block-accent-color); background-image: linear-gradient( 135deg, transparent 0%, color-mix(in srgb, var(--block-accent-color, var(--primary-color, #0077be)) 8%, transparent) 16%, color-mix(in srgb, var(--block-accent-color, var(--primary-color, #0077be)) 5%, transparent) 84%, transparent 100% ); } .faq-block__question { color: var(--block-heading-color); font-weight: 700; font-size: 1.1rem; line-height: 1.4; cursor: pointer; list-style: none; position: relative; padding-right: 2rem; } .faq-block__question::-webkit-details-marker { display: none; } details.faq-block__item > summary.faq-block__question::after { content: '+'; position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; line-height: 1; color: var(--block-accent-color); transition: transform 0.2s ease; } details.faq-block__item[open] > summary.faq-block__question::after { content: '−'; } .faq-block__answer { color: var(--block-body-color); font-size: 1rem; line-height: 1.7; margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--generic-border-soft); } .faq-block__item--stacked .faq-block__question { cursor: default; padding-right: 0; margin-bottom: 0; } .faq-block__empty, .howto-block__empty { margin: clamp(1.5rem, 4vw, 2.5rem) auto; max-width: 44ch; padding: clamp(1.25rem, 3vw, 2rem); text-align: center; text-wrap: balance; color: var(--block-muted-color, var(--generic-text-muted)); background: var(--block-surface-color, var(--generic-surface, #ffffff)); border: 1px dashed var(--generic-border-soft); border-radius: var(--generic-radius-md); font-size: 1rem; line-height: 1.55; font-style: italic; } /* -------------------------------------------------- HowTo Block Ordered list of procedural steps. Numbered circles in the block accent color; step bodies on the surface token. Consumes the canonical --block-* cascade so palette overrides flow through. --------------------------------------------------- */ .builder-block.howto-block { padding: 4rem 0; } .howto-block__header { max-width: 56rem; margin-inline: auto; text-align: center; margin-bottom: 2.5rem; } .howto-block__title { color: var(--block-heading-color); margin-bottom: 0.75rem; } .howto-block__intro { color: var(--block-muted-color); font-size: 1.05rem; line-height: 1.6; } .howto-block__steps { list-style: none; counter-reset: howto-step; padding: 0; margin: 0 auto; max-width: 56rem; display: flex; flex-direction: column; gap: 1.25rem; } .howto-block__step { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; background: var(--block-surface-color); border: 1px solid var(--generic-border-soft); border-radius: var(--generic-radius-md); box-shadow: var(--generic-shadow-xs); padding: 1.5rem; } .howto-block__step-number { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--block-accent-color); color: #ffffff; font-weight: 800; font-size: 1.15rem; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .howto-block__step-name { color: var(--block-heading-color); font-size: 1.2rem; font-weight: 700; line-height: 1.3; margin: 0 0 0.65rem; } .howto-block__step-image { margin: 0 0 0.85rem; border-radius: var(--generic-radius-sm); overflow: hidden; } .howto-block__step-image img { display: block; width: 100%; height: auto; } .howto-block__step-instruction { color: var(--block-body-color); font-size: 1rem; line-height: 1.7; } @media (max-width: 600px) { .howto-block__step { grid-template-columns: auto 1fr; gap: 0.85rem; padding: 1.1rem; } .howto-block__step-number { width: 2rem; height: 2rem; font-size: 1rem; } } /* -------------------------------------------------- Service Block Summary card sitting at the top of a service-pillar page. Consumes the canonical --block-* token cascade so a single editor palette change propagates through the entire card. Pricing and category badges use the accent / surface tokens so they stay legible across every page palette. --------------------------------------------------- */ .builder-block.service-block { padding: 3rem 0; } .service-block__card { max-width: 56rem; margin-inline: auto; background: var(--block-surface-color); border: 1px solid var(--generic-border-soft); border-radius: var(--generic-radius-lg, var(--generic-radius-md)); box-shadow: var(--generic-shadow-sm); padding: 2rem 2.25rem; position: relative; overflow: hidden; } .service-block__card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--block-accent-color); } .service-block__header { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 1.25rem; } .service-block__badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.75rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; background: color-mix(in srgb, var(--block-accent-color) 14%, transparent); color: var(--block-accent-color); border: 1px solid color-mix(in srgb, var(--block-accent-color) 30%, transparent); } .service-block__badge--commercial { background: color-mix(in srgb, var(--block-heading-color) 8%, transparent); color: var(--block-heading-color); border-color: color-mix(in srgb, var(--block-heading-color) 22%, transparent); } .service-block__badge--both { background: linear-gradient(90deg, color-mix(in srgb, var(--block-accent-color) 14%, transparent), color-mix(in srgb, var(--block-heading-color) 12%, transparent)); color: var(--block-heading-color); border-color: color-mix(in srgb, var(--block-stroke-color, var(--block-heading-color)) 18%, transparent); } .service-block__title { color: var(--block-heading-color); margin: 0; line-height: 1.2; } .service-block__service-type { color: var(--block-muted-color); font-size: 1rem; font-weight: 500; margin: 0; } .service-block__description { color: var(--block-body-color); font-size: 1.05rem; line-height: 1.7; margin-bottom: 1.5rem; } .service-block__description p:last-child { margin-bottom: 0; } .service-block__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem 1.5rem; margin: 0; padding: 1.25rem 0 0; border-top: 1px solid var(--generic-border-soft); } .service-block__meta-item { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; } .service-block__meta-label { color: var(--block-muted-color); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin: 0; } .service-block__meta-value { color: var(--block-heading-color); font-size: 1.05rem; font-weight: 600; line-height: 1.3; margin: 0; } .service-block__meta-item--price .service-block__meta-value { color: var(--block-accent-color); font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; } .service-block__availability { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.95rem; font-weight: 600; } .service-block__availability::before { content: ''; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); } .service-block__availability--instock { color: #15803d; } .service-block__availability--limitedavailability { color: #b45309; } .service-block__availability--outofstock { color: #b91c1c; } @media (max-width: 600px) { .builder-block.service-block { padding: 2rem 0; } .service-block__card { padding: 1.5rem 1.25rem; border-radius: var(--generic-radius-md); } .service-block__card::before { width: 3px; } .service-block__title { font-size: 1.7rem; } .service-block__meta { grid-template-columns: 1fr; gap: 0.9rem; padding-top: 1rem; } .service-block__meta-item--price .service-block__meta-value { font-size: 1.25rem; } } /* ============================================================ Parallax Hero Block Full-bleed hero with two SVG layers that converge on scroll. --parallax-hero-conv is set per-instance by inline JS (0..1) and drives the layer translation. Consumes block-level token cascade for headline / body / accent text; deep-night background uses the new --brand-paper-* tokens (fall back to literal hex). Visual concepts: .parallax-hero--variant-waves blue + red converging bands .parallax-hero--variant-currents emerald + coral streamlines ============================================================ */ .builder-block.parallax-hero { /* Force full-bleed regardless of page-level container width. The wrapper is .block-wrapper--parallax-hero-block at page level — this block negates any centered container layout. */ --parallax-hero-conv: 0; /* Edge-softener: a tiny ::after gradient at the bottom blends the hero's dark backdrop into whatever follows, eliminating the hard compositing seam created by `isolation: isolate`. */ /* Default = light/linen palette (dark navy text on #F1ECE0). Matches design/Parallax Hero.html. [data-theme="dark"] override below flips to pale-on-night for the dark-mode variant. */ --parallax-hero-bg-deep: #F1ECE0; --parallax-hero-bg-mid: #F1ECE0; --parallax-hero-fg: rgb(28, 36, 54); --parallax-hero-body: rgb(60, 72, 92); --parallax-hero-accent: rgb(80, 100, 124); position: relative; width: 100vw; /* Pull the hero out of any centered container so it spans the full viewport. */ margin-inline: calc(50% - 50vw); max-width: 100vw; /* !important defeats theme.css's `section { padding: 80px !important }` catchall that targets every
element. */ padding: 0 !important; color: var(--parallax-hero-fg); background: var(--brand-paper-deep, #02060F); /* Hero takes the first viewport. The fixed .coastal-page-bg behind it provides the parallax atmosphere; the hero content overlays. */ min-height: max(720px, 100vh); display: flex; /* flex-direction column means the .__content child takes full cross-axis (width:100% honored). Row-direction shrinks to fit-content even with width:100%. */ flex-direction: column; align-items: stretch; justify-content: center; overflow: visible; isolation: isolate; } /* Dark theme — restore pale-on-night palette. The hero sits on the [data-theme="dark"] deep-night override of .coastal-page-bg. */ :root[data-theme="dark"] .builder-block.parallax-hero, .le[data-theme="dark"] .builder-block.parallax-hero, .le-shell[data-theme="dark"] .builder-block.parallax-hero { --parallax-hero-bg-deep: var(--brand-paper-deep, #02060F); --parallax-hero-bg-mid: var(--brand-paper-mid, #050A1A); --parallax-hero-fg: rgb(240, 248, 255); --parallax-hero-body: rgb(232, 244, 255); --parallax-hero-accent: rgb(210, 238, 255); } /* ── Parallax hero — optional background photo(s) ──────────────────────── */ /* The block can render one or many uploaded images. With many images, JS rotates .parallax-hero__bg-image states (is-active/is-prev) and this CSS handles the transition effects. */ .parallax-hero--has-bg { position: relative; } .parallax-hero__bg-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .parallax-hero__bg-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--cb-hero-bg-pos, center center); opacity: 0; transform: translate3d(0, 0, 0) scale(1); transition: opacity var(--parallax-hero-bg-transition-duration, 1000ms) var(--parallax-hero-bg-transition-easing, ease-in-out), transform var(--parallax-hero-bg-transition-duration, 1000ms) var(--parallax-hero-bg-transition-easing, ease-in-out); will-change: opacity, transform; } .parallax-hero__bg-image.is-active { opacity: 1; transform: translate3d(0, 0, 0) scale(1); z-index: 1; } .parallax-hero__bg-image.is-prev { opacity: 0; z-index: 0; } .parallax-hero__bg-media--slide .parallax-hero__bg-image { transform: translate3d(8%, 0, 0); } .parallax-hero__bg-media--slide .parallax-hero__bg-image.is-active { transform: translate3d(0, 0, 0); } .parallax-hero__bg-media--slide .parallax-hero__bg-image.is-prev { transform: translate3d(-8%, 0, 0); } .parallax-hero__bg-media--zoom .parallax-hero__bg-image { transform: scale(1.08); } .parallax-hero__bg-media--zoom .parallax-hero__bg-image.is-active { transform: scale(1); } .parallax-hero__bg-media--speed-slow { --parallax-hero-bg-motion-duration: 28s; } .parallax-hero__bg-media--speed-standard { --parallax-hero-bg-motion-duration: 20s; } .parallax-hero__bg-media--speed-brisk { --parallax-hero-bg-motion-duration: 14s; } .parallax-hero__bg-media--motion-slow-pan .parallax-hero__bg-image.is-active { animation: parallax-hero-bg-slow-pan var(--parallax-hero-bg-motion-duration, 24s) ease-in-out infinite alternate; } .parallax-hero__bg-media--motion-ken-burns .parallax-hero__bg-image.is-active { animation: parallax-hero-bg-ken-burns var(--parallax-hero-bg-motion-duration, 22s) ease-in-out infinite alternate; } .parallax-hero__bg-media--motion-coastal-drift .parallax-hero__bg-image.is-active { animation: parallax-hero-bg-coastal-drift var(--parallax-hero-bg-motion-duration, 20s) ease-in-out infinite alternate; } @keyframes parallax-hero-bg-slow-pan { from { transform: translate3d(-1.5%, 0, 0) scale(1.04); } to { transform: translate3d(1.5%, 0, 0) scale(1.04); } } @keyframes parallax-hero-bg-ken-burns { from { transform: translate3d(0, 0, 0) scale(1.02); } to { transform: translate3d(0, -1.5%, 0) scale(1.10); } } @keyframes parallax-hero-bg-coastal-drift { from { transform: translate3d(-1.2%, 1%, 0) scale(1.05) rotate(-0.25deg); } to { transform: translate3d(1.2%, -1%, 0) scale(1.07) rotate(0.25deg); } } .parallax-hero--has-bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 160deg, rgba(8, 16, 28, 0.92) 0%, rgba(8, 16, 28, 0.65) 45%, rgba(8, 16, 28, 0.90) 100% ); opacity: var(--cb-hero-scrim, 0.72); z-index: 1; pointer-events: none; } /* Lift content and decorative hero layers above the scrim */ .parallax-hero--has-bg .parallax-hero__content { position: relative; z-index: 12; } /* Bottom edge softener — feathered shadow that smooths the seam between the hero's dark backdrop and the section that follows. Sits above the hero's content but below the foreground text. */ .builder-block.parallax-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient( to bottom, rgba(2, 6, 15, 0) 0%, rgba(2, 6, 15, 0.35) 60%, rgba(2, 6, 15, 0.75) 100% ); z-index: 1; pointer-events: none; } :root[data-theme="light"] .builder-block.parallax-hero::after, .le[data-theme="light"] .builder-block.parallax-hero::after, .le-shell[data-theme="light"] .builder-block.parallax-hero::after { background: linear-gradient( to bottom, rgba(241, 236, 224, 0) 0%, rgba(241, 236, 224, 0.45) 60%, rgba(241, 236, 224, 0.85) 100% ); } .parallax-hero--has-bg .le-hvac-scene { z-index: 2; } .parallax-hero--has-bg .le-hvac-watermark { z-index: 5; } @media (prefers-reduced-motion: reduce) { .parallax-hero__bg-image { transition: none !important; animation: none !important; } } /* ── Parallax hero — optional background video ──────────────────────── */ .parallax-hero__bg-video-wrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .parallax-hero__bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; will-change: opacity; } .parallax-hero__bg-video.is-ready { opacity: 1; } .parallax-hero__bg-video-scrim { position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(2, 6, 15, 0.72) 0%, rgba(5, 10, 26, 0.55) 60%, rgba(2, 6, 15, 0.68) 100% ); z-index: 1; pointer-events: none; } /* When video is present, content sits above it */ .parallax-hero--has-video .parallax-hero__animation-container, .parallax-hero--has-video .parallax-hero__content, .parallax-hero--has-video .le-cover-text { position: relative; z-index: 2; } /* Scroll well — drives convergence. Tall enough to give the converge animation room to play out. Inside, .parallax-hero__stage sticks to the viewport for the duration of the scroll. */ .parallax-hero__well { position: relative; height: 220vh; } .parallax-hero__stage { position: sticky; top: 0; width: 100%; height: 100vh; /* 100dvh on browsers that support it — better on iOS Safari address-bar. */ height: 100dvh; min-height: 600px; overflow: hidden; background: radial-gradient(70% 90% at 50% 55%, var(--parallax-hero-bg-mid) 0%, var(--parallax-hero-bg-deep) 75%), var(--parallax-hero-bg-deep); isolation: isolate; } /* Layered backgrounds — the two SVG bands translate in opposite directions, scaled by --parallax-hero-conv. At conv=0 they're spread apart at the edges; at conv=1 they overlap centrally. */ .parallax-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .parallax-hero__layer { position: absolute; top: 0; left: -10%; width: 120%; height: 100%; pointer-events: none; will-change: transform; } .parallax-hero__layer img { width: 100%; height: 100%; display: block; } /* Waves variant — blue layer slides LEFT to center, red layer slides RIGHT to center, both on screen blend so the deep background reads through. Mirrors design/Coastal Breeze Banner.html lines 51-52. */ .parallax-hero__layer--blue { mix-blend-mode: screen; transform: translateX(calc(var(--parallax-hero-conv) * -55%)); } .parallax-hero__layer--red { mix-blend-mode: screen; transform: translateX(calc(var(--parallax-hero-conv) * 55%)); } /* Currents variant — emerald and coral streamlines. Same mechanic, different brand tone. */ .parallax-hero__layer--emerald { mix-blend-mode: screen; transform: translateX(calc(var(--parallax-hero-conv) * -55%)); } .parallax-hero__layer--coral { mix-blend-mode: screen; transform: translateX(calc(var(--parallax-hero-conv) * 55%)); } /* Bokeh — distant pinprick highlights, cool on left / warm on right. Mirrors design/Coastal Breeze Banner.html lines 54-73. */ .parallax-hero__bokeh { position: absolute; inset: 0; background: radial-gradient(2px 2px at 14% 22%, rgba(150, 220, 255, 0.55), transparent 60%), radial-gradient(2px 2px at 6% 64%, rgba(150, 220, 255, 0.40), transparent 60%), radial-gradient(1.5px 1.5px at 22% 78%, rgba(150, 220, 255, 0.50), transparent 60%), radial-gradient(1px 1px at 10% 38%, rgba(150, 220, 255, 0.55), transparent 70%), radial-gradient(2px 2px at 18% 12%, rgba(150, 220, 255, 0.35), transparent 60%), radial-gradient(1.5px 1.5px at 4% 86%, rgba(150, 220, 255, 0.40), transparent 60%), radial-gradient(1px 1px at 24% 48%, rgba(150, 220, 255, 0.60), transparent 70%), radial-gradient(2px 2px at 84% 18%, rgba(255, 180, 160, 0.50), transparent 60%), radial-gradient(1.5px 1.5px at 92% 56%, rgba(255, 180, 160, 0.45), transparent 60%), radial-gradient(1px 1px at 78% 78%, rgba(255, 180, 160, 0.55), transparent 70%), radial-gradient(2px 2px at 88% 38%, rgba(255, 180, 160, 0.35), transparent 60%), radial-gradient(1.5px 1.5px at 96% 28%, rgba(255, 180, 160, 0.40), transparent 60%), radial-gradient(1px 1px at 80% 68%, rgba(255, 180, 160, 0.55), transparent 70%); z-index: 2; mix-blend-mode: screen; opacity: 0.85; pointer-events: none; } /* Paper grain — barely-there texture that breaks up flat fields. */ .parallax-hero__grain { position: absolute; inset: 0; background-size: 520px 520px; mix-blend-mode: screen; opacity: 0.05; z-index: 3; pointer-events: none; } /* Vignette — radial center glow + top/bottom letterboxing for content focus. */ .parallax-hero__vignette { position: absolute; inset: 0; background: radial-gradient(45% 55% at 50% 55%, rgba(0, 2, 6, 0.55) 0%, transparent 75%), linear-gradient(180deg, rgba(0, 2, 6, 0.3) 0%, transparent 12%, transparent 88%, rgba(0, 2, 6, 0.5) 100%); z-index: 4; pointer-events: none; } /* Content layer — centered in the hero (no longer absolutely positioned; the parent .builder-block.parallax-hero now uses flex-center). The sitewide coastal-page-bg paints behind via position:fixed inset:0. */ .parallax-hero__content { position: relative; z-index: 12; width: 100%; /* No max-width — design fills the viewport (only 8vw padding limits reach). Individual children (title, lede) constrain themselves via their own max-width (16ch for title, 56ch for lede). */ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--nav-h, 136px) 8vw 14vh; text-align: center; color: var(--parallax-hero-fg); } .parallax-hero__content > * { pointer-events: auto; } .parallax-hero__eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-body-coastal, 'Manrope', sans-serif); font-size: 14px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--parallax-hero-accent); margin: 0 0 26px; text-shadow: 0 1px 3px rgba(0, 8, 24, 0.85); } .parallax-hero__eyebrow::before, .parallax-hero__eyebrow::after { content: ''; display: block; width: 36px; height: 1px; background: currentColor; opacity: 0.55; } .parallax-hero__title { font-family: var(--font-display-coastal, 'Cormorant Garamond', serif); font-weight: 400; font-size: clamp(44px, 5.6vw, 88px); line-height: 1.04; letter-spacing: -0.012em; max-width: 16ch; margin: 0 auto 24px; color: var(--parallax-hero-fg); text-wrap: balance; text-shadow: 0 2px 6px rgba(0, 8, 24, 0.85), 0 8px 36px rgba(0, 10, 30, 0.75); font-feature-settings: "kern" 1, "liga" 1, "dlig" 1; } .parallax-hero__title em { font-style: italic; background: linear-gradient(95deg, rgb(180, 220, 255) 0%, rgb(120, 160, 230) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "swsh" 1; } /* Currents variant — warm emerald → coral italic gradient instead. */ .parallax-hero--variant-currents .parallax-hero__title em { background: linear-gradient(95deg, rgb(120, 220, 200) 0%, rgb(255, 200, 160) 100%); -webkit-background-clip: text; background-clip: text; } /* Specificity (0,2,0) via descendant of .parallax-hero beats the .block-wrapper p (0,1,1) catchall that would otherwise force the light-mode --block-body-color onto the lede paragraph. */ .parallax-hero .parallax-hero__lede { font-family: var(--font-body-coastal, 'Manrope', sans-serif); font-size: clamp(17px, 1.2vw, 19px); line-height: 1.6; max-width: 56ch; margin: 0 auto 32px; color: var(--parallax-hero-body); text-wrap: pretty; text-shadow: 0 1px 4px rgba(0, 8, 24, 0.85), 0 4px 18px rgba(0, 10, 30, 0.65); } /* Override the generic .block-wrapper p / li / span rule (specificity 0,1,1) which forces --block-body-color onto any descendant text. The parallax hero is atmospheric and always dark, so its body text must inherit the on-dark color regardless of theme. This rule's specificity (0,2,1) wins. The :not(.parallax-hero__lede) carve-out lets the lede keep its own --parallax-hero-body color (slight cool tint, not pure white from inherit). */ .parallax-hero p:not(.parallax-hero__lede), .parallax-hero li, .parallax-hero span { color: inherit; } .parallax-hero__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; margin: 0 0 32px; } .parallax-hero__cta { display: inline-flex; align-items: center; gap: 12px; padding: 16px 30px; border-radius: 999px; text-decoration: none; font-family: var(--font-body-coastal, 'Manrope', sans-serif); font-size: 13px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; transition: transform .25s, box-shadow .25s, background .25s, color .25s, border-color .25s; will-change: transform; } .parallax-hero__cta--primary { background: linear-gradient(110deg, rgb(120, 200, 255) 0%, rgb(80, 140, 220) 100%); color: #0a1530; box-shadow: 0 14px 36px -10px rgba(120, 200, 255, 0.50), 0 8px 24px -10px rgba(80, 140, 220, 0.45); } .parallax-hero__cta--primary:hover { transform: translateY(-2px); color: #0a1530; } .parallax-hero__cta--primary svg { transition: transform .25s; } .parallax-hero__cta--primary:hover svg { transform: translateX(3px); } .parallax-hero__cta--ghost { color: var(--parallax-hero-body); border: 1px solid rgba(200, 225, 250, 0.42); background: rgba(10, 25, 50, 0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .parallax-hero__cta--ghost:hover { border-color: rgba(220, 240, 255, 0.8); background: rgba(40, 80, 140, 0.40); color: var(--parallax-hero-fg); transform: translateY(-2px); } /* Currents variant — warmer CTA gradient. */ .parallax-hero--variant-currents .parallax-hero__cta--primary { background: linear-gradient(110deg, rgb(120, 220, 200) 0%, rgb(255, 180, 130) 100%); box-shadow: 0 14px 36px -10px rgba(14, 130, 130, 0.50), 0 8px 24px -10px rgba(245, 168, 110, 0.45); } .parallax-hero__trust { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; font-family: var(--font-body-coastal, 'Manrope', sans-serif); font-size: 14px; font-weight: 500; letter-spacing: 0.20em; text-transform: uppercase; /* Hard-set to match design/Banner.html:467 — slightly darker/cooler than --parallax-hero-body (which is rgb(232, 244, 255)). The trust strip reads against the wave field at the lowest contrast zone of the hero, so a subtly cooler tint actually improves legibility there. */ color: rgb(216, 230, 246); text-shadow: 0 1px 3px rgba(0, 8, 24, 0.85); } .parallax-hero__trust-item { display: inline-flex; align-items: center; gap: 10px; } .parallax-hero__trust-item svg { /* Hard-set to match design/Banner.html:471 — slightly more saturated than --parallax-hero-accent (pale sky), and with a touch of opacity to read as "icon" rather than "text". */ color: rgba(190, 230, 255, 0.95); flex: 0 0 14px; } .parallax-hero__trust-sep { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: rgba(200, 220, 240, 0.5); } @media (max-width: 720px) { .parallax-hero__content { padding: clamp(96px, 12vh, 140px) 6vw clamp(60px, 10vh, 100px); } /* Title font-size + CTA padding REMOVED — design/Coastal Breeze Banner.html keeps the desktop clamp(44px, 5.6vw, 88px) for the title and 16px 30px for CTAs at every viewport. The base rules already use clamp() with a 44px floor that wraps cleanly inside max-width: 16ch even on iPhone SE (375px). */ /* Eyebrow stubs ½-width on mobile so the chip breathes — this is a prototype-aligned tweak (.eyebrow::before/::after geometry is defined inline in Banner.html and renders at the same target). */ .parallax-hero__eyebrow { letter-spacing: 0.24em; gap: 10px; margin-bottom: 18px; } .parallax-hero__eyebrow::before, .parallax-hero__eyebrow::after { width: 24px; } /* Trust strip — matches design/Banner.html L437-440 exactly. */ .parallax-hero__trust { gap: 14px; font-size: 12px; } .parallax-hero__trust-sep { display: none; } } /* Honor reduced-motion: collapse the scroll well so the hero takes one viewport, and freeze the layers at their conv=0 position. Covers BOTH the old .parallax-hero__layer (per-block layers, now deprecated by the sitewide page-bg) AND the new .coastal-page-bg__layer (sitewide). The JS in coastal-page-bg.htm also exits early if matchMedia('prefers-reduced-motion').matches — so --conv stays at 0 and no scroll updates happen. */ @media (prefers-reduced-motion: reduce) { .parallax-hero { --parallax-hero-conv: 0; } .parallax-hero__well { height: 100vh; height: 100dvh; } .parallax-hero__layer, .coastal-page-bg__layer, .coastal-page-bg__layer--blue, .coastal-page-bg__layer--red { transform: none !important; } .coastal-page-bg:not(.coastal-page-bg--internal) .coastal-page-bg__layer img { animation: none !important; transform: none !important; } .coastal-page-bg--internal .coastal-page-bg__band { animation: none !important; } } /* ============================================================= Category Strip block ============================================================ A sticky horizontal nav of category items, designed to dock just under the fixed site nav as you scroll. Ported from the design at design/Coastal Breeze Banner.html lines 462-535 and 942-1075 (.strip-row + .strip-row.services / .strip-row.areas). Renamed to a .category-strip namespace and rewired to consume --block-* tokens so the cascade flows end-to-end. Variants: --services / --areas / --testimonials let the editor pick a category source from a single shared structure. Sticky vs static is a separate variant on the same element. */ .builder-block.category-strip { --category-strip-h: 60px; --category-strip-nav-offset: var(--nav-h, 80px); --category-strip-bg: var(--block-bg-color, rgba(4, 10, 24, 0.32)); --category-strip-border: var(--block-stroke-color, rgba(190, 220, 250, 0.18)); --category-strip-label-color: var(--block-muted-color, rgb(220, 234, 250)); --category-strip-link-color: var(--block-body-color, rgb(230, 242, 255)); --category-strip-link-hover: var(--block-accent-color, rgb(255, 230, 210)); z-index: 35; height: var(--category-strip-h); display: flex; align-items: center; justify-content: flex-start; padding: 0 56px; background: var(--category-strip-bg); border-top: 1px solid var(--category-strip-border); border-bottom: 1px solid var(--category-strip-border); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); } /* Sticky scope on the BLOCK-WRAPPER (not the strip itself) — the strip's natural parent .block-wrapper is only as tall as the strip (60px), so sticky on the strip has zero range. The wrapper's parent .builder-blocks is the full page-content height, giving sticky on the wrapper plenty of scroll-range to engage. */ .block-wrapper--category-strip-block:has(.category-strip--sticky) { position: sticky; top: var(--nav-h, 136px); z-index: 35; } .builder-block.category-strip--sticky { /* Strip itself is normal block; the wrapper above provides sticky. */ position: relative; top: 0; } .builder-block.category-strip--static { position: relative; } .category-strip__label { flex: 0 0 auto; font-size: 13px; letter-spacing: 0.30em; text-transform: uppercase; color: var(--category-strip-label-color); padding-right: 22px; border-right: 1px solid var(--category-strip-border); white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 10, 30, 0.90); } .category-strip__items { list-style: none; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; padding-left: 22px; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; overflow-x: auto; overflow-y: hidden; max-height: var(--category-strip-h); scrollbar-width: none; } .category-strip__items::-webkit-scrollbar { display: none; } .category-strip__item { margin: 0; flex: 0 0 auto; position: relative; } /* Vertical separator line centered in the 22px column gap between items */ .category-strip__item + .category-strip__item::before { content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 1px; height: 14px; background: var(--category-strip-border, rgba(190, 220, 250, 0.22)); pointer-events: none; } .category-strip__link { color: var(--category-strip-link-color); text-decoration: none; position: relative; /* Reset size — the global `.block-wrapper li { font-size: 1.05rem }` rule was bumping these caps to 16.8px and crowding the tracking. Lock them at the parent UL's 13px (or override the 12px mobile rule) and open the tracking. */ font-size: inherit; letter-spacing: 0.18em; /* Vertical padding fills the strip's 60px height so the touch target meets WCAG AAA 44x44 minimum. inline-flex + align keeps text vertically centered. */ display: inline-flex; align-items: center; padding: 18px 0; text-shadow: 0 1px 3px rgba(0, 10, 30, 0.90); transition: color .2s; white-space: nowrap; } /* Defeat the global `.block-wrapper li { font-size: 1.05rem }` which was bumping these uppercase caps to 16.8px and crowding the tracking. */ .block-wrapper .category-strip__item, .builder-block .category-strip__item, .category-strip__items .category-strip__item { font-size: inherit; letter-spacing: inherit; } .category-strip__link:hover, .category-strip__link:focus { color: var(--category-strip-link-hover); } .category-strip__link[aria-current="page"] { color: var(--category-strip-link-hover); font-weight: 600; } .category-strip__link:hover::after, .category-strip__link:focus::after, .category-strip__link[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: linear-gradient(90deg, transparent, var(--category-strip-link-hover), transparent); opacity: 0.85; } /* Areas variant tints the label warm (matches the design's red wash on the right side of the screen). Services keeps the default cool blue. */ .builder-block.category-strip--areas { --category-strip-label-color: var(--block-accent-color, rgb(255, 200, 180)); } /* ----- Appearance variants ----- `--appearance-auto` (default) keeps everything driven by the cascade so that the page theme + block tokens decide the look. No extra rules. `--appearance-paper` is the explicit light-card version — locks the block to the paper palette so it stays paper-y even under data-theme=dark. `--appearance-banner-dark` is for pages sitting on the deep-night sitewide page-bg (see partials/coastal-page-bg.htm). It pins the strip to the semi-transparent dark "banner card" treatment lifted from `design/Coastal Breeze Banner.html` lines 942-1075 — even when the device theme is light, this variant stays dark to read on the deep-night atmospheric backdrop. */ .builder-block.category-strip--appearance-paper { --category-strip-bg: var(--brand-paper, #F1ECE0); --category-strip-border: var(--block-stroke-color, rgba(15, 23, 42, 0.10)); --category-strip-label-color: var(--brand-ink-soft, #6B655A); --category-strip-link-color: var(--brand-ink, #2A2823); --category-strip-link-hover: var(--block-accent-color, var(--primary-color, #0077be)); } .builder-block.category-strip--appearance-paper .category-strip__label, .builder-block.category-strip--appearance-paper .category-strip__link { text-shadow: none; } .builder-block.category-strip--appearance-banner-dark { /* Mirror design/Banner.html:510-514 (.strip-row) — same bg tint (rgba(4, 10, 24, 0.32)) and border alpha (0.18) and height (60px via --strip-h). Previously was a slightly different tint (rgba(8, 18, 36, 0.22)) and 52px tall. */ --category-strip-h: 60px; --category-strip-bg: rgba(4, 10, 24, 0.32); --category-strip-border: rgba(190, 220, 250, 0.18); --category-strip-label-color: rgb(198, 216, 238); --category-strip-link-color: rgb(232, 244, 255); --category-strip-link-hover: rgb(190, 226, 255); } .builder-block.category-strip--appearance-banner-dark.category-strip--areas { --category-strip-label-color: rgb(255, 200, 180); } @media (max-width: 1100px) { .builder-block.category-strip { padding: 0 24px; } .category-strip__label { font-size: 11px; padding-right: 14px; } .category-strip__items { padding-left: 14px; font-size: 12px; gap: 4px 14px; } } /* ============================================================= Section List block ============================================================ Section heading + intro + entry-list with cycling icons. Ported from the design at design/Coastal Breeze Banner.html lines 644-749 (.section-content / .section-intro / .entry-list / .entry / .icon / .text) and 958-1052 for the live structure. Renamed to a .section-list namespace and rewired to consume --block-* tokens including --block-accent-color for the icon stroke. Per-source variants apply tints without recompiling. */ .builder-block.section-list { --section-list-fg: var(--block-heading-color, rgb(240, 248, 255)); --section-list-body: var(--block-body-color, rgb(216, 228, 244)); --section-list-muted: var(--block-muted-color, rgb(198, 216, 238)); --section-list-accent: var(--block-accent-color, rgb(190, 226, 255)); --section-list-stroke: var(--block-stroke-color, rgba(190, 220, 250, 0.14)); --section-list-icon-bg-from: rgba(120, 200, 255, 0.18); --section-list-icon-bg-to: rgba(255, 150, 130, 0.10); position: relative; z-index: 5; padding: 60px 0 14vh; } .section-list__content { max-width: var(--content-max-width, 1200px); margin: 0 auto; padding: 0 var(--content-pad-x, 8vw); } .section-list__intro { max-width: none; margin: 0 0 30px; text-align: center; } .section-list__title { font-family: var(--font-display-coastal, 'Cormorant Garamond', serif); font-weight: 400; font-size: clamp(34px, 4vw, 56px); line-height: 1.06; letter-spacing: -0.008em; margin: 0 0 18px; color: var(--section-list-fg); text-shadow: 0 2px 8px rgba(0, 10, 30, 0.6); font-feature-settings: "kern" 1, "liga" 1, "dlig" 1; } .section-list__lede { font-size: 18px; line-height: 1.65; color: var(--section-list-body); text-wrap: pretty; text-shadow: 0 1px 4px rgba(0, 8, 24, 0.85), 0 4px 18px rgba(0, 10, 30, 0.65); margin: 0; } .section-list__entries { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--section-list-stroke); width: 100%; } .section-list__entry { display: flex; align-items: stretch; gap: 0; padding: 0; border-bottom: 1px solid var(--section-list-stroke); /* nav + up to two sticky strips + breathing room */ scroll-margin-top: calc(var(--nav-h, 136px) + 2 * 60px + 16px); } /* ── Two-card entry layout ──────────────────────────────── */ /* Shared card base */ .section-list__card { display: flex; align-items: center; text-decoration: none; color: inherit; transition: background .2s; cursor: pointer; } /* Left card: full-area link to the page */ .section-list__card--page { flex: 1 1 0; min-width: 0; gap: 16px; padding: 20px 16px 20px 4px; } .section-list__card--page:hover, .section-list__card--page:focus-visible { background: linear-gradient( 90deg, transparent 0%, color-mix(in srgb, var(--section-list-accent) 6%, transparent) 14%, color-mix(in srgb, var(--section-list-accent) 6%, transparent) 86%, transparent 100% ); outline: none; } .section-list__card--page:hover .section-list__entry-title, .section-list__card--page:focus-visible .section-list__entry-title { color: var(--section-list-accent); } /* Right card: Get Quote button */ .section-list__card--quote { flex: 0 0 84px; flex-direction: column; justify-content: center; gap: 8px; padding: 16px 10px; border: none; border-left: 1px solid var(--section-list-stroke); background: none; color: var(--section-list-accent); font-family: var(--font-body-coastal, 'Manrope', sans-serif); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; } .section-list__card--quote:hover, .section-list__card--quote:focus-visible { background: linear-gradient( 90deg, transparent 0%, color-mix(in srgb, var(--section-list-accent) 10%, transparent) 18%, color-mix(in srgb, var(--section-list-accent) 10%, transparent) 82%, transparent 100% ); color: var(--section-list-fg); outline: 2px solid var(--section-list-accent); outline-offset: -2px; } /* Icon / thumbnail within either card */ .section-list__card-icon { flex: 0 0 50px; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 12px; overflow: hidden; background: linear-gradient(140deg, var(--section-list-icon-bg-from), var(--section-list-icon-bg-to)); color: var(--section-list-accent); } .section-list__card-icon svg { width: 22px; height: 22px; } .section-list__card-icon--thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Quote card icon — inverted gradient, slightly smaller */ .section-list__card-icon--quote { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(140deg, var(--section-list-icon-bg-to), var(--section-list-icon-bg-from)); } .section-list__card-icon--quote svg { width: 18px; height: 18px; } .section-list__card-body { min-width: 0; flex: 1; } .section-list__card-label { display: block; line-height: 1.2; } /* ── Typography within cards ──────────────────────────── */ .section-list__entry-title { font-family: var(--font-display-coastal, 'Cormorant Garamond', serif); font-weight: 500; font-size: var(--cb-fs-xl); line-height: 1.2; letter-spacing: 0; margin: 0 0 4px; color: var(--section-list-fg); text-shadow: 0 1px 3px rgba(0, 8, 24, 0.85), 0 4px 14px rgba(0, 10, 30, 0.6); font-feature-settings: "kern" 1, "liga" 1, "dlig" 1; transition: color .2s; } .section-list__entry-body { font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.55; color: var(--section-list-muted); margin: 0; text-shadow: 0 1px 3px rgba(0, 8, 24, 0.7); } .section-list__see-all { margin: 28px 0 0; text-align: right; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; } .section-list__see-all-link { color: var(--section-list-accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--section-list-accent) 50%, transparent); padding-bottom: 2px; transition: color .2s, border-color .2s; } .section-list__see-all-link:hover, .section-list__see-all-link:focus { color: var(--section-list-fg); border-color: var(--section-list-fg); } /* Areas variant flips the icon gradient warm — matches the design's distinction between cool-coded services and warm-coded areas. */ .builder-block.section-list--areas { --section-list-icon-bg-from: rgba(255, 150, 130, 0.18); --section-list-icon-bg-to: rgba(120, 200, 255, 0.10); --section-list-accent: var(--block-accent-color, rgb(255, 200, 180)); } .builder-block.section-list--testimonials { --section-list-icon-bg-from: rgba(255, 200, 120, 0.18); --section-list-icon-bg-to: rgba(180, 140, 220, 0.10); } @media (max-width: 720px) { .section-list__card--page { padding: 16px 10px 16px 2px; gap: 12px; } .section-list__card--quote { flex: 0 0 68px; gap: 6px; padding: 12px 8px; } .section-list__card-icon { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 10px; } .section-list__card-icon svg { width: 18px; height: 18px; } .section-list__card-icon--quote { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 8px; } .section-list__entry-title { font-size: 21px; } .section-list__entry-body { font-size: 15px; } } /* ============================================================ Coastal Banner sitewide page background — ports design/Coastal Breeze Banner.html (canonical, 2341-line prototype with full layout + light/dark theme variants). Default = deep-night atmospheric (Banner.html lines 43-101). - Container `.coastal-page-bg` is position: fixed, full viewport, behind ALL content (z-index: 0; pointer-events: none). - Two image layers (breeze-blue.svg + breeze-red.svg, native viewBox 2400×1080) translate horizontally as the user scrolls. - Waves DIVERGE at center: blue → LEFT (-55%), red → RIGHT (+55%). - mix-blend-mode: screen on the dark radial surface (additive). - Layer geometry: top:0, left:-10%, width:120%, height:100% — gives the divergent motion clean reveal range without clipping. - --conv driven by total page scroll (window.scrollY divided by document.scrollHeight - innerHeight). See coastal-page-bg.htm. [data-theme="light"] override flips (Banner.html lines 1240-1283): - bg to cream paper (radial #FBF8F0 → #F7F4ED) - mix-blend-mode to multiply (subtractive on cream) - layer filter: contrast(2.15) saturate(1.28) brightness(0.88) + drop-shadow for painterly depth on the cream - bokeh + grain to multiply, cream tonality - vignette to cream radial + linear edges ============================================================ */ .coastal-page-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: radial-gradient(70% 90% at 50% 55%, var(--bg-a, #050A1A) 0%, var(--bg-b, #02060F) 75%), var(--bg-b, #02060F); isolation: isolate; --coastal-page-bg-blue-travel: -36%; --coastal-page-bg-red-travel: 36%; --coastal-page-bg-breath-duration: 260s; } /* Internal split templates: full-viewport background, 1280px content canvas. The partial renders the prototype's four-band breeze field for these pages; the .le shell still owns the constrained editorial width. */ .coastal-page-bg--internal { inset: 0; left: 0; right: 0; width: 100vw; max-width: none; transform: none; --coastal-page-bg-scroll-speed: 1; --coastal-page-bg-family-spread: 1; --coastal-page-bg-family-overlap: 40%; --coastal-page-bg-family-opacity: 0.42; --coastal-page-bg-family-filter: none; --coastal-page-bg-family-filter-light: contrast(1.30) saturate(1.05); --coastal-page-bg-family-stride: 24%; --coastal-page-bg-family-scale: 1; --coastal-page-bg-drift-duration: 220s; --coastal-page-bg-band-y: 0px; background: #02060F; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 7%, black 88%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 7%, black 88%, transparent 100%); } .coastal-page-bg--services { --coastal-page-bg-family-spread: 1; --coastal-page-bg-family-overlap: 40%; --coastal-page-bg-family-filter: none; --coastal-page-bg-family-filter-light: contrast(1.30) saturate(1.05); } .coastal-page-bg--areas { --coastal-page-bg-family-spread: 1.4; --coastal-page-bg-family-overlap: 48%; --coastal-page-bg-family-filter: hue-rotate(-14deg) saturate(0.94); --coastal-page-bg-family-filter-light: contrast(1.30) saturate(1.05) hue-rotate(-14deg) saturate(0.94); } .coastal-page-bg--casestudies { --coastal-page-bg-family-spread: 1.4; --coastal-page-bg-family-overlap: 48%; --coastal-page-bg-family-opacity: 0.30; --coastal-page-bg-family-filter: hue-rotate(-8deg) saturate(0.88); --coastal-page-bg-family-filter-light: contrast(1.30) saturate(1.05) hue-rotate(-8deg) saturate(0.88); } .coastal-page-bg--effect-crossflow { --coastal-page-bg-scroll-speed: 0.28; --coastal-page-bg-family-scale: 1; --coastal-page-bg-drift-duration: 220s; } .coastal-page-bg--effect-wind-shear { --coastal-page-bg-scroll-speed: 0.24; --coastal-page-bg-family-spread: 0.88; --coastal-page-bg-family-overlap: 48%; --coastal-page-bg-family-scale: 1.002; --coastal-page-bg-family-stride: 24%; --coastal-page-bg-family-filter: hue-rotate(-14deg) saturate(0.94); --coastal-page-bg-family-filter-light: contrast(1.30) saturate(1.05) hue-rotate(-14deg) saturate(0.94); --coastal-page-bg-drift-duration: 250s; } .coastal-page-bg--effect-archive-dial { --coastal-page-bg-scroll-speed: 0.22; --coastal-page-bg-family-spread: 0.82; --coastal-page-bg-family-overlap: 48%; --coastal-page-bg-family-opacity: 0.30; --coastal-page-bg-family-scale: 1.002; --coastal-page-bg-family-stride: 25%; --coastal-page-bg-family-filter: hue-rotate(-8deg) saturate(0.88); --coastal-page-bg-family-filter-light: contrast(1.30) saturate(1.05) hue-rotate(-8deg) saturate(0.88); --coastal-page-bg-drift-duration: 280s; } /* Light theme — cream limewash-paper surface. */ :root[data-theme="light"] .coastal-page-bg, .cb-role-force-light .coastal-page-bg { background: radial-gradient(70% 90% at 50% 55%, #FBF8F0 0%, #F7F4ED 75%), #F7F4ED; } :root[data-theme="light"] .coastal-page-bg--internal, .cb-role-force-light .coastal-page-bg--internal { --coastal-page-bg-family-opacity: 0.32; background: #F4EFE2; } :root[data-theme="light"] .coastal-page-bg--casestudies, .cb-role-force-light .coastal-page-bg--casestudies { --coastal-page-bg-family-opacity: 0.22; } /* Home wrapper has-coastal-page-bg lifts content above the fixed bg */ .has-coastal-page-bg { position: relative; z-index: 1; } /* Layer geometry starts from Banner.html, with the scroll throw softened for a slower Gulf-tide feel instead of a mechanical sweep. */ .coastal-page-bg__layer { position: absolute; top: 0; left: -10%; height: 100%; width: 120%; pointer-events: none; will-change: transform; /* Fade layer left/right edges to transparent. The SVG's own l-fade gradient (opacity 0 at x=0 and x=100%) is clipped off-screen at narrow/tall viewports by preserveAspectRatio="xMidYMid slice"; CSS object-fit cannot override SVG's internal attribute in Chrome. This mask re-applies the fade at the layer-div level so that whenever translation brings a layer edge into viewport, it dissolves rather than cutting hard. 12% ≈ 127px at 1057px layer width. */ -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%); opacity: var(--coastal-page-bg-layer-opacity, 1); filter: var(--coastal-page-bg-layer-filter, none); } .coastal-page-bg__layer img { width: 100%; height: 100%; display: block; } .coastal-page-bg__layer--blue { mix-blend-mode: screen; transform: translateX(calc(var(--conv, 0) * var(--coastal-page-bg-blue-travel, -36%))); } .coastal-page-bg__layer--red { mix-blend-mode: screen; transform: translateX(calc(var(--conv, 0) * var(--coastal-page-bg-red-travel, 36%))); } .coastal-page-bg:not(.coastal-page-bg--internal) .coastal-page-bg__layer img { transform-origin: center; animation: coastal-home-breath var(--coastal-page-bg-breath-duration, 260s) ease-in-out infinite alternate; will-change: transform; } .coastal-page-bg:not(.coastal-page-bg--internal) .coastal-page-bg__layer--red img { animation-delay: -37s; } @keyframes coastal-home-breath { 0% { transform: translate3d(-0.04%, -0.05%, 0) scale(1.0005); } 48% { transform: translate3d(0.03%, 0.04%, 0) scale(1.0012); } 100% { transform: translate3d(0.05%, -0.03%, 0) scale(1.0008); } } .coastal-page-bg--internal .coastal-page-bg__band { position: absolute; left: 0; right: 0; top: calc(var(--i) * var(--coastal-page-bg-family-stride, 24%)); height: var(--coastal-page-bg-family-overlap, 40%); overflow: hidden; will-change: transform; animation: coastal-bg-band-drift var(--coastal-page-bg-drift-duration, 220s) ease-in-out infinite alternate; animation-delay: calc(var(--i) * -4s); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%); } .coastal-page-bg--internal .coastal-page-bg__band:nth-child(2) { --coastal-page-bg-band-y: -1px; } .coastal-page-bg--internal .coastal-page-bg__band:nth-child(3) { --coastal-page-bg-band-y: 1px; } .coastal-page-bg--internal .coastal-page-bg__band:nth-child(4) { --coastal-page-bg-band-y: -1px; } .coastal-page-bg--effect-wind-shear .coastal-page-bg__band:nth-child(2) { --coastal-page-bg-band-y: -1px; } .coastal-page-bg--effect-wind-shear .coastal-page-bg__band:nth-child(3) { --coastal-page-bg-band-y: 1px; } .coastal-page-bg--effect-archive-dial .coastal-page-bg__band:nth-child(2) { --coastal-page-bg-band-y: 1px; } .coastal-page-bg--effect-archive-dial .coastal-page-bg__band:nth-child(3) { --coastal-page-bg-band-y: -1px; } @keyframes coastal-bg-band-drift { from { transform: translate3d(0, calc(var(--coastal-page-bg-band-y, 0px) * -0.35), 0); } to { transform: translate3d(0, calc(var(--coastal-page-bg-band-y, 0px) * 0.35), 0); } } .coastal-page-bg--internal .coastal-page-bg__layer { inset: 0; left: 0; width: auto; height: auto; opacity: var(--coastal-page-bg-family-opacity, 0.42); filter: var(--coastal-page-bg-family-filter, none); -webkit-mask-image: none; mask-image: none; transform: none; } .coastal-page-bg--internal .coastal-page-bg__layer img { position: absolute; top: 0; left: -10%; width: 120%; height: 100%; object-fit: cover; object-position: center; } .coastal-page-bg--internal .coastal-page-bg__layer--red { opacity: calc(var(--coastal-page-bg-family-opacity, 0.42) * 0.82); } .coastal-page-bg--internal .coastal-page-bg__layer--blue img { transform: translateX(calc((-3% - var(--i) * 5%) * var(--coastal-page-bg-family-spread, 1) * var(--conv, 1))) translateY(var(--coastal-page-bg-band-y, 0px)) scale(var(--coastal-page-bg-family-scale, 1)); } .coastal-page-bg--internal .coastal-page-bg__layer--red img { transform: translateX(calc((3% + var(--i) * 5%) * var(--coastal-page-bg-family-spread, 1) * var(--conv, 1))) translateY(calc(var(--coastal-page-bg-band-y, 0px) * -1)) scale(var(--coastal-page-bg-family-scale, 1)); } .coastal-page-bg--internal .coastal-page-bg__bokeh, .coastal-page-bg--internal .coastal-page-bg__vignette { display: none; } .coastal-page-bg--internal .coastal-page-bg__grain { background-size: 540px 540px; z-index: 3; opacity: 0.07; } :root[data-theme="light"] .coastal-page-bg--internal .coastal-page-bg__grain, .cb-role-force-light .coastal-page-bg--internal .coastal-page-bg__grain { opacity: 0.13; } :root[data-theme="light"] .coastal-page-bg__layer--blue, :root[data-theme="light"] .coastal-page-bg__layer--red, .cb-role-force-light .coastal-page-bg__layer--blue, .cb-role-force-light .coastal-page-bg__layer--red { mix-blend-mode: multiply; opacity: var(--coastal-page-bg-layer-opacity-light, 1); filter: var(--coastal-page-bg-layer-filter-light, contrast(2.15) saturate(1.28) brightness(0.88) drop-shadow(0 1px 3px rgba(20, 30, 60, 0.12))); } :root[data-theme="light"] .coastal-page-bg--internal .coastal-page-bg__layer, .cb-role-force-light .coastal-page-bg--internal .coastal-page-bg__layer { opacity: var(--coastal-page-bg-family-opacity, 0.32); filter: var(--coastal-page-bg-family-filter-light, contrast(1.30) saturate(1.05)); } :root[data-theme="light"] .coastal-page-bg--internal .coastal-page-bg__layer--red, .cb-role-force-light .coastal-page-bg--internal .coastal-page-bg__layer--red { opacity: calc(var(--coastal-page-bg-family-opacity, 0.32) * 0.82); } /* Bokeh particle field — subtle cyan/coral starlight (Banner.html lines 67-86) */ .coastal-page-bg__bokeh { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(2px 2px at 14% 22%, rgba(150, 220, 255, 0.55), transparent 60%), radial-gradient(2px 2px at 6% 64%, rgba(150, 220, 255, 0.40), transparent 60%), radial-gradient(1.5px 1.5px at 22% 78%, rgba(150, 220, 255, 0.50), transparent 60%), radial-gradient(1px 1px at 10% 38%, rgba(150, 220, 255, 0.55), transparent 70%), radial-gradient(2px 2px at 18% 12%, rgba(150, 220, 255, 0.35), transparent 60%), radial-gradient(1.5px 1.5px at 4% 86%, rgba(150, 220, 255, 0.40), transparent 60%), radial-gradient(1px 1px at 24% 48%, rgba(150, 220, 255, 0.60), transparent 70%), radial-gradient(2px 2px at 84% 18%, rgba(255, 180, 160, 0.50), transparent 60%), radial-gradient(1.5px 1.5px at 92% 56%, rgba(255, 180, 160, 0.45), transparent 60%), radial-gradient(1px 1px at 78% 78%, rgba(255, 180, 160, 0.55), transparent 70%), radial-gradient(2px 2px at 88% 38%, rgba(255, 180, 160, 0.35), transparent 60%), radial-gradient(1.5px 1.5px at 96% 28%, rgba(255, 180, 160, 0.40), transparent 60%), radial-gradient(1px 1px at 80% 68%, rgba(255, 180, 160, 0.55), transparent 70%); mix-blend-mode: screen; opacity: 0.85; } :root[data-theme="light"] .coastal-page-bg__bokeh, .cb-role-force-light .coastal-page-bg__bokeh { mix-blend-mode: multiply; opacity: 0.55; filter: contrast(1.4) saturate(1.15); } /* Paper grain — screen on dark, multiply on cream (Banner.html lines 87-94) */ .coastal-page-bg__grain { position: absolute; inset: 0; z-index: 3; background-size: 520px 520px; background-repeat: repeat; mix-blend-mode: screen; opacity: 0.05; pointer-events: none; } :root[data-theme="light"] .coastal-page-bg__grain, .cb-role-force-light .coastal-page-bg__grain { mix-blend-mode: multiply; opacity: 0.09; } /* Vignette — dark center radial + edge linear (Banner.html lines 95-101) */ .coastal-page-bg__vignette { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(45% 55% at 50% 55%, rgba(0, 2, 6, 0.55) 0%, transparent 75%), linear-gradient(180deg, rgba(0, 2, 6, 0.30) 0%, transparent 12%, transparent 88%, rgba(0, 2, 6, 0.50) 100%); } :root[data-theme="light"] .coastal-page-bg__vignette, .cb-role-force-light .coastal-page-bg__vignette { background: radial-gradient(45% 55% at 50% 55%, rgba(255, 248, 232, 0.30) 0%, transparent 75%), linear-gradient(180deg, rgba(255, 248, 232, 0.20) 0%, transparent 12%, transparent 88%, rgba(200, 175, 130, 0.20) 100%); } /* Section-list banner-dark variant — for sections sitting on the coastal-page-bg deep-night backdrop. Ports the dark-card visual treatment from design/Coastal Breeze Banner.html lines 791-813. */ .section-list--appearance-banner-dark { --block-heading-color: rgb(240, 248, 255); --block-body-color: rgb(216, 228, 244); --block-muted-color: rgb(198, 216, 238); --block-accent-color: rgb(190, 226, 255); --block-surface-color: rgba(8, 18, 36, 0.22); --block-stroke-color: rgba(190, 220, 250, 0.14); } .section-list--appearance-banner-dark .section-list__entry { background: var(--block-surface-color); border: 1px solid var(--block-stroke-color); border-radius: 14px; overflow: hidden; backdrop-filter: blur(2px); } .section-list--appearance-banner-dark .section-list__entry:focus-within { border-color: rgba(190, 226, 255, 0.35); } .section-list--appearance-banner-dark .section-list__card--page:hover, .section-list--appearance-banner-dark .section-list__card--page:focus-visible { background: linear-gradient(90deg, transparent 0%, rgba(8, 18, 36, 0.20) 14%, rgba(8, 18, 36, 0.20) 86%, transparent 100%); } .section-list--appearance-banner-dark .section-list__card--quote:hover, .section-list--appearance-banner-dark .section-list__card--quote:focus-visible { background: linear-gradient(90deg, transparent 0%, rgba(8, 18, 36, 0.28) 18%, rgba(8, 18, 36, 0.28) 82%, transparent 100%); } .section-list--appearance-banner-dark .section-list__card-icon { background: linear-gradient(140deg, rgba(120, 200, 255, 0.20), rgba(255, 150, 130, 0.12)); color: var(--block-accent-color); border-radius: 12px; } .section-list--appearance-banner-dark .section-list__card-icon--quote { background: linear-gradient(140deg, rgba(255, 150, 130, 0.12), rgba(120, 200, 255, 0.20)); border-radius: 10px; } /* Reduced-motion respect — disable the parallax transform so users with vestibular sensitivity don't get layered shift. */ @media (prefers-reduced-motion: reduce) { .coastal-page-bg__layer--blue, .coastal-page-bg__layer--red { transform: none; } .coastal-page-bg:not(.coastal-page-bg--internal) .coastal-page-bg__layer img { animation: none !important; transform: none !important; } .coastal-page-bg--internal .coastal-page-bg__band { animation: none !important; } } /* Mobile parallax — REMOVED in favor of prototype parity. Prior to this, the layer translation softened from ±55% → ±25% at ≤768px and the overflow margin from 10% → 5%. design/Coastal Breeze Banner.html keeps full ±55% / 10% across every viewport; restoring that for an exact match. The .coastal-page-bg wrapper is overflow: hidden so the excess translation is clipped, not visible as horizontal scroll. If mobile jitter resurfaces, prefer reducing the layer transition duration or transform-origin tweaks over re-introducing responsive-breakpoint overrides that diverge from the design. */ /* ============================================================ banner-dark variant — escape the section catchall. The wrapper-section catchall at L2736 wraps every block in a white card surface. Banner-dark blocks need the page-bg to show through, so we override the wrapper-level surface to transparent and reassert light text colors above the wrapper's heading/body color cascade. Higher specificity (4 classes vs catchall's 5 classes 1 element) — so we add `.builder-blocks` prefix to get specificity (0,5,1) which still loses to the catchall (0,5,2 with h2). Use class-only chain plus the explicit element to match the catchall's element-specific rules. ============================================================ */ .builder-blocks > .block-wrapper > section.section-list--appearance-banner-dark, .builder-blocks > .block-wrapper > section.category-strip--appearance-banner-dark { background: transparent !important; border: none !important; box-shadow: none !important; --block-heading-color: rgb(240, 248, 255); --block-body-color: rgb(216, 228, 244); --block-muted-color: rgb(198, 216, 238); --block-accent-color: rgb(190, 226, 255); } .builder-blocks > .block-wrapper > section.section-list--appearance-banner-dark h2, .builder-blocks > .block-wrapper > section.section-list--appearance-banner-dark h3, .builder-blocks > .block-wrapper > section.category-strip--appearance-banner-dark h2, .builder-blocks > .block-wrapper > section.category-strip--appearance-banner-dark h3 { color: rgb(240, 248, 255) !important; text-shadow: 0 2px 6px rgba(0, 8, 24, 0.85), 0 8px 24px rgba(0, 10, 30, 0.55); } .builder-blocks > .block-wrapper > section.section-list--appearance-banner-dark p, .builder-blocks > .block-wrapper > section.section-list--appearance-banner-dark li, .builder-blocks > .block-wrapper > section.category-strip--appearance-banner-dark p, .builder-blocks > .block-wrapper > section.category-strip--appearance-banner-dark li { color: rgb(216, 228, 244) !important; text-shadow: 0 1px 3px rgba(0, 8, 24, 0.7); } /* category-strip in banner-dark — pills with dark glass effect */ .category-strip--appearance-banner-dark { background: rgba(8, 18, 36, 0.45); border: 1px solid rgba(190, 220, 250, 0.10); /* border-radius: 999px; */ backdrop-filter: blur(8px); } .category-strip--appearance-banner-dark .category-strip__label { color: rgb(190, 226, 255); text-shadow: 0 1px 3px rgba(0, 8, 24, 0.7); } .category-strip--appearance-banner-dark .category-strip__link { color: rgb(232, 244, 255); text-shadow: 0 1px 3px rgba(0, 8, 24, 0.7); } .category-strip--appearance-banner-dark .category-strip__link:hover { color: rgb(190, 226, 255); } /* ============================================================ HOME PAGE STRUCTURAL WRAPPERS Mirrors prototype design/Coastal Breeze Banner.html: .content-area lines 518-524 (negative margin trick) .post-area lines 990-1021 (third sticky strip) areas strip lines 548-551 (fixed + JS positioning) ============================================================ */ /* Home page: parallax hero manages its own top offset for the nav. The generic site-content rule adds padding-top:120px for non-hero pages. We zero it here so the hero starts at y=0 and the -126px content-area margin produces the correct strip stacking geometry (services strip at viewport bottom, 6px above areas strip preview). */ .site-content:has(.home-page) { padding-top: 0 !important; } /* Content-area: pulls the services strip + sections UP so the services strip appears at the hero's bottom edge on page load instead of stacked below it. Negative margin = 2 strips + 6px gap. No z-index here: omitting it dissolves this stacking context so that the services-strip wrapper (z-35) participates directly in the root context and correctly outranks the areas strip (fixed, z-34 root). */ .home-content-area { position: relative; } /* Services strip: sticky at nav bottom, full page scope (sits in .builder-page). box-shadow bridges the 1px compositing gap between adjacent blur surfaces. .builder-page prefix raises specificity to beat .block-wrapper+.block-wrapper (0,2,0). */ .builder-page .home-services-strip-wrapper { position: relative; top: auto; z-index: auto; box-shadow: none; margin-top: calc(-2 * var(--category-strip-h, 60px)); } /* Areas strip is now DOM-mounted (position:sticky, in-flow) so no strip-clearance padding needed — zeroed. Heading carries the rhythm. */ .home-areas-section .section-list-block, .home-areas-section .builder-block { padding-top: 0; } /* Post-area: relative scope for the sticky third strip. */ .home-post-area { position: relative; z-index: 5; } /* Third sticky nav strip — "On this page" jump-links for Promise → FAQ sections. Prototype lines 992-1021. margin-top: -1px overlaps the services-strip's bottom edge by one pixel so the two adjacent backdrop-filter:blur() surfaces appear continuous (without the overlap, the compositing-layer boundary leaves a faint hairline seam). Paired with the +1px box-shadow on the services-strip wrapper above, this guarantees a clean join in both directions. */ .home-post-strip { position: fixed; top: var(--nav-h, 136px); left: 0; right: 0; z-index: 34; height: 60px; display: flex; align-items: center; padding: 0 56px; background: rgba(8, 18, 36, 0.42); border-top: 1px solid rgba(190, 220, 250, 0.18); border-bottom: 1px solid rgba(190, 220, 250, 0.18); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); transform: translateY(-100%); opacity: 0; pointer-events: none; transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.25s ease; } .home-post-strip.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; } .home-post-strip__home-link { text-decoration: none; } .home-post-strip__label { flex: 0 0 auto; font-size: 12px; letter-spacing: 0.30em; text-transform: uppercase; color: var(--brand-cyan-soft, rgb(190, 230, 255)); padding-right: 22px; border-right: 1px solid rgba(190, 220, 250, 0.24); white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 10, 30, 0.90); } .home-post-strip__items { list-style: none; margin: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 4px 22px; padding-left: 22px; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .home-post-strip__items::-webkit-scrollbar { display: none; } .home-post-strip__items li { margin: 0; flex: 0 0 auto; display: flex; align-items: center; } /* Hairline separator between strip entries */ .home-post-strip__items li + li::before { content: ''; display: block; flex-shrink: 0; width: 1px; height: 12px; background: rgba(190, 220, 250, 0.28); margin-right: 22px; } .home-post-strip__items a { color: rgba(200, 220, 245, 0.55) !important; text-decoration: none; display: inline-flex; align-items: center; padding: 18px 0; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 10, 30, 0.90); transition: color .2s; position: relative; } .home-post-strip__items a:hover { color: rgb(190, 226, 255) !important; } .home-post-strip__items a.active { color: var(--brand-cyan, rgb(140, 220, 255)) !important; font-weight: 600; } .home-post-strip__items a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--brand-cyan, rgb(140, 220, 255)), transparent); box-shadow: 0 0 8px rgba(140, 220, 255, 0.7); } /* Areas strip: static, scrolls with content. */ .home-areas-strip { position: relative; top: auto; z-index: auto; height: 60px; display: flex; align-items: center; padding: 0 56px; background: rgba(4, 10, 24, 0.32); border-top: 1px solid rgba(190, 220, 250, 0.18); border-bottom: 1px solid rgba(190, 220, 250, 0.18); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); } .home-areas-strip__label { flex: 0 0 auto; font-size: 12px; letter-spacing: 0.30em; text-transform: uppercase; color: rgb(255, 200, 180); /* warm tint for areas — matches .strip-row.areas in prototype */ padding-right: 22px; border-right: 1px solid rgba(190, 220, 250, 0.24); white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 10, 30, 0.90); } .home-areas-strip .category-strip__items { max-height: 60px; flex: 1 1 auto; justify-content: flex-start; } @media (max-width: 1100px) { .home-post-strip, .home-areas-strip { padding: 0 24px; } .home-post-strip__label, .home-areas-strip__label { font-size: 11px; padding-right: 14px; } .home-post-strip__items { padding-left: 14px; font-size: 12px; gap: 4px 14px; } } @media (prefers-reduced-motion: reduce) { .home-areas-strip { transition: none; } } /* ─── Strip overflow ellipsis overlay ─────────────────────── .is-clipped is added by JS when scrollWidth > clientWidth. .category-strip and .home-post-strip get position:relative so ::after can sit inside them. .home-areas-strip is position:fixed — fixed/sticky elements are already containing blocks, so no position:relative (which would break fixed). */ .builder-block.category-strip.is-clipped, .home-post-strip.is-clipped { position: relative; } .builder-block.category-strip.is-clipped::after, .home-post-strip.is-clipped::after, .home-areas-strip.is-clipped::after { content: '…'; position: absolute; right: 0; top: 0; bottom: 0; padding: 0 56px 0 2.5rem; display: flex; align-items: center; background: linear-gradient(to right, transparent, rgba(4,10,24,0.92) 45%); color: rgba(190, 220, 250, 0.50); pointer-events: none; font-size: 13px; letter-spacing: 0; font-weight: 400; } .home-post-strip.is-clipped::after { background: linear-gradient(to right, transparent, rgba(8, 18, 36, 0.95) 45%); } @media (max-width: 1100px) { .builder-block.category-strip.is-clipped::after, .home-post-strip.is-clipped::after, .home-areas-strip.is-clipped::after { padding-right: 24px; } } /* ============================================================ OPENTYPE TYPOGRAPHY FEATURES Ports prototype Banner.html lines 46-68. Applies to all Cormorant Garamond display headings sitewide. - "dlig": discretionary ligatures (fi/fl/ffi) on display type - "swsh": italic swash alternates on within headings - "onum": old-style figures in italic editorial contexts Tabular numerics applied to phone/price elements in theme.css. ============================================================ */ /* All Cormorant display headings — kern + liga already in theme.css body rule; dlig adds discretionary fi/fl/ffi ligatures specific to Cormorant. */ .parallax-hero__title, .section-list__title, .section-list__entry-title { font-feature-settings: "kern" 1, "liga" 1, "dlig" 1; } /* Em within headings — adds swash italic alternates (Cormorant's ∫-like swash on 'f', 'k', etc. in italic weight). Already applied inline on the elements above; this shared rule serves any future heading elements. */ .parallax-hero__title em, .section-list__title em { font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "swsh" 1; } /* ============================================================ HOME PAGE SECTION EDGE WASHES Ports prototype .section-services::before / .section-areas::before (Banner.html lines 606-635). Horizontal gradient: brand-blue tint on left edge, coral tint on right edge, transparent center. Areas section is darker/more saturated than services. ============================================================ */ #home-services { position: relative; } #home-services::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(10, 40, 90, 0.55) 0%, rgba(10, 40, 90, 0.30) 14%, rgba(35, 50, 90, 0.10) 32%, rgba(80, 35, 50, 0.10) 68%, rgba(140, 40, 30, 0.30) 86%, rgba(140, 40, 30, 0.55) 100%); } #home-areas { position: relative; } #home-areas::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(6, 26, 60, 0.70) 0%, rgba(6, 26, 60, 0.40) 14%, rgba(35, 50, 90, 0.20) 32%, rgba(80, 35, 50, 0.20) 68%, rgba(150, 50, 40, 0.40) 86%, rgba(150, 50, 40, 0.70) 100%); } /* Scroll-margin: when jumping to these anchors, stop below all docked strips. Services: nav + services-strip + 12px gap. Areas: nav + services-strip + areas-strip + 12px gap. */ #home-services { scroll-margin-top: calc(var(--nav-h, 136px) + 60px + 12px); } #home-areas { scroll-margin-top: calc(var(--nav-h, 136px) + 2 * 60px + 12px); margin-top: 0; } /* Services section sits directly under its sticky strip — suppress the generic .block-wrapper + .block-wrapper gap that would otherwise open dead space between the strip bottom and the section. */ #home-services { margin-top: 0; } /* Consistent breathing room between strip bottom and first content line, shared by both home list sections. Lives on the title so it naturally accounts for the in-flow strip height without needing outer padding. */ #home-services .section-list__title, #home-areas .section-list__title { padding-top: clamp(2rem, 4vw, 3rem); } #home-areas .section-list__title { padding-top: 5rem; } /* ============================================================ HOME POST-AREA SECTIONS ============================================================ Ports prototype Banner.html lines 681–998 — the `.section-generic` block family covering Promise, Why Us, Process, Reviews, Plans, Expertise, Contact, and FAQ. Each lives under a `#home-post-{N}` wrapper in the home page's post-area, rendered by an existing block type (headline_block / features_grid / testimonials / pricing_table / paragraph_block / call_to_action / faq_block) with no schema changes — we override only the visual treatment. Layout: sort=6 #home-post-1 → why us (features_grid 3-col) sort=7 #home-post-2 → promise / trust strip (headline_block subtitle, split on ·) sort=8 #home-post-3 → process (features_grid 3-col, numbered) sort=9 #home-post-4 → reviews (testimonials) sort=10 #home-post-5 → plans (pricing_table) sort=11 #home-post-6 → expertise (paragraph_block, 2-col body) sort=12 #home-post-7 → contact (call_to_action — phone + form CTAs) sort=13 #home-post-8 → faq (faq_block accordion) ============================================================ */ /* Shared `.section-generic` rhythm for every post-area block wrapper. Prototype: .section-generic { padding: 60px 0; position: relative; z-index: 5 } */ .home-post-area > .block-wrapper[id^="home-post-"] { position: relative; z-index: 5; /* padding: 60px 0; */ } /* Token overrides — applied directly to the inner .builder-block so they beat the testimonials-block--cards / pricing-table-block--palette-* rules that set their own --block-body-color / heading-color. Specificity is intentionally raised by chaining the wrapper id with the inner class. */ .home-post-area .block-wrapper[id^="home-post-"] .builder-block, .home-post-area .block-wrapper[id^="home-post-"] .builder-block.testimonials-block, .home-post-area .block-wrapper[id^="home-post-"] .builder-block.testimonials-block--cards, .home-post-area .block-wrapper[id^="home-post-"] .builder-block.testimonials-block--carousel, .home-post-area .block-wrapper[id^="home-post-"] .builder-block.testimonials-block--grid, .home-post-area .block-wrapper[id^="home-post-"] .builder-block.pricing-table-block, .home-post-area .block-wrapper[id^="home-post-"] .builder-block.pricing-table-block[class*="palette-"], .home-post-area .block-wrapper[id^="home-post-"] .builder-block.faq-block, .home-post-area .block-wrapper[id^="home-post-"] .builder-block.features-grid-block, .home-post-area .block-wrapper[id^="home-post-"] .builder-block.paragraph-block, .home-post-area .block-wrapper[id^="home-post-"] .builder-block.headline-block, .home-post-area .block-wrapper[id^="home-post-"] .builder-block.call-to-action-block { --block-body-color: rgb(216, 228, 244); --block-heading-color: rgb(240, 248, 255); --block-muted-color: rgb(190, 220, 250); --block-accent-color: rgb(190, 226, 255); --block-stroke-color: rgba(190, 220, 250, 0.18); --block-surface-color: rgba(8, 18, 36, 0.22); --block-background-color: transparent; --text-color: rgb(232, 244, 255); --primary-color: rgb(120, 200, 255); background: transparent; color: rgb(232, 244, 255); } /* Section itself: full viewport width (matching services/areas sections). Containers inside handle their own max-width. */ .home-post-area > .block-wrapper[id^="home-post-"] > section { max-width: none; width: 100%; } .home-post-area > .block-wrapper[id^="home-post-"] > section > .container, .home-post-area > .block-wrapper[id^="home-post-"] > section > .luxury-container-airy { max-width: var(--content-max-width, 1200px); margin: 0 auto; padding-left: var(--content-pad-x, 10px); padding-right: var(--content-pad-x, 10px); } /* Shared display-typography for eyebrow / h2 / lede — prototype lines 684–709. The !important defeats theme.css's `.luxury-text-hero { font-family/size: ... !important }` which sets the wrong (Playfair 4.2rem) values for every block H2. */ .home-post-area .builder-block h2, .home-post-area .builder-block .features-grid-block__title, .home-post-area .builder-block .testimonials-block__title, .home-post-area .builder-block .pricing-table-block__title, .home-post-area .builder-block .paragraph-block__title, .home-post-area .builder-block .call-to-action-block__title, .home-post-area .builder-block .faq-block__title, .home-post-area .builder-block .headline-block__main-title, .home-post-area .builder-block .headline-block__title, .home-post-area .builder-block .luxury-text-hero { font-family: 'Cormorant Garamond', serif !important; font-weight: 400 !important; font-size: clamp(30px, 3.4vw, 48px) !important; line-height: 1.06 !important; margin: 0 0 18px; color: rgb(240, 248, 255); text-shadow: 0 2px 6px rgba(0, 8, 24, 0.85), 0 8px 36px rgba(0, 10, 30, 0.6); letter-spacing: -0.008em !important; text-align: left; font-feature-settings: "kern" 1, "liga" 1, "dlig" 1; } .home-post-area .builder-block h2 em, .home-post-area .builder-block h3 em { font-style: italic; font-weight: 500; background: linear-gradient(110deg, rgb(180, 220, 255), rgb(255, 170, 150)); -webkit-background-clip: text; background-clip: text; color: transparent; font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "swsh" 1; } /* Subtitle / intro / description = the .add-lede style */ .home-post-area .features-grid-block__subtitle, .home-post-area .testimonials-block__header p, .home-post-area .pricing-table-block__subtitle, .home-post-area .call-to-action-block__description, .home-post-area .faq-block__intro, .home-post-area .headline-block__subtitle, .home-post-area .headline-block__main-subtitle { font-family: 'Manrope', sans-serif; font-size: 17px; line-height: 1.65; color: rgb(216, 228, 244); margin: 0 0 30px; max-width: initial; text-wrap: pretty; text-shadow: 0 1px 4px rgba(0, 8, 24, 0.85); text-align: left; font-weight: 400; } /* Center any text-center directives the block partials emit (.text-center, .features-grid-block__header.text-center). Prototype keeps everything left-aligned in the post-area. */ .home-post-area .builder-block .text-center { text-align: left !important; } /* ---------- 1. PROMISE (#home-post-2, headline_block) ---------- */ /* The headline_block subtitle carries the trust strip tokens split on · by headline-block.htm. Tokens: 24/7 Dispatch · 0% Financing · NATE Certified · Factory Authorized · Family-owned est. 2012 Icons injected per nth-child via FA Unicode ::after. */ #home-post-2 .headline-block__title { display: none; } /* Zero out all three layers of vertical space around the trust strip: (1) .home-post-area rule gives the wrapper 60px padding + 40px margin-top (2) .block-wrapper > section rule uses !important — match it */ #home-post-2 { padding-top: 0; padding-bottom: 0; margin-top: 0; } /* Trust strip busts all editorial max-width constraints — it spans full viewport. The home-post-area rule applies max-width:720px to > section (L7389). #home-post-2 .headline-block beats it on specificity (ID wins). */ #home-post-2 .headline-block { padding: 0 !important; max-width: none; width: 100%; } #home-post-2 .container, #home-post-2 .headline-block__simple { max-width: none; width: 100%; padding-left: 0; padding-right: 0; } #home-post-2 .headline-block__subtitle { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0; padding: 0; border: none; border-top: 1px solid rgba(190, 220, 250, 0.18); border-bottom: 1px solid rgba(190, 220, 250, 0.18); border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; margin: 0; max-width: none; text-align: center; text-shadow: 0 1px 3px rgba(0, 8, 24, 0.85); } /* Each trust token */ #home-post-2 .headline-block__trust-token { display: flex; align-items: center; gap: 7px; padding: 16px 28px; color: rgb(190, 220, 255); font-family: var(--font-utility, 'Manrope', sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; position: relative; } /* Vertical separator between tokens */ #home-post-2 .headline-block__trust-token + .headline-block__trust-token::before { content: ''; display: block; position: absolute; left: 0; top: 20%; height: 60%; width: 1px; background: rgba(190, 220, 250, 0.22); } /* FA icon per token */ #home-post-2 .headline-block__trust-token::after { font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 13px; opacity: 0.70; order: -1; flex-shrink: 0; } #home-post-2 .headline-block__trust-token:nth-child(1)::after { content: '\f590'; /* fa-headset — 24/7 Dispatch */ } #home-post-2 .headline-block__trust-token:nth-child(2)::after { content: '\f155'; /* fa-dollar-sign — 0% Financing */ } #home-post-2 .headline-block__trust-token:nth-child(3)::after { content: '\f559'; /* fa-award — NATE Certified */ } #home-post-2 .headline-block__trust-token:nth-child(4)::after { content: '\f0a3'; /* fa-certificate — Factory Authorized */ } #home-post-2 .headline-block__trust-token:nth-child(5)::after { content: '\f015'; /* fa-house — Family-owned */ } /* ---------- 2 + 3. WHY US + PROCESS (features_grid) ---------- */ /* Reshape features_grid into the dark-glass card grid. Prototype: .why-grid (lines 841–864) for #home-post-2 and .process-grid (lines 733–754) for #home-post-3. */ #home-post-2 .features-grid-block, #home-post-3 .features-grid-block { background: transparent; padding: 0; } #home-post-1 .features-grid-block__grid, #home-post-2 .features-grid-block__grid, #home-post-3 .features-grid-block__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } #home-post-3 .features-grid-block__grid { gap: 22px; counter-reset: process-step; } #home-post-3 .service-card { counter-increment: process-step; } #home-post-1 .service-card, #home-post-2 .service-card { padding: 24px; border: 1px solid rgba(190, 220, 250, 0.14); border-radius: 14px; background: rgba(8, 18, 36, 0.22); backdrop-filter: blur(10px) saturate(135%); -webkit-backdrop-filter: blur(10px) saturate(135%); } #home-post-3 .service-card { padding: 20px 15px; background: transparent; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; } #home-post-1 .service-card__icon-wrapper, #home-post-1 .service-card__icon, #home-post-2 .service-card__icon-wrapper, #home-post-2 .service-card__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(140deg, rgba(120, 200, 255, 0.22), rgba(35, 61, 127, 0.20)); color: rgb(190, 226, 255); margin-bottom: 14px; padding: 0; } #home-post-1 .service-card__icon-wrapper .service-card__icon, #home-post-2 .service-card__icon-wrapper .service-card__icon { background: transparent; width: 100%; height: 100%; margin: 0; } #home-post-1 .service-card__icon i, #home-post-2 .service-card__icon i, #home-post-3 .service-card__icon i { font-size: 22px; line-height: 1; } /* Prototype .process-step has NO icon — only a gradient numeral. Hide the features_grid icon for #home-post-3; the ::before counter becomes the visual marker. */ #home-post-3 .service-card__icon-wrapper, #home-post-3 .service-card__icon { display: none; } #home-post-1 .service-card__title, #home-post-2 .service-card__title, #home-post-3 .service-card__title { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 10px; color: rgb(180, 210, 240); text-shadow: 0 1px 3px rgba(0, 8, 24, 0.85); text-align: left; } #home-post-1 .service-card__description, #home-post-2 .service-card__description, #home-post-3 .service-card__description { font-family: var(--font-body); font-style: normal; font-weight: 400; font-size: var(--cb-fs-base); /* 16px — functional feature copy */ line-height: 1.6; color: rgb(216, 228, 244); margin: 0; text-shadow: 0 1px 3px rgba(0, 8, 24, 0.7); } #home-post-1 .service-card__description, #home-post-2 .service-card__description { margin: 0 0 12px; } #home-post-3 .service-card::before { content: counter(process-step, decimal-leading-zero); display: block; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400; font-size: 38px; line-height: 1; margin-bottom: 14px; background: linear-gradient(110deg, rgb(180, 220, 255), rgb(120, 160, 230)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- 4. REVIEWS (#home-post-4, testimonials) ---------- */ /* Prototype .reviews-grid + .review (lines 766–782). 2-col cards with italic Cormorant body. */ #home-post-4 .testimonials-block { background: transparent; padding: 0 !important; } #home-post-4 .testimonials-block__header { text-align: left; margin-bottom: 22px; } #home-post-4 .testimonials-block__grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 18px !important; } #home-post-4 .testimonials-block__grid-item { margin: 0; } #home-post-4 .testimonial-card { padding: 22px 24px; border: 1px solid rgba(190, 220, 250, 0.25); border-radius: 14px; background: rgba(8, 18, 36, 0.48); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); } #home-post-4 .testimonial-card__quote { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 22px; line-height: 1.5; color: rgb(232, 244, 255) !important; margin: 0 0 14px; text-shadow: 0 1px 3px rgba(0, 8, 24, 0.7); font-feature-settings: "kern" 1, "liga" 1, "onum" 1; border: none; padding: 0; quotes: "\201C" "\201D" "\2018" "\2019"; hanging-punctuation: first last; } #home-post-4 .testimonial-card__quote::before { content: open-quote; } #home-post-4 .testimonial-card__quote::after { content: close-quote; } #home-post-4 .testimonial-card__footer { border-top: none; padding: 0; margin: 0; } #home-post-4 .testimonial-card__name { font-style: normal; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(220, 234, 250); font-weight: 600; display: inline; } #home-post-4 .testimonial-card__meta { display: inline; font-style: normal; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(190, 220, 250); } #home-post-4 .testimonial-card__meta::before { content: ' · '; } /* Star-rating header — synthesize via ::before since the partial doesn't emit a global rating element. Reads from the JSON-LD count and a static "4.9 stars" string (the testimonials block schema doesn't expose aggregate rating — we display the constant which the JSON-LD aggregate computes from the per-quote ratings the editor sets). */ #home-post-4 .testimonials-block__header::before { content: '★★★★★'; color: #FFC062; font-size: 22px; letter-spacing: 0.10em; margin-right: 16px; display: inline-block; vertical-align: middle; font-family: sans-serif; } #home-post-4 .testimonials-block__header::after { content: '5.0 — Verified Google reviews'; font-family: 'Cormorant Garamond', serif; font-size: 22px; color: rgb(240, 248, 255); margin-left: 16px; vertical-align: middle; font-variant-numeric: tabular-nums; } /* ---------- 5. PLANS (#home-post-5, pricing_table) ---------- */ /* Prototype .plans-grid + .plan (lines 785–838). 2-col layered cards; featured plan gets the gradient + badge. */ #home-post-5 .pricing-table-block { background: transparent; padding: 0; } #home-post-5 .pricing-table-block__header { text-align: left; margin-bottom: 22px; } #home-post-5 .pricing-table-block .row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin: 0; } #home-post-5 .pricing-table-block .row > [class*="col-"] { width: 100%; max-width: none; padding: 0; flex: none; margin: 0; } #home-post-5 .pricing-table-block__plan { padding: 30px 28px; border: 1px solid rgba(190, 220, 250, 0.20); border-radius: 18px; background: rgba(8, 18, 36, 0.32); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); position: relative; display: flex; flex-direction: column; color: rgb(232, 244, 255); box-shadow: none; } #home-post-5 .pricing-table-block__plan--featured { border-color: rgba(120, 160, 230, 0.50); background: linear-gradient(140deg, rgba(120, 200, 255, 0.12), rgba(35, 61, 127, 0.18)); } #home-post-5 .pricing-table-block__badge { position: absolute; top: -10px; right: 22px; padding: 5px 12px; background: linear-gradient(110deg, rgb(120, 200, 255), rgb(80, 140, 220)); color: #0a1530 !important; font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; border-radius: 999px; line-height: 1.4; transform: none; } #home-post-5 .pricing-table-block__plan-name { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 14px; color: rgb(190, 220, 250); line-height: 1.4; } #home-post-5 .pricing-table-block__plan-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 22px; color: rgb(240, 248, 255); font-variant-numeric: tabular-nums lining-nums; text-shadow: 0 1px 3px rgba(0, 8, 24, 0.7); } #home-post-5 .pricing-table-block__amount { font-family: 'Cormorant Garamond', serif; font-style: normal; font-weight: 400; font-size: 48px; line-height: 1; color: inherit; letter-spacing: -0.02em; } #home-post-5 .pricing-table-block__amount--contact { font-size: 28px; letter-spacing: 0; } #home-post-5 .pricing-table-block__period { font-family: 'Manrope', sans-serif; font-style: normal; font-weight: 400; font-size: 14px; letter-spacing: 0.04em; color: rgb(190, 220, 250); } #home-post-5 .pricing-table-block__description { font-size: 15px; line-height: 1.55; color: rgb(216, 228, 244); margin-bottom: 14px; } #home-post-5 .pricing-table-block__features { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; } #home-post-5 .pricing-table-block__features li { font-size: 15px; line-height: 1.5; color: rgb(216, 228, 244); padding-left: 22px; position: relative; margin-bottom: 8px; } #home-post-5 .pricing-table-block__features li::before { content: '✓'; position: absolute; left: 0; color: rgb(190, 226, 255); font-weight: 600; } #home-post-5 .pricing-table-block__action { margin: 0; } #home-post-5 .pricing-table-block__action .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 22px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; transition: transform .25s, background .25s, border-color .25s; align-self: flex-start; width: auto; border: 1px solid rgba(200, 225, 250, 0.42); background: rgba(10, 25, 50, 0.30); color: rgb(232, 244, 255); } #home-post-5 .pricing-table-block__plan--featured .pricing-table-block__action .btn { background: linear-gradient(110deg, rgb(120, 200, 255), rgb(80, 140, 220)); color: #0a1530; border-color: transparent; } #home-post-5 .pricing-table-block__action .btn:hover { transform: translateY(-2px); } /* ---------- 6. EXPERTISE (#home-post-6, paragraph_block) ---------- */ /* Prototype .editorial-grid (lines 867–872): two-column body text; no image. */ #home-post-6 .paragraph-block { background: transparent; padding: 0; } #home-post-6 .paragraph-block .row { display: block; margin: 0; } #home-post-6 .paragraph-block .row > div { width: 100%; max-width: none; padding: 0; flex: none; } #home-post-6 .paragraph-block__content { column-count: 2; column-gap: 32px; column-rule: none; } #home-post-6 .paragraph-block__content p { font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.7; color: rgb(216, 228, 244); margin: 0 0 14px; text-shadow: 0 1px 3px rgba(0, 8, 24, 0.7); break-inside: avoid; } /* ---------- 7. CONTACT (#home-post-7, cta_block) ---------- */ /* Prototype contact section (lines 2067–2138). cta_block renders .cta-block__content with title, subtitle, and action buttons. We override the text-center default and style buttons as prototype .form-head .call (cyan pill) + ghost secondary. */ #home-post-7 .cta-block { background: transparent; padding: 0; } #home-post-7 .cta-block > .container { max-width: none !important; padding: 0 !important; } #home-post-7 .cta-block__content { text-align: left; } #home-post-7 .cta-block__title { text-align: left; font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.06; margin: 0 0 18px; color: rgb(240, 248, 255); text-shadow: 0 2px 6px rgba(0, 8, 24, 0.85); letter-spacing: -0.008em; font-feature-settings: "kern" 1, "liga" 1, "dlig" 1; } #home-post-7 .cta-block__subtitle { font-family: 'Manrope', sans-serif; font-size: 17px; line-height: 1.65; color: rgb(216, 228, 244); margin: 0 0 24px; max-width: 60ch; text-align: left; text-shadow: 0 1px 4px rgba(0, 8, 24, 0.85); } #home-post-7 .cta-block__urgency { display: none; } #home-post-7 .cta-block__actions { display: flex; flex-wrap: wrap; gap: 12px; text-align: left; justify-content: flex-start; } #home-post-7 .cta-block__btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 28px; border: none; border-radius: 999px; background: linear-gradient(110deg, rgb(120, 200, 255), rgb(80, 140, 220)); color: #0a1530; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; transition: transform .25s; box-shadow: 0 6px 18px rgba(60, 110, 200, 0.30); } #home-post-7 .cta-block__btn-primary:hover { transform: translateY(-2px); } #home-post-7 .cta-block__btn-secondary { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; color: rgb(232, 244, 255); border: 1px solid rgba(200, 225, 250, 0.42); background: rgba(10, 25, 50, 0.30); transition: border-color .25s, background .25s; } #home-post-7 .cta-block__btn-secondary:hover { border-color: rgba(190, 230, 255, 0.8); background: rgba(40, 80, 140, 0.40); } /* Synthetic trust-cluster */ #home-post-7 .cta-block__content::before, #home-post-7 .call-to-action-block__content::before { content: '★ 5.0 Google | Licensed · Insured | BBB A+ | NATE Certified'; display: block; font-family: 'Manrope', sans-serif; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(216, 230, 246); margin: 0 0 24px; text-shadow: 0 1px 3px rgba(0, 8, 24, 0.7); } /* Equivalent rules for the call-to-action block partial (block.content_group=call_to_action). Mirrors the .cta-block__* treatments above so either rendering path matches. */ #home-post-7 .call-to-action-block { background: transparent; padding: 0; } #home-post-7 .call-to-action-block > .container { max-width: none !important; padding: 0 !important; } #home-post-7 .call-to-action-block__content { text-align: left; } #home-post-7 .call-to-action-block__title, #home-post-7 .call-to-action-block__title.luxury-text-hero { text-align: left; font-family: 'Cormorant Garamond', serif !important; font-weight: 400 !important; font-size: clamp(30px, 3.4vw, 48px) !important; line-height: 1.06 !important; margin: 0 0 18px; color: rgb(240, 248, 255); text-shadow: 0 2px 6px rgba(0, 8, 24, 0.85); letter-spacing: -0.008em !important; font-feature-settings: "kern" 1, "liga" 1, "dlig" 1; } #home-post-7 .call-to-action-block__description { font-family: 'Manrope', sans-serif; font-size: 17px; line-height: 1.65; color: rgb(216, 228, 244); margin: 0 0 24px; max-width: 60ch; text-align: left; text-shadow: 0 1px 4px rgba(0, 8, 24, 0.85); } #home-post-7 .call-to-action-block__action { margin: 0 0 14px; text-align: left; } #home-post-7 .call-to-action-block__primary { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 28px; border: none; border-radius: 999px; background: linear-gradient(110deg, rgb(120, 200, 255), rgb(80, 140, 220)); color: #0a1530; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; transition: transform .25s; box-shadow: 0 6px 18px rgba(60, 110, 200, 0.30); } #home-post-7 .call-to-action-block__primary:hover { transform: translateY(-2px); } #home-post-7 .call-to-action-block__secondary { text-align: left; margin: 0; } #home-post-7 .call-to-action-block__secondary-link { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; color: rgb(232, 244, 255); border: 1px solid rgba(200, 225, 250, 0.42); background: rgba(10, 25, 50, 0.30); transition: border-color .25s, background .25s; font-weight: 600; } #home-post-7 .call-to-action-block__secondary-link:hover { border-color: rgba(190, 230, 255, 0.8); background: rgba(40, 80, 140, 0.40); } /* ---------- 8. FAQ (#home-post-8, faq_block) ---------- */ /* Prototype .faq + details (lines 939–968) — bordered details rows. */ #home-post-8 .faq-block { background: transparent; padding: 0; } #home-post-8 .faq-block__header { text-align: left; margin-bottom: 22px; } #home-post-8 .faq-block__list { padding: 0; border: none; background: transparent; } #home-post-8 .faq-block__item { border: none; border-top: 1px solid rgba(190, 220, 250, 0.30); border-radius: 0; padding: 14px 4px; background: transparent; margin: 0; } #home-post-8 .faq-block__item:last-of-type { border-bottom: 1px solid rgba(190, 220, 250, 0.30); } #home-post-8 .faq-block__question { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 22px; color: rgb(240, 248, 255); padding: 6px 0; text-shadow: 0 1px 3px rgba(0, 8, 24, 0.7); margin: 0; border: none; background: transparent; } #home-post-8 .faq-block__question::-webkit-details-marker { display: none; } #home-post-8 details.faq-block__item > summary.faq-block__question::after { content: '+'; font-family: 'Manrope', sans-serif; font-size: 22px; color: rgb(190, 226, 255); transition: transform .25s; line-height: 1; background: none; border: none; margin-left: 14px; position: static; width: auto; height: auto; border-radius: 0; } #home-post-8 details.faq-block__item[open] > summary.faq-block__question::after { transform: rotate(45deg); background: none; } #home-post-8 .faq-block__answer { background: transparent; border: none; padding: 0; margin: 0; } #home-post-8 .faq-block__answer p, #home-post-8 .faq-block__answer { font-size: 16px; line-height: 1.65; color: rgb(216, 228, 244); margin: 8px 0 6px; max-width: 64ch; text-shadow: 0 1px 3px rgba(0, 8, 24, 0.7); } /* ============================================================ UNIFIED CAPS SYSTEM ============================================================ Single rule for every uppercase-tracked element on the home page. Locks family (Manrope), weight (600), and tracking by size group. Theme-agnostic — light/dark only swap colors. This deletes the historical mix of Inter/Manrope, 14/13/12px, and 16/18/22/30/32% tracking values. One voice. */ .parallax-hero__eyebrow, .parallax-hero__trust-item, .home-post-strip__label, .home-post-strip__items a, .home-areas-strip__label, .category-strip__label, .category-strip__link, #home-post-1 .service-card__title, #home-post-2 .service-card__title, #home-post-3 .service-card__title, #home-post-4 .testimonial-card__name, #home-post-4 .testimonial-card__meta, #home-post-5 .pricing-table-block__plan-name, #home-post-5 .pricing-table-block__action .btn, #home-post-7 .call-to-action-block__primary, #home-post-7 .call-to-action-block__secondary-link, #home-post-7 .cta-block__btn-primary, #home-post-7 .cta-block__btn-secondary { font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: var(--cb-track-caps-sm); font-style: normal; } /* 12px caps need more open tracking */ .parallax-hero__trust-item, .home-post-strip__label, .home-areas-strip__label { font-size: var(--cb-fs-xs); letter-spacing: var(--cb-track-caps-xs); } /* 13px caps — the dominant scale */ .parallax-hero__eyebrow, .home-post-strip__items a, .category-strip__label, .category-strip__link, #home-post-1 .service-card__title, #home-post-2 .service-card__title, #home-post-3 .service-card__title, #home-post-4 .testimonial-card__name, #home-post-4 .testimonial-card__meta, #home-post-5 .pricing-table-block__plan-name, #home-post-5 .pricing-table-block__action .btn, #home-post-7 .call-to-action-block__primary, #home-post-7 .call-to-action-block__secondary-link, #home-post-7 .cta-block__btn-primary, #home-post-7 .cta-block__btn-secondary { font-size: var(--cb-fs-sm); letter-spacing: var(--cb-track-caps-sm); } /* ============================================================ UNIFIED TEXT-SHADOW HALO ============================================================ Every text element on the home page wears the same 5-layer halo: a tight dark edge + three stacked diffuse glows. Light uses white glows over a dark edge; dark inverts to deep-navy glows over a cream edge. Same shape, opposite tonality — identical visual "feathered text" treatment across themes. Buttons, badges, and pill CTAs opt out: they have solid / gradient surfaces of their own and shouldn't carry the halo. ============================================================ */ :root[data-theme="light"] .home-page *, :root[data-theme="light"] .home-page { text-shadow: rgb(0 8 24 / 36%) 0 1px 0, rgb(0 10 30 / 68%) 0 0 1px, rgb(255 255 255 / 100%) 0 0 5px, rgb(255 255 255 / 100%) 0 0 9px, rgb(255 255 255 / 100%) 0 0 19px !important; } :root[data-theme="dark"] .home-page *, :root[data-theme="dark"] .home-page { text-shadow: rgb(247 244 237 / 36%) 0 1px 0, rgb(247 244 237 / 68%) 0 0 1px, rgb(0 8 24 / 100%) 0 0 5px, rgb(0 8 24 / 100%) 0 0 9px, rgb(0 8 24 / 100%) 0 0 19px !important; } /* Opt-outs — text on a colored surface doesn't need a halo. */ :root[data-theme="light"] .home-page .btn, :root[data-theme="light"] .home-page .btn *, :root[data-theme="light"] .home-page button, :root[data-theme="light"] .home-page button *, :root[data-theme="light"] .home-page .parallax-hero__cta-primary, :root[data-theme="light"] .home-page .parallax-hero__cta-primary *, :root[data-theme="light"] .home-page .parallax-hero__cta-secondary, :root[data-theme="light"] .home-page .parallax-hero__cta-secondary *, :root[data-theme="light"] .home-page .call-to-action-block__primary, :root[data-theme="light"] .home-page .call-to-action-block__primary *, :root[data-theme="light"] .home-page .call-to-action-block__secondary-link, :root[data-theme="light"] .home-page .cta-block__btn-primary, :root[data-theme="light"] .home-page .cta-block__btn-primary *, :root[data-theme="light"] .home-page .cta-block__btn-secondary, :root[data-theme="light"] .home-page .pricing-table-block__badge, :root[data-theme="light"] .home-page .pricing-table-block__badge *, :root[data-theme="dark"] .home-page .btn, :root[data-theme="dark"] .home-page .btn *, :root[data-theme="dark"] .home-page button, :root[data-theme="dark"] .home-page button *, /* Primary CTA button: white text in dark mode for max contrast on blue gradient */ :root[data-theme="dark"] .parallax-hero__cta--primary, :root[data-theme="dark"] .parallax-hero__cta--primary:hover { color: #ffffff; } :root[data-theme="dark"] .home-page .parallax-hero__cta-primary, :root[data-theme="dark"] .home-page .parallax-hero__cta-primary *, :root[data-theme="dark"] .home-page .parallax-hero__cta-secondary, :root[data-theme="dark"] .home-page .parallax-hero__cta-secondary *, :root[data-theme="dark"] .home-page .call-to-action-block__primary, :root[data-theme="dark"] .home-page .call-to-action-block__primary *, :root[data-theme="dark"] .home-page .call-to-action-block__secondary-link, :root[data-theme="dark"] .home-page .cta-block__btn-primary, :root[data-theme="dark"] .home-page .cta-block__btn-primary *, :root[data-theme="dark"] .home-page .cta-block__btn-secondary, :root[data-theme="dark"] .home-page .pricing-table-block__badge, :root[data-theme="dark"] .home-page .pricing-table-block__badge * { text-shadow: none !important; } /* Decorative icons (Font Awesome glyphs, SVGs) also opt out — they're not text, they're shapes; the halo blurs their edge. */ :root .home-page i[class*="fa-"], :root .home-page svg, :root .home-page svg * { text-shadow: none !important; } /* ============================================================ HOME POST-AREA RESPONSIVE ============================================================ */ @media (max-width: 800px) { #home-post-1 .features-grid-block__grid, #home-post-2 .features-grid-block__grid, #home-post-3 .features-grid-block__grid { grid-template-columns: 1fr; } #home-post-4 .testimonials-block__grid { grid-template-columns: 1fr !important; } #home-post-5 .pricing-table-block .row { grid-template-columns: 1fr; } #home-post-6 .paragraph-block__content { column-count: 1; } #home-post-7 .call-to-action-block__action, #home-post-7 .cta-block__actions { flex-direction: column; } } /* ============================================================ CONTACT CTA FORM — full block styles ============================================================ .contact-cta is rendered by partials/contact-cta.htm (included as the first child of footer.htm). position:relative + z-index:1 lifts it above the fixed coastal-page-bg (z-index:0). ============================================================ */ .contact-cta { position: relative; z-index: 1; font-family: var(--font-body-coastal, 'Manrope', 'Inter', sans-serif); border-top: 1px solid rgba(190, 220, 250, 0.18); padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 7vw, 6rem); } .contact-cta__inner { max-width: 1190px; margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 3rem); } .contact-cta__header { text-align: left; margin-bottom: 2.25rem; } .contact-cta__eyebrow { font-family: var(--font-body-coastal, 'Manrope', 'Inter', sans-serif); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand-cyan, rgb(140, 220, 255)); margin: 0 0 0.5rem; opacity: 0.65; text-shadow: 0 1px 4px rgba(0, 8, 24, 0.6); } .contact-cta__heading { font-family: var(--font-display-coastal, 'Cormorant Garamond', Georgia, serif) !important; font-weight: 400 !important; font-size: clamp(2.2rem, 4.5vw, 3.4rem) !important; line-height: 1.04 !important; letter-spacing: -0.012em !important; color: rgb(240, 248, 255); margin: 0 0 0.6rem; text-shadow: 0 2px 6px rgba(0, 8, 24, 0.85), 0 8px 36px rgba(0, 10, 30, 0.6) !important; } .contact-cta__sub { font-family: var(--font-body-coastal, 'Manrope', 'Inter', sans-serif); font-size: 1.08rem; margin: 0; line-height: 1.6; letter-spacing: 0.01em; } /* Form layout */ .contact-cta__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; margin-bottom: 1.25rem; } @media (max-width: 600px) { .contact-cta__row { grid-template-columns: 1fr; gap: 1rem; } .contact-cta__header { margin-bottom: 1.75rem; } .contact-cta__actions { flex-direction: column; align-items: flex-start; gap: 0.85rem; } .contact-cta__submit { width: 100%; justify-content: center; padding: 0.85rem 1.4rem; } } .contact-cta__form { background: rgba(8, 18, 36, 0.30); border: 1px solid rgba(190, 220, 250, 0.18); border-radius: 16px; padding: 1.75rem 1.5rem; } @media (min-width: 601px) { .contact-cta__form { padding: 1.75rem 1.75rem; } } .contact-cta__field { display: flex; flex-direction: column; gap: 0.38rem; } .contact-cta__label { font-family: var(--font-body-coastal, 'Manrope', 'Inter', sans-serif); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(150, 195, 240, 0.45); } .contact-cta__req { color: var(--brand-cyan, rgb(140, 220, 255)); opacity: 0.65; } .contact-cta__field-hint { font-size: 0.66rem; color: rgba(150, 195, 240, 0.28); margin-top: -0.15rem; } .contact-cta__input, .contact-cta__select, .contact-cta__textarea { background: rgba(8, 20, 46, 0.85); border: 1px solid rgba(190, 220, 250, 0.22); border-radius: 8px; color: rgb(210, 232, 255); font-family: var(--font-body-coastal, 'Manrope', 'Inter', sans-serif); font-size: 0.9rem; padding: 0.65rem 0.85rem; transition: border-color 0.2s, background 0.2s; width: 100%; -webkit-appearance: none; appearance: none; } .contact-cta__select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%238cdcff' fill-opacity='.45' d='M5 7L1 3h8z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.7rem center; background-size: 10px; padding-right: 1.8rem; } .contact-cta__select option { background: rgb(4, 11, 26); color: rgb(210, 232, 255); } .contact-cta__textarea { resize: vertical; min-height: 80px; } .contact-cta__input:focus, .contact-cta__select:focus, .contact-cta__textarea:focus { outline: none; border-color: rgba(190, 230, 255, 0.70); background: rgba(8, 24, 54, 0.9); } .contact-cta__input::placeholder, .contact-cta__textarea::placeholder { color: rgba(150, 195, 240, 0.22); } /* Actions */ .contact-cta__actions { margin-top: 1.75rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .contact-cta__submit { display: inline-flex; align-items: center; gap: 0.5rem; background: linear-gradient(110deg, rgb(120, 200, 255), rgb(80, 140, 220)); color: rgb(10, 21, 48); font-family: var(--font-body-coastal, 'Manrope', 'Inter', sans-serif); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.8rem 1.8rem; border: none; border-radius: 999px; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .contact-cta__submit:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(80, 160, 240, 0.35); } .contact-cta__submit:active { opacity: 0.85; transform: none; } .contact-cta__submit.oc-loading { opacity: 0.5; pointer-events: none; } .contact-cta__disclaimer { font-size: 0.88rem; color: rgba(150, 195, 240, 0.30); margin: 0; line-height: 1.5; } /* Success state */ .contact-cta__success { display: flex; align-items: center; gap: 0.65rem; color: var(--brand-cyan, rgb(140, 220, 255)); font-size: 1.05rem; padding: 1.25rem 0; } .contact-cta__success[hidden] { display: none; } /* Trust cluster */ .contact-cta__trust { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 1.25rem; } .contact-cta__badge { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-body-coastal, 'Manrope', 'Inter', sans-serif); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; color: rgba(190, 220, 255, 0.75); } .contact-cta__badge svg { color: rgb(140, 200, 255); flex-shrink: 0; } .contact-cta__badge strong { color: rgb(245, 252, 255); } /* Form head — call pill + or divider */ .contact-cta__form-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.75rem 0.9rem; margin-bottom: 1.25rem; } .contact-cta__call-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.1rem; border: 1px solid rgba(190, 230, 255, 0.42); border-radius: 999px; background: rgba(10, 30, 60, 0.30); color: rgb(245, 252, 255); text-decoration: none; font-family: var(--font-body-coastal, 'Manrope', 'Inter', sans-serif); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; transition: border-color 0.2s, background 0.2s; } .contact-cta__call-pill:hover { border-color: rgba(190, 230, 255, 0.8); background: rgba(40, 80, 140, 0.40); } .contact-cta__form-head-or { color: rgb(190, 210, 234); font-size: 0.85rem; letter-spacing: 0.04em; } /* Address autocomplete wrapper */ .contact-cta__address-wrap { position: relative; } .contact-cta__input--address { padding-right: 2.6rem; } .contact-cta__gps-btn { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 0.3rem; cursor: pointer; color: rgba(140, 200, 255, 0.55); display: flex; align-items: center; justify-content: center; transition: color 0.2s; border-radius: 4px; } .contact-cta__gps-btn:hover { color: rgba(140, 200, 255, 0.95); } .contact-cta__gps-btn:disabled { opacity: 0.4; cursor: default; } .contact-cta__gps-btn.is-loading { animation: ccf-spin 0.8s linear infinite; } @keyframes ccf-spin { to { transform: translateY(-50%) rotate(360deg); } } .contact-cta__suggestions { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: rgb(6, 14, 34); border: 1px solid rgba(190, 220, 250, 0.28); border-radius: 8px; list-style: none; margin: 0; padding: 0.3rem 0; z-index: 200; box-shadow: 0 8px 24px rgba(0, 8, 24, 0.60); max-height: 220px; overflow-y: auto; } .contact-cta__suggestion { padding: 0.55rem 0.85rem; font-size: 0.85rem; color: rgb(200, 225, 255); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .contact-cta__suggestion:hover, .contact-cta__suggestion.is-active { background: linear-gradient(90deg, transparent 0%, rgba(60, 120, 220, 0.25) 14%, rgba(60, 120, 220, 0.25) 86%, transparent 100%); color: rgb(230, 245, 255); } /* Radio group for extra fields */ .contact-cta__radio-group { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; } .contact-cta__radio-label { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; color: rgba(175, 215, 252, 0.78); font-size: 13px; } /* ============================================================ LIGHT MODE OVERRIDES — sitewide ============================================================ The default blocks above are designed for the deep-night dark prototype (design/Coastal Breeze Banner.html). When the user toggles to light mode, [data-theme="light"] flips: - .coastal-page-bg wave field to a pale sky tint (low opacity) - .has-coastal-page-bg section catchall glass to white-with-navy-tint - all home-post-{1..8} card surfaces + text colors to navy-on-white - all heading/body/eyebrow text-shadows from dark-outline to soft white - all gradient-text "em" accents kept (cyan/coral still reads on white) - sticky strips (services / areas / post-nav) to pale-glass - parallax-hero trust strip to navy text - article-content / fallback wrapper glass Scoped strictly via [data-theme="light"] / :root[data-theme="light"] so dark mode visuals are untouched. ============================================================ */ /* ------------------------------------------------------------ 1. Coastal Banner page-bg — prototype-faithful light mode ------------------------------------------------------------ The correct :root[data-theme="light"] values are already set at ~L6841-6943 (verbatim from design/Coastal Breeze Banner.html): - page-bg: warm cream radial #FBF8F0 → #F7F4ED - layers: opacity:1, contrast(2.15) saturate(1.28) brightness(0.88) - bokeh: opacity:0.55, contrast(1.4) saturate(1.15) - grain: opacity:0.09 - vignette: cream/amber radial + edge tones No overrides here — those earlier rules are canonical. ------------------------------------------------------------ */ /* ------------------------------------------------------------ 2. home-post-area block surfaces — transparent on cream paper ------------------------------------------------------------ The base rules at ~L2997-3005 paint every .features-grid-block, .testimonials-block, .paragraph-block etc. with `background: var(--generic-surface-base) !important` (#ffffff). On the coastal-page-bg these become opaque white boxes that block the wave field. The note at L2823 uses .builder-blocks (plural) which doesn't exist in this site's DOM — so those rules are inert. The actual DOM structure is: .home-post-area > .block-wrapper[id^="home-post-"] > .builder-block Fix: override --generic-surface-base to transparent and kill the opaque background with !important at the correct selector. ------------------------------------------------------------ */ [data-theme="light"] .home-post-area .block-wrapper[id^="home-post-"] .builder-block.features-grid-block, [data-theme="light"] .home-post-area .block-wrapper[id^="home-post-"] .builder-block.paragraph-block, [data-theme="light"] .home-post-area .block-wrapper[id^="home-post-"] .builder-block.testimonials-block, [data-theme="light"] .home-post-area .block-wrapper[id^="home-post-"] .builder-block.pricing-table-block, [data-theme="light"] .home-post-area .block-wrapper[id^="home-post-"] .builder-block.faq-block, [data-theme="light"] .home-post-area .block-wrapper[id^="home-post-"] .builder-block.headline-block, [data-theme="light"] .home-post-area .block-wrapper[id^="home-post-"] .builder-block.call-to-action-block, [data-theme="light"] .home-post-area .block-wrapper[id^="home-post-"] .builder-block.stats-block, [data-theme="light"] .home-post-area .block-wrapper[id^="home-post-"] .builder-block.scoreboard-block, [data-theme="light"] .home-post-area .block-wrapper[id^="home-post-"] .builder-block.team-leaders-block, [data-theme="light"] .home-post-area .block-wrapper[id^="home-post-"] .builder-block.case-studies-block, [data-theme="light"] .home-post-area .block-wrapper[id^="home-post-"] .builder-block.research-block { background: transparent !important; border-top-color: transparent !important; border-bottom-color: transparent !important; --generic-surface-base: transparent; } /* ------------------------------------------------------------ Dark mode — drop visual containers on selected sections. Why Us (#home-post-1), Process (#home-post-3), Reviews (#home-post-4), and Coastal expertise (#home-post-6) lose their card / block surfaces so the parallax shows through. Text already carries the 5-layer navy-glow halo so legibility is preserved. Plans (#home-post-5) and FAQ (#home-post-8) keep their containers — they're tabular / interactive blocks that benefit from the surface affordance. */ [data-theme="dark"] #home-post-1 .service-card, [data-theme="dark"] #home-post-3 .service-card, [data-theme="dark"] #home-post-4 .testimonial-card { background: rgba(8, 18, 36, 0.48); border-color: rgba(190, 220, 250, 0.25); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: none; } [data-theme="dark"] #home-post-6 .builder-block.paragraph-block { background: transparent !important; border-top-color: transparent !important; border-bottom-color: transparent !important; --generic-surface-base: transparent; } /* Drop outer builder-block surface on Why Us / Process / Reviews (parallax shows through) */ [data-theme="dark"] #home-post-1 .builder-block.features-grid-block, [data-theme="dark"] #home-post-3 .builder-block.features-grid-block, [data-theme="dark"] #home-post-4 .builder-block.testimonials-block { background: transparent !important; border-top-color: transparent !important; border-bottom-color: transparent !important; --generic-surface-base: transparent; } /* ------------------------------------------------------------ 3. Sticky strips (services / areas / post-nav) ------------------------------------------------------------ Strips use deep-navy glass + bright text. Flip to white glass + navy text for light mode. ------------------------------------------------------------ */ [data-theme="light"] .home-post-strip { background: transparent; border-top: 1px solid rgba(20, 60, 100, 0.12); border-bottom: 1px solid rgba(20, 60, 100, 0.12); } [data-theme="light"] .home-post-strip__label { color: #1a4575; border-right: 1px solid rgba(20, 50, 100, 0.16); text-shadow: 0 0 14px rgba(247, 244, 237, 0.90), 0 1px 3px rgba(247, 244, 237, 0.80); } [data-theme="light"] .home-post-strip__items a { color: #2a3a50; text-shadow: 0 0 12px rgba(247, 244, 237, 0.85), 0 1px 2px rgba(247, 244, 237, 0.70); } [data-theme="light"] .home-post-strip__items a:hover { color: #1a4575; } [data-theme="light"] .home-post-strip__items a.active { color: #c36a3c; } [data-theme="light"] .home-areas-strip { background: transparent; border-top: 1px solid rgba(20, 50, 100, 0.10); border-bottom: 1px solid rgba(20, 50, 100, 0.10); } [data-theme="light"] .home-areas-strip__label { color: #c36a3c; border-right: 1px solid rgba(20, 50, 100, 0.16); text-shadow: 0 0 14px rgba(247, 244, 237, 0.90), 0 1px 3px rgba(247, 244, 237, 0.80); } /* Strip clip-ellipsis: light-mode gradient fades to linen, not dark navy. */ [data-theme="light"] .builder-block.category-strip.is-clipped::after, [data-theme="light"] .home-post-strip.is-clipped::after, [data-theme="light"] .home-areas-strip.is-clipped::after { background: linear-gradient(to right, transparent, rgba(247, 244, 237, 0.96) 45%); color: rgba(30, 55, 90, 0.40); } /* category-strip in banner-dark variant — used on services strip. Transparent in light mode so the parallax watercolor shows through. */ [data-theme="light"] .category-strip--appearance-banner-dark { background: transparent; border: none; } [data-theme="light"] .category-strip--appearance-banner-dark .category-strip__label { color: #1a4575; text-shadow: 0 0 14px rgba(247, 244, 237, 0.90), 0 1px 3px rgba(247, 244, 237, 0.80); } [data-theme="light"] .category-strip--appearance-banner-dark .category-strip__link { color: #2a3a50; text-shadow: 0 0 12px rgba(247, 244, 237, 0.85), 0 1px 2px rgba(247, 244, 237, 0.70); } [data-theme="light"] .category-strip--appearance-banner-dark .category-strip__link:hover { color: #1a4575; } /* ------------------------------------------------------------ 4. HOME POST-AREA — home-post-1 through home-post-8 ------------------------------------------------------------ Override the dark-glass card backgrounds, text colors, and text-shadows defined ~L7300-8063 for the light theme. ------------------------------------------------------------ */ /* Block token cascade — flip --block-* tokens used by all 8 sections */ [data-theme="light"] .home-post-area .block-wrapper[id^="home-post-"] .builder-block, [data-theme="light"] .home-post-area .block-wrapper[id^="home-post-"] .builder-block.testimonials-block, [data-theme="light"] .home-post-area .block-wrapper[id^="home-post-"] .builder-block.testimonials-block--cards, [data-theme="light"] .home-post-area .block-wrapper[id^="home-post-"] .builder-block.testimonials-block--carousel, [data-theme="light"] .home-post-area .block-wrapper[id^="home-post-"] .builder-block.testimonials-block--grid, [data-theme="light"] .home-post-area .block-wrapper[id^="home-post-"] .builder-block.pricing-table-block, [data-theme="light"] .home-post-area .block-wrapper[id^="home-post-"] .builder-block.pricing-table-block[class*="palette-"], [data-theme="light"] .home-post-area .block-wrapper[id^="home-post-"] .builder-block.faq-block, [data-theme="light"] .home-post-area .block-wrapper[id^="home-post-"] .builder-block.features-grid-block, [data-theme="light"] .home-post-area .block-wrapper[id^="home-post-"] .builder-block.paragraph-block, [data-theme="light"] .home-post-area .block-wrapper[id^="home-post-"] .builder-block.headline-block, [data-theme="light"] .home-post-area .block-wrapper[id^="home-post-"] .builder-block.call-to-action-block { --block-body-color: #2a3a50; --block-heading-color: #0d1a2e; --block-muted-color: #4a6080; --block-accent-color: #1a4575; --block-stroke-color: rgba(20, 50, 100, 0.14); --block-surface-color: rgba(255, 255, 255, 0.3); --text-color: #2a3a50; --primary-color: #1a4575; color: #2a3a50; } /* Shared headings — navy with warm cream bloom (matches hero) */ [data-theme="light"] .home-post-area .builder-block h2, [data-theme="light"] .home-post-area .builder-block .features-grid-block__title, [data-theme="light"] .home-post-area .builder-block .testimonials-block__title, [data-theme="light"] .home-post-area .builder-block .pricing-table-block__title, [data-theme="light"] .home-post-area .builder-block .paragraph-block__title, [data-theme="light"] .home-post-area .builder-block .call-to-action-block__title, [data-theme="light"] .home-post-area .builder-block .faq-block__title, [data-theme="light"] .home-post-area .builder-block .headline-block__main-title, [data-theme="light"] .home-post-area .builder-block .headline-block__title, [data-theme="light"] .home-post-area .builder-block .luxury-text-hero { color: #0d1a2e; text-shadow: 0 0 18px rgba(247, 244, 237, 0.92), 0 1px 3px rgba(247, 244, 237, 0.82); } /* Em accent gradient — keep cyan→coral but darken so it reads on white */ [data-theme="light"] .home-post-area .builder-block h2 em, [data-theme="light"] .home-post-area .builder-block h3 em { background: linear-gradient(110deg, #1a4575, #c36a3c); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Lede / subtitle / description text */ [data-theme="light"] .home-post-area .features-grid-block__subtitle, [data-theme="light"] .home-post-area .testimonials-block__header p, [data-theme="light"] .home-post-area .pricing-table-block__subtitle, [data-theme="light"] .home-post-area .call-to-action-block__description, [data-theme="light"] .home-post-area .faq-block__intro, [data-theme="light"] .home-post-area .headline-block__subtitle, [data-theme="light"] .home-post-area .headline-block__main-subtitle { color: #2a3a50; text-shadow: 0 0 14px rgba(247, 244, 237, 0.88), 0 1px 2px rgba(247, 244, 237, 0.74); } /* ---------- 1. PROMISE (#home-post-2) ---------- */ [data-theme="light"] #home-post-2 .headline-block__subtitle { border-top-color: rgba(26, 69, 117, 0.14); border-bottom-color: rgba(26, 69, 117, 0.14); text-shadow: 0 0 16px rgba(247, 244, 237, 0.90), 0 1px 3px rgba(247, 244, 237, 0.80); } [data-theme="light"] #home-post-2 .headline-block__trust-token { color: #1a4575; text-shadow: 0 0 12px rgba(247, 244, 237, 0.85), 0 1px 2px rgba(247, 244, 237, 0.68); } [data-theme="light"] #home-post-2 .headline-block__trust-token + .headline-block__trust-token::before { background: rgba(26, 69, 117, 0.15); } /* ---------- 2. WHY US (#home-post-1) + PROCESS (#home-post-3) ---------- */ /* Drop outer block surface so the linen/watercolor atmosphere shows through, then restore warm frosted-cream cards — mirrors the dark-mode glass treatment. */ [data-theme="light"] #home-post-1 .builder-block.features-grid-block, [data-theme="light"] #home-post-3 .builder-block.features-grid-block { background: transparent !important; border-top-color: transparent !important; border-bottom-color: transparent !important; --generic-surface-base: transparent; } [data-theme="light"] #home-post-1 .service-card, [data-theme="light"] #home-post-2 .service-card, [data-theme="light"] #home-post-3 .service-card { background: rgba(255, 250, 244, 0.45); border-color: rgba(165, 128, 80, 0.16); -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); box-shadow: 0 2px 18px rgba(90, 55, 15, 0.07); } [data-theme="light"] #home-post-1 .service-card__icon-wrapper, [data-theme="light"] #home-post-1 .service-card__icon, [data-theme="light"] #home-post-2 .service-card__icon-wrapper, [data-theme="light"] #home-post-2 .service-card__icon { /* background: linear-gradient(140deg, rgba(60, 160, 230, 0.22), rgba(255, 168, 110, 0.16)); */ color: #1a4575; } [data-theme="light"] #home-post-1 .service-card__title, [data-theme="light"] #home-post-2 .service-card__title, [data-theme="light"] #home-post-3 .service-card__title { color: #1a4575; text-shadow: 0 0 12px rgba(247, 244, 237, 0.85), 0 1px 2px rgba(247, 244, 237, 0.70); text-align: center; } [data-theme="light"] #home-post-1 .service-card__description, [data-theme="light"] #home-post-2 .service-card__description, [data-theme="light"] #home-post-3 .service-card__description { color: #0d1a2e; text-shadow: 0 0 14px rgba(247, 244, 237, 0.88), 0 1px 2px rgba(247, 244, 237, 0.72); } /* ---------- 3. PROCESS (#home-post-3) ---------- */ [data-theme="light"] #home-post-3 .service-card::before { background: linear-gradient(110deg, #1a4575, #c36a3c); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- 4. REVIEWS (#home-post-4) ---------- */ /* Transparent — light parallax base (#eaf2fb, waves at 0.32 multiply) gives navy text (#0d1a2e) ~16:1 contrast even without a card surface. */ [data-theme="light"] #home-post-4 .testimonial-card { background: rgba(255, 250, 244, 0.45); border-color: rgba(165, 128, 80, 0.20); -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); box-shadow: 0 2px 18px rgba(90, 55, 15, 0.07); } [data-theme="light"] #home-post-4 .testimonial-card__quote { color: #0d1a2e !important; text-shadow: 0 0 16px rgba(247, 244, 237, 0.90), 0 1px 3px rgba(247, 244, 237, 0.78); } [data-theme="light"] #home-post-4 .testimonial-card__quote::before, [data-theme="light"] #home-post-4 .testimonial-card__quote::after { color: #1a4575; } [data-theme="light"] #home-post-4 .testimonial-card__name { color: #1a4575; } [data-theme="light"] #home-post-4 .testimonial-card__meta { color: #4a6080; } /* Star rating header — darker gold star, navy text */ [data-theme="light"] #home-post-4 .testimonials-block__header::before { color: #d49a3a; /* darker gold for contrast on white */ } [data-theme="light"] #home-post-4 .testimonials-block__header::after { color: #0d1a2e; } /* ---------- 5. PLANS (#home-post-5) ---------- */ [data-theme="light"] #home-post-5 .pricing-table-block__plan { background: rgba(255, 250, 244, 0.35); border-color: rgba(165, 128, 80, 0.18); -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); box-shadow: 0 2px 18px rgba(90, 55, 15, 0.07); color: #2a3a50; } [data-theme="light"] #home-post-5 .pricing-table-block__plan--featured { background: rgba(255, 250, 244, 0.52); border-color: rgba(60, 160, 230, 0.40); box-shadow: 0 4px 24px rgba(60, 110, 200, 0.12); } [data-theme="light"] #home-post-5 .pricing-table-block__badge { background: linear-gradient(110deg, #3ca0e6, #1a4575); color: #ffffff !important; } [data-theme="light"] #home-post-5 .pricing-table-block__plan-name { color: #1a4575; text-shadow: 0 0 12px rgba(247, 244, 237, 0.85), 0 1px 2px rgba(247, 244, 237, 0.70); } [data-theme="light"] #home-post-5 .pricing-table-block__plan-price, [data-theme="light"] #home-post-5 .pricing-table-block__amount { color: #0d1a2e; text-shadow: 0 0 14px rgba(247, 244, 237, 0.88), 0 1px 2px rgba(247, 244, 237, 0.74); } [data-theme="light"] #home-post-5 .pricing-table-block__period { color: #4a6080; text-shadow: 0 0 10px rgba(247, 244, 237, 0.80), 0 1px 2px rgba(247, 244, 237, 0.60); } [data-theme="light"] #home-post-5 .pricing-table-block__description, [data-theme="light"] #home-post-5 .pricing-table-block__features li { color: #0d1a2e; text-shadow: 0 0 12px rgba(247, 244, 237, 0.85), 0 1px 2px rgba(247, 244, 237, 0.68); } [data-theme="light"] #home-post-5 .pricing-table-block__features li::before { color: #1a4575; } [data-theme="light"] #home-post-5 .pricing-table-block__action .btn { border: 1px solid rgba(20, 50, 100, 0.32); background: rgba(255, 255, 255, 0.6); color: #0d1a2e; } [data-theme="light"] #home-post-5 .pricing-table-block__action .btn:hover { background: rgba(255, 255, 255, 0.85); border-color: rgba(20, 50, 100, 0.55); } [data-theme="light"] #home-post-5 .pricing-table-block__plan--featured .pricing-table-block__action .btn { background: linear-gradient(110deg, #3ca0e6, #1a4575); color: #ffffff; border-color: transparent; } /* ---------- 6. EXPERTISE (#home-post-6) ---------- */ [data-theme="light"] #home-post-6 .paragraph-block__content p { color: #2a3a50; text-shadow: 0 0 12px rgba(247, 244, 237, 0.85), 0 1px 2px rgba(247, 244, 237, 0.68); } /* ---------- 7. CONTACT (#home-post-7) ---------- */ [data-theme="light"] #home-post-7 .cta-block__title, [data-theme="light"] #home-post-7 .call-to-action-block__title, [data-theme="light"] #home-post-7 .call-to-action-block__title.luxury-text-hero { color: #0d1a2e; text-shadow: 0 0 18px rgba(247, 244, 237, 0.92), 0 1px 3px rgba(247, 244, 237, 0.82); } [data-theme="light"] #home-post-7 .cta-block__subtitle, [data-theme="light"] #home-post-7 .call-to-action-block__description { color: #2a3a50; text-shadow: 0 0 14px rgba(247, 244, 237, 0.88), 0 1px 2px rgba(247, 244, 237, 0.72); } [data-theme="light"] #home-post-7 .cta-block__content::before, [data-theme="light"] #home-post-7 .call-to-action-block__content::before { color: #4a6080; text-shadow: 0 0 10px rgba(247, 244, 237, 0.80), 0 1px 2px rgba(247, 244, 237, 0.60); } [data-theme="light"] #home-post-7 .cta-block__btn-primary, [data-theme="light"] #home-post-7 .call-to-action-block__primary { background: linear-gradient(110deg, #3ca0e6, #1a4575); color: #ffffff; box-shadow: 0 8px 20px -6px rgba(60, 110, 200, 0.35); } [data-theme="light"] #home-post-7 .cta-block__btn-secondary, [data-theme="light"] #home-post-7 .call-to-action-block__secondary-link { color: #0d1a2e; border: 1px solid rgba(20, 50, 100, 0.32); background: rgba(255, 255, 255, 0.6); } [data-theme="light"] #home-post-7 .cta-block__btn-secondary:hover, [data-theme="light"] #home-post-7 .call-to-action-block__secondary-link:hover { border-color: rgba(20, 50, 100, 0.55); background: rgba(255, 255, 255, 0.85); } /* ---------- 8. FAQ (#home-post-8) ---------- */ [data-theme="light"] #home-post-8 .faq-block__item { border-top: 1px solid rgba(20, 50, 100, 0.20); } [data-theme="light"] #home-post-8 .faq-block__item:last-of-type { border-bottom: 1px solid rgba(20, 50, 100, 0.20); } [data-theme="light"] #home-post-8 .faq-block__question { color: #0d1a2e; text-shadow: 0 0 16px rgba(247, 244, 237, 0.90), 0 1px 3px rgba(247, 244, 237, 0.80); } [data-theme="light"] #home-post-8 details.faq-block__item > summary.faq-block__question::after { color: #1a4575; } [data-theme="light"] #home-post-8 .faq-block__answer, [data-theme="light"] #home-post-8 .faq-block__answer p { color: #2a3a50; text-shadow: 0 0 12px rgba(247, 244, 237, 0.85), 0 1px 2px rgba(247, 244, 237, 0.68); } /* ------------------------------------------------------------ 5. Edge washes on #home-services / #home-areas — soften so the dark blue/red tinted edges don't dominate light mode. ------------------------------------------------------------ */ [data-theme="light"] #home-services::before { background: linear-gradient(90deg, rgba(60, 160, 230, 0.18) 0%, rgba(60, 160, 230, 0.10) 14%, rgba(120, 180, 230, 0.04) 32%, rgba(245, 168, 110, 0.04) 68%, rgba(245, 168, 110, 0.10) 86%, rgba(245, 168, 110, 0.18) 100%); } [data-theme="light"] #home-areas::before { background: linear-gradient(90deg, rgba(60, 160, 230, 0.22) 0%, rgba(60, 160, 230, 0.12) 14%, rgba(120, 180, 230, 0.06) 32%, rgba(245, 168, 110, 0.06) 68%, rgba(245, 168, 110, 0.12) 86%, rgba(245, 168, 110, 0.22) 100%); } /* ------------------------------------------------------------ 6. .has-coastal-page-bg heading / body color cascade ------------------------------------------------------------ The catchall at L2848-2855 overrides headings/body to white-ish. In light mode, flip to navy. ------------------------------------------------------------ */ :root[data-theme="light"] .has-coastal-page-bg .builder-blocks > .block-wrapper:not(.block-wrapper--width-full) > section:not(.hero-block):not(.video-hero-block):not(.parallax-hero) :is(h1, h2, h3, h4, h5, h6) { color: #0d1a2e; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } :root[data-theme="light"] .has-coastal-page-bg .builder-blocks > .block-wrapper:not(.block-wrapper--width-full) > section:not(.hero-block):not(.video-hero-block):not(.parallax-hero) :is(p, li, blockquote) { color: #2a3a50; text-shadow: none; } /* ------------------------------------------------------------ 7. .has-coastal-page-bg buttons + accents ------------------------------------------------------------ */ :root[data-theme="light"] .has-coastal-page-bg .builder-blocks .btn-primary { background: linear-gradient(110deg, #3ca0e6, #1a4575); color: #ffffff; border: none; box-shadow: 0 6px 18px -4px rgba(60, 110, 200, 0.30); } :root[data-theme="light"] .has-coastal-page-bg .builder-blocks .btn-primary:hover, :root[data-theme="light"] .has-coastal-page-bg .builder-blocks .btn-primary:focus { filter: brightness(1.05); color: #ffffff; } :root[data-theme="light"] .has-coastal-page-bg .builder-blocks .call-to-action-block__secondary-link, :root[data-theme="light"] .has-coastal-page-bg .builder-blocks .research-block__secondary { color: #0d1a2e; border-color: rgba(20, 50, 100, 0.32); background: rgba(255, 255, 255, 0.6); } :root[data-theme="light"] .has-coastal-page-bg .builder-blocks .call-to-action-block__secondary-link:hover, :root[data-theme="light"] .has-coastal-page-bg .builder-blocks .research-block__secondary:hover { background: rgba(255, 255, 255, 0.85); border-color: rgba(20, 50, 100, 0.55); } /* Stats / scoreboard accent numbers — keep gradient but darken */ :root[data-theme="light"] .has-coastal-page-bg .builder-blocks .stats-block__number, :root[data-theme="light"] .has-coastal-page-bg .builder-blocks .stats-block__suffix, :root[data-theme="light"] .has-coastal-page-bg .builder-blocks .scoreboard-card__number, :root[data-theme="light"] .has-coastal-page-bg .builder-blocks .scoreboard-card__suffix { background: linear-gradient(110deg, #1a4575, #c36a3c); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ------------------------------------------------------------ 8. Parallax-hero typography — flip text-shadows + em gradient ------------------------------------------------------------ The base parallax-hero rules hardcode dark near-black shadows designed for the dark wave background. The `` gradient (light cyan/blue, rgb(180,220,255)→rgb(120,160,230)) is invisible on the pale sky `#eaf2fb` light-mode backdrop. Verbatim from design/Coastal Breeze Banner.html lines 1391-1403: - h1 / eyebrow / lede: flip text-shadow to pale cream outline - h1 em: flip gradient to dark ocean blue rgb(30,130,185)→rgb(45,90,165) Trust strip / ghost CTA handled below in 8a/8b. ------------------------------------------------------------ */ :root[data-theme="light"] .parallax-hero__title { color: rgb(38, 52, 78); text-shadow: 0 1px 3px rgba(247, 244, 237, 0.85); } :root[data-theme="light"] .parallax-hero__title em { background: linear-gradient(95deg, rgb(30, 130, 185) 0%, rgb(45, 90, 165) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: transparent; } :root[data-theme="light"] .parallax-hero__eyebrow { color: rgb(30, 95, 140); text-shadow: 0 1px 3px rgba(247, 244, 237, 0.85); } :root[data-theme="light"] .parallax-hero .parallax-hero__lede { color: rgb(70, 86, 108); text-shadow: 0 1px 3px rgba(247, 244, 237, 0.85); } /* ------------------------------------------------------------ 8a. Parallax-hero trust strip — flip to navy text on pale bg ------------------------------------------------------------ The base .parallax-hero__trust hardcodes pale text + dark shadow (designed for dark wave background). In light mode the wave bg is pale, so flip to navy text + soft cream shadow. ------------------------------------------------------------ */ :root[data-theme="light"] .parallax-hero__trust { color: #2a3a50; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); } :root[data-theme="light"] .parallax-hero__trust-item svg { color: rgba(26, 69, 117, 0.95); } :root[data-theme="light"] .parallax-hero__trust-sep { background: rgba(20, 50, 100, 0.4); } /* 8b. Ghost CTA — dark text on translucent white instead of light text on dark glass */ :root[data-theme="light"] .parallax-hero__cta--ghost { color: #0d1a2e; border: 1px solid rgba(20, 50, 100, 0.32); background: rgba(255, 255, 255, 0.55); } :root[data-theme="light"] .parallax-hero__cta--ghost:hover { border-color: rgba(20, 50, 100, 0.6); background: rgba(255, 255, 255, 0.85); color: #0d1a2e; } /* Parallax-hero vignette — soften so it doesn't crush the pale bg */ :root[data-theme="light"] .parallax-hero__vignette { background: radial-gradient(45% 55% at 50% 55%, rgba(255, 255, 255, 0.20) 0%, transparent 75%), linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, transparent 12%, transparent 88%, rgba(20, 50, 100, 0.10) 100%); } /* Parallax-hero bokeh + grain — multiply in light mode */ :root[data-theme="light"] .parallax-hero__bokeh { mix-blend-mode: multiply; opacity: 0.32; filter: contrast(1.1) saturate(0.95); } :root[data-theme="light"] .parallax-hero__grain { mix-blend-mode: multiply; opacity: 0.06; } /* Parallax-hero waves — soften in light mode (same logic as page-bg) */ :root[data-theme="light"] .parallax-hero__layer--blue, :root[data-theme="light"] .parallax-hero__layer--red, :root[data-theme="light"] .parallax-hero__layer--emerald, :root[data-theme="light"] .parallax-hero__layer--coral { mix-blend-mode: multiply; opacity: 0.32; filter: contrast(1.05) saturate(0.85) brightness(1.05); } /* ------------------------------------------------------------ 9. .section-list--appearance-banner-dark in light mode ------------------------------------------------------------ Used for service-areas listings. Flip glass + text. ------------------------------------------------------------ */ [data-theme="light"] .section-list--appearance-banner-dark { --block-heading-color: #0d1a2e; --block-body-color: #2a3a50; --block-muted-color: #4a6080; --block-accent-color: #1a4575; --block-surface-color: rgba(255, 255, 255, 0.78); --block-stroke-color: rgba(20, 50, 100, 0.14); } [data-theme="light"] .section-list--appearance-banner-dark .section-list__entry { background: rgba(255, 250, 238, 0.18); border: 1px solid rgba(20, 50, 100, 0.10); } [data-theme="light"] .section-list--appearance-banner-dark .section-list__entry:hover, [data-theme="light"] .section-list--appearance-banner-dark .section-list__entry:focus-within { border-color: rgba(20, 50, 100, 0.22); background: rgba(255, 250, 238, 0.40); } [data-theme="light"] .section-list--appearance-banner-dark .section-list__entry a { color: #0d1a2e; text-decoration: none; } [data-theme="light"] .section-list--appearance-banner-dark .section-list__entry a:hover { color: #1a4575; text-decoration: underline; } [data-theme="light"] .section-list--appearance-banner-dark .section-list__icon { background: linear-gradient(140deg, rgba(60, 160, 230, 0.22), rgba(255, 168, 110, 0.16)); color: #1a4575; } /* Banner-dark wrapper-section catchall — flip in light mode */ :root[data-theme="light"] .builder-blocks > .block-wrapper > section.section-list--appearance-banner-dark h2, :root[data-theme="light"] .builder-blocks > .block-wrapper > section.section-list--appearance-banner-dark h3, :root[data-theme="light"] .builder-blocks > .block-wrapper > section.category-strip--appearance-banner-dark h2, :root[data-theme="light"] .builder-blocks > .block-wrapper > section.category-strip--appearance-banner-dark h3 { color: #0d1a2e !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); } :root[data-theme="light"] .builder-blocks > .block-wrapper > section.section-list--appearance-banner-dark p, :root[data-theme="light"] .builder-blocks > .block-wrapper > section.section-list--appearance-banner-dark li, :root[data-theme="light"] .builder-blocks > .block-wrapper > section.category-strip--appearance-banner-dark p, :root[data-theme="light"] .builder-blocks > .block-wrapper > section.category-strip--appearance-banner-dark li { color: #2a3a50 !important; text-shadow: none; } /* ------------------------------------------------------------ 10. Footer — flip to light footer for light mode ------------------------------------------------------------ theme.css line 597-603 sets `footer.bg-dark { color: #f8fafc !important; }` with !important. We must match that priority to win, AND cover the Bootstrap `.text-white` class which Bootstrap and theme.css both target with their own !important rules. The .text-white selector needs explicit coverage since light-mode wraps it. The footer background in light mode is the cream/sky page-bg showing through (footer.bg-dark sets transparent), so we need navy text for 4.5:1+ contrast against the pale ground. */ [data-theme="light"] body:has(.has-coastal-page-bg) > footer.bg-dark, [data-theme="light"] body:has(.has-coastal-page-bg) > footer.bg-dark p, [data-theme="light"] body:has(.has-coastal-page-bg) > footer.bg-dark a, [data-theme="light"] body:has(.has-coastal-page-bg) > footer.bg-dark span, [data-theme="light"] body:has(.has-coastal-page-bg) > footer.bg-dark .text-white { color: #2a3a50 !important; } [data-theme="light"] body:has(.has-coastal-page-bg) > footer.bg-dark a:hover, [data-theme="light"] body:has(.has-coastal-page-bg) > footer.bg-dark .text-white:hover { color: #1a4575 !important; } /* ------------------------------------------------------------ 11. Contact CTA — light mode ------------------------------------------------------------ The form is dark-themed by default (navy inputs, light text). In light mode, flip everything to navy-on-white to match the page's warm cream content sections. Labels especially need high contrast — the user complaint was invisible labels. */ [data-theme="light"] .contact-cta__eyebrow { color: #c36a3c; opacity: 1; text-shadow: none; } [data-theme="light"] .contact-cta__heading { color: #0d1a2e !important; text-shadow: 0 0 18px rgba(247, 244, 237, 0.92), 0 1px 3px rgba(247, 244, 237, 0.82) !important; } [data-theme="light"] .contact-cta__sub { color: #4a6080; } [data-theme="light"] .contact-cta__badge { color: #4a6080; } [data-theme="light"] .contact-cta__badge svg { color: #1a4575; } [data-theme="light"] .contact-cta__badge strong { color: #0d1a2e; } [data-theme="light"] .contact-cta__call-pill { background: rgba(255, 255, 255, 0.80); border-color: rgba(20, 60, 120, 0.28); color: #1a4575; } [data-theme="light"] .contact-cta__call-pill:hover { background: rgba(255, 255, 255, 0.96); border-color: rgba(20, 60, 120, 0.55); } [data-theme="light"] .contact-cta__call-pill svg { color: #1a4575; } [data-theme="light"] .contact-cta__form-head-or { color: #4a6080; } [data-theme="light"] .contact-cta__form { background: rgba(255, 255, 255, 0.42); border-color: rgba(20, 50, 100, 0.14); } /* Labels — high contrast dark text on white card (core contrast fix) */ [data-theme="light"] .contact-cta__label { color: #1a4575; opacity: 1; } [data-theme="light"] .contact-cta__req { color: #c36a3c; opacity: 1; } [data-theme="light"] .contact-cta__field-hint { color: #4a6080; } [data-theme="light"] .contact-cta__input, [data-theme="light"] .contact-cta__select, [data-theme="light"] .contact-cta__textarea { background: rgba(248, 250, 255, 0.96); border-color: rgba(20, 50, 100, 0.20); color: #0d1a2e; } [data-theme="light"] .contact-cta__input:focus, [data-theme="light"] .contact-cta__select:focus, [data-theme="light"] .contact-cta__textarea:focus { background: #fff; border-color: rgba(26, 69, 117, 0.65); } [data-theme="light"] .contact-cta__input::placeholder, [data-theme="light"] .contact-cta__textarea::placeholder { color: rgba(74, 96, 128, 0.45); } [data-theme="light"] .contact-cta__select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%231a4575' fill-opacity='.55' d='M5 7L1 3h8z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.7rem center; background-size: 10px; } [data-theme="light"] .contact-cta__select option { background: #fff; color: #0d1a2e; } [data-theme="light"] .contact-cta__gps-btn { color: rgba(26, 69, 117, 0.55); } [data-theme="light"] .contact-cta__gps-btn:hover { color: rgba(26, 69, 117, 0.90); } [data-theme="light"] .contact-cta__suggestions { background: #fff; border-color: rgba(20, 50, 100, 0.18); box-shadow: 0 8px 24px rgba(20, 50, 100, 0.14); } [data-theme="light"] .contact-cta__suggestion { color: #2a3a50; } [data-theme="light"] .contact-cta__suggestion:hover, [data-theme="light"] .contact-cta__suggestion.is-active { background: rgba(26, 69, 117, 0.08); color: #0d1a2e; } [data-theme="light"] .contact-cta__radio-label { color: #2a3a50; } [data-theme="light"] .contact-cta__privacy { color: #4a6080; } [data-theme="light"] .contact-cta__privacy a { color: #1a4575; } [data-theme="light"] .contact-cta__success { color: #0d1a2e; border-color: rgba(20, 50, 100, 0.16); background: rgba(255, 255, 255, 0.80); } /* ------------------------------------------------------------ 12. Site footer — light mode with named classes ------------------------------------------------------------ Rule 10 above targets generic `footer.bg-dark > a/p/span` which wins for basic text but misses named classes that have their own color declarations (they out-specificity the rule). These targeted overrides cover every site-footer class. */ [data-theme="light"] .site-footer { border-top-color: rgba(20, 50, 100, 0.12); } [data-theme="light"] .site-footer__brand-name { color: #0d1a2e !important; text-shadow: 0 0 14px rgba(247, 244, 237, 0.90), 0 1px 3px rgba(247, 244, 237, 0.80); } [data-theme="light"] .site-footer__tagline { color: #4a6080; } [data-theme="light"] .site-footer__contact-item { color: #2a3a50; } [data-theme="light"] .site-footer__contact-item a { color: #1a4575; text-shadow: none; } [data-theme="light"] .site-footer__contact-item a:hover { color: #0d1a2e; } [data-theme="light"] .site-footer__col-label { color: #1a4575; text-shadow: none; } [data-theme="light"] .site-footer__links a { color: #2a3a50; text-shadow: none; } [data-theme="light"] .site-footer__links a:hover { color: #1a4575; } [data-theme="light"] .site-footer__bottom { border-top-color: rgba(20, 50, 100, 0.10); } [data-theme="light"] .site-footer__bottom-inner { color: #4a6080; } [data-theme="light"] .site-footer__copyright { color: #6a80a0; text-shadow: none; } [data-theme="light"] .site-footer__creds a { color: #4a6080; } /* ── Contact form privacy notice ──────────────────────────────────────────── */ .contact-cta__privacy-note { font-size: 11px; color: rgba(190, 220, 255, 0.45); margin-top: 8px; text-align: center; } .contact-cta__privacy-note a { color: rgba(190, 220, 255, 0.7); text-decoration: underline; } [data-theme="light"] .contact-cta__privacy-note { color: rgba(30, 60, 100, 0.55); } [data-theme="light"] .contact-cta__privacy-note a { color: rgba(30, 60, 100, 0.75); } [data-theme="light"] .site-footer__creds a:hover { color: #1a4575; } /* Luxury Text overrides for specific elements per plan */ h1, h2, .eyebrow, .lede { paint-order: stroke fill; -webkit-text-stroke: 2px var(--block-stroke-color, rgb(0, 8, 24)); text-shadow: 0 0 1px var(--block-stroke-color, rgba(0, 8, 24, 1)), 0 4px 10px rgba(0, 10, 30, 0.55); } /* Fallback variable for light vs dark themes */ :root { --block-stroke-color: rgb(0, 8, 24); } @media (prefers-color-scheme: dark) { /* Set stroke lighter if it's a generic dark theme by default, this can be overridden */ :root { /* Default to contrast against dark backgrounds if necessary */ } } .hero-block--dark, .detailed-block--dark, .stats-block--dark, .team-leaders-block--dark, .case-studies-block--dark, .scoreboard-block--dark { --block-stroke-color: rgba(255, 255, 255, 0.4); } .hero-block--light, .detailed-block--light, .stats-block--light, .team-leaders-block--light, .case-studies-block--light, .scoreboard-block--light { --block-stroke-color: rgb(0, 8, 24); }