/* ==========================================================================
THE REALTY TEAM — Astra Theme "Additional CSS"
Paste this whole file into: Appearance → Customize → Additional CSS
(or a child-theme style.css, which is the safer long-term home for it).
Brand system carried over from the approved homepage mockup:
- Colors: paper white / grey-steel / brand red
- Type: Playfair Display (display/headings), Public Sans (body/UI),
IBM Plex Mono (labels, eyebrows, badges)
- Single committed light theme — no dark-mode switching
NOTE on Astra's own global color variables (--ast-global-color-0..4):
Astra maps these to Customizer > Global > Colors, but which slot maps to
which on-page role can shift slightly between Astra versions and starter
templates. The block below sets --ast-global-color-* as a best-effort
overlay AND defines a fully independent --trt-* token set that every
custom rule in this file actually uses — so even if Astra's own mapping
drifts, the design stays correct. Confirm the global-color slot mapping
once in your own Customizer preview before relying on it elsewhere.
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,600&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');
/* ---------- 1. Brand tokens ---------- */
:root {
--trt-paper: #FCFBF9;
--trt-paper-alt: #F5F3F0;
--trt-paper-sunken: #ECE9E5;
--trt-ink: #202124;
--trt-ink-soft: #55565B;
--trt-ink-faint: #86878C;
--trt-line: rgba(20,20,22,.10);
--trt-line-strong: rgba(20,20,22,.20);
--trt-brand: #B40101;
--trt-brand-deep: #8A0101;
--trt-brand-tint: rgba(180,1,1,.06);
--trt-steel: #6E7075;
--trt-steel-deep: #46474B;
--trt-steel-tint: #ECEDEE;
--trt-font-display: 'Playfair Display', Georgia, serif;
--trt-font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
--trt-font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
color-scheme: light;
/* Best-effort Astra global-color overlay — verify against your Customizer */
--ast-global-color-0: var(--trt-brand);
--ast-global-color-1: var(--trt-ink);
--ast-global-color-2: var(--trt-steel-deep);
--ast-global-color-3: var(--trt-ink-soft);
--ast-global-color-4: var(--trt-paper);
}
/* ---------- 2. Base page ---------- */
body,
body.ast-separate-container .ast-article-single {
background: var(--trt-paper);
color: var(--trt-ink);
font-family: var(--trt-font-body);
font-size: 16px;
line-height: 1.55;
}
h1, h2, h3, h4,
.entry-title,
.ast-woocommerce-container h1 {
font-family: var(--trt-font-display);
color: var(--trt-ink);
font-weight: 700;
letter-spacing: -0.01em;
}
h1 em, .entry-title em { font-style: italic; color: var(--trt-brand); }
a { color: var(--trt-brand); }
a:hover { color: var(--trt-brand-deep); }
/* Eyebrow / label / badge utility — apply via a Custom HTML block or
an Extra Class Name on a heading widget */
.trt-eyebrow,
.trt-label {
font-family: var(--trt-font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--trt-brand);
}
/* ---------- 3. Header / nav ---------- */
.site-header,
.ast-primary-header-bar {
background: var(--trt-paper);
border-bottom: 1px solid var(--trt-line);
}
.main-header-bar .main-header-bar-navigation .menu-item > .menu-link,
.ast-header-navigation-arrow {
font-family: var(--trt-font-body);
font-weight: 500;
font-size: 15px;
color: var(--trt-ink);
}
.main-header-bar .main-header-bar-navigation .menu-item > .menu-link:hover,
.main-header-bar .current-menu-item > .menu-link {
color: var(--trt-brand);
}
.ast-site-identity .site-title a { font-family: var(--trt-font-display); color: var(--trt-ink); }
.ast-site-identity .site-description { font-family: var(--trt-font-mono); font-size: 11px; letter-spacing: .06em; color: var(--trt-ink-faint); text-transform: uppercase; }
/* Logo container — matches the mockup's white "chip" so a transparent-bg
logo stays legible against any future section tint */
.ast-site-identity .site-logo-img,
.custom-logo-link img {
background: var(--trt-paper);
border-radius: 6px;
}
/* ---------- 4. Buttons ---------- */
.ast-button,
button,
input[type="submit"],
.wp-block-button__link {
background: var(--trt-brand);
color: #fff;
font-family: var(--trt-font-body);
font-weight: 600;
border: none;
border-radius: 6px;
padding: 12px 22px;
transition: background .15s ease;
}
.ast-button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
background: var(--trt-brand-deep);
color: #fff;
}
.trt-button-outline {
background: transparent;
color: var(--trt-brand);
border: 1.5px solid var(--trt-brand);
}
.trt-button-outline:hover { background: var(--trt-brand-tint); color: var(--trt-brand-deep); }
/* ---------- 5. Reusable section/card classes ----------
Add these as "Extra Class Name" on Elementor/Gutenberg containers,
or wrap a Custom HTML block, to match the mockup without editing PHP. */
.trt-section { padding: 72px 0; }
.trt-section-alt { background: var(--trt-paper-alt); }
.trt-section-sunken { background: var(--trt-paper-sunken); }
.trt-card {
background: var(--trt-paper);
border: 1px solid var(--trt-line);
border-radius: 10px;
padding: 28px;
}
.trt-card-tint {
background: var(--trt-brand-tint);
border: 1px solid rgba(180,1,1,.14);
border-radius: 10px;
padding: 28px;
}
/* HAR widget placeholder / live-embed wrapper — put the HAR embed code
(Custom HTML block or WPCode snippet) inside a container with this class
so it inherits consistent spacing and a labeled frame */
.trt-widget-slot {
border: 1px dashed var(--trt-line-strong);
border-radius: 10px;
padding: 18px;
background: var(--trt-paper-alt);
position: relative;
}
.trt-widget-slot::before {
content: attr(data-widget-label);
position: absolute;
top: -11px;
left: 14px;
background: var(--trt-paper);
padding: 0 8px;
font-family: var(--trt-font-mono);
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--trt-ink-faint);
}
/* Trust-strip / feature-row items */
.trt-trust-item {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--trt-font-body);
font-weight: 500;
font-size: 14px;
color: var(--trt-ink-soft);
}
/* Agent card (team roster / agent-portal profile display) */
.trt-agent-card { text-align: center; }
.trt-agent-avatar {
width: 96px; height: 96px;
border-radius: 50%;
margin: 0 auto 14px;
display: flex; align-items: center; justify-content: center;
color: #fff;
font-family: var(--trt-font-display);
font-size: 28px;
background: var(--trt-steel);
}
.trt-agent-avatar.is-lead { background: var(--trt-brand); }
.trt-agent-name { font-family: var(--trt-font-display); font-size: 18px; margin: 0 0 2px; }
.trt-agent-role { font-family: var(--trt-font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--trt-ink-faint); }
/* Neighborhood card */
.trt-hood-card {
border: 1px solid var(--trt-line);
border-radius: 10px;
padding: 20px;
background: var(--trt-paper);
}
.trt-hood-card h4 { font-family: var(--trt-font-display); margin: 0 0 4px; }
.trt-hood-card .trt-hood-meta { font-family: var(--trt-font-mono); font-size: 11px; color: var(--trt-ink-faint); }
/* Blog card (native WP post grid) */
.trt-post-card { border: 1px solid var(--trt-line); border-radius: 10px; overflow: hidden; background: var(--trt-paper); }
.trt-post-card .trt-post-thumb { height: 150px; background: var(--trt-steel-deep); }
.trt-post-card .trt-post-thumb.brand { background: var(--trt-brand); }
.trt-post-card .trt-post-thumb.ink { background: var(--trt-ink); }
.trt-post-card .trt-post-body { padding: 18px; }
.trt-post-card .trt-post-cat { font-family: var(--trt-font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--trt-brand); }
.trt-post-card h3 { font-size: 18px; margin: 6px 0 0; }
/* ---------- 6. Footer ---------- */
.site-footer,
footer.site-footer {
background: var(--trt-paper-alt);
border-top: 3px solid var(--trt-brand);
padding: 28px 0 16px;
}
.site-footer, .site-footer a { color: var(--trt-ink-soft); }
.site-footer a:hover { color: var(--trt-brand); }
.site-footer h2, .site-footer h3, .site-footer .widget-title {
font-family: var(--trt-font-mono);
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--trt-ink);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
/* Sponsor logo row — keep Walzel + REALTOR badge the same rendered height */
.trt-foot-sponsors { display: flex; align-items: center; gap: 24px; }
.trt-foot-sponsors img { height: 48px; width: auto; background: var(--trt-paper); border-radius: 6px; padding: 4px; }
/* Social icons — no circle wrapper, larger glyphs, real brand colors
(set the actual brand-color fill/gradient on the SVG itself, not here) */
.trt-social-row { display: flex; gap: 14px; align-items: center; }
.trt-social-row a { display: inline-flex; }
.trt-social-row svg { width: 34px; height: 34px; }
.trt-foot-bottom {
border-top: 1px solid var(--trt-line);
margin-top: 18px;
padding-top: 14px;
font-size: 12px;
color: var(--trt-ink-faint);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
/* ---------- 7. Forms (valuation / contact / lead capture) ---------- */
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
font-family: var(--trt-font-body);
border: 1px solid var(--trt-line-strong);
border-radius: 6px;
padding: 11px 14px;
background: var(--trt-paper);
color: var(--trt-ink);
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--trt-brand);
box-shadow: 0 0 0 3px var(--trt-brand-tint);
}
/* ---------- 8. Responsive tightening ---------- */
@media (max-width: 768px) {
.trt-section { padding: 48px 0; }
.trt-foot-sponsors { flex-wrap: wrap; gap: 16px; }
}