renders a fixed 16:7 branded placeholder
-
![]()
renders the real photo at its natural ratio
(with a generous max-height so a tall photo doesn't blow up the page).
============================================================ */
.blog-hero {
position: relative;
width: 100%;
border-radius: var(--radius);
overflow: hidden;
margin: var(--space-6) 0 var(--space-8);
border: 1px solid var(--border-soft);
display: block;
}
/* Placeholder div — fixed banner aspect with brand-accent glow. */
div.blog-hero {
aspect-ratio: 16 / 7;
background:
radial-gradient(ellipse at 25% 30%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 60%),
radial-gradient(ellipse at 75% 70%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
var(--panel);
display: grid;
place-items: center;
}
div.blog-hero::after {
content: "VERITAS BUILDERS";
font-size: var(--text-xs);
letter-spacing: 0.35em;
color: var(--text-faint);
position: absolute; bottom: 12px; right: 16px;
}
/* Real-photo variant — natural ratio, capped so a portrait shot doesn't dominate. */
img.blog-hero {
height: auto;
max-height: 560px;
object-fit: cover;
background: var(--panel);
}
/* Inline figure inside article body — same brand-on-brand styling. */
.blog-figure {
margin: var(--space-8) 0;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--border-soft);
background: var(--panel);
}
.blog-figure img { width: 100%; height: auto; display: block; }
.blog-figure.placeholder {
aspect-ratio: 16 / 9;
background:
radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 65%),
var(--panel);
display: grid;
place-items: center;
}
.blog-figure.placeholder::after {
content: attr(data-label);
font-size: var(--text-sm);
font-weight: 500;
color: var(--text-faint);
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0 var(--space-6);
text-align: center;
}
.blog-figcaption {
font-size: var(--text-xs);
color: var(--text-faint);
text-align: center;
margin-top: 6px;
}
/* ============================================================
COMING SOON BADGE (divisions)
============================================================ */
.badge-soon {
display: inline-block;
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
/* Inherits per-card accent set by --card-accent, falls back to the page accent. */
color: var(--card-accent, var(--accent));
background: color-mix(in srgb, var(--card-accent, var(--accent)) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--card-accent, var(--accent)) 35%, transparent);
border-radius: var(--radius-full);
padding: 4px 12px;
margin-bottom: var(--space-4);
}
/* ============================================================
AREAS WE SERVE (chip list)
============================================================ */
.area-list {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.area-list li {
font-size: var(--text-sm);
font-weight: 500;
color: var(--white);
background: color-mix(in srgb, var(--bg) 60%, #000);
border: 1px solid var(--border-soft);
border-radius: var(--radius-full);
padding: 0.5rem 1rem;
}
/* ============================================================
FAQ (accordion)
============================================================ */
.faq-list {
display: grid;
gap: var(--space-4);
max-width: 820px;
}
.faq-item {
background: var(--panel);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: var(--space-4) var(--space-6);
transition: border-color 0.25s var(--ease);
}
.faq-item[open] { border-color: var(--border-mid); }
.faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
list-style: none;
cursor: pointer;
font-size: var(--text-base);
font-weight: 600;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+";
font-size: 1.4rem;
font-weight: 400;
color: var(--accent);
transition: transform 0.25s var(--ease);
line-height: 1;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p {
margin-top: var(--space-4);
font-size: var(--text-sm);
color: var(--text-soft);
}
/* Page-transition link back to Veritas Ventures from any Builders page.
Uses the Ventures brand orange directly (not the Builders blue) so the
link visually advertises the parent brand it points at.
Selector is a.back-link rather than just .back-link so it beats
'.nav-links a' on specificity (both compute to 0,1,1; later rule wins).
Otherwise the soft-white nav-link color shows through and the link
doesn't read as the Ventures brand. */
a.back-link {
font-size: var(--text-sm);
font-weight: 600;
color: var(--vv-accent);
display: inline-flex; align-items: center; gap: 6px;
}
a.back-link:hover { color: var(--vv-accent-hover); }
/* ============================================================
TEXAS SERVICE-AREA MAP
============================================================ */
.map-wrap {
background: color-mix(in srgb, var(--bg) 55%, #000);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: clamp(var(--space-6), 4vw, var(--space-12));
}
#tx-map {
width: 100%;
max-width: 520px;
height: auto;
margin: 0 auto;
display: block;
overflow: hidden;
}
.tx-outline {
fill: color-mix(in srgb, var(--panel) 80%, var(--bg));
stroke: var(--border-mid);
stroke-width: 2.5;
stroke-linejoin: round;
}
.tx-triangle {
fill: color-mix(in srgb, var(--accent) 18%, transparent);
stroke: color-mix(in srgb, var(--accent) 55%, transparent);
stroke-width: 2;
stroke-dasharray: 8 6;
}
.tx-city { fill: var(--white); stroke: var(--accent); stroke-width: 3; }
.tx-city--faint { fill: var(--text-faint); stroke: var(--border-mid); }
.tx-label {
fill: var(--white);
font-family: var(--font);
font-size: 22px;
font-weight: 600;
}
.tx-label--faint { fill: var(--text-faint); font-weight: 500; font-size: 19px; }
.tx-label--hq { fill: var(--accent); font-weight: 700; }
.tx-label--left { text-anchor: end; }
.tx-hq { fill: var(--accent); }
.tx-hq-ring {
fill: none;
stroke: var(--accent);
stroke-width: 2.5;
opacity: 0.6;
transform-origin: center;
animation: tx-pulse 2.4s ease-out infinite;
}
@keyframes tx-pulse {
0% { r: 12; opacity: 0.7; }
100% { r: 30; opacity: 0; }
}
.tx-project {
fill: var(--accent);
stroke: var(--white);
stroke-width: 2;
cursor: pointer;
}
.tx-project:hover { fill: var(--accent-hover); }
.map-legend {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-6);
margin-top: var(--space-8);
}
.legend-item {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--text-soft);
}
.legend-item .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot-hq { background: var(--accent); }
.dot-city { background: var(--white); border: 2px solid var(--accent); }
.dot-project { background: var(--accent); border: 2px solid var(--white); }
.map-note { text-align: center; margin-top: var(--space-4); font-size: var(--text-sm); color: var(--accent); font-weight: 600; }
@media (max-width: 600px) {
.tx-label { font-size: 28px; }
.tx-label--faint { font-size: 24px; }
}
/* ============================================================
CHAT POP-UP WIDGET (self-contained, no third party)
============================================================ */
.chat-launcher {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 200;
width: 60px;
height: 60px;
border-radius: var(--radius-full);
background: var(--accent);
color: var(--white);
display: grid;
place-items: center;
box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 45%, transparent), 0 4px 12px rgba(0,0,0,0.3);
transition: transform 0.25s var(--ease), background 0.2s var(--ease);
}
.chat-launcher:hover { transform: translateY(-3px) scale(1.04); background: var(--accent-hover); }
.chat-launcher svg { width: 26px; height: 26px; }
.chat-launcher .icon-close { display: none; }
.chat-launcher.open .icon-chat { display: none; }
.chat-launcher.open .icon-close { display: block; }
.chat-panel {
position: fixed;
bottom: 96px;
right: 24px;
z-index: 200;
width: min(360px, calc(100vw - 48px));
background: var(--panel);
border: 1px solid var(--border-mid);
border-radius: var(--radius);
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
overflow: hidden;
transform: translateY(16px) scale(0.96);
opacity: 0;
pointer-events: none;
transition: transform 0.28s var(--ease), opacity 0.28s var(--ease);
}
.chat-panel.open { transform: none; opacity: 1; pointer-events: auto; }
.chat-head {
background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #000));
color: var(--white);
padding: var(--space-6);
}
.chat-head h4 { font-size: var(--text-lg); margin-bottom: 4px; }
.chat-head p { font-size: var(--text-sm); opacity: 0.92; }
/* Message thread */
.chat-thread {
height: 340px;
max-height: 50vh;
overflow-y: auto;
padding: var(--space-4) var(--space-4) 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.chat-msg {
max-width: 85%;
font-size: var(--text-sm);
line-height: 1.5;
padding: 0.6rem 0.85rem;
border-radius: 14px;
white-space: pre-wrap;
word-wrap: break-word;
}
.chat-msg.bot {
align-self: flex-start;
background: color-mix(in srgb, var(--bg) 55%, #000);
border: 1px solid var(--border-soft);
color: var(--white);
border-bottom-left-radius: 4px;
}
.chat-msg.user {
align-self: flex-end;
background: var(--accent);
color: var(--white);
border-bottom-right-radius: 4px;
}
.chat-typing { align-self: flex-start; display: flex; gap: 4px; padding: 0.7rem 0.9rem; }
.chat-typing span {
width: 7px; height: 7px; border-radius: 50%;
background: var(--text-faint);
animation: chat-bounce 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-bounce { 0%,80%,100% { transform: translateY(0); opacity: 0.5; } 40% { transform: translateY(-5px); opacity: 1; } }
.chat-inputbar {
display: flex;
gap: var(--space-2);
padding: var(--space-4);
border-top: 1px solid var(--border-soft);
}
.chat-inputbar textarea {
flex: 1;
resize: none;
height: 44px;
max-height: 120px;
background: var(--bg);
border: 1px solid var(--border-mid);
border-radius: var(--radius-sm);
color: var(--white);
font-size: var(--text-sm);
padding: 0.6rem 0.75rem;
line-height: 1.4;
}
.chat-inputbar textarea::placeholder { color: var(--text-faint); }
.chat-inputbar button {
flex: none;
width: 44px; height: 44px;
display: grid; place-items: center;
background: var(--accent);
color: var(--white);
border-radius: var(--radius-sm);
}
.chat-inputbar button:hover { background: var(--accent-hover); }
.chat-inputbar button:disabled { opacity: 0.5; cursor: default; }
/* Paperclip attach button — same size as Send but subtler so Send stays primary. */
.chat-inputbar button.chat-attach {
background: transparent;
color: var(--text-faint);
border: 1px solid var(--border-mid);
}
.chat-inputbar button.chat-attach:hover { color: var(--white); border-color: var(--border-strong, var(--border-mid)); background: transparent; }
/* Staged-photo strip rendered above the input bar before sending. */
.chat-photo-preview {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 8px var(--space-4) 0;
}
.chat-photo-thumb {
position: relative;
width: 56px; height: 56px;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--border-mid);
}
.chat-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-photo-thumb button {
position: absolute; top: -6px; right: -6px;
width: 18px; height: 18px;
border-radius: 50%;
background: rgba(0,0,0,0.8);
color: #fff;
font-size: 13px;
line-height: 1;
display: grid; place-items: center;
border: 1px solid var(--border-mid);
cursor: pointer;
}
/* Photos sent as part of a user message. */
.chat-msg.user .chat-msg-photos {
display: flex; flex-wrap: wrap; gap: 4px;
margin-top: 6px;
}
.chat-msg.user .chat-msg-photos img {
width: 72px; height: 72px;
object-fit: cover; border-radius: 6px; display: block;
}
.chat-disclaimer {
font-size: 11px;
color: var(--text-faint);
text-align: center;
padding: 0 var(--space-4) var(--space-3);
}
@media (max-width: 480px) {
.chat-launcher { bottom: 16px; right: 16px; }
.chat-panel { bottom: 84px; right: 16px; }
.chat-thread { height: 300px; }
}
/* Reveal-on-scroll.
Only hidden when JS is active (html.js). If JS fails/doesn't run,
content stays fully visible — no blank sections. */
html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
html.js .reveal.in { opacity: 1; transform: none; }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 860px) {
.about-grid { grid-template-columns: 1fr; }
.hero-split { grid-template-columns: 1fr; gap: var(--space-6); text-align: left; }
.hero-logo-col { justify-content: flex-start; }
.hero-logo { max-width: 200px; }
.nav-links {
position: fixed;
inset: 72px 0 auto 0;
flex-direction: column;
align-items: flex-start;
gap: var(--space-6);
padding: var(--space-8) var(--space-6);
background: var(--bg);
border-bottom: 1px solid var(--border-soft);
transform: translateY(-120%);
transition: transform 0.35s var(--ease);
}
.nav-links.open { transform: translateY(0); }
.nav-toggle {
display: grid;
place-items: center;
width: 42px; height: 42px;
border: 1px solid var(--border-mid);
border-radius: var(--radius-sm);
}
}