/** * responsive-base.css (Batch 17) * * Mobile-first base layer (#18). Loads after design-tokens.css. Provides a * minimal container/grid system that Elementor sections and any future * Flutter-web-rendered-inside-WP widgets can rely on without per-page CSS. * Deliberately small — Core Web Vitals governance * (docs/architecture/WORDPRESS_PERFORMANCE_GOVERNANCE.md) caps global CSS * weight; page/section-specific styling stays in Elementor or scoped * widget CSS, not here. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; font-size: var(--qk-font-size-base); } body { margin: 0; font-family: var(--qk-font-family-base); line-height: var(--qk-line-height-base); color: var(--qk-color-neutral-900); background: var(--qk-color-neutral-50); } img, picture, video, svg { max-width: 100%; display: block; } /* Container: mobile-first, fluid up to a max width */ .qk-container { width: 100%; margin-inline: auto; padding-inline: var(--qk-space-4); } @media (min-width: 480px) { .qk-container { padding-inline: var(--qk-space-5); } } @media (min-width: 768px) { .qk-container { max-width: 720px; } } @media (min-width: 1024px) { .qk-container { max-width: 980px; } } @media (min-width: 1280px) { .qk-container { max-width: 1200px; } } /* Simple responsive grid — auto-fit columns, mobile defaults to 1 column */ .qk-grid { display: grid; grid-template-columns: 1fr; gap: var(--qk-space-5); } .qk-grid--2 { grid-template-columns: 1fr; } .qk-grid--3 { grid-template-columns: 1fr; } @media (min-width: 768px) { .qk-grid--2 { grid-template-columns: repeat(2, 1fr); } .qk-grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .qk-grid--3 { grid-template-columns: repeat(3, 1fr); } } /* Visually-hidden utility (used for skip-links / a11y, not display:none so screen readers still see it) */ .qk-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Touch-target minimum (44px) for mobile-first interactive elements */ .qk-tap-target { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Accessibility refinement (Batch 23, item #82). Global focus-visible outline — keyboard-navigation focus must always be visible regardless of which widget/section the focused element belongs to; this is the single source for it (component CSS should not need its own focus ring unless replacing this default for a specific reason). */ :focus-visible { outline: 2px solid var(--qk-color-primary-500); outline-offset: 2px; } /* Skip-link: hidden until focused, then becomes the first visible/focusable element — themes should place `` as the first element inside , and give the main content landmark id="main". */ .qk-skip-link { position: absolute; left: var(--qk-space-2); top: -100px; z-index: 100; padding: var(--qk-space-2) var(--qk-space-3); background: var(--qk-color-neutral-0); color: var(--qk-color-primary-700); border-radius: var(--qk-radius-sm); box-shadow: var(--qk-shadow-md); transition: top var(--qk-motion-duration-fast) var(--qk-motion-ease-standard); } .qk-skip-link:focus { top: var(--qk-space-2); }