/* ========================================================== V2 Core — Shared design system for Home V2 + Blog Article V2 Scoped to body.v2 (added to both templates' ). Contains: design tokens, base reset, container, button system, icon primitives, base pill, header chrome, footer chrome,

-based FAQ, admin-bar sticky offsets. ========================================================== */ body.v2 { /* — Core palette (Home V2 canonical) — */ --v2-ink: #1b2230; --v2-ink-soft: #2c3446; --v2-navy: #0f3b52; --v2-navy-deep: #0a2a3c; --v2-teal: #25a0c9; --v2-teal-dark: #1e8aaf; --v2-teal-pale: #f5fdff; --v2-teal-mist: #e6f5fa; --v2-accent: #f5ba45; --v2-accent-dark: #e5a82a; --v2-cream: #f5efe2; --v2-paper: #f5fdff; --v2-paper-alt: #eef7fa; --v2-line: rgba(26, 20, 80, 0.12); --v2-line-soft: rgba(26, 20, 80, 0.06); --v2-muted: #5a5a75; --v2-muted-soft: #8a93a4; /* Pastel tones (shared) */ --v2-rose: #f4d9d1; --v2-mint: #d1e7d6; --v2-amber: #f0e2c4; --v2-azure: #cee0e7; /* Tone-ink variants (blog category pills) */ --v2-rose-ink: #b04631; --v2-mint-ink: #2f6f44; --v2-amber-ink: #9a6b1a; --v2-azure-ink: #1f6985; /* Shadows */ --v2-shadow-sm: 0 2px 6px -2px rgba(15, 23, 42, 0.08); --v2-shadow: 0 16px 40px -24px rgba(15, 23, 42, 0.18); --v2-shadow-lg: 0 30px 60px -32px rgba(15, 23, 42, 0.22); /* Fonts */ --v2-display: "Cormorant Garamond", "Fraunces", Georgia, serif; --v2-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; margin: 0; padding: 0; background: #fff; color: #222; font-family: var(--v2-sans); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; } body.v2 *, body.v2 *::before, body.v2 *::after { box-sizing: border-box; } body.v2 a { color: inherit; text-decoration: none; } body.v2 img { max-width: 100%; height: auto; display: block; } body.v2 h1, body.v2 h2, body.v2 h3, body.v2 h4 { margin: 0; } body.v2 p { margin: 0; } body.v2 ul, body.v2 ol { margin: 0; padding: 0; list-style: none; } body.v2 button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } body.v2 .v2-wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; position: relative; } /* ============== Buttons ============== */ body.v2 .v2-btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px; font-family: var(--v2-sans); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; text-decoration: none; transition: background 220ms ease, color 220ms ease, transform 220ms ease, border-color 220ms ease; border: 1.5px solid transparent; white-space: nowrap; } body.v2 .v2-btn--block { width: 100%; justify-content: center; } body.v2 .v2-btn--primary { background: var(--v2-teal); color: #fff; border-color: var(--v2-teal); box-shadow: 0 10px 28px -12px rgba(37,160,201,0.55); } body.v2 .v2-btn--primary:hover { background: var(--v2-teal-dark); border-color: var(--v2-teal-dark); color: #fff; transform: translateY(-1px); } body.v2 .v2-btn--accent { background: var(--v2-accent); color: #1b2230; border-color: var(--v2-accent); } body.v2 .v2-btn--accent:hover { background: var(--v2-accent-dark); border-color: var(--v2-accent-dark); color: #1b2230; transform: translateY(-1px); } body.v2 .v2-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); } body.v2 .v2-btn--ghost:hover { background: rgba(255,255,255,0.1); border-color: #fff; } body.v2 .v2-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); } body.v2 .v2-btn--ghost-light:hover { background: rgba(255,255,255,0.1); } body.v2 .v2-btn__arrow { display: inline-block; transition: transform 220ms ease; } body.v2 .v2-btn:hover .v2-btn__arrow { transform: translateX(3px); } /* ============== Icon primitives (monoline, CSS-drawn) ============== */ body.v2 .v2-icon-phone, body.v2 .v2-icon-mail, body.v2 .v2-icon-clock, body.v2 .v2-icon-pin, body.v2 .v2-icon-cal { width: 14px; height: 14px; display: inline-block; position: relative; flex: none; } body.v2 .v2-icon-phone::before { content: ""; position: absolute; inset: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; } body.v2 .v2-icon-mail::before { content: ""; position: absolute; inset: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; } body.v2 .v2-icon-clock::before { content: ""; position: absolute; inset: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; } body.v2 .v2-icon-pin::before { content: ""; position: absolute; inset: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; } body.v2 .v2-icon-cal::before { content: ""; position: absolute; inset: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; } /* ============== Base pill (blog-style generic pill + tone variants) ============== */ body.v2 .v2-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; line-height: 1.4; text-transform: uppercase; } body.v2 .v2-pill--teal { background: var(--v2-teal-mist); color: var(--v2-teal-dark); } body.v2 .v2-pill__dot { width: 6px; height: 6px; border-radius: 50%; background: #84cc16; box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.18); } body.v2 .v2-pill--cat { text-transform: uppercase; font-size: 10px; letter-spacing: 0.1em; padding: 4px 9px; font-weight: 600; } body.v2 .v2-pill--rose { background: var(--v2-rose); color: var(--v2-rose-ink); } body.v2 .v2-pill--mint { background: var(--v2-mint); color: var(--v2-mint-ink); } body.v2 .v2-pill--amber { background: var(--v2-amber); color: var(--v2-amber-ink); } body.v2 .v2-pill--azure { background: var(--v2-azure); color: var(--v2-azure-ink); } /* ========================= HEADER (scoped) ========================= */ body.v2 .v2-header { position: sticky; top: 0; /* Parent Hazel sets `header { z-index: 110 }` globally. Keep the sticky site header above any in-page

tag so section headings don't pierce it on scroll. */ z-index: 120; background: #fff; border-bottom: 1px solid var(--v2-line-soft); box-shadow: 0 1px 0 rgba(15,59,82,0.04), 0 12px 28px -24px rgba(15,59,82,0.18); transition: box-shadow 220ms ease; } body.admin-bar.v2 .v2-header { top: 32px; } @media (max-width: 782px) { body.admin-bar.v2 .v2-header { top: 46px; } } /* Utility bar (row 1) */ body.v2 .v2-header__utility { background: linear-gradient(90deg, var(--v2-teal-dark) 0%, var(--v2-teal) 100%); color: #fff; font-size: 12.5px; letter-spacing: 0.02em; } body.v2 .v2-header__utility-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 9px 0; flex-wrap: wrap; } body.v2 .v2-util-left, body.v2 .v2-util-right { display: inline-flex; align-items: center; gap: 22px; flex-wrap: wrap; } body.v2 .v2-util-phone { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; font-weight: 500; transition: opacity 200ms ease; } body.v2 .v2-util-phone strong { font-weight: 700; letter-spacing: 0.01em; } body.v2 .v2-util-phone:hover { opacity: 0.85; } body.v2 .v2-util-phone .v2-icon-phone { color: var(--v2-accent); } body.v2 .v2-util-links { display: inline-flex; gap: 18px; align-items: center; padding-right: 4px; border-right: 1px solid rgba(255,255,255,0.25); margin-right: 4px; } body.v2 .v2-util-links a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; font-weight: 500; opacity: 0.92; transition: opacity 200ms ease, color 200ms ease; } body.v2 .v2-util-links a span { color: var(--v2-accent); font-size: 14px; line-height: 1; transform: translateY(-1px); transition: transform 200ms ease; } body.v2 .v2-util-links a:hover { opacity: 1; } body.v2 .v2-util-links a:hover span { transform: translate(3px, -1px); } body.v2 .v2-util-social { display: inline-flex; gap: 8px; align-items: center; } body.v2 .v2-util-social a { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 4px; transition: transform 200ms ease, background 200ms ease; } body.v2 .v2-util-social a:hover { background: rgba(255,255,255,0.15); transform: translateY(-1px); } body.v2 .v2-util-social img { width: 20px; height: 20px; display: block; filter: brightness(0) invert(1); } body.v2 .v2-header__bar { padding: 16px 0; background: #fff; } body.v2 .v2-header__inner { display: flex; align-items: center; gap: 24px; justify-content: space-between; flex-wrap: nowrap; } body.v2 .v2-logo { display: inline-flex; flex-direction: column; text-decoration: none; line-height: 1; flex: none; } body.v2 .v2-logo__city { font-family: var(--v2-display); font-weight: 700; font-size: 24px; color: var(--v2-ink); letter-spacing: -0.01em; } body.v2 .v2-logo__tagline { font-size: 10px; letter-spacing: 0.3em; color: var(--v2-ink); opacity: 0.7; text-transform: uppercase; margin-top: 4px; font-weight: 500; } body.v2 .v2-logo--img img { height: 46px; width: auto; display: block; } body.v2 .v2-nav { display: flex; flex: 0 1 auto; justify-content: center; align-items: center; } body.v2 .v2-nav__list { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; gap: 22px; flex-wrap: nowrap; } body.v2 .v2-nav__list > li { position: relative; display: inline-flex; align-items: center; } body.v2 .v2-nav__list a { text-decoration: none; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; color: var(--v2-ink); transition: color 180ms; padding: 6px 0; white-space: nowrap; } body.v2 .v2-nav__list a:hover { color: var(--v2-teal); } body.v2 .v2-nav__list .menu-item-has-children > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: 0.7; } body.v2 .v2-nav__list .sub-menu { position: absolute; top: 100%; left: -14px; min-width: 220px; margin: 0; padding: 10px 0; list-style: none; background: #fff; box-shadow: 0 14px 40px rgba(15, 59, 82, 0.12); border-top: 2px solid var(--v2-teal); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 180ms, transform 180ms, visibility 180ms; z-index: 50; } body.v2 .v2-nav__list > li:hover > .sub-menu, body.v2 .v2-nav__list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } body.v2 .v2-nav__list .sub-menu li { display: block; } body.v2 .v2-nav__list .sub-menu a { display: block; padding: 9px 18px; font-size: 11.5px; letter-spacing: 0.05em; white-space: normal; } body.v2 .v2-nav__list .sub-menu a:hover { background: rgba(15, 59, 82, 0.04); } body.v2 .v2-header__contact { display: flex; align-items: center; gap: 18px; flex: none; white-space: nowrap; } body.v2 .v2-header__phone { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--v2-ink); text-decoration: none; white-space: nowrap; } body.v2 .v2-header__phone .v2-icon-phone { color: var(--v2-teal); } body.v2 .v2-header__cta { padding: 13px 22px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.09em; } /* Mobile nav primitives — CSS-only drawer toggle, shared across all v2 templates. On desktop the drawer is `display: contents`, so the nav + CTA participate in the header flex row exactly as before; the checkbox/burger are inert. */ body.v2 .v2-header__drawer { display: contents; } body.v2 .v2-nav-toggle { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; } body.v2 .v2-nav-burger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; flex: none; color: var(--v2-ink); cursor: pointer; } body.v2 .v2-nav-burger span { display: block; width: 24px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 240ms ease, opacity 180ms ease; } body.v2 .v2-nav-toggle:checked ~ .v2-nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.v2 .v2-nav-toggle:checked ~ .v2-nav-burger span:nth-child(2) { opacity: 0; } body.v2 .v2-nav-toggle:checked ~ .v2-nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } body.v2 .v2-nav-toggle:focus-visible ~ .v2-nav-burger { outline: 2px solid var(--v2-teal); outline-offset: 2px; border-radius: 6px; } /* ========================= FAQ (

-based) ========================= */ body.v2 .v2-faq { background: var(--v2-paper); } body.v2 .v2-faq__list { max-width: 820px; margin: 0 auto; display: grid; gap: 14px; } body.v2 .v2-faq__item { background: #fff; border: 1px solid var(--v2-line-soft); border-radius: 8px; overflow: hidden; } body.v2 .v2-faq__item summary { list-style: none; cursor: pointer; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; font-family: var(--v2-display); font-weight: 500; font-size: 22px; line-height: 1.35; color: var(--v2-ink); } body.v2 .v2-faq__item summary::-webkit-details-marker { display: none; } body.v2 .v2-faq__item summary:hover { color: var(--v2-teal); } body.v2 .v2-faq__icon { font-size: 22px; color: var(--v2-accent-dark); transition: transform 320ms cubic-bezier(.2,.7,.3,1), color 220ms; } body.v2 .v2-faq__item[open] .v2-faq__icon { transform: rotate(90deg); color: var(--v2-teal); } /* Accordion reveal — uses modern ::details-content. Falls back to instant open in older browsers. */ @supports (interpolate-size: allow-keywords) { body.v2 .v2-faq__item { interpolate-size: allow-keywords; } } body.v2 .v2-faq__item::details-content { height: 0; overflow: hidden; opacity: 0; transform: translateY(-4px); transition: height 320ms cubic-bezier(.2,.7,.3,1), opacity 260ms ease, transform 320ms cubic-bezier(.2,.7,.3,1), content-visibility 320ms; transition-behavior: allow-discrete; } body.v2 .v2-faq__item[open]::details-content { height: auto; opacity: 1; transform: translateY(0); } body.v2 .v2-faq__answer { padding: 0 24px 20px; color: var(--v2-muted); font-size: 16px; line-height: 1.7; } /* ========================= FOOTER (scoped) ========================= */ body.v2 .v2-footer { background: radial-gradient(60% 80% at 85% 15%, rgba(37,160,201,0.18), transparent 65%), radial-gradient(50% 70% at 10% 90%, rgba(245,186,69,0.09), transparent 65%), linear-gradient(180deg, #0c2a39 0%, #081c26 100%); color: rgba(255,255,255,0.78); font-size: 13px; line-height: 1.65; position: relative; } body.v2 .v2-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--v2-teal) 0%, var(--v2-teal-dark) 45%, var(--v2-accent) 100%); opacity: 0.9; } body.v2 .v2-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px; padding: 72px 32px 48px; } body.v2 .v2-footer .v2-logo--light .v2-logo__city, body.v2 .v2-footer .v2-logo--light .v2-logo__tagline { color: #fff; opacity: 1; } body.v2 .v2-footer__about { margin: 20px 0 22px; color: rgba(255,255,255,0.75); font-size: 13px; } body.v2 .v2-footer__badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; font-size: 12px; color: #fff; font-weight: 500; } body.v2 .v2-footer__badge-mark { color: #f0b020; font-size: 15px; } body.v2 .v2-footer__heading { font-family: var(--v2-display); font-weight: 600; font-size: 17px; color: #fff; margin: 0 0 18px; } body.v2 .v2-footer__col ul { display: grid; gap: 10px; } body.v2 .v2-footer__col ul a { color: rgba(255,255,255,0.78); text-decoration: none; transition: color 180ms; } body.v2 .v2-footer__col ul a:hover { color: var(--v2-teal); } body.v2 .v2-footer__more { color: #fff !important; font-weight: 500; } body.v2 .v2-footer__contact { display: grid; gap: 16px; } body.v2 .v2-footer__contact li { display: flex; gap: 12px; align-items: flex-start; color: rgba(255,255,255,0.78); } body.v2 .v2-footer__contact li .v2-icon-phone, body.v2 .v2-footer__contact li .v2-icon-mail, body.v2 .v2-footer__contact li .v2-icon-clock, body.v2 .v2-footer__contact li .v2-icon-pin { color: var(--v2-teal); margin-top: 2px; } body.v2 .v2-footer__contact li div { display: flex; flex-direction: column; } body.v2 .v2-footer__contact li strong { color: #fff; font-weight: 500; font-size: 13.5px; } body.v2 .v2-footer__contact li span { font-size: 12px; color: rgba(255,255,255,0.55); } body.v2 .v2-footer__disclaimer { border-top: 1px solid rgba(255,255,255,0.1); padding: 18px 0; } body.v2 .v2-footer__disclaimer p { margin: 0; font-size: 11.5px; line-height: 1.6; color: rgba(255,255,255,0.45); } body.v2 .v2-footer__bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 20px 0; font-size: 12px; color: rgba(255,255,255,0.55); } body.v2 .v2-footer__bottom-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; } body.v2 .v2-footer__bottom nav { display: flex; gap: 22px; } body.v2 .v2-footer__bottom a { color: rgba(255,255,255,0.65); text-decoration: none; transition: color 180ms; } body.v2 .v2-footer__bottom a:hover { color: var(--v2-teal); } /* ========================= RESPONSIVE — shared header + footer chrome ========================= */ @media (max-width: 900px) { /* ---- Header: collapse the primary nav into a tap-to-open drawer ---- */ body.v2 .v2-header__bar { padding: 12px 0; } body.v2 .v2-header__inner { gap: 12px; } body.v2 .v2-nav-burger { display: inline-flex; } /* The wrapper holding nav + CTA becomes a full-width dropdown panel. */ body.v2 .v2-header__drawer { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: #fff; border-top: 1px solid var(--v2-line-soft); box-shadow: 0 26px 40px -22px rgba(15,59,82,0.28); padding: 6px 24px 22px; max-height: calc(100vh - 120px); overflow-y: auto; } body.v2 .v2-nav-toggle:checked ~ .v2-header__drawer { display: flex; } /* Stack the menu vertically. */ body.v2 .v2-nav { display: block; width: 100%; justify-content: flex-start; } body.v2 .v2-nav__list { flex-direction: column; align-items: stretch; gap: 0; flex-wrap: wrap; } body.v2 .v2-nav__list > li { display: block; border-bottom: 1px solid var(--v2-line-soft); } body.v2 .v2-nav__list a { display: block; padding: 13px 2px; font-size: 13px; } /* Sub-menus render inline (hover popups don't work on touch). Without JS they stay expanded; once JS flags the list .v2-nav--enhanced they collapse into tap-to-open accordions (see assets/js/v2-core.js). */ body.v2 .v2-nav__list .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; margin: 0; padding: 0 0 8px 14px; background: transparent; box-shadow: none; border-top: 0; } body.v2 .v2-nav__list .sub-menu a { padding: 9px 2px; font-size: 12px; opacity: 0.82; text-transform: none; letter-spacing: 0.02em; } body.v2 .v2-nav__list.v2-nav--enhanced .sub-menu { display: none; } body.v2 .v2-nav__list.v2-nav--enhanced .menu-item-has-children.is-open > .sub-menu { display: block; } /* Caret: points down when collapsed, flips up when its submenu is open. */ body.v2 .v2-nav__list .menu-item-has-children > a::after { float: right; margin-top: 6px; opacity: 0.5; transition: transform 200ms ease; } body.v2 .v2-nav__list.v2-nav--enhanced .menu-item-has-children.is-open > a::after { transform: translateY(4px) rotate(-135deg); } /* CTA spans the full drawer width. */ body.v2 .v2-header__contact { width: 100%; margin-top: 16px; white-space: normal; } body.v2 .v2-header__cta { width: 100%; justify-content: center; padding: 14px 22px; } /* Utility bar: centre + tidy the phone/links/social row. */ body.v2 .v2-header__utility-inner { gap: 8px 18px; padding: 8px 0; justify-content: center; } body.v2 .v2-util-left, body.v2 .v2-util-right { gap: 14px; justify-content: center; } /* ---- Footer: 4 columns -> 2, brand spans the row ---- */ body.v2 .v2-footer__grid { grid-template-columns: 1fr 1fr; gap: 34px 28px; padding: 56px 24px 40px; } body.v2 .v2-footer__brand { grid-column: 1 / -1; } } @media (max-width: 560px) { /* Tighter gutters for the header rows on phones. */ body.v2 .v2-header__utility { font-size: 12px; } body.v2 .v2-header__inner { padding-left: 18px; padding-right: 18px; } body.v2 .v2-header__utility-inner { padding-left: 18px; padding-right: 18px; } body.v2 .v2-logo--img img { height: 38px; } /* ---- Footer: single column ---- */ body.v2 .v2-footer__grid { grid-template-columns: 1fr; gap: 30px; padding: 48px 20px 36px; } body.v2 .v2-footer__brand { grid-column: auto; } body.v2 .v2-footer__about { max-width: 420px; } body.v2 .v2-footer__disclaimer .v2-wrap, body.v2 .v2-footer__bottom-inner { padding-left: 20px; padding-right: 20px; } body.v2 .v2-footer__bottom-inner { flex-direction: column; align-items: flex-start; gap: 12px; } body.v2 .v2-footer__bottom nav { flex-wrap: wrap; gap: 12px 18px; } }