/* ========================================================================== Versaggi Management : shared design system (vm.css) Version 1, 2026-10-23. Built for the preview pages in website\pages\ and written so the same file pastes into WordPress later. SCOPE Every selector is scoped under .vm. Nothing targets html, body, :root or * at the top level. Tokens are custom properties declared on .vm. Wrap each page (header, main, footer, call bar) in
. Inside a WordPress content column add the modifier:
so the bands run the full viewport width. SPECIFICITY NOTE FOR WORDPRESS Selectors here are mostly (0,2,0) or (0,2,1). A theme that styles ".entry-content h2" or "article a" can still win. If that happens, bump the whole file with one find and replace: ".vm " becomes "html body .vm.vm " and ".vm." becomes "html body .vm.vm." (the live Jack and Jill build used the same trick with a triple class). Do not add !important piecemeal. FONTS (the page head carries this link; this file does not @import) Why "Playfair" and not "Playfair Display": Google Fonts serves Playfair Display from weight 400 up only. A request for Playfair Display 300 returns HTTP 400 and the whole stylesheet fails (checked 2026-10-23). Playfair 2.0 is the same designer's successor with a 300 weight, a 300 italic and an optical size axis, so the 410px numeral gets the hairline display cut and 24px titles get the sturdier text cut automatically. Stacks: serif "Playfair", "Playfair Display", Georgia, serif sans "DM Sans", -apple-system, "Segoe UI", sans-serif TYPE SCALE (two extremes, almost nothing in the middle) token px at 390 to 1440 face, weight use --vm-fs-label 12 DM Sans 500, 0.2em, caps labels, buttons, nav, meta --vm-fs-body 16 to 17 DM Sans 400, lh 1.6 body, measure 64ch --vm-fs-lead 20 to 24 DM Sans 400, lh 1.45 one-sentence intros, stat lines --vm-fs-title 24 to 34 Playfair 300, lh 1.1 tile, card, ledger, FAQ titles (gap: nothing between 34 and the H2; the gap is the design) --vm-fs-h2 36 to 72 Playfair 300, lh 1.02 section heads --vm-fs-h1 48 to 108 Playfair 300, lh 0.98 one per page (48 floor holds to 467px) --vm-fs-numeral 188 at 390, 352 cap Playfair 300, lh 0.8 vm-numeral, once ("1986"); under 1024, then tabular lining figures sized so four digits always fit 292 to 410 from 1024 --vm-fs-index 40 to 56 Playfair 300, tabular ledger row numbers Accent: inside display type is Playfair 300 italic; ink on light bands, brand blue on navy. COLOUR (roles, then the raw values they point at) raw --vm-c-blue #2997CA brand blue, the one accent (logo colour, fixed by the client's designer) --vm-c-blue-text #1A6C94 blue for small text on light bands --vm-c-navy #0E1A22 deep navy bands, hero, CTA --vm-c-stone #F3F2EF warm stone bands --vm-c-paper #FFFFFF white bands, cards --vm-c-ink #0B1217 text on light --vm-c-muted #5B6770 secondary text on light --vm-c-mist #B8C6CF secondary text on navy --vm-c-flag #FBEFA5 CONFIRM placeholder fill (preview only) Measured WCAG 2 contrast (script run 2026-10-23, all values re-verified): ink #0B1217 on white 18.87 body ink on stone 16.85 body muted #5B6770 on white 5.80 small text ok muted on stone 5.18 small text ok blue-text #1A6C94 on white 5.81 small text ok blue-text on stone 5.19 small text ok blue #2997CA on white 3.29 LARGE TEXT AND GRAPHICS ONLY blue on stone 2.94 DECORATIVE ONLY, never text blue on navy 5.36 text ok blue-text on navy 3.04 do not use on navy white on navy 17.65 text mist #B8C6CF on navy 10.10 text navy on blue (blue button) 5.36 so a blue fill carries NAVY text white on blue 3.29 never: white text on blue fails ink on flag #FBEFA5 16.16 placeholder chip white on photo chip (navy .86) 11.62 worst case over a white pixel Control boundaries (WCAG 1.4.11, 3:1): --vm-line-control light ink at .48 = 3.34 on white, 3.27 on stone --vm-line-control navy white at .48 = 4.92 on navy Hairlines (--vm-line ink .14 / white .16) are decorative structure only. Photo scrims: text over photography always sits where the combined navy overlay is at least .62 alpha, which keeps white text at 4.96 or better over a pure white pixel. Rule: never set small text in #2997CA on a white or stone band; use var(--vm-accent-text), which flips to the right blue per band. DARK MODE Deliberately band-based, not a system-wide switch. The logo is a dark grey and blue PNG that only works on light surfaces and must not be recoloured, so the header and footer always stay light. Dark surfaces are explicit: .vm-band--navy, .vm-hero, .vm-cta, or [data-theme="dark"] on any section, which all redefine the same role tokens. .vm sets color-scheme: light and an explicit background so an OS dark preference cannot invert form controls or leave a transparent page. SPACING (4px base, one scale everywhere) --vm-s-1 4 --vm-s-2 8 --vm-s-3 12 --vm-s-4 16 --vm-s-5 20 --vm-s-6 24 --vm-s-8 32 --vm-s-10 40 --vm-s-12 48 --vm-s-16 64 --vm-s-20 80 --vm-s-24 96 --vm-s-32 128 Page margin 16 / 32 / 64 (under 768 / 768 up / 1200 up) Gutter 16 / 24 / 32 Section 64 / 96 / 128 (vm-section); half that for vm-section--tight Container max 1440. 12-column grid. Inside a section: 8 to 16 between a label and its heading, 24 between heading and intro, 48 to 64 between a section head and its content. BREAKPOINTS 480 small phone up, 640 rotor card shows, 700 call bar hides, 768 tablet, 1024 desktop grid, 1200 full nav and wide margins MOTION (CSS only, nothing needs JavaScript, nothing rests at opacity 0) Hero text fades and rises once on load and ENDS at its natural visible state. Hover: tile photo slow scale, arrow slide, ledger row shift, FAQ plus rotates to a cross, rotor card cycles five slides (4s each) and pauses on hover and focus. All of it sits inside @media (prefers-reduced-motion: no-preference). Under reduce everything is static and fully visible, and the rotor renders as a plain list. No scroll-driven animation-timeline reveals. No glow, no glass, no decorative gradients (the only gradient is the functional photo scrim). ========================================================================== CLASS INDEX (the contract design-layout builds pages from) ========================================================================== LAYOUT .vm / .vm--breakout root wrapper; breakout = full viewport width in a WP column
header, main, footer
.vm-container max 1440, page margins
...
.vm-section(--tight) vertical band padding
.vm-band--paper|stone|navy band surfaces; navy flips ink, muted, line, focus, button tokens .vm-band--grid blueprint grid texture (use on navy) class="vm-band--navy vm-band--grid" [data-theme="dark"] same as navy band, on any element .vm-grid 12 columns; children span 12 by default .vm-md-4|6|8|12 spans from 768 .vm-lg-3..9|12 spans from 1024; .vm-lg-start-2|3|4|5|6|7|8|9 sets the start column
..
..
.vm-head / .vm-head__intro section head: hairline above, H2 left (7 cols), intro right (5 cols) .vm-stack / --loose vertical rhythm 16 / 32 between children .vm-prose body copy block at the 64ch measure .vm-rule / --accent 1px hairline; accent = short 48px brand blue rule TYPE .vm-label (--muted, --accent) 12px tracked caps

Since 1986

.vm-h1 .vm-h2 .vm-h3 Playfair 300

Tampa homes, managed

.vm-lead .vm-body .vm-muted .vm-numeral ( = light italic accent) .vm-list list with 6px square blue markers (a bar read as a dash) .vm-sr visually hidden text .vm-nowrap keeps a hyphenated word on one line (Single-family in a tile title) .vm-hy hyphen inside display type, set in DM Sans (the builder adds it; never hand-write it) CONTROLS .vm-btn --primary|--secondary|--blue (+ --compact 48px, --block full width) Request a management proposal .vm-btn-row wraps buttons with a 16px gap .vm-arrow the thin arrow, used inside links, buttons, tiles, rows .vm-link (--accent) tracked label link with arrow See our fees .vm-tel quiet phone link 813-254-5338 .vm-addr address group: label, input, attached button
.vm-form / .vm-form__grid / .vm-field (--full) / .vm-field__label / .vm-input / .vm-select / .vm-textarea / .vm-form__note
CHROME (see _src\partials\chrome.html) .vm-header .vm-header__inner .vm-header__logo .vm-nav .vm-header__actions .vm-header__tel .vm-menu (details) .vm-menu__toggle (summary) .vm-menu__panel .vm-menu__list .vm-callbar (fixed bottom bar under 700px) .vm-footer .vm-footer__* .vm-skip COMPONENTS .vm-hero (--area, --type) dark photo hero
eyebrow, h1, lead, btn-row, addr, links
.vm-hero__eyebrow .vm-hero__links .vm-hero__glyph (type variant, aria-hidden) .vm-rotor rotating "Choose your situation" card (5 slides, CSS only, hidden under 640) .vm-tiles (--2|--4|--5|--feature) photo tiles as navigation .vm-pp photo placeholder chip (always carries data-preview-only) .vm-ledger numbered editorial rows (replaces icon cards); under 600 the arrow column drops and the row stays the link
  1. 01 ....
.vm-stat navy stat band: numeral left (bleeds on desktop), hairline stat lines right

..

1986

..
..
.vm-split (--reverse) photo and text; panel overlaps the photo by 48px on desktop
..
.vm-statement SAMPLE owner statement mockup with knocked-out amounts .vm-statement__paper .__head .__title .__meta .__group .__row(--total) .__foot .__cap .vm-redact (--xs|--s|--m|--l|--xl) solid ink bar standing in for a figure .vm-table included / not included table, all cells left aligned; .vm-check (drawn tick, included), .vm-no (hairline, not included) Included .vm-fee fee-type rows: term, explanation, [fee] slot (.vm-fee__row .__term .__text .__slot) .vm-rail process rail, 3 to 4 steps (.vm-rail__step .__n .__title .__text); every node outlined alike, none filled .vm-faq
..?

..

..

.vm-reviews one lead pull quote plus a column of plain reviews (.vm-review --lead, .vm-reviews__rest) .vm-review__by .vm-review__role .vm-review__src ("Published on versaggimanagement.com"). No stars. .vm-quote a single large pull quote .vm-cta dark closing band: .vm-cta__grid .vm-cta__text .vm-cta__art (form left, map right) .vm-map Tampa Bay line art: .vm-map__frame wraps the inline SVG; .vm-map__legend .vm-map__list .vm-map__key .vm-map__office-line .vm-answer answer block: thick short blue rule, one sentence, reviewed line (.vm-answer__text .vm-answer__meta) .vm-crumbs breadcrumb .vm-rel related pages row of arrow links (.vm-rel__list .vm-rel__link .vm-rel__title) .vm-people team placeholder slots, monogram blocks, never stock people (.vm-person .__mono .__name .__role) .vm-ph [CONFIRM WITH RUSS: ...] placeholder, preview only COMPOSITION HELPERS (section 25) .vm-side / .vm-side__head / .vm-side__body (--wide) sticky 4-col head against a 7 or 8-col body

rows, table, FAQ
.vm-ledger--stack ledger rows with title over text (for a ledger inside a narrow column) .vm-ledger--static ledger rows that are not links (no arrow column) .vm-ledger__state preview chip on a row whose page is planned (always data-preview-only) .vm-tiles--step with .vm-tiles--4: even tiles drop 64px on desktop .vm-hero__foot hairline row at the hero bottom holding .vm-answer__meta .vm-cta--map-first closing band with the map on the left, form on the right [data-preview-only] preview scaffolding the builder strips on publish; hidden in print ========================================================================== */ /* -------------------------------------------------------------------------- 0. Self-hosted fonts (latin subset woff2 in assets/fonts/) Playfair is a variable opsz font cut at weight 300 (roman and italic); DM Sans is variable in opsz and wght. The fallback faces wrap a local system font and are scaled to the web font's metrics (size-adjust, ascent-override, descent-override), so the swap does not re-wrap a headline. -------------------------------------------------------------------------- */ @font-face { font-family: "Playfair"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/playfair-300-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Playfair"; font-style: italic; font-weight: 300; font-display: swap; src: url("fonts/playfair-300-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/dmsans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Playfair Fallback"; font-style: normal; font-weight: 300; src: local("Georgia"); size-adjust: 92.2%; ascent-override: 96%; descent-override: 34.1%; line-gap-override: 0%; } @font-face { font-family: "Playfair Fallback"; font-style: italic; font-weight: 300; src: local("Georgia Italic"), local("Georgia-Italic"); size-adjust: 85.7%; ascent-override: 103.3%; descent-override: 36.7%; line-gap-override: 0%; } @font-face { font-family: "DM Sans Fallback"; font-style: normal; font-weight: 400 600; src: local("Arial"), local("ArialMT"); size-adjust: 104%; ascent-override: 95.4%; descent-override: 29.8%; line-gap-override: 0%; } /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ .vm { /* raw palette */ --vm-c-blue: #2997CA; --vm-c-blue-text: #1A6C94; --vm-c-navy: #0E1A22; --vm-c-stone: #F3F2EF; --vm-c-paper: #FFFFFF; --vm-c-ink: #0B1217; --vm-c-muted: #5B6770; --vm-c-mist: #B8C6CF; --vm-c-flag: #FBEFA5; /* roles, light (default) */ --vm-surface: var(--vm-c-paper); --vm-surface-2: var(--vm-c-stone); /* panels that sit on the surface */ --vm-ink: var(--vm-c-ink); /* 18.87 on white, 16.85 on stone */ --vm-muted: var(--vm-c-muted); /* 5.80 on white, 5.18 on stone */ --vm-line: rgba(11, 18, 23, 0.14); /* decorative hairline */ --vm-line-strong: rgba(11, 18, 23, 0.32); /* stronger rule, totals */ --vm-line-control: rgba(11, 18, 23, 0.48);/* control boundary, 3.34 / 3.27 */ --vm-accent: var(--vm-c-blue); /* graphics and large text only on light */ --vm-accent-text: var(--vm-c-blue-text); /* small blue text, 5.81 / 5.19 */ --vm-em: var(--vm-c-ink); /* italic accent colour in display type */ --vm-focus: var(--vm-c-blue-text); /* focus ring, 5.81 / 5.19 */ --vm-btn-bg: var(--vm-c-navy); /* primary button fill */ --vm-btn-fg: var(--vm-c-paper); /* 17.65 */ --vm-field-bg: var(--vm-c-paper); --vm-field-ink: var(--vm-c-ink); --vm-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230B1217' stroke-width='1.25'/%3E%3C/svg%3E"); --vm-grid-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M16 0V64M32 0V64M48 0V64M0 16H64M0 32H64M0 48H64' stroke='%23fff' stroke-opacity='.025' stroke-width='1'/%3E%3Cpath d='M.5 0V64M0 .5H64' stroke='%23fff' stroke-opacity='.07' stroke-width='1'/%3E%3C/svg%3E"); --vm-scrim-side: linear-gradient(90deg, rgba(14, 26, 34, 0.80) 0%, rgba(14, 26, 34, 0.62) 40%, rgba(14, 26, 34, 0.22) 72%, rgba(14, 26, 34, 0.10) 100%); --vm-scrim-foot: linear-gradient(0deg, rgba(14, 26, 34, 0.72) 0%, rgba(14, 26, 34, 0) 55%); /* type */ --vm-serif: "Playfair", "Playfair Fallback", Georgia, serif; --vm-sans: "DM Sans", "DM Sans Fallback", -apple-system, "Segoe UI", sans-serif; --vm-fs-label: 0.75rem; --vm-fs-body: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem); --vm-fs-lead: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); --vm-fs-title: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); --vm-fs-h2: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem); --vm-fs-h1: clamp(3rem, 1.25rem + 6vw, 6.75rem); /* 48 floor: 2.4x the 20px lead on phones */ --vm-fs-numeral: clamp(8.5rem, 1rem + 44vw, 22rem); /* under 1024; redefined at 1024 below */ --vm-fs-index: clamp(2.5rem, 2rem + 1.4vw, 3.5rem); --vm-track: 0.2em; --vm-measure: 64ch; --vm-measure-lead: 40ch; /* space */ --vm-s-1: 4px; --vm-s-2: 8px; --vm-s-3: 12px; --vm-s-4: 16px; --vm-s-5: 20px; --vm-s-6: 24px; --vm-s-8: 32px; --vm-s-10: 40px; --vm-s-12: 48px; --vm-s-16: 64px; --vm-s-20: 80px; --vm-s-24: 96px; --vm-s-32: 128px; --vm-margin: var(--vm-s-4); --vm-gutter: var(--vm-s-4); --vm-section: var(--vm-s-16); --vm-max: 1440px; --vm-bleed: calc(var(--vm-margin) + max(0px, (100vw - var(--vm-max)) / 2)); /* distance from container edge to viewport edge */ --vm-header-h: 64px; --vm-callbar-h: 56px; /* motion and layering */ --vm-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --vm-fast: 200ms; --vm-mid: 320ms; --vm-slow: 1200ms; --vm-z-header: 50; --vm-z-menu: 60; --vm-z-callbar: 70; color-scheme: light; background: var(--vm-surface); color: var(--vm-ink); font-family: var(--vm-sans); font-size: var(--vm-fs-body); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; position: relative; isolation: isolate; } @media (min-width: 768px) { .vm { --vm-margin: var(--vm-s-8); --vm-gutter: var(--vm-s-6); --vm-section: var(--vm-s-24); } } @media (min-width: 1024px) { .vm { --vm-header-h: 80px; --vm-fs-numeral: clamp(18rem, 28.5vw, 25.625rem); } } @media (min-width: 1200px) { .vm { --vm-margin: var(--vm-s-16); --vm-gutter: var(--vm-s-8); --vm-section: var(--vm-s-32); } } /* Dark role set: navy bands, hero, CTA, and any [data-theme="dark"] section */ .vm .vm-band--navy, .vm .vm-hero, .vm .vm-cta, .vm .vm-callbar, .vm [data-theme="dark"], .vm.vm-band--navy, .vm[data-theme="dark"] { --vm-surface: var(--vm-c-navy); --vm-surface-2: rgba(255, 255, 255, 0.04); --vm-ink: var(--vm-c-paper); /* 17.65 */ --vm-muted: var(--vm-c-mist); /* 10.10 */ --vm-line: rgba(255, 255, 255, 0.16); --vm-line-strong: rgba(255, 255, 255, 0.40); --vm-line-control: rgba(255, 255, 255, 0.48); /* 4.92 */ --vm-accent: var(--vm-c-blue); --vm-accent-text: var(--vm-c-blue); /* 5.36 on navy */ --vm-em: var(--vm-c-blue); --vm-focus: var(--vm-c-blue); /* 5.36 */ --vm-btn-bg: var(--vm-c-paper); --vm-btn-fg: var(--vm-c-navy); /* 17.65 */ --vm-field-bg: rgba(255, 255, 255, 0.04); --vm-field-ink: var(--vm-c-paper); --vm-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23FFFFFF' stroke-width='1.25'/%3E%3C/svg%3E"); } .vm .vm-band--stone { --vm-surface: var(--vm-c-stone); --vm-surface-2: var(--vm-c-paper); } .vm .vm-band--paper { --vm-surface: var(--vm-c-paper); --vm-surface-2: var(--vm-c-stone); } .vm .vm-band--paper, .vm .vm-band--stone, .vm .vm-band--navy, .vm [data-theme="dark"] { background-color: var(--vm-surface); color: var(--vm-ink); } .vm .vm-band--grid { background-image: var(--vm-grid-tex); background-size: 64px 64px; background-position: center top; } /* -------------------------------------------------------------------------- 2. Scoped reset: neutralises typical theme styles inside .vm -------------------------------------------------------------------------- */ .vm *, .vm *::before, .vm *::after { box-sizing: border-box; } .vm h1, .vm h2, .vm h3, .vm h4, .vm h5, .vm h6, .vm p, .vm li, .vm dl, .vm dt, .vm dd, .vm figure, .vm figcaption, .vm blockquote, .vm address, .vm summary, .vm caption, .vm table, .vm th, .vm td, .vm label, .vm legend, .vm fieldset, .vm ul, .vm ol, .vm pre { margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; line-height: inherit; text-transform: none; text-shadow: none; text-align: inherit; } .vm h1, .vm h2, .vm h3, .vm h4, .vm h5, .vm h6 { text-wrap: balance; } .vm p, .vm li, .vm dd, .vm blockquote { text-wrap: pretty; } .vm ul, .vm ol { list-style: none; } .vm li::marker { content: none; } .vm a { color: inherit; text-decoration: none; background: transparent; border: 0; box-shadow: none; } .vm a:hover { color: inherit; text-decoration: none; } .vm a:focus { text-decoration: none; } /* no colour reset on focus: it flattened the skip link to ink on navy */ .vm em { font-style: italic; } .vm strong, .vm b { font-weight: 600; } .vm img, .vm svg { display: block; max-width: 100%; } .vm img { height: auto; border: 0; border-radius: 0; box-shadow: none; } .vm address { font-style: normal; } .vm table { border-collapse: collapse; border-spacing: 0; width: 100%; } .vm button, .vm input, .vm select, .vm textarea { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; border-radius: 0; box-shadow: none; text-transform: none; } .vm button { cursor: pointer; background: none; border: 0; padding: 0; } .vm :focus { outline: none; } .vm :focus-visible { outline: 2px solid var(--vm-focus); outline-offset: 3px; } .vm [id] { scroll-margin-top: calc(var(--vm-header-h) + var(--vm-s-4)); } /* Focus Not Obscured: elements without an id scroll into view below the sticky header and above the call bar */ html { scroll-padding-top: 96px; } @media (max-width: 1023px) { html { scroll-padding-top: 80px; } } @media (max-width: 699px) { html { scroll-padding-bottom: 72px; } } .vm a[href^="tel:"] { white-space: nowrap; } .vm a[href^="mailto:"] { overflow-wrap: anywhere; } /* a long address may break; it may never push the page sideways */ .vm.vm--breakout { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0; overflow-x: clip; } .vm .vm-nowrap { white-space: nowrap; } /* Playfair's hyphen reads as an en dash at display size. The builder wraps hyphens inside display type in .vm-hy; set them in DM Sans. Measured ink (canvas, per 1em): Playfair 300 hyphen 0.32 wide, en dash 0.41; DM Sans 400 hyphen 0.41 wide, 0.08 thick. At full size the DM Sans hyphen is as long as the en dash it replaces, so it is set at 0.6em: ink 0.25em wide, 0.05em thick, raised so it centres on Playfair's x-height. */ .vm .vm-hy { font-family: var(--vm-sans); font-weight: 400; font-style: normal; font-size: 0.6em; line-height: 0; letter-spacing: 0; vertical-align: 0.06em; margin-inline: 0.03em; } .vm .vm-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 3. Layout -------------------------------------------------------------------------- */ .vm .vm-container { width: 100%; max-width: var(--vm-max); margin-inline: auto; padding-inline: var(--vm-margin); } .vm .vm-section { padding-block: var(--vm-section); } .vm .vm-section--tight { padding-block: calc(var(--vm-section) / 2); } .vm .vm-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vm-gutter); row-gap: var(--vm-s-12); } .vm .vm-grid > * { grid-column: 1 / -1; min-width: 0; --vm-start: auto; } @media (min-width: 768px) { .vm .vm-grid > .vm-md-4 { grid-column: span 4; } .vm .vm-grid > .vm-md-6 { grid-column: span 6; } .vm .vm-grid > .vm-md-8 { grid-column: span 8; } .vm .vm-grid > .vm-md-12 { grid-column: 1 / -1; } } @media (min-width: 1024px) { .vm .vm-grid > .vm-lg-3 { grid-column: var(--vm-start) / span 3; } .vm .vm-grid > .vm-lg-4 { grid-column: var(--vm-start) / span 4; } .vm .vm-grid > .vm-lg-5 { grid-column: var(--vm-start) / span 5; } .vm .vm-grid > .vm-lg-6 { grid-column: var(--vm-start) / span 6; } .vm .vm-grid > .vm-lg-7 { grid-column: var(--vm-start) / span 7; } .vm .vm-grid > .vm-lg-8 { grid-column: var(--vm-start) / span 8; } .vm .vm-grid > .vm-lg-9 { grid-column: var(--vm-start) / span 9; } .vm .vm-grid > .vm-lg-12 { grid-column: 1 / -1; } .vm .vm-grid > .vm-lg-start-2 { --vm-start: 2; } .vm .vm-grid > .vm-lg-start-3 { --vm-start: 3; } .vm .vm-grid > .vm-lg-start-4 { --vm-start: 4; } .vm .vm-grid > .vm-lg-start-5 { --vm-start: 5; } .vm .vm-grid > .vm-lg-start-6 { --vm-start: 6; } .vm .vm-grid > .vm-lg-start-7 { --vm-start: 7; } .vm .vm-grid > .vm-lg-start-8 { --vm-start: 8; } .vm .vm-grid > .vm-lg-start-9 { --vm-start: 9; } } .vm .vm-stack > * + * { margin-top: var(--vm-s-4); } .vm .vm-stack--loose > * + * { margin-top: var(--vm-s-8); } .vm .vm-prose > * + * { margin-top: var(--vm-s-4); } .vm .vm-prose p, .vm .vm-prose li { max-width: var(--vm-measure); } .vm .vm-rule { display: block; height: 1px; border: 0; margin: 0; background: var(--vm-line); } .vm .vm-rule--accent { width: var(--vm-s-12); height: 2px; background: var(--vm-accent); } /* Section head: hairline, H2 on the left, intro on the right, aligned to the baseline zone */ .vm .vm-head { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--vm-s-6); padding-top: var(--vm-s-6); border-top: 1px solid var(--vm-line); margin-bottom: var(--vm-s-12); } .vm .vm-head > .vm-label { margin-bottom: calc(-1 * var(--vm-s-3)); } .vm .vm-head__intro { max-width: 46ch; color: var(--vm-muted); } @media (min-width: 1024px) { .vm .vm-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vm-gutter); align-items: end; margin-bottom: var(--vm-s-16); } .vm .vm-head > * { grid-column: 1 / span 7; } .vm .vm-head > .vm-head__intro { grid-column: 8 / span 5; padding-bottom: var(--vm-s-2); } } /* -------------------------------------------------------------------------- 4. Type -------------------------------------------------------------------------- */ .vm .vm-label { font-family: var(--vm-sans); font-weight: 500; font-size: var(--vm-fs-label); line-height: 1.5; letter-spacing: var(--vm-track); text-transform: uppercase; } .vm .vm-label--muted { color: var(--vm-muted); } .vm .vm-label--accent { color: var(--vm-accent-text); } .vm .vm-h1, .vm .vm-h2, .vm .vm-h3, .vm .vm-numeral, .vm .vm-quote blockquote { font-family: var(--vm-serif); font-weight: 300; font-optical-sizing: auto; font-variant-numeric: lining-nums; } .vm .vm-h1 { font-size: var(--vm-fs-h1); line-height: 0.98; letter-spacing: -0.02em; max-width: 15ch; } .vm .vm-h2 { font-size: var(--vm-fs-h2); line-height: 1.02; letter-spacing: -0.015em; max-width: 18ch; } .vm .vm-h3 { font-size: var(--vm-fs-title); line-height: 1.1; letter-spacing: -0.005em; max-width: 24ch; } .vm .vm-h1 em, .vm .vm-h2 em, .vm .vm-h3 em, .vm .vm-lead em, .vm .vm-quote em, .vm .vm-tile__name em, .vm .vm-numeral em { font-family: var(--vm-serif); font-style: italic; font-weight: 300; color: var(--vm-em); } .vm .vm-lead { font-size: var(--vm-fs-lead); line-height: 1.45; max-width: var(--vm-measure-lead); } .vm .vm-lead em { font-size: 1.08em; } .vm .vm-body { font-size: var(--vm-fs-body); line-height: 1.6; max-width: var(--vm-measure); } .vm .vm-muted { color: var(--vm-muted); } .vm .vm-numeral { display: block; font-size: var(--vm-fs-numeral); line-height: 0.8; letter-spacing: -0.04em; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; white-space: nowrap; user-select: none; } .vm .vm-list { max-width: var(--vm-measure); } .vm .vm-list > li { position: relative; padding-left: var(--vm-s-8); } .vm .vm-list > li + li { margin-top: var(--vm-s-2); } /* 2px marker on a whole-pixel offset so every marker paints the same solid blue (a 1px bar at 0.8em landed on subpixels and antialiased to grey on some rows) */ .vm .vm-list > li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 6px; height: 6px; background: var(--vm-accent-text); } /* -------------------------------------------------------------------------- 5. Controls: arrow, buttons, links, phone, address group, form fields -------------------------------------------------------------------------- */ .vm .vm-arrow { position: relative; display: inline-block; flex: none; width: var(--vm-s-8); height: 1px; background: currentColor; vertical-align: middle; transition: width var(--vm-mid) var(--vm-ease); } .vm .vm-arrow::after { content: ""; position: absolute; right: 0; top: -3.5px; width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); transform-origin: 100% 0; } .vm .vm-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--vm-s-4); min-height: 56px; padding: var(--vm-s-3) var(--vm-s-8); border: 1px solid transparent; border-radius: 0; font-family: var(--vm-sans); font-weight: 600; font-size: var(--vm-fs-label); line-height: 1.25; letter-spacing: var(--vm-track); text-transform: uppercase; text-align: center; cursor: pointer; text-decoration: none; transition: background-color var(--vm-fast) var(--vm-ease), color var(--vm-fast) var(--vm-ease), border-color var(--vm-fast) var(--vm-ease); } .vm .vm-btn:hover .vm-arrow, .vm .vm-btn:focus-visible .vm-arrow { width: var(--vm-s-12); } /* primary: navy fill on light, white fill on dark (via tokens). Hover always turns brand blue with navy text (5.36). */ .vm .vm-btn--primary { background: var(--vm-btn-bg); color: var(--vm-btn-fg); border-color: var(--vm-btn-bg); } .vm .vm-btn--primary:hover { background: var(--vm-c-blue); border-color: var(--vm-c-blue); color: var(--vm-c-navy); } /* secondary: hairline outline that meets 3:1 as a control boundary */ .vm .vm-btn--secondary { background: transparent; color: var(--vm-ink); border-color: var(--vm-line-control); } .vm .vm-btn--secondary:hover { border-color: var(--vm-ink); background: var(--vm-ink); color: var(--vm-surface); } /* blue: brand blue fill with NAVY text, never white */ .vm .vm-btn--blue { background: var(--vm-c-blue); color: var(--vm-c-navy); border-color: var(--vm-c-blue); } .vm .vm-btn--blue:hover { background: var(--vm-btn-bg); border-color: var(--vm-btn-bg); color: var(--vm-btn-fg); } .vm .vm-btn--compact { min-height: 48px; padding-inline: var(--vm-s-6); } .vm .vm-btn--block { width: 100%; } .vm .vm-btn-row { display: flex; flex-wrap: wrap; gap: var(--vm-s-4); align-items: center; } @media (max-width: 479px) { .vm .vm-btn { padding-inline: var(--vm-s-5); letter-spacing: 0.14em; gap: var(--vm-s-3); } .vm .vm-btn-row > .vm-btn { width: 100%; } } .vm .vm-link { display: inline-flex; align-items: center; gap: var(--vm-s-4); min-height: 44px; font-family: var(--vm-sans); font-weight: 500; font-size: var(--vm-fs-label); letter-spacing: var(--vm-track); text-transform: uppercase; line-height: 1.3; color: var(--vm-ink); } .vm .vm-link--accent { color: var(--vm-accent-text); } .vm .vm-link:hover .vm-arrow, .vm .vm-link:focus-visible .vm-arrow { width: var(--vm-s-12); } .vm .vm-tel { display: inline-flex; align-items: baseline; gap: var(--vm-s-3); min-height: 44px; align-items: center; font-family: var(--vm-sans); font-weight: 600; font-size: 1rem; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--vm-ink); border-bottom: 1px solid transparent; transition: border-color var(--vm-fast) var(--vm-ease); } .vm .vm-tel:hover { border-bottom-color: var(--vm-accent); } .vm .vm-tel__k { font-weight: 500; font-size: var(--vm-fs-label); letter-spacing: var(--vm-track); text-transform: uppercase; color: var(--vm-muted); } /* Address group: visible label, large input, attached submit */ .vm .vm-addr { max-width: 600px; } .vm .vm-addr__label { display: block; margin-bottom: var(--vm-s-2); font-weight: 500; font-size: var(--vm-fs-label); line-height: 1.5; letter-spacing: var(--vm-track); text-transform: uppercase; color: var(--vm-ink); } .vm .vm-addr__row { display: flex; flex-direction: column; } .vm .vm-addr__input { flex: 1 1 auto; min-width: 0; min-height: 56px; padding: 0 var(--vm-s-5); background: var(--vm-c-paper); color: var(--vm-c-ink); border: 1px solid var(--vm-c-paper); font-size: 1.0625rem; line-height: 1.4; appearance: none; -webkit-appearance: none; } .vm .vm-addr__input::placeholder { color: var(--vm-c-muted); opacity: 1; } .vm .vm-addr__input:focus-visible { outline: 2px solid var(--vm-focus); outline-offset: 2px; } .vm .vm-addr .vm-btn { flex: none; } .vm .vm-addr__hint { margin-top: var(--vm-s-2); font-size: var(--vm-fs-label); line-height: 1.5; color: var(--vm-muted); } /* on light bands the white input needs a visible boundary */ .vm .vm-band--paper .vm-addr__input, .vm .vm-band--stone .vm-addr__input { border-color: var(--vm-line-control); } @media (min-width: 480px) { .vm .vm-addr__row { flex-direction: row; } .vm .vm-addr .vm-btn { padding-inline: var(--vm-s-6); } } /* Form */ .vm .vm-form { max-width: 720px; } /* align-items: end keeps the controls in a row on one line when a label wraps: the extra height goes above the shorter label, never between label and control */ .vm .vm-form__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vm-s-5) var(--vm-gutter); align-items: end; } @media (min-width: 640px) { .vm .vm-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vm .vm-form__grid > .vm-field--full { grid-column: 1 / -1; } } .vm .vm-field { display: flex; flex-direction: column; gap: var(--vm-s-2); min-width: 0; } .vm .vm-field__label { font-weight: 500; font-size: var(--vm-fs-label); line-height: 1.5; letter-spacing: var(--vm-track); text-transform: uppercase; color: var(--vm-ink); } .vm .vm-field__label .vm-field__opt { color: var(--vm-muted); letter-spacing: 0.04em; text-transform: none; font-weight: 400; } .vm .vm-input, .vm .vm-select, .vm .vm-textarea { display: block; width: 100%; min-height: 56px; padding: var(--vm-s-3) var(--vm-s-4); background: var(--vm-field-bg); color: var(--vm-field-ink); border: 1px solid var(--vm-line-control); border-radius: 0; font-size: 1.0625rem; line-height: 1.4; appearance: none; -webkit-appearance: none; transition: border-color var(--vm-fast) var(--vm-ease); } .vm .vm-textarea { min-height: 120px; resize: vertical; } .vm .vm-select { padding-right: var(--vm-s-12); background-image: var(--vm-chev); background-repeat: no-repeat; background-position: right var(--vm-s-4) center; cursor: pointer; } .vm .vm-select option { color: var(--vm-c-ink); background: var(--vm-c-paper); } .vm .vm-input::placeholder, .vm .vm-textarea::placeholder { color: var(--vm-muted); opacity: 1; } .vm .vm-input:hover, .vm .vm-select:hover, .vm .vm-textarea:hover { border-color: var(--vm-ink); } .vm .vm-input:focus-visible, .vm .vm-select:focus-visible, .vm .vm-textarea:focus-visible { outline: 2px solid var(--vm-focus); outline-offset: 2px; border-color: var(--vm-ink); } .vm .vm-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vm-s-4) var(--vm-s-8); margin-top: var(--vm-s-8); } .vm .vm-form__note { font-size: var(--vm-fs-body); line-height: 1.5; color: var(--vm-muted); max-width: 44ch; } @media (max-width: 639px) { .vm .vm-form__actions .vm-btn { width: 100%; } } /* -------------------------------------------------------------------------- 6. Placeholders and preview-only helpers -------------------------------------------------------------------------- */ .vm .vm-ph { display: inline-block; max-width: 100%; padding: 0.15em 0.45em; vertical-align: baseline; background: var(--vm-c-flag); color: var(--vm-c-ink); outline: 1px dashed rgba(11, 18, 23, 0.55); outline-offset: -1px; font-family: var(--vm-sans); font-weight: 500; font-size: 0.8125rem; font-style: normal; letter-spacing: 0.01em; line-height: 1.5; text-transform: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .vm .vm-pp { position: absolute; z-index: 3; top: var(--vm-s-3); left: var(--vm-s-3); max-width: calc(100% - var(--vm-s-6)); padding: var(--vm-s-1) var(--vm-s-2); background: rgba(14, 26, 34, 0.86); color: var(--vm-c-paper); font-family: var(--vm-sans); font-weight: 500; font-size: var(--vm-fs-label); line-height: 1.4; letter-spacing: 0.02em; text-transform: none; font-style: normal; pointer-events: none; } @media print { .vm [data-preview-only], .vm .vm-pp { display: none !important; } } /* -------------------------------------------------------------------------- 7. Header, menu, call bar -------------------------------------------------------------------------- */ .vm .vm-skip { position: absolute; z-index: calc(var(--vm-z-menu) + 1); left: var(--vm-s-4); top: var(--vm-s-2); display: inline-flex; align-items: center; min-height: 44px; padding: var(--vm-s-3) var(--vm-s-4); background: var(--vm-c-navy); color: var(--vm-c-paper); font-weight: 600; font-size: var(--vm-fs-label); letter-spacing: var(--vm-track); text-transform: uppercase; transform: translateY(-200%); } .vm .vm-skip:focus { transform: none; } .vm a.vm-skip, .vm a.vm-skip:hover, .vm a.vm-skip:focus { color: #fff; } /* white on navy, 17.65:1 */ .vm a.vm-skip:focus-visible { outline: 2px solid #fff; outline-offset: -5px; } .vm .vm-header { position: sticky; top: 0; z-index: var(--vm-z-header); background: var(--vm-c-paper); color: var(--vm-c-ink); border-bottom: 1px solid rgba(11, 18, 23, 0.14); } .vm .vm-header--static { position: relative; } .vm .vm-header__inner { display: flex; align-items: center; gap: var(--vm-s-4); min-height: var(--vm-header-h); } .vm .vm-header__logo { display: inline-flex; align-items: center; flex: none; min-height: 44px; margin-right: auto; } .vm .vm-header__logo img { width: auto; height: 32px; } .vm .vm-nav { display: none; } .vm .vm-nav ul { display: flex; align-items: center; gap: var(--vm-s-8); } .vm .vm-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; font-size: var(--vm-fs-label); letter-spacing: var(--vm-track); text-transform: uppercase; white-space: nowrap; } .vm .vm-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 10px; height: 1px; background: var(--vm-c-blue); transition: right var(--vm-mid) var(--vm-ease); } .vm .vm-nav a:hover::after, .vm .vm-nav a[aria-current="page"]::after { right: 0; } .vm .vm-nav a[aria-current="page"]::after { height: 2px; } .vm .vm-header__actions { display: flex; align-items: center; gap: var(--vm-s-4); } .vm .vm-header__tel { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } .vm .vm-header__tel:hover { color: var(--vm-c-blue-text); } /* under 380 logo, number and Menu do not fit one row (Menu ran 4px off a 360 screen); the fixed call bar already carries the number there */ @media (max-width: 379px) { .vm .vm-header__tel { display: none; } } .vm .vm-header__cta { display: none; } /* Mobile menu: a
, no JavaScript */ .vm .vm-menu { position: static; } .vm .vm-menu__toggle { display: inline-flex; align-items: center; gap: var(--vm-s-3); min-width: 44px; min-height: 44px; padding: 0 var(--vm-s-1) 0 var(--vm-s-3); margin-right: calc(-1 * var(--vm-s-1)); font-weight: 500; font-size: var(--vm-fs-label); letter-spacing: var(--vm-track); text-transform: uppercase; list-style: none; cursor: pointer; user-select: none; border: 1px solid rgba(11, 18, 23, 0.48); } .vm .vm-menu__toggle::-webkit-details-marker { display: none; } .vm .vm-menu__toggle::marker { content: none; } .vm .vm-menu__bars { position: relative; display: block; width: 18px; height: 8px; margin-right: var(--vm-s-2); } .vm .vm-menu__bars::before, .vm .vm-menu__bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform var(--vm-mid) var(--vm-ease); } .vm .vm-menu__bars::before { top: 0; } .vm .vm-menu__bars::after { bottom: 0; } .vm .vm-menu[open] .vm-menu__bars::before { transform: translateY(3.5px) rotate(45deg); } .vm .vm-menu[open] .vm-menu__bars::after { transform: translateY(-3.5px) rotate(-45deg); } .vm .vm-menu__panel { position: absolute; left: 0; right: 0; top: 100%; z-index: var(--vm-z-menu); max-height: calc(100svh - var(--vm-header-h)); overflow-y: auto; overscroll-behavior: contain; background: var(--vm-c-paper); border-top: 1px solid rgba(11, 18, 23, 0.14); border-bottom: 1px solid rgba(11, 18, 23, 0.32); } .vm .vm-menu__list > li { border-bottom: 1px solid rgba(11, 18, 23, 0.14); } .vm .vm-menu__list a { display: flex; align-items: center; justify-content: space-between; gap: var(--vm-s-4); min-height: 64px; font-family: var(--vm-serif); font-weight: 300; font-size: 1.875rem; line-height: 1.1; letter-spacing: -0.01em; } .vm .vm-menu__list a[aria-current="page"] { color: var(--vm-c-blue-text); } .vm .vm-menu__foot { display: grid; gap: var(--vm-s-4); padding-block: var(--vm-s-6) var(--vm-s-8); } .vm .vm-menu__foot .vm-btn { width: 100%; } @media (min-width: 700px) { .vm .vm-header__cta { display: inline-flex; } .vm .vm-menu__foot .vm-btn { display: none; } } @media (min-width: 1024px) { .vm .vm-header__logo img { height: 40px; } } @media (min-width: 1200px) { .vm .vm-nav { display: block; } .vm .vm-menu { display: none; } .vm .vm-header__inner { gap: var(--vm-s-10); } .vm .vm-header__logo { margin-right: 0; } .vm .vm-nav { margin-right: auto; } .vm .vm-header__actions { gap: var(--vm-s-6); } } @media (min-width: 1200px) and (max-width: 1319px) { .vm .vm-nav ul { gap: var(--vm-s-6); } } /* Fixed bottom call bar on phones */ .vm .vm-callbar { display: none; } @media (max-width: 699px) { .vm .vm-callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--vm-z-callbar); display: grid; grid-template-columns: 1fr 1fr; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--vm-c-navy); border-top: 1px solid var(--vm-c-blue); } .vm .vm-callbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--vm-callbar-h); padding: var(--vm-s-1) var(--vm-s-2); font-weight: 600; font-size: 0.9375rem; line-height: 1.2; letter-spacing: 0.02em; text-align: center; color: var(--vm-c-paper); font-variant-numeric: tabular-nums; } .vm .vm-callbar__k { font-weight: 500; font-size: var(--vm-fs-label); letter-spacing: var(--vm-track); text-transform: uppercase; color: var(--vm-c-mist); } .vm .vm-callbar a.vm-callbar__go { background: var(--vm-c-blue); color: var(--vm-c-navy); } .vm .vm-callbar a.vm-callbar__go .vm-callbar__k { color: var(--vm-c-navy); } /* Keep the hero form visible on first load: the bar slides in once the reader has scrolled past the hero. Browsers without scroll-driven animations simply show it from the start. */ @supports (animation-timeline: scroll()) { .vm .vm-callbar { animation: vm-callbar-in linear both; animation-timeline: scroll(root); animation-range: 380px 620px; } @keyframes vm-callbar-in { from { transform: translateY(100%); } to { transform: none; } } } @media (prefers-reduced-motion: reduce) { .vm .vm-callbar { animation: none !important; transform: none; } } .vm .vm-callbar a:focus-visible { outline-offset: -4px; outline-color: var(--vm-c-paper); } .vm .vm-callbar a.vm-callbar__go:focus-visible { outline-color: var(--vm-c-navy); } } /* -------------------------------------------------------------------------- 8. Footer (light: the logo only works on light surfaces) -------------------------------------------------------------------------- */ .vm .vm-footer { --vm-surface: var(--vm-c-stone); --vm-surface-2: var(--vm-c-paper); background: var(--vm-c-stone); color: var(--vm-c-ink); border-top: 1px solid rgba(11, 18, 23, 0.14); padding-block: var(--vm-s-16) var(--vm-s-8); } .vm .vm-footer__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vm-s-8); padding-bottom: var(--vm-s-12); border-bottom: 1px solid var(--vm-line); } .vm .vm-footer__call { display: inline-flex; flex-direction: column; gap: var(--vm-s-2); } .vm .vm-footer__phone { font-family: var(--vm-serif); font-weight: 300; font-size: var(--vm-fs-h2); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; display: inline-flex; align-items: center; min-height: 48px; border-bottom: 1px solid transparent; transition: border-color var(--vm-fast) var(--vm-ease); align-self: start; } .vm .vm-footer__phone:hover { border-bottom-color: var(--vm-c-blue); } .vm .vm-footer__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vm-s-10) var(--vm-gutter); padding-block: var(--vm-s-12); } .vm .vm-footer__brand { grid-column: 1 / -1; } .vm .vm-footer__brand img { width: 200px; height: auto; } .vm .vm-footer__line { margin-top: var(--vm-s-6); max-width: 44ch; color: var(--vm-muted); } .vm .vm-footer__col > .vm-label { color: var(--vm-muted); margin-bottom: var(--vm-s-3); } .vm .vm-footer__col li a { display: inline-flex; align-items: center; min-height: 44px; padding-block: var(--vm-s-1); } .vm .vm-footer__col li a:hover { color: var(--vm-c-blue-text); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; } .vm .vm-footer__contact { grid-column: 1 / -1; display: grid; gap: var(--vm-s-1); justify-items: start; } .vm .vm-footer__contact a { display: inline-flex; min-height: 44px; align-items: center; } .vm .vm-footer__contact a:hover { color: var(--vm-c-blue-text); } .vm .vm-footer__legal { display: flex; flex-wrap: wrap; gap: var(--vm-s-3) var(--vm-s-8); padding-top: var(--vm-s-6); border-top: 1px solid var(--vm-line); font-size: var(--vm-fs-label); line-height: 1.6; letter-spacing: 0.04em; color: var(--vm-muted); } .vm .vm-footer__legal .vm-ph { font-size: var(--vm-fs-label); } @media (min-width: 768px) { .vm .vm-footer__body { grid-template-columns: repeat(12, minmax(0, 1fr)); } .vm .vm-footer__brand { grid-column: 1 / span 12; } .vm .vm-footer__col { grid-column: span 4; } .vm .vm-footer__contact { grid-column: 1 / span 12; } } @media (min-width: 1024px) { .vm .vm-footer { padding-top: var(--vm-s-20); } .vm .vm-footer__top { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vm-gutter); align-items: end; } .vm .vm-footer__call { grid-column: 1 / span 6; } .vm .vm-footer__top > .vm-btn { grid-column: 7 / -1; justify-self: end; white-space: nowrap; } .vm .vm-footer__brand { grid-column: 1 / span 4; grid-row: 1; } .vm .vm-footer__contact { grid-column: 1 / span 4; grid-row: 2; } .vm .vm-footer__col { grid-row: 1 / span 2; } .vm .vm-footer__body > .vm-footer__col:nth-of-type(1) { grid-column: 6 / span 2; } .vm .vm-footer__body > .vm-footer__col:nth-of-type(2) { grid-column: 8 / span 2; } .vm .vm-footer__body > .vm-footer__col:nth-of-type(3) { grid-column: 10 / span 3; } } @media (max-width: 699px) { .vm .vm-footer { padding-bottom: calc(var(--vm-s-8) + var(--vm-callbar-h) + env(safe-area-inset-bottom, 0px)); } .vm .vm-footer__top > .vm-btn { width: 100%; } } /* -------------------------------------------------------------------------- 9. Hero (dark photo, area variant, type variant) -------------------------------------------------------------------------- */ .vm .vm-hero { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; background: var(--vm-c-navy); color: var(--vm-ink); } .vm .vm-hero__media { position: absolute; inset: 0; z-index: -1; margin: 0; } .vm .vm-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; } .vm .vm-hero__media::before, .vm .vm-hero__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; } .vm .vm-hero__media::before { background: rgba(14, 26, 34, 0.30); z-index: 1; } /* flat navy wash */ .vm .vm-hero__media::after { background: var(--vm-scrim-side), var(--vm-scrim-foot); z-index: 1; } /* functional scrim */ .vm .vm-hero__media .vm-pp { top: auto; left: auto; bottom: var(--vm-s-3); right: var(--vm-s-3); } .vm .vm-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--vm-s-12); padding-block: var(--vm-s-16) var(--vm-s-12); } .vm .vm-hero__text { min-width: 0; } .vm .vm-hero__text > * + * { margin-top: var(--vm-s-6); } .vm .vm-hero__text > .vm-h1 { margin-top: var(--vm-s-4); } .vm .vm-hero__text > .vm-btn-row { margin-top: var(--vm-s-10); } .vm .vm-hero__text > .vm-addr { margin-top: var(--vm-s-8); } .vm .vm-hero__text > .vm-crumbs { margin-bottom: var(--vm-s-8); } .vm .vm-hero__eyebrow { color: var(--vm-ink); } .vm .vm-hero .vm-lead { max-width: 36ch; } .vm .vm-hero__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--vm-s-8); } .vm .vm-hero__aside { display: none; min-width: 0; } @media (min-width: 640px) { .vm .vm-hero__aside { display: block; max-width: 440px; } } @media (max-width: 1023px) { .vm .vm-rotor__img { display: none; } /* keeps the stacked tablet hero short */ } @media (min-width: 1024px) { .vm .vm-hero { min-height: clamp(640px, 84svh, 760px); } .vm .vm-hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vm-gutter); align-items: end; padding-block: var(--vm-s-12) var(--vm-s-10); row-gap: var(--vm-s-10); } /* keeps H1, lead and the primary button above a 900px fold (checked at 1440 x 900) */ .vm .vm-hero .vm-h1 { line-height: 0.94; } .vm .vm-hero .vm-lead { max-width: 46ch; } .vm .vm-hero__text > .vm-crumbs { margin-bottom: var(--vm-s-4); } .vm .vm-hero__text > .vm-btn-row { margin-top: var(--vm-s-8); } .vm .vm-hero__text > .vm-addr { margin-top: var(--vm-s-6); } .vm .vm-hero__text { grid-column: 1 / span 8; } .vm .vm-hero__aside { grid-column: 9 / span 4; max-width: none; } } @media (max-width: 767px) { .vm .vm-hero__media img { object-position: 70% 50%; } .vm .vm-hero__media::after { background: linear-gradient(90deg, rgba(14, 26, 34, 0.70) 0%, rgba(14, 26, 34, 0.50) 100%), var(--vm-scrim-foot); } } /* Area hero: shorter, the town-page style */ @media (min-width: 1024px) { .vm .vm-hero--area { min-height: clamp(520px, 66svh, 620px); } .vm .vm-hero--area .vm-hero__grid { padding-block: var(--vm-s-12) var(--vm-s-10); } } /* Type hero: no photo, navy with blueprint grid, one large type moment */ .vm .vm-hero--type { background-color: var(--vm-c-navy); background-image: var(--vm-grid-tex); background-size: 64px 64px; } .vm .vm-hero__glyph { position: absolute; z-index: -1; right: -0.04em; top: 50%; transform: translateY(-46%); font-family: var(--vm-serif); font-weight: 300; font-style: italic; font-optical-sizing: auto; font-size: clamp(18rem, 4rem + 56vw, 54rem); line-height: 0.8; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1px var(--vm-c-blue); white-space: nowrap; user-select: none; pointer-events: none; } @media (max-width: 767px) { .vm .vm-hero__glyph { font-size: 72vw; right: -0.12em; top: 0; transform: translateY(-18%); opacity: 0.5; } } @media (min-width: 1024px) { .vm .vm-hero--type { min-height: clamp(560px, 70svh, 680px); } } /* -------------------------------------------------------------------------- 10. Rotor: the CSS-only "Choose your situation" card Default (no animation support or no media match): slide 1 shows. no-preference: 5 slides x 4s, paused on hover and focus. reduce: all five render as a static list. -------------------------------------------------------------------------- */ .vm .vm-rotor { --vm-surface: var(--vm-c-paper); --vm-ink: var(--vm-c-ink); --vm-muted: var(--vm-c-muted); --vm-line: rgba(11, 18, 23, 0.14); --vm-accent-text: var(--vm-c-blue-text); --vm-focus: var(--vm-c-blue-text); --vm-em: var(--vm-c-ink); position: relative; background: var(--vm-c-paper); color: var(--vm-c-ink); border-top: 2px solid var(--vm-c-blue); box-shadow: 1px 1px 0 rgba(11, 18, 23, 0.25); } .vm .vm-rotor__head { display: flex; align-items: center; justify-content: space-between; gap: var(--vm-s-4); padding: var(--vm-s-5) var(--vm-s-6) 0; font-weight: 500; font-size: var(--vm-fs-label); letter-spacing: var(--vm-track); text-transform: uppercase; color: var(--vm-muted); } .vm .vm-rotor__track { display: grid; } .vm .vm-rotor__slide { grid-area: 1 / 1; min-width: 0; visibility: hidden; opacity: 0; } .vm .vm-rotor__slide:first-child { visibility: visible; opacity: 1; } .vm .vm-rotor__link { display: flex; flex-direction: column; height: 100%; padding: var(--vm-s-4) var(--vm-s-6) 0; } .vm .vm-rotor__img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; margin-bottom: var(--vm-s-5); } .vm .vm-rotor__n { font-weight: 500; font-size: var(--vm-fs-label); letter-spacing: var(--vm-track); text-transform: uppercase; color: var(--vm-accent-text); font-variant-numeric: tabular-nums; } .vm .vm-rotor__title { display: block; margin-top: var(--vm-s-2); font-family: var(--vm-serif); font-weight: 300; font-size: clamp(1.5rem, 1.1rem + 0.8vw, 1.875rem); line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; } .vm .vm-rotor__text { display: block; margin-top: var(--vm-s-3); color: var(--vm-muted); font-size: var(--vm-fs-body); line-height: 1.5; } .vm .vm-rotor__go { display: flex; align-items: center; justify-content: space-between; gap: var(--vm-s-4); min-height: 56px; margin-top: auto; padding-top: var(--vm-s-5); border-bottom: 1px solid var(--vm-line); font-weight: 600; font-size: var(--vm-fs-label); letter-spacing: var(--vm-track); text-transform: uppercase; } .vm .vm-rotor__link:hover .vm-arrow, .vm .vm-rotor__link:focus-visible .vm-arrow { width: var(--vm-s-12); } .vm .vm-rotor__link:focus-visible { outline-offset: -4px; } .vm .vm-rotor__ticks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--vm-s-1); padding: var(--vm-s-4) var(--vm-s-6) var(--vm-s-5); } .vm .vm-rotor__ticks > span { position: relative; display: block; height: 2px; background: rgba(11, 18, 23, 0.14); overflow: hidden; } .vm .vm-rotor__ticks > span::after { content: ""; position: absolute; inset: 0; background: var(--vm-c-blue); transform: scaleX(0); transform-origin: left center; } .vm .vm-rotor__ticks > span:first-child::after { transform: scaleX(1); } @keyframes vm-rotor-slide { 0% { visibility: hidden; opacity: 0; transform: translateY(8px); } 2% { visibility: visible; opacity: 1; transform: none; } 20% { visibility: visible; opacity: 1; transform: none; } 22% { visibility: hidden; opacity: 0; transform: none; } 100% { visibility: hidden; opacity: 0; } } @keyframes vm-rotor-tick { 0% { transform: scaleX(0); } 20% { transform: scaleX(1); } 20.01%, 100% { transform: scaleX(0); } } @media (prefers-reduced-motion: no-preference) { .vm .vm-rotor__slide { animation: vm-rotor-slide 20s linear infinite backwards; } .vm .vm-rotor__ticks > span::after { animation: vm-rotor-tick 20s linear infinite backwards; } .vm .vm-rotor__slide:nth-child(2), .vm .vm-rotor__ticks > span:nth-child(2)::after { animation-delay: 4s; } .vm .vm-rotor__slide:nth-child(3), .vm .vm-rotor__ticks > span:nth-child(3)::after { animation-delay: 8s; } .vm .vm-rotor__slide:nth-child(4), .vm .vm-rotor__ticks > span:nth-child(4)::after { animation-delay: 12s; } .vm .vm-rotor__slide:nth-child(5), .vm .vm-rotor__ticks > span:nth-child(5)::after { animation-delay: 16s; } .vm .vm-rotor:hover .vm-rotor__slide, .vm .vm-rotor:focus-within .vm-rotor__slide, .vm .vm-rotor:hover .vm-rotor__ticks > span::after, .vm .vm-rotor:focus-within .vm-rotor__ticks > span::after { animation-play-state: paused; } } @media (prefers-reduced-motion: reduce) { .vm .vm-rotor__track { display: block; padding-bottom: var(--vm-s-4); } .vm .vm-rotor__slide { visibility: visible; opacity: 1; animation: none; } .vm .vm-rotor__img, .vm .vm-rotor__text, .vm .vm-rotor__ticks { display: none; } .vm .vm-rotor__link { padding-top: var(--vm-s-3); } .vm .vm-rotor__title { font-size: 1.375rem; } .vm .vm-rotor__go { min-height: 44px; padding-top: var(--vm-s-2); } } /* -------------------------------------------------------------------------- 11. Photo tiles as navigation -------------------------------------------------------------------------- */ .vm .vm-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vm-gutter); } .vm .vm-tiles > li { min-width: 0; } .vm .vm-tile { position: relative; display: block; height: 100%; overflow: hidden; background: var(--vm-c-navy); color: var(--vm-c-paper); } .vm .vm-tile:hover, .vm .vm-tile:focus { color: var(--vm-c-paper); } .vm .vm-tile:focus-visible { outline: 2px solid var(--vm-focus); outline-offset: 4px; } .vm .vm-tile__media { position: relative; margin: 0; height: 100%; aspect-ratio: 4 / 5; overflow: hidden; } .vm .vm-tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .vm .vm-tile__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(14, 26, 34, 0.88) 0%, rgba(14, 26, 34, 0.66) 30%, rgba(14, 26, 34, 0.20) 62%, rgba(14, 26, 34, 0.10) 100%); } .vm .vm-tile__cap { position: absolute; z-index: 2; left: var(--vm-s-5); right: var(--vm-s-5); bottom: var(--vm-s-5); display: block; } .vm .vm-tile__name { display: block; font-family: var(--vm-serif); font-weight: 300; font-optical-sizing: auto; font-size: var(--vm-fs-title); line-height: 1.05; letter-spacing: -0.01em; color: var(--vm-c-paper); text-wrap: balance; } .vm .vm-tile__name em { color: var(--vm-c-paper); } .vm .vm-tile__rule { display: block; height: 1px; margin: var(--vm-s-4) 0 var(--vm-s-3); background: rgba(255, 255, 255, 0.6); transition: background-color var(--vm-mid) var(--vm-ease); } .vm .vm-tile__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--vm-s-4); font-weight: 500; font-size: var(--vm-fs-label); line-height: 1.5; letter-spacing: var(--vm-track); text-transform: uppercase; } .vm .vm-tile:hover .vm-tile__rule, .vm .vm-tile:focus-visible .vm-tile__rule { background: var(--vm-c-blue); } .vm .vm-tile:hover .vm-arrow, .vm .vm-tile:focus-visible .vm-arrow { width: var(--vm-s-12); } @media (min-width: 768px) { .vm .vm-tile__cap { left: var(--vm-s-6); right: var(--vm-s-6); bottom: var(--vm-s-6); } } /* phones: 4 and 5 up become a horizontal scroll-snap strip that bleeds to the screen edge */ /* five-up also scrolls on tablets (three plus two is too cramped there) */ @media (min-width: 768px) and (max-width: 1023px) { .vm .vm-tiles--5 { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--vm-margin); margin-inline: calc(-1 * var(--vm-margin)); padding-inline: var(--vm-margin); padding-bottom: var(--vm-s-4); scrollbar-width: thin; } .vm .vm-tiles--5 > li { flex: 0 0 40%; scroll-snap-align: start; } .vm .vm-tiles--5 .vm-tile__media { aspect-ratio: 4 / 5; } } @media (max-width: 767px) { .vm .vm-tiles--4, .vm .vm-tiles--5, .vm .vm-tiles--feature { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--vm-margin); margin-inline: calc(-1 * var(--vm-margin)); padding-inline: var(--vm-margin); padding-bottom: var(--vm-s-4); scrollbar-width: thin; } .vm .vm-tiles--4 > li, .vm .vm-tiles--5 > li, .vm .vm-tiles--feature > li { flex: 0 0 78%; scroll-snap-align: start; } .vm .vm-tiles--4 .vm-tile__media, .vm .vm-tiles--5 .vm-tile__media, .vm .vm-tiles--feature .vm-tile__media { aspect-ratio: 4 / 5; } } @media (min-width: 768px) { .vm .vm-tiles--2, .vm .vm-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vm .vm-tiles--4 .vm-tile__media { aspect-ratio: 4 / 3; } .vm .vm-tiles--2 .vm-tile__media { aspect-ratio: 4 / 3; } } @media (min-width: 1024px) { .vm .vm-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .vm .vm-tiles--4 .vm-tile__media { aspect-ratio: 3 / 4; } .vm .vm-tiles--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .vm .vm-tiles--5 .vm-tile__media { aspect-ratio: 2 / 3; } .vm .vm-tiles--5 .vm-tile__name { font-size: clamp(1.5rem, 1rem + 0.8vw, 1.875rem); } .vm .vm-tiles--2 .vm-tile__media { aspect-ratio: 16 / 10; } /* feature: five tiles, the first takes a 2 x 2 block */ .vm .vm-tiles--feature { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); } .vm .vm-tiles--feature > li:first-child { grid-column: span 2; grid-row: span 2; } .vm .vm-tiles--feature .vm-tile__media { aspect-ratio: 4 / 3; } .vm .vm-tiles--feature > li:first-child .vm-tile__media { aspect-ratio: auto; } .vm .vm-tiles--feature > li:first-child .vm-tile__name { font-size: var(--vm-fs-h2); } } @media (min-width: 768px) and (max-width: 1023px) { .vm .vm-tiles--feature { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vm .vm-tiles--feature > li:first-child { grid-column: 1 / -1; } .vm .vm-tiles--feature .vm-tile__media { aspect-ratio: 4 / 3; } .vm .vm-tiles--feature > li:first-child .vm-tile__media { aspect-ratio: 16 / 9; } } /* -------------------------------------------------------------------------- 12. Ledger: numbered editorial rows -------------------------------------------------------------------------- */ .vm .vm-ledger { border-bottom: 1px solid var(--vm-line); } .vm .vm-ledger__row { position: relative; display: grid; grid-template-columns: var(--vm-s-16) minmax(0, 1fr) var(--vm-s-10); grid-template-areas: "n title go" "n text go"; column-gap: var(--vm-s-4); row-gap: var(--vm-s-2); align-items: start; padding-block: var(--vm-s-6); border-top: 1px solid var(--vm-line); color: var(--vm-ink); transition: border-color var(--vm-mid) var(--vm-ease); } .vm .vm-ledger__n { grid-area: n; font-family: var(--vm-serif); font-weight: 300; font-optical-sizing: auto; font-size: var(--vm-fs-index); line-height: 0.9; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; color: var(--vm-accent-text); } .vm .vm-ledger__title { grid-area: title; font-family: var(--vm-serif); font-weight: 300; font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem); line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; } .vm .vm-ledger__text { grid-area: text; color: var(--vm-muted); max-width: 56ch; } .vm .vm-ledger__go { grid-area: go; justify-self: end; align-self: center; display: inline-flex; align-items: center; min-height: 44px; color: var(--vm-ink); } .vm .vm-ledger__n, .vm .vm-ledger__title, .vm .vm-ledger__text, .vm .vm-ledger__go { transition: transform var(--vm-mid) var(--vm-ease), color var(--vm-mid) var(--vm-ease); } .vm a.vm-ledger__row:hover, .vm a.vm-ledger__row:focus-visible { border-top-color: var(--vm-accent); } .vm a.vm-ledger__row:hover + *, .vm .vm-ledger > li:has(> a.vm-ledger__row:hover) + li > .vm-ledger__row { border-top-color: var(--vm-accent); } .vm a.vm-ledger__row:hover .vm-arrow, .vm a.vm-ledger__row:focus-visible .vm-arrow { width: var(--vm-s-12); } .vm a.vm-ledger__row:focus-visible { outline-offset: -2px; } @media (prefers-reduced-motion: no-preference) { .vm a.vm-ledger__row:hover > *, .vm a.vm-ledger__row:focus-visible > * { transform: translateX(8px); } } /* phones: drop the arrow column (the whole row is still the link, well over 44px tall) and shrink the numeral, so the description gets about 300px instead of 200px */ /* (selectors carry "> li" so this phone rule also holds against page-level column overrides) */ @media (max-width: 599px) { .vm .vm-ledger > li > .vm-ledger__row { grid-template-columns: var(--vm-s-10) minmax(0, 1fr); grid-template-areas: "n title" "n text"; column-gap: var(--vm-s-3); } .vm .vm-ledger > li .vm-ledger__n { font-size: 1.75rem; line-height: 1.05; } .vm .vm-ledger > li .vm-ledger__go { display: none; } } /* desktop: the numeral needs one column, so the title gets five and the description keeps five */ @media (min-width: 1024px) { .vm .vm-ledger__row { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: none; column-gap: var(--vm-gutter); align-items: center; padding-block: var(--vm-s-8); } .vm .vm-ledger__n { grid-area: auto; grid-column: 1 / span 1; } .vm .vm-ledger__title { grid-area: auto; grid-column: 2 / span 5; } .vm .vm-ledger__text { grid-area: auto; grid-column: 7 / span 5; } .vm .vm-ledger__go { grid-area: auto; grid-column: 12 / span 1; } } /* -------------------------------------------------------------------------- 13. Stat band: 1986 numeral, hairline stat lines -------------------------------------------------------------------------- */ .vm .vm-stat { overflow: hidden; } .vm .vm-stat__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--vm-s-12); } .vm .vm-stat__lead { min-width: 0; } .vm .vm-stat__lead > .vm-label { color: var(--vm-muted); margin-bottom: var(--vm-s-4); } .vm .vm-stat .vm-numeral { margin-left: -0.05em; color: var(--vm-ink); } .vm .vm-stat__list { border-bottom: 1px solid var(--vm-line); } .vm .vm-stat__item { padding-block: var(--vm-s-5); border-top: 1px solid var(--vm-line); } .vm .vm-stat__item > dt { color: var(--vm-muted); font-weight: 500; font-size: var(--vm-fs-label); letter-spacing: var(--vm-track); text-transform: uppercase; line-height: 1.5; } .vm .vm-stat__value { margin-top: var(--vm-s-2); font-size: var(--vm-fs-lead); line-height: 1.35; max-width: 30ch; } @media (min-width: 1024px) { .vm .vm-stat__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vm-gutter); align-items: end; } .vm .vm-stat__lead { grid-column: 1 / span 8; } .vm .vm-stat .vm-numeral { margin-left: calc(-1 * var(--vm-bleed) - 0.07em); margin-bottom: -0.1em; } /* the 1 crops slightly at the viewport edge */ .vm .vm-stat__list { grid-column: 9 / -1; } } /* -------------------------------------------------------------------------- 14. Split: photo and text, the panel overlaps the photo by 48px -------------------------------------------------------------------------- */ .vm .vm-split { display: grid; grid-template-columns: minmax(0, 1fr); } .vm .vm-split__media { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; background: var(--vm-surface-2); } .vm .vm-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .vm .vm-split__panel { position: relative; z-index: 1; min-width: 0; padding: var(--vm-s-8) var(--vm-s-6); background: var(--vm-surface-2); color: var(--vm-ink); border-top: 2px solid var(--vm-accent); } .vm .vm-split__panel > * + * { margin-top: var(--vm-s-6); } .vm .vm-split__panel > .vm-btn-row, .vm .vm-split__panel > .vm-link { margin-top: var(--vm-s-8); } @media (min-width: 1024px) { .vm .vm-split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vm-gutter); align-items: center; } .vm .vm-split__media { grid-column: 1 / span 7; grid-row: 1; aspect-ratio: auto; min-height: 560px; height: 100%; } .vm .vm-split__panel { grid-column: 8 / -1; grid-row: 1; margin-left: calc(-1 * (var(--vm-gutter) + var(--vm-s-12))); padding: var(--vm-s-12); } .vm .vm-split--reverse .vm-split__media { grid-column: 6 / -1; } .vm .vm-split--reverse .vm-split__panel { grid-column: 1 / span 5; margin-left: 0; margin-right: calc(-1 * (var(--vm-gutter) + var(--vm-s-12))); } } /* -------------------------------------------------------------------------- 15. Owner statement: a real interface mockup, figures knocked out -------------------------------------------------------------------------- */ .vm .vm-statement { position: relative; max-width: 560px; margin: 0; padding: 0 var(--vm-s-3) 0 0; } .vm .vm-statement__paper { --vm-surface: var(--vm-c-paper); --vm-ink: var(--vm-c-ink); --vm-muted: var(--vm-c-muted); --vm-line: rgba(11, 18, 23, 0.14); --vm-line-strong: rgba(11, 18, 23, 0.32); --vm-accent-text: var(--vm-c-blue-text); position: relative; background: var(--vm-c-paper); color: var(--vm-c-ink); border: 1px solid rgba(11, 18, 23, 0.14); /* 1px offset edge, then a second sheet offset 12px drawn as a flat hairline-outlined plate (zero blur) */ box-shadow: 1px 1px 0 rgba(11, 18, 23, 0.22), 12px 12px 0 -1px var(--vm-surface-2), 12px 12px 0 0 var(--vm-line-strong); margin-bottom: var(--vm-s-3); } .vm .vm-statement__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--vm-s-2) var(--vm-s-4); align-items: end; padding: var(--vm-s-5) var(--vm-s-6); background: var(--vm-c-navy); color: var(--vm-c-paper); } .vm .vm-statement__title { font-family: var(--vm-serif); font-weight: 300; font-size: 1.75rem; line-height: 1; letter-spacing: -0.01em; } .vm .vm-statement__tag { justify-self: end; padding: 2px var(--vm-s-2); border: 1px solid rgba(255, 255, 255, 0.48); font-weight: 600; font-size: var(--vm-fs-label); letter-spacing: var(--vm-track); text-transform: uppercase; line-height: 1.5; } .vm .vm-statement__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vm-s-4); padding: var(--vm-s-4) var(--vm-s-6); border-bottom: 1px solid var(--vm-line); } .vm .vm-statement__meta dt { font-weight: 500; font-size: var(--vm-fs-label); letter-spacing: var(--vm-track); text-transform: uppercase; color: var(--vm-muted); line-height: 1.5; } .vm .vm-statement__meta dd { margin-top: var(--vm-s-2); } .vm .vm-statement__body { padding: var(--vm-s-2) var(--vm-s-6) var(--vm-s-5); } .vm .vm-statement__group { padding-top: var(--vm-s-4); font-weight: 500; font-size: var(--vm-fs-label); letter-spacing: var(--vm-track); text-transform: uppercase; color: var(--vm-accent-text); line-height: 1.5; } .vm .vm-statement__row { display: flex; align-items: center; justify-content: space-between; gap: var(--vm-s-4); min-height: 44px; border-bottom: 1px solid var(--vm-line); font-size: var(--vm-fs-body); } .vm .vm-statement__row > dt { min-width: 0; } .vm .vm-statement__row > dd { flex: none; display: inline-flex; align-items: center; } .vm .vm-statement__row--total { margin-top: var(--vm-s-3); border-top: 2px solid var(--vm-c-ink); border-bottom: 0; min-height: 56px; font-weight: 600; } .vm .vm-statement__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--vm-s-2) var(--vm-s-4); padding: var(--vm-s-4) var(--vm-s-6); background: var(--vm-c-stone); font-weight: 500; font-size: var(--vm-fs-label); letter-spacing: var(--vm-track); text-transform: uppercase; color: var(--vm-muted); line-height: 1.5; } .vm .vm-statement__cap { position: relative; z-index: 1; margin-top: var(--vm-s-6); font-size: var(--vm-fs-label); letter-spacing: 0.04em; line-height: 1.5; color: var(--vm-muted); } .vm .vm-redact { display: inline-block; max-width: 100%; width: 96px; height: 0.875em; background: var(--vm-c-ink); vertical-align: middle; } .vm .vm-redact--xs { width: 40px; } .vm .vm-redact--s { width: 64px; } .vm .vm-redact--m { width: 96px; } .vm .vm-redact--l { width: 128px; } .vm .vm-redact--xl { width: 168px; } .vm .vm-statement__head .vm-redact { background: var(--vm-c-paper); } .vm .vm-statement__row--total .vm-redact { height: 1.125em; } /* -------------------------------------------------------------------------- 16. Comparison table: included / not included -------------------------------------------------------------------------- */ .vm .vm-table { position: relative; overflow-x: auto; border-top: 1px solid var(--vm-line-strong); -webkit-overflow-scrolling: touch; } .vm .vm-table:focus-visible { outline-offset: 2px; } .vm .vm-table table { min-width: 100%; } /* wide tables overflow and scroll; the first column stays sticky */ .vm .vm-table th, .vm .vm-table td { padding: var(--vm-s-4) var(--vm-s-4); border-bottom: 1px solid var(--vm-line); text-align: left; vertical-align: middle; } .vm .vm-table thead th { font-weight: 500; font-size: var(--vm-fs-label); letter-spacing: var(--vm-track); text-transform: uppercase; color: var(--vm-muted); padding-block: var(--vm-s-4); white-space: nowrap; } .vm .vm-table thead th + th, .vm .vm-table td { text-align: left; width: 22%; } .vm .vm-table tbody th { font-weight: 400; font-size: var(--vm-fs-body); } .vm .vm-table tbody th small, .vm .vm-table td small { display: block; margin-top: var(--vm-s-1); color: var(--vm-muted); font-size: var(--vm-fs-label); letter-spacing: 0.04em; text-wrap: balance; } .vm .vm-table tbody tr:hover > * { background: var(--vm-surface-2); } .vm .vm-table th:first-child { position: sticky; left: 0; z-index: 1; background: var(--vm-surface); padding-left: 0; } .vm .vm-table tbody tr:hover > th:first-child { background: var(--vm-surface-2); } .vm .vm-table td .vm-ph { white-space: nowrap; } /* Included: a drawn tick (two 2px strokes, no font glyph) in the accent text blue, 5.19 or better on paper and stone, above the 3:1 graphics minimum. The page supplies the words next to it: Included Not included: an empty 12px hairline. */ .vm .vm-check, .vm .vm-no { display: inline-block; vertical-align: middle; } .vm .vm-check { position: relative; width: 24px; height: 24px; color: var(--vm-accent-text); } .vm .vm-check::after { content: ""; position: absolute; left: 5px; top: 2px; width: 8px; height: 15px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); } .vm .vm-no { width: 12px; height: 1px; background: var(--vm-line-control); } @media (max-width: 767px) { .vm .vm-table th:first-child { box-shadow: 1px 0 0 var(--vm-line); max-width: 48vw; } .vm .vm-table thead th { white-space: normal; letter-spacing: 0.12em; } .vm .vm-table th, .vm .vm-table td { padding-inline: var(--vm-s-3); } .vm .vm-table td, .vm .vm-table thead th + th { min-width: 9.5rem; } } /* -------------------------------------------------------------------------- 17. Fee rows -------------------------------------------------------------------------- */ .vm .vm-fee { border-bottom: 1px solid var(--vm-line); } .vm .vm-fee__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "term slot" "text text"; gap: var(--vm-s-3) var(--vm-s-4); padding-block: var(--vm-s-6); border-top: 1px solid var(--vm-line); } .vm .vm-fee__term { grid-area: term; font-family: var(--vm-serif); font-weight: 300; font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem); line-height: 1.1; } .vm .vm-fee__text { grid-area: text; color: var(--vm-muted); max-width: 56ch; } .vm .vm-fee__slot { grid-area: slot; display: flex; flex-direction: column; align-items: flex-end; gap: var(--vm-s-1); text-align: right; } .vm .vm-fee__slot > .vm-label { color: var(--vm-muted); } .vm .vm-fee__amount { display: inline-flex; align-items: center; justify-content: center; min-width: 120px; min-height: 48px; padding: var(--vm-s-2) var(--vm-s-3); border: 1px solid var(--vm-line-control); background: var(--vm-surface-2); } @media (min-width: 1024px) { .vm .vm-fee__row { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: none; column-gap: var(--vm-gutter); align-items: center; padding-block: var(--vm-s-8); } .vm .vm-fee__term { grid-area: auto; grid-column: 1 / span 4; } .vm .vm-fee__text { grid-area: auto; grid-column: 5 / span 5; } .vm .vm-fee__slot { grid-area: auto; grid-column: 10 / -1; } } /* -------------------------------------------------------------------------- 18. Process rail -------------------------------------------------------------------------- */ .vm .vm-rail { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vm-s-10); counter-reset: vm-rail; } .vm .vm-rail::before { content: ""; position: absolute; top: var(--vm-s-6); bottom: var(--vm-s-6); left: var(--vm-s-6); width: 1px; background: var(--vm-line-strong); } .vm .vm-rail__step { position: relative; padding-left: calc(var(--vm-s-12) + var(--vm-s-6)); min-width: 0; } .vm .vm-rail__n { position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: var(--vm-s-12); height: var(--vm-s-12); background: var(--vm-surface); border: 1px solid var(--vm-accent-text); color: var(--vm-accent-text); font-family: var(--vm-serif); font-weight: 300; font-size: 1.5rem; line-height: 1; font-variant-numeric: lining-nums; } /* every step shares one node: no step is filled, because the rail is a sequence, not a progress state */ .vm .vm-rail__label { display: block; padding-top: var(--vm-s-1); color: var(--vm-muted); font-weight: 500; font-size: var(--vm-fs-label); letter-spacing: var(--vm-track); text-transform: uppercase; line-height: 1.5; } .vm .vm-rail__title { margin-top: var(--vm-s-2); font-family: var(--vm-serif); font-weight: 300; font-size: var(--vm-fs-title); line-height: 1.1; letter-spacing: -0.01em; } .vm .vm-rail__text { margin-top: var(--vm-s-3); color: var(--vm-muted); max-width: 40ch; } @media (min-width: 1024px) { .vm .vm-rail { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: var(--vm-gutter); } .vm .vm-rail::before { top: var(--vm-s-6); bottom: auto; left: 0; right: 0; width: auto; height: 1px; } .vm .vm-rail__step { padding-left: 0; padding-top: calc(var(--vm-s-12) + var(--vm-s-8)); padding-right: var(--vm-s-6); } } /* -------------------------------------------------------------------------- 19. FAQ accordions -------------------------------------------------------------------------- */ .vm .vm-faq { border-bottom: 1px solid var(--vm-line); } .vm .vm-faq__item { border-top: 1px solid var(--vm-line); } .vm .vm-faq__q { display: grid; grid-template-columns: minmax(0, 1fr) var(--vm-s-6); align-items: center; gap: var(--vm-s-6); min-height: 72px; padding-block: var(--vm-s-5); font-family: var(--vm-serif); font-weight: 300; font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem); line-height: 1.2; letter-spacing: -0.005em; list-style: none; cursor: pointer; text-wrap: balance; } .vm .vm-faq__q::-webkit-details-marker { display: none; } .vm .vm-faq__q::marker { content: none; } .vm .vm-faq__q:focus-visible { outline-offset: 2px; } .vm .vm-faq__icon { position: relative; display: block; width: var(--vm-s-6); height: var(--vm-s-6); justify-self: end; color: var(--vm-ink); transition: transform var(--vm-mid) var(--vm-ease); } .vm .vm-faq__icon::before, .vm .vm-faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; transform: translate(-50%, -50%); } .vm .vm-faq__icon::before { width: 18px; height: 1px; } .vm .vm-faq__icon::after { width: 1px; height: 18px; } .vm .vm-faq__item[open] .vm-faq__icon { transform: rotate(45deg); color: var(--vm-accent-text); } .vm .vm-faq__q:hover .vm-faq__icon { color: var(--vm-accent-text); } .vm .vm-faq__a { padding: 0 var(--vm-s-12) var(--vm-s-8) 0; max-width: calc(var(--vm-measure) + var(--vm-s-12)); } .vm .vm-faq__a > * + * { margin-top: var(--vm-s-4); } .vm .vm-faq__short { font-weight: 500; font-size: var(--vm-fs-lead); line-height: 1.4; color: var(--vm-ink); max-width: 44ch; } .vm .vm-faq__a p { max-width: var(--vm-measure); } .vm .vm-faq__a p:not(.vm-faq__short) { color: var(--vm-ink); } @media (max-width: 767px) { .vm .vm-faq__a { padding-right: 0; } } /* -------------------------------------------------------------------------- 20. Reviews and quotes (plain text, never stars) -------------------------------------------------------------------------- */ .vm .vm-reviews { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--vm-s-12); } .vm .vm-review { margin: 0; min-width: 0; } .vm .vm-review blockquote p { font-size: var(--vm-fs-body); line-height: 1.6; } .vm .vm-review figcaption { display: flex; flex-wrap: wrap; gap: var(--vm-s-1) var(--vm-s-3); margin-top: var(--vm-s-5); font-weight: 500; font-size: var(--vm-fs-label); letter-spacing: var(--vm-track); text-transform: uppercase; line-height: 1.5; } .vm .vm-review__by { color: var(--vm-ink); } .vm .vm-review__role { color: var(--vm-muted); } .vm .vm-review__src { flex-basis: 100%; color: var(--vm-muted); letter-spacing: 0.04em; text-transform: none; font-weight: 400; } .vm .vm-review--lead { position: relative; padding-top: var(--vm-s-16); } .vm .vm-review--lead::before { content: "\201C"; position: absolute; left: -0.04em; top: 0; font-family: var(--vm-serif); font-weight: 300; font-size: 8rem; line-height: 0.8; color: var(--vm-accent); } .vm .vm-review--lead blockquote p { font-family: var(--vm-serif); font-weight: 300; font-size: var(--vm-fs-title); line-height: 1.28; letter-spacing: -0.005em; max-width: 30ch; } .vm .vm-review--lead figcaption { margin-top: var(--vm-s-8); padding-top: var(--vm-s-5); border-top: 1px solid var(--vm-line); max-width: 40ch; } .vm .vm-reviews__rest > .vm-review { padding-block: var(--vm-s-6); border-top: 1px solid var(--vm-line); } .vm .vm-reviews__rest > .vm-review:last-child { border-bottom: 1px solid var(--vm-line); } @media (min-width: 1024px) { .vm .vm-reviews { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vm-gutter); align-items: start; } .vm .vm-review--lead { grid-column: 1 / span 7; padding-top: var(--vm-s-20); } .vm .vm-review--lead::before { font-size: 11rem; } .vm .vm-reviews__rest { grid-column: 9 / -1; } } .vm .vm-quote { margin: 0; } .vm .vm-quote blockquote { font-size: clamp(2rem, 1.2rem + 3vw, 4rem); line-height: 1.08; letter-spacing: -0.015em; max-width: 22ch; text-wrap: balance; } .vm .vm-quote figcaption { margin-top: var(--vm-s-8); font-weight: 500; font-size: var(--vm-fs-label); letter-spacing: var(--vm-track); text-transform: uppercase; color: var(--vm-muted); } /* -------------------------------------------------------------------------- 21. Closing CTA and the Tampa Bay map -------------------------------------------------------------------------- */ .vm .vm-cta { position: relative; background-color: var(--vm-c-navy); color: var(--vm-ink); border-top: 1px solid var(--vm-c-blue); overflow: hidden; } .vm .vm-cta__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--vm-s-16); } .vm .vm-cta__text > * + * { margin-top: var(--vm-s-6); } .vm .vm-cta__text > .vm-form { margin-top: var(--vm-s-10); } .vm .vm-cta__art { min-width: 0; } @media (min-width: 1024px) { .vm .vm-cta__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vm-gutter); align-items: start; } .vm .vm-cta__text { grid-column: 1 / span 6; } .vm .vm-cta__art { grid-column: 8 / -1; position: sticky; top: calc(var(--vm-header-h) + var(--vm-s-8)); } } .vm .vm-map { margin: 0; } .vm .vm-map__frame { position: relative; width: 100%; aspect-ratio: 704 / 656; border: 1px solid var(--vm-line); } .vm .vm-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; } .vm .vm-map__grid line { stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; vector-effect: non-scaling-stroke; } .vm .vm-map__deg text { fill: var(--vm-muted); font-family: var(--vm-sans); font-size: 16px; letter-spacing: 0.12em; } .vm .vm-map__coast { fill: none; stroke: var(--vm-c-blue); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .vm .vm-map__ring { fill: none; stroke: var(--vm-c-paper); stroke-width: 1.25; vector-effect: non-scaling-stroke; } .vm .vm-map__dot { fill: var(--vm-c-paper); } .vm .vm-map__pin { fill: var(--vm-c-navy); stroke: var(--vm-c-blue); stroke-width: 1.25; vector-effect: non-scaling-stroke; } .vm .vm-map__area text { fill: var(--vm-c-paper); font-family: var(--vm-sans); font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums; } .vm .vm-map__legend { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vm-s-5); margin-top: var(--vm-s-6); } .vm .vm-map__legend > .vm-label { color: var(--vm-muted); } .vm .vm-map__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vm-s-2) var(--vm-gutter); counter-reset: none; } .vm .vm-map__list > li { display: flex; align-items: center; gap: var(--vm-s-3); min-height: 44px; } .vm .vm-map__list a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: var(--vm-line-strong); text-decoration-thickness: 1px; text-underline-offset: 0.25em; } .vm .vm-map__list a:hover { text-decoration-color: var(--vm-c-blue); } .vm .vm-map__key { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--vm-c-blue); border-radius: 50%; font-weight: 600; font-size: var(--vm-fs-label); line-height: 1; font-variant-numeric: tabular-nums; } .vm .vm-map__office-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vm-s-2) var(--vm-s-4); padding-top: var(--vm-s-5); border-top: 1px solid var(--vm-line); } .vm .vm-map__office-key { flex: none; position: relative; width: 24px; height: 24px; border: 1px solid var(--vm-c-paper); border-radius: 50%; } .vm .vm-map__office-key::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--vm-c-paper); transform: translate(-50%, -50%); } .vm .vm-map__office-line .vm-tel { margin-left: auto; font-family: var(--vm-serif); font-weight: 300; font-size: var(--vm-fs-title); letter-spacing: -0.01em; } @media (max-width: 767px) { .vm .vm-map__deg { display: none; } .vm .vm-map__office-line .vm-tel { margin-left: 0; } } /* -------------------------------------------------------------------------- 22. Answer block, breadcrumb, related pages, people -------------------------------------------------------------------------- */ .vm .vm-answer { position: relative; padding-top: var(--vm-s-8); max-width: 52rem; } .vm .vm-answer::before { content: ""; position: absolute; left: 0; top: 0; width: var(--vm-s-16); height: 4px; background: var(--vm-accent); } .vm .vm-answer__text { font-size: var(--vm-fs-lead); line-height: 1.45; max-width: 46ch; } .vm .vm-answer__meta { margin-top: var(--vm-s-5); color: var(--vm-muted); font-size: var(--vm-fs-label); letter-spacing: 0.04em; line-height: 1.6; } .vm .vm-answer__meta strong { color: var(--vm-ink); font-weight: 500; } .vm .vm-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--vm-s-3); } .vm .vm-crumbs li { display: inline-flex; align-items: center; gap: var(--vm-s-3); font-weight: 500; font-size: var(--vm-fs-label); letter-spacing: var(--vm-track); text-transform: uppercase; line-height: 1.5; color: var(--vm-muted); } /* the separator belongs to the item before it, so a wrapped line never starts with "/" */ .vm .vm-crumbs li:not(:last-child)::after { content: "/"; color: var(--vm-line-control); letter-spacing: 0; } .vm .vm-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--vm-ink); } .vm .vm-crumbs a:hover { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; } .vm .vm-crumbs [aria-current="page"] { color: var(--vm-muted); } .vm .vm-rel { border-top: 1px solid var(--vm-line); padding-top: var(--vm-s-6); } .vm .vm-rel > .vm-label { color: var(--vm-muted); } .vm .vm-rel__list { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--vm-s-4); } .vm .vm-rel__list > li { border-bottom: 1px solid var(--vm-line); min-width: 0; } .vm .vm-rel__link { display: flex; align-items: center; justify-content: space-between; gap: var(--vm-s-4); min-height: 72px; padding-block: var(--vm-s-4); } .vm .vm-rel__title { font-family: var(--vm-serif); font-weight: 300; font-size: clamp(1.375rem, 1.15rem + 0.6vw, 1.75rem); line-height: 1.15; } .vm .vm-rel__link:hover .vm-arrow, .vm .vm-rel__link:focus-visible .vm-arrow { width: var(--vm-s-12); } .vm .vm-rel__link:hover .vm-rel__title { color: var(--vm-accent-text); } @media (min-width: 768px) { .vm .vm-rel__list { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; } .vm .vm-rel__list > li { border-bottom: 0; } .vm .vm-rel__list > li + li { border-left: 1px solid var(--vm-line); } .vm .vm-rel__link { flex-direction: column; align-items: flex-start; justify-content: space-between; min-height: 128px; padding: var(--vm-s-4) var(--vm-s-6); gap: var(--vm-s-6); } .vm .vm-rel__list > li:first-child .vm-rel__link { padding-left: 0; } } .vm .vm-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vm-s-10) var(--vm-gutter); } .vm .vm-person { min-width: 0; } .vm .vm-person__mono { position: relative; display: flex; align-items: flex-end; overflow: hidden; aspect-ratio: 4 / 5; padding: 0 var(--vm-s-4); background: var(--vm-surface-2); border-bottom: 1px solid var(--vm-line-strong); font-family: var(--vm-serif); font-weight: 300; font-optical-sizing: auto; font-size: clamp(5rem, 3rem + 7vw, 10rem); line-height: 0.72; letter-spacing: -0.04em; color: var(--vm-muted); user-select: none; } .vm .vm-person__mono > span { transform: translateY(0.05em); } .vm .vm-person__name { margin-top: var(--vm-s-5); font-family: var(--vm-serif); font-weight: 300; font-size: var(--vm-fs-title); line-height: 1.1; } .vm .vm-person__role { margin-top: var(--vm-s-2); color: var(--vm-muted); font-weight: 500; font-size: var(--vm-fs-label); letter-spacing: var(--vm-track); text-transform: uppercase; line-height: 1.5; } .vm .vm-person__note { margin-top: var(--vm-s-3); line-height: 1.5; } @media (min-width: 1024px) { .vm .vm-people { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* -------------------------------------------------------------------------- 23. Motion (load-in and slow hovers; all non-essential motion lives here) The load-in ends at the element's natural, visible state. If the animation never runs, nothing is hidden: there is no resting opacity 0 anywhere. -------------------------------------------------------------------------- */ @keyframes vm-rise { from { opacity: 0; transform: translateY(16px); } } @keyframes vm-settle { from { transform: scale(1.05); } } @media (prefers-reduced-motion: no-preference) { .vm .vm-hero__text > * { animation: vm-rise 640ms var(--vm-ease) backwards; } .vm .vm-hero__text > :nth-child(2) { animation-delay: 60ms; } .vm .vm-hero__text > :nth-child(3) { animation-delay: 120ms; } .vm .vm-hero__text > :nth-child(4) { animation-delay: 180ms; } .vm .vm-hero__text > :nth-child(5) { animation-delay: 240ms; } .vm .vm-hero__text > :nth-child(n+6) { animation-delay: 300ms; } .vm .vm-hero__aside { animation: vm-rise 640ms var(--vm-ease) 360ms backwards; } .vm .vm-hero__media img { animation: vm-settle 1800ms var(--vm-ease) backwards; } .vm .vm-tile__media img, .vm .vm-split__media img { transition: transform var(--vm-slow) var(--vm-ease); } .vm .vm-tile:hover .vm-tile__media img, .vm .vm-tile:focus-visible .vm-tile__media img { transform: scale(1.04); } } @media (prefers-reduced-motion: reduce) { .vm *, .vm *::before, .vm *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } .vm .vm-rotor__slide { animation: none !important; } } /* -------------------------------------------------------------------------- 24. Print -------------------------------------------------------------------------- */ @media print { .vm .vm-header, .vm .vm-callbar, .vm .vm-menu, .vm .vm-rotor, .vm .vm-hero__media, .vm .vm-hero__glyph { display: none !important; } .vm .vm-hero, .vm .vm-cta, .vm .vm-band--navy { background: none !important; color: #000 !important; } .vm .vm-hero *, .vm .vm-cta *, .vm .vm-band--navy * { color: #000 !important; } } /* Map leader lines and true-location dots (added by design-director after the pin fan-out redraw). */ .vm .vm-map__lead { stroke: var(--vm-c-blue); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; opacity: 0.9; } .vm .vm-map__spot { fill: var(--vm-c-blue); } /* -------------------------------------------------------------------------- 25. Composition helpers (added by design-layout for the first five pages) -------------------------------------------------------------------------- */ /* Side layout: a sticky head column (4) against a body column (7 or 8). The head stays in view while the rows, table or FAQ scroll past it. */ .vm .vm-side { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--vm-s-10); } .vm .vm-side__head > * + * { margin-top: var(--vm-s-6); } .vm .vm-side__head > .vm-btn-row, .vm .vm-side__head > .vm-link { margin-top: var(--vm-s-8); } .vm .vm-side__body { min-width: 0; } @media (min-width: 1024px) { .vm .vm-side { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vm-gutter); align-items: start; } .vm .vm-side__head { grid-column: 1 / span 4; position: sticky; top: calc(var(--vm-header-h) + var(--vm-s-8)); } .vm .vm-side__body { grid-column: 6 / -1; } .vm .vm-side--wide .vm-side__body { grid-column: 5 / -1; } } /* Ledger, stacked variant: title over text, for a ledger inside a narrow column */ @media (min-width: 1024px) { .vm .vm-ledger--stack .vm-ledger__row { align-items: start; row-gap: var(--vm-s-2); padding-block: var(--vm-s-6); } .vm .vm-ledger--stack .vm-ledger__n { grid-column: 1 / span 2; grid-row: 1 / span 2; } .vm .vm-ledger--stack .vm-ledger__title { grid-column: 3 / span 9; grid-row: 1; } .vm .vm-ledger--stack .vm-ledger__text { grid-column: 3 / span 8; grid-row: 2; } .vm .vm-ledger--stack .vm-ledger__go { grid-column: 12 / span 1; grid-row: 1 / span 2; } } /* Ledger rows that are statements, not links (no arrow column) */ .vm .vm-ledger--static .vm-ledger__row { grid-template-columns: var(--vm-s-16) minmax(0, 1fr); grid-template-areas: "n title" "n text"; } @media (min-width: 1024px) { .vm .vm-ledger--static .vm-ledger__row { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: none; } .vm .vm-ledger--static .vm-ledger__text { grid-column: 7 / -1; } } /* Preview chip on a ledger row whose page is not built yet (stripped on publish) */ .vm .vm-ledger__state { display: inline-block; margin-left: var(--vm-s-3); padding: 2px var(--vm-s-2); vertical-align: 0.35em; border: 1px solid var(--vm-line-control); color: var(--vm-muted); font-family: var(--vm-sans); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.4; } @media (max-width: 1023px) { .vm .vm-ledger__state { display: block; width: max-content; margin: var(--vm-s-2) 0 0; } } /* Stepped tiles: four across, the even tiles drop by 64px so the row reads as a sequence, not a strip */ @media (min-width: 1024px) { .vm .vm-tiles--step { align-items: start; padding-bottom: var(--vm-s-16); } .vm .vm-tiles--step > li:nth-child(even) { transform: translateY(var(--vm-s-16)); } } /* Hero foot: a hairline row along the bottom of a hero for the reviewed/broker line */ .vm .vm-hero__foot { grid-column: 1 / -1; padding-top: var(--vm-s-5); border-top: 1px solid var(--vm-line); } .vm .vm-hero__foot .vm-answer__meta { margin-top: 0; max-width: 96ch; } .vm .vm-hero .vm-ph { color: var(--vm-c-ink); } /* Closing CTA with the map first (art left, form right) */ @media (min-width: 1024px) { .vm .vm-cta--map-first .vm-cta__art { grid-column: 1 / span 5; grid-row: 1; } .vm .vm-cta--map-first .vm-cta__text { grid-column: 7 / -1; grid-row: 1; } } /* Hyphenated words in display type never break at the hyphen (the builder wraps them). */ .vm .vm-nb { white-space: nowrap; } /* The office phone in the closing band uses lining figures, like the footer phone. */ .vm .vm-map__office-line .vm-tel { font-variant-numeric: lining-nums; }