/* Hallmark · genre: atmospheric surface on an editorial voice (house-style.md §3.7) * macrostructure: inherited — this is an ELEVATION pass; the draft owns section order, * words, facts and the one action. Nothing here changes a claim. * theme: custom (tuned) · vibe: "their warm blush ground, lit, in white light" * theme axes: light paper / classical-serif display (Caudex) / warm-blush accent (h ~24) * nav: N12 banner + retracting bar · footer: Ft5 statement * enrichment: none generated — their own photographs, graded in CSS * pre-emit critique: P5 H5 E5 S5 R4 V5 * * EVERY named role below is research/brand.json verbatim. Every derived value moves * only lightness/chroma along one of their two measured rays — the blush ray (h 24) * or their neutral ramp — and is marked DERIVED with the role it came from. * Nothing is borrowed from the OS palette. See ../brand.md. * ========================================================================= */ :root { /* ========================================================================== 1 · Named roles — research/brand.json, verbatim ======================================================================= */ --paper: #FFFFFF; /* brand.json paper, weight 5 */ --ink: #000000; /* brand.json ink, weight 1863 */ --secondary: #E8D9CF; /* brand.json secondary — the warm blush ground. brand.md: "the real brand colour on the page" */ /* brand.json records --accent #439FF0 at weight 4. brand.md establishes it is the foreground of the Wix "Log In" button — platform chrome, not a decision anyone at this business made, sitting beside rgb(0,0,238) ×79 (the raw browser link default). It is recorded here so the role table is complete and is PAINTED NOWHERE. The page carries no blue. It also fails the focus-ring floor: #439FF0 on --paper measures 2.82:1, under the 3:1 gate-40 threshold for a focus indicator. Their ink carries focus instead, at 21:1. */ --accent-recorded: #439FF0; /* not painted — see above */ /* ========================================================================== 2 · Neutral ramp — brand.json → neutrals, darkest to lightest ======================================================================= */ --n-900: #000000; --n-800: #2A2A2A; --n-700: #303030; --n-600: #545454; --n-500: #555555; --n-400: #7F7F7F; /* ========================================================================== 3 · Observation — recorded with its source, NOT promoted to a role ======================================================================= */ /* extract.json → pages[0].design.backgrounds, rgb(212,212,212) at n=13: the single most-used background on their home page. brand.json never named it, so it is not a role. Used here only as a media well behind photographs, never as a text ground. */ --observed-bg: #D4D4D4; /* ========================================================================== 4 · DERIVED — the blush ray. Hue held at their measured h≈24; only L and C move. ======================================================================= */ --blush-050: #FBF7F4; /* DERIVED from --secondary, lightened — page ground */ --blush-100: #F6F0EB; /* DERIVED from --secondary, lightened — warm section band */ --blush-200: #EFE5DD; /* DERIVED from --secondary, lightened */ --blush-300: #E8D9CF; /* = --secondary, the named role */ --blush-400: #D8C4B6; /* DERIVED from --secondary, darkened — strong hairline */ --blush-500: #C0A794; /* DERIVED from --secondary, darkened — rule on warm ground */ /* DERIVED from --paper, moved along the blush ray. The opaque pane fill that ships FIRST, before any backdrop-filter exists (house-style.md §3.2). A browser with no backdrop-filter gets a solid warm card, never transparent text. */ --pane-solid: #FCFAF8; --pane-solid-2: #F7F1EC; /* ========================================================================== 5 · Surfaces ======================================================================= */ --surface-page: var(--paper); --surface-field: var(--blush-050); --surface-warm: var(--blush-100); --surface-warm-2: var(--blush-200); --surface-band: var(--blush-300); --surface-dark: var(--n-800); --surface-well: var(--observed-bg); --hairline: var(--blush-300); --hairline-strong: var(--blush-400); --hairline-rule: var(--blush-500); --hairline-on-dark: rgba(255, 255, 255, 0.22); /* ========================================================================== 6 · Glass — house-style.md §3.1, built in THEIR hue, never the OS clay. Light recipe: their paper is #FFFFFF, so panes are light and text stays ink. ======================================================================= */ --glass-lt: rgba(255, 255, 255, 0.62); --glass-lt-2: rgba(255, 255, 255, 0.44); --glass-pane: rgba(255, 255, 255, 0.74); /* panes standing on a photograph */ --glass-pane-2: rgba(255, 255, 255, 0.66); --glass-tint: rgba(232, 217, 207, 0.42); /* THEIR blush @ 0.42 — house §3.1 */ --glass-nav: rgba(252, 250, 248, 0.78); /* DERIVED from --pane-solid */ --glass-border: rgba(255, 255, 255, 0.55); --glass-border-lt: rgba(255, 255, 255, 0.82); /* the hover brighten, house §3.4 */ --glass-keel: rgba(42, 42, 42, 0.10); /* their --n-800, the warm hairline */ --glass-keel-2: rgba(42, 42, 42, 0.16); --glass-hi: rgba(255, 255, 255, 0.75); /* the inset top hairline */ --glass-blur: 20px; --glass-sat: 1.4; /* Scrims. Text over a translucent pane on a photograph is where legibility dies (house-style.md §3.5) — these are the graded layer that goes between. */ --scrim-field: linear-gradient(180deg, rgba(251, 247, 244, 0.12) 0%, rgba(251, 247, 244, 0.46) 48%, rgba(251, 247, 244, 0.86) 100%); --scrim-pane: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.00) 100%); --scrim-media: linear-gradient(to top, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.24) 44%, rgba(0, 0, 0, 0) 100%); /* The grade every one of their photographs is run through before a pane stands on it. brand.md is honest that these are phone snapshots of goods in a garage; graded and scrimmed they become a field, ungraded they read as a snapshot under glass. */ --grade-field: saturate(0.72) contrast(1.05) brightness(0.96); --grade-tile: saturate(0.88) contrast(1.02); /* ========================================================================== 7 · Shadows — soft, warm-neutral, low-contrast. A printed-catalogue depth, never a blue-grey UI drop shadow. Built on their --n-800. ======================================================================= */ --shadow-xs: 0 1px 2px rgba(42, 42, 42, 0.05); --shadow-sm: 0 1px 3px rgba(42, 42, 42, 0.07), 0 1px 2px rgba(42, 42, 42, 0.04); --shadow-soft: 0 12px 30px -18px rgba(42, 42, 42, 0.55); --shadow-glass: 0 24px 60px -28px rgba(42, 42, 42, 0.62); --shadow-lift: 0 30px 68px -26px rgba(42, 42, 42, 0.52); --shadow-modal: 0 40px 90px -30px rgba(0, 0, 0, 0.46); --shadow-inset: inset 0 1px 0 var(--glass-hi); /* ========================================================================== 8 · Motion — house-style.md §3.4. Calm and short; nothing springs in an estate house (the owner's own motion note, prospect-designs/21). ======================================================================= */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-micro: 120ms; --dur: 260ms; --dur-short: 220ms; --dur-long: 420ms; --dur-reveal: 620ms; /* ========================================================================== 9 · Geometry — the house scale (house-style.md §3.1), which agrees with the 20px their own buttons carry (brand.md → Corner geometry, radii 20px ×24). Never square. ======================================================================= */ --r-lg: 22px; --r-md: 16px; --r-sm: 12px; --r-xs: 8px; --r-pill: 999px; --radius-button: 20px; /* theirs, measured */ --border-hair: 1px; --border-strong: 2px; /* ========================================================================== 10 · Spacing — 4pt scale, named ======================================================================= */ --space-3xs: 4px; --space-2xs: 8px; --space-xs: 12px; --space-sm: 16px; --space-md: 24px; --space-lg: 32px; --space-xl: 48px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 128px; --container: 1240px; --prose: 68ch; --gap: var(--space-md); --section-y: clamp(56px, 8vw, 96px); --bar-height: 64px; /* ========================================================================== 11 · Type — brand.md → Font pairing. Caudex over Arial, two families only. The technical marginalia is set in the body face with tabular figures rather than a third face, so the 2+1 rule holds at 2. ======================================================================= */ --font-display: Caudex, Georgia, "Times New Roman", serif; --font-body: Arial, Helvetica, sans-serif; --text-xs: 0.8125rem; /* 13px — labels and marginalia only, never body */ --text-sm: 0.9375rem; /* 15px */ --text-base: 1.0625rem; /* 17px — body floor is 16px; their own site sets 10px */ --text-lg: 1.1875rem; --text-xl: 1.375rem; --tap: 48px; /* controls never below 44px; this audience skews older */ /* ========================================================================== 12 · Depth order ======================================================================= */ --z-field: 0; --z-raised: 10; --z-sticky: 200; --z-nav: 300; --z-modal: 900; --z-intro: 999; }