/* ================================================================== Carvins — Phase 37 v2.2 Design System (Verbatim Port) ================================================================== Component CSS for the v2.2 Carvins redesign. Every rule below is scoped under the `.cv-v3` ancestor selector so it ONLY applies to pages that opt in via ``. Legacy v2.0 pages render unchanged (D-02, D-06). Tokens consumed from design-system.css (Phase 37 :root#2 block, see "SECTION 1b" at design-system.css L2490+). Source prototypes: design-system/v2.2-source/ Wave scope: A (Foundation only — primitives below). Wave-gated component classes land in later waves (no .cv-strip / .cv-nav__ / .cv-footer__ / .cv-vehicle-header / .cv-report-card / .cv-auction-card / .cv-pricing-card / .cv-tool-* / .cv-modal__ / .cv-admin-* / .cv-blog-* in this file yet — those are Waves B through I). ================================================================== */ /* --- Section 1: Reset & Base --- */ .cv-v3 { font-family: var(--cc-font-body); font-size: var(--cc-fs-base); line-height: 1.6; color: var(--cc-fg-1); background: var(--cc-color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* REG-15 (Wave D iter-5) defense-in-depth — clip horizontal overflow on the cv-v3 root. CR-02 (Wave D iter-6) corrective: `overflow-x: clip` (not `hidden`) per design-system.css L212-215 maintainer warning: "clip is preferred over hidden because it doesn't create a new scroll container (keeps position:sticky working on descendants)". The cv-navbar at L344 below uses position:sticky — hidden would break its sticks-to-viewport-top behavior by promoting body to a scroll container. clip preserves the horizontal-overflow defense without that side effect. Complements the existing html/body overflow-x: clip in design-system.css L215 + L226. */ overflow-x: clip; } .cv-v3 *, .cv-v3 *::before, .cv-v3 *::after { box-sizing: border-box; } .cv-v3 img, .cv-v3 svg, .cv-v3 video, .cv-v3 canvas { display: block; max-width: 100%; height: auto; } /* --- Section 2: Typography --- */ .cv-v3 h1, .cv-v3 .cv-h1, .cv-v3 h2, .cv-v3 .cv-h2, .cv-v3 h3, .cv-v3 .cv-h3, .cv-v3 h4, .cv-v3 .cv-h4, .cv-v3 h5, .cv-v3 .cv-h5, .cv-v3 h6, .cv-v3 .cv-h6 { font-family: var(--cc-font-display); font-weight: var(--cc-fw-bold); letter-spacing: -0.02em; line-height: 1.1; color: var(--cc-fg-1); margin: 0; } .cv-v3 h1, .cv-v3 .cv-h1 { font-size: clamp(2.25rem, 4.5vw + 0.5rem, var(--cc-fs-7xl)); letter-spacing: -0.035em; } .cv-v3 h2, .cv-v3 .cv-h2 { font-size: clamp(1.875rem, 2.5vw + 0.75rem, var(--cc-fs-5xl)); letter-spacing: -0.03em; } .cv-v3 h3, .cv-v3 .cv-h3 { font-size: var(--cc-fs-3xl); letter-spacing: -0.02em; } .cv-v3 h4, .cv-v3 .cv-h4 { font-size: var(--cc-fs-2xl); letter-spacing: -0.015em; } .cv-v3 h5, .cv-v3 .cv-h5 { font-size: var(--cc-fs-xl); letter-spacing: -0.01em; } .cv-v3 h6, .cv-v3 .cv-h6 { font-size: var(--cc-fs-lg); } .cv-v3 p, .cv-v3 .cv-p { font-size: var(--cc-fs-base); line-height: 1.65; color: var(--cc-fg-2); margin: 0; text-wrap: pretty; } .cv-v3 small, .cv-v3 .cv-small { font-size: var(--cc-fs-sm); color: var(--cc-fg-4); } .cv-v3 .cv-eyebrow { font-family: var(--cc-font-body); font-size: var(--cc-fs-sm); font-weight: var(--cc-fw-semi); letter-spacing: 0.04em; text-transform: uppercase; color: var(--cc-navy); } .cv-v3 a, .cv-v3 .cv-link { color: var(--cc-blue); text-decoration: none; transition: color var(--cc-dur-fast) var(--cc-ease); } .cv-v3 a:hover, .cv-v3 .cv-link:hover { color: var(--cc-navy); text-decoration: underline; text-underline-offset: 2px; } /* --- Section 3: Button --- */ .cv-v3 .cv-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--cc-space-2); font-family: var(--cc-font-display); font-weight: var(--cc-fw-semi); font-size: var(--cc-fs-base); line-height: 1.2; padding: var(--cc-space-3) var(--cc-space-5); border: 1px solid transparent; border-radius: var(--cc-radius-md); cursor: pointer; text-decoration: none; transition: background var(--cc-dur) var(--cc-ease-out), color var(--cc-dur) var(--cc-ease-out), border-color var(--cc-dur) var(--cc-ease-out), box-shadow var(--cc-dur) var(--cc-ease-out); -webkit-appearance: none; appearance: none; } .cv-v3 .cv-btn:focus-visible { outline: 2px solid var(--cc-blue); outline-offset: 2px; } .cv-v3 .cv-btn:disabled, .cv-v3 .cv-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; } .cv-v3 .cv-btn--primary { background: var(--cc-navy); color: #fff; } .cv-v3 .cv-btn--primary:hover { background: #002F4D; color: #fff; } .cv-v3 .cv-btn--accent { background: var(--cc-blue); color: #fff; } .cv-v3 .cv-btn--accent:hover { background: var(--cc-blue-strong); color: #fff; } .cv-v3 .cv-btn--ghost { background: transparent; color: var(--cc-navy); border-color: var(--cc-border); } .cv-v3 .cv-btn--ghost:hover { background: var(--cc-navy-bg); color: var(--cc-navy); } /* --- Section 4: Card --- */ .cv-v3 .cv-card { background: #fff; border: 1px solid var(--cc-border); border-radius: var(--cc-radius-lg); padding: var(--cc-space-6); box-shadow: var(--cc-shadow-sm); } .cv-v3 .cv-card--flat { box-shadow: none; } .cv-v3 .cv-card--elevated { box-shadow: var(--cc-shadow-md); } /* --- Section 5: Input --- */ .cv-v3 .cv-input { display: block; width: 100%; font-family: var(--cc-font-body); font-size: var(--cc-fs-base); line-height: 1.4; color: var(--cc-fg-1); background: #fff; border: 1px solid var(--cc-border); border-radius: var(--cc-radius-md); padding: var(--cc-space-3) var(--cc-space-4); transition: border-color var(--cc-dur-fast) var(--cc-ease), box-shadow var(--cc-dur-fast) var(--cc-ease); -webkit-appearance: none; appearance: none; } .cv-v3 .cv-input::placeholder { color: var(--cc-fg-4); } .cv-v3 .cv-input:focus { outline: none; border-color: var(--cc-blue); box-shadow: 0 0 0 3px var(--cc-blue-tint); } .cv-v3 .cv-input--error { border-color: #B91C1C; } .cv-v3 .cv-input--error:focus { box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.15); } /* --- Section 6: Section helpers --- */ .cv-v3 .cv-section { padding-block: var(--cc-space-16); } .cv-v3 .cv-section--tight { padding-block: var(--cc-space-10); } .cv-v3 .cv-section--loose { padding-block: var(--cc-space-24); } .cv-v3 .cv-container { max-width: 1200px; margin-inline: auto; padding-inline: var(--cc-space-4); } /* --- Section 7: Reduced motion --- */ @media (prefers-reduced-motion: reduce) { .cv-v3 *, .cv-v3 *::before, .cv-v3 *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* --- Section 8: Sale Strip (Phase 37 Wave B — Banner CMS) --- */ /* * Verbatim from design-system/v2.2-source/project/ui_kits/marketing/index.html * L11-21 + mobile responsive (planner-locked 640px breakpoint). * * Consumed by render_sale_strip() (Plan 37-07) reading site_banners rows. * Scoped under .cv-v3 — no render on un-migrated pages even after Plan 37-08 * wires the unconditional hook above the navbar. D-04 ships 4 color presets * (.cv-strip--primary | --accent | --success | --warning) plus a .cv-strip--custom * hook that defers to inline style for operator-set bg_custom_hex / text_custom_hex. */ .cv-strip { display: none; /* default-hidden on every page; activated by .cv-v3 .cv-strip descendant rule below */ } .cv-v3 .cv-strip { display: block; width: 100%; text-align: center; font-family: var(--cc-font-body); font-size: 13px; line-height: 1.5; padding: 8px 16px; font-weight: 500; letter-spacing: 0.02em; position: relative; z-index: 5; } .cv-v3 .cv-strip strong { color: #FFD56B; font-weight: 700; } .cv-v3 .cv-strip a, .cv-v3 .cv-strip .cv-strip__link { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; } .cv-v3 .cv-strip--primary { background: var(--cc-navy); color: #fff; } .cv-v3 .cv-strip--accent { background: var(--cc-blue); color: #fff; } .cv-v3 .cv-strip--success { background: var(--cc-green); color: #fff; } .cv-v3 .cv-strip--warning { background: #F59E0B; color: var(--cc-navy); } .cv-v3 .cv-strip--custom { /* No background or color rules — inline style="background: {bg_custom_hex}; color: {text_custom_hex}" from render_sale_strip() takes precedence when bg_preset='custom'. */ } @media (max-width: 640px) { .cv-v3 .cv-strip { font-size: 12px; padding: 7px 12px; } } /* --- Section 9: Navbar — sticky white + blur (Phase 37 Wave C — Chrome Rewrite) --- */ /* * Verbatim port of design-system/v2.2-source/project/ui_kits/marketing/styles.jsx * mkStyles.header (L5-11) + mkStyles.headerInner (L12-15) + mkStyles.logoLink (L16) + * mkStyles.nav (L17) + mkStyles.navLink (L18-20) + mkStyles.loginLink (L21), plus the * responsive hide-rules from index.html L46-49 (below 900px hide nav/login, show burger). * * MUTEX with legacy `.navbar` from design-system.css L1199+: under `.cv-v3` body scope * the legacy `.navbar { display: none !important }` rule below forces the legacy header * to hide; the compound `.cv-v3.cv-navbar--sticky { display: flex }` rule activates this * new header (the markup emits `
`, so * `.cv-v3` and `.cv-navbar*` live on the SAME element and require a compound selector, * not a descendant combinator). On NON-`.cv-v3` pages (default body), the base rule * `.cv-navbar { display: none }` hides the new header and legacy renders normally. * * Consumed by includes/header.php's NEW
block (Task 2). */ .cv-navbar { display: none; /* default-hidden on every page; activated by .cv-v3 .cv-navbar--sticky descendant below */ } .cv-v3 .cv-navbar--sticky { display: flex; position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: saturate(180%) blur(8px); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--cc-border); } /* * REG-05 closure (Plan 37-25, Wave D iter-6) — cv-navbar scroll-state modifier rules. * * The base `.cv-v3 .cv-navbar--sticky` rule above provides the "glass" appearance * (semi-transparent white + saturate/blur backdrop-filter). The --glass modifier is * implicit — toggling it on/off in JS is a class-name affordance for parity with the * legacy navbar's `navbar--glass` modifier, but the underlying rendering is provided * by the base --sticky rule (see landing.js Section 1, second IntersectionObserver block). * * The --solid modifier OVERRIDES the glass background + backdrop-filter with an opaque * white background and no blur. This is the scrolled-past-hero state — mirrors the * legacy `navbar--solid` rule in design-system.css. position:sticky + border-bottom from * the --sticky base STAY via cascade. */ .cv-v3 .cv-navbar--solid { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } .cv-v3 .cv-navbar--glass { /* Explicit no-op for class-name parity with legacy navbar--glass — the actual glass * styling is provided by the base .cv-v3 .cv-navbar--sticky rule above. This rule exists * so that the JS-side `.classList.toggle('cv-navbar--glass', true)` has a documented * receiver class even though no CSS overrides are needed. */ } .cv-v3 .cv-navbar__inner { max-width: 1200px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; } /* Phase 37 Wave D iter-7 LAY-01/02 (Plan 37-26): flex-shrink:0 + white-space:nowrap on cv-navbar inline-content elements. Closes operator UAT 2026-05-19 layout collapse (brand text overlap + Free Tools/100 Credits/My Reports 2-line wrap). */ .cv-v3 .cv-navbar__brand { display: flex; align-items: center; gap: var(--cc-space-2); text-decoration: none; color: var(--cc-fg-1); flex-shrink: 0; } .cv-v3 .cv-navbar__logo { height: 32px; width: auto; display: block; } .cv-v3 .cv-navbar__brand-text { font-family: var(--cc-font-display); font-weight: var(--cc-fw-bold); font-size: var(--cc-fs-lg); color: var(--cc-fg-1); letter-spacing: -0.01em; white-space: nowrap; } .cv-v3 .cv-navbar__links { display: flex; gap: 22px; align-items: center; } .cv-v3 .cv-navbar__link { font-family: var(--cc-font-body); font-size: 14px; font-weight: var(--cc-fw-medium); color: var(--cc-fg-3); text-decoration: none; transition: color var(--cc-dur) var(--cc-ease); white-space: nowrap; } .cv-v3 .cv-navbar__link:hover { color: var(--cc-navy); text-decoration: none; } /* * REG-07 closure (Plan 37-25, Wave D iter-6) — cv-navbar active-link visual indicator. * * Applies when landing.js Section 5 adds the `cv-navbar__link--active` class to a link * whose href matches the current page path. Uses the same navy color as :hover (so the * user's hover/active visual language is consistent) plus a semibold font-weight bump * for clearer visual indication of "you are here." No transition — the user is already * on this page, so the highlighted state should appear instantly on page render rather * than animating in (animation would create odd post-load visual movement). * * Mirrors the legacy `.navbar__link--active` pattern in design-system.css. */ .cv-v3 .cv-navbar__link--active { color: var(--cc-navy); font-weight: var(--cc-fw-semi); } .cv-v3 .cv-navbar__actions { display: flex; gap: 10px; align-items: center; } .cv-v3 .cv-navbar__login { font-family: var(--cc-font-body); font-size: 14px; font-weight: var(--cc-fw-medium); color: var(--cc-fg-2); text-decoration: none; padding: 8px 4px; cursor: pointer; } .cv-v3 .cv-navbar__login:hover { color: var(--cc-navy); } /* * .cv-v3 .cv-navbar__cta has no rules of its own — the `