/* ============================================================================= * pages.css — Vivetra marketing site (vivetra.vet) — page-specific styles * Version: 1.1 * Last Updated: 2026-08-02 * * PROJECT: Vivetra (project v0.80) — vivetra-vet component (public marketing * site). Companion: css/style.css (the global layer — reset, tokens, * grid, utilities, site chrome). This file is loaded AFTER style.css * by html/header.php, so rules here override the global layer. * * FILE CONTEXT: * ROLE: the per-page style layer. Home hero, pricing table, comparison * matrix, module-page sections, signup/checkout, etc. land here as * the page-building agents write them — this file is deliberately a * near-empty skeleton at v1.0, NOT a pre-guessed full stylesheet. * TOKENS: everything here should consume the :root design tokens defined in * css/style.css (--color-*, --space-*, --radius, --shadow, …) rather * than hardcoding values, so a token change propagates everywhere. * * ARCHITECTURE: * - SKELETON ON PURPOSE. Only a couple of shared base rules live here now * (a page wrapper + a generic section rhythm). Page-specific selectors are * added by the agents that build each page, each appending its own CHANGE * LOG entry — do not front-run those here. * * CHANGE LOG: * v1.0 2026-07-24 Claude Initial skeleton — header + two base rules * (.page wrapper, .section vertical rhythm). Page-specific styles to * be appended by per-page agents. * v1.0.1 2026-07-24 Claude Added /pricing/ page styles: breadcrumbs, the * price-amount/price-tax-note pair (equal visual weight, per * pricing_tax_note()'s "never fine print" contract), pricing/ * schedule/comparison-strip tables (current-row highlight, inline * source links), the always-visible notice box, the hosting/honesty * list treatments, and the CTA band. * v1.0.2 2026-07-24 Claude Added /contact/ page styles: hero lede/countries, * the three post-redirect result banners (--sent teal / --waitlist and * --error amber, matching .notice-box's left-accent language), the * lead-capture form field treatment (block labels, full-width inputs/ * selects/textarea, focus ring, hints, required marker), and the * self-serve CTA band with its secondary link. Reuses the existing * .btn--cta, .faq-item, .legal-note, and .breadcrumbs components rather * than duplicating them. * v1.1 2026-08-02 Claude Two purposes. * - Added the /signup/ checkout page's missing styles: .module-option * (found completely unstyled — the service-selection checkboxes * were rendering as bare browser defaults), .mod-check, * .module-option__desc, and .signup-total(+__amount/__note/ * __period). Each .module-option label is a min-height:44px full- * row tap target (WCAG 2.5.5), not just the small native checkbox. * - Aggressive mobile-hardening pass, matching ardingate.com's rigor * at the user's request: a new max-width:480px block tightens * .compare-strip-table/.pricing-table/.schedule-table cell padding * (more columns visible before the existing .scroll-x wrapper's * horizontal scroll kicks in — the tables stay real HTML tables * with their scope="col"/"row" semantics intact, never reflowed * into stacked cards) and .module-option padding. * ========================================================================== */ /* Page wrapper — a comfortable reading measure, centered. */ .page { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-6); } /* Generic vertical rhythm between major page sections. */ .section { padding-block: var(--space-12); } .section + .section { padding-top: 0; } /* ── /pricing/ ─────────────────────────────────────────────────────────────── */ .breadcrumbs__list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; font-size: 0.9rem; color: var(--color-muted); } .breadcrumbs__list li:not(:last-child)::after { content: "/"; margin-left: 0.4rem; color: var(--color-border); } .breadcrumbs__list a { color: var(--color-muted); text-decoration: none; } .breadcrumbs__list a:hover { color: var(--color-primary); text-decoration: underline; } .breadcrumbs__list li[aria-current="page"] { color: var(--color-text); font-weight: 600; } /* One Vivetra price: figure + (optional) tax note, always equal weight. */ .price-amount { font-family: var(--font-heading); font-weight: 700; font-size: 1.15em; color: var(--color-heading); } .price-tax-note { font-family: var(--font-heading); font-weight: 700; font-size: 1.15em; color: var(--color-heading); } .pricing-hero__lede { font-size: 1.15rem; max-width: 46rem; } .pricing-hero__lede .price-amount, .pricing-hero__lede .price-tax-note { font-size: 1.6rem; } .pricing-hero__countries { color: var(--color-muted); margin-top: var(--space-4); } .pricing-table, .schedule-table, .compare-strip-table { width: 100%; min-width: 32rem; border-collapse: collapse; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; } .pricing-table th, .pricing-table td, .schedule-table th, .schedule-table td, .compare-strip-table th, .compare-strip-table td { padding: var(--space-4) var(--space-6); text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: top; } .pricing-table thead th, .schedule-table thead th, .compare-strip-table thead th { background: var(--color-surface-2); color: var(--color-heading); font-weight: 700; white-space: nowrap; } .pricing-table tbody tr:last-child td, .schedule-table tbody tr:last-child td, .compare-strip-table tbody tr:last-child td { border-bottom: none; } @media (max-width: 480px) { /* These tables live inside a .scroll-x wrapper (horizontal scroll is the correct pattern for wide comparison data — reflowing them into stacked cards would break the scope="col"/"row" table semantics screen readers rely on), but tighter cell padding means more columns are visible before a visitor needs to scroll at all. */ .pricing-table th, .pricing-table td, .schedule-table th, .schedule-table td, .compare-strip-table th, .compare-strip-table td { padding: var(--space-2) var(--space-4); } } .schedule-table__row--current td { background: var(--color-primary-soft); } .schedule-table__badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--color-primary); color: #fff; font-size: 0.75rem; font-weight: 700; white-space: nowrap; } .pricing-hosting__list, .gap-list { display: grid; gap: var(--space-4); margin-top: var(--space-6); padding-left: 1.2rem; } .gap-list { padding-left: 0; list-style: none; } .gap-list li { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); padding: var(--space-4) var(--space-6); } .notice-box { border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary); background: var(--color-surface); border-radius: var(--radius); padding: var(--space-6) var(--space-8); } .notice-box p { margin-bottom: var(--space-4); color: var(--color-text); } .notice-box p:last-child { margin-bottom: 0; } .compare-strip-table__row--vivetra td { background: var(--color-primary-soft); font-weight: 600; } .compare-strip-table__source { font-size: 0.8rem; margin-left: 0.4rem; white-space: nowrap; } .pricing-cta { text-align: center; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface-2); padding: var(--space-12) var(--space-6); } .pricing-cta h2 { margin-bottom: var(--space-4); } .pricing-cta p { color: var(--color-muted); margin-bottom: var(--space-6); max-width: 34rem; margin-inline: auto; } /* ── /contact/ ─────────────────────────────────────────────────────────────── */ .contact-hero__lede { font-size: 1.15rem; max-width: 46rem; } .contact-hero__countries { color: var(--color-muted); margin-top: var(--space-4); } /* Post-redirect result banners — same left-accent language as .notice-box. Sent = positive teal; waitlist + error = amber attention (no red token in the palette, and amber reads as "heads-up," which fits both a not-yet-available notice and a retryable form error). */ .contact-result { border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary); background: var(--color-surface); border-radius: var(--radius); padding: var(--space-6) var(--space-8); } .contact-result h2 { margin-top: 0; } .contact-result p:last-child { margin-bottom: 0; } .contact-result--sent { border-left-color: var(--color-primary); background: var(--color-primary-soft); } .contact-result--waitlist { border-left-color: var(--color-accent); } .contact-result--error { border-left-color: var(--color-accent); background: var(--color-surface-2); } /* Lead-capture form. Block labels, full-width controls, a visible focus ring. */ .contact-form { max-width: 40rem; } .form-field { display: block; } .form-field__label { display: block; font-weight: 600; color: var(--color-heading); margin-bottom: var(--space-2); } .form-field__req { color: var(--color-accent); } .form-field__input { display: block; width: 100%; padding: 0.65rem 0.8rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); } .form-field__input:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); } .form-field__textarea { resize: vertical; min-height: 8rem; } .form-field__hint { margin-top: var(--space-2); font-size: 0.85rem; color: var(--color-muted); } /* Self-serve CTA band — mirrors .pricing-cta's centered treatment. */ .contact-selfserve { text-align: center; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface-2); padding: var(--space-12) var(--space-6); } .contact-selfserve h2 { margin-bottom: var(--space-4); } .contact-selfserve p { color: var(--color-muted); max-width: 40rem; margin-inline: auto; } .contact-selfserve__secondary { color: var(--color-link); font-weight: 600; } .contact-selfserve__secondary:hover { color: var(--color-link-hover); } /* ── /signup/ checkout ─────────────────────────────────────────────────────── */ /* One selectable service — the whole card is a