/* ========================================================================== HomePezzo Design System — Foundation tokens (Layer 0) Design System Phase 1, v0.1.163 Direction: Swiss structure + architectural/editorial design + HomePezzo identity. This file is the vocabulary for that system. It is NOT the system. ── WHAT THIS FILE IS ──────────────────────────────────────────────────── :root custom-property declarations and documentation comments. Nothing else. ── WHAT THIS FILE IS NOT ──────────────────────────────────────────────── It contains, by design and by review requirement: * no component selectors * no page or body-class selectors * no #brxe-* selectors * no .geodir-* / .bsui selectors * no .uwp-* selectors * no !important * no @media blocks * no element selectors ── DOES LOADING THIS FILE CHANGE THE SITE? ────────────────────────────── Almost entirely no. Declaring a custom property paints nothing; something has to consume it. Every token below is new vocabulary that no existing rule references — with exactly TWO deliberate exceptions, both approved for this phase and both documented inline where they appear: 1. --hp-accent is given a :root value. It was previously undefined outside .hp-section-* scopes, so ~19 rules written as var(--hp-accent, #2563EB) silently fell back to the LEGACY blue on every page that had no section class. They now resolve to the canonical HomePezzo Interior blue. 2. --hp-accent-solid is consumed by the three approved contrast fixes in homepezzo-section-colors.css / homepezzo-gd-ui.css. See section 3B. Everything else here — the canvas, the type scale, the spacing scale, the layout widths, the small radii, the overlay shadow — is vocabulary only. Applying it is a later phase. In particular: THE PAGE CANVAS IS *NOT* APPLIED IN THIS PHASE. body still renders #FFFFFF. --hp-canvas is defined, not used. ── LOAD ORDER ─────────────────────────────────────────────────────────── Enqueued as 'homepezzo-tokens' with no dependencies, and declared as a dependency of homepezzo-section-colors, so it is always the first HomePezzo stylesheet in the document. See includes/hp-enqueue.php. ========================================================================== */ :root { /* ====================================================================== 1. CANVAS AND SURFACES ---------------------------------------------------------------------- The glare problem: body is currently pure #FFFFFF and every card, archive, guide and results grid sits on raw white, so white is the ground rather than the figure. --hp-canvas is the warm neutral that will become the page ground. It sits at the midpoint of the approved #F3F1EC..#F6F4EF range and is a slightly cooler sibling of --hp-warm-white (#FAF7F1), which is already live on the header and three homepage sections — so the two harmonise rather than clash when the canvas is finally applied. NOT APPLIED IN THIS PHASE. Vocabulary only. ====================================================================== */ --hp-canvas: #F4F2ED; /* page ground (future body background) */ --hp-surface: #FFFFFF; /* cards, panels, guide reading column */ --hp-surface-sunken: #EDEAE3; /* wells, filter rails, inactive tabs */ --hp-surface-warm: #FAF7F1; /* secondary bands; = existing warm-white*/ --hp-dark: #21242A; /* dark surface: footer, editorial break */ /* ====================================================================== 2. INK ---------------------------------------------------------------------- Measured against --hp-canvas (#F4F2ED), not white, because that is the ground these must survive on: --hp-ink-strong on canvas 15.0:1 --hp-ink on canvas 11.4:1 --hp-ink-muted on canvas 5.9:1 (AA at every size) --hp-ink-muted deliberately replaces BOTH of the muted greys in use today. #6B7280 falls to 4.32:1 on the warm canvas (fails AA) and #94A3B8 is only 2.56:1 even on white (fails everywhere). Moving the canvas without moving the muted ink would introduce a new failure, so the two must always ship together. ====================================================================== */ --hp-ink-strong: #14171C; /* headings */ --hp-ink: #2B3038; /* body copy */ --hp-ink-muted: #565D69; /* metadata, captions, secondary labels */ /* ====================================================================== 3. SECTION COLOUR SYSTEM ====================================================================== */ /* -- 3A. Canonical section colours ----------------------------------- These four ARE the HomePezzo information architecture. They are frozen. Nothing in this phase or any later phase changes these values; the derivatives below exist precisely so that these never have to move. -------------------------------------------------------------------- */ --hp-exterior: #8B5E3C; --hp-interior: #315E9E; --hp-green-power: #16A34A; --hp-plumbing-fixtures: #EAB308; /* -- 3B. --*-solid : the accent as a SOLID FILL BEHIND WHITE TEXT ----- This is the token the three approved contrast fixes consume. Contrast of white text on each canonical colour: Exterior #8B5E3C 5.58:1 passes Interior #315E9E 6.51:1 passes Green Power #16A34A 3.30:1 FAILS normal text (needs 4.5) Plumbing #EAB308 1.92:1 FAILS at every size So Exterior and Interior map to themselves — byte-identical rendering, no visual change — and only Green Power and Plumbing shift to their approved deep derivatives. That is what confines this phase's visible delta to exactly the two failing sections. Green Power deep #126834 white 6.87:1 Plumbing deep #91710D white 4.59:1 Use --hp-accent-solid ONLY for a solid fill that carries white text. For a rule, a border, a 3px accent or chip text, keep --hp-accent. -------------------------------------------------------------------- */ --hp-exterior-solid: #8B5E3C; /* = canonical (already passes) */ --hp-interior-solid: #315E9E; /* = canonical (already passes) */ --hp-green-power-solid: #126834; --hp-plumbing-fixtures-solid: #91710D; /* -- 3C. --*-soft : tinted structural field, dark text on top --------- ~92% toward the canvas. Intended for large section bands where the colour must read as structure without shouting. Verified: #14171C on each of these is 13.4:1 or better, and #2B3038 is 10:1 or better. NOT APPLIED IN THIS PHASE. Vocabulary for the colour-field strategy. -------------------------------------------------------------------- */ --hp-exterior-soft: #ECE6DF; --hp-interior-soft: #E4E6E7; --hp-green-power-soft: #E2ECE0; --hp-plumbing-fixtures-soft: #F3EDDB; /* -- 3D. --*-deep : saturated structural field, white text on top ----- ~40% toward near-black. Intended for full-bleed archive/category hero fields. White on each: 9.81 / 10.75 / 6.87 / 4.59:1. Green Power and Plumbing deliberately share their values with the -solid tokens above: a colour dark enough to carry white text as a badge is the same colour that carries white text as a field. Exterior and Interior differ, because their canonical values already pass as badges but are too light to anchor a full-bleed hero. NOT APPLIED IN THIS PHASE except via --*-solid (see 3B). -------------------------------------------------------------------- */ --hp-exterior-deep: #583E2C; --hp-interior-deep: #223E67; --hp-green-power-deep: #126834; --hp-plumbing-fixtures-deep: #91710D; /* -- 3D-bis. --*-text : the accent used AS TEXT on a light surface ---- Added v0.1.164 (Phase 2). A third role, distinct from -solid (a fill behind white text) and -deep (a large field behind white text): the colour the accent becomes when it IS the text. The requirement is harder than it looks, because Phase 2 introduces a second light ground. A text token has to clear 4.5:1 on ALL of them: white canvas that section's -soft tint Exterior #8B5E3C 5.58 4.99 5.21 -> canonical is fine Interior #315E9E 6.51 5.82 5.98 -> canonical is fine Green #16A34A 3.30 2.95 3.15 -> FAILS, needs deep Plumbing #EAB308 1.92 1.71 1.85 -> FAILS, needs deep Green Power reuses its -deep value unchanged (6.87 / 6.14 / 6.65). Plumbing does NOT. #91710D was derived for a BACKGROUND role, and as text it measures 4.59 on white but only 4.11 on the canvas and 4.44 on its own soft tint — i.e. it fails the moment the warm ground lands. So the text role gets its own value: #91710D darkened 16% toward near-black, giving 5.88 / 5.25 / 5.68. Same hue family, real margin, and --hp-plumbing-fixtures-deep is left untouched for its own role. -------------------------------------------------------------------- */ --hp-exterior-text: #8B5E3C; /* = canonical (already passes) */ --hp-interior-text: #315E9E; /* = canonical (already passes) */ --hp-green-power-text: #126834; /* = -deep (passes as text too) */ --hp-plumbing-fixtures-text: #7C610E; /* -deep darkened for text use */ /* -- 3D-ter. --*-badge-ink : the foreground a CANONICAL badge fill needs - Added v0.1.166. A fourth role, and the inverse of -solid. -solid answers "the fill is dark enough for the WHITE text the template already hard-codes". That keeps every badge accessible, but it costs category IDENTITY: Plumbing's badge rendered #91710D, which reads as bronze rather than as the canonical yellow sitting 3px above it on the same card's top accent. -badge-ink answers the opposite question: keep the CANONICAL fill and darken the FOREGROUND instead. Only sections whose canonical colour is too light for white text need one. canonical fill ink ratio Plumbing & Fixtures #EAB308 #422006 7.60 AA + AAA Interior, Exterior and Green Power define no -badge-ink: the first two carry white on their canonical colour already, and Green Power's canonical #16A34A is 3.30 against white — it keeps its -solid fill for now, so its badge is unchanged. Consumers therefore fall back to #FFFFFF and nothing but Plumbing moves. This does NOT replace -solid. -solid still owns every fill that must carry white text: action buttons, the archive category filter row, and Green Power's badge. -------------------------------------------------------------------- */ --hp-plumbing-fixtures-badge-ink: #422006; /* on canonical #EAB308: 7.60 */ /* -- 3E. Root accent defaults ---------------------------------------- THIS IS ONE OF THE TWO RULES IN THIS FILE THAT CHANGES RENDERING. .hp-section-interior / -exterior / -green-power / -plumbing-fixtures (homepezzo-section-colors.css) set --hp-accent per section. But --hp-accent was never defined at :root, so on every surface OUTSIDE a section scope the ~19 rules written as `var(--hp-accent, #2563EB)` resolved to their fallback — the LEGACY blue that Step 115 retired in favour of #315E9E. Defining it here makes those rules resolve to the canonical HomePezzo Interior blue instead. The legacy fallbacks are deliberately left in place in their own files: mechanically rewriting all 19 is a later phase, and this single root definition already neutralises them. --hp-accent-solid gets the same treatment so any fill consuming it outside a section scope lands on brand blue, not on a legacy value. -------------------------------------------------------------------- */ --hp-accent: var(--hp-interior); /* #315E9E */ --hp-accent-solid: var(--hp-interior-solid); /* #315E9E */ --hp-accent-text: var(--hp-interior-text); /* #315E9E */ /* v0.1.166: the badge pair gets the same root treatment. Outside a section scope a badge lands on Interior blue with white text, which is what every -solid consumer already did there. */ --hp-accent-badge: var(--hp-interior-solid); /* #315E9E */ --hp-accent-badge-ink: #FFFFFF; /* ====================================================================== 4. LINES ---------------------------------------------------------------------- Warm hairlines to replace the two cool ramps currently mixed together (#E2E8F0 slate and #E5E7EB gray). On a warm canvas a hairline reads more crisply than a shadow, which is why most shadows can eventually go. NOT APPLIED IN THIS PHASE. ====================================================================== */ --hp-line: #E0DCD2; /* default hairline */ --hp-line-strong: #CFC9BC; /* emphasis rule, input border */ /* ====================================================================== 4B. STATUS (SO9, v0.1.181) ---------------------------------------------------------------------- ADDITIVE ONLY — no existing token changes value here. Until SO9 the design system had no status vocabulary at all, so every success / error / warning / info message on the site fell through to raw Bootstrap (AUI) colours: cool #0f5132 / #842029 / #664d03 on #d1e7dd / #f8d7da / #fff3cd. Those read as a framework notice dropped onto the warm canvas rather than as HomePezzo states, which is exactly what the account and authentication messages needed. Each -text value is the one used for the MESSAGE TEXT and is measured against its own -soft surface, not against white, because that is how these are actually used: --hp-success-text #146C43 on --hp-success-soft #E7F3EC 6.6:1 --hp-danger-text #B42318 on --hp-danger-soft #FBECEA 6.3:1 --hp-warning-text #8A5A00 on --hp-warning-soft #FBF2E0 5.6:1 --hp-info-text #2A5086 on --hp-info-soft #E8EEF6 7.0:1 All four clear AA (4.5:1) for body-size text with margin to spare, and all four also clear AA against plain white, so the same text token can be used on an unfilled surface. Colour is never the ONLY carrier of meaning where these are applied — the native message text and the native role/aria attributes always remain, and a left rule differentiates the four states by position. ====================================================================== */ --hp-success-text: #146C43; --hp-success-soft: #E7F3EC; --hp-success-line: #A8CDB8; --hp-danger-text: #B42318; --hp-danger-soft: #FBECEA; --hp-danger-line: #E7B4AE; --hp-warning-text: #8A5A00; --hp-warning-soft: #FBF2E0; --hp-warning-line: #E0C88A; --hp-info-text: #2A5086; --hp-info-soft: #E8EEF6; --hp-info-line: #B6C6DD; /* ====================================================================== 5. TYPOGRAPHY ---------------------------------------------------------------------- Families are self-hosted by homepezzo-core as of v0.1.163 — see assets/css/hp-fonts.css and assets/fonts/README.md. Cardo is retained for Guide editorial headings. That is a deliberate departure from strict International Typographic Style, which would be grotesque throughout: HomePezzo is Swiss STRUCTURE with editorial CHARACTER, and the serif is what separates instructional content from directory chrome. THE SCALE BELOW IS NOT APPLIED IN THIS PHASE. Today the site still renders body text in the OS system stack at 15px/1.7 from the Bricks theme layer, and only .hp-guide-editorial asks for Inter or Cardo. Adopting this scale globally is Phase 2. ====================================================================== */ --hp-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --hp-font-serif: "Cardo", Georgia, "Times New Roman", Times, serif; /* -- Display / hero ---------------------------------------------------- */ --hp-type-display-size: 56px; --hp-type-display-weight: 700; --hp-type-display-leading: 1.05; --hp-type-display-tracking: -0.02em; /* -- Page H1 ----------------------------------------------------------- */ --hp-type-h1-size: 40px; --hp-type-h1-weight: 700; --hp-type-h1-leading: 1.1; --hp-type-h1-tracking: -0.015em; /* -- Guide H1 (serif) -------------------------------------------------- */ --hp-type-guide-h1-size: 38px; --hp-type-guide-h1-weight: 700; --hp-type-guide-h1-leading: 1.15; --hp-type-guide-h1-tracking: -0.01em; /* -- H2 ---------------------------------------------------------------- */ --hp-type-h2-size: 28px; --hp-type-h2-weight: 700; --hp-type-h2-leading: 1.2; --hp-type-h2-tracking: -0.01em; /* -- Guide H2 (serif) -------------------------------------------------- */ --hp-type-guide-h2-size: 26px; --hp-type-guide-h2-weight: 700; --hp-type-guide-h2-leading: 1.25; /* -- H3 ---------------------------------------------------------------- */ --hp-type-h3-size: 20px; --hp-type-h3-weight: 700; --hp-type-h3-leading: 1.3; /* -- Guide step H3 (serif) --------------------------------------------- */ --hp-type-guide-h3-size: 24px; --hp-type-guide-h3-weight: 700; --hp-type-guide-h3-leading: 1.3; /* -- Lede -------------------------------------------------------------- */ --hp-type-lede-size: 19px; --hp-type-lede-weight: 400; --hp-type-lede-leading: 1.6; /* -- Body -------------------------------------------------------------- */ --hp-type-body-size: 16px; --hp-type-body-weight: 400; --hp-type-body-leading: 1.65; /* -- Small body -------------------------------------------------------- */ --hp-type-small-size: 14px; --hp-type-small-weight: 400; --hp-type-small-leading: 1.55; /* -- Metadata ---------------------------------------------------------- */ --hp-type-meta-size: 13px; --hp-type-meta-weight: 400; --hp-type-meta-leading: 1.5; /* -- Label / eyebrow --------------------------------------------------- */ --hp-type-label-size: 12px; --hp-type-label-weight: 700; --hp-type-label-leading: 1; --hp-type-label-tracking: 0.10em; --hp-type-label-transform: uppercase; /* -- Chip / badge ------------------------------------------------------ */ --hp-type-chip-size: 11px; --hp-type-chip-weight: 700; --hp-type-chip-leading: 1.4; --hp-type-chip-tracking: 0.04em; --hp-type-chip-transform: uppercase; /* -- Navigation -------------------------------------------------------- */ --hp-type-nav-size: 15px; --hp-type-nav-weight: 500; --hp-type-nav-leading: 1; /* -- Button ------------------------------------------------------------ */ --hp-type-button-size: 15px; --hp-type-button-weight: 600; /* ====================================================================== 6. SPACING ---------------------------------------------------------------------- One 4px-based scale, replacing the ad-hoc 28/40/48/64/72/80/88 section paddings and the five different card body recipes in use today. NOT APPLIED IN THIS PHASE. No existing margin or padding is migrated. ====================================================================== */ --hp-space-1: 4px; --hp-space-2: 8px; --hp-space-3: 12px; --hp-space-4: 16px; --hp-space-5: 24px; --hp-space-6: 32px; --hp-space-7: 48px; --hp-space-8: 64px; --hp-space-9: 96px; --hp-space-10: 128px; /* -- Editorial rhythm, carried over from the Guide layer --------------- These two are NOT on the 4px scale and that is intentional: they are the existing --hpg-space-block / --hpg-space-step values from .hp-guide-editorial, which is the reference implementation this system is being generalised from. Promoting them to root keeps the Guide rhythm identical when the editorial layer is later re-pointed at these. -------------------------------------------------------------------- */ --hp-space-block: 28px; /* gap before a major content block */ --hp-space-step: 56px; /* gap between guide steps */ /* ====================================================================== 7. LAYOUT ---------------------------------------------------------------------- --hp-max ratifies the 1200px container that is already hand-repeated as 15 separate per-element rules; --hp-measure / --hp-measure-wide are the existing --hpg-measure / --hpg-wide from the Guide editorial layer. NOT APPLIED IN THIS PHASE. No container is migrated. ====================================================================== */ --hp-max: 1200px; /* standard content column */ --hp-max-wide: 1440px; /* full-bleed fields, wide result grids */ --hp-measure: 740px; /* reading column */ --hp-measure-wide: 920px; /* editorial outer / figures */ --hp-gutter: 24px; /* desktop horizontal gutter */ --hp-gutter-sm: 16px; /* small-screen horizontal gutter */ /* ====================================================================== 8. RADIUS ---------------------------------------------------------------------- Eleven distinct radii are in use today (3/4/6/8/9/10/12/20/100/999/50%). The Swiss direction reduces that to three. --hp-radius-pill is reserved for one meaning only: "this token is removable" (active search filters). NOT APPLIED IN THIS PHASE. Existing card, button and input radii are untouched, including the legacy --hp-radius-card (10px) and --hp-radius-badge (999px) tokens, which stay exactly as they are. ====================================================================== */ --hp-radius-sm: 2px; /* inputs, selects, buttons, chips, badges */ --hp-radius-md: 4px; /* cards, panels, media */ --hp-radius-pill: 999px; /* removable filter tokens ONLY */ /* ====================================================================== 9. ELEVATION ---------------------------------------------------------------------- One shadow, for things that genuinely float and are dismissible: dropdowns, Select2 panels, search suggestions, modals, back-to-top. Never for cards, headers, form fields, buttons or panels. NOT APPLIED IN THIS PHASE. The ~14 existing shadows all stay. ====================================================================== */ --hp-shadow-overlay: 0 8px 24px rgba(20, 23, 28, 0.12); } /* ========================================================================== 10. BREAKPOINTS — documentation, deliberately NOT tokens -------------------------------------------------------------------------- CSS custom properties cannot be used in a media-query condition. That is, a rule of the form "@media (max-width: var(--hp-bp-md))" does NOT work. Custom properties resolve per-element at computed-value time; a media query is evaluated before that, against the viewport. There is no supported way to drive one from the other without a build step or a container query, and this project has neither. Declaring --hp-bp-* tokens would therefore create variables that look authoritative but can never be referenced where they matter, so the intended vocabulary is documented here instead. HOMEPEZZO BREAKPOINT VOCABULARY — aligned to the Bricks builder breakpoints, so a change made on a builder canvas and a change made in CSS agree: 478px mobile portrait (Bricks "Mobile portrait") 767px mobile landscape (Bricks "Mobile landscape") 991px tablet portrait (Bricks "Tablet portrait") 1279px desktop (Bricks "Desktop") Three systems are live today: these four Bricks values, the Bootstrap/AUI set that GeoDirectory ships (576/768/992/1200/1400), and roughly a dozen hand-written values in homepezzo-core (480/575/600/700/767/768/769/900/992/ 1023/1280). 575px alone accounts for 18 media queries. NOTHING IS MIGRATED IN THIS PHASE. The audit was explicit that breakpoint consolidation must happen section by section with visual verification at each step, never as a global find-and-replace. ========================================================================== */ /* PZ-DESIGN-SYSTEM-1: additive editor vocabulary. No component is migrated. Existing names/values above and in homepezzo-section-colors.css remain intact. Breakpoint tokens are reference metadata, not usable media-query variables. */ :root { --hp-brand-primary: var(--hp-blue); --hp-brand-hover: var(--hp-blue-hover); --hp-radius-pezzo: 4px; --hp-radius-button-pill: 100px; --hp-shadow-card-shell: 0 1px 3px rgba(0, 0, 0, 0.07), 0 2px 8px rgba(0, 0, 0, 0.05); --hp-breakpoint-desktop: 1279px; --hp-breakpoint-tablet: 991px; --hp-breakpoint-mobile-landscape: 767px; --hp-breakpoint-mobile-portrait: 478px; --hp-breakpoint-grid-two: 1023px; --hp-breakpoint-grid-one: 575px; }