/* ========================================================================== Everstone Insurance Services — shared design system Single source of truth for colour, type, layout and responsive behaviour. Every *.dc.html page links this file; edit here to change the whole site. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens Contrast notes (WCAG AA, verified): white on --gold-btn (#8A6420) = 5.35:1 âœ“ button text navy on --gold-500 (#C0912F) = 5.33:1 --body on white = 7.55:1 --muted on white = 4.60:1 --gold-400 on --navy-800 = 6.90:1 âœ“ footer links #C0912F stays the decorative accent; buttons use the deeper #8A6420 so the requested white label actually clears AA (white on #C0912F is only 2.86:1). -------------------------------------------------------------------------- */ :root { /* Navy */ --navy-900: #0C1829; --navy-800: #101F35; --navy-700: #12263F; --navy-600: #14263F; --ink: #1B2A3D; /* Text */ --body: #4A5566; --muted: #6B7687; --on-dark: #EEF2F7; --on-dark-muted: #9AA7B8; /* Gold */ --gold-btn: #8A6420; --gold-btn-h: #74531A; --gold-700: #8A6420; --gold-600: #A97C23; --gold-500: #C0912F; --gold-400: #C9A24A; --gold-300: #D9B15A; --gold-200: #E3C88A; --gold-100: #EFE1C4; /* Cream / surface */ --cream-50: #FBF7EF; --cream-100: #F8F4EC; --cream-150: #F7F2E6; --cream-200: #F3EADA; --surface: #FFFFFF; /* Lines */ --line: #EAE3D5; --line-2: #E8E1D3; /* Layout */ --wrap: 1408px; --gutter: clamp(20px, 4vw, 24px); --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; /* Section rhythm — collapses on small screens */ --section-y: clamp(56px, 8vw, 104px); --section-y-sm: clamp(40px, 6vw, 72px); /* Elevation */ --shadow-card: 0 16px 40px rgba(20, 32, 48, .10); --shadow-soft: 0 10px 30px rgba(30, 33, 36, .10); --shadow-pop: 0 18px 44px rgba(20, 32, 48, .14); --focus: 0 0 0 3px rgba(192, 145, 47, .45); } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--surface); color: var(--ink); font-family: proxima-nova, Mulish, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; /* NOT overflow-x: hidden. On that forces overflow-y to `auto`, which turns the body into a scroll container and silently breaks every `position: sticky` on the page. `clip` contains horizontal overflow the same way without creating a scrollport. */ overflow-x: clip; } img { max-width: 100%; } a { color: var(--navy-700); text-decoration: none; } a:hover { color: var(--gold-600); } :where(a, button, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; } /* The page shell. Replaces the old `min-width: 1408px`, which was the single biggest reason the original layout could not shrink. */ .es-page { font-family: proxima-nova, Mulish, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; color: var(--ink); background: var(--surface); width: 100%; overflow-x: clip; } .es-container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .es-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Skip link */ .es-skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--navy-800); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 600; transition: top .18s ease; } .es-skip:focus { top: 12px; color: #fff; } /* -------------------------------------------------------------------------- 3. Typography — fluid, no fixed desktop-only sizes -------------------------------------------------------------------------- */ .es-h1 { margin: 0; font-size: clamp(32px, 5.2vw, 60px); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; color: var(--navy-700); text-wrap: balance; } .es-h2 { margin: 0; font-size: clamp(26px, 3.6vw, 42px); line-height: 1.2; font-weight: 700; letter-spacing: -.018em; color: var(--navy-700); text-wrap: balance; } .es-h2--sm { font-size: clamp(24px, 3vw, 36px); } .es-h3 { margin: 0; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.35; font-weight: 700; color: var(--navy-700); text-wrap: balance; } .es-h4 { margin: 0; font-size: clamp(17px, 1.3vw, 18px); line-height: 1.4; font-weight: 700; color: var(--navy-700); } .es-lead { margin: 0; font-size: clamp(16.5px, 1.5vw, 19px); line-height: 1.7; color: var(--body); text-wrap: pretty; } .es-text { margin: 0; font-size: clamp(15.5px, 1.2vw, 16.5px); line-height: 1.75; color: var(--body); text-wrap: pretty; } .es-meta { margin: 0; font-size: 14.5px; color: var(--muted); } .es-center { text-align: center; } .es-measure { max-width: 68ch; } .es-measure-wide { max-width: 90ch; } .es-mx-auto { margin-left: auto; margin-right: auto; } .es-eyebrow { display: inline-block; background: var(--gold-100); color: var(--gold-700); font-size: 13.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 7px 18px; border-radius: 999px; } .es-eyebrow--dark { background: rgba(201, 162, 74, .18); color: var(--gold-300); } .es-stack { display: flex; flex-direction: column; } .es-gap-8 { gap: 8px; } .es-gap-12 { gap: 12px; } .es-gap-16 { gap: 16px; } .es-gap-20 { gap: 20px; } .es-gap-24 { gap: 24px; } .es-gap-32 { gap: 32px; } .es-mt-16 { margin-top: 16px; } .es-mt-20 { margin-top: 20px; } .es-mt-24 { margin-top: 24px; } .es-mt-32 { margin-top: 32px; } .es-mt-40 { margin-top: 40px; } .es-mt-56 { margin-top: clamp(32px, 5vw, 56px); } /* -------------------------------------------------------------------------- 4. Buttons Gold buttons carry WHITE labels on the deeper --gold-btn. -------------------------------------------------------------------------- */ .es-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font: inherit; font-size: clamp(15px, 1.2vw, 16px); font-weight: 600; line-height: 1.2; padding: 14px 24px; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; text-align: center; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; } .es-btn:active { transform: translateY(1px); } .es-btn--primary { background: var(--gold-btn); color: #FFFFFF; } .es-btn--primary:hover { background: var(--gold-btn-h); color: #FFFFFF; } .es-btn--navy { background: var(--navy-700); color: #FFFFFF; } .es-btn--navy:hover { background: var(--navy-900); color: #FFFFFF; } .es-btn--outline { background: transparent; color: var(--navy-700); border-color: var(--gold-500); } .es-btn--outline:hover { background: var(--gold-100); color: var(--navy-700); } /* On navy backgrounds */ .es-btn--onDark { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.55); } .es-btn--onDark:hover { background: rgba(255,255,255,.12); color: #FFFFFF; } .es-btn--block { width: 100%; } .es-link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--gold-600); } .es-link-arrow:hover { color: var(--gold-btn-h); } .es-link-arrow span { font-size: 17px; transition: transform .18s ease; } .es-link-arrow:hover span { transform: translateX(3px); } /* -------------------------------------------------------------------------- 5. Utility bar + header + navigation -------------------------------------------------------------------------- */ /* The utility bar sits ABOVE the sticky header and is deliberately NOT sticky: it scrolls away with the page and only the header pins to the top. That is why it is a sibling of .es-header rather than a row inside it — a row inside a sticky element is dragged along by definition, and the requirement is the opposite. Height is therefore free to be whatever reads best; nothing below depends on it. */ /* Warm light grey rather than navy: the bar is a utility strip, and a dark band across the top of every page competes with the header for attention instead of sitting quietly above it. Contrast on #EFEDE9, all verified against WCAG AA: --body 6.38:1 the "Call us" label --navy-700 high the number itself --gold-btn 4.58:1 the links */ .es-topbar { position: relative; z-index: 51; background: #EFEDE9; color: var(--body); border-bottom: 1px solid var(--line); font-size: 13.5px; } .es-topbar__inner { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); min-height: 40px; display: flex; align-items: center; justify-content: flex-end; gap: 10px 22px; flex-wrap: wrap; } .es-topbar__item { display: inline-flex; align-items: center; gap: 8px; padding: 9px 0; font-weight: 600; letter-spacing: .01em; line-height: 1.2; white-space: nowrap; } .es-topbar a.es-topbar__item { color: var(--navy-700); transition: color .18s ease; } .es-topbar a.es-topbar__item:hover, .es-topbar a.es-topbar__item:focus-visible { color: var(--gold-btn); } .es-topbar a.es-topbar__login { color: var(--gold-btn); } .es-topbar a.es-topbar__login:hover, .es-topbar a.es-topbar__login:focus-visible { color: var(--gold-btn-h); } .es-topbar__item svg { flex: 0 0 auto; width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .es-topbar__label { color: var(--muted); font-weight: 500; } /* Divider between the two items — a border, not a character, so it never gets read out by a screen reader or selected with the text. */ .es-topbar__login { border-left: 1px solid var(--line-2); padding-left: 22px; } .es-topbar a.es-topbar__item:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-sm); } .es-header { position: sticky; top: 0; left: 0; right: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); } .es-header--static { position: relative; } .es-header__inner { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .es-logo { display: flex; align-items: center; flex: 0 0 auto; } .es-logo img { display: block; height: clamp(40px, 5vw, 58px); width: auto; } /* The nav and its items stretch to the full header height on purpose. The button itself is only ~35px tall inside an 84px header; if the item box stopped at the button, moving the pointer down toward the panel would cross ~25px belonging to neither the item nor the dropdown, firing mouseleave and closing the menu before it could be reached. */ .es-nav { display: flex; align-items: center; align-self: stretch; gap: clamp(18px, 2.4vw, 40px); } /* Deliberately NOT position:relative — the mega panel anchors to the header so it is centred in the page and can never be pushed past the viewport edge. */ .es-nav__item { position: static; align-self: stretch; display: flex; align-items: center; } .es-nav__link { display: flex; align-items: center; gap: 7px; background: none; border: 0; padding: 8px 0; font: inherit; font-size: clamp(14.5px, 1.1vw, 16px); font-weight: 600; color: var(--navy-600); white-space: nowrap; cursor: pointer; } .es-nav__link:hover { color: var(--gold-600); } .es-caret { display: block; width: 8px; height: 8px; flex: 0 0 auto; border-right: 2px solid #7C8698; border-bottom: 2px solid #7C8698; transform: rotate(45deg) translateY(-2px); transition: transform .25s cubic-bezier(.22, 1, .36, 1), border-color .18s ease; } .es-nav__link--open .es-caret, .es-caret--up { transform: rotate(-135deg) translateY(-2px); border-color: var(--gold-600); } /* ---- Mega dropdown ------------------------------------------------------ Stays in the DOM at all times and is toggled by class, so it can animate out as well as in. Closed state is inert: hidden from AT and unclickable. */ .es-dropdown { position: absolute; top: 100%; left: 50%; z-index: 60; padding-top: 16px; width: max-content; max-width: min(820px, calc(100vw - 40px)); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(-10px) scale(.985); transform-origin: top center; transition: opacity .22s ease, transform .28s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .3s; } .es-dropdown--open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); transition: opacity .2s ease, transform .34s cubic-bezier(.22, 1, .36, 1), visibility 0s; } .es-mega { background: var(--cream-50); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-pop); padding: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .es-mega__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 14px; padding: 15px 16px; min-width: 0; background: #fff; border: 1px solid transparent; border-radius: 10px; color: inherit; transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; /* staggered entrance, driven by the parent's open state */ opacity: 0; transform: translateY(6px); } .es-dropdown--open .es-mega__item { opacity: 1; transform: none; transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .26s cubic-bezier(.22, 1, .36, 1), opacity .26s ease; } .es-dropdown--open .es-mega__item:nth-child(1) { transition-delay: .04s; } .es-dropdown--open .es-mega__item:nth-child(2) { transition-delay: .07s; } .es-dropdown--open .es-mega__item:nth-child(3) { transition-delay: .10s; } .es-dropdown--open .es-mega__item:nth-child(4) { transition-delay: .13s; } .es-dropdown--open .es-mega__item:nth-child(5) { transition-delay: .16s; } .es-dropdown--open .es-mega__item:nth-child(6) { transition-delay: .19s; } .es-mega__item:hover { background: #fff; border-color: var(--gold-200); box-shadow: 0 8px 22px rgba(20, 32, 48, .09); transform: translateY(-2px); transition-delay: 0s; } .es-mega__icon { width: 24px; height: 24px; margin-top: 2px; flex: 0 0 auto; color: var(--gold-600); background-color: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; transition: color .18s ease; } .es-mega__item:hover .es-mega__icon { color: var(--gold-btn); } .es-mega__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .es-mega__title { font-size: 15.5px; font-weight: 700; color: var(--navy-700); } .es-mega__desc { font-size: 13.5px; line-height: 1.5; color: var(--muted); } .es-mega__chevron { width: 8px; height: 8px; margin-top: 7px; flex: 0 0 auto; border-right: 2px solid #A9B2C0; border-top: 2px solid #A9B2C0; transform: rotate(45deg); transition: transform .18s ease, border-color .18s ease; } .es-mega__item:hover .es-mega__chevron { border-color: var(--gold-600); transform: rotate(45deg) translate(2px, -2px); } .es-header__cta { flex: 0 0 auto; } /* Hamburger — hidden until the desktop nav no longer fits */ .es-burger { display: none; flex: 0 0 auto; width: 46px; height: 46px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; } .es-burger__bars, .es-burger__bars::before, .es-burger__bars::after { content: ""; display: block; width: 20px; height: 2px; background: var(--navy-700); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } .es-burger__bars { position: relative; } .es-burger__bars::before { position: absolute; top: -6px; } .es-burger__bars::after { position: absolute; top: 6px; } .es-burger[aria-expanded="true"] .es-burger__bars { background: transparent; } .es-burger[aria-expanded="true"] .es-burger__bars::before { transform: translateY(6px) rotate(45deg); } .es-burger[aria-expanded="true"] .es-burger__bars::after { transform: translateY(-6px) rotate(-45deg); } /* ---- Mobile drawer ------------------------------------------------------ Height animates via grid-template-rows 0fr -> 1fr, which transitions smoothly without needing to know the content height up front. */ .es-mobile { display: none; } .es-mobile__group { border-bottom: 1px solid var(--line); padding: 4px 0; } .es-mobile__group:last-of-type { border-bottom: 0; } .es-mobile__toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 2px; background: none; border: 0; font: inherit; font-size: 16.5px; font-weight: 700; color: var(--navy-700); text-align: left; cursor: pointer; transition: color .18s ease; } .es-mobile__toggle:hover { color: var(--gold-600); } .es-mobile__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s cubic-bezier(.22, 1, .36, 1); } .es-mobile__panel--open { grid-template-rows: 1fr; } .es-mobile__panelInner { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 2px; } .es-mobile__link { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 13px; align-items: start; padding: 12px; border-radius: 9px; color: #3B4759; transition: background-color .18s ease, transform .18s ease; opacity: 0; transform: translateY(-4px); } .es-mobile__panel--open .es-mobile__link { opacity: 1; transform: none; transition: background-color .18s ease, opacity .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1); } .es-mobile__panel--open .es-mobile__link:nth-child(1) { transition-delay: .04s; } .es-mobile__panel--open .es-mobile__link:nth-child(2) { transition-delay: .08s; } .es-mobile__panel--open .es-mobile__link:nth-child(3) { transition-delay: .12s; } .es-mobile__panel--open .es-mobile__link:nth-child(4) { transition-delay: .16s; } .es-mobile__panel--open .es-mobile__link:nth-child(5) { transition-delay: .20s; } .es-mobile__panel--open .es-mobile__link:nth-child(6) { transition-delay: .24s; } .es-mobile__link:active { background: var(--cream-100); } .es-mobile__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .es-mobile__title { font-size: 16px; font-weight: 600; color: var(--navy-700); } .es-mobile__desc { font-size: 13.5px; line-height: 1.5; color: var(--muted); } .es-mobile__cta { margin-top: 22px; } /* ---- Icons (CSS masks, so they inherit currentColor) --------------------- */ .es-i-cap { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10 12 5 2 10l10 5z'/%3E%3Cpath d='M6 12v5c3 2.5 9 2.5 12 0v-5'/%3E%3Cpath d='M22 10v6'/%3E%3C/svg%3E"); } .es-i-list { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M12 11h4M12 16h4M8 11h.01M8 16h.01'/%3E%3C/svg%3E"); } .es-i-calendar { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); } .es-i-dollar { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1v22'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E"); } .es-i-shield { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); } .es-i-pin { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); } .es-i-heart { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7z'/%3E%3C/svg%3E"); } .es-i-layers { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 9 5-9 5-9-5z'/%3E%3Cpath d='m3 12 9 5 9-5'/%3E%3Cpath d='m3 17 9 5 9-5'/%3E%3C/svg%3E"); } .es-i-pill { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m10.5 20.5 10-10a4.95 4.95 0 1 0-7-7l-10 10a4.95 4.95 0 1 0 7 7z'/%3E%3Cpath d='m8.5 8.5 7 7'/%3E%3C/svg%3E"); } .es-i-news { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 2v5h5'/%3E%3Cpath d='M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E"); } .es-i-play { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m10 8 6 4-6 4z'/%3E%3C/svg%3E"); } .es-i-book { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E"); } .es-i-alert { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E"); } .es-i-building { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M9 22v-4h6v4'/%3E%3Cpath d='M8 6h.01M12 6h.01M16 6h.01M8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M16 14h.01'/%3E%3C/svg%3E"); } .es-i-star { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E"); } .es-i-users { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); } .es-i-mail { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E"); } /* -------------------------------------------------------------------------- 6. Sections & layout primitives -------------------------------------------------------------------------- */ .es-section { padding: var(--section-y) 0; } .es-section--tight { padding: var(--section-y-sm) 0; } .es-section--white { background: var(--surface); } .es-section--cream { background: var(--cream-150); } .es-section--cream-soft { background: var(--cream-50); } .es-section--grad-down { background: linear-gradient(180deg, #FBF7EF 0%, #FDFBF6 60%, #FFFFFF 100%); } .es-section--grad-up { background: linear-gradient(180deg, #FFFFFF 0%, #FBF7EF 100%); } .es-section--grad-top { background: linear-gradient(180deg, #FBF7EF 0%, #FFFFFF 45%); } .es-section--navy { background: var(--navy-800); color: var(--on-dark); } .es-section--navy .es-h2, .es-section--navy .es-h3 { color: #fff; } .es-section--navy .es-lead, .es-section--navy .es-text { color: #C8D2E0; } /* Two-column split that stacks cleanly */ .es-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); align-items: center; } .es-split--media-first > .es-split__media { order: -1; } /* Card grids: auto-fit keeps them sane at every width */ .es-grid { display: grid; gap: clamp(20px, 2.6vw, 36px); } .es-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .es-grid--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); } .es-grid--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .es-card { border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: box-shadow .22s ease, transform .22s ease; } .es-card:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); } .es-card__media { aspect-ratio: 16 / 9; background-color: var(--cream-200); overflow: hidden; } .es-card__media img, .es-media img { display: block; width: 100%; height: 100%; object-fit: cover; } .es-card__body { padding: clamp(18px, 2vw, 24px); display: flex; flex-direction: column; gap: 12px; flex: 1; } .es-media { border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-soft); background: var(--gold-100); } /* Image slot placeholder — swap the block for an when art arrives. The label comes from data-label so each slot says what belongs there. */ .es-media--slot, .es-card__media--slot { display: grid; place-items: center; background: linear-gradient(135deg, var(--cream-200) 0%, var(--gold-100) 100%); } .es-media--slot::after, .es-card__media--slot::after { content: attr(data-label); padding: 0 18px; font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gold-700); opacity: .8; text-align: center; line-height: 1.6; } .es-media--3x2 { aspect-ratio: 3 / 2; } .es-media--4x3 { aspect-ratio: 4 / 3; } .es-media--1x1 { aspect-ratio: 1 / 1; } .es-media--plain { box-shadow: none; background: none; border-radius: 0; } /* Plain feature tile (no image) */ .es-tile { background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); padding: clamp(20px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 12px; height: 100%; } .es-tile--cream { background: var(--cream-50); } .es-tile__icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--gold-100); color: var(--gold-700); font-size: 20px; font-weight: 800; flex: 0 0 auto; } /* Checklist */ .es-checklist { display: flex; flex-direction: column; gap: 18px; } .es-check { display: flex; align-items: flex-start; gap: 14px; } .es-check__mark { flex: 0 0 auto; width: 21px; height: 21px; margin-top: 3px; border-radius: 50%; border: 2px solid var(--gold-500); position: relative; } .es-check__mark::after { content: ""; position: absolute; left: 4px; top: 5px; width: 9px; height: 5px; border-left: 2px solid var(--gold-500); border-bottom: 2px solid var(--gold-500); transform: rotate(-45deg); } .es-check__text { font-size: 16px; font-weight: 600; color: var(--navy-600); } /* Numbered / bulleted prose lists */ .es-list { margin: 0; padding-left: 1.25em; color: var(--body); font-size: 16px; line-height: 1.8; } .es-list li { margin-bottom: 8px; } .es-list li::marker { color: var(--gold-600); font-weight: 700; } /* Stats */ .es-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(16px, 2.5vw, 32px); } .es-stat { text-align: center; } .es-stat__num { font-size: clamp(30px, 4vw, 44px); font-weight: 800; line-height: 1.1; color: var(--gold-600); } .es-stat__label { margin-top: 6px; font-size: 15.5px; color: var(--body); } .es-section--navy .es-stat__num { color: var(--gold-300); } .es-section--navy .es-stat__label { color: var(--on-dark-muted); } /* Tables — always scrollable rather than blowing out the page */ .es-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; } .es-table { width: 100%; border-collapse: collapse; min-width: 620px; font-size: 15.5px; } .es-table th, .es-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line-2); } .es-table thead th { background: var(--cream-100); color: var(--navy-700); font-weight: 700; white-space: nowrap; } .es-table tbody tr:last-child td { border-bottom: 0; } .es-table td { color: var(--body); } /* Accordion / FAQ */ .es-faq { display: flex; flex-direction: column; gap: 14px; } .es-faq__item { border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; overflow: hidden; } .es-faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px clamp(18px, 2vw, 24px); background: none; border: 0; font: inherit; font-size: clamp(16px, 1.3vw, 17.5px); font-weight: 700; color: var(--navy-700); text-align: left; cursor: pointer; } .es-faq__sign { flex: 0 0 auto; width: 22px; height: 22px; position: relative; } .es-faq__sign::before, .es-faq__sign::after { content: ""; position: absolute; background: var(--gold-600); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } .es-faq__sign::before { top: 10px; left: 2px; width: 18px; height: 2px; } .es-faq__sign::after { left: 10px; top: 2px; width: 2px; height: 18px; } .es-faq__item--open .es-faq__sign::after { transform: scaleY(0); opacity: 0; } .es-faq__a { padding: 0 clamp(18px, 2vw, 24px) 22px; font-size: 16px; line-height: 1.8; color: var(--body); } /* Tab strip (About "Our Journey") */ .es-tabs { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 4px; } .es-tab { background: #fff; border: 1px solid var(--line-2); border-radius: 999px; padding: 10px 22px; font: inherit; font-size: 15.5px; font-weight: 700; color: var(--body); cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .es-tab:hover { border-color: var(--gold-500); color: var(--navy-700); } .es-tab--active { background: var(--gold-btn); border-color: var(--gold-btn); color: #fff; } .es-tab--active:hover { background: var(--gold-btn-h); color: #fff; } /* Journey panels — all rendered, one shown */ .es-journey { max-width: 900px; } .es-journey__panel { display: none; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 40px); } .es-journey__panel--active { display: block; animation: es-rise .4s cubic-bezier(.22, 1, .36, 1) both; } /* CTA band */ .es-cta { background: var(--navy-800); border-radius: var(--radius-lg); padding: clamp(32px, 5vw, 64px) clamp(24px, 4vw, 56px); text-align: center; color: var(--on-dark); } .es-cta .es-h2 { color: #fff; } .es-cta .es-lead { color: #C8D2E0; } .es-cta__actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; } /* The state directory is a fixed 3-up grid, as on the source site, rather than auto-fit — which packed four narrow cards in at 1440px. */ .es-grid--states { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .es-grid--states { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .es-grid--states { grid-template-columns: minmax(0, 1fr); } } /* State directory cards: artwork, pin + name, description, Learn More button */ .es-state-card__name { margin: 0; display: flex; align-items: center; gap: 9px; font-size: clamp(18px, 1.5vw, 20px); font-weight: 700; color: var(--navy-700); } .es-state-card__pin { width: 19px; height: 19px; flex: 0 0 auto; background-color: var(--gold-600); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; } .es-state-card__btn { align-self: flex-start; margin-top: 4px; } /* Topic sub-navigation — scrolls sideways instead of wrapping into a mess */ .es-subnav { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 6px; margin-top: 24px; } .es-subnav a { flex: 0 0 auto; padding: 9px 18px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; font-size: 15px; font-weight: 600; color: var(--body); white-space: nowrap; } .es-subnav a:hover { border-color: var(--gold-500); color: var(--navy-700); } .es-subnav a[aria-current="page"] { background: var(--navy-700); border-color: var(--navy-700); color: #fff; } /* Sidebar: table of contents */ .es-toc { margin: 0; padding-left: 1.1em; list-style: disc; } .es-toc li { margin-bottom: 10px; } .es-toc li::marker { color: var(--gold-500); } .es-toc a { font-size: 15.5px; font-weight: 600; color: var(--navy-700); line-height: 1.45; } .es-toc a:hover { color: var(--gold-600); } /* Sidebar: featured posts with thumbnails */ .es-postlist { display: flex; flex-direction: column; gap: 10px; } .es-post { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px; background: #fff; border: 1px solid var(--line-2); border-radius: 10px; color: inherit; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .es-post:hover { border-color: var(--gold-200); box-shadow: 0 8px 20px rgba(20, 32, 48, .08); transform: translateY(-2px); } .es-post__media { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--cream-200); flex: 0 0 auto; } .es-post__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .es-post__title { font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--navy-700); } .es-post__arrow { width: 8px; height: 8px; flex: 0 0 auto; border-right: 2px solid var(--gold-500); border-top: 2px solid var(--gold-500); transform: rotate(45deg); transition: transform .18s ease; } .es-post:hover .es-post__arrow { transform: rotate(45deg) translate(2px, -2px); } .es-i-download { width: 16px; height: 16px; background-color: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E"); } /* Article + sidebar */ .es-article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 4vw, 56px); align-items: start; } /* Pinned below the header, bounded by its grid area: it holds position while the article scrolls past, then releases at the end of the article so the last tile is reachable. No inner scrollbar, no JS. */ .es-sidebar { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: 24px; } @media (max-width: 1024px) { /* minmax(0, 1fr), never plain 1fr: a grid track defaults to min-width:auto, so the 620px min-width tables inside would stretch the column wider than the phone screen and clip every paragraph. */ .es-article-layout { grid-template-columns: minmax(0, 1fr); } .es-sidebar { position: static; } } .es-article-layout > * { min-width: 0; } /* Long-form prose */ .es-prose > * + * { margin-top: 20px; } .es-prose h2 { margin: 0; padding-top: clamp(20px, 3vw, 32px); font-size: clamp(24px, 2.8vw, 32px); line-height: 1.25; font-weight: 700; letter-spacing: -.015em; color: var(--navy-700); } .es-prose h3 { margin: 0; padding-top: 8px; font-size: clamp(19px, 1.8vw, 22px); line-height: 1.35; font-weight: 700; color: var(--navy-700); } .es-prose h4 { margin: 0; font-size: 17px; font-weight: 700; color: var(--navy-700); } .es-prose p { margin: 0; font-size: clamp(15.5px, 1.2vw, 16.5px); line-height: 1.8; color: var(--body); } .es-prose ul, .es-prose ol { margin: 0; padding-left: 1.3em; color: var(--body); font-size: clamp(15.5px, 1.2vw, 16.5px); line-height: 1.8; } .es-prose li { margin-bottom: 8px; } .es-prose li::marker { color: var(--gold-600); font-weight: 700; } .es-prose strong { color: var(--navy-700); } /* Callout inside prose */ .es-note { border-left: 4px solid var(--gold-500); background: var(--cream-50); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 18px 22px; font-size: 16px; line-height: 1.75; color: var(--body); } .es-note strong { color: var(--navy-700); } /* -------------------------------------------------------------------------- Appointment scheduler -------------------------------------------------------------------------- */ .es-sched__tz { display: flex; gap: 14px; align-items: flex-start; background: var(--cream-50); border: 1px solid var(--line); border-left: 4px solid var(--gold-500); border-radius: var(--radius); padding: 18px 20px; } .es-sched__tzIcon { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px; background-color: var(--gold-600); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); } .es-sched__tzMain { margin: 0; font-size: 16px; color: var(--navy-700); font-weight: 600; } .es-sched__tzSub { margin: 6px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--body); } .es-sched__tzMain strong, .es-sched__tzSub strong { color: var(--navy-700); } .es-sched__h { margin: 0 0 16px; } /* Testimonials */ .es-stars { color: var(--gold-500); font-size: 17px; letter-spacing: 2px; line-height: 1; } .es-review__by { display: flex; align-items: center; gap: 12px; margin-top: 4px; } .es-review__avatar { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--gold-100); color: var(--gold-700); font-size: 14px; font-weight: 800; letter-spacing: .5px; } /* The booking page has no hero to lead it in, so it fades up on load rather than snapping into place once the script hydrates. */ @keyframes es-sched-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .es-sched { animation: es-sched-in .45s cubic-bezier(.22, 1, .36, 1) both; } .es-sched .es-steps { animation: es-sched-in .5s cubic-bezier(.22, 1, .36, 1) .06s both; } .es-sched .es-sched__tz { animation: es-sched-in .5s cubic-bezier(.22, 1, .36, 1) .14s both; } .es-sched .es-stage { animation: es-sched-in .55s cubic-bezier(.22, 1, .36, 1) .22s both; } @media (prefers-reduced-motion: reduce) { .es-sched, .es-sched .es-steps, .es-sched .es-sched__tz, .es-sched .es-stage { animation: none; } } /* Step indicator */ .es-steps { display: flex; flex-wrap: wrap; gap: clamp(12px, 3vw, 32px); margin: 0 0 clamp(20px, 3vw, 28px); padding: 0; list-style: none; } .es-steps__i { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--muted); transition: color .25s ease; } .es-steps__i span { width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line-2); font-size: 13px; font-weight: 800; transition: background-color .25s ease, border-color .25s ease, color .25s ease; } .es-steps__i--on { color: var(--navy-700); } .es-steps__i--on span { background: var(--gold-btn); border-color: var(--gold-btn); color: #fff; } .es-steps__i--done { color: var(--gold-700); } .es-steps__i--done span { background: var(--gold-100); border-color: var(--gold-200); color: var(--gold-700); } /* Sliding stage */ .es-stage { overflow: hidden; } .es-stage__track { display: flex; align-items: flex-start; transition: transform .5s cubic-bezier(.22, 1, .36, 1); } .es-stage__panel { flex: 0 0 100%; min-width: 0; opacity: .25; transition: opacity .35s ease; } .es-stage__panel--on { opacity: 1; } .es-sched__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; } .es-sched__actions .es-btn { flex: 1 1 auto; } .es-sched__err { margin: 0 0 12px; padding: 10px 14px; background: #FCF2EF; border-left: 3px solid #B4442E; border-radius: 4px; font-size: 14.5px; color: #8A2E1D; } /* Confirmation */ @keyframes es-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes es-fade-up { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } } .es-done { text-align: center; max-width: 640px; margin: 0 auto; padding: clamp(16px, 3vw, 32px) 0; } .es-done__tick { width: 64px; height: 64px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 50%; background: var(--gold-100); animation: es-pop .45s cubic-bezier(.34, 1.56, .64, 1) both; } .es-done__tick::after { content: ""; width: 22px; height: 12px; border-left: 3px solid var(--gold-700); border-bottom: 3px solid var(--gold-700); transform: rotate(-45deg) translate(2px, -3px); } .es-stage__panel--on .es-done__h { animation: es-fade-up .5s ease .08s both; } .es-stage__panel--on .es-done__sub { animation: es-fade-up .5s ease .16s both; } .es-stage__panel--on .es-done__pt { animation: es-fade-up .5s ease .22s both; } .es-stage__panel--on .es-done__add { animation: es-fade-up .5s ease .28s both; } .es-done__sub { margin: 10px 0 0; color: var(--navy-700); font-weight: 700; } .es-done__pt { margin: 8px 0 0; } .es-done__add { margin: 28px 0 14px; font-weight: 700; color: var(--navy-700); } .es-done__cals { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .es-cal-btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-sm); font-size: 15px; font-weight: 600; color: var(--navy-700); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .es-cal-btn:hover { border-color: var(--gold-500); box-shadow: 0 8px 20px rgba(20, 32, 48, .1); transform: translateY(-2px); color: var(--navy-700); } .es-stage__panel--on .es-cal-btn:nth-child(1) { animation: es-fade-up .45s ease .34s both; } .es-stage__panel--on .es-cal-btn:nth-child(2) { animation: es-fade-up .45s ease .42s both; } .es-stage__panel--on .es-cal-btn:nth-child(3) { animation: es-fade-up .45s ease .50s both; } .es-cal-btn__i { width: 18px; height: 18px; flex: 0 0 auto; background-color: var(--gold-600); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; } .es-i-google { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3Cpath d='M12 14v4M10 16h4'/%3E%3C/svg%3E"); } .es-i-ms { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='2' y='2' width='9.2' height='9.2'/%3E%3Crect x='12.8' y='2' width='9.2' height='9.2'/%3E%3Crect x='2' y='12.8' width='9.2' height='9.2'/%3E%3Crect x='12.8' y='12.8' width='9.2' height='9.2'/%3E%3C/svg%3E"); } .es-i-apple { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M16.4 12.8c0-2.3 1.9-3.4 2-3.5-1.1-1.6-2.8-1.8-3.4-1.8-1.4-.1-2.8.9-3.5.9-.7 0-1.8-.9-3-.8-1.5 0-2.9.9-3.7 2.3-1.6 2.7-.4 6.8 1.1 9 .8 1.1 1.7 2.3 2.9 2.3 1.2 0 1.6-.7 3-.7s1.8.7 3 .7c1.2 0 2-1.1 2.8-2.2.9-1.3 1.2-2.5 1.3-2.6-.1 0-2.5-1-2.5-3.6zM14.2 5.6c.6-.8 1.1-1.9 1-3-.9 0-2.1.6-2.8 1.4-.6.7-1.2 1.8-1 2.9 1 .1 2.1-.5 2.8-1.3z'/%3E%3C/svg%3E"); } /* Calendar and times side by side, both in the first screen. */ .es-sched-page { padding-top: clamp(24px, 3vw, 40px); } .es-sched__cols { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; margin-top: clamp(24px, 3vw, 32px); } .es-sched__col { min-width: 0; } /* Step 2 flips the proportions: the form gets the room, the recap is a summary. */ .es-sched__cols--form { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); } @media (max-width: 860px) { .es-sched__cols, .es-sched__cols--form { grid-template-columns: minmax(0, 1fr); } } /* Month-grid day picker */ .es-cal { background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: clamp(14px, 2vw, 20px); max-width: 460px; } .es-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .es-cal__month { font-size: 17px; font-weight: 700; color: var(--navy-700); } .es-cal__nav { width: 36px; height: 36px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line-2); border-radius: 50%; cursor: pointer; transition: border-color .18s ease, background-color .18s ease, opacity .18s ease; } .es-cal__nav:hover:not(:disabled) { border-color: var(--gold-500); background: var(--cream-50); } .es-cal__nav:disabled { opacity: .35; cursor: default; } .es-cal__chev { width: 8px; height: 8px; border-right: 2px solid var(--navy-700); border-top: 2px solid var(--navy-700); transform: rotate(45deg) translate(-1px, 1px); } .es-cal__chev--l { transform: rotate(-135deg) translate(-1px, 1px); } .es-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .es-cal__dow { padding: 6px 0 8px; text-align: center; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .es-cal__pad { aspect-ratio: 1; } .es-cal__day { aspect-ratio: 1; display: grid; place-items: center; border: 1px solid transparent; border-radius: 9px; font: inherit; font-size: 15px; background: none; color: var(--muted); } /* Unavailable dates stay visible for context but are plainly inert. */ .es-cal__day--off { opacity: .38; } .es-cal__day--open { color: var(--navy-700); font-weight: 700; background: var(--cream-50); border-color: var(--gold-200); cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; } .es-cal__day--open:hover { background: var(--gold-100); border-color: var(--gold-500); transform: translateY(-1px); } .es-cal__day--active, .es-cal__day--active:hover { background: var(--navy-700); border-color: var(--navy-700); color: #fff; } .es-cal__legend { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 13px; color: var(--muted); } .es-cal__key { width: 14px; height: 14px; border-radius: 4px; background: var(--cream-50); border: 1px solid var(--gold-200); } @media (max-width: 420px) { .es-cal { max-width: none; } .es-cal__day { font-size: 14px; border-radius: 7px; } } .es-sched__slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; } .es-sched__slot { display: flex; flex-direction: column; gap: 2px; align-items: center; padding: 12px 8px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-sm); font: inherit; cursor: pointer; transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; } .es-sched__slot:hover { border-color: var(--gold-500); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20, 32, 48, .08); } .es-sched__slotTime { font-size: 16px; font-weight: 700; color: var(--navy-700); } .es-sched__slotPt { font-size: 12px; color: var(--muted); } .es-sched__slot--active { background: var(--gold-btn); border-color: var(--gold-btn); } .es-sched__slot--active .es-sched__slotTime, .es-sched__slot--active .es-sched__slotPt { color: #fff; } .es-sched__summary { margin-top: clamp(24px, 3vw, 32px); background: var(--cream-50); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 28px); } .es-sched__big { margin: 10px 0 0; font-size: clamp(17px, 1.6vw, 20px); font-weight: 700; color: var(--navy-700); } .es-sched__muted { font-weight: 500; color: var(--muted); font-size: 14.5px; } .es-sched__summary .es-sched__muted { margin-top: 10px; } @media (max-width: 420px) { .es-sched__slots { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Forms */ .es-form { background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 32px); } .es-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; } /* Two fields per row on wider screens, stacked on phones. */ .es-field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; } @media (max-width: 560px) { .es-field-row { grid-template-columns: minmax(0, 1fr); } } .es-field label { font-size: 15px; font-weight: 700; color: var(--navy-700); } .es-field input, .es-field textarea, .es-field select { font: inherit; font-size: 16px; /* 16px keeps iOS from zooming on focus */ color: var(--ink); background: #fff; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); width: 100%; transition: border-color .18s ease, box-shadow .18s ease; } .es-field textarea { resize: vertical; min-height: 120px; } .es-field input:focus, .es-field textarea:focus, .es-field select:focus { outline: none; border-color: var(--gold-500); box-shadow: var(--focus); } .es-consent { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 14px; font-size: 14.5px; line-height: 1.65; color: var(--body); cursor: pointer; } .es-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gold-btn); } /* Compliance note */ .es-compliance { margin: clamp(48px, 6vw, 74px) auto 0; max-width: 1030px; background: var(--cream-100); border: 1px solid #EAE2D2; border-radius: var(--radius-sm); padding: clamp(20px, 2.6vw, 30px); } .es-compliance p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.85; color: #4E5A6B; } .es-compliance p:last-child { margin-bottom: 0; } /* Page hero (interior pages). The hero's bottom padding and the next section's top padding used to stack into ~170px of dead space; both are trimmed and the pair is collapsed. */ .es-phero { background: linear-gradient(180deg, #FBF7EF 0%, #FFFFFF 100%); padding: clamp(40px, 5vw, 72px) 0 clamp(24px, 3vw, 40px); } .es-phero + .es-section { padding-top: clamp(10px, 1.6vw, 22px); } .es-phero__inner { max-width: 900px; } .es-phero--center .es-phero__inner { margin: 0 auto; text-align: center; } .es-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14.5px; color: var(--muted); margin-bottom: 18px; } .es-crumbs a { color: var(--gold-600); } .es-crumbs a:hover { color: var(--gold-btn-h); } /* -------------------------------------------------------------------------- 7. Footer -------------------------------------------------------------------------- */ .es-footer { background: var(--navy-800); padding: clamp(48px, 7vw, 74px) 0 34px; color: var(--on-dark); } .es-footer__grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 48px); } /* White logo sits straight on the navy — no white plate needed. */ .es-footer__logo img { display: block; height: clamp(46px, 5vw, 58px); width: auto; } .es-footer__blurb { margin: 22px 0 0; max-width: 340px; font-size: 16.5px; line-height: 1.6; font-weight: 600; color: var(--on-dark); } .es-footer__social { margin-top: 26px; display: flex; align-items: center; gap: 18px; } .es-footer__social a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(201, 162, 74, .4); border-radius: 50%; color: var(--gold-400); font-size: 16px; font-weight: 800; transition: background-color .18s ease, border-color .18s ease; } .es-footer__social a:hover { background: rgba(201, 162, 74, .16); border-color: var(--gold-400); color: var(--gold-300); } .es-footer h4 { margin: 0 0 20px; font-size: 19px; font-weight: 700; color: #FFFFFF; } .es-footer__links { display: flex; flex-direction: column; gap: 13px; } .es-footer__links a, .es-footer a.es-footer__gold { font-size: 16.5px; color: var(--gold-400); } .es-footer__links a:hover, .es-footer a.es-footer__gold:hover { color: var(--gold-300); } .es-footer__addr { margin: 0 0 18px; font-size: 16.5px; line-height: 1.55; font-weight: 600; color: var(--on-dark); } .es-footer__line { margin: 0 0 8px; font-size: 16.5px; color: var(--on-dark); } .es-footer__disclaimer { margin: clamp(40px, 6vw, 68px) auto 0; max-width: 1290px; text-align: center; font-size: 14.5px; line-height: 1.9; color: var(--on-dark-muted); } .es-footer__bar { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .es-footer__bar span { font-size: 14.5px; color: var(--on-dark-muted); } .es-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 3vw, 32px); } .es-footer__legal a { font-size: 14.5px; color: var(--gold-400); } .es-footer__legal a:hover { color: var(--gold-300); } /* -------------------------------------------------------------------------- 8. Responsive Breakpoints are placed where the *layout* breaks, not at device sizes. -------------------------------------------------------------------------- */ /* Large desktop down to laptop */ @media (max-width: 1180px) { .es-nav { gap: 18px; } .es-header__cta { padding: 12px 18px; } } /* Nav no longer fits â†’ switch to the drawer */ @media (max-width: 1024px) { .es-nav, .es-header__cta--desktop { display: none; } .es-burger { display: inline-flex; } .es-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .es-mobile { display: grid; grid-template-rows: 0fr; background: #fff; border-top: 1px solid transparent; transition: grid-template-rows .4s cubic-bezier(.22, 1, .36, 1), border-color .3s ease; } .es-mobile--open { grid-template-rows: 1fr; border-top-color: var(--line); } /* Hidden content must not be reachable by keyboard while collapsed. */ .es-mobile__wrap { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s linear .4s; } .es-mobile--open .es-mobile__wrap { visibility: visible; transition-delay: 0s; } .es-mobile__inner { padding: 8px var(--gutter) 28px; max-height: calc(100dvh - 84px); overflow-y: auto; -webkit-overflow-scrolling: touch; } } /* Tablet */ @media (max-width: 900px) { .es-split { grid-template-columns: minmax(0, 1fr); } /* When stacked, images always come after the words. */ .es-split--media-first > .es-split__media { order: 0; } .es-split__media { max-width: 640px; width: 100%; } .es-split--center-stack .es-split__media { margin-left: auto; margin-right: auto; } .es-hero__media { max-width: 560px; margin: 0 auto; } } /* Phone */ @media (max-width: 640px) { /* Two short items centred reads better than two right-aligned ones that wrap onto separate lines and double the bar's height. */ .es-topbar { font-size: 12.5px; } .es-topbar__inner { justify-content: center; gap: 0 16px; min-height: 36px; } .es-topbar__item { padding: 8px 0; } .es-topbar__login { padding-left: 16px; } .es-topbar__label { display: none; } .es-header__inner { min-height: 72px; } .es-mobile__inner { max-height: calc(100dvh - 72px); } .es-mega { grid-template-columns: minmax(0, 1fr); } .es-grid--2, .es-grid--3, .es-grid--4 { grid-template-columns: minmax(0, 1fr); } .es-footer__grid { grid-template-columns: minmax(0, 1fr); } .es-footer__bar { flex-direction: column; align-items: flex-start; } .es-cta__actions { flex-direction: column; } .es-cta__actions .es-btn { width: 100%; } .es-btn { padding: 13px 20px; } .es-hero__actions .es-btn { width: 100%; } .es-stats { gap: 24px; } .es-tabs { gap: 8px; } .es-tab { padding: 9px 16px; font-size: 14.5px; } } @media (max-width: 380px) { :root { --gutter: 16px; } .es-logo img { height: 36px; } } /* -------------------------------------------------------------------------- 9. Scroll entrance animations Every rule is scoped to `.es-anim`, a class that assets/everstone.js puts on only when it runs and only when the visitor has not asked for reduced motion. Without the script nothing is ever hidden — the page just renders. -------------------------------------------------------------------------- */ .es-anim [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--i, 0) * 70ms); will-change: opacity, transform; } .es-anim [data-reveal="in"] { opacity: 1; transform: none; will-change: auto; } /* Section shells fade without shifting, so nested staggered children provide the movement instead of everything sliding at once. */ .es-anim .es-section > .es-container[data-reveal], .es-anim .es-phero > .es-container[data-reveal] { transform: none; transition: opacity .55s ease; } /* Header slides in once on load. */ @keyframes es-header-in { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } } .es-anim .es-header { animation: es-header-in .5s cubic-bezier(.22, 1, .36, 1) both; } /* Hero copy leads the page in. */ @keyframes es-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .es-anim .es-section:first-of-type .es-h1, .es-anim .es-phero .es-h1 { animation: es-rise .7s cubic-bezier(.22, 1, .36, 1) .12s both; } .es-anim .es-section:first-of-type .es-h1 + .es-lead, .es-anim .es-phero .es-h1 + .es-lead { animation: es-rise .7s cubic-bezier(.22, 1, .36, 1) .22s both; } /* Smooth micro-interactions on interactive surfaces. */ .es-link-arrow, .es-subnav a, .es-tile, .es-footer__links a, .es-footer__legal a { transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease; } .es-tile:hover { transform: translateY(-2px); } .es-logo img { transition: transform .25s cubic-bezier(.22, 1, .36, 1); } .es-logo:hover img { transform: scale(1.03); } .es-btn--primary:hover { box-shadow: 0 8px 20px rgba(138, 100, 32, .28); } /* Respect reduced-motion preferences. The script also opts out entirely, so this is the belt to its braces. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; } .es-card:hover, .es-tile:hover, .es-mega__item:hover { transform: none; } .es-anim [data-reveal] { opacity: 1; transform: none; } } /* Print */ @media print { .es-topbar, .es-header, .es-mobile, .es-burger, .es-footer__social { display: none !important; } .es-page { color: #000; } }