/* Preview factory — base. Consumes only --theme-* tokens (set inline in ). Palette-specific or type-specific rules do not exist here; every colour derives from the eight palette tokens, every typeface from the type pairing. */ /* ---- derived tokens (from theme, never hard-coded) ---- */ :root { --line-soft: color-mix(in oklab, var(--theme-line) 55%, transparent); --surface-soft: color-mix(in oklab, var(--theme-surface) 60%, var(--theme-background)); --accent-soft: color-mix(in oklab, var(--theme-accent) 18%, var(--theme-background)); --action-hover: color-mix(in oklab, var(--theme-action) 88%, var(--theme-text)); --action-soft: color-mix(in oklab, var(--theme-action) 10%, var(--theme-background)); --overlay: color-mix(in oklab, var(--theme-text) 55%, transparent); --focus: var(--theme-action); --radius: 4px; --control: 44px; --control-lg: 52px; --sticky-h: 56px; --hdr-h: 72px; --hdr-h-shrunk: 56px; --wrap: 1180px; --gutter: clamp(16px, 4vw, 40px); --sec-y: clamp(64px, 9vw, 128px); --head-gap: clamp(20px, 3vw, 36px); --media-grade: saturate(0.88) contrast(1.02); --t-eyebrow: 0.75rem; --t-small: 0.875rem; --t-body: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem); --t-lede: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem); --t-h3: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); --t-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); --t-h1: clamp(2.25rem, 1.6rem + 3.2vw, 4.25rem); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h-shrunk) + 12px); } body { margin: 0; background: var(--theme-background); color: var(--theme-text); font-family: var(--theme-body); font-weight: var(--theme-body-weight); letter-spacing: var(--theme-body-tracking); line-height: var(--theme-body-leading); font-size: var(--t-body); padding-bottom: var(--sticky-h); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } @media (min-width: 900px) { body { padding-bottom: 0; } } img { display: block; max-width: 100%; height: auto; } figure { margin: 0; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } ul[role="list"], ol.steps__list { list-style: none; margin: 0; padding: 0; } a { color: inherit; } button { font: inherit; color: inherit; letter-spacing: inherit; } /* ---- type ladder ---- */ h1, h2, h3, .h1, .h2, .h3, .display { font-family: var(--theme-heading); font-weight: var(--theme-heading-weight); letter-spacing: var(--theme-heading-tracking); line-height: var(--theme-heading-leading); margin: 0; text-wrap: balance; } .h1 { font-size: var(--t-h1); max-width: 18ch; } .h2 { font-size: var(--t-h2); max-width: 24ch; } .h3 { font-size: var(--t-h3); line-height: 1.25; } .lede { font-size: var(--t-lede); color: var(--theme-muted); max-width: 52ch; margin: 1.1em 0 0; text-wrap: pretty; } .eyebrow { font-family: var(--theme-body); font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--theme-muted); margin: 0 0 0.9em; } .muted { color: var(--theme-muted); } .surface { background: var(--theme-surface); } .sec-head { margin-bottom: var(--head-gap); } /* ---- layout ---- */ .wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; } section { padding-block: var(--sec-y); } .skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--theme-action); color: var(--theme-action-text); padding: 10px 14px; } .skip:focus { left: 8px; } /* ---- focus, one ring ---- */ :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } /* ---- buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: var(--control); padding: 0 1.25em; border: 1px solid transparent; border-radius: var(--radius); text-decoration: none; font-weight: 500; font-size: var(--t-small); letter-spacing: 0.01em; white-space: nowrap; cursor: pointer; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease; } .btn-lg { min-height: var(--control-lg); padding-inline: 1.6em; font-size: 1rem; } .btn-primary { background: var(--theme-action); color: var(--theme-action-text); } .btn-primary:hover { background: var(--action-hover); } .btn-primary:active { transform: translateY(1px); } .btn-ghost { background: transparent; color: var(--theme-text); border-color: var(--theme-line); } .btn-ghost:hover { border-color: var(--theme-text); background: var(--surface-soft); } .btn[disabled] { opacity: 0.6; cursor: progress; } .acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.75rem; } /* ---- header ---- */ .hdr { position: sticky; top: 0; z-index: 40; background: color-mix(in oklab, var(--theme-background) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-soft); } .hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--hdr-h); transition: min-height 220ms ease; } .hdr.is-shrunk .hdr__in { min-height: var(--hdr-h-shrunk); } .brand { display: flex; align-items: baseline; gap: 12px; text-decoration: none; min-width: 0; min-height: var(--control); align-items: center; } .brand__mark { font-family: var(--theme-heading); font-weight: var(--theme-heading-weight); letter-spacing: var(--theme-heading-tracking); font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand__logo { height: 40px; width: auto; max-width: 55vw; object-fit: contain; object-position: left center; } .brand__city { font-size: var(--t-eyebrow); letter-spacing: 0.1em; text-transform: uppercase; color: var(--theme-muted); white-space: nowrap; } .hdr__acts { display: flex; gap: 8px; } @media (max-width: 599px) { .brand__city { display: none; } .hdr__acts .btn-ghost { display: none; } } /* ---- hero ---- */ .hero { padding-block: 0; } .hero__media { position: relative; overflow: hidden; background: var(--theme-surface); } .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); filter: var(--media-grade); } .chip { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--t-small); font-weight: 500; color: var(--theme-text); padding: 0.35em 0.75em; border: 1px solid var(--theme-line); border-radius: 999px; margin: 0 0 1.25rem; } .chip__star { color: var(--theme-accent); } /* ---- trust ---- */ .trust { padding-block: clamp(28px, 4vw, 44px); border-block: 1px solid var(--line-soft); } .trust__in { display: grid; gap: 6px; } .trust .eyebrow { margin: 0; } .trust__line { font-family: var(--theme-heading); font-weight: var(--theme-heading-weight); letter-spacing: var(--theme-heading-tracking); font-size: clamp(1.125rem, 1rem + 0.8vw, 1.5rem); line-height: 1.3; margin: 0; max-width: 40ch; } .trust__quote { margin: 0; display: grid; gap: 10px; } .trust__quote .trust__line { margin: 0; } .trust__quote .trust__line p { margin: 0; } .trust__quote .trust__line p::before { content: "\201C"; } .trust__quote .trust__line p::after { content: "\201D"; } .trust__src { font-size: var(--t-small); color: var(--theme-muted); } /* ---- services ---- */ .cards { display: grid; gap: clamp(20px, 3vw, 32px); } .card { display: grid; min-width: 0; } .card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--theme-surface); } .card__media img { width: 100%; height: 100%; object-fit: cover; filter: var(--media-grade); transition: transform 600ms cubic-bezier(.2,.7,.2,1); } .card:hover .card__media img { transform: scale(1.03); } .card__n { display: block; font-size: var(--t-eyebrow); letter-spacing: 0.14em; color: var(--theme-muted); font-variant-numeric: tabular-nums; } .card__blurb { color: var(--theme-muted); margin-top: 0.5em; font-size: var(--t-small); max-width: 38ch; } /* ---- media fallback (contract file missing) ---- */ .media--fallback img { opacity: 0.55; mix-blend-mode: luminosity; } .media--fallback::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, var(--accent-soft), var(--theme-surface)); opacity: 0.85; } .media--fallback { position: relative; } .card.media--fallback::after { inset: auto; } .card.media--fallback .card__media { position: relative; } .card.media--fallback .card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--accent-soft), var(--theme-surface)); opacity: 0.85; } /* ---- offer ---- */ .offer { background: var(--theme-surface); } .offer__in { display: grid; gap: 8px; justify-items: start; } .offer__title { max-width: 20ch; } .offer .btn { margin-top: 1.25rem; } /* ---- provider ---- */ .provider__in { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; } .provider__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--theme-surface); } .provider__media img { width: 100%; height: 100%; object-fit: cover; filter: var(--media-grade); } .provider__cred { color: var(--theme-muted); font-size: var(--t-small); letter-spacing: 0.02em; margin: 0.6em 0 0; } .provider__lead { font-size: var(--t-lede); margin-top: 1.25em; max-width: 48ch; text-wrap: pretty; } .provider--nameplate .provider__copy { border-left: 2px solid var(--theme-accent); padding-left: clamp(16px, 3vw, 32px); } @media (min-width: 800px) { .provider--portrait .provider__in { grid-template-columns: 2fr 3fr; } } /* ---- steps ---- */ .steps__list { display: grid; gap: clamp(24px, 3vw, 40px); counter-reset: step; } .step { display: grid; gap: 8px; align-content: start; } .step__n { font-family: var(--theme-heading); font-size: var(--t-h2); line-height: 1; color: var(--theme-accent); font-variant-numeric: tabular-nums; } .step p { color: var(--theme-muted); font-size: var(--t-small); max-width: 36ch; } /* ---- faq ---- */ .faq__list { border-top: 1px solid var(--theme-line); } .disc { border-bottom: 1px solid var(--theme-line); } .disc__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--control-lg); padding: 14px 0; cursor: pointer; list-style: none; font-family: var(--theme-heading); font-weight: var(--theme-heading-weight); letter-spacing: var(--theme-heading-tracking); font-size: var(--t-h3); line-height: 1.25; } .disc__q::-webkit-details-marker { display: none; } .disc__icon { position: relative; flex: 0 0 20px; height: 20px; } .disc__icon::before, .disc__icon::after { content: ""; position: absolute; inset: 50% auto auto 50%; background: currentColor; transition: transform 200ms ease; } .disc__icon::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); } .disc__icon::after { width: 1.5px; height: 14px; transform: translate(-50%, -50%); } .disc[open] .disc__icon::after { transform: translate(-50%, -50%) rotate(90deg); } .disc__a { padding: 0 0 22px; color: var(--theme-muted); max-width: 62ch; } /* ---- close ---- */ /* The vertical's atmosphere, baked to a neutral grey map centred on mid-grey, overlaid on whatever ground the variant paints: material under any palette. It thins out behind the copy, so text keeps the contrast the palette was checked at (full strength there cost black-signal and chocolate-blue AA). */ .close { position: relative; isolation: isolate; } .close__ground { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: center / cover no-repeat; mix-blend-mode: overlay; opacity: 0.6; -webkit-mask-image: radial-gradient(ellipse 60% 75% at 50% 50%, transparent 40%, currentColor 100%); mask-image: radial-gradient(ellipse 60% 75% at 50% 50%, transparent 40%, currentColor 100%); } @media (max-width: 599px) { .close__ground { -webkit-mask-image: radial-gradient(ellipse 100% 75% at 50% 50%, transparent 40%, currentColor 100%); mask-image: radial-gradient(ellipse 100% 75% at 50% 50%, transparent 40%, currentColor 100%); } } @media (forced-colors: active) { .close__ground { display: none; } } .close__body { color: var(--theme-muted); max-width: 52ch; margin-top: 1em; } .close__offer { font-family: var(--theme-heading); font-size: var(--t-h3); margin-top: 1.25em; } /* ---- footer ---- */ .ftr { border-top: 1px solid var(--line-soft); padding-block: 36px; font-size: var(--t-small); color: var(--theme-muted); } .ftr__in { display: grid; gap: 6px; } .ftr__name { color: var(--theme-text); font-weight: 500; } .ftr a { text-decoration: none; display: inline-block; min-height: var(--control); line-height: var(--control); } .ftr a:hover { text-decoration: underline; text-underline-offset: 3px; } /* ---- sticky bar (mobile) ---- */ .sticky { position: fixed; inset: auto 0 0 0; z-index: 40; height: var(--sticky-h); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px 12px; background: color-mix(in oklab, var(--theme-background) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line-soft); padding-bottom: max(6px, env(safe-area-inset-bottom)); box-sizing: content-box; height: calc(var(--sticky-h) - 12px); } .sticky .btn { min-height: var(--control); width: 100%; } @media (min-width: 900px) { .sticky { display: none; } } /* ---- drawer ---- */ .drawer { position: fixed; inset: 0; z-index: 60; } .drawer[hidden] { display: none; } .drawer__overlay { position: absolute; inset: 0; background: var(--overlay); } .drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 460px); background: var(--theme-background); color: var(--theme-text); overflow-y: auto; padding: 24px var(--gutter) 40px; box-shadow: -24px 0 48px -24px var(--overlay); } .drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .drawer__close { width: var(--control); height: var(--control); border: 1px solid var(--theme-line); border-radius: var(--radius); background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; } .drawer__close:hover { background: var(--surface-soft); } .form { display: grid; gap: 14px; } .form[hidden] { display: none; } .form__intro { font-size: var(--t-small); } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .field { display: grid; gap: 6px; } .field__label { font-size: var(--t-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--theme-muted); font-weight: 500; } .field__in { min-height: var(--control); width: 100%; padding: 0 12px; background: var(--theme-background); color: var(--theme-text); border: 1px solid var(--theme-line); border-radius: var(--radius); font: inherit; letter-spacing: inherit; transition: border-color 160ms ease; } .field__in:hover { border-color: var(--theme-muted); } .field__in:focus { border-color: var(--theme-action); outline: none; box-shadow: 0 0 0 3px var(--action-soft); } .field__in[aria-invalid="true"] { border-color: var(--theme-action); } select.field__in { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; } .form__err { font-size: var(--t-small); color: var(--theme-action); margin: 0; } .form__submit { margin-top: 6px; width: 100%; } .form__done { display: grid; gap: 10px; justify-items: start; padding-top: 12px; } .form__done[hidden] { display: none; } .form__check { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--theme-action); color: var(--theme-action-text); font-size: 1.25rem; margin-bottom: 8px; } .form__done .btn { margin-top: 12px; } body.drawer-open { overflow: hidden; }