/* holmesre.com — Layer 1: TOKENS The only file a theme touches. No selectors below except :root and theme/site scopes. Rules: components never use a raw hex; base never defines a color; a theme only overrides tokens. Primitive palette first, then semantic aliases the site actually uses. v7 adds two structural ideas: (a) TWO HUES. --brand-accent is the BROKERAGE (PureWest burgundy) and appears in exactly three places: the header lockup line, the footer marks, and the listing-card badge. --accent is BRANDON'S OWN interactive colour (buttons, links, hover rules, the menu mark) and belongs to the ground, not to the brokerage. (b) SITE FAMILY. [data-site="sales"] (this site) and [data-site="appraisal"] (the appraiser site, rebuilt next) are token scopes over the same components. The appraisal scope carries no burgundy at all. See the bottom of this file. */ :root { /* ---- primitives (named for what they are, never used directly in components) ---- */ --white: #FFFFFF; --snow: #F4F5F3; /* cool off-white, a hair green: matches the spruce accent family */ --glacier: #9FB4BE; /* Flathead lake grey-blue */ --line-grey: #D5DAD7; --spruce: #1E2E28; /* deep green-black, the "ink" of the site */ --spruce-2: #2B3E36; --moss: #4E5B57; /* muted text */ --ink-black: #1B2420; --ink-faint: #7A8783; /* source lines under a note */ /* brokerage hue — PureWest burgundy. Three jobs, no more. */ --purewest: #8B2332; --purewest-deep: #6E1B28; --purewest-tint: #E8C3C9;/* burgundy on dark grounds */ /* site hue — western larch in October. Brandon's own colour, taken off the ground. Chosen over flagging orange: larch gold sits far enough from burgundy in hue that the two never read as the same mark, and it holds on both the snow and spruce grounds. */ --larch: #C9A24B; --larch-deep: #A8822F; /* hover fill */ --larch-ink: #7A5C1B; /* gold as TEXT on a light ground; passes AA where --larch would not */ --larch-tint: #E7CE93; /* gold on a dark ground */ --status-green: #4E8A5A; /* "updated Monday" dot only */ /* ---- semantic: surfaces & text ---- */ --bg: var(--white); --bg-alt: var(--snow); /* alternating section ground */ --bg-inverse: var(--spruce); /* dark bands, menu overlay */ --surface: var(--snow); /* cards */ --ink: var(--ink-black); --ink-muted: var(--moss); --ink-quiet: var(--ink-faint); --ink-on-inverse: #E6ECEA; --ink-on-inverse-muted: #C8D2CE; --line: var(--line-grey); --line-strong: var(--ink-black); --line-on-inverse: rgba(255,255,255,.14); --line-hair: var(--line-grey); /* the plat hairline down the left of a section title */ /* ---- semantic: BRAND accent (the brokerage; three jobs only) ---- */ --brand-accent: var(--purewest); --brand-accent-deep: var(--purewest-deep); --brand-accent-tint: var(--purewest-tint); --on-brand-accent: var(--white); /* ---- semantic: SITE accent (Brandon's actions) ---- */ --accent: var(--larch); /* fills: buttons, menu mark, rules */ --accent-hover: var(--larch-deep); --accent-ink: var(--larch-ink); /* the same hue as readable text/hairlines on light */ --accent-on-inverse: var(--larch-tint); /* eyebrow text on dark */ --on-accent: var(--ink-black); /* what sits ON an accent fill */ --accent-soft: rgba(201,162,75,.10); /* wash behind an edited node, a figure strip cell */ --focus: var(--larch-ink); /* ---- overlays on photography ---- */ --scrim: rgba(20,30,26,.42); /* tiles at rest (v7: tiles carry no copy, kept light) */ --scrim-hover: rgba(20,30,26,.30); --scrim-band: rgba(20,30,26,.52); /* quote band; type sits on it, so it carries weight */ --scrim-cta: rgba(20,30,26,.55); /* closing band, form on top */ --scrim-hero-top: rgba(20,30,26,.15); --scrim-hero-bottom: rgba(20,30,26,.50); --scrim-tile: rgba(20,30,26,.10); /* v7: photos above captions get a whisper only */ --scrim-tile-hover: rgba(20,30,26,.02); /* ---- type ---- */ --font-display: "Cormorant", "Cormorant Garamond", Garamond, Georgia, serif; --font-body: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --weight-display: 300; --weight-display-strong: 400; --weight-body: 400; --weight-body-strong: 500; --weight-mono: 400; --weight-mono-strong: 500; --track-display: .01em; /* v7: section titles are sentence case, so tracking relaxes */ --track-display-wide: .12em;/* h1 caps, hero only */ --track-label: .24em; /* eyebrows, nav */ --track-nav: .14em; --track-button: .20em; --track-mono: .06em; --track-mono-label: .16em; /* fluid scale: min at 360px, max at 1240px */ --fs-display-1: clamp(40px, 6vw, 86px); /* hero name */ --fs-display-2: clamp(28px, 3.2vw, 44px); /* section titles, sentence case */ --fs-display-3: clamp(20px, 2.4vw, 30px); /* hero subtitle, italic */ --fs-tile: 21px; /* v7: tile title under the photo, serif, sentence case */ --fs-tile-small: 19px; --fs-figure: clamp(30px, 3.4vw, 46px); /* the market-at-a-glance numbers */ --fs-quote: clamp(24px, 2.6vw, 34px); --fs-lede: 17px; --fs-body: 16px; --fs-small: 15px; --fs-caption: 13px; --fs-label: 12px; --fs-label-small: 11px; --fs-micro: 10px; --lh-body: 1.6; --lh-tight: 1.15; --lh-display: 1; /* ---- space (4px base) ---- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-9: 40px; --s-10: 48px; --s-12: 60px; --s-14: 70px; --s-16: 80px; --s-18: 90px; --s-20: 100px; --section-y: var(--s-18); /* vertical padding of a standard section */ --section-y-tight: var(--s-16); --gutter: var(--s-10); /* page side padding, desktop */ --gutter-mobile: var(--s-5); --gap-tiles: var(--s-6); --gap-places: var(--s-5); --gap-cards: var(--s-6); --rule-inset: var(--s-5); /* copy sits this far right of the plat hairline */ /* ---- shape ---- */ --radius: 0; /* the site is square-cornered by design */ --radius-pill: 999px; /* social dots, arrows */ --border: 1px; --border-strong: 3px; /* notice left rule */ /* ---- measure & containers ---- */ --container: 1240px; --measure: 36em; /* lede / paragraph max width */ --measure-narrow: 26em; /* tile caption line */ --hero-h: min(86vh, 820px); --hero-h-min: 540px; --band-h-min: 520px; --tile-wide-ratio: 21 / 9; /* the spanning places tile, sized so its caption lands near its neighbours' */ --cta-h-min: 540px; --header-h: 82px; --mark-w: 52px; /* the Montana menu mark */ --mark-h: 33px; --close-size: 46px; /* the overlay close control (D12), the mark's tap target */ /* ---- motion ---- */ --dur-fast: .2s; --dur-base: .4s; --dur-slow: .7s; --dur-reveal: .8s; --dur-tape: .9s; /* ledger rows drawing in like a tape */ --dur-hero-drift: 28s; --hero-drift-scale: 1.09; --tile-zoom: 1.04; --reveal-offset: 18px; --ease: cubic-bezier(.2,.6,.2,1); /* ---- z ---- */ --z-header: 5; --z-overlay: 50; color-scheme: light; } /* ---- Site family -------------------------------------------------------------- Two businesses, one component set. Stamp data-site on alongside data-theme. "sales" is holmesrea.com (this file's :root). "appraisal" is Holmes Real Estate Appraisal Co.: no brokerage burgundy anywhere, a cooler and greyer ground, the same markup. Nothing below this line is a component rule — only token overrides. */ [data-site="sales"] { /* the default, restated so the scope is explicit in markup and in devtools */ --brand-accent: var(--purewest); --brand-accent-deep: var(--purewest-deep); --brand-accent-tint: var(--purewest-tint); --accent: var(--larch); --accent-ink: var(--larch-ink); --accent-on-inverse: var(--larch-tint); } [data-site="appraisal"] { /* cooler, greyer, no burgundy. The brokerage tokens still exist so components that reference them keep working; here they resolve to the same slate as everything else. */ --slate: #35434B; --slate-deep: #222C32; --slate-tint: #C3CFD6; --steel: #4E7183; /* the appraisal site's own action hue: Flathead water, greyed */ --steel-deep: #3C5967; --snow: #F2F4F5; --spruce: #232B30; --ink-black: #1C2327; --moss: #556066; --line-grey: #D3D8DB; --brand-accent: var(--slate); --brand-accent-deep: var(--slate-deep); --brand-accent-tint: var(--slate-tint); --on-brand-accent: var(--white); --accent: var(--steel); --accent-hover: var(--steel-deep); --accent-ink: #2F4A57; --accent-on-inverse: #B9CCD6; --on-accent: var(--white); --accent-soft: rgba(78,113,131,.10); --focus: #2F4A57; --scrim: rgba(22,30,34,.44); --scrim-band: rgba(22,30,34,.52); --scrim-cta: rgba(22,30,34,.58); } /* ---- Theme scopes ------------------------------------------------------------- A theme is a token override, nothing else. Stamp data-theme on . "longvalley" is the default (the :root block above). Below: two worked examples proving the components re-skin without edits. Delete or extend freely. */ /* Straight Talk: cool white, charcoal, barn red, condensed sans. */ [data-theme="straight"] { --snow: #F4F5F3; --spruce: #161A1D; --ink-black: #161A1D; --moss: #4B5258; --line-grey: #B9BEC1; --purewest: #9A3323; --purewest-deep: #7E281B; --purewest-tint: #E5B7AE; --larch: #C08A2E; --larch-deep: #9C6E20; --larch-ink: #6E4C13; --larch-tint: #E2C58F; --font-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif; --font-body: "Public Sans", system-ui, sans-serif; --weight-display: 700; --weight-display-strong: 800; --track-display: -.01em; --track-display-wide: -.01em; --fs-display-1: clamp(52px, 8.2vw, 112px); } /* Dark: the same site after sunset. Optional; ship only if the client wants it. */ [data-theme="dark"] { --bg: #141C19; --bg-alt: #1A2420; --surface: #1F2A26; --ink: #E6ECEA; --ink-muted: #A9B6B1; --ink-quiet: #8A9793; --line: #2E3A35; --line-strong: #E6ECEA; --line-hair: #2E3A35; --accent-ink: var(--larch-tint); --scrim: rgba(10,16,14,.5); color-scheme: dark; }