/*
* ╔══════════════════════════════════════════════════════╗
* ║ 4Set Civil Construction — Contact Section Styles ║
* ║ /assets/css/contact-section.css ║
* ╚══════════════════════════════════════════════════════╝
*
* All classes are scoped under .contact-section with a
* cs- prefix — safe to load alongside any global stylesheet.
*
* DEPENDENCIES (load before this file in ):
* Google Fonts:
*
*
* Font Awesome 6:
*
*/
/* ── RESET (scoped) ── */
.contact-section,
.contact-section * {
box-sizing: border-box;
}
/* ── CSS VARIABLES & SECTION SHELL ── */
.contact-section {
--cs-brand: #004AAD;
--cs-brand-dark: #003380;
--cs-brand-light: #E8F0FF;
--cs-red: #D0021B;
--cs-charcoal: #1A1A2E;
--cs-gray-muted: #6B7080;
--cs-gray-light: #F4F5F8;
--cs-white: #ffffff;
--cs-border: rgba(0,74,173,0.12);
--cs-shadow-card: 0 2px 20px rgba(0,74,173,0.08), 0 1px 4px rgba(0,0,0,0.06);
--cs-shadow-hover: 0 8px 32px rgba(0,74,173,0.15), 0 2px 8px rgba(0,0,0,0.08);
--cs-radius-sm: 10px;
--cs-radius-md: 16px;
--cs-radius-lg: 24px;
--cs-font-display: 'Syne', sans-serif;
--cs-font-body: 'DM Sans', sans-serif;
font-family: var(--cs-font-body);
background: linear-gradient(160deg, #F7F9FF 0%, #EEF2FB 60%, #F4F5F8 100%);
padding: 64px 20px 80px;
position: relative;
overflow: hidden;
color: var(--cs-charcoal);
}
/* Background radial accents */
.contact-section::before {
content: '';
position: absolute;
top: -80px; right: -60px;
width: 320px; height: 320px;
background: radial-gradient(circle, rgba(0,74,173,0.07) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.contact-section::after {
content: '';
position: absolute;
bottom: -60px; left: -80px;
width: 260px; height: 260px;
background: radial-gradient(circle, rgba(0,74,173,0.05) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.cs-geo-accent {
position: absolute;
top: 120px; right: -20px;
width: 4px; height: 80px;
background: linear-gradient(to bottom, var(--cs-red), transparent);
border-radius: 2px;
opacity: 0.6;
}
.cs-geo-accent-2 {
position: absolute;
top: 220px; right: 10px;
width: 4px; height: 40px;
background: linear-gradient(to bottom, var(--cs-brand), transparent);
border-radius: 2px;
opacity: 0.4;
}
/* ── INNER WRAPPER ── */
.cs-inner {
max-width: 900px;
margin: 0 auto;
position: relative;
z-index: 1;
}
/* ── DESKTOP GRID ── */
.cs-desktop-grid {
display: flex;
flex-direction: column;
gap: 0;
}
@media (min-width: 700px) {
.contact-section { padding: 80px 40px 100px; }
.cs-desktop-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start;
}
}
/* ── LEFT COLUMN ── */
.cs-left-col {
display: flex;
flex-direction: column;
}
/* ── HEADER ── */
.cs-header {
margin-bottom: 40px;
animation: csFadeUp 0.6s ease both;
}
@media (min-width: 700px) {
.cs-header { margin-bottom: 28px; }
}
.cs-trust-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--cs-brand-light);
color: var(--cs-brand);
font-family: var(--cs-font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: 100px;
border: 1px solid rgba(0,74,173,0.2);
margin-bottom: 20px;
}
.cs-trust-badge .cs-dot {
width: 6px; height: 6px;
background: var(--cs-brand);
border-radius: 50%;
animation: csPulse 2s ease infinite;
}
.cs-section-title {
font-family: var(--cs-font-display);
font-size: clamp(28px, 7vw, 44px);
font-weight: 800;
color: var(--cs-charcoal);
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0 0 14px;
}
@media (min-width: 700px) {
.cs-section-title { font-size: 36px; }
}
.cs-section-title span {
color: var(--cs-brand);
}
.cs-section-sub {
font-size: 15px;
color: var(--cs-gray-muted);
line-height: 1.65;
max-width: 420px;
font-weight: 300;
margin: 0;
}
/* ── CONTACT CARDS ── */
.cs-contact-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 32px;
animation: csFadeUp 0.6s ease 0.1s both;
}
.cs-contact-card {
background: var(--cs-white);
border: 1px solid var(--cs-border);
border-radius: var(--cs-radius-md);
padding: 18px 16px;
display: flex;
flex-direction: column;
gap: 8px;
box-shadow: var(--cs-shadow-card);
cursor: pointer;
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
text-decoration: none;
color: inherit;
-webkit-tap-highlight-color: transparent;
}
.cs-contact-card:hover,
.cs-contact-card:active {
transform: translateY(-3px);
box-shadow: var(--cs-shadow-hover);
border-color: rgba(0,74,173,0.25);
}
.cs-contact-card.cs-wide {
grid-column: 1 / -1;
flex-direction: row;
align-items: center;
gap: 14px;
}
.cs-wide .cs-card-text { flex: 1; }
.cs-card-icon {
width: 38px; height: 38px;
background: var(--cs-brand-light);
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 16px;
color: var(--cs-brand);
flex-shrink: 0;
margin-bottom: 2px;
}
.cs-card-icon.cs-red { background: rgba(208,2,27,0.08); color: var(--cs-red); }
.cs-card-label {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cs-gray-muted);
display: block;
margin-bottom: 2px;
}
.cs-card-value {
font-family: var(--cs-font-display);
font-size: 13px;
font-weight: 600;
color: var(--cs-charcoal);
line-height: 1.3;
display: block;
}
.cs-reply-badge {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(0,174,72,0.08);
color: #00a844;
font-size: 10px;
font-weight: 500;
padding: 3px 9px;
border-radius: 100px;
margin-top: 4px;
}
.cs-reply-dot {
width: 5px; height: 5px;
background: #00a844;
border-radius: 50%;
animation: csPulse 1.8s ease infinite;
}
/* ── QUICK ACTIONS ── */
.cs-quick-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 32px;
animation: csFadeUp 0.6s ease 0.18s both;
}
.cs-action-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 10px;
border-radius: var(--cs-radius-sm);
font-family: var(--cs-font-body);
font-size: 13px;
font-weight: 500;
cursor: pointer;
border: none;
transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.cs-action-btn:active { transform: scale(0.97); }
.cs-btn-whatsapp {
background: #25D366;
color: white;
box-shadow: 0 4px 16px rgba(37,211,102,0.28);
}
.cs-btn-whatsapp:hover { filter: brightness(1.06); box-shadow: 0 6px 20px rgba(37,211,102,0.38); }
.cs-btn-call {
background: var(--cs-brand);
color: white;
box-shadow: 0 4px 16px rgba(0,74,173,0.28);
}
.cs-btn-call:hover { filter: brightness(1.1); box-shadow: 0 6px 20px rgba(0,74,173,0.38); }
/* ── DIVIDER ── */
.cs-divider {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 28px;
animation: csFadeUp 0.6s ease 0.22s both;
}
.cs-divider-line {
flex: 1;
height: 1px;
background: var(--cs-border);
}
.cs-divider-text {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cs-gray-muted);
white-space: nowrap;
}
/* ── FORM CARD ── */
.cs-quote-form {
background: var(--cs-white);
border: 1px solid var(--cs-border);
border-radius: var(--cs-radius-lg);
padding: 28px 22px;
box-shadow: var(--cs-shadow-card);
animation: csFadeUp 0.6s ease 0.26s both;
}
.cs-form-title {
font-family: var(--cs-font-display);
font-size: 18px;
font-weight: 700;
color: var(--cs-charcoal);
margin: 0 0 4px;
}
.cs-form-sub {
font-size: 13px;
color: var(--cs-gray-muted);
margin: 0 0 24px;
font-weight: 300;
}
.cs-field-group {
margin-bottom: 16px;
}
.cs-field-label {
display: block;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cs-gray-muted);
margin-bottom: 7px;
}
.cs-field-input,
.cs-field-select,
.cs-field-textarea {
width: 100%;
background: var(--cs-gray-light);
border: 1.5px solid transparent;
border-radius: var(--cs-radius-sm);
padding: 13px 16px;
font-family: var(--cs-font-body);
font-size: 15px;
color: var(--cs-charcoal);
outline: none;
transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
-webkit-appearance: none;
appearance: none;
}
.cs-field-input::placeholder,
.cs-field-textarea::placeholder {
color: #A0A6B5;
font-weight: 300;
}
.cs-field-input:focus,
.cs-field-select:focus,
.cs-field-textarea:focus {
border-color: var(--cs-brand);
background: #F7F9FF;
box-shadow: 0 0 0 4px rgba(0,74,173,0.08);
}
.cs-select-wrapper {
position: relative;
}
.cs-select-wrapper::after {
content: '▾';
position: absolute;
right: 14px;
top: 50%; transform: translateY(-50%);
color: var(--cs-gray-muted);
font-size: 14px;
pointer-events: none;
}
.cs-field-select {
cursor: pointer;
padding-right: 40px;
}
.cs-field-textarea {
min-height: 90px;
resize: none;
line-height: 1.5;
}
.cs-field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.cs-optional-tag {
font-size: 10px;
color: var(--cs-gray-muted);
font-weight: 400;
text-transform: none;
letter-spacing: 0;
margin-left: 4px;
font-style: italic;
}
/* ── CTA BUTTON ── */
.cs-cta-btn {
width: 100%;
background: var(--cs-brand);
color: white;
border: none;
border-radius: var(--cs-radius-sm);
padding: 17px 24px;
font-family: var(--cs-font-display);
font-size: 15px;
font-weight: 700;
letter-spacing: 0.01em;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 22px;
box-shadow: 0 6px 24px rgba(0,74,173,0.32);
transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
position: relative;
overflow: hidden;
-webkit-tap-highlight-color: transparent;
}
.cs-cta-btn::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 60%);
pointer-events: none;
}
.cs-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0,74,173,0.4);
filter: brightness(1.08);
}
.cs-cta-btn:active {
transform: scale(0.98) translateY(0);
box-shadow: 0 4px 14px rgba(0,74,173,0.28);
}
.cs-cta-arrow {
font-size: 18px;
transition: transform 0.18s ease;
display: inline-block;
}
.cs-cta-btn:hover .cs-cta-arrow {
transform: translateX(4px);
}
.cs-form-disclaimer {
text-align: center;
font-size: 11px;
color: var(--cs-gray-muted);
margin-top: 12px;
font-weight: 300;
}
.cs-form-disclaimer strong {
color: var(--cs-charcoal);
font-weight: 500;
}
/* ── SUCCESS STATE ── */
.cs-success-state {
display: none;
text-align: center;
padding: 40px 20px;
flex-direction: column;
align-items: center;
gap: 12px;
}
.cs-success-icon {
width: 64px; height: 64px;
background: rgba(0,168,68,0.1);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 28px;
margin-bottom: 4px;
animation: csSuccessPop 0.4s ease both;
}
.cs-success-title {
font-family: var(--cs-font-display);
font-size: 20px;
font-weight: 700;
color: var(--cs-charcoal);
}
.cs-success-sub {
font-size: 14px;
color: var(--cs-gray-muted);
font-weight: 300;
max-width: 280px;
line-height: 1.6;
}
/* ── HONEYPOT (off-screen, invisible to real users) ── */
.cs-hp-field {
position: absolute;
left: -9999px;
top: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
/* ── ANIMATIONS ── */
@keyframes csFadeUp {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes csPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.8); }
}
@keyframes csSuccessPop {
0% { transform: scale(0.8); opacity: 0; }
60% { transform: scale(1.05); }
100% { transform: scale(1); opacity: 1; }
}