/* --------------------------------------------------------------------------- THEME LAYER (shared — never varies per client). Loaded AFTER styles.css + brand.css on every page. config.js resolves the tenant's preset from themes.js and writes the --color-* / --font-* / --radius-* custom properties inline on :root. The fallback values below reproduce the classic Equity Merchants look, so a tenant with no `theme` set renders exactly as before. Button style is driven by body[data-style="solid" | "outline" | "pill"], also set by config.js from the preset. --------------------------------------------------------------------------- */ :root { --color-primary: #c1121f; --color-primary-dark: #780000; --color-secondary: #003049; --color-text: #1d1d1d; --color-bg: #fdf7f2; --color-surface: #fffaf5; --font-heading: "DM Sans", sans-serif; --font-body: "DM Sans", sans-serif; --radius-button: 999px; --radius-card: 22px; --radius-image: 14px; /* Derived tokens — everything below follows the six colors above, so a tenant override of --color-primary re-tints all of it automatically. */ --color-accent-soft: color-mix(in srgb, var(--color-primary) 22%, #fff4e8); --color-sky: color-mix(in srgb, var(--color-secondary) 55%, #ffffff); --color-secondary-dark: color-mix(in srgb, var(--color-secondary), #000000 28%); --color-secondary-deep: color-mix(in srgb, var(--color-secondary), #000000 55%); --radius-field: min(var(--radius-button), 16px); /* Element-level hooks — follow the palette by default, individually tweakable per tenant via themeOverrides.cssVars in client-config.js. */ --nav-bg: color-mix(in srgb, var(--color-bg) 92%, transparent); /* Header/nav text — dark by default to stay readable on the light --nav-bg above. The mobile dropdown keeps its own dark panel + white links. */ --nav-link-color: var(--color-secondary); --nav-link-hover-bg: color-mix(in srgb, var(--color-secondary) 8%, transparent); /* Hero text — the home hero background (brand.css) is light, so headings default to the deep secondary and copy to a muted text color. The admin/listings heroes keep their dark background + white text. */ --hero-heading-color: var(--color-secondary); --hero-copy-color: color-mix(in srgb, var(--color-text) 72%, #8896a2); --logo-width: 168px; --logo-height: 112px; --logo-width-mobile: 122px; --logo-height-mobile: 82px; /* Subtle wash applied over hero/listing images (see .image-tint below). Transparent by default so the classic look is untouched; config.js sets the real primary-color tint when a theme preset is active. */ --image-tint: transparent; } /* Typography — headings use the preset heading font, everything else inherits the body font set on in styles.css. */ h1, h2, h3, h4, h5, h6, .section-heading, .floating-stat, .footer-brand { font-family: var(--font-heading); } .site-footer .footer-brand { color: #ffffff; } .site-footer .footer-brand-stack { justify-items: start; gap: 0.85rem; } .site-footer .footer-brand-stack p { margin: 0; max-width: 20rem; color: color-mix(in srgb, #ffffff 72%, var(--color-sky)); } .site-footer .footer-logo { width: min(var(--logo-width), 100%); height: auto; max-width: 100%; max-height: var(--logo-height); } @media (max-width: 767px) { .site-footer .footer-logo { width: min(var(--logo-width-mobile), 100%); max-height: var(--logo-height-mobile); } } /* --------------------------------------------------------------------------- Button modes. styles.css provides the shared .btn box model; these rules only swap the skin. With no data-style attribute (no theme configured), the classic styles.css look applies untouched. --------------------------------------------------------------------------- */ /* solid — flat fill, darkens on hover */ body[data-style="solid"] .btn-primary { background: var(--color-primary); box-shadow: 0 12px 26px color-mix(in srgb, var(--color-primary) 24%, transparent); } body[data-style="solid"] .btn-primary:hover, body[data-style="solid"] .btn-primary:focus-visible { background: var(--color-primary-dark); } /* outline — transparent fill, 2px accent border, fills on hover */ body[data-style="outline"] .btn-primary { background: color-mix(in srgb, var(--color-surface) 65%, transparent); border: 2px solid var(--color-primary); color: var(--color-primary); box-shadow: none; } body[data-style="outline"] .btn-primary:hover, body[data-style="outline"] .btn-primary:focus-visible { background: var(--color-primary); color: #ffffff; } body[data-style="outline"] .btn-secondary { border-width: 2px; } /* pill — fully rounded, gradient fill */ body[data-style="pill"] .btn, body[data-style="pill"] .pagination-page { border-radius: 999px; } body[data-style="pill"] .btn-primary { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); box-shadow: 0 12px 26px color-mix(in srgb, var(--color-primary) 26%, transparent); } /* --------------------------------------------------------------------------- Image tint. A subtle primary-color wash over photography so images sit inside the tenant palette. Applied automatically to the image containers the site already renders (no markup/JS changes needed); .image-tint is the same treatment as a reusable utility for future markup. --------------------------------------------------------------------------- */ .image-tint, .listing-image, .detail-gallery-card, .modal-gallery-main { position: relative; } .image-tint::before, .listing-image::before, .detail-gallery-card::before, .modal-gallery-main::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--image-tint); pointer-events: none; } /* Keep interactive/labeled layers above the tint wash. */ .listing-image::after, .modal-gallery-main .modal-gallery-controls { z-index: 2; }