/* ----------------------------------------------------------------------------- * Base: self-hosted fonts, reset, landmarks, focus, typography, motion. * -------------------------------------------------------------------------- */ /* --- Self-hosted variable fonts (see assets/fonts/FONT-LICENSES.md) --------- */ @font-face { font-family: "Anybody"; src: url("../fonts/anybody-variable.woff2") format("woff2-variations"); font-weight: 400 800; font-stretch: 75% 100%; font-style: normal; font-display: swap; 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; } @font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken-grotesk-variable.woff2") format("woff2-variations"); font-weight: 400 700; font-style: normal; font-display: swap; 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; } @font-face { font-family: "Inter"; src: url("../fonts/inter-variable.woff2") format("woff2-variations"); font-weight: 400 700; font-style: normal; font-display: swap; 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; } /* --- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; overflow-x: hidden; scroll-behavior: smooth; /* Anchor targets clear the fixed header (e.g. #choose-your-path). */ scroll-padding-top: calc(var(--uz-header-height) + var(--uz-space-lg)); } body { margin: 0; background-color: var(--uz-bg); color: var(--uz-text); font-family: var(--uz-font-body); font-size: var(--uz-text-base); line-height: var(--uz-leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* The mobile bottom navigation must never cover page content or the footer. */ @media (max-width: 767px) { body { padding-bottom: calc(var(--uz-bottom-nav-height) + env(safe-area-inset-bottom, 0px)); } } body.uz-drawer-open { overflow: hidden; } /* * The legacy Elementor global kit (Default Kit, post 6) paints a full-page * background image, a body colour and Roboto onto every page through the * `.elementor-kit-6` class that Elementor adds to . The native theme owns * its own presentation, so the shell reclaims those three properties with * specificity alone. Nothing is dequeued, no Elementor data is touched, and * switching themes restores the legacy appearance exactly. * * DESIGN.md also prohibits repeating the existing full-page background image. */ body.uz-body { background-color: var(--uz-bg); background-image: none; color: var(--uz-text); font-family: var(--uz-font-body); } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--uz-space-md); font-family: var(--uz-font-heading); font-weight: 700; line-height: var(--uz-leading-snug); letter-spacing: var(--uz-tracking-tight); color: var(--uz-text); text-wrap: balance; } h1 { font-size: var(--uz-text-3xl); } h2 { font-size: var(--uz-text-2xl); } h3 { font-size: var(--uz-text-xl); } /* * Bee Three sets every H1 and H2 site-wide. H3-H6 deliberately stay on Hanken * Grotesk: the condensed display face is for the two top levels only. * * The kit ships a single 600 weight, so the 700 inherited from the rule above * is reset here — asking for 700 would make the browser synthesise a fake bold. */ h1, h2 { font-family: var(--uz-font-bee); font-weight: 600; font-style: normal; /* * The -0.02em tracking above is tuned for Hanken Grotesk. Inherited onto a * condensed face it pulls the already-narrow letterforms into each other, * so H1 and H2 get a fractionally open tracking instead. */ letter-spacing: 0.01em; } p { margin: 0 0 var(--uz-space-md); } a { color: var(--uz-accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; } a:hover { color: var(--uz-warm-white); } img, svg, video { max-width: 100%; height: auto; } img { display: block; } ul, ol { margin: 0 0 var(--uz-space-md); padding-inline-start: 1.25em; } button { font: inherit; color: inherit; } /* --- Focus: visible on every interactive element, never colour alone ------ */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--uz-focus); outline-offset: 3px; border-radius: var(--uz-radius-sm); } /* --- Skip link ------------------------------------------------------------ */ .uz-skip-link { position: absolute; left: var(--uz-space-md); top: var(--uz-space-md); z-index: 200; padding: var(--uz-space-sm) var(--uz-space-lg); background: var(--uz-electric-cyan); color: var(--uz-void-black); font-family: var(--uz-font-heading); font-weight: 700; border-radius: var(--uz-radius-pill); /* Without this the label wraps to two lines inside the revealed pill. */ white-space: nowrap; transform: translateY(-200%); transition: transform var(--uz-duration-fast) var(--uz-ease); } .uz-skip-link:focus { transform: translateY(0); color: var(--uz-void-black); } /* --- Screen-reader-only --------------------------------------------------- */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .screen-reader-text:focus { position: static !important; width: auto; height: auto; clip-path: none; margin: 0; } /* --- Selection ------------------------------------------------------------ */ ::selection { background: var(--uz-electric-cyan); color: var(--uz-void-black); } /* --- Reduced motion ------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }