/* ============================================================ Solar Air Energy — base reset + primitives (token-driven) ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--ds-font); font-size: var(--ds-fs-body); line-height: var(--ds-lh-body); color: var(--ds-ink); background: var(--ds-surface); } /* overflow-x guard lives on , NOT — an overflow on body breaks position:sticky for the header. On html it prevents horizontal scroll without affecting vertical sticky. */ html { overflow-x: clip; } img, svg, video, iframe { max-width: 100%; height: auto; } img { display: block; } [hidden] { display: none !important; } a { color: var(--ds-orange); text-decoration: none; } a:hover { color: var(--ds-orange-dark); } h1, h2, h3, h4 { font-family: var(--ds-font-display); line-height: var(--ds-lh-tight); letter-spacing: var(--ds-track-display); color: var(--ds-ink); margin: 0 0 0.5em; font-weight: 700; } h1 { font-size: var(--ds-fs-display); font-weight: 800; } h2 { font-size: var(--ds-fs-h2); } h3 { font-size: var(--ds-fs-h3); } p { margin: 0 0 1em; } :focus-visible { outline: var(--ds-focus); outline-offset: 2px; border-radius: 6px; } /* Layout primitives — global gutter. Header, footer and page content all share .container (max-width --ds-container, --ds-edge gutter each side) so edges align. */ .container { max-width: var(--ds-container); margin-inline: auto; padding-inline: var(--ds-edge); } .section { padding-block: var(--ds-section-py); } .section--tint { background: var(--ds-surface-2); } /* The site content area (between header and footer) */ .site-content { min-height: 40vh; } .entry-content > * + * { margin-top: 1rem; } /* Gutenberg blocks authored on page-blank pages render edge-to-edge; wrap in a container on the standard page template (see page.php / .entry-content--contained). */ .entry-content--contained { max-width: var(--ds-container); margin-inline: auto; padding-inline: var(--ds-edge); } /* Shared CTA button (ported from the /intro design system: .general-cta-button) */ .general-cta-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: var(--radius-pill); background: var(--ds-orange); color: #fff; font-family: var(--ds-font-display); font-weight: 600; font-size: 15px; line-height: 1; box-shadow: var(--shadow-cta); transition: transform 0.15s ease, background 0.15s ease; } .general-cta-button:hover { background: var(--ds-orange-dark); color: #fff; } /* Skip link */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--ds-ink); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; color: #fff; }