/* * tapestry-brand.css * Tapestry Residences — Chevron Island, Gold Coast, Australia * * ── CLIENT-UPLOADED-FONTS MODEL ───────────────────────────────────────────── * This file is the single swap point for Tapestry's typography. * * HOW IT WORKS: * 1. The @font-face blocks below register the two brand typefaces from * files the client supplies in assets/brand/fonts/. * 2. Two CSS custom properties bind them to the design system: * --font-project → Gotham Book/Bold (UI, body copy, buttons, labels) * --font-project-display → Domaine Display Italic (elegant headlines, sub-heads) * 3. The [data-project="tapestry"] token block overrides the canonical * --font-display-elegant and --font-body vars so the entire page — * every button, CTA, project headline, and body paragraph — picks up * the brand typefaces without touching a single line of component CSS. * * TO SWAP A CLIENT'S FONTS: * a. Drop the client's font files into assets/brand/fonts/ (replacing or * adding alongside the originals). * b. Update the src: url("…") paths in the @font-face rules below. * c. Update --font-project and --font-project-display values. * The rest of the app inherits automatically. * * ── PALETTE REFERENCE ─────────────────────────────────────────────────────── * PRIMARY * Emerald Green #163029 (PMS 5535) — deep forest bg, dominant brand colour * Pale Stone #e8e5de (PMS 9043) — warm off-white, secondary bg / text * Soft Cream #ebe2d6 (PMS 9240 30% Tint) — warm background * White #ffffff — clean ground * * SECONDARY * Sage #d7d9c6 (PMS 9585) — muted green, accent tint * Dusty Peach #f4e4de (PMS 9226) — soft blush * Dusty Blue #e2e7e3 (PMS 9042) — cool pale seafoam * * BRAND TONE: Nature-led luxury. Sophisticated. Understated. Artisan. * "Where art meets living." * ──────────────────────────────────────────────────────────────────────────── */ /* ── @font-face declarations ─────────────────────────────────────────────── */ /* Paths are relative to a page at design-system/sales/tapestry/ */ @font-face { font-family: 'Domaine Display'; src: url('assets/brand/fonts/DomaineDisplay-Italic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Gotham'; src: url('assets/brand/fonts/Gotham-Book.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Gotham'; src: url('assets/brand/fonts/Gotham-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } /* ── Project token block ─────────────────────────────────────────────────── */ /* * Mirrors the structure of [data-project="riviera"] in 02-exterior.canonical.html. * A page simply needs — no other changes required. * * Accent system: * --proj-accent → mid-tone action colour (Pale Stone — used for CTAs on dark bg) * --proj-accent-soft → hover/lighter variant * --proj-accent-bg → translucent tint for hover states / badges * --proj-deep → deep forest green (dominant bg, matches brand cover) * --proj-on-deep → text/icon colour on deep bg (Soft Cream) * * Font tokens: * --font-project → Gotham; overrides --font-body + --font-display * for all UI text, labels, buttons, nav * --font-project-display → Domaine Display Italic; overrides * --font-display-elegant for hero headlines, * sub-headings, italic pull-quotes * * Buttons/CTAs explicitly inherit --font-project (Gotham) via the rule below, * which proves the client-upload mechanism — replace the .ttf, rebind the var, * and every button in the app repaints. */ [data-project="tapestry"] { /* ── Identity ──────────────────────────────────────────── */ --proj-name: 'Tapestry Residences'; /* ── Accent palette ────────────────────────────────────── */ /* Primary action accent: Pale Stone (#e8e5de). Chosen because it lifts off the deep Emerald Green bg without introducing a competing hue — restrained luxury, per brand tone. */ --proj-accent: #e8e5de; /* Pale Stone — PMS 9043 */ --proj-accent-soft: #f0ede7; /* Pale Stone lighter tint */ --proj-accent-bg: rgba(232, 229, 222, 0.12); /* hover / badge wash */ /* Deep colour — Emerald Green as dominant surface */ --proj-deep: #163029; /* Emerald Green — PMS 5535 */ --proj-on-deep: #ebe2d6; /* Soft Cream — readable on deep */ /* ── Extended palette (available for layout zones) ─────── */ --proj-soft-cream: #ebe2d6; /* PMS 9240 30% Tint — warm bg */ --proj-sage: #d7d9c6; /* PMS 9585 — secondary accent tint */ --proj-dusty-peach: #f4e4de; /* PMS 9226 — soft blush */ --proj-dusty-blue: #e2e7e3; /* PMS 9042 — cool pale seafoam */ /* ── Typography ─────────────────────────────────────────── */ /* * --font-project binds to Gotham (sans-serif workhorse). * It overrides --font-body and --font-display so all UI copy, * navigation, labels, and buttons use the brand face automatically. * * --font-project-display binds to Domaine Display Italic (high-contrast * editorial serif, italic only — this is the only weight supplied). * It overrides --font-display-elegant so hero names, project sub-heads, * and italic feature lines all use the brand display face. */ --font-project: 'Gotham', 'Helvetica Neue', Arial, sans-serif; --font-project-display: 'Domaine Display', Georgia, 'Times New Roman', serif; /* Override canonical system vars so component CSS inherits transparently */ --font-body: var(--font-project); --font-display: var(--font-project); --font-display-elegant: var(--font-project-display); } /* ── Explicit bindings that prove the swap mechanism ────────────────────── */ /* * These rules are scoped to [data-project="tapestry"] so they only activate * when the token block above is in play. They demonstrate that buttons, CTAs, * and project headlines visibly change typeface when a client's fonts are * swapped into assets/brand/fonts/ — the design system token chain does the * rest automatically. */ /* Buttons + CTA elements: Gotham Book, spaced caps — brand's UI voice */ [data-project="tapestry"] button, [data-project="tapestry"] .btn, [data-project="tapestry"] .cta, [data-project="tapestry"] .action, [data-project="tapestry"] [role="button"] { font-family: var(--font-project); font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; } /* Project headline / display: Domaine Display Italic — editorial elegance */ [data-project="tapestry"] .proj-headline, [data-project="tapestry"] .info-panel .name, [data-project="tapestry"] .project-title, [data-project="tapestry"] .display-heading, [data-project="tapestry"] h1.elegant, [data-project="tapestry"] .sub-heading-italic { font-family: var(--font-project-display); font-style: italic; font-weight: 400; } /* Project body copy: Gotham Book regular — clear, readable, unobtrusive */ [data-project="tapestry"] .proj-body, [data-project="tapestry"] .info-panel .desc, [data-project="tapestry"] .project-copy, [data-project="tapestry"] p { font-family: var(--font-project); font-weight: 400; }