/* ========================================================= UTurn WP hardening — loaded AFTER the source CSS files. Never edits main.js or the 3 source stylesheets; overrides only. ========================================================= */ /* ---------- Sticky header hardening ---------- 1) The source sets `body { overflow-x: hidden }`. In Chrome that value propagates to the viewport and position:sticky keeps working, but in Safari/WebKit it turns into a scroll container, which silently kills the sticky menubar. `overflow-x: clip` blocks horizontal overflow just as well WITHOUT creating a scroll container, so the sticky header works in every browser. Older browsers that don't know `clip` simply keep the source rule — no regression. 2) Keep the sticky menubar below the WordPress admin bar for logged-in admins (32px desktop / 46px mobile). */ html { overflow-x: clip; } body { overflow-x: clip; } body.admin-bar .site-header { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .site-header { top: 46px; } } /* ---------- Self-hosted Inter (variable, latin) ---------- Replaces the render-blocking Google Fonts request. Same family name, so the source font stacks resolve to this file; font-display:swap. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- Contrast (launch audit) ---------- Filled primary buttons: #0B5ED7 on white text = 5.84:1 (was #1B7AF8 = 4.05:1). Hover moves one step darker instead. */ .btn--primary { --btn-bg: #0B5ED7; --btn-hover: #0956C4; box-shadow: 0 4px 14px rgba(11, 94, 215, 0.28); } .btn--primary:hover { box-shadow: 0 8px 24px rgba(11, 94, 215, 0.35); } /* Placeholder/muted text never lighter than --ink-500. */ ::placeholder { color: var(--ink-500); opacity: 1; } /* ---------- Heading order fix: process steps use h3 now ---------- Keep the exact visual of the old .process-step h4. */ .process-step h3 { font-size: var(--fs-md); font-weight: var(--fw-bold); margin-bottom: 0.25rem; padding-top: 0.6rem; } /* ---------- Minimum readable text sizes (launch audit: ≥12.5px) ---------- */ .top-bar { font-size: 0.78125rem; } /* was var(--fs-xs) ≈12px */ .proof-card__label { font-size: 0.78125rem; } .trust-marquee__head .trust-label { font-size: 0.78125rem; } .cat-tag { font-size: 0.78125rem; } .gs-metric small { font-size: 0.78125rem; } /* Top-bar city name: never truncate on small screens. */ @media (max-width: 600px) { .top-bar-loc span[data-location-text] { max-width: none; white-space: normal; overflow: visible; } } /* ---------- Mobile tap-to-call (header) ---------- */ .header-call { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; color: var(--ink-700); } .header-call:hover { color: var(--brand-blue); background: var(--ink-100); } .header-call svg { width: 20px; height: 20px; } @media (max-width: 900px) { .header-call { display: flex; } } /* ---------- Logo marquee: pause on hover/focus ---------- */ .marquee-track:hover, .marquee-track:focus-within { animation-play-state: paused; } /* ---------- Top bar: right group (Facebook icon + phone) ---------- */ .top-bar-right { display: flex; align-items: center; gap: 0.9rem; } .top-bar-social { display: inline-flex; align-items: center; flex-shrink: 0; /* never squeeze to 0 beside the location text on small screens */ color: rgba(255, 255, 255, 0.88); transition: color var(--duration); } .top-bar-social:hover { color: var(--brand-cyan); } .top-bar-social:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 2px; } .top-bar-social svg { width: 15px; height: 15px; } /* ---------- Footer trade-licence / DBID lines ---------- */ .footer-licence { color: var(--text-muted); font-size: 0.78125rem; margin-top: 0.35rem; } /* ---------- Case-study quote + prev/next (template-work) ---------- */ .case-quote { margin: 2.5rem auto 0; max-width: 720px; text-align: center; padding: 0 1rem; } .case-quote blockquote { font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: var(--lh-relaxed); color: var(--ink-800); } .case-quote blockquote::before { content: "“"; display: block; font-size: 3rem; line-height: 1; color: var(--brand-blue); margin-bottom: 0.35rem; } .case-quote figcaption { margin-top: 0.75rem; color: var(--text-muted); font-size: 0.875rem; } .case-prevnext { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); font-weight: var(--fw-semibold); } .case-prevnext a { color: var(--brand-blue); } .case-prevnext a:hover { text-decoration: underline; } /* ---------- DoD text floor (390px sweep): nothing visible below 12.5px ---------- */ @media (max-width: 640px) { :root { --fs-xs: 0.78125rem; } /* eyebrow/breadcrumb/marquee/footer micro-copy 12px → 12.5px */ } /* cat-tag: match source specificity (.portfolio-thumb/.case-visual) so the bump wins */ .portfolio-thumb .cat-tag, .case-visual .cat-tag { font-size: 0.78125rem; } /* Hero dashboard-mock micro labels — floor at 12.5px (mock itself is a pre-launch placeholder; sizes floored until replaced with a real chart). */ .gs-live { font-size: 0.78125rem; } .gs-ico { font-size: 0.78125rem; } .gs-float { font-size: 0.78125rem; } .gs-float--b .gs-ico { font-size: 0.78125rem; } @media (max-width: 480px) { .gs-float { font-size: 0.78125rem; padding: 0.4rem 0.6rem; } } /* gs-brand + gs-ico glyph: last two sub-12.5px texts on the hero mock */ .gs-brand { font-size: 0.78125rem; } /* ---------- A11y: active filter chip contrast (white on #1B7AF8 = 4.04 → #0B5ED7) ---------- */ .filter-btn.is-active { background: #0B5ED7; border-color: #0B5ED7; box-shadow: 0 4px 12px rgba(11, 94, 215, 0.3); } /* ---------- A11y: footer column titles h4 → h3 (heading order); keep visuals ---------- */ .footer-col h3.footer-col__title { color: white; font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-bottom: 1rem; } /* A11y: pricing "popular" badge contrast — same #1B7AF8→#0B5ED7 family */ span.popular { background: #0B5ED7; }