/* ========================================================================== Novera Languages — Base: fonts, reset, elements, accessibility primitives Load order: tokens.css → base.css → components.css → pages.css ========================================================================== */ /* --- Self-hosted variable fonts (no CDN: faster + no third-party GDPR request) --- */ @font-face { font-family: "Space Grotesk"; src: url("../fonts/spacegrotesk-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; font-style: normal; } @font-face { font-family: "Inter"; src: url("../fonts/inter-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; font-style: normal; } /* --- Reset --- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; /* long words never force horizontal scroll */ } img, svg, video, picture { display: block; max-width: 100%; } img { height: auto; } a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } :where(ul, ol)[class] { list-style: none; padding: 0; } /* --- Headings --- */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: var(--lh-tight); letter-spacing: -0.02em; text-wrap: balance; font-weight: 700; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); } p { max-width: 68ch; } /* keep running text near a readable measure */ /* --- Accessibility primitives --- */ :focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 3px; } .skip-link { position: absolute; left: var(--sp-4); top: -100px; background: var(--navy); color: #fff; padding: .7rem 1.1rem; border-radius: var(--r-sm); z-index: 100; transition: top .15s; } .skip-link:focus { top: var(--sp-4); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- Reveal-on-scroll state (armed only when ) --- */ .js .rv { opacity: 0; transform: translateY(20px); transition: opacity var(--dur) var(--ease) var(--d, 0s), transform var(--dur) var(--ease) var(--d, 0s); } .js .rv.in { opacity: 1; transform: none; } /* --- Reduced motion: kill animation AND force reveals visible (the classic bug) --- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .js .rv, .js .rv.in { opacity: 1 !important; transform: none !important; } } /* --- Layout helpers --- */ .wrap { width: var(--wrap); margin-inline: auto; } .wrap-narrow { width: var(--wrap-narrow); margin-inline: auto; } .section { padding-block: var(--section-y); } .section--tint { background: var(--bg-tint); } .section--alt { background: var(--bg-alt); } .section--dark { background: var(--bg-dark); color: var(--on-dark); } .section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; } .section--dark p { color: var(--on-dark-muted); } .stack { display: flex; flex-direction: column; gap: var(--sp-5); } .stack-sm{ display: flex; flex-direction: column; gap: var(--sp-3); } .scroll-x { overflow-x: auto; } /* wide content scrolls inside itself, not the page */