/* ============================================================================= * 10-reset.css -- minimal normalisation. Deliberately tiny. * * BYTE-IDENTICAL across both sites. * * THE RULE THAT MATTERS: this file must never style a bare `input`, `button`, * `select`, `textarea`, `table` or `label`. Gravity Forms 1.8.18 is a ~2014 * plugin with fragile markup and it renders AutoTransport's money form -- the * one converting 40% of the ten people who reach it. Form styling is scoped * under .gform_wrapper / .forminator-ui / .qt-form in 60-forms.css. A bare * element selector here would reach into every plugin on both sites. * * `body`, `a`, `h1`-`h6` and `p` ARE styled here. That is not a contradiction: * those are inherited-typography carriers, both sites' harvests measure them * directly, and a theme that does not set them is not a theme. The prohibition * is on FORM CONTROLS and TABLES, which are plugin territory. * ========================================================================== */ /* ---- box model ---------------------------------------------------------- * Universal border-box. Safe, carries no brand value -- and load-bearing: * GlobeFreight's heritage #footer-widgets is 92% width + 20px padding + 1px * border under content-box, which overflows by 9px at 390. The live site does * not have that bug and this theme must not import it. */ *, *::before, *::after { box-sizing: border-box; } /* ---- document ----------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* nav.js sets this on while the mobile nav is open. */ html.qt-nav-locked { overflow: hidden; } body { margin: 0; font-family: var(--qt-font-body); font-size: var(--qt-fs-base); line-height: var(--qt-lh-body); font-weight: var(--qt-fw-body); color: var(--qt-ink); -webkit-font-smoothing: antialiased; /* The BACKGROUND belongs to 30-sheet.css, not here -- see that file's * do-not-split warning. */ } /* ---- headings ------------------------------------------------------------ * MEASURED. AT: h1 32/38.4/600 #1E293B, h2 30/39/600, h3 24/31.2/600, all * margin-bottom ~0.6em. GF heritage: every heading 15px/1.5625 #333 with * `margin: 0 0 10px; line-height: 1.25`, then h1/h2 30px, h3 24px, h4 20px. * Both resolve through the same tokens. */ h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--qt-space-2); font-family: var(--qt-font-heading); font-weight: var(--qt-fw-heading); line-height: var(--qt-lh-heading); letter-spacing: var(--qt-ls-heading); color: var(--qt-ink-heading); } h1 { font-size: var(--qt-fs-h1); line-height: var(--qt-lh-h1); } h2 { font-size: var(--qt-fs-h2); } h3 { font-size: var(--qt-fs-h3); } h4 { font-size: var(--qt-fs-h4); } h5, h6 { font-size: var(--qt-fs-base); } /* ---- flow ---------------------------------------------------------------- * `table` is deliberately ABSENT from this list -- see the header rule. */ p, ul, ol, dl, blockquote, pre, figure { margin: 0 0 var(--qt-space-4); } /* ---- links --------------------------------------------------------------- * MEASURED on both sites: hover changes the DECORATION, not the colour. * GF heritage is literally `a:hover { text-decoration: underline; }` with no * colour rule; AT's Astra links measure #046BD2 with no harvested hover * colour. --qt-link-hover therefore equals --qt-link on both sites today. It * stays a token so a future deliberate change has one place to land. */ a { color: var(--qt-link); text-decoration: none; transition: var(--qt-transition); } a:hover, a:focus { color: var(--qt-link-hover); text-decoration: underline; } /* ---- focus --------------------------------------------------------------- * A visible focus ring is an accessibility floor, not a style choice. The ring * is a high-contrast INK colour, not the accent: on both sites the accent is a * mid-tone orange that does not clear 3:1 against white reliably (WCAG 2.2 SC * 1.4.11 applies to the indicator itself). 20-chrome.css re-points the ring * inside the footer, where the ground is dark on AT. */ :focus-visible { outline: 2px solid var(--qt-focus-ring); outline-offset: 2px; } /* The ONE deliberate exception, and it is not a style preference. * chrome-header.php gives #content tabindex="-1" so the skip link moves real * keyboard focus instead of only scrolling. That focus is programmatic, but the * interaction immediately before it was a keypress, and Chrome's * :focus-visible heuristic can match on that -- which would draw the 2px ring * around the ENTIRE content area of every page, on the one action whose whole * purpose is to be unobtrusive. * * Scoped to the skip TARGET only, by the attribute that makes it a target, so * it can never leak to a real control. The user still gets confirmation: the * page scrolls, and the next Tab lands inside the content rather than back in * the nav. Suppressing a ring on a genuinely focusable control would be an * accessibility defect; suppressing it here is what the pattern requires. */ #content[tabindex="-1"]:focus, #content[tabindex="-1"]:focus-visible { outline: none; } /* ---- media --------------------------------------------------------------- * Prevents the single most common layout break and carries no brand value. */ img, svg, video, iframe { max-width: 100%; height: auto; } /* ---- utility ------------------------------------------------------------ * screen-reader-text is required by header.php's skip link and searchform.php. * This is the canonical WordPress implementation. */ .screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { clip-path: none; height: auto; width: auto; z-index: 100000; background: var(--qt-sheet); color: var(--qt-ink-heading); padding: var(--qt-space-2) var(--qt-space-3); inset-block-start: var(--qt-space-2); inset-inline-start: var(--qt-space-2); line-height: normal; text-decoration: none; }