/* ============================
WCDAT Additional CSS
============================ */
/* — Fluent Forms: Success Message — */
.fluentform .ff-message-success {
background: #1b2838 !important;
color: #f8f9fa !important;
border: 1px solid #00b4d8 !important;
border-radius: 12px;
padding: 1.2rem 1.5rem;
font-size: 1rem;
font-weight: 500;
box-shadow: 0 4px 12px rgba(0,180,216,0.25);
}
/* — Side Image — */
.wcdat-sideimg img {
border-radius: 16px;
box-shadow: 0 10px 24px rgba(0,0,0,.12);
width: 100%;
height: auto;
object-fit: cover;
}
@media (max-width: 782px) {
.wcdat-sideimg img { margin-top: 12px; }
}
/* — Card Headings & Icons — */
.wcdat-card h3 {
display: flex;
align-items: center;
gap: 0.45rem;
line-height: 1.25;
}
.wcdat-card h3 a {
text-decoration: none;
color: inherit;
}
/* ============================
Hero Section Styling
============================ */
.wcdat-hero-band {
background: linear-gradient(135deg, #1159de, #2e3033);
border-radius: 16px;
padding: 80px 60px;
margin: 40px auto;
color: #fff;
display: flex;
align-items: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.wcdat-hero-band h1 {
color: #ffffff;
font-size: 2.8rem;
font-weight: 700;
margin-bottom: 20px;
text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.wcdat-hero-band p {
font-size: 1.25rem;
line-height: 1.6;
color: #e5e5e5;
margin-bottom: 30px;
}
/* — Buttons in Hero — */
.wcdat-hero-band .wp-block-buttons a.wp-block-button__link {
padding: 14px 32px;
font-size: 1.1rem;
border-radius: 50px;
transition: all 0.3s ease;
}
.wcdat-hero-band .wp-block-buttons a.wp-block-button__link:hover {
transform: translateY(-2px);
}
/* — Hero Image — */
.wcdat-hero-band img {
max-width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
/* ============================
Responsive Design
============================ */
@media (max-width: 782px) {
.wcdat-hero-band {
flex-direction: column;
text-align: center;
padding: 50px 20px;
}
.wcdat-hero-band .wp-block-columns {
flex-direction: column;
}
.wcdat-hero-band img {
margin-top: 30px;
}
}
@media (max-width: 782px) {
.wcdat-hero-band {
padding: 30px 20px;
}
.wcdat-hero-band .wp-block-columns {
flex-direction: column;
}
.wcdat-hero-band .wp-block-column {
text-align: center !important;
}
}
/* ============================
Optional Enhancements
============================ */
/* Card hover lift */
.wcdat-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wcdat-card:hover {
transform: translateY(-4px);
box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}
/* Standardize service icons */
.wcdat-card h3 img,
.wcdat-icon {
width: 28px;
height: 28px;
vertical-align: middle;
}
/* =========================
WCDAT – Unify Kit
(Add under your existing CSS)
========================= */
/* Design tokens */
:root{
–wcdat-bg:#e9edf0; /* dark surfaces (if used) */
–wcdat-surface:#f5f6f8; /* light panels */
–wcdat-text:#0f172a; /* body text */
–wcdat-text-muted:#475569; /* muted text */
–wcdat-brand:#06b6d4; /* teal accent */
–wcdat-brand-dark:#0ea5b7;
–wcdat-radius:16px;
–wcdat-radius-sm:12px;
–wcdat-shadow:0 10px 24px rgba(0,0,0,.12);
–wcdat-shadow-lg:0 14px 32px rgba(0,0,0,.16);
–wcdat-gap-xxl:72px;
–wcdat-gap-xl:56px;
–wcdat-gap-lg:40px;
–wcdat-gap-md:24px;
–wcdat-gap-sm:16px;
–wcdat-maxw:1200px; /* site-wide readable width */
}
/* Global container constraints (applies to most content) */
.wp-site-blocks > main,
.wp-block-group.is-layout-constrained,
.wp-block-group.alignwide,
.wp-block-group.alignfull .wp-block-group{
max-width: var(–wcdat-maxw);
margin-inline: auto;
padding-inline: 16px;
}
/* Typography scale (unified) */
h1{ font-size:clamp(2rem, 3.4vw, 2.6rem); line-height:1.15; letter-spacing:-0.015em; }
h2{ font-size:clamp(1.5rem, 2.4vw, 2rem); line-height:1.2; margin-top:var(–wcdat-gap-lg); }
h3{ font-size:clamp(1.125rem, 1.4vw, 1.25rem); line-height:1.25; }
p, li{ font-size:1.0625rem; line-height:1.65; color:var(–wcdat-text); }
em, small{ color:var(–wcdat-text-muted); }
/* Section rhythm */
section, .wcdat-section, .entry-content > .wp-block-group{
margin-block: var(–wcdat-gap-xl);
}
.wcdat-tight{ margin-block: var(–wcdat-gap-lg); }
/* Hero patterns (dark and light variants) */
.wcdat-hero-band{
background: radial-gradient(900px 500px at 12% 15%, rgba(255,255,255,.08), transparent 55%),
linear-gradient(135deg, #2858d6 0%, #273447 100%);
border-radius: var(–wcdat-radius);
padding: 72px 48px;
color:#fff;
box-shadow: var(–wcdat-shadow);
max-width: var(–wcdat-maxw);
margin: var(–wcdat-gap-lg) auto;
}
/* Buttons (normalize Gutenberg buttons) */
.wp-block-button .wp-block-button__link{
border-radius: 999px;
padding: 12px 24px;
transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
box-shadow: 0 8px 18px rgba(0,0,0,.15);
}
.wp-block-button .wp-block-button__link:hover{
transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(0,0,0,.22);
}
.wp-block-button.is-style-outline .wp-block-button__link{
border-color: var(–wcdat-brand) !important;
color: #e6faff !important; /*
/* Service cards (one look everywhere) */
.wcdat-card{
background:#fff;
border-radius: var(–wcdat-radius-sm);
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,.06);
transition: transform .25s ease, box-shadow .25s ease;
}
.wcdat-card:hover{
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.wcdat-card h3{
display:flex; align-items:center; gap:.5rem; margin-bottom:.25rem;
}
.wcdat-card p{ color:var(–wcdat-text-muted); }
/* Lists in two-column sections */
.wcdat-list-tight ul{ margin: .25rem 0 0 1.1rem; }
.wcdat-list-tight li{ margin: .25rem 0; }
/* Side images (already used) */
.wcdat-sideimg img{
border-radius: var(–wcdat-radius);
box-shadow: var(–wcdat-shadow);
width:100%; height:auto; object-fit:cover;
}
/* Aspect helpers for consistent imagery */
.wcdat-aspect-16×9{ position:relative; width:100%; padding-top:56.25%; overflow:hidden; border-radius:var(–wcdat-radius); }
.wcdat-aspect-16×9 > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Emoji icons in headings */
.wcdat-card h3, .page-content h1, .page-content h2{ gap:.5rem; }
.wcdat-card h3 a{ text-decoration:none; color:inherit; }
/* Responsive tweaks */
@media (max-width: 1024px){
.wcdat-hero-band{ padding: 56px 28px; }
}
@media (max-width: 782px){
.wcdat-hero-band{ padding: 32px 18px; text-align:center; }
.wcdat-hero-band .wp-block-columns{ gap: 1rem !important; flex-direction: column; }
.wcdat-hero-band .wp-block-column{ text-align:center !important; }
}