/** * Theme T4 — port of legacy "Temp1" luxury layout. * * Identity: * - Near-black navy ground (#0a0e1a) with white paper for content * - Warm gold accent (#b8975a) — buttons, dividers, hover states * - Sharp serif headlines (Playfair Display) + Montserrat sans body * - Heavy uppercase tracking on labels / eyebrows * - Transparent-on-hero navbar that solidifies on scroll * * Scoped to `[data-theme="t4"]` on . Other tenants are * unaffected. This file is co-located with the template_4 chrome and * imported only from template_4/Fonts.tsx so Next's per-module CSS * chunking ships these tokens only to t4 tenants. */ [data-theme='t4'] { /* Surface */ --t4-paper: #ffffff; --t4-paper-soft: #fafafa; --t4-navy: var(--color-brand-primary, #0a0e1a); /* near-black navy — hero, footer */ /* --t4-navy: #0a0e1a; near-black navy — hero, footer */ --t4-navy-light: #1a1f2e; --t4-ink: #1a1a1a; /* body text on paper */ --t4-line: #e5e5e5; --t4-line-soft: rgba(0, 0, 0, 0.06); /* Brand */ --t4-gold: var(--color-brand-accent, #b8975a); /* warm gold accent */ --t4-gold-dark: var(--color-brand-accent-dark, #8b6914); --t4-gold-light: var(--color-brand-accent-light, #d4b07a); /* theme old colors */ /* --t4-gold: #b8975a; */ /* --t4-gold-dark: #8b6914; */ /* --t4-gold-light: #d4b07a; */ /* Text scale */ --t4-muted: #4b5563; /* gray-600, AA on white + paper-soft */ --t4-muted-soft: #6b7280; --t4-on-navy: #f5f5f5; /* body text when sitting on navy */ --t4-on-navy-muted: rgba(245, 245, 245, 0.7); /* Per-tenant accent — defaults to gold; ThemeStyles applies * tenant overrides on :root which still cascade to here. */ --t4-accent: var(--color-brand-accent, var(--t4-gold, #b8975a)); --t4-accent-dark: var(--color-brand-accent-dark, var(--t4-gold-dark, #8b6914)); /* Typography — reference next/font's variable bindings (set by * THEME4_FONT_CLASSES in template_4/Fonts.tsx). System fallbacks ensure * graceful degradation if the font fails to load. */ --t4-font-display: var(--t4-font-playfair), Georgia, 'Times New Roman', serif; --t4-font-body: var(--t4-font-montserrat), system-ui, -apple-system, sans-serif; --t4-font-nav: var(--t4-font-playfair), Georgia, 'Times New Roman', serif; --t4-tracking-wide: 0.18em; --t4-tracking-widest: 0.25em; /* Layout */ --t4-section-y: clamp(35px, 3vw, 58px); --t4-max-w: 1320px; --t4-max-w-content: 92%; /* Radii — sharper luxury than corporate V3 pills */ --t4-radius-sm: 4px; --t4-radius-md: 6px; --t4-radius-lg: 8px; --t4-radius-pill: 999px; /* Property card surfaces — added for PropertyCardT4 */ --t4-shadow-card: 0 6px 24px rgba(10, 14, 26, 0.08); --t4-shadow-card-hover: 0 14px 36px rgba(10, 14, 26, 0.16); --t4-card-overlay: rgba(10, 14, 26, 0.18); /* subtle photo darkening */ --t4-card-icon-bg: rgba(255, 255, 255, 0.96); /* heart/share tile — solid enough on bright photos */ /* ─────────────────────────────────────────────────────────────────── * V3 section compatibility aliases. * HomeRendererTheme4 reuses V3 section components for behavior * (CMS order, hide-when-empty, shared forms). These aliases remap * --v3-* / .v3-* vocabulary onto the luxury T4 palette so the UI * reads as Temp4 (Playfair + gold) while logic stays Temp3. * ─────────────────────────────────────────────────────────────────── */ --v3-paper: var(--t4-paper); --v3-panel: var(--t4-paper-soft); --v3-line: var(--t4-line); --v3-line-soft: var(--t4-line-soft); --v3-primary: var(--t4-navy); --v3-primary-dark: #05070f; --v3-primary-light: var(--t4-navy-light); --v3-accent: var(--t4-gold); --v3-accent-dark: var(--t4-gold-dark); --v3-accent-light: var(--t4-gold-light); --v3-cyan: var(--t4-gold); --v3-cyan-dark: var(--t4-gold-dark); --v3-ink: var(--t4-ink); --v3-muted: var(--t4-muted); --v3-muted-soft: var(--t4-muted-soft); --v3-status-sale: #ef4444; --v3-status-lease: #3b82f6; --v3-status-sold: #6b7280; --v3-font-sans: var(--t4-font-body); --v3-font-display: var(--t4-font-display); --v3-tracking-wide: var(--t4-tracking-wide); --v3-tracking-widest: var(--t4-tracking-widest); --v3-section-y: var(--t4-section-y); --v3-max-w: var(--t4-max-w); --v3-radius-sm: var(--t4-radius-sm); --v3-radius-md: var(--t4-radius-md); --v3-radius-lg: var(--t4-radius-lg); --v3-radius-pill: var(--t4-radius-pill); --v3-shadow-card: var(--t4-shadow-card); --v3-shadow-card-hover: var(--t4-shadow-card-hover); /* Theme-1 brand var overrides — keep gold/navy from leaking when * shared components reference --color-brand-* directly. */ --color-brand-primary: var(--t4-navy); --color-brand-primary-light: var(--t4-navy-light); --color-brand-secondary: var(--t4-paper-soft); --color-brand-accent: var(--t4-gold); --color-brand-accent-light: var(--t4-gold-light); --color-brand-accent-dark: var(--t4-gold-dark); --color-brand-bg: var(--t4-paper); --color-brand-border: var(--t4-line); --color-brand-text: var(--t4-ink); /* T4's accent is warm gold #b8975a — white-on-gold only gets * ~2.8 : 1 (fails AA). Dark navy text on gold ~6.3 : 1 (passes). * The luxury aesthetic actually wants dark text on gold anyway, * so this is both an a11y fix and a brand polish. */ --color-brand-on-accent: var(--t4-ink); /* Same dark-text rule for accent-dark — T4 gold-dark stays * gold-tone family, white still fails. */ --color-brand-on-accent-dark: var(--t4-ink); /* Detail-page surface override — T4 uses Playfair as its display * font (different serif from T1's Cormorant). Shared section * components (tour card, agent card, FAQ) pick these up when * rendered inside T4DetailPage. */ --detail-display-font: var(--t4-font-display); --detail-card-bg: var(--t4-paper); --detail-card-border: var(--t4-line); --detail-card-radius: var(--t4-radius-sm); --detail-skeleton: var(--t4-line); } [data-theme='t4'] body { background: var(--t4-paper); color: var(--t4-ink); font-family: var(--t4-font-body); font-weight: 400; -webkit-font-smoothing: antialiased; } /* ───────────────────────────────────────────────────────────────────── * Utility classes — Temp1 luxury vocabulary * ───────────────────────────────────────────────────────────────────── */ [data-theme='t4'] .t4-eyebrow { font-family: var(--t4-font-body); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: var(--t4-tracking-widest); color: var(--t4-gold); } [data-theme='t4'] .t4-serif { font-family: var(--t4-font-display); font-weight: 600; letter-spacing: -0.005em; color: var(--t4-navy); } [data-theme='t4'] .t4-rule { display: block; width: 64px; height: 2px; background: var(--t4-gold); margin: 0 auto; } /* Buttons */ [data-theme='t4'] .t4-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; background: var(--t4-gold); color: #1a1a1a; font-family: var(--t4-font-body); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--t4-tracking-wide); border-radius: 4px; transition: background-color 0.25s ease, color 0.25s ease; } [data-theme='t4'] .t4-btn:hover { background: var(--t4-gold-dark); color: #fff; } [data-theme='t4'] .t4-btn--ghost { background: transparent; color: var(--t4-paper); border: 1.5px solid var(--t4-paper); } [data-theme='t4'] .t4-btn--ghost:hover { background: var(--t4-paper); color: var(--t4-navy); } /* V3 utility classes under T4 — same markup, luxury styling */ [data-theme='t4'] section.v3-section { padding-top: var(--t4-section-y) !important; padding-bottom: var(--t4-section-y) !important; } [data-theme='t4'] div:has(> section.v3-section) + div:has(> section.v3-section) > section.v3-section, [data-theme='t4'] section.v3-section + section.v3-section { padding-top: calc(var(--t4-section-y) * 0.4) !important; } /* CMS Our Services HTML often ships its own large vertical padding — * collapse the band so it doesn't stack with the previous section. */ [data-theme='t4'] section.t4-services-section.v3-section { padding-top: calc(var(--t4-section-y) * 0.25) !important; padding-bottom: calc(var(--t4-section-y) * 0.45) !important; } [data-theme='t4'] section.v3-section + section.t4-services-section.v3-section { padding-top: 0 !important; } [data-theme='t4'] .v3-eyebrow { font-family: var(--t4-font-body); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--t4-tracking-widest); color: var(--t4-gold); } [data-theme='t4'] .v3-section-title { font-family: var(--t4-font-display); font-size: clamp(24px, 2.8vw, 36px); font-weight: 600; line-height: 1.2; color: var(--t4-navy); letter-spacing: -0.01em; } [data-theme='t4'] .v3-rule { height: 2px; width: 64px; background: var(--t4-gold); border-radius: 0; } [data-theme='t4'] .t4-btn, [data-theme='t4'] .v3-btn, [data-theme='t4'] .v3-btn--navy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; background: var(--color-brand-accent, var(--t4-gold)) !important; color: #ffffff !important; font-family: var(--t4-font-body); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--t4-tracking-wide); border-radius: var(--t4-radius-sm); border: none; transition: background-color 0.25s ease, color 0.25s ease; opacity: 1 !important; } [data-theme='t4'] .t4-btn:hover, [data-theme='t4'] .v3-btn:hover, [data-theme='t4'] .v3-btn--navy:hover { background: var(--color-brand-accent-dark, var(--t4-gold-dark)) !important; color: #ffffff !important; opacity: 1 !important; } [data-theme='t4'] .v3-btn--ghost { background: transparent; color: var(--t4-navy); border: 1px solid var(--t4-gold); transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; opacity: 1 !important; } [data-theme='t4'] .v3-btn--ghost:hover { background: var(--color-brand-accent, var(--t4-gold)) !important; color: #ffffff !important; border-color: var(--color-brand-accent, var(--t4-gold)) !important; opacity: 1 !important; } /* Buy / Sell / Communities under T4 — dynamic brand primary CTA */ [data-theme='t4'] .v3-buysell-html button.bg-theme-primary, [data-theme='t4'] .v3-buysell-html button[class*='bg-theme-primary'] { display: inline-flex !important; align-items: center; justify-content: center; margin: 1.5rem auto 0; width: fit-content; max-width: 100%; padding: 1rem 3rem; background: var(--color-brand-accent, var(--t4-gold)) !important; color: #ffffff !important; font-family: var(--t4-font-body); font-size: 1rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border: none; border-radius: var(--t4-radius-sm); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; opacity: 1 !important; } @media (max-width: 640px) { [data-theme='t4'] .v3-buysell-html button, [data-theme='t4'] .v3-buysell-html button.bg-theme-primary, [data-theme='t4'] .v3-buysell-html button[class*='bg-theme-primary'] { padding: 12px 24px !important; font-size: 12px !important; line-height: 1.2 !important; letter-spacing: var(--t4-tracking-wide, 0.08em) !important; margin: 1.25rem auto 0 !important; width: auto !important; max-width: 100% !important; white-space: nowrap !important; } [data-theme='t4'] .v3-buysell-html button svg { width: 16px !important; height: 16px !important; } } [data-theme='t4'] .v3-buysell-html button.bg-theme-primary:hover, [data-theme='t4'] .v3-buysell-html button[class*='bg-theme-primary']:hover { background: var(--color-brand-accent-dark, var(--t4-gold-dark)) !important; color: #ffffff !important; opacity: 1 !important; } [data-theme='t4'] .v3-card { background: var(--t4-paper); border: 1px solid var(--t4-line); border-radius: var(--t4-radius-lg); overflow: hidden; box-shadow: var(--t4-shadow-card); transition: box-shadow 0.25s ease, transform 0.25s ease; } [data-theme='t4'] .v3-card:hover { box-shadow: var(--t4-shadow-card-hover); transform: translateY(-2px); } [data-theme='t4'] .v3-hero-search > div > div:first-child { border: none; background: var(--t4-paper) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); border-radius: var(--t4-radius-md); } [data-theme='t4'] .v3-hero-search button { background: var(--color-brand-accent, var(--t4-gold)) !important; color: #ffffff !important; transition: background-color 0.2s ease, color 0.2s ease; opacity: 1 !important; } [data-theme='t4'] .v3-hero-search button:hover { background: var(--color-brand-accent-dark, var(--t4-gold-dark)) !important; color: #ffffff !important; opacity: 1 !important; } /* Services (and similar CMS HTML): keep icon + label on one line so * tiles don't balloon vertically on mobile. */ [data-theme='t4'] .s3html .flex.items-center, [data-theme='t4'] .s3html [class*='service'] > *, [data-theme='t4'] .s3html li { align-items: center; } [data-theme='t4'] .s3html i.fa, [data-theme='t4'] .s3html i.fas, [data-theme='t4'] .s3html i.far, [data-theme='t4'] .s3html i.fab, [data-theme='t4'] .s3html svg { display: inline-block; vertical-align: middle; margin-right: 0.5rem; flex-shrink: 0; } [data-theme='t4'] .s3html h3:has(> i), [data-theme='t4'] .s3html h4:has(> i), [data-theme='t4'] .s3html p:has(> i), [data-theme='t4'] .s3html div:has(> i.fa), [data-theme='t4'] .s3html div:has(> i.fas) { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 0.5rem; text-align: left; }