/* ============================================================ V3 DESIGN PASS (2026-09-29). Best practices borrowed from the SkillsUI "minimal serif" skill, applied on top of the approved V2 look: same palette, fonts, layout shapes and components. What changes is spacing and a few restrained details. 1. One spacing ladder (8 / 16 / 24 / 40 / 64 / 96 / 160) and the small in-section gaps snapped to it (22 -> 24, 26 -> 24, 34 -> 40 ...). 2. Photo bands breathe more on wide screens (padding ceiling 128 -> 160). 3. One label style for every small tracked-uppercase label. 4. Light negative tracking on the large serif headings. 5. Running-text links: thin underline, offset 3px, full color on hover. 6. Buttons: flat hover (no lift); the arrow slides 4px instead. 7. Reviews become open cards: a hairline on top, no box. 8. The eyebrow rule draws in from the left when its heading reveals; reveals use the slower ease-out curve. Reduced motion turns both off. Loaded after app.css. Every rule sits under :root:not([data-design="v2"]), so the staging lab's Design toggle (inc/lab.php) can show V2 for comparison. Research: clients/expertcashbuyers/design-pass/research/skillsui-minimal-serif.md ============================================================ */ /* 1. Spacing ladder and the rhythm tokens snapped to it */ :root:not([data-design="v2"]) { --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 96px; --s7: 160px; --sp-section-sm: clamp(40px, 5vw, 64px); --sp-head: clamp(24px, 3.2vw, 40px); --label-size: 11.5px; --label-track: .14em; --label-weight: 600; --ease-out: cubic-bezier(.16, 1, .3, 1); } :root:not([data-design="v2"]) .section-head h2 { margin-top: var(--s3); } :root:not([data-design="v2"]) .section-head .lead, :root:not([data-design="v2"]) .section-head .page-lede { margin-top: var(--s2); } :root:not([data-design="v2"]) .aslist { margin-top: var(--s3); } :root:not([data-design="v2"]) .aslist li { padding-block: var(--s2); } :root:not([data-design="v2"]) .lander-body .aslist, :root:not([data-design="v2"]) .split-body .aslist { margin-top: var(--s3); } :root:not([data-design="v2"]) .split-text h2, :root:not([data-design="v2"]) .area h2 { margin-top: var(--s3); } :root:not([data-design="v2"]) .split-text p, :root:not([data-design="v2"]) .area p, :root:not([data-design="v2"]) .final p { margin-top: var(--s3); } :root:not([data-design="v2"]) .final-actions, :root:not([data-design="v2"]) .towns, :root:not([data-design="v2"]) .hero-actions { margin-top: var(--s4); } :root:not([data-design="v2"]) .step .s-num { margin-bottom: var(--s3); } :root:not([data-design="v2"]) .step p { margin-top: var(--s2); } :root:not([data-design="v2"]) .faq-item > summary { padding-block: var(--s3); } :root:not([data-design="v2"]) .faq-body { padding-bottom: var(--s3); } :root:not([data-design="v2"]) .receipt-row { padding-block: var(--s3); } :root:not([data-design="v2"]) .side-card { margin-top: var(--s3); padding: var(--s3); } :root:not([data-design="v2"]) .trust .wrap { padding-block: 32px; } /* 2. Photo bands: more air on wide screens only (phones and tablets unchanged) */ :root:not([data-design="v2"]) .section.area { padding-block: clamp(72px, 9vw, var(--s7)); } :root:not([data-design="v2"]) .final-inner { padding-block: clamp(72px, 9vw, 144px); } /* 3. One label style: small, tracked, uppercase, sans */ :root:not([data-design="v2"]) :is(.side-card .sc-lbl, .final-phone .lbl, .contact-hero .contact-hero-phone .lbl, .step .s-time, .foot-col h4, .site-header .primary-nav .sub-feature .sf-lbl) { font-size: var(--label-size); letter-spacing: var(--label-track); font-weight: var(--label-weight); } /* 4. Heading tracking: a touch tighter on the big serif sizes */ :root:not([data-design="v2"]) :is(h1, .section-head h2, .split-text h2, .area h2) { letter-spacing: -0.01em; } /* 5. Links inside running text */ :root:not([data-design="v2"]) :is(.lander-body, .answer, .faq-body, .split-text p, .section-head .lead, .contact-intro, .about-bio) a:not(.btn):not(.wp-block-button__link) { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); transition: text-decoration-color .18s ease, color .18s ease; } :root:not([data-design="v2"]) :is(.lander-body, .answer, .faq-body, .split-text p, .section-head .lead, .contact-intro, .about-bio) a:not(.btn):not(.wp-block-button__link):hover { text-decoration-color: currentColor; } /* 6. Buttons: flat hover; an arrow (wrapped by reveal.js) slides instead of the button lifting */ :root:not([data-design="v2"]) :is(.btn-primary, .btn-ink, .flip-btn):hover, :root:not([data-design="v2"]) .wp-block-button.btn:hover { transform: none; } :root:not([data-design="v2"]) .om-arr { display: inline-block; transition: transform .18s ease; } :root:not([data-design="v2"]) a:hover > .om-arr, :root:not([data-design="v2"]) button:hover > .om-arr, :root:not([data-design="v2"]) a:focus-visible > .om-arr { transform: translateX(4px); } /* 7. Reviews: open cards, a hairline on top, whitespace does the rest */ :root:not([data-design="v2"]) .review { padding: var(--s3) 0 0; background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; } /* 8. Motion: the eyebrow rule draws in when its heading reveals; slower ease-out on reveals */ :root:not([data-design="v2"]).om-js.om-anim.om-reveal-ready [data-reveal] { transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); } :root:not([data-design="v2"]).om-js.om-anim.om-reveal-ready [data-reveal].is-in { transform: none; } :root:not([data-design="v2"]).om-js.om-anim.om-reveal-ready [data-reveal] .marker .rule { transform: scaleX(0); transform-origin: left center; transition: transform .8s var(--ease-out) .12s; } :root:not([data-design="v2"]).om-js.om-anim.om-reveal-ready [data-reveal].is-in .marker .rule { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { :root:not([data-design="v2"]) .om-arr { transition: none; } :root:not([data-design="v2"]) a:hover > .om-arr, :root:not([data-design="v2"]) button:hover > .om-arr { transform: none; } :root:not([data-design="v2"]).om-js.om-anim.om-reveal-ready [data-reveal] .marker .rule { transform: none; transition: none; } }