@charset "UTF-8";
/* ==========================================================================
renovation911 — base.css (Owner G)
Reset, element defaults, the typographic scale from DESIGN-SPEC §4, link and
selection styles, media and form normalisation, the scroll sentinel, the
WordPress-core sr-only class, and the two utilities the markup actually uses.
Cascade: tokens.css -> BASE.CSS -> layout.css -> chrome.css
-> components.css -> pages.css
This file CONSUMES tokens. It never redefines one and never hard-codes a
colour, a radius, a shadow or a duration that tokens.css already names.
Sections
1. Reset
2. Document
3. Headings
4. Body copy, lists, quotes, rules
5. Tables
6. Links and selection
7. Media
8. Forms and interactive elements
9. Shared primitives (eyebrow, duty bar, accent rule, icons)
10. Utilities and WordPress-core classes
11. Preferences: contrast, forced colours, reduced motion
========================================================================== */
/* ==========================================================================
1. RESET
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
/* The `hidden` attribute is a hard off switch. main.js toggles it on
.nav-panel, .drawer, .drawer-backdrop, .drawer__sub and .gallery__item, all
of which are given a `display` value later in the cascade — so the attribute
has to win against a plain class selector. */
[hidden] {
display: none;
}
/* ==========================================================================
2. DOCUMENT
========================================================================== */
html {
/* Root is 100%. Never overridden — the whole clamp() scale assumes 16px. */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
/* §9.14 — no horizontal page scroll at 400% zoom / 320px CSS width.
Clipped on , never on : making a scroll container
would silently break `position: sticky` on .site-header__bar. */
overflow-x: clip;
/* scroll-padding-top comes from tokens.css (--scroll-offset). */
}
body {
min-height: 100vh;
min-height: 100svh;
margin: 0;
background: var(--surface);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--fs-base);
font-weight: var(--fw-body);
line-height: var(--lh-body);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Never justify anywhere in this system (§4.4). */
text-align: start;
}
/* ==========================================================================
3. HEADINGS (§4.2 scale, §4.4 line-height / tracking / weight)
h1 here is the bare-element fallback only; .hero__title and
.page-hero__title carry their own tokens plus the --h1-scale step-down,
which components.css owns.
========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-display);
font-stretch: var(--font-stretch-display);
color: var(--navy);
text-wrap: pretty;
}
h1 {
font-size: var(--fs-2xl);
font-weight: var(--fw-bold);
line-height: var(--lh-h1-page);
letter-spacing: var(--ls-h1);
}
h2 {
font-size: var(--fs-xl);
font-weight: var(--fw-bold);
line-height: var(--lh-h2);
letter-spacing: var(--ls-h2);
}
h3 {
font-size: var(--fs-lg);
font-weight: var(--fw-strong);
line-height: var(--lh-h3);
letter-spacing: var(--ls-h3);
}
h4 {
font-size: var(--fs-md);
font-weight: var(--fw-strong);
line-height: var(--lh-h4);
}
h5,
h6 {
font-size: var(--fs-base);
font-weight: var(--fw-strong);
line-height: var(--lh-h4);
}
/* §4.4: text-wrap: balance on h1 and h2 ONLY. */
:where(h1, h2) {
text-wrap: balance;
}
/* ==========================================================================
4. BODY COPY, LISTS, QUOTES, RULES
========================================================================== */
p {
line-height: var(--lh-body);
}
p + p,
p + ul,
p + ol,
ul + p,
ol + p {
margin-block-start: var(--sp-5);
}
strong,
b {
font-weight: var(--fw-strong);
}
em,
i {
font-style: italic;
}
small {
font-size: var(--fs-xs);
line-height: var(--lh-lead);
}
/* Any list that carries a class is a UI list: no markers, no indent.
Unclassed ul/ol are editor content inside .prose and keep their markers;
the accent-square marker treatment for .prose is components/pages CSS. */
:where(ul, ol)[class] {
padding: 0;
margin: 0;
list-style: none;
}
:where(ul, ol):not([class]) {
padding-inline-start: var(--sp-6);
}
:where(ul, ol):not([class]) li + li {
margin-block-start: var(--sp-3);
}
:where(ul, ol):not([class]) li {
line-height: var(--lh-body);
}
:where(ul, ol):not([class]) ::marker {
color: var(--accent);
}
dl {
line-height: var(--lh-body);
}
dt {
font-weight: var(--fw-strong);
}
dd {
margin-inline-start: var(--sp-5);
}
blockquote {
margin: 0;
font-size: var(--fs-md);
line-height: var(--lh-lead);
color: var(--ink);
}
blockquote p + p {
margin-block-start: var(--sp-4);
}
cite {
font-style: normal;
}
address {
font-style: normal;
line-height: var(--lh-body);
}
/* A bare
is a decorative hairline. --line is DECORATIVE ONLY by token
contract, which is exactly what this is. */
hr {
height: 1px;
border: 0;
margin-block: var(--sp-8);
background: var(--line);
}
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
font-size: var(--fs-sm);
}
pre {
overflow-x: auto;
padding: var(--sp-5);
border-radius: var(--r-2);
background: var(--surface-alt);
line-height: var(--lh-lead);
}
abbr[title] {
text-decoration: underline dotted;
cursor: help;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* ==========================================================================
5. TABLES
========================================================================== */
table {
width: 100%;
border-collapse: collapse;
color: var(--ink);
font-size: var(--fs-base);
line-height: var(--lh-lead);
}
caption {
padding-block-end: var(--sp-3);
color: var(--ink-muted);
font-size: var(--fs-xs);
text-align: start;
}
th,
td {
padding: var(--sp-3) var(--sp-4);
border-block-end: 1px solid var(--line);
text-align: start;
vertical-align: top;
}
th {
font-family: var(--font-display);
font-stretch: var(--font-stretch-display);
font-weight: var(--fw-strong);
color: var(--navy);
}
/* ==========================================================================
6. LINKS AND SELECTION
§9.12: colour is never the only signal. Every inline prose link carries a
2px underline. Links that are components (buttons, nav, cards) opt out by
class and re-declare their own affordance.
========================================================================== */
a {
color: var(--navy-link);
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
transition: color var(--t-fast) var(--ease),
text-decoration-color var(--t-fast) var(--ease);
}
a:hover {
color: var(--navy);
text-decoration-color: var(--accent);
}
a:active {
color: var(--navy);
}
/* Structural / component links draw their own affordance. */
a[class]:where(.btn, [class*="__link"], [class*="__btn"], [class*="__cta"],
.brand, .chip, .skip-link, .social__link, .header-call, .nav-toggle,
.site-header__phone, .site-header__cta, .drawer__phone, .drawer__email,
.callbar__btn, .breadcrumb__link, .site-footer__phone, .trust__link,
.action-rail__phone, .gallery__btn) {
text-decoration: none;
}
a:not([href]) {
color: inherit;
text-decoration: none;
cursor: default;
}
::selection {
background: var(--navy);
color: var(--surface);
}
/* ==========================================================================
7. MEDIA
Zero CLS: every ![]()
in this theme ships width/height (or an aspect-ratio
on its frame). The rule below preserves the intrinsic ratio of those
attributes while allowing the image to shrink.
========================================================================== */
img,
svg,
video,
canvas,
picture,
iframe,
embed,
object {
display: block;
max-width: 100%;
}
img,
video {
height: auto;
}
picture {
max-width: 100%;
}
figure {
margin: 0;
}
figcaption {
margin-block-start: var(--sp-3);
color: var(--ink-muted);
font-size: var(--fs-xs);
line-height: var(--lh-lead);
}
/* Inline icons are laid out by their parent flex/grid row and must never be
squashed by it. */
svg.icon {
display: block;
flex: 0 0 auto;
overflow: visible;
}
/* ==========================================================================
8. FORMS AND INTERACTIVE ELEMENTS
Normalisation only. The field skin (.field, .field__input, .field__label,
.field__error, .btn) belongs to components.css.
========================================================================== */
input,
button,
textarea,
select,
optgroup {
font: inherit;
color: inherit;
letter-spacing: inherit;
margin: 0;
}
/* §4.2: inputs are NEVER below 16px — this is what stops iOS zooming on
focus. The clamp floor of --fs-base is exactly 1rem. */
input,
textarea,
select {
font-size: max(1rem, var(--fs-base));
background-color: var(--surface);
color: var(--ink);
}
textarea {
display: block;
resize: vertical;
line-height: var(--lh-lead);
}
select {
appearance: none;
-webkit-appearance: none;
}
input::placeholder,
textarea::placeholder {
color: var(--placeholder);
opacity: 1;
}
input[type="search"] {
appearance: textfield;
-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/* Checkbox and radio boxes are real UI boundaries -> --line-strong (3.75:1). */
input[type="checkbox"],
input[type="radio"] {
inline-size: 20px;
block-size: 20px;
accent-color: var(--accent);
border: 1px solid var(--line-strong);
}
label {
font-weight: var(--fw-strong);
line-height: var(--lh-tight);
}
fieldset {
min-inline-size: 0;
padding: 0;
border: 0;
}
legend {
padding: 0;
font-family: var(--font-display);
font-stretch: var(--font-stretch-display);
font-weight: var(--fw-strong);
color: var(--navy);
}
button,
[type="button"],
[type="reset"],
[type="submit"],
summary {
cursor: pointer;
}
/* A bare