/* ========================================================================== DUSTYWALKS77 — RESET, TYPOGRAPHY, ACCESSIBILITY PRIMITIVES ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Anchor links must not land underneath the sticky header. */ scroll-padding-top: calc(var(--header-h) + 1rem); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } body { margin: 0; background: var(--c-white); color: var(--c-ink); font-family: var(--font-body); font-size: var(--t-base); line-height: var(--lh-body); font-synthesis-weight: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Nothing on the page is allowed to overflow horizontally; sections that could (the hero clouds) clip themselves instead. Setting overflow on propagates to the viewport and breaks sticky-header painting. */ } img, svg, video, picture { display: block; max-width: 100%; } img, video { height: auto; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -0.02em; margin: 0 0 var(--s-4); text-wrap: balance; /* stops single-word orphan lines in headings */ } h1 { font-size: var(--t-4xl); } h2 { font-size: var(--t-3xl); } h3 { font-size: var(--t-xl); line-height: var(--lh-snug); } h4 { font-size: var(--t-lg); line-height: var(--lh-snug); } p { margin: 0 0 var(--s-4); text-wrap: pretty; } p:last-child { margin-bottom: 0; } ul, ol { margin: 0 0 var(--s-4); padding-left: 1.25em; } strong { font-weight: 650; } a { color: var(--c-sky-ink); text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; } a:hover { color: var(--c-purple-ink); } /* ---- Focus: always visible, never removed ------------------------------ */ :focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); border-radius: 4px; } /* Dark backgrounds need a light ring to stay visible. */ .is-dark :focus-visible { outline-color: var(--c-sun); } /* ---- Skip link --------------------------------------------------------- */ .skip-link { position: absolute; left: var(--s-4); top: var(--s-4); z-index: 200; padding: var(--s-3) var(--s-5); background: var(--c-charcoal); color: #fff; font-weight: 600; border-radius: var(--r-sm); transform: translateY(-160%); transition: transform var(--d-base) var(--e-out); } .skip-link:focus { transform: translateY(0); } /* ---- Screen-reader-only ------------------------------------------------ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---- Layout helpers ---------------------------------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: var(--wrap-narrow); } .section { padding-block: var(--section-y); position: relative; } .section__head { max-width: 42rem; margin-bottom: var(--s-7); } .section__head--center { margin-inline: auto; text-align: center; } /* Small uppercase label that sits above section headings. Paired with a colored dot so meaning is never carried by color alone. */ .eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-faint); margin: 0 0 var(--s-4); } .eyebrow::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c-orange); flex: none; } .section__head--center .eyebrow { justify-content: center; } .lede { font-size: var(--t-lg); color: var(--c-ink-soft); line-height: 1.55; } /* ---- Hand-drawn underline --------------------------------------------- A wobbly SVG stroke under a word or two of a heading. Wrap the words: walk */ .squiggle { position: relative; white-space: nowrap; } .squiggle::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: -0.18em; height: 0.34em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 18' preserveAspectRatio='none'%3E%3Cpath d='M2 12.5c26-6 52-8.5 78-7 26 1.5 52 6.5 78 3.5' fill='none' stroke='%23f45a2a' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; pointer-events: none; } .squiggle--sky::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 18' preserveAspectRatio='none'%3E%3Cpath d='M2 12.5c26-6 52-8.5 78-7 26 1.5 52 6.5 78 3.5' fill='none' stroke='%2343a7d7' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E"); } .squiggle--grass::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 18' preserveAspectRatio='none'%3E%3Cpath d='M2 12.5c26-6 52-8.5 78-7 26 1.5 52 6.5 78 3.5' fill='none' stroke='%232caf5d' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E"); } /* ---- Scroll reveal ----------------------------------------------------- Content is VISIBLE by default. main.js adds .has-reveal to only once it has actually run and confirmed the browser can animate safely; only then does anything hide itself, and .is-in brings it back as it scrolls into view. Written this way round on purpose: if main.js fails to load, is blocked, or throws, the page is still completely readable. Never invert this. */ .has-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out); } .has-reveal .reveal.is-in { opacity: 1; transform: none; }