/* ========================================================================== HomePezzo Design System — Layer 1: element foundation Design System Phase 2, v0.1.164 Direction: Swiss structure + architectural/editorial design + HomePezzo identity. This is the first pass that intentionally changes how the site looks: a warm page ground, HomePezzo-owned Inter, and a real heading scale. ── SCOPE ──────────────────────────────────────────────────────────────── Bare element selectors only. This file contains NO: #brxe-* · .geodir-* / .bsui · .uwp-* · card / button / form component rules · page-specific selectors · Guide-specific selectors · archive-specific selectors. Components keep their own CSS and keep winning — see the cascade note. ── WHY @layer, AND WHY THE ORDER STATEMENT MATTERS ────────────────────── The audit established three facts about this site's cascade: 1. All Bricks THEME css is wrapped in `@layer bricks`. Layered CSS always loses to unlayered CSS, whatever the specificity. 2. Bricks PER-ELEMENT css (#brxe-*) is UNLAYERED and printed in after every HomePezzo stylesheet. 3. Existing HomePezzo component CSS is unlayered. Putting this file in `@layer hp.base` makes it a true floor: it beats the Bricks theme defaults it is meant to replace, and it loses to every component that already owns its own typography. That is exactly the behaviour this phase wants — unowned text inherits the new system, owned text is left alone, and NOT ONE `!important` is needed to achieve it. The `@layer bricks, hp.base;` statement below is load-bearing. Layer order is fixed by first appearance of the name, and this file loads BEFORE frontend-layer.min.css. Without the statement, `hp.base` would be declared first, would therefore rank BELOW `bricks`, and every rule in this file would lose to the Bricks defaults it is supposed to replace. With it, `bricks` is registered first and ranks lower. Do not remove or reorder it. Verified in the browser after deploy: body resolves to Inter 16px/1.65 on #F4F2ED, while .hp-guide-title stays Cardo and #brxe-* headings keep their template sizes. ========================================================================== */ @layer bricks, hp.base; @layer hp.base { /* ── Canvas ─────────────────────────────────────────────────────────── The glare change. Pure white stops being the ground and becomes a deliberate surface; cards, forms and the Guide reading column keep their own white and now read as figures on it. html is painted as well as body. body is `min-height:100vh` + `display:flex` (homepezzo-section-colors.css), so on a short page or during elastic overscroll the html background is what shows — leaving it transparent would flash the browser's white through at the edges. Deliberately NOT done here: no existing section, container, card or panel background is touched. Whites that are currently explicit stay explicit, and are catalogued in the Phase 2 white-surface audit for a later decision rather than being converted now. -------------------------------------------------------------------- */ html { background-color: var(--hp-canvas); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { background-color: var(--hp-canvas); /* ── Global typography ─────────────────────────────────────────── Replaces the Bricks theme default of the OS system stack at 15px/1.7/#363636. Inter is HomePezzo-owned as of v0.1.163 (assets/fonts/, SIL OFL 1.1) — this is the first phase that actually uses it outside the Guide editorial scope. Cardo is NOT touched: it stays scoped to Guide headings. */ font-family: var(--hp-font-sans); font-size: var(--hp-type-body-size); /* 16px */ font-weight: var(--hp-type-body-weight); /* 400 */ line-height: var(--hp-type-body-leading); /* 1.65 */ color: var(--hp-ink); /* 11.9:1 on canvas */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Headings ───────────────────────────────────────────────────────── Bricks' defaults are em-based (h1 2.4em, h2 2.1em, h3 1.8em), so they silently rescale with the body size and never formed a real scale. These are the Phase 1 token values. Guide headings are untouched by construction: .hp-guide-title, .hp-guide-section-heading and .hp-guide-step__heading are unlayered class rules in homepezzo-gd-ui.css and therefore outrank this whole layer. Cardo keeps signalling editorial content; Inter takes the surrounding interface. Templates whose headings are sized by Bricks per-element CSS (#brxe-hpah03, .hpg-gah_head_default, #brxe-hp01h1, ...) also keep their current sizes — that is intended for this phase, and those elements are listed in the Phase 2 typography-override audit for later template migration rather than being forced with !important. -------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--hp-font-sans); color: var(--hp-ink-strong); margin-top: 0; text-wrap: balance; /* progressive; ignored where unsupported */ } h1 { font-size: var(--hp-type-h1-size); /* 40px */ font-weight: var(--hp-type-h1-weight); /* 700 */ line-height: var(--hp-type-h1-leading); /* 1.1 */ letter-spacing: var(--hp-type-h1-tracking); /* -0.015em*/ } h2 { font-size: var(--hp-type-h2-size); /* 28px */ font-weight: var(--hp-type-h2-weight); /* 700 */ line-height: var(--hp-type-h2-leading); /* 1.2 */ letter-spacing: var(--hp-type-h2-tracking); /* -0.01em */ } h3 { font-size: var(--hp-type-h3-size); /* 20px */ font-weight: var(--hp-type-h3-weight); /* 700 */ line-height: var(--hp-type-h3-leading); /* 1.3 */ } /* h4-h6 continue the descent without inventing new tokens. Kept deliberately plain — these are rare on HomePezzo and over-designing them now would be noise. */ h4 { font-size: 17px; font-weight: 700; line-height: 1.35; } h5 { font-size: var(--hp-type-small-size); /* 14px */ font-weight: 700; line-height: 1.4; } h6 { font-size: var(--hp-type-meta-size); /* 13px */ font-weight: 700; line-height: 1.4; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hp-ink-muted); } /* Page H1 at small widths. 40px is a desktop measure; on a 390px screen it wraps a three-word heading onto three lines. */ @media (max-width: 767px) { h1 { font-size: 30px; } h2 { font-size: 24px; } h3 { font-size: 18px; } } /* ── Text ───────────────────────────────────────────────────────────── Paragraphs inherit body sizing rather than restating it, so a single token change moves them. No margin-bottom is set: Bricks and the Guide editorial layer already own paragraph rhythm, and imposing one here would shift spacing on every existing template. -------------------------------------------------------------------- */ p { line-height: var(--hp-type-body-leading); color: var(--hp-ink); } strong, b { font-weight: 600; } small { font-size: var(--hp-type-small-size); /* 14px */ line-height: var(--hp-type-small-leading); /* 1.55 */ } /* Semantic bullets and numbers are preserved exactly as-is. No list reset, no decorative markers, no Guide list interference — the Guide .hp-guide-list treatment stays authoritative. */ hr { height: 0; border: 0; border-top: 1px solid var(--hp-line); } /* ── Links ──────────────────────────────────────────────────────────── Restrained: colour plus an underline that appears on interaction. Only `color` is set at rest. Bricks' layered `a { font-weight: 700 }` and `a { text-decoration: underline }` are deliberately left in force so nothing about current link weight or default decoration changes in this phase. Section-accent links are NOT handled here — that belongs to the component layer. What matters at this level is that the DEFAULT link colour is a HomePezzo blue that survives the new ground: #315E9E is 5.82:1 on the canvas and 6.51:1 on white. Green Power and Plumbing canonicals are never used as body-link text; where a section accent has to be text, the component uses --hp-accent-text (see homepezzo-section-colors.css). -------------------------------------------------------------------- */ a { color: var(--hp-blue); } a:hover, a:focus-visible { color: var(--hp-blue-hover); /* 7.25:1 on canvas */ text-decoration: underline; } /* ── Focus ──────────────────────────────────────────────────────────── One visible, consistent keyboard affordance. :focus-visible only, so mouse users see nothing new and the existing click-focus suppression in homepezzo-gd-ui.css is unaffected. The double ring keeps the indicator legible on white surfaces, the canvas and dark fields alike. -------------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--hp-blue); outline-offset: 2px; } }