/* ════════════════════════════════════════════════════════════════════ * CarbonReport Pro — Global Enhancement Layer (Phase 1) * Loaded AFTER page styles. Conservative, additive improvements that lift * polish, accessibility, performance and mobile UX across every page * WITHOUT changing layout or brand. Safe to add to any page's last. * ════════════════════════════════════════════════════════════════════ */ /* ── 1. Sticky-nav anchor offset ────────────────────────────────────── * Anchored jumps (#pricing, #faq…) no longer hide under the sticky nav. */ html { scroll-behavior: smooth; scroll-padding-top: 76px; } @media (max-width: 900px) { html { scroll-padding-top: 64px; } } /* ── 2. Crisper type rendering everywhere ───────────────────────────── */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ── 3. Accessible focus rings (keyboard users), invisible to mouse ─── */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid #DD4A18; outline-offset: 2px; border-radius: 6px; } /* Don't show the ring for mouse clicks that browsers still focus. */ :focus:not(:focus-visible) { outline: none; } /* ── 4. Comfortable touch targets on phones ─────────────────────────── */ @media (max-width: 768px) and (pointer: coarse) { a, button, .nav-link, .nm-link, .nm-sub-link, .btn-hero, .price-btn, .calc-btn, .nav-btn-ghost, .nav-btn-primary { min-height: 44px; } /* Vertical-rhythm helper so stacked CTAs aren't cramped. */ .hero-ctas .btn-hero + .btn-hero { margin-top: 0; } } /* ── 5. Respect "reduce motion" — stop marquees, pulses, parallax ───── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .trust-track { animation: none !important; transform: none !important; } .hero-eyebrow .dot { animation: none !important; } .animate-in, .animate-in-delay-1, .animate-in-delay-2, .animate-in-delay-3 { animation: none !important; opacity: 1 !important; transform: none !important; } } /* ── 6. Nicer text selection + tap highlight ────────────────────────── */ ::selection { background: rgba(221, 74, 24, 0.18); color: inherit; } * { -webkit-tap-highlight-color: rgba(12, 18, 68, 0.12); } /* ── 7. Prevent horizontal scroll / image overflow on small screens ── */ img, svg, video, iframe, table { max-width: 100%; } @media (max-width: 640px) { html, body { overflow-x: hidden; } } /* ── 8. Slightly richer, consistent card/CTA feedback (additive) ───── */ .btn-hero-primary, .nav-btn-primary, .cta-btn-white, .price-btn-orange { transition: transform .16s cubic-bezier(.22,.61,.36,1), box-shadow .16s cubic-bezier(.22,.61,.36,1), background .16s; } .problem-card, .step-card, .inc-card, .testi-card, .edge-card, .seo-link-card { transition: transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s, border-color .2s; } /* ── 9. Lazy-loaded media fades in instead of popping ───────────────── */ img[loading="lazy"] { background: #F1F5F9; } /* ── 10. Honour OS dark scrollbars on the marketing pages (subtle) ─── */ @supports (scrollbar-color: auto) { html { scrollbar-color: #CBD5E1 transparent; } } /* ════════════════════════════════════════════════════════════════════ * 11. TYPOGRAPHY UNIFICATION — the #1 consistency fix. * Pages currently ship 9 different body font stacks (SF Pro on some, * Segoe UI on others, Inter on others) so the site reads as "different * sites." Force ONE brand stack everywhere. Elements that set their own * font explicitly (e.g. serif headings) still win — this only overrides * the page-level body declaration. Graceful fallback if Inter isn't * loaded, because var(--font-sans) already lists system fonts. * ════════════════════════════════════════════════════════════════════ */ body { font-family: var(--font-sans) !important; } button, input, select, textarea, optgroup, .btn, [class*="-btn"], [class*="btn-"] { font-family: var(--font-sans); } /* ── 12. Consistent interaction baseline (links + buttons) ──────────── */ a { transition: color var(--dur-fast, 150ms) var(--ease-out, ease); } button, [role="button"], input[type="submit"], input[type="button"] { cursor: pointer; } /* ── 13. Consistent media defaults to stop layout shift / overflow ─── */ img { height: auto; } /* ── 14. Tame the most common spacing inconsistency: never let a * section's first heading collide with the page top edge. ───── */ section > h1:first-child, section > h2:first-child { margin-top: 0; } /* ════════════════════════════════════════════════════════════════════ * 15. SCROLL-REVEAL animation states. The .crp-reveal class is ONLY * added by crp-ux.js, so with no JS every element is fully visible — * the animation can never hide content permanently. * ════════════════════════════════════════════════════════════════════ */ .crp-reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease-out, cubic-bezier(.22,.61,.36,1)), transform .55s var(--ease-out, cubic-bezier(.22,.61,.36,1)); } .crp-reveal.crp-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .crp-reveal, .crp-reveal.crp-in { opacity: 1 !important; transform: none !important; } } /* ── 16. Tactile button-press feedback on the common CTA classes ───── */ .btn-hero:active, .price-btn:active, .calc-btn:active, .nav-btn-primary:active, .crp-btn:active, .cta-btn-white:active, .plan__cta:active { transform: translateY(0) scale(.985); } /* ── 17. Brand logos must never distort: fixed-height logo images keep their aspect ratio even when a flex/grid container squeezes them. ── */ img[src*="logo"], img[src*="carbonreport-"] { object-fit: contain; width: auto; }