/* * Base — reset and element defaults. * * The reset block below is ported VERBATIM from the design prototype's shared * stylesheet. Do not "improve" these values: body font-size 15px and * line-height 1.5 are what every section's spacing was designed against, so * changing them shifts the whole page off the design. * * Section styles live in assets/css/sections/ and keep the design's own class * names (.lp-* landing sections, .site-foot* footer) so they stay diffable * against the prototype. * * Everything after the reset is WordPress plumbing the prototype had no need * for: accessibility helpers, Elementor layout compatibility, blog templates. */ /* --- Reset (verbatim from the design) ------------------------------------- */ html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } /* --- Additions the prototype didn't need ---------------------------------- */ *, *::before, *::after { box-sizing: border-box; } img, picture, video, svg { max-width: 100%; height: auto; display: block; } /* Focus must stay visible for keyboard users; the prototype dropped it. */ :focus-visible { outline: 2px solid var(--nb); outline-offset: 2px; } /* --- WordPress / Elementor layout ---------------------------------------- */ /* * The design sizes both logos by height alone. WordPress adds width/height * attributes to an uploaded custom logo, which combined with max-width:100% * above would stretch the box to the container and letterbox the artwork — * so force the width to follow the aspect ratio. */ .lp-nav-logo img, .sf-brand img { width: auto; } /* * The [hidden] attribute is display:none in the UA stylesheet, which the * design's `.lp-nav-drawer { display: flex }` overrides — leaving the mobile * drawer permanently visible. Author-level rule to win it back. */ .lp-nav-drawer[hidden] { display: none; } /* Elementor sections manage their own full-bleed width — don't constrain them. */ .page--elementor .page__content { max-width: none; padding-inline: 0; } /* * `article.page`, not `.page`: WordPress puts a `page` class on as well, * so a bare `.page:not(.page--elementor)` also matches the body — and then * boxed every Elementor page too, silently cancelling the exemption above. */ article.page:not(.page--elementor) .page__content, .archive, .post-single, .error-404, .no-results { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } /* --- Blog ---------------------------------------------------------------- */ .archive, .post-single { padding-block: 64px; } .archive__title, .post-single__title, .post-card__title, .error-404__title, .no-results__title { font-family: var(--font-display); line-height: 1.15; } .archive__list { display: grid; gap: 32px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin-top: 32px; } .post-card__title { font-size: 22px; margin: 12px 0 0; } .post-card__meta, .post-single__meta { color: var(--mute); font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; } .post-card__media img, .post-single__thumbnail img { border-radius: var(--r-md); } .post-single__title { font-size: 40px; } .post-single__content > * + * { margin-top: 16px; } .post-single__thumbnail { margin-block: 32px; } /* --- Accessibility ------------------------------------------------------- */ .screen-reader-text { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .skip-link:focus { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); clip-path: none; height: auto; left: 16px; padding: 12px 16px; top: 16px; width: auto; z-index: 100; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } }