) to scope. ========================================================================== */ :root { /* ---- Shared spacing scale ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ---- Shared breakpoints (for reference in JS/comments; media queries can't consume vars) ---- */ --bp-mobile: 480px; --bp-tablet: 768px; --bp-desktop: 1024px; --bp-wide: 1440px; /* ---- Shared containers ---- */ --container-narrow: 720px; --container-content: 960px; --container-default: 1200px; --container-wide: 1320px; --container-full-bleed: 1440px; /* ---- Shared radius scale ---- */ --radius-none: 0px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; --radius-circle: 50%; /* ---- Shared shadows ---- */ --shadow-sm: 0 1px 2px rgba(15, 15, 15, 0.06); --shadow-md: 0 4px 12px rgba(15, 15, 15, 0.08); --shadow-lg: 0 12px 32px rgba(15, 15, 15, 0.12); --shadow-hero-overlay: linear-gradient(to top, rgba(15,15,15,0.85) 0%, rgba(15,15,15,0.35) 55%, rgba(15,15,15,0.05) 100%); /* ---- Shared z-index scale ---- */ --z-base: 0; --z-sticky-header: 100; --z-dropdown: 200; --z-sticky-cta-mobile: 300; --z-modal-overlay: 900; --z-modal: 1000; --z-toast: 1100; /* ---- Shared grid / motion ---- */ --grid-columns-desktop: 12; --grid-columns-tablet: 8; --grid-columns-mobile: 4; --grid-gutter: 24px; --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 320ms; --motion-easing: cubic-bezier(0.2, 0, 0, 1); /* ---- Default brand = PCH (fallback if data-brand is missing) ---- */ --color-primary: #0B1B2B; --color-primary-hover: #152A40; --color-accent: #D98E3E; --color-surface: #FFFFFF; --color-surface-alt: #F4EFE7; --color-text: #111315; --color-text-muted: #6B6B6B; --color-text-inverse: #FFFFFF; --color-border: #E3DFD6; --color-success: #3C8558; --color-warning: #D98E3E; --color-error: #B23A3A; --font-heading: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --fs-hero: 64px; --lh-hero: 1.05; --fw-hero: 800; --fs-h1: 48px; --lh-h1: 1.1; --fw-h1: 800; --fs-h2: 32px; --lh-h2: 1.2; --fw-h2: 700; --fs-h3: 22px; --lh-h3: 1.3; --fw-h3: 700; --fs-body: 16px; --lh-body: 1.6; --fw-body: 400; --fs-caption: 13px; --lh-caption: 1.4; --fw-caption: 500; --hero-height-desktop: 720px; --hero-height-mobile: 480px; --nav-height: 72px; --topbar-height: 40px; --footer-height: 420px; --card-padding: 16px; --card-radius: 8px; --cta-bg: #111315; --cta-radius: 999px; --button-height: 48px; } /* ========================================================================== PCH — Park City Homes · parkcityhomes.com Luxury ski-town: dark navy hero, amber accent, bold condensed sans, black CTA ========================================================================== */ [data-brand="pch"] { --color-primary: #0B1B2B; --color-primary-hover: #152A40; --color-accent: #D98E3E; --color-surface: #FFFFFF; --color-surface-alt: #F4EFE7; --color-text: #111315; --color-text-muted: #6B6B6B; --color-text-inverse: #FFFFFF; --color-border: #E3DFD6; --color-success: #3C8558; --color-warning: #D98E3E; --color-error: #B23A3A; --font-heading: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --fs-hero: 64px; --lh-hero: 1.05; --fw-hero: 800; --fs-h1: 48px; --lh-h1: 1.1; --fw-h1: 800; --fs-h2: 32px; --lh-h2: 1.2; --fw-h2: 700; --fs-h3: 22px; --lh-h3: 1.3; --fw-h3: 700; --fs-body: 16px; --lh-body: 1.6; --fw-body: 400; --fs-caption: 13px; --lh-caption: 1.4; --fw-caption: 500; --hero-height-desktop: 720px; --hero-height-mobile: 480px; --nav-height: 72px; --topbar-height: 40px; --footer-height: 420px; --card-padding: 16px; --card-radius: 8px; --cta-bg: #111315; --cta-radius: 999px; --button-height: 48px; } /* ========================================================================== UTRD — Utah Real Estate Directory · utahrealestatedirectory.com Statewide MLS authority: black nav, muted gold accent, data-dense grids ========================================================================== */ [data-brand="utrd"] { --color-primary: #111111; --color-primary-hover: #2A2A2A; --color-accent: #C9A961; --color-surface: #FFFFFF; --color-surface-alt: #F6F4EF; --color-text: #1A1A1A; --color-text-muted: #6B6B6B; --color-text-inverse: #FFFFFF; --color-border: #E2DFD6; --color-success: #3C8558; --color-warning: #C9A961; --color-error: #B23A3A; --font-heading: 'Inter', -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --fs-hero: 56px; --lh-hero: 1.1; --fw-hero: 800; --fs-h1: 40px; --lh-h1: 1.15; --fw-h1: 700; --fs-h2: 28px; --lh-h2: 1.25; --fw-h2: 700; --fs-h3: 20px; --lh-h3: 1.3; --fw-h3: 600; --fs-body: 15px; --lh-body: 1.55; --fw-body: 400; --fs-caption: 12px; --lh-caption: 1.4; --fw-caption: 500; --hero-height-desktop: 640px; --hero-height-mobile: 440px; --nav-height: 72px; --topbar-height: 40px; --footer-height: 440px; --card-padding: 16px; --card-radius: 8px; --cta-bg: #111111; --cta-radius: 999px; --button-height: 44px; /* UTRD-specific extensions */ --sidebar-filter-width: 280px; --mls-badge-active-bg: #2F6F4E; --mls-badge-pending-bg: #B98A2E; } /* ========================================================================== SG — St George Homes · sthgeorgehomesforsale.com Red-rock desert / 55+ lifestyle: brown-maroon nav, terracotta accent ========================================================================== */ [data-brand="sg"] { --color-primary: #3A2418; --color-primary-hover: #4E3020; --color-accent: #D97D4F; --color-surface: #FFFFFF; --color-surface-alt: #F3E9DD; --color-text: #20140D; --color-text-muted: #6B5B4F; --color-text-inverse: #FFFFFF; --color-border: #E6D9C7; --color-success: #3C8558; --color-warning: #D97D4F; --color-error: #B23A3A; --font-heading: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --fs-hero: 60px; --lh-hero: 1.08; --fw-hero: 800; --fs-h1: 44px; --lh-h1: 1.15; --fw-h1: 800; --fs-h2: 30px; --lh-h2: 1.2; --fw-h2: 700; --fs-h3: 21px; --lh-h3: 1.3; --fw-h3: 700; --fs-body: 16px; --lh-body: 1.6; --fw-body: 400; --fs-caption: 13px; --lh-caption: 1.4; --fw-caption: 500; --hero-height-desktop: 680px; --hero-height-mobile: 460px; --nav-height: 72px; --topbar-height: 40px; --footer-height: 420px; --card-padding: 16px; --card-radius: 8px; --cta-bg: #20140D; --cta-radius: 999px; --button-height: 48px; } /* ========================================================================== IUR — Inside Utah Real Estate · insideutahrealestate.com Editorial trust hub: crimson/gold/paper/ink, didone serif, hairline rules AUTHORITATIVE SOURCE: IUR_Brand_Style_Guide.pdf (Build 04) ========================================================================== */ [data-brand="iur"] { --color-primary: #8B1E2C; /* Crimson */ --color-primary-hover: #6E1622; /* Crimson deep */ --color-accent: #B8924C; /* Gold */ --color-surface: #F7F3EB; /* Paper */ --color-surface-alt: #EDE7DA; /* Paper 2 */ --color-text: #0F0F0F; /* Ink */ --color-text-muted: #6B6B6B; /* Muted */ --color-text-inverse: #FFFFFF; --color-border: #D8D4CC; /* Rule */ --color-success: #3C8558; --color-warning: #B8924C; --color-error: #8B1E2C; /* IUR extended palette (verbatim from style guide p.8-9) */ --color-paper-3: #EFE7D6; --color-cream-soft: #FAF6EE; --color-crimson-soft: #B4364A; --color-crimson-bg: #F0D9DC; --color-gold-soft: #D6B97A; --color-gold-faint: #F0D27C; --color-text-default: #2A2A2A; --color-text-faint: #9A958C; --font-heading: 'Bodoni Moda', 'Playfair Display', Georgia, serif; --font-body: 'Source Serif 4', Georgia, serif; --font-ui-sans: 'Inter', -apple-system, sans-serif; --font-kicker-condensed: 'Oswald', 'Arial Narrow', sans-serif; --font-italic-emphasis: 'Playfair Display', Georgia, serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* Type scale verbatim from style guide p.11 (pt values treated as px) */ --fs-hero: 72px; --lh-hero: 1.05; --fw-hero: 400; /* never bold the wordmark */ --fs-h1: 44px; --lh-h1: 1.15; --fw-h1: 400; --fs-h2: 32px; --lh-h2: 1.2; --fw-h2: 400; --fs-h3: 22px; --lh-h3: 1.3; --fw-h3: 400; --fs-body: 16px; --lh-body: 1.6; --fw-body: 400; --fs-caption: 13px; --lh-caption: 1.4; --fw-caption: 400; --fs-kicker: 9px; --lh-kicker: 1.3; --fw-kicker: 500; --fs-lead: 22px; --lh-lead: 1.4; --fw-lead: 400; --hero-height-desktop: 720px; --hero-height-mobile: 560px; --nav-height: 56px; /* masthead, per style guide p.13 */ --topbar-height: 22px; /* promo topbar, per style guide p.13 */ --footer-height: 480px; --card-padding: 24px; --card-radius: 0px; /* editorial hairline-border cards, no rounding */ --cta-bg: #8B1E2C; --cta-secondary-bg: #F7F3EB; --cta-radius: 4px; --button-height: 44px; --statbar-height: 72px; --hairline-rule-width: 0.6px; --section-underline-width: 1.6px; } /* ========================================================================== Utility classes consuming the tokens (optional convenience layer) ========================================================================== */ .tpl-container { max-width: var(--container-default); margin-inline: auto; padding-inline: var(--space-5); } .tpl-container--wide { max-width: var(--container-wide); } .tpl-container--narrow { max-width: var(--container-narrow); } .hero { min-height: var(--hero-height-desktop); background-color: var(--color-primary); color: var(--color-text-inverse); } @media (max-width: 768px) { .hero { min-height: var(--hero-height-mobile); } } .btn { display: inline-flex; align-items: center; justify-content: center; height: var(--button-height); border-radius: var(--cta-radius); font-family: var(--font-body); font-weight: 600; transition: background-color var(--motion-base) var(--motion-easing); } .btn--primary { background-color: var(--cta-bg); color: var(--color-text-inverse); } .btn--secondary { background-color: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); } .btn--ghost { background-color: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); } .card { background-color: var(--color-surface); border-radius: var(--card-radius); padding: var(--card-padding); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }