/*! * TAV Home Health design system * Source of truth for tokens and shared components. Load ONCE per page, after theme/Elementor CSS. * Docs: design/10-design-system.md * Requirements: strategy/06-accessibility-requirements.md (WCAG 2.2 AA + project rules) * * Conventions * - Every class and custom property is prefixed `tav-`. * - Element defaults are scoped to `.tav-site` with zero added specificity (:where) so any component class wins. * - Components use BEM-style names: .tav-block, .tav-block__element, .tav-block--modifier. * - Sizes in rem; media queries in em (zoom-safe); mobile-first. * * Contents * 1. Fonts 2. Tokens 3. Base 4. Utilities 5. Layout 6. Typography 7. Links * 8. Buttons 9. Cards 10. Content patterns 11. Forms 12. Feedback 13. Navigation aids * 14. User preferences 15. Print */ /* ========================================================================== 1. Fonts (self-hosted, SIL OFL 1.1; licenses in development/fonts/; see docs §3) Latin subset. Sans: variable wght 400–700. Serif: variable wght 600–700, opsz fixed at 32. ========================================================================== */ @font-face { font-family: "Source Sans 3"; src: url("../fonts/tav-source-sans-3.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "Source Serif 4"; src: url("../fonts/tav-source-serif-4.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; } /* ========================================================================== 2. Tokens ========================================================================== */ :root { /* 2.1 Palette (raw). Contrast vs #FFFFFF noted. */ --tav-red-logo: #EF4036; /* logo heart, 3.85:1, decoration/large only */ --tav-red-dove: #ED1C24; /* logo dove, 4.38:1, logo only */ --tav-red-600: #C8102E; /* 5.88:1 */ --tav-red-700: #A50E25; /* 7.81:1 */ --tav-red-900: #7F0B1D; /* 10.67:1 */ --tav-blush-100: #FCE9E2; --tav-blush-50: #FEF6F2; --tav-navy-900: #0E2740; /* 15.19:1 */ --tav-navy-800: #16324F; /* 13.1:1. Surfaces only: never a button colour (client direction 2026-10-07) */ --tav-blue-500: #216FC2; /* TAV brand blue, 5.10:1. Fills (buttons, icons, accents); white text on it 5.10:1 */ --tav-blue-700: #1A599B; /* 7.13:1. Blue text and outlines: >= 5.38:1 on every tint below */ --tav-blue-800: #174E88; /* 8.46:1. Pressed buttons, utility bar, CTA band */ --tav-blue-600: #1F5FA8; /* 6.44:1, focus ring */ --tav-blue-300: #7DBBF2; /* light brand blue for DARK backgrounds: 7.42:1 on navy-900 (footer link hover) */ --tav-blue-200: #C8DBF0; /* 25% tint: decorative borders and shapes only */ --tav-blue-100: #E0EBF6; /* 14% tint: section background ("blue") */ --tav-blue-50: #EDF3FA; /* 8% tint: section background ("soft blue") */ --tav-mint-50: #EDF6F2; /* complementary healthcare tint, used sparingly */ --tav-stone-50: #F4F3F0; /* light neutral section background */ --tav-navy-200: #B9C7D6; /* 7.61:1 on navy-800 */ --tav-sky-50: #EEF4FA; --tav-ink: #1C1C1E; /* 17.01:1 */ --tav-ink-2: #3D3D42; /* 10.8:1 */ --tav-gray-600: #5A5A61; /* 6.84:1, lightest text allowed */ --tav-gray-500: #8A847B; /* 3.71:1, UI borders only */ --tav-gray-200: #D9D4CC; /* decorative borders */ --tav-sand-100: #F3EDE4; --tav-sand-50: #FAF7F2; --tav-white: #FFFFFF; --tav-green-700: #1E7A46; --tav-green-50: #EAF5EE; --tav-amber-700: #8A5A00; --tav-amber-50: #FFF6E0; --tav-red-50: #FDECEC; /* 2.2 Semantic colors (use these in components) */ --tav-color-primary: var(--tav-red-600); --tav-color-primary-hover: var(--tav-red-700); --tav-color-on-primary: var(--tav-white); --tav-color-secondary: var(--tav-blue-500); /* filled secondary buttons (phone), step markers */ --tav-color-secondary-hover: var(--tav-blue-700); --tav-color-secondary-active: var(--tav-blue-800); --tav-color-secondary-strong: var(--tav-blue-700); /* blue as TEXT or outline on light/tinted surfaces */ --tav-color-on-secondary: var(--tav-white); --tav-color-accent: var(--tav-red-logo); /* decorative line-art, large icons */ --tav-color-background: var(--tav-white); --tav-color-surface: var(--tav-white); --tav-color-surface-alt: var(--tav-blue-50); --tav-color-surface-sunken: var(--tav-sand-100); --tav-color-surface-warm: var(--tav-sand-50); /* warm neutral: at most once per page */ --tav-color-surface-tint: var(--tav-blue-50); --tav-color-surface-cool: var(--tav-blue-100); --tav-color-surface-neutral: var(--tav-stone-50); --tav-color-surface-mint: var(--tav-mint-50); --tav-color-surface-inverse: var(--tav-navy-800); --tav-color-surface-inverse-deep: var(--tav-navy-900); --tav-color-text: var(--tav-ink); --tav-color-text-strong: var(--tav-ink); --tav-color-heading: var(--tav-ink); --tav-color-muted: var(--tav-gray-600); --tav-color-text-inverse: var(--tav-white); --tav-color-muted-inverse: var(--tav-navy-200); --tav-color-link: var(--tav-blue-700); --tav-color-link-hover: var(--tav-blue-800); --tav-color-link-inverse: var(--tav-white); --tav-color-border: var(--tav-gray-200); --tav-color-border-strong: var(--tav-gray-500); --tav-color-focus: var(--tav-blue-600); --tav-color-focus-inverse: var(--tav-white); --tav-color-success: var(--tav-green-700); --tav-color-success-bg: var(--tav-green-50); --tav-color-warning: var(--tav-amber-700); --tav-color-warning-bg: var(--tav-amber-50); --tav-color-error: var(--tav-red-700); --tav-color-error-bg: var(--tav-red-50); --tav-color-info: var(--tav-blue-700); --tav-color-info-bg: var(--tav-blue-50); /* 2.3 Typography */ --tav-font-heading: "Source Serif 4", Georgia, "Times New Roman", serif; --tav-font-body: "Source Sans 3", "Segoe UI", Roboto, Arial, sans-serif; --tav-fs-display: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem); /* 36 → 52 */ --tav-fs-h1: clamp(2rem, 1.5rem + 2vw, 2.75rem); /* 32 → 44 */ --tav-fs-h2: clamp(1.75rem, 1.45rem + 1.2vw, 2.25rem); /* 28 → 36 */ --tav-fs-h3: clamp(1.375rem, 1.275rem + 0.4vw, 1.625rem); /* 22 → 26 */ --tav-fs-h4: 1.1875rem; /* 19 */ --tav-fs-lead: clamp(1.25rem, 1.2rem + 0.2vw, 1.375rem); /* 20 → 22 */ --tav-fs-body: 1.125rem; /* 18 */ --tav-fs-small: 1rem; /* 16, minimum */ --tav-fs-eyebrow: 0.9375rem; /* 15, uppercase, bold */ --tav-fw-regular: 400; --tav-fw-semibold: 600; --tav-fw-bold: 700; --tav-lh-tight: 1.15; --tav-lh-heading: 1.25; --tav-lh-snug: 1.4; --tav-lh-body: 1.6; --tav-measure: 68ch; --tav-measure-narrow: 52ch; /* 2.4 Spacing (8px base) */ --tav-space-1: 0.25rem; /* 4 */ --tav-space-2: 0.5rem; /* 8 */ --tav-space-3: 0.75rem; /* 12 */ --tav-space-4: 1rem; /* 16 */ --tav-space-5: 1.5rem; /* 24 */ --tav-space-6: 2rem; /* 32 */ --tav-space-7: 3rem; /* 48 */ --tav-space-8: 4rem; /* 64 */ --tav-space-9: 6rem; /* 96 */ --tav-space-10: 8rem; /* 128 */ --tav-section-pad: clamp(4rem, 3rem + 4vw, 6rem); --tav-section-pad-tight: clamp(2.5rem, 2rem + 2vw, 3.5rem); --tav-gap: clamp(1.5rem, 1.25rem + 1vw, 2rem); /* 2.5 Containers */ --tav-container: 75rem; /* 1200 */ --tav-container-narrow: 47.5rem;/* 760: forms, legal, prose */ --tav-container-wide: 85rem; /* 1360 */ --tav-gutter: clamp(1.25rem, 0.9rem + 1.5vw, 2rem); /* 2.6 Radius, borders, shadows */ --tav-radius-sm: 8px; --tav-radius-md: 12px; --tav-radius-lg: 16px; --tav-radius-pill: 999px; --tav-border-width: 1px; --tav-border-width-ui: 1.5px; --tav-border: var(--tav-border-width) solid var(--tav-color-border); --tav-border-ui: var(--tav-border-width-ui) solid var(--tav-color-border-strong); --tav-shadow-1: 0 1px 2px rgb(28 28 30 / 0.06), 0 2px 8px rgb(28 28 30 / 0.06); --tav-shadow-2: 0 4px 16px rgb(28 28 30 / 0.10); --tav-shadow-3: 0 12px 28px rgb(23 78 136 / 0.14); /* card hover lift (blue-tinted) */ /* 2.7 Controls & focus */ --tav-control-h: 3.25rem; /* 52 */ --tav-target-min: 2.75rem; /* 44 */ --tav-focus-width: 3px; --tav-focus-offset: 3px; --tav-focus-ring: var(--tav-focus-width) solid var(--tav-color-focus); /* 2.8 Chrome sizes (used for scroll-padding so focus is never obscured) */ --tav-header-h: 4rem; /* 64 mobile; overridden at lg */ --tav-bottom-bar-h: 0rem; /* set to 4rem if the optional mobile action bar is used */ /* 2.9 Motion & layers */ --tav-duration-fast: 120ms; --tav-duration: 200ms; --tav-duration-reveal: 600ms; --tav-ease: cubic-bezier(0.2, 0, 0, 1); --tav-z-dropdown: 100; --tav-z-sticky: 200; --tav-z-overlay: 300; --tav-z-modal: 400; --tav-z-skip: 500; } @media (min-width: 64em) { :root { --tav-header-h: 5rem; } /* 80 desktop */ } /* ========================================================================== 3. Base (scoped to .tav-site, zero specificity) ========================================================================== */ :where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--tav-header-h) + var(--tav-space-4)); scroll-padding-bottom: calc(var(--tav-bottom-bar-h) + var(--tav-space-4)); } .tav-site { /* real specificity (0,1,0): must beat theme `body {…}` rules (Astra: font, size, colour) */ margin: 0; background-color: var(--tav-color-background); color: var(--tav-color-text); font-family: var(--tav-font-body); font-size: var(--tav-fs-body); font-weight: var(--tav-fw-regular); line-height: var(--tav-lh-body); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } :where(.tav-site) :where(*, *::before, *::after) { box-sizing: border-box; } :where(.tav-site) :is(h1, h2, h3, h4, h5, h6) { margin: 0 0 var(--tav-space-4); color: var(--tav-color-heading); line-height: var(--tav-lh-heading); text-wrap: balance; } :where(.tav-site) :is(h1) { font-family: var(--tav-font-heading); font-size: var(--tav-fs-h1); font-weight: var(--tav-fw-bold); line-height: var(--tav-lh-tight); } :where(.tav-site) :is(h2) { font-family: var(--tav-font-heading); font-size: var(--tav-fs-h2); font-weight: var(--tav-fw-semibold); } :where(.tav-site) :is(h3) { font-family: var(--tav-font-body); font-size: var(--tav-fs-h3); font-weight: var(--tav-fw-bold); line-height: 1.3; } :where(.tav-site) :is(h4, h5, h6) { font-family: var(--tav-font-body); font-size: var(--tav-fs-h4); font-weight: var(--tav-fw-bold); line-height: 1.35; } :where(.tav-site) :is(p, ul, ol, dl, blockquote, figure, address, table) { margin: 0 0 var(--tav-space-4); } :where(.tav-site) :is(p) { text-wrap: pretty; } :where(.tav-site) :is(ul, ol) { padding-left: 1.5em; } :where(.tav-site) :is(li + li) { margin-top: var(--tav-space-2); } :where(.tav-site) :is(address) { font-style: normal; } :where(.tav-site) :is(strong, b) { font-weight: var(--tav-fw-bold); } :where(.tav-site) :is(small) { font-size: var(--tav-fs-small); } :where(.tav-site) :is(img, svg, video, iframe) { max-width: 100%; } :where(.tav-site) :is(img, video) { height: auto; display: block; } :where(.tav-site) :is(iframe) { border: 0; } :where(.tav-site) :is(hr) { border: 0; border-top: var(--tav-border); margin: var(--tav-space-7) 0; } :where(.tav-site) :is(a) { color: var(--tav-color-link); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } :where(.tav-site) :where(a:hover) { color: var(--tav-color-link-hover); text-decoration-thickness: 2px; } :where(.tav-site) :is(button, input, select, textarea) { font: inherit; color: inherit; } /* Focus: always visible, never removed (A11Y-04) */ :where(.tav-site) :focus-visible { outline: var(--tav-focus-ring); outline-offset: var(--tav-focus-offset); } :where(.tav-site) [tabindex="-1"]:focus:not(:focus-visible) { outline: none; } /* Hidden content must also be hidden from assistive tech */ :where(.tav-site) [hidden] { display: none !important; } /* ========================================================================== 4. Utilities ========================================================================== */ .tav-visually-hidden:not(:focus):not(:active) { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } .tav-text-center { text-align: center; } .tav-measure { max-width: var(--tav-measure); } .tav-measure-narrow { max-width: var(--tav-measure-narrow); } .tav-mt-0 { margin-top: 0 !important; } .tav-mb-0 { margin-bottom: 0 !important; } .tav-muted { color: var(--tav-color-muted); } .tav-nowrap { white-space: nowrap; } /* ========================================================================== 5. Layout ========================================================================== */ .tav-container { width: 100%; max-width: calc(var(--tav-container) + 2 * var(--tav-gutter)); margin-inline: auto; padding-inline: var(--tav-gutter); } .tav-container--narrow { max-width: calc(var(--tav-container-narrow) + 2 * var(--tav-gutter)); } .tav-container--wide { max-width: calc(var(--tav-container-wide) + 2 * var(--tav-gutter)); } /* Sections: background rhythm (design §6.4, client direction 2026-10-07). Consecutive sections never share a background: alternate white with ONE tint (soft blue, blue, neutral, mint); warm sand at most once per page. */ .tav-section { padding-block: var(--tav-section-pad); background-color: var(--tav-color-surface); color: var(--tav-color-text); } .tav-section--tight { padding-block: var(--tav-section-pad-tight); } .tav-section--alt { background-color: var(--tav-color-surface-alt); } .tav-section--warm { background-color: var(--tav-color-surface-warm); } .tav-section--cool { background-color: var(--tav-color-surface-cool); } .tav-section--neutral { background-color: var(--tav-color-surface-neutral); } .tav-section--mint { background-color: var(--tav-color-surface-mint); } .tav-section--inverse { background-color: var(--tav-color-surface-inverse); color: var(--tav-color-text-inverse); } .tav-section__header { max-width: var(--tav-measure); margin-bottom: var(--tav-space-7); } .tav-section__header--center { margin-inline: auto; text-align: center; } .tav-section__header > :last-child { margin-bottom: 0; } /* Inverse context: recolor text, links, focus. Applies to sections, bands, footer. */ :is(.tav-section--inverse, .tav-cta-band, .tav-inverse) { --tav-color-text: var(--tav-color-text-inverse); --tav-color-heading: var(--tav-color-text-inverse); --tav-color-muted: var(--tav-color-muted-inverse); --tav-color-link: var(--tav-color-link-inverse); --tav-color-link-hover: var(--tav-color-link-inverse); --tav-color-focus: var(--tav-color-focus-inverse); --tav-focus-ring: var(--tav-focus-width) solid var(--tav-color-focus-inverse); color: var(--tav-color-text-inverse); } /* Light context: white-surface components restore light tokens even inside an inverse section */ :is(.tav-light, .tav-card, .tav-trustbar, .tav-accordion__item, .tav-alert, .tav-input, .tav-select, .tav-textarea, .tav-choice--boxed) { --tav-color-text: var(--tav-ink); --tav-color-heading: var(--tav-ink); --tav-color-muted: var(--tav-gray-600); --tav-color-link: var(--tav-blue-700); --tav-color-link-hover: var(--tav-blue-800); --tav-color-focus: var(--tav-blue-600); --tav-focus-ring: var(--tav-focus-width) solid var(--tav-blue-600); } .tav-light { background-color: var(--tav-color-surface); color: var(--tav-color-text); } /* Stack: vertical rhythm between children */ .tav-stack { display: flex; flex-direction: column; gap: var(--tav-stack-gap, var(--tav-space-4)); } .tav-stack > * { margin-block: 0; } .tav-stack--sm { --tav-stack-gap: var(--tav-space-2); } .tav-stack--lg { --tav-stack-gap: var(--tav-space-6); } /* Cluster: inline group that wraps (buttons, badges) */ .tav-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tav-cluster-gap, var(--tav-space-4)); } .tav-cluster--center { justify-content: center; } /* Grid: auto-fit columns that collapse to 1 at narrow widths (reflow, A11Y-11.1) */ .tav-grid { display: grid; gap: var(--tav-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--tav-grid-min, 18rem)), 1fr)); } .tav-grid--2 { --tav-grid-min: 24rem; } .tav-grid--3 { --tav-grid-min: 18rem; } .tav-grid--4 { --tav-grid-min: 14rem; } .tav-grid > * { min-width: 0; margin: 0; } :is(.tav-grid, .tav-cluster, .tav-stack, .tav-split) { list-style: none; } ul:is(.tav-grid, .tav-cluster) { padding: 0; margin-top: 0; } .tav-cluster > * { margin: 0; } /* Split: media + content, stacked on mobile */ .tav-split { display: grid; gap: var(--tav-space-7); align-items: center; } @media (min-width: 64em) { .tav-split { grid-template-columns: 1fr 1fr; gap: var(--tav-space-8); } .tav-split--media-end > .tav-split__media { order: 2; } /* visual only; media carries no reading-order meaning */ } /* ========================================================================== 6. Typography classes (visual size independent of heading level, A11Y-05.3) ========================================================================== */ .tav-display { font-family: var(--tav-font-heading); font-size: var(--tav-fs-display); font-weight: var(--tav-fw-bold); line-height: var(--tav-lh-tight); } .tav-h1 { font-family: var(--tav-font-heading); font-size: var(--tav-fs-h1); font-weight: var(--tav-fw-bold); line-height: var(--tav-lh-tight); } .tav-h2 { font-family: var(--tav-font-heading); font-size: var(--tav-fs-h2); font-weight: var(--tav-fw-semibold); line-height: var(--tav-lh-heading); } .tav-h3 { font-family: var(--tav-font-body); font-size: var(--tav-fs-h3); font-weight: var(--tav-fw-bold); line-height: 1.3; } .tav-h4 { font-family: var(--tav-font-body); font-size: var(--tav-fs-h4); font-weight: var(--tav-fw-bold); line-height: 1.35; } :is(.tav-display, .tav-h1, .tav-h2, .tav-h3, .tav-h4) { color: var(--tav-color-heading); text-wrap: balance; } .tav-lead { font-size: var(--tav-fs-lead); line-height: 1.55; color: var(--tav-color-text); max-width: var(--tav-measure); } .tav-small { font-size: var(--tav-fs-small); line-height: 1.5; } /* Eyebrow: a label, NOT a heading (A11Y-05.4) */ .tav-eyebrow { display: inline-flex; align-items: center; gap: var(--tav-space-2); margin: 0 0 var(--tav-space-3); font-size: var(--tav-fs-eyebrow); font-weight: var(--tav-fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tav-color-secondary-strong); } .tav-eyebrow::before { content: ""; width: 1.5rem; height: 2px; background-color: currentColor; } :is(.tav-section--inverse, .tav-cta-band, .tav-inverse) .tav-eyebrow { color: var(--tav-blue-100); } /* Long-form content (legal pages, service details) */ .tav-prose { max-width: var(--tav-measure); } .tav-prose > :first-child { margin-top: 0; } .tav-prose :where(h2) { margin-top: var(--tav-space-7); } .tav-prose :where(h3) { margin-top: var(--tav-space-6); } .tav-prose :where(ul, ol) { padding-left: 1.5em; } .tav-prose :where(li)::marker { color: var(--tav-color-secondary); } /* ========================================================================== 7. Links ========================================================================== */ .tav-link { color: var(--tav-color-link); font-weight: var(--tav-fw-semibold); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } .tav-link:hover { color: var(--tav-color-link-hover); text-decoration-thickness: 2px; } /* Link with trailing arrow: "Learn about skilled nursing →" */ .tav-link--arrow { display: inline-flex; align-items: center; gap: var(--tav-space-2); min-height: var(--tav-target-min); } .tav-link--arrow::after { content: ""; flex: none; width: 1.125em; height: 1.125em; background-color: currentColor; -webkit-mask: var(--tav-icon-arrow) center / contain no-repeat; mask: var(--tav-icon-arrow) center / contain no-repeat; transition: transform var(--tav-duration) var(--tav-ease); } .tav-link--arrow:hover::after { transform: translateX(3px); } /* Phone / email links: never break the number */ .tav-tel { white-space: nowrap; } :root { --tav-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); --tav-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); --tav-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --tav-icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"); } /* ========================================================================== 8. Buttons (Brand §7, A11Y-07) Request care ========================================================================== */ .tav-btn { --tav-btn-bg: var(--tav-color-primary); --tav-btn-fg: var(--tav-color-on-primary); --tav-btn-border: var(--tav-btn-bg); --tav-btn-bg-hover: var(--tav-color-primary-hover); --tav-btn-fg-hover: var(--tav-btn-fg); --tav-btn-border-hover: var(--tav-btn-bg-hover); display: inline-flex; align-items: center; justify-content: center; gap: var(--tav-space-2); min-height: var(--tav-control-h); min-width: var(--tav-target-min); padding: 0.75rem 1.75rem; border: 2px solid var(--tav-btn-border); border-radius: var(--tav-radius-pill); background-color: var(--tav-btn-bg); color: var(--tav-btn-fg); font-family: var(--tav-font-body); font-size: var(--tav-fs-body); font-weight: var(--tav-fw-semibold); line-height: 1.2; text-align: center; text-decoration: none; text-transform: none; letter-spacing: normal; cursor: pointer; transition: background-color var(--tav-duration-fast) var(--tav-ease), border-color var(--tav-duration-fast) var(--tav-ease), color var(--tav-duration-fast) var(--tav-ease), box-shadow var(--tav-duration) var(--tav-ease); } .tav-btn:hover { background-color: var(--tav-btn-bg-hover); border-color: var(--tav-btn-border-hover); color: var(--tav-btn-fg-hover); text-decoration: none; box-shadow: 0 4px 12px rgb(23 78 136 / 0.18); } .tav-btn:active { transform: translateY(1px); background-color: var(--tav-btn-bg-active, var(--tav-btn-bg-hover)); } .tav-btn:focus-visible { outline: var(--tav-focus-ring); outline-offset: var(--tav-focus-offset); } .tav-btn__icon { flex: none; width: 1.25em; height: 1.25em; } /* Variants */ .tav-btn--primary { /* defaults above */ } /* Hierarchy: primary = red (the one main action), phone = filled brand blue, secondary = blue outline. */ .tav-btn--primary { --tav-btn-bg-active: var(--tav-red-900); } .tav-btn--phone { --tav-btn-bg: var(--tav-color-secondary); --tav-btn-fg: var(--tav-color-on-secondary); --tav-btn-bg-hover: var(--tav-color-secondary-hover); --tav-btn-bg-active: var(--tav-color-secondary-active); } .tav-btn--secondary { --tav-btn-bg: transparent; --tav-btn-fg: var(--tav-color-secondary-strong); --tav-btn-border: var(--tav-color-secondary-strong); --tav-btn-bg-hover: var(--tav-blue-50); --tav-btn-fg-hover: var(--tav-blue-800); --tav-btn-border-hover: var(--tav-blue-800); --tav-btn-bg-active: var(--tav-blue-100); } :is(.tav-section--alt, .tav-section--cool) .tav-btn--secondary { --tav-btn-bg-hover: var(--tav-white); } .tav-btn--on-dark { --tav-btn-bg: var(--tav-white); --tav-btn-fg: var(--tav-blue-800); --tav-btn-bg-hover: var(--tav-blue-50); --tav-btn-fg-hover: var(--tav-navy-900); --tav-btn-border-hover: var(--tav-blue-50); --tav-btn-bg-active: var(--tav-blue-100); } .tav-btn--outline-on-dark { --tav-btn-bg: transparent; --tav-btn-fg: var(--tav-white); --tav-btn-border: var(--tav-white); --tav-btn-bg-hover: rgb(255 255 255 / 0.12); --tav-btn-fg-hover: var(--tav-white); --tav-btn-border-hover: var(--tav-white); } /* Sizes / layout */ .tav-btn--block { display: flex; width: 100%; } @media (max-width: 47.99em) { .tav-btn--block-mobile { display: flex; width: 100%; } } .tav-btn--compact { min-height: var(--tav-target-min); padding: 0.5rem 1.25rem; font-size: var(--tav-fs-small); } /* Native disabled is discouraged (A11Y-07.7); styled for completeness */ .tav-btn:disabled, .tav-btn[aria-disabled="true"] { --tav-btn-bg: var(--tav-sand-100); --tav-btn-fg: var(--tav-gray-600); --tav-btn-border: var(--tav-gray-500); cursor: not-allowed; } /* ========================================================================== 9. Cards (Brand §8, A11Y-06.3: one link per card) ========================================================================== */ .tav-card { position: relative; display: flex; flex-direction: column; height: 100%; background-color: var(--tav-color-surface); border: var(--tav-border); border-radius: var(--tav-radius-lg); box-shadow: var(--tav-shadow-1); overflow: hidden; color: var(--tav-color-text); } .tav-section--alt .tav-card, .tav-section--warm .tav-card { background-color: var(--tav-color-surface); } .tav-card--sunken { background-color: var(--tav-color-surface-sunken); box-shadow: none; } .tav-card--flat { box-shadow: none; } .tav-card__media { --tav-media-ratio: 3 / 2; margin: 0; background-color: var(--tav-color-surface-sunken); } /* Ratio lives on the : an aspect-ratio box would grow to fit a taller image (min-height: auto). */ .tav-card__media img { width: 100%; height: auto; aspect-ratio: var(--tav-media-ratio); object-fit: cover; } .tav-card__body { display: flex; flex-direction: column; gap: var(--tav-space-3); flex: 1; padding: var(--tav-space-5); } @media (min-width: 48em) { .tav-card__body { padding: var(--tav-space-6); } } .tav-card__body > * { margin: 0; } .tav-card__icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background-color: var(--tav-color-surface-tint); color: var(--tav-color-secondary-strong); } .tav-card__icon svg { width: 2rem; height: 2rem; } .tav-card__title { font-family: var(--tav-font-body); font-size: var(--tav-fs-h3); font-weight: var(--tav-fw-bold); line-height: 1.3; color: var(--tav-color-heading); } .tav-card__text { color: var(--tav-color-text); } .tav-card__footer { margin-top: auto; padding-top: var(--tav-space-2); } /* Whole-card click via the title link only (stretched link) */ .tav-card__link { color: inherit; text-decoration: none; } .tav-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .tav-card--link { transition: box-shadow var(--tav-duration) var(--tav-ease), border-color var(--tav-duration) var(--tav-ease), transform var(--tav-duration) var(--tav-ease); } .tav-card--link:hover { box-shadow: var(--tav-shadow-3); border-color: var(--tav-blue-200); transform: translateY(-3px); } .tav-card__media img { transition: transform 600ms var(--tav-ease); } .tav-card--link:hover .tav-card__media img { transform: scale(1.03); } .tav-card--link:hover .tav-card__link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; } /* Focus ring drawn on the whole card, not the (invisible) stretched area */ .tav-card__link:focus-visible { outline: none; } .tav-card--link:has(.tav-card__link:focus-visible) { outline: var(--tav-focus-ring); outline-offset: var(--tav-focus-offset); } /* Fallback for browsers without :has(): keep the link's own outline */ @supports not selector(:has(*)) { .tav-card__link:focus-visible { outline: var(--tav-focus-ring); outline-offset: var(--tav-focus-offset); } } /* Faux arrow cue inside a linked card (decorative; the title link carries the name) */ .tav-card__cue { display: inline-flex; align-items: center; gap: var(--tav-space-2); color: var(--tav-color-link); font-weight: var(--tav-fw-semibold); } .tav-card__cue::after { content: ""; width: 1.125em; height: 1.125em; background-color: currentColor; -webkit-mask: var(--tav-icon-arrow) center / contain no-repeat; mask: var(--tav-icon-arrow) center / contain no-repeat; } /* ========================================================================== 10. Content patterns ========================================================================== */ /* 10.1 Media (images) */ .tav-media { margin: 0; border-radius: var(--tav-radius-lg); overflow: hidden; background-color: var(--tav-color-surface-sunken); } .tav-media img { width: 100%; height: auto; aspect-ratio: var(--tav-media-ratio, auto); object-fit: cover; } .tav-media--3x2 { --tav-media-ratio: 3 / 2; } .tav-media--4x5 { --tav-media-ratio: 4 / 5; } .tav-media--16x9 { --tav-media-ratio: 16 / 9; } .tav-media__caption { padding: var(--tav-space-3) 0 0; font-size: var(--tav-fs-small); color: var(--tav-color-muted); } /* 10.2 Checklist (service scope lists) */ .tav-checklist { list-style: none; padding: 0; margin: 0 0 var(--tav-space-5); display: grid; gap: var(--tav-space-3); } .tav-checklist > li { position: relative; margin: 0; padding-left: 2.25rem; } .tav-checklist > li::before { content: ""; position: absolute; left: 0; top: 0.15em; width: 1.5rem; height: 1.5rem; border-radius: 50%; background-color: var(--tav-color-surface-tint); } .tav-checklist > li::after { content: ""; position: absolute; left: 0.3rem; top: calc(0.15em + 0.3rem); width: 0.9rem; height: 0.9rem; background-color: var(--tav-color-secondary); -webkit-mask: var(--tav-icon-check) center / contain no-repeat; mask: var(--tav-icon-check) center / contain no-repeat; } @media (min-width: 48em) { .tav-checklist--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--tav-space-6); } } /* 10.3 Process steps (ordered list: "How care starts") */ .tav-steps { list-style: none; counter-reset: tav-step; padding: 0; margin: 0; display: grid; gap: var(--tav-space-5); } @media (min-width: 64em) { .tav-steps--row { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } } .tav-steps > li { counter-increment: tav-step; position: relative; margin: 0; padding-left: 4rem; } .tav-steps > li::before { content: counter(tav-step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background-color: var(--tav-color-secondary); color: var(--tav-color-on-secondary); font-weight: var(--tav-fw-bold); } .tav-steps__title { margin: 0 0 var(--tav-space-1); font-size: var(--tav-fs-h4); font-weight: var(--tav-fw-bold); line-height: 1.35; color: var(--tav-color-heading); } .tav-steps__text { margin: 0; } /* 10.4 Badge / chip (non-interactive) */ .tav-badge { display: inline-flex; align-items: center; gap: var(--tav-space-1); padding: 0.25rem 0.75rem; border-radius: var(--tav-radius-pill); background-color: var(--tav-color-surface-tint); color: var(--tav-blue-800); font-size: var(--tav-fs-small); font-weight: var(--tav-fw-semibold); line-height: 1.4; } .tav-badge--neutral { background-color: var(--tav-color-surface-sunken); color: var(--tav-color-text); } /* 10.5 Trust bar (replaces auto-rotating awards carousel, A11Y-12.1) */ .tav-trustbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--tav-space-5) var(--tav-space-7); padding: var(--tav-space-5) var(--tav-space-6); border: var(--tav-border); border-radius: var(--tav-radius-lg); background-color: var(--tav-color-surface); } .tav-trustbar__item { display: flex; align-items: center; gap: var(--tav-space-3); margin: 0; font-weight: var(--tav-fw-semibold); } .tav-trustbar__seal { width: 6rem; height: auto; flex: none; } /* ≥ 96px (Brand §4.4); the site uses .tav-cert (site.css) */ /* 10.6 Accordion (FAQ): native details/summary (A11Y-03.7) */ .tav-accordion { display: grid; gap: var(--tav-space-3); } .tav-accordion__item { border: var(--tav-border); border-radius: var(--tav-radius-md); background-color: var(--tav-color-surface); } .tav-accordion__item[open] { border-color: var(--tav-color-border-strong); } .tav-accordion__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--tav-space-4); min-height: var(--tav-control-h); padding: var(--tav-space-4) var(--tav-space-5); font-weight: var(--tav-fw-bold); line-height: var(--tav-lh-snug); color: var(--tav-color-heading); cursor: pointer; list-style: none; border-radius: inherit; } .tav-accordion__summary::-webkit-details-marker { display: none; } .tav-accordion__summary::after { content: ""; flex: none; width: 1.5rem; height: 1.5rem; background-color: var(--tav-color-primary); -webkit-mask: var(--tav-icon-chevron) center / contain no-repeat; mask: var(--tav-icon-chevron) center / contain no-repeat; transition: transform var(--tav-duration) var(--tav-ease); } .tav-accordion__item[open] > .tav-accordion__summary::after { transform: rotate(180deg); } .tav-accordion__summary:hover { background-color: var(--tav-color-surface-alt); } .tav-accordion__panel { padding: 0 var(--tav-space-5) var(--tav-space-5); } .tav-accordion__panel > :last-child { margin-bottom: 0; } /* 10.7 CTA band: a full-width brand-blue section, once per page. White text >= 7.13:1 on both gradient stops. */ .tav-cta-band { text-align: center; } .tav-section--cta { position: relative; overflow: hidden; background-color: var(--tav-blue-700); background-image: linear-gradient(120deg, var(--tav-blue-700) 0%, var(--tav-blue-800) 100%); } .tav-section--cta::before { /* decorative ring; 5% white keeps text contrast >= 6.5:1 where it overlaps */ content: ""; position: absolute; right: -8rem; bottom: -14rem; width: 30rem; height: 30rem; border-radius: 50%; border: 3.5rem solid rgb(255 255 255 / 0.05); pointer-events: none; } .tav-section--cta > .tav-container { position: relative; } .tav-cta-band > :last-child { margin-bottom: 0; } .tav-cta-band .tav-cluster { justify-content: center; } /* 10.8 Contact list (phone / fax / email / hours) */ .tav-contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--tav-space-3); } .tav-contact-list > li { display: flex; gap: var(--tav-space-3); align-items: flex-start; margin: 0; } .tav-contact-list__icon { flex: none; width: 1.5rem; height: 1.5rem; margin-top: 0.15em; color: var(--tav-color-primary); } :is(.tav-section--inverse, .tav-inverse) .tav-contact-list__icon { color: var(--tav-blue-200); } /* 10.9 Line-art divider motif (decorative; aria-hidden in markup) */ .tav-divider { display: block; width: 4rem; height: 3px; margin: 0 0 var(--tav-space-5); border: 0; border-radius: 2px; background-color: var(--tav-color-accent); } .tav-section__header--center .tav-divider { margin-inline: auto; } /* 10.10 Responsive embed (map) */ .tav-embed { position: relative; border-radius: var(--tav-radius-lg); overflow: hidden; border: var(--tav-border); aspect-ratio: 4 / 3; max-height: 60vh; width: 100%; } .tav-embed > iframe { position: absolute; inset: 0; width: 100%; height: 100%; } /* ========================================================================== 11. Forms (A11Y-08) ========================================================================== */ .tav-form { display: grid; gap: var(--tav-space-5); max-width: var(--tav-container-narrow); } .tav-form__intro { margin: 0; color: var(--tav-color-muted); } .tav-form__row { display: grid; gap: var(--tav-space-5); } @media (min-width: 48em) { .tav-form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tav-form__row--3 { grid-template-columns: 2fr 1fr 1fr; } } .tav-form__actions { display: flex; flex-wrap: wrap; gap: var(--tav-space-4); align-items: center; padding-top: var(--tav-space-2); } .tav-field { display: grid; gap: var(--tav-space-2); margin: 0; min-width: 0; } .tav-label { display: block; font-size: var(--tav-fs-body); font-weight: var(--tav-fw-semibold); line-height: var(--tav-lh-snug); color: var(--tav-color-text); } .tav-label__req, .tav-label__opt { font-weight: var(--tav-fw-regular); color: var(--tav-color-muted); } .tav-hint { margin: 0; font-size: var(--tav-fs-small); line-height: 1.5; color: var(--tav-color-muted); } .tav-input, .tav-select, .tav-textarea { display: block; width: 100%; min-height: var(--tav-control-h); padding: 0.75rem 1rem; border: var(--tav-border-ui); border-radius: var(--tav-radius-sm); background-color: var(--tav-white); color: var(--tav-color-text); font-family: var(--tav-font-body); font-size: var(--tav-fs-body); /* ≥ 16px prevents iOS zoom (A11Y-11.9) */ line-height: 1.4; transition: border-color var(--tav-duration-fast) var(--tav-ease), box-shadow var(--tav-duration-fast) var(--tav-ease); } .tav-input:hover, .tav-select:hover, .tav-textarea:hover { border-color: var(--tav-color-text); } .tav-input:focus-visible, .tav-select:focus-visible, .tav-textarea:focus-visible { outline: var(--tav-focus-ring); outline-offset: 2px; border-color: var(--tav-color-text); } .tav-textarea { min-height: 8rem; resize: vertical; } .tav-input--short { max-width: 12rem; } /* ZIP, dates */ .tav-input--medium { max-width: 20rem; } /* phone */ .tav-select { appearance: none; padding-right: 3rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1C1E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.25rem; } .tav-input::placeholder, .tav-textarea::placeholder { color: var(--tav-color-muted); opacity: 1; } /* Fieldset / legend for grouped choices */ .tav-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: var(--tav-space-3); } .tav-legend { padding: 0; margin-bottom: var(--tav-space-2); font-weight: var(--tav-fw-semibold); font-size: var(--tav-fs-body); line-height: var(--tav-lh-snug); } .tav-fieldset--section > .tav-legend { font-family: var(--tav-font-heading); font-size: var(--tav-fs-h3); font-weight: var(--tav-fw-semibold); margin-bottom: var(--tav-space-4); } /* Radio / checkbox: native inputs, enlarged (24px), whole row clickable, ≥ 44px target */ .tav-choice { display: flex; align-items: flex-start; gap: var(--tav-space-3); min-height: var(--tav-target-min); padding-block: var(--tav-space-2); cursor: pointer; line-height: var(--tav-lh-snug); } .tav-choice input[type="radio"], .tav-choice input[type="checkbox"] { flex: none; width: 1.5rem; height: 1.5rem; margin: 0; margin-top: 0.05em; accent-color: var(--tav-color-secondary-strong); cursor: pointer; } .tav-choice--boxed { padding: var(--tav-space-3) var(--tav-space-4); border: var(--tav-border-ui); border-radius: var(--tav-radius-sm); background-color: var(--tav-white); } .tav-choice--boxed:has(input:checked) { border-color: var(--tav-color-secondary-strong); background-color: var(--tav-blue-50); } .tav-choice-group { display: grid; gap: var(--tav-space-2); } @media (min-width: 48em) { .tav-choice-group--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* File input */ .tav-file { display: block; width: 100%; font-size: var(--tav-fs-small); } .tav-file::file-selector-button { margin-right: var(--tav-space-3); min-height: var(--tav-target-min); padding: 0.5rem 1.25rem; border: 2px solid var(--tav-color-secondary-strong); border-radius: var(--tav-radius-pill); background-color: transparent; color: var(--tav-color-secondary-strong); font: inherit; font-weight: var(--tav-fw-semibold); cursor: pointer; } /* Error state: border + icon + text, never color alone (A11Y-08.13) */ .tav-input[aria-invalid="true"], .tav-select[aria-invalid="true"], .tav-textarea[aria-invalid="true"] { border-color: var(--tav-color-error); border-width: 2px; } .tav-field--error { padding-left: var(--tav-space-4); border-left: 4px solid var(--tav-color-error); } .tav-error-msg { display: flex; align-items: flex-start; gap: var(--tav-space-2); margin: 0; color: var(--tav-color-error); font-weight: var(--tav-fw-semibold); font-size: var(--tav-fs-small); line-height: 1.5; } .tav-error-msg__icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.1em; } /* Multi-step progress (text first, A11Y-08.16) */ .tav-progress { display: grid; gap: var(--tav-space-2); margin: 0 0 var(--tav-space-5); } .tav-progress__label { margin: 0; font-weight: var(--tav-fw-semibold); } .tav-progress__bar { width: 100%; height: 0.5rem; border-radius: var(--tav-radius-pill); background-color: var(--tav-color-surface-sunken); border: 1px solid var(--tav-color-border-strong); overflow: hidden; } .tav-progress__fill { height: 100%; background-color: var(--tav-color-secondary); width: var(--tav-progress, 0%); } /* ========================================================================== 12. Feedback: alerts, error summary, status ========================================================================== */ .tav-alert { --tav-alert-fg: var(--tav-color-info); --tav-alert-bg: var(--tav-color-info-bg); display: flex; gap: var(--tav-space-3); align-items: flex-start; padding: var(--tav-space-4) var(--tav-space-5); border: 1px solid var(--tav-alert-fg); border-left-width: 6px; border-radius: var(--tav-radius-md); background-color: var(--tav-alert-bg); color: var(--tav-color-text); } .tav-alert__icon { flex: none; width: 1.5rem; height: 1.5rem; color: var(--tav-alert-fg); margin-top: 0.1em; } .tav-alert__title { margin: 0 0 var(--tav-space-1); font-size: var(--tav-fs-h4); font-weight: var(--tav-fw-bold); color: var(--tav-alert-fg); line-height: 1.35; } .tav-alert__body > :last-child { margin-bottom: 0; } .tav-alert--success { --tav-alert-fg: var(--tav-color-success); --tav-alert-bg: var(--tav-color-success-bg); } .tav-alert--warning { --tav-alert-fg: var(--tav-color-warning); --tav-alert-bg: var(--tav-color-warning-bg); } .tav-alert--error { --tav-alert-fg: var(--tav-color-error); --tav-alert-bg: var(--tav-color-error-bg); } .tav-alert--note { --tav-alert-fg: var(--tav-color-secondary-strong); --tav-alert-bg: var(--tav-color-surface-alt); } /* Error summary: focused on submit, lists links to fields (A11Y-08.11). Markup: