/* ============================================
PLANSERVICES - Design System
Style: Trust & Authority
Pattern: Enterprise Gateway
============================================ */
:root {
/* Brand Colors */
--color-primary: #00C278; /* electric emerald — vivid, energetic */
--color-primary-hover: #00A864;
--color-primary-dark: #006B42;
--color-secondary: #2EF0A0; /* neon teal */
--color-accent: #FF8800; /* bold solar orange */
--color-accent-hover: #E07700;
/* Surface & Text */
--color-bg: #FFFFFF;
--color-bg-soft: #EFFFF9;
--color-bg-muted: #F1F5F9;
--color-fg: #0F172A;
--color-fg-soft: #475569;
--color-fg-muted: #64748B;
--color-border: #E2E8F0;
--color-border-strong: #CBD5E1;
--color-success: #00C278;
--color-warning: #FF8800;
--color-destructive: #DC2626;
/* Typography */
--font-display: 'Lexend', system-ui, sans-serif;
--font-body: 'Source Sans 3', system-ui, sans-serif;
/* Layout */
--container-max: 1280px;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 24px;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06);
--shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.08);
--shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.12);
/* Motion */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--duration-fast: 150ms;
--duration-base: 250ms;
--duration-slow: 400ms;
}
* { box-sizing: border-box; }
html {
scroll-behavior: auto; /* smooth scroll handled by JS to prevent anchor-jump on load */
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
overflow-x: clip; /* clips horizontal overflow without breaking position:fixed elements */
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--color-fg);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 700;
line-height: 1.15;
color: var(--color-primary-dark);
margin: 0;
letter-spacing: -0.02em;
}
h1 { font-size: clamp(2rem, 5vw, 3.75rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.125rem; }
p { margin: 0 0 1rem; color: var(--color-fg-soft); }
a { color: var(--color-primary); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
a:hover { color: var(--color-primary-hover); }
img { max-width: 100%; height: auto; display: block; }
button {
font-family: inherit;
cursor: pointer;
border: none;
background: none;
}
/* ============= LAYOUT ============= */
.container {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 1.5rem;
}
.section {
padding: clamp(3rem, 8vw, 6rem) 0;
}
.section-tight { padding: clamp(2rem, 5vw, 4rem) 0; }
.section-soft { background: var(--color-bg-soft); }
.section-dark {
background: linear-gradient(135deg, var(--color-primary-dark) 0%, #065F46 100%);
color: #fff;
}
.section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; }
.section-dark p { color: rgba(255, 255, 255, 0.85); }
.eyebrow {
display: inline-block;
font-family: var(--font-display);
font-size: 0.8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-primary);
margin-bottom: 0.75rem;
}
.section-header {
max-width: 720px;
margin: 0 auto 3rem;
text-align: center;
}
.section-header p {
font-size: 1.125rem;
color: var(--color-fg-soft);
}
/* ============= NAVIGATION ============= */
.navbar {
position: sticky;
top: 0;
z-index: 100;
background: rgba(10,15,12,0.88); /* dark glass — matches site theme */
backdrop-filter: saturate(160%) blur(16px);
-webkit-backdrop-filter: saturate(160%) blur(16px);
border-bottom: 1px solid rgba(255,255,255,0.07);
color: #fff;
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 76px;
}
.nav-logo {
display: flex;
align-items: center;
gap: 0.625rem;
color: #fff !important;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.25rem;
color: var(--color-primary-dark);
}
.nav-logo-mark {
width: 36px;
height: 36px;
border-radius: 10px;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
display: grid;
place-items: center;
color: #fff;
box-shadow: 0 4px 10px rgba(0, 194, 120, 0.25);
}
.nav-links {
display: flex;
align-items: center;
gap: 0.25rem;
list-style: none;
margin: 0;
padding: 0;
}
.nav-links a {
display: inline-flex;
align-items: center;
padding: 0.5rem 0.875rem;
color: rgba(255,255,255,0.78) !important;
border-radius: var(--radius-sm);
color: var(--color-fg);
font-weight: 500;
font-size: 0.9375rem;
transition: all var(--duration-fast) var(--ease-out);
position: relative; /* needed so ::after is positioned relative to the link, not the navbar */
}
.nav-links a:hover { background: rgba(255,255,255,0.07); color: #00C278 !important; }
.nav-links a.active { color: #00C278 !important; background: rgba(0,194,120,0.10); }
.nav-cta { display: flex; align-items: center; gap: 0.75rem; }
.nav-toggle {
display: none;
width: 44px;
height: 44px;
border-radius: var(--radius-sm);
align-items: center;
justify-content: center;
color: var(--color-fg);
}
.nav-toggle:hover { background: var(--color-bg-soft); }
@media (max-width: 1024px) {
.nav-links { display: none; }
.nav-toggle { display: inline-flex; }
.nav-cta .btn { display: none; }
.nav-cta .btn-whatsapp { display: inline-flex; }
}
.mobile-menu {
position: fixed;
inset: 76px 0 0;
background: #fff;
z-index: 99;
padding: 1.5rem;
transform: translateX(-100%);
transition: transform var(--duration-base) var(--ease-out);
overflow-y: auto;
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu ul { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.mobile-menu a {
display: block;
padding: 1rem;
font-weight: 500;
font-size: 1.125rem;
color: var(--color-fg);
border-bottom: 1px solid var(--color-border);
}
/* ============= BUTTONS ============= */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.875rem 1.5rem;
font-family: var(--font-display);
font-weight: 600;
font-size: 0.9375rem;
border-radius: var(--radius-md);
transition: all var(--duration-fast) var(--ease-out);
white-space: nowrap;
cursor: pointer;
min-height: 48px;
letter-spacing: 0.01em;
}
.btn-primary {
background: var(--color-primary);
color: #fff;
box-shadow: 0 4px 14px rgba(0, 194, 120, 0.35);
}
.btn-primary:hover {
background: var(--color-primary-hover);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(0, 194, 120, 0.4);
}
.btn-accent {
background: var(--color-accent);
color: #1F2937;
box-shadow: 0 4px 14px rgba(255, 136, 0, 0.35);
}
.btn-accent:hover {
background: var(--color-accent-hover);
color: #fff;
transform: translateY(-1px);
}
.btn-outline {
background: transparent;
color: var(--color-primary);
border: 1.5px solid var(--color-border-strong);
}
.btn-outline:hover {
border-color: var(--color-primary);
background: var(--color-bg-soft);
}
.btn-ghost {
background: transparent;
color: var(--color-fg);
}
.btn-ghost:hover { background: var(--color-bg-soft); }
.btn-whatsapp {
background: #25D366;
color: #fff;
}
.btn-whatsapp:hover { background: #1DA851; color: #fff; transform: translateY(-1px); }
.btn-sm { padding: 0.5rem 0.875rem; font-size: 0.875rem; min-height: 40px; }
.btn-lg { padding: 1rem 1.75rem; font-size: 1rem; min-height: 56px; }
.btn-block { width: 100%; }
/* ============= HERO ============= */
.hero {
position: relative;
padding: clamp(3rem, 8vw, 6rem) 0 clamp(4rem, 10vw, 7rem);
background:
radial-gradient(ellipse at top right, rgba(255, 136, 0, 0.08), transparent 50%),
radial-gradient(ellipse at bottom left, rgba(0, 194, 120, 0.06), transparent 50%),
#EFFFF9;
overflow: hidden;
}
.hero-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 4rem;
align-items: center;
}
@media (max-width: 1024px) {
.hero-grid { grid-template-columns: 1fr; gap: 3rem; }
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.875rem;
background: #fff;
border: 1px solid var(--color-border);
border-radius: 100px;
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-fg);
margin-bottom: 1.5rem;
box-shadow: var(--shadow-sm);
}
.hero-badge .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-success);
box-shadow: 0 0 0 4px rgba(0, 194, 120, 0.22);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.hero h1 {
margin-bottom: 1.25rem;
}
.hero h1 .accent { color: var(--color-primary); }
.hero h1 .gold { color: var(--color-accent); }
.hero-lead {
font-size: 1.1875rem;
color: var(--color-fg-soft);
margin-bottom: 2rem;
max-width: 560px;
line-height: 1.55;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 2.5rem;
}
.hero-trust {
display: flex;
flex-wrap: wrap;
gap: 1.5rem 2rem;
}
.trust-item {
display: flex;
align-items: center;
gap: 0.625rem;
font-size: 0.875rem;
color: var(--color-fg-soft);
font-weight: 500;
}
.trust-item svg {
flex-shrink: 0;
color: var(--color-primary);
}
.hero-visual {
position: relative;
aspect-ratio: 4/5;
border-radius: var(--radius-xl);
background: linear-gradient(135deg, #005236, #00A864);
overflow: hidden;
box-shadow: var(--shadow-xl);
}
.hero-visual::before {
content: '';
position: absolute;
inset: 0;
background:
repeating-linear-gradient(45deg, transparent, transparent 28px, rgba(255,255,255,0.04) 28px, rgba(255,255,255,0.04) 29px),
radial-gradient(circle at 75% 25%, rgba(255, 136, 0, 0.4), transparent 50%);
}
.hero-stat-card {
position: absolute;
background: #fff;
border-radius: var(--radius-lg);
padding: 1.25rem 1.5rem;
box-shadow: var(--shadow-xl);
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.hero-stat-card .label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-fg-muted);
font-weight: 600;
}
.hero-stat-card .value {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.5rem;
color: var(--color-primary-dark);
}
.hero-stat-card.top-left { top: 8%; left: -5%; }
.hero-stat-card.bottom-right { bottom: 8%; right: -5%; }
@media (max-width: 640px) {
.hero-stat-card.top-left { left: 1rem; }
.hero-stat-card.bottom-right { right: 1rem; }
}
/* ============= AUDIENCE PICKER ============= */
.audience-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
@media (max-width: 1024px) { .audience-grid { grid-template-columns: 1fr; } }
.audience-card {
position: relative;
display: block;
padding: 2rem;
background: #fff;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-lg);
transition: all var(--duration-base) var(--ease-out);
overflow: hidden;
}
.audience-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0,194,120,0.07), transparent 50%);
opacity: 0;
transition: opacity var(--duration-base) var(--ease-out);
}
.audience-card:hover {
border-color: var(--color-primary);
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.audience-card:hover::before { opacity: 1; }
.audience-icon {
width: 56px;
height: 56px;
border-radius: var(--radius-md);
background: var(--color-bg-soft);
color: var(--color-primary);
display: grid;
place-items: center;
margin-bottom: 1.25rem;
position: relative;
z-index: 1;
}
.audience-card h3 { margin-bottom: 0.5rem; position: relative; z-index: 1; }
.audience-card p { font-size: 0.9375rem; margin-bottom: 1.25rem; position: relative; z-index: 1; }
.audience-card .arrow {
display: inline-flex;
align-items: center;
gap: 0.375rem;
color: var(--color-primary);
font-weight: 600;
font-size: 0.9375rem;
position: relative;
z-index: 1;
transition: gap var(--duration-fast) var(--ease-out);
}
.audience-card:hover .arrow { gap: 0.625rem; }
/* ============= FEATURES / WHY US ============= */
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
@media (max-width: 1024px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .features-grid { grid-template-columns: 1fr; } }
.feature-card {
padding: 1.75rem;
border-radius: var(--radius-lg);
background: #fff;
border: 1px solid var(--color-border);
transition: all var(--duration-base) var(--ease-out);
}
.feature-card:hover {
border-color: var(--color-secondary);
box-shadow: var(--shadow-md);
}
.feature-icon {
width: 48px;
height: 48px;
border-radius: var(--radius-md);
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
color: #fff;
display: grid;
place-items: center;
margin-bottom: 1.25rem;
}
.feature-card h3 { font-size: 1.125rem; margin-bottom: 0.5rem; }
.feature-card p { font-size: 0.9375rem; margin: 0; }
/* ============= PROCESS STEPS ============= */
.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
position: relative;
}
@media (max-width: 1024px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .process-grid { grid-template-columns: 1fr; } }
.process-step {
position: relative;
padding: 2rem 1.5rem;
background: #fff;
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
}
.process-num {
position: absolute;
top: -16px;
left: 1.5rem;
width: 44px;
height: 44px;
border-radius: var(--radius-md);
background: var(--color-primary);
color: #fff;
display: grid;
place-items: center;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.125rem;
box-shadow: 0 4px 12px rgba(0, 194, 120, 0.4);
}
.process-step h3 {
font-size: 1.125rem;
margin: 1rem 0 0.5rem;
}
.process-step .duration {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.8125rem;
color: var(--color-primary);
font-weight: 600;
margin-top: 0.75rem;
padding: 0.25rem 0.625rem;
background: var(--color-bg-soft);
border-radius: 100px;
}
.process-step p { font-size: 0.9375rem; margin: 0; }
/* ============= CALCULATOR ============= */
.calculator {
background: #fff;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
padding: clamp(1.5rem, 4vw, 2.5rem);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
border: 1px solid var(--color-border);
}
@media (max-width: 1024px) { .calculator { grid-template-columns: 1fr; gap: 2rem; } }
.calc-form .form-group { margin-bottom: 1.25rem; }
.calc-form label {
display: block;
font-family: var(--font-display);
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--color-fg);
}
.calc-form .label-helper {
display: block;
font-size: 0.8125rem;
color: var(--color-fg-muted);
font-weight: 400;
margin-top: 0.125rem;
}
.calc-form input[type="number"],
.calc-form select {
width: 100%;
padding: 0.875rem 1rem;
font-family: inherit;
font-size: 1rem;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-md);
background: #fff;
min-height: 48px;
transition: border-color var(--duration-fast) var(--ease-out);
}
.calc-form input:focus,
.calc-form select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 4px rgba(0, 194, 120, 0.12);
}
.calc-radio-group {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
}
.calc-radio {
position: relative;
cursor: pointer;
}
.calc-radio input { position: absolute; opacity: 0; }
.calc-radio span {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.375rem;
padding: 1rem 0.5rem;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-md);
font-weight: 500;
font-size: 0.875rem;
text-align: center;
transition: all var(--duration-fast) var(--ease-out);
min-height: 80px;
justify-content: center;
}
.calc-radio:hover span { border-color: var(--color-secondary); }
.calc-radio input:checked + span {
border-color: var(--color-primary);
background: var(--color-bg-soft);
color: var(--color-primary);
}
.calc-results {
background: linear-gradient(160deg, var(--color-primary-dark), #00A864);
border-radius: var(--radius-lg);
padding: 2rem;
color: #fff;
position: relative;
overflow: hidden;
}
.calc-results::before {
content: '';
position: absolute;
top: -40px;
right: -40px;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(255, 136, 0, 0.25), transparent 70%);
border-radius: 50%;
}
.calc-results h3 {
color: #fff;
font-size: 1.25rem;
margin-bottom: 1.5rem;
position: relative;
}
.calc-result-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 0.875rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
position: relative;
}
.calc-result-row:last-child { border-bottom: none; padding-top: 1.25rem; }
.calc-result-row .key {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9375rem;
}
.calc-result-row .val {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.25rem;
color: #fff;
}
.calc-result-row.highlight .val {
color: var(--color-accent);
font-size: 1.875rem;
}
.calc-cta {
margin-top: 1.75rem;
position: relative;
}
/* ============= TESTIMONIALS ============= */
.testimonial-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
@media (max-width: 1024px) { .testimonial-grid { grid-template-columns: 1fr; } }
.testimonial {
padding: 2rem;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
}
.testimonial-quote {
font-family: var(--font-display);
font-size: 1.0625rem;
line-height: 1.55;
color: var(--color-fg);
margin-bottom: 1.5rem;
flex: 1;
font-weight: 400;
}
.testimonial-quote::before {
content: '"';
display: block;
font-size: 3rem;
line-height: 0.5;
color: var(--color-primary);
margin-bottom: 0.5rem;
font-family: serif;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 0.875rem;
padding-top: 1.25rem;
border-top: 1px solid var(--color-border);
}
.testimonial-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
color: #fff;
display: grid;
place-items: center;
font-family: var(--font-display);
font-weight: 600;
flex-shrink: 0;
}
.testimonial-author .name {
font-weight: 600;
font-size: 0.9375rem;
color: var(--color-fg);
}
.testimonial-author .meta {
font-size: 0.8125rem;
color: var(--color-fg-muted);
}
/* ============= PORTFOLIO ============= */
.portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
@media (max-width: 1024px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .portfolio-grid { grid-template-columns: 1fr; } }
.portfolio-card {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: all var(--duration-base) var(--ease-out);
display: flex;
flex-direction: column;
}
.portfolio-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--color-secondary);
}
.portfolio-img {
aspect-ratio: 16/10;
background: linear-gradient(135deg, #005236, #00A864);
position: relative;
overflow: hidden;
}
.portfolio-img::before {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.4) 100%),
repeating-linear-gradient(45deg, transparent, transparent 32px, rgba(255,255,255,0.06) 32px, rgba(255,255,255,0.06) 33px);
}
.portfolio-img .badge {
position: absolute;
top: 1rem;
left: 1rem;
background: rgba(255, 255, 255, 0.95);
color: var(--color-primary-dark);
padding: 0.375rem 0.75rem;
border-radius: 100px;
font-size: 0.75rem;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.375rem;
}
.portfolio-img .kwp {
position: absolute;
bottom: 1rem;
right: 1rem;
color: #fff;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.5rem;
text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.portfolio-body {
padding: 1.5rem;
flex: 1;
display: flex;
flex-direction: column;
}
.portfolio-loc {
font-size: 0.8125rem;
color: var(--color-fg-muted);
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.375rem;
}
.portfolio-card h3 { font-size: 1.0625rem; margin-bottom: 1rem; }
.portfolio-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-top: auto;
padding-top: 1rem;
border-top: 1px solid var(--color-border);
}
.portfolio-stat .label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-fg-muted);
font-weight: 600;
margin-bottom: 0.125rem;
}
.portfolio-stat .value {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.125rem;
color: var(--color-primary);
}
/* ============= STATS BANNER ============= */
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
@media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-block {
text-align: center;
padding: 1rem;
}
.stat-num {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2rem, 4vw, 2.75rem);
color: var(--color-accent);
display: block;
letter-spacing: -0.02em;
}
.stat-label {
font-size: 0.9375rem;
color: rgba(255, 255, 255, 0.85);
margin-top: 0.25rem;
}
/* ============= CTA BANNER ============= */
.cta-banner {
background: linear-gradient(135deg, var(--color-primary-dark), #00A864);
color: #fff;
border-radius: var(--radius-xl);
padding: clamp(2.5rem, 6vw, 4rem);
text-align: center;
position: relative;
overflow: hidden;
}
.cta-banner::before {
content: '';
position: absolute;
top: -100px; right: -100px;
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(255, 136, 0, 0.2), transparent 70%);
border-radius: 50%;
}
.cta-banner h2 { color: #fff; margin-bottom: 1rem; position: relative; }
.cta-banner p { color: rgba(255, 255, 255, 0.9); font-size: 1.125rem; max-width: 600px; margin: 0 auto 2rem; position: relative; }
.cta-banner .actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; position: relative; }
/* ============= SERVICES PAGE ============= */
.service-detail {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 4rem;
align-items: center;
margin-bottom: 5rem;
}
.service-detail:nth-child(even) .service-detail-visual { order: -1; }
@media (max-width: 1024px) {
.service-detail { grid-template-columns: 1fr; gap: 2rem; }
.service-detail:nth-child(even) .service-detail-visual { order: 0; }
}
.service-detail h2 { margin-bottom: 1rem; }
.service-features {
list-style: none;
padding: 0;
margin: 1.5rem 0 2rem;
}
.service-features li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.5rem 0;
color: var(--color-fg);
}
.service-features svg {
flex-shrink: 0;
color: var(--color-primary);
margin-top: 2px;
}
.service-detail-visual {
aspect-ratio: 4/3;
border-radius: var(--radius-xl);
background: linear-gradient(135deg, var(--color-primary-dark), #065F46);
position: relative;
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.service-detail-visual::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 30% 30%, rgba(255, 136, 0, 0.3), transparent 50%),
repeating-linear-gradient(45deg, transparent, transparent 24px, rgba(255,255,255,0.05) 24px, rgba(255,255,255,0.05) 25px);
}
.service-icon-large {
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: rgba(255, 255, 255, 0.95);
}
/* ============= FORM (Multi-step) ============= */
.form-card {
background: #fff;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
padding: clamp(1.5rem, 4vw, 2.5rem);
border: 1px solid var(--color-border);
}
.form-progress {
display: flex;
gap: 0.5rem;
margin-bottom: 2rem;
}
.form-progress-bar {
flex: 1;
height: 4px;
background: var(--color-border);
border-radius: 100px;
transition: background var(--duration-base) var(--ease-out);
}
.form-progress-bar.active { background: var(--color-primary); }
.form-step { display: none; }
.form-step.active { display: block; animation: fadeIn 250ms var(--ease-out); }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.form-step h3 { font-size: 1.375rem; margin-bottom: 0.5rem; }
.form-step .step-meta { color: var(--color-fg-muted); font-size: 0.9375rem; margin-bottom: 1.5rem; }
.choice-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
}
@media (max-width: 640px) { .choice-grid { grid-template-columns: 1fr; } }
.choice {
position: relative;
cursor: pointer;
}
.choice input { position: absolute; opacity: 0; }
.choice-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.625rem;
padding: 1.5rem 1rem;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-md);
text-align: center;
font-weight: 500;
transition: all var(--duration-fast) var(--ease-out);
height: 100%;
background: #fff;
}
.choice:hover .choice-content { border-color: var(--color-secondary); transform: translateY(-2px); }
.choice input:checked + .choice-content {
border-color: var(--color-primary);
background: var(--color-bg-soft);
color: var(--color-primary);
}
.choice-icon { color: var(--color-primary); }
.form-input {
width: 100%;
padding: 0.875rem 1rem;
font-family: inherit;
font-size: 1rem;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-md);
min-height: 48px;
transition: border-color var(--duration-fast) var(--ease-out);
}
.form-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 4px rgba(0, 194, 120, 0.12);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.form-actions {
display: flex;
justify-content: space-between;
gap: 0.75rem;
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--color-border);
}
.form-success {
text-align: center;
padding: 2rem 1rem;
}
.form-success-icon {
width: 80px; height: 80px;
margin: 0 auto 1.5rem;
background: var(--color-bg-soft);
border-radius: 50%;
display: grid;
place-items: center;
color: var(--color-primary);
}
/* ============= WHATSAPP FAB ============= */
.whatsapp-fab {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
width: 60px;
height: 60px;
border-radius: 50%;
background: #25D366;
color: #fff;
display: grid;
place-items: center;
box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
z-index: 90;
transition: all var(--duration-base) var(--ease-out);
animation: float-in 600ms var(--ease-out) 1s both;
}
.whatsapp-fab:hover {
background: #1DA851;
color: #fff;
transform: scale(1.08);
box-shadow: 0 12px 32px rgba(37, 211, 102, 0.55);
}
.whatsapp-fab::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid #25D366;
opacity: 0.4;
animation: ripple 2.5s ease-out infinite;
}
@keyframes float-in {
from { opacity: 0; transform: translateY(20px) scale(0.8); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ripple {
0% { transform: scale(1); opacity: 0.4; }
100% { transform: scale(1.5); opacity: 0; }
}
/* ============= FAQ ============= */
.faq-list {
max-width: 760px;
margin: 0 auto;
}
.faq-item {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
margin-bottom: 0.75rem;
overflow: hidden;
transition: border-color var(--duration-fast) var(--ease-out);
}
.faq-item[open] { border-color: var(--color-primary); }
.faq-item summary {
list-style: none;
cursor: pointer;
padding: 1.25rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
font-family: var(--font-display);
font-weight: 600;
font-size: 1.0625rem;
color: var(--color-fg);
user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg {
flex-shrink: 0;
color: var(--color-primary);
transition: transform var(--duration-base) var(--ease-out);
}
.faq-item[open] summary svg { transform: rotate(45deg); }
.faq-item-body {
padding: 0 1.5rem 1.5rem;
color: var(--color-fg-soft);
font-size: 0.9375rem;
line-height: 1.65;
}
/* ============= FOOTER ============= */
.footer {
background: #0F172A;
color: rgba(255, 255, 255, 0.75);
padding: 4rem 0 1.5rem;
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr repeat(3, 1fr);
gap: 3rem;
margin-bottom: 3rem;
}
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer h4,
.footer h3 {
color: #fff;
font-size: 0.9375rem;
margin-bottom: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.footer-logo {
display: flex;
align-items: center;
gap: 0.625rem;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.25rem;
color: #fff;
margin-bottom: 1rem;
}
.footer-tagline {
font-size: 0.9375rem;
line-height: 1.6;
margin-bottom: 1.25rem;
max-width: 320px;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 0.625rem; }
.footer a {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9375rem;
transition: color var(--duration-fast) var(--ease-out);
}
.footer a:hover { color: var(--color-accent); }
.footer-contact-item {
display: flex;
align-items: flex-start;
gap: 0.625rem;
margin-bottom: 0.875rem;
font-size: 0.9375rem;
}
.footer-contact-item svg {
flex-shrink: 0;
color: var(--color-secondary);
margin-top: 2px;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.55);
}
.footer-badges {
display: flex;
gap: 0.625rem;
flex-wrap: wrap;
}
.footer-badge {
padding: 0.375rem 0.75rem;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 100px;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.85);
font-weight: 500;
}
/* ============= PAGE HEADER ============= */
.page-header {
background: linear-gradient(135deg, #EFFFF9 0%, #FFFFFF 100%);
padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
border-bottom: 1px solid var(--color-border);
}
.breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--color-fg-muted);
margin-bottom: 1rem;
}
.breadcrumb a { color: var(--color-fg-muted); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb svg { color: var(--color-fg-muted); opacity: 0.5; }
.page-header h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 0.75rem; }
.page-header p { font-size: 1.125rem; max-width: 720px; }
/* ============= UTILS ============= */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Focus styles */
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
border-radius: 4px;
}
/* ============= CALCULATOR TABS ============= */
.calc-tabs {
display: flex;
gap: 0.5rem;
margin-bottom: 2rem;
border-bottom: 2px solid var(--color-border);
}
.calc-tab {
position: relative;
padding: 0.875rem 1.25rem;
background: transparent;
border: none;
color: var(--color-fg-muted);
font-family: var(--font-display);
font-weight: 600;
font-size: 0.9375rem;
cursor: pointer;
transition: color var(--duration-fast) var(--ease-out);
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: -2px;
border-bottom: 2px solid transparent;
}
.calc-tab:hover { color: var(--color-fg); }
.calc-tab.active {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
}
.calc-panel { display: none; }
.calc-panel.active { display: grid; animation: fadeIn 250ms var(--ease-out); }
/* ============= BLOG LIST ============= */
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.75rem;
}
@media (max-width: 1024px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: all var(--duration-base) var(--ease-out);
display: flex;
flex-direction: column;
}
.blog-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--color-secondary);
}
.blog-card-img {
aspect-ratio: 16/10;
background: linear-gradient(135deg, #005236, #00A864);
position: relative;
overflow: hidden;
}
.blog-card-img::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 30% 30%, rgba(255, 136, 0, 0.35), transparent 55%),
repeating-linear-gradient(45deg, transparent, transparent 28px, rgba(255,255,255,0.05) 28px, rgba(255,255,255,0.05) 29px);
}
.blog-card-img.cat-ghid { background: linear-gradient(135deg, #005236, #00C278); }
.blog-card-img.cat-finantare { background: linear-gradient(135deg, #78350F, #E07700); }
.blog-card-img.cat-caz { background: linear-gradient(135deg, #1E3A8A, #3B82F6); }
.blog-cat {
position: absolute;
top: 1rem;
left: 1rem;
padding: 0.375rem 0.75rem;
background: rgba(255, 255, 255, 0.95);
color: var(--color-fg);
border-radius: 100px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.blog-card-body {
padding: 1.5rem;
flex: 1;
display: flex;
flex-direction: column;
}
.blog-meta {
font-size: 0.8125rem;
color: var(--color-fg-muted);
margin-bottom: 0.75rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.blog-meta svg { color: var(--color-fg-muted); }
.blog-card h3 {
font-size: 1.125rem;
margin-bottom: 0.625rem;
line-height: 1.3;
}
.blog-card h3 a {
color: var(--color-fg);
transition: color var(--duration-fast) var(--ease-out);
}
.blog-card:hover h3 a { color: var(--color-primary); }
.blog-card p {
font-size: 0.9375rem;
margin-bottom: 1.25rem;
flex: 1;
}
.blog-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 1rem;
border-top: 1px solid var(--color-border);
font-size: 0.875rem;
}
.blog-read-more {
color: var(--color-primary);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.375rem;
transition: gap var(--duration-fast) var(--ease-out);
}
.blog-card:hover .blog-read-more { gap: 0.625rem; }
.blog-read-time {
color: var(--color-fg-muted);
display: inline-flex;
align-items: center;
gap: 0.375rem;
}
/* Blog featured */
.blog-featured {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 0;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
overflow: hidden;
margin-bottom: 3rem;
}
@media (max-width: 1024px) { .blog-featured { grid-template-columns: 1fr; } }
.blog-featured-img {
background: linear-gradient(135deg, #005236, #00C278);
position: relative;
min-height: 320px;
overflow: hidden;
}
.blog-featured-img::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 70% 30%, rgba(255, 136, 0, 0.4), transparent 55%),
repeating-linear-gradient(45deg, transparent, transparent 32px, rgba(255,255,255,0.06) 32px, rgba(255,255,255,0.06) 33px);
}
.blog-featured-body {
padding: clamp(1.75rem, 4vw, 3rem);
display: flex;
flex-direction: column;
justify-content: center;
}
.blog-featured-tag {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.75rem;
background: var(--color-bg-soft);
color: var(--color-primary);
border-radius: 100px;
font-size: 0.8125rem;
font-weight: 600;
margin-bottom: 1rem;
align-self: flex-start;
}
.blog-featured h2 {
font-size: clamp(1.5rem, 3vw, 2rem);
margin-bottom: 1rem;
line-height: 1.2;
}
/* Filter chips - reuse */
.blog-filter {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
margin-bottom: 2.5rem;
}
/* ============= ARTICLE PAGE ============= */
.article-hero {
background:
linear-gradient(180deg, rgba(240,253,247,0.90) 0%, rgba(255,255,255,0.95) 100%),
url('https://images.unsplash.com/photo-1509391366360-2e959784a276?w=1400&q=55&auto=format&fit=crop') center / cover no-repeat;
padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
border-bottom: 1px solid var(--color-border);
}
.article-content {
max-width: 760px;
margin: 0 auto;
font-size: 1.0625rem;
line-height: 1.75;
color: var(--color-fg);
}
.article-content > * { margin-bottom: 1.5rem; }
.article-content h2 {
font-size: 1.625rem;
margin: 2.5rem 0 1rem;
color: var(--color-primary-dark);
}
.article-content h3 {
font-size: 1.25rem;
margin: 2rem 0 0.75rem;
color: var(--color-fg);
}
.article-content p { color: var(--color-fg); }
.article-content ul, .article-content ol {
padding-left: 1.5rem;
color: var(--color-fg);
}
.article-content li { margin-bottom: 0.5rem; }
.article-content blockquote {
border-left: 4px solid var(--color-primary);
padding: 1rem 1.5rem;
background: var(--color-bg-soft);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
margin: 1.5rem 0;
font-style: italic;
color: var(--color-fg);
}
.article-content strong { color: var(--color-primary-dark); }
.article-content a {
color: var(--color-primary);
border-bottom: 1px solid currentColor;
}
.article-content table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
font-size: 0.9375rem;
}
.article-content th, .article-content td {
padding: 0.75rem 1rem;
border: 1px solid var(--color-border);
text-align: left;
}
.article-content th {
background: var(--color-bg-soft);
font-family: var(--font-display);
font-weight: 600;
color: var(--color-primary-dark);
}
.article-meta-bar {
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
font-size: 0.875rem;
color: var(--color-fg-muted);
padding: 1rem 0;
margin-bottom: 1rem;
}
.article-meta-bar .author {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--color-fg);
font-weight: 500;
}
.article-meta-bar .author-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
color: #fff;
display: grid;
place-items: center;
font-family: var(--font-display);
font-weight: 600;
font-size: 0.75rem;
}
/* ============= ROMANIA MAP ============= */
.map-section {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: clamp(1.5rem, 4vw, 2.5rem);
margin-top: 2rem;
}
.map-wrap {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 2rem;
align-items: center;
}
@media (max-width: 1024px) { .map-wrap { grid-template-columns: 1fr; } }
.romania-map {
width: 100%;
height: auto;
filter: drop-shadow(0 4px 12px rgba(15, 23, 42, 0.08));
}
.romania-map .country {
fill: var(--color-bg-soft);
stroke: var(--color-primary);
stroke-width: 1.5;
transition: fill var(--duration-fast) var(--ease-out);
}
.romania-map .marker {
cursor: pointer;
transition: all var(--duration-fast) var(--ease-out);
}
.romania-map .marker-dot {
fill: var(--color-accent);
stroke: #fff;
stroke-width: 2;
transition: all var(--duration-fast) var(--ease-out);
}
.romania-map .marker:hover .marker-dot,
.romania-map .marker.active .marker-dot {
fill: var(--color-primary);
r: 9;
}
.romania-map .marker-pulse {
fill: var(--color-accent);
opacity: 0.4;
transform-origin: center;
animation: marker-pulse 2.5s infinite ease-out;
}
@keyframes marker-pulse {
0% { transform: scale(0.5); opacity: 0.6; }
100% { transform: scale(2.5); opacity: 0; }
}
.map-info {
background: var(--color-bg-soft);
border-radius: var(--radius-lg);
padding: 1.75rem;
min-height: 240px;
display: flex;
flex-direction: column;
justify-content: center;
}
.map-info-default {
text-align: center;
color: var(--color-fg-muted);
}
.map-info-detail h3 {
margin-bottom: 0.5rem;
font-size: 1.25rem;
}
.map-info-detail .loc {
display: inline-flex;
align-items: center;
gap: 0.375rem;
color: var(--color-primary);
font-weight: 600;
font-size: 0.875rem;
margin-bottom: 1rem;
}
.map-info-detail .meta-row {
display: flex;
justify-content: space-between;
padding: 0.625rem 0;
border-bottom: 1px solid var(--color-border);
font-size: 0.9375rem;
}
.map-info-detail .meta-row:last-of-type { border-bottom: none; }
.map-info-detail .meta-row .key { color: var(--color-fg-muted); }
.map-info-detail .meta-row .val { color: var(--color-fg); font-weight: 600; }
.map-legend {
display: flex;
align-items: center;
gap: 1.5rem;
margin-top: 1.5rem;
flex-wrap: wrap;
font-size: 0.875rem;
color: var(--color-fg-muted);
}
.map-legend-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.map-legend-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--color-accent);
border: 2px solid #fff;
box-shadow: 0 0 0 1px var(--color-border);
}
/* ================================================
HIGH-VALUE VISUAL UPGRADE LAYER
Premium animations, images, glassmorphism, depth
================================================ */
/* ---- 1. HERO: DARK SPACE REDESIGN ---- */
.hero {
background:
radial-gradient(ellipse 65% 55% at 5% 45%, rgba(0,194,120,0.18), transparent),
radial-gradient(ellipse 48% 52% at 92% 8%, rgba(255,136,0,0.13), transparent),
radial-gradient(ellipse 40% 50% at 50% 100%, rgba(0,229,160,0.07), transparent),
radial-gradient(ellipse 60% 35% at 65% 0%, rgba(0,100,200,0.08), transparent),
#030E1F;
color: #fff;
}
/* Dark hero — text needs to be white */
.hero h1 { color: #fff; }
.hero h1 .accent { color: #00E596; }
.hero h1 .gold { color: #FF8800; }
.hero-lead { color: rgba(255,255,255,0.70); }
.hero .hero-badge {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.16);
color: rgba(255,255,255,0.80);
}
.hero .hero-badge .dot {
background: #00E596;
box-shadow: 0 0 0 4px rgba(0,229,150,0.25);
}
.hero-trust .trust-item { color: rgba(255,255,255,0.60); }
.hero-trust .trust-item svg { color: #00E596; }
/* Outline button adapts to dark hero */
.hero .btn-outline {
color: rgba(255,255,255,0.88);
border-color: rgba(255,255,255,0.28);
}
.hero .btn-outline:hover {
border-color: #00C278;
background: rgba(0,194,120,0.12);
color: #fff;
}
/* floating blur orbs */
.hero-orb {
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(64px);
z-index: 0;
will-change: transform;
}
.hero-orb-1 {
width: 480px; height: 480px;
background: radial-gradient(circle, rgba(0,194,120,0.22), transparent 70%);
top: -120px; left: -80px;
animation: orbFloat 9s ease-in-out infinite;
}
.hero-orb-2 {
width: 300px; height: 300px;
background: radial-gradient(circle, rgba(255,136,0,0.18), transparent 70%);
bottom: 40px; right: 5%;
animation: orbFloat 11s ease-in-out infinite 2s reverse;
}
/* Third aurora orb — deep blue */
.hero-orb-3 {
width: 260px; height: 260px;
background: radial-gradient(circle, rgba(30,100,255,0.12), transparent 70%);
top: 40%; left: 42%;
animation: orbFloat 14s ease-in-out infinite 5s;
filter: blur(72px);
}
@keyframes orbFloat {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-32px) scale(1.07); }
}
/* floating dot particles */
.hero-particle {
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
.hero-particle:nth-child(1) { width:8px; height:8px; background:rgba(0,194,120,0.90); top:22%; left:56%; animation: partDrift 7s ease-in-out infinite; box-shadow: 0 0 10px rgba(0,229,150,0.65); }
.hero-particle:nth-child(2) { width:5px; height:5px; background:rgba(255,136,0,0.95); top:58%; left:62%; animation: partDrift 9s ease-in-out infinite 1.2s; box-shadow: 0 0 8px rgba(255,136,0,0.70); }
.hero-particle:nth-child(3) { width:7px; height:7px; background:rgba(0,229,150,0.80); top:38%; left:78%; animation: partDrift 8s ease-in-out infinite 2.4s; box-shadow: 0 0 9px rgba(0,229,150,0.60); }
.hero-particle:nth-child(4) { width:4px; height:4px; background:rgba(255,136,0,0.85); top:72%; left:68%; animation: partDrift 10s ease-in-out infinite 0.6s;}
.hero-particle:nth-child(5) { width:6px; height:6px; background:rgba(0,194,120,0.75); top:48%; left:88%; animation: partDrift 12s ease-in-out infinite 3s; box-shadow: 0 0 8px rgba(0,229,150,0.50); }
.hero-particle:nth-child(6) { width:5px; height:5px; background:rgba(255,136,0,0.75); top:15%; left:72%; animation: partDrift 11s ease-in-out infinite 1.5s;}
.hero-particle:nth-child(7) { width:6px; height:6px; background:rgba(0,229,150,0.80); top:82%; left:45%; animation: partDrift 8.5s ease-in-out infinite 4s; box-shadow: 0 0 8px rgba(0,229,150,0.55); }
.hero-particle:nth-child(8) { width:4px; height:4px; background:rgba(255,220,0,0.90); top:65%; left:92%; animation: partDrift 13s ease-in-out infinite 2s; box-shadow: 0 0 7px rgba(255,220,0,0.65); }
@keyframes partDrift {
0%, 100% { transform: translateY(0) translateX(0); opacity:.75; }
25% { transform: translateY(-16px) translateX(8px); opacity:1; }
50% { transform: translateY(-8px) translateX(-6px); opacity:.85; }
75% { transform: translateY(-22px) translateX(5px); opacity:.95; }
}
/* hero grid items need z-index above orbs */
.hero-grid > * { position: relative; z-index: 1; }
/* hero visual — SVG provides the content, dark space base */
.hero-visual {
background: transparent;
box-shadow: var(--shadow-xl), 0 0 0 1px rgba(0,194,120,0.18), 0 0 80px rgba(0,194,120,0.12);
}
.hero-visual::before {
background: repeating-linear-gradient(45deg, transparent, transparent 28px, rgba(255,255,255,0.02) 28px, rgba(255,255,255,0.02) 29px);
}
/* hero stat cards — dark glassmorphism */
.hero-stat-card {
background: rgba(3,14,31,0.78);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 16px 40px rgba(0,0,0,0.40), 0 0 0 1px rgba(0,194,120,0.18), 0 0 28px rgba(0,194,120,0.10);
}
.hero-stat-card .label { color: rgba(255,255,255,0.52); }
.hero-stat-card .value { color: #ffffff; }
/* ---- 2. BUTTON SHIMMER ---- */
.btn-primary, .btn-accent {
position: relative;
overflow: hidden;
}
.btn-primary::after, .btn-accent::after {
content: '';
position: absolute;
top: -50%;
left: -80%;
width: 45%;
height: 200%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
transform: skewX(-18deg);
animation: btnShimmer 3.5s ease-in-out infinite;
}
@keyframes btnShimmer {
0% { left: -80%; }
45% { left: 120%; }
100% { left: 120%; }
}
/* ---- 3. FEATURE CARDS UPGRADE ---- */
.feature-card {
position: relative;
overflow: hidden;
transition: all 300ms var(--ease-out);
}
.feature-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-accent));
transform: scaleX(0);
transform-origin: left;
transition: transform 350ms var(--ease-out);
}
.feature-card:hover::before { transform: scaleX(1); }
.feature-card:hover {
transform: translateY(-7px);
box-shadow: 0 24px 50px rgba(15,23,42,0.1), 0 0 0 1px rgba(0,194,120,0.15);
border-color: rgba(0,194,120,0.25);
}
.feature-icon {
transition: all 300ms var(--ease-out);
box-shadow: 0 8px 24px rgba(0,194,120,0.28);
}
.feature-card:hover .feature-icon {
transform: scale(1.12) rotate(6deg);
box-shadow: 0 14px 32px rgba(0,194,120,0.42);
}
/* ---- 4. PROCESS STEPS UPGRADE ---- */
.process-grid {
position: relative;
}
.process-grid::before {
content: '';
position: absolute;
top: 22px;
left: calc(12.5% + 22px);
right: calc(12.5% + 22px);
height: 2px;
background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-accent), var(--color-secondary));
opacity: 0.25;
z-index: 0;
}
@media (max-width: 1024px) { .process-grid::before { display: none; } }
.process-step {
z-index: 1;
transition: all 300ms var(--ease-out);
}
.process-step:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(15,23,42,0.09);
border-color: rgba(0,194,120,0.25);
}
.process-num {
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
box-shadow: 0 6px 20px rgba(0,194,120,0.5);
transition: all 300ms var(--ease-out);
}
.process-step:hover .process-num {
transform: scale(1.18) rotate(-5deg);
box-shadow: 0 10px 28px rgba(0,194,120,0.65);
}
/* ---- 5. STATS SECTION UPGRADE ---- */
.section-dark {
background: linear-gradient(135deg, #005236 0%, #065F46 45%, #00A864 100%);
position: relative;
overflow: hidden;
}
.section-dark::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 55% 80% at 15% 50%, rgba(255,136,0,0.12), transparent),
radial-gradient(ellipse 40% 80% at 85% 50%, rgba(0,229,160,0.1), transparent);
pointer-events: none;
z-index: 0;
}
.stats-grid { position: relative; z-index: 1; }
.stat-block { position: relative; }
@keyframes statGlow {
0%, 100% { text-shadow: none; }
50% { text-shadow: 0 0 24px rgba(255,136,0,0.5); }
}
.stat-num { animation: statGlow 4s ease-in-out infinite; }
/* ---- 6. PORTFOLIO CARDS UPGRADE ---- */
.portfolio-card {
transition: all 320ms var(--ease-out);
}
.portfolio-card:hover {
transform: translateY(-9px);
box-shadow: 0 28px 56px rgba(15,23,42,0.16), 0 0 0 1px rgba(0,194,120,0.18);
}
.portfolio-img {
background-size: cover;
background-position: center;
overflow: hidden;
}
/* data-cat targeting — no HTML changes needed on individual cards */
[data-cat="rezidential"] .portfolio-img,
.portfolio-img.img-rezidential {
background-image:
linear-gradient(180deg, transparent 20%, rgba(6,78,59,0.75) 100%),
url('https://picsum.photos/seed/ps-rez1/600/380');
background-size: cover; background-position: center;
}
[data-cat="comercial"] .portfolio-img,
.portfolio-img.img-comercial {
background-image:
linear-gradient(180deg, transparent 20%, rgba(6,78,59,0.75) 100%),
url('https://picsum.photos/seed/ps-com1/600/380');
background-size: cover; background-position: center;
}
[data-cat="agricol"] .portfolio-img,
.portfolio-img.img-agricol {
background-image:
linear-gradient(180deg, transparent 20%, rgba(6,78,59,0.75) 100%),
url('https://picsum.photos/seed/ps-agr1/600/380');
background-size: cover; background-position: center;
}
/* Alternating images for variety within same category */
[data-cat="rezidential"]:nth-of-type(3n) .portfolio-img {
background-image:
linear-gradient(180deg, transparent 20%, rgba(6,78,59,0.75) 100%),
url('https://picsum.photos/seed/ps-rez2/600/380');
}
[data-cat="rezidential"]:nth-of-type(3n+2) .portfolio-img {
background-image:
linear-gradient(180deg, transparent 20%, rgba(6,78,59,0.75) 100%),
url('https://picsum.photos/seed/ps-rez3/600/380');
}
[data-cat="comercial"]:nth-of-type(3n) .portfolio-img {
background-image:
linear-gradient(180deg, transparent 20%, rgba(6,78,59,0.75) 100%),
url('https://picsum.photos/seed/ps-com2/600/380');
}
[data-cat="agricol"]:nth-of-type(3n) .portfolio-img {
background-image:
linear-gradient(180deg, transparent 20%, rgba(6,78,59,0.75) 100%),
url('https://picsum.photos/seed/ps-agr2/600/380');
}
/* ---- 7. BLOG CARDS UPGRADE ---- */
.blog-card { transition: all 320ms var(--ease-out); }
.blog-card:hover {
transform: translateY(-7px);
box-shadow: 0 22px 44px rgba(15,23,42,0.12), 0 0 0 1px rgba(0,194,120,0.14);
}
.blog-card-img {
background-size: cover;
background-position: center;
overflow: hidden;
transition: transform 420ms var(--ease-out);
}
.blog-card:hover .blog-card-img { transform: scale(1.04); }
.blog-card-img.cat-ghid {
background-image:
linear-gradient(180deg, rgba(3,14,31,0.10) 0%, rgba(0,107,66,0.70) 100%),
url('../img/blog/real-trifazat.jpg');
background-size: cover; background-position: center;
}
.blog-card-img.cat-finantare {
background-image:
linear-gradient(180deg, rgba(3,14,31,0.10) 0%, rgba(120,53,15,0.72) 100%),
url('../img/blog/real-roof.jpg');
background-size: cover; background-position: center;
}
.blog-card-img.cat-caz {
background-image:
linear-gradient(180deg, rgba(3,14,31,0.10) 0%, rgba(30,58,138,0.72) 100%),
url('../img/blog/real-ev.jpg');
background-size: cover; background-position: center;
}
.blog-featured-img {
background-image:
linear-gradient(105deg, rgba(3,14,31,0.72) 0%, rgba(0,107,66,0.42) 60%, transparent 100%),
url('../img/blog/real-ground.jpg');
background-size: cover; background-position: center top;
position: relative;
}
/* Blog card author strip */
.blog-card-author {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.blog-card-author .ava {
width: 28px; height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
color: #fff;
font-size: 0.6875rem;
font-weight: 700;
display: grid;
place-items: center;
flex-shrink: 0;
font-family: var(--font-display);
}
.blog-card-author span {
font-size: 0.8125rem;
color: var(--color-fg-muted);
font-weight: 500;
}
/* Category tag colors per type */
.blog-cat.cat-label-ghid { background: rgba(0,194,120,0.12); color: #005236; }
.blog-cat.cat-label-finantare { background: rgba(255,136,0,0.12); color: #78350F; }
.blog-cat.cat-label-caz { background: rgba(30,58,138,0.12); color: #1E3A8A; }
/* ---- 8. TESTIMONIALS REDESIGN ---- */
.testimonial {
position: relative;
overflow: hidden;
transition: all 300ms var(--ease-out);
}
.testimonial::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
opacity: 0;
transition: opacity 300ms var(--ease-out);
}
.testimonial:hover {
transform: translateY(-5px);
box-shadow: 0 20px 44px rgba(15,23,42,0.1), 0 0 0 1px rgba(0,194,120,0.1);
}
.testimonial:hover::before { opacity: 1; }
.testimonial-stars {
display: flex;
gap: 3px;
margin-bottom: 0.875rem;
color: var(--color-accent);
}
.testimonial-avatar {
width: 50px; height: 50px;
box-shadow: 0 4px 16px rgba(0,194,120,0.3);
font-size: 1rem;
transition: all 300ms var(--ease-out);
}
.testimonial:hover .testimonial-avatar {
transform: scale(1.08);
box-shadow: 0 8px 24px rgba(0,194,120,0.45);
}
/* testimonial dots (mobile carousel) */
.testimonial-dots {
display: flex;
justify-content: center;
gap: 0.25rem;
margin-top: 1.25rem;
}
/* 48x48 tap target (a11y / mobile) with a small visual dot inside */
.testimonial-dot {
width: 48px; height: 48px;
border-radius: 50%;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
display: grid;
place-items: center;
-webkit-tap-highlight-color: transparent;
}
.testimonial-dot::before {
content: '';
width: 10px; height: 10px;
border-radius: 50%;
background: var(--color-border);
transition: all 200ms;
}
.testimonial-dot.active::before {
background: var(--color-primary);
transform: scale(1.4);
}
/* ---- 9. SCROLL REVEAL ---- */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-left {
opacity: 0;
transform: translateX(-28px);
transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out);
}
.reveal-left.is-visible { opacity: 1; transform: translateX(0); }
.reveal-right {
opacity: 0;
transform: translateX(28px);
transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out);
}
.reveal-right.is-visible { opacity: 1; transform: translateX(0); }
.reveal-scale {
opacity: 0;
transform: scale(0.94);
transition: opacity 550ms var(--ease-out), transform 550ms var(--ease-out);
}
.reveal-scale.is-visible { opacity: 1; transform: scale(1); }
.reveal-d1 { transition-delay: 80ms !important; }
.reveal-d2 { transition-delay: 160ms !important; }
.reveal-d3 { transition-delay: 240ms !important; }
.reveal-d4 { transition-delay: 320ms !important; }
.reveal-d5 { transition-delay: 400ms !important; }
.reveal-d6 { transition-delay: 480ms !important; }
/* ---- 10. CTA ANIMATED GRADIENT ---- */
.cta-banner {
background: linear-gradient(135deg, var(--color-primary-dark) 0%, #065F46 35%, #00A864 65%, var(--color-primary-dark) 100%);
background-size: 300% 300%;
animation: ctaGrad 9s ease infinite;
}
@keyframes ctaGrad {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* ---- 11. AUDIENCE CARDS ---- */
.audience-icon {
transition: all 280ms var(--ease-out);
}
.audience-card:hover .audience-icon {
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
color: #fff;
transform: scale(1.1) rotate(4deg);
box-shadow: 0 8px 24px rgba(0,194,120,0.3);
}
.audience-card::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
transform: scaleX(0);
transform-origin: left;
transition: transform 350ms var(--ease-out);
}
.audience-card:hover::after { transform: scaleX(1); }
/* ---- 12. SERVICE DETAIL VISUALS — REAL IMAGES ---- */
/* Background-size/position kept for legacy; real photos are ![]()
tags in servicii.html */
.service-detail-visual {
background-size: cover;
background-position: center;
}
/* ---- 13. PAGE HEADER UPGRADE ---- */
.page-header {
background:
radial-gradient(ellipse 80% 80% at 0% 60%, rgba(0,194,120,0.1), transparent),
radial-gradient(ellipse 50% 60% at 100% 0%, rgba(255,136,0,0.07), transparent),
linear-gradient(160deg, #EFFFF9, #F0FFF8 55%, #FAFFF8 100%);
position: relative;
overflow: hidden;
}
.page-header::after {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle 1.5px at 20% 35%, rgba(0,194,120,0.35), transparent),
radial-gradient(circle 1px at 70% 25%, rgba(0,194,120,0.25), transparent),
radial-gradient(circle 1.5px at 45% 65%, rgba(255,136,0,0.3), transparent),
radial-gradient(circle 1px at 10% 75%, rgba(0,194,120,0.2), transparent),
radial-gradient(circle 1px at 85% 60%, rgba(0,229,160,0.25), transparent),
radial-gradient(circle 2px at 55% 15%, rgba(255,136,0,0.2), transparent);
pointer-events: none;
}
.page-header > .container { position: relative; z-index: 1; }
/* ---- 14. TEAM CARDS UPGRADE ---- */
.team-avatar {
width: 80px; height: 80px;
border-radius: 50%;
font-size: 1.5rem;
box-shadow: 0 8px 28px rgba(0,194,120,0.28);
position: relative;
margin: 0 auto 1rem;
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-family: var(--font-display);
font-weight: 700;
transition: all 300ms var(--ease-out);
}
.team-avatar::after {
content: '';
position: absolute;
inset: -5px;
border-radius: 50%;
border: 2px solid var(--color-primary);
opacity: 0.3;
animation: teamRing 3.5s ease-in-out infinite;
}
@keyframes teamRing {
0%, 100% { opacity: 0.3; transform: scale(1); }
50% { opacity: 0.55; transform: scale(1.06); }
}
.team-card {
text-align: center;
padding: 2rem 1.5rem;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
transition: all 300ms var(--ease-out);
}
.team-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px rgba(15,23,42,0.1), 0 0 0 1px rgba(0,194,120,0.12);
border-color: rgba(0,194,120,0.2);
}
.team-card:hover .team-avatar {
transform: scale(1.08);
box-shadow: 0 12px 36px rgba(0,194,120,0.42);
}
/* ---- 15. STORY VISUAL (despre-noi) ---- */
.story-visual {
background:
linear-gradient(160deg, rgba(6,78,59,0.5), rgba(4,120,87,0.4)),
url('https://picsum.photos/seed/ps-about/640/600') center/cover no-repeat;
}
/* ---- 16. FOOTER UPGRADE ---- */
.footer {
background: linear-gradient(180deg, #0D1729 0%, #0F172A 100%);
position: relative;
}
.footer::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--color-primary), var(--color-accent), var(--color-primary), transparent);
opacity: 0.4;
}
/* ---- 17. NAVBAR SCROLL STATE ---- */
.navbar.scrolled {
box-shadow: 0 2px 24px rgba(0,0,0,0.35);
background: rgba(10,15,12,0.97); /* dark — matches site theme */
border-bottom-color: rgba(255,255,255,0.07);
}
/* ---- 18. GLASS CARD UTILITY ---- */
.glass-card {
background: rgba(255,255,255,0.88);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255,255,255,0.75);
box-shadow: 0 8px 32px rgba(15,23,42,0.08), 0 0 0 1px rgba(0,194,120,0.06);
}
/* ---- 19. REDUCED MOTION OVERRIDE ---- */
@media (prefers-reduced-motion: reduce) {
.hero-orb-1, .hero-orb-2, .hero-orb-3 { animation: none; }
.hero-particle { display: none; }
.btn-primary::after, .btn-accent::after { display: none; }
.cta-banner { animation: none; background-position: 0% 50%; }
.stat-num { animation: none; }
.teamRing, .team-avatar::after { animation: none; }
.reveal, .reveal-left, .reveal-right, .reveal-scale {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ---- 20. MOBILE CLEANUP ---- */
@media (max-width: 640px) {
.hero-orb-1, .hero-orb-2, .hero-orb-3, .hero-particle { display: none; }
.process-grid::before { display: none; }
}
/* ================================================
ABOUT PAGE (despre-noi.html) COMPONENTS
================================================ */
/* Story section */
.story-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
@media (max-width: 1024px) { .story-grid { grid-template-columns: 1fr; gap: 2.5rem; } }
.story-visual {
aspect-ratio: 4/3;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-xl);
position: relative;
}
.story-stat-card {
position: absolute;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
border: 1px solid rgba(255,255,255,0.8);
border-radius: var(--radius-lg);
padding: 1rem 1.5rem;
box-shadow: 0 8px 24px rgba(15,23,42,0.14);
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.story-stat-card.tl { top: 1.5rem; left: 1.5rem; }
.story-stat-card.br { bottom: 1.5rem; right: 1.5rem; }
.story-stat-card .num {
font-family: var(--font-display);
font-weight: 800;
font-size: 2rem;
color: var(--color-primary);
line-height: 1;
}
.story-stat-card .lbl {
font-size: 0.8125rem;
color: var(--color-fg-muted);
font-weight: 500;
}
/* Values section */
.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
@media (max-width: 1024px) { .values-grid { grid-template-columns: 1fr; } }
.value-card {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: 2.5rem 2rem;
position: relative;
overflow: hidden;
transition: all 300ms var(--ease-out);
}
.value-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-accent));
transform: scaleX(0);
transform-origin: left;
transition: transform 350ms var(--ease-out);
}
.value-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.value-card:hover::before { transform: scaleX(1); }
.num-large {
display: block;
font-family: var(--font-display);
font-weight: 800;
font-size: 3.5rem;
line-height: 1;
color: var(--color-primary);
opacity: 0.12;
margin-bottom: 1rem;
letter-spacing: -0.04em;
}
.value-card h3 { margin-bottom: 0.75rem; font-size: 1.25rem; }
.value-card p { color: var(--color-fg-soft); font-size: 0.9375rem; margin: 0; line-height: 1.65; }
/* Timeline */
.timeline {
position: relative;
max-width: 720px;
margin: 0 auto;
}
.timeline::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg, var(--color-primary), var(--color-secondary), var(--color-accent));
border-radius: 2px;
}
.timeline-item {
padding-left: 2.5rem;
padding-bottom: 2.5rem;
position: relative;
}
.timeline-item::before {
content: '';
position: absolute;
left: -5px;
top: 6px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--color-primary);
border: 2px solid #fff;
box-shadow: 0 0 0 3px rgba(0,194,120,0.2);
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-year {
display: inline-block;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.875rem;
color: var(--color-primary);
background: var(--color-bg-soft);
padding: 0.25rem 0.75rem;
border-radius: 100px;
margin-bottom: 0.625rem;
letter-spacing: 0.04em;
}
.timeline-item h3 { font-size: 1.125rem; margin-bottom: 0.5rem; }
.timeline-item p { color: var(--color-fg-soft); font-size: 0.9375rem; margin: 0; }
/* Certifications strip */
.cert-strip {
display: flex;
flex-wrap: wrap;
gap: 0.875rem;
}
.cert-item {
display: inline-flex;
align-items: center;
gap: 0.625rem;
padding: 0.75rem 1.25rem;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-size: 0.9375rem;
font-weight: 500;
color: var(--color-fg);
transition: all 250ms var(--ease-out);
}
.cert-item svg { color: var(--color-primary); flex-shrink: 0; }
.cert-item:hover {
border-color: var(--color-primary);
background: var(--color-bg-soft);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,194,120,0.12);
}
/* ================================================
CONTACT PAGE COMPONENTS
================================================ */
.contact-grid {
display: grid;
grid-template-columns: 1fr 380px;
gap: 3rem;
align-items: start;
}
@media (max-width: 1024px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info-card {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: 2rem;
box-shadow: var(--shadow-sm);
position: sticky;
top: 5rem;
}
.contact-info-item {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid var(--color-border);
}
.contact-info-item:last-child { border-bottom: none; }
.contact-info-icon {
width: 44px;
height: 44px;
border-radius: var(--radius-md);
background: var(--color-bg-soft);
color: var(--color-primary);
display: grid;
place-items: center;
flex-shrink: 0;
}
.contact-info-item h4 { font-size: 0.875rem; color: var(--color-fg-muted); font-weight: 500; margin-bottom: 0.25rem; }
.contact-info-item p, .contact-info-item a {
font-size: 1rem;
font-weight: 600;
color: var(--color-fg);
margin: 0;
line-height: 1.4;
}
.contact-info-item a:hover { color: var(--color-primary); }
.contact-info-item .meta {
font-size: 0.8125rem;
color: var(--color-fg-muted);
font-weight: 400;
margin-top: 0.25rem;
}
/* ================================================
MOBILE RESPONSIVE ADDITIONS
================================================ */
@media (max-width: 768px) {
.values-grid { grid-template-columns: 1fr; }
.cert-strip { gap: 0.625rem; }
.cert-item { font-size: 0.875rem; padding: 0.625rem 1rem; }
.timeline::before { left: 0; }
.story-stat-card .num { font-size: 1.5rem; }
}
/* ================================================
HERO PHOTO — REAL SOLAR PANELS IMAGE
================================================ */
/* Override hero-visual — real photo fills the container */
.hero-visual {
background: #030E1F !important;
}
.hero-visual::before { opacity: 0 !important; }
/* The real photo */
.hero-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
transition: transform 9s ease-out;
will-change: transform;
}
/* Subtle slow zoom on page load — pure CSS via animation */
@keyframes heroPhotoZoom {
0% { transform: scale(1.06); }
100% { transform: scale(1.00); }
}
.hero-photo {
animation: heroPhotoZoom 9s ease-out forwards;
}
@media (prefers-reduced-motion: reduce) {
.hero-photo { animation: none; transform: scale(1); }
}
/* Dark gradient overlay — depth + stat card contrast */
.hero-visual::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
rgba(3, 14, 31, 0.22) 0%,
rgba(3, 14, 31, 0.12) 35%,
rgba(3, 14, 31, 0.38) 70%,
rgba(3, 14, 31, 0.70) 100%
),
linear-gradient(
135deg,
rgba(0, 194, 120, 0.08) 0%,
transparent 55%
);
z-index: 1;
pointer-events: none;
}
/* Hero stat card positions — float above photo overlay */
.hero-stat-card.top-right-inner {
top: 5%;
right: 4%;
left: auto;
bottom: auto;
z-index: 3;
}
.hero-stat-card.bottom-left-inner {
bottom: 14%;
left: 4%;
top: auto;
right: auto;
z-index: 3;
}
/* ================================================
CALCULATOR PRO — DARK GLASSMORPHISM
================================================ */
/* Section background */
.calc-section-pro {
background: #030E1F;
position: relative;
overflow: hidden;
}
.calc-section-pro::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 55% at 15% 55%, rgba(0,194,120,0.09), transparent),
radial-gradient(ellipse 60% 45% at 85% 40%, rgba(14,165,233,0.06), transparent);
pointer-events: none;
}
.calc-section-pro .container { position: relative; z-index: 1; }
.calc-section-pro .section-header h2 { color: #F0FDF4; }
.calc-section-pro .section-header p { color: rgba(240,253,244,0.55); }
.calc-section-pro .eyebrow {
color: #00E596;
border-color: rgba(46,240,160,0.25);
background: rgba(46,240,160,0.08);
}
/* Main 2-column card */
.calc-pro {
display: grid;
grid-template-columns: 360px 1fr;
gap: 0;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius-xl);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
overflow: hidden;
}
/* ---- LEFT: Inputs panel ---- */
.calc-pro-inputs {
background: rgba(0,0,0,0.32);
border-right: 1px solid rgba(255,255,255,0.07);
padding: 2rem 1.625rem;
display: flex;
flex-direction: column;
gap: 1.125rem;
}
.calc-pro-section-label {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.32);
padding-bottom: 0.375rem;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
/* Segment tabs */
.calc-seg-tabs {
display: flex;
gap: 0.25rem;
background: rgba(0,0,0,0.28);
border-radius: var(--radius-md);
padding: 0.25rem;
}
.calc-seg {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
padding: 0.5625rem 0.375rem;
border: none;
border-radius: calc(var(--radius-md) - 3px);
background: transparent;
color: rgba(255,255,255,0.40);
font-size: 0.8125rem;
font-weight: 500;
font-family: var(--font-body);
cursor: pointer;
transition: all var(--duration-base) var(--ease-out);
white-space: nowrap;
}
.calc-seg:hover { color: rgba(255,255,255,0.72); background: rgba(255,255,255,0.06); }
.calc-seg.active {
background: rgba(0,194,120,0.22);
color: #4DFFBB;
box-shadow: inset 0 0 0 1px rgba(46,240,160,0.28);
}
/* Range sliders */
.calc-slider-group { display: flex; flex-direction: column; gap: 0.5rem; }
.calc-slider-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.calc-slider-header label {
font-size: 0.875rem;
color: rgba(255,255,255,0.65);
font-weight: 500;
}
.calc-slider-output {
font-size: 0.9375rem;
font-weight: 700;
color: #00E596;
font-family: var(--font-display);
font-variant-numeric: tabular-nums;
min-width: 4.5rem;
text-align: right;
}
.ps-range {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
border-radius: 2px;
background: rgba(255,255,255,0.10);
outline: none;
cursor: pointer;
}
.ps-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #00C278;
border: 2.5px solid #030E1F;
box-shadow: 0 0 0 3px rgba(0,229,160,0.22);
cursor: pointer;
transition: transform 150ms var(--ease-out), box-shadow 150ms;
}
.ps-range::-webkit-slider-thumb:hover,
.ps-range:focus::-webkit-slider-thumb {
transform: scale(1.2);
box-shadow: 0 0 0 5px rgba(0,229,160,0.28);
}
.ps-range::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: #00C278;
border: 2.5px solid #030E1F;
cursor: pointer;
}
.calc-slider-hints {
display: flex;
justify-content: space-between;
font-size: 0.6875rem;
color: rgba(255,255,255,0.25);
}
/* Zone select */
.calc-field { display: flex; flex-direction: column; gap: 0.375rem; }
.calc-field-label {
font-size: 0.875rem;
color: rgba(255,255,255,0.65);
font-weight: 500;
}
.calc-select {
width: 100%;
padding: 0.625rem 0.875rem;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.11);
border-radius: var(--radius-md);
color: rgba(255,255,255,0.82);
font-size: 0.875rem;
font-family: var(--font-body);
cursor: pointer;
outline: none;
transition: border-color var(--duration-fast);
}
.calc-select:focus { border-color: rgba(46,240,160,0.50); }
.calc-select option { background: #0A1A12; color: #e0ffe0; }
/* Toggle switches */
.calc-toggles { display: flex; flex-direction: column; gap: 0.625rem; }
.calc-toggle-wrap {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding: 0.625rem 0.875rem;
border-radius: var(--radius-md);
border: 1px solid rgba(255,255,255,0.07);
background: rgba(0,0,0,0.18);
transition: border-color var(--duration-base), background var(--duration-base);
}
.calc-toggle-wrap:hover {
border-color: rgba(46,240,160,0.28);
background: rgba(46,240,160,0.05);
}
.calc-toggle-label {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: rgba(255,255,255,0.62);
font-weight: 500;
pointer-events: none;
}
.calc-toggle-wrap input[type="checkbox"] { display: none; }
.calc-toggle-track {
position: relative;
width: 42px;
height: 24px;
border-radius: 12px;
background: rgba(255,255,255,0.14);
transition: background var(--duration-base) var(--ease-out);
flex-shrink: 0;
pointer-events: none;
}
.calc-toggle-track::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: white;
transition: transform var(--duration-base) var(--ease-out);
}
.calc-toggle-wrap input:checked ~ .calc-toggle-track { background: #00C278; }
.calc-toggle-wrap input:checked ~ .calc-toggle-track::after { transform: translateX(18px); }
.calc-toggle-wrap:has(input:checked) {
border-color: rgba(46,240,160,0.32);
background: rgba(46,240,160,0.08);
}
.calc-toggle-wrap:has(input:checked) .calc-toggle-label { color: rgba(255,255,255,0.88); }
/* Info chip */
.calc-info-chip {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.75rem 0.875rem;
background: rgba(0,229,160,0.07);
border: 1px solid rgba(46,240,160,0.16);
border-radius: var(--radius-md);
font-size: 0.8125rem;
color: rgba(255,255,255,0.50);
line-height: 1.5;
margin-top: auto;
}
.calc-info-chip svg { flex-shrink: 0; margin-top: 1px; color: #00E596; }
.calc-info-chip strong { color: rgba(255,255,255,0.80); }
/* ---- RIGHT: Results panel ---- */
.calc-pro-results {
padding: 2rem 1.75rem;
display: flex;
flex-direction: column;
gap: 1.375rem;
min-width: 0;
}
/* Top row: gauge + KPIs */
.calc-results-top {
display: grid;
grid-template-columns: 148px 1fr;
gap: 1.25rem;
align-items: center;
}
/* Ring gauge */
.calc-gauge-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.375rem;
}
.calc-gauge-svg {
display: block;
width: 140px;
height: 140px;
}
.calc-gauge-label {
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255,255,255,0.35);
text-align: center;
}
/* KPIs 2×2 */
.calc-kpis {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.625rem;
}
.calc-kpi {
padding: 0.75rem 0.875rem;
border-radius: var(--radius-md);
border: 1px solid rgba(255,255,255,0.06);
background: rgba(0,0,0,0.22);
}
.calc-kpi.kpi-green { border-color: rgba(46,240,160,0.20); background: rgba(0,229,160,0.07); }
.calc-kpi.kpi-amber { border-color: rgba(255,136,0,0.20); background: rgba(255,136,0,0.07); }
.calc-kpi.kpi-blue { border-color: rgba(14,165,233,0.20); background: rgba(14,165,233,0.07); }
.calc-kpi.kpi-gold { border-color: rgba(253,224,71,0.18); background: rgba(253,224,71,0.05); }
.calc-kpi .kpi-val {
font-size: 1.25rem;
font-weight: 700;
font-family: var(--font-display);
font-variant-numeric: tabular-nums;
line-height: 1.2;
}
.kpi-green .kpi-val { color: #00E596; }
.kpi-amber .kpi-val { color: #FCD34D; }
.kpi-blue .kpi-val { color: #7DD3FC; }
.kpi-gold .kpi-val { color: #FDE68A; }
.calc-kpi .kpi-label {
font-size: 0.75rem;
color: rgba(255,255,255,0.40);
margin-top: 0.25rem;
line-height: 1.3;
}
/* Investment breakdown */
.calc-invest-bar {
background: rgba(0,0,0,0.22);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--radius-md);
overflow: hidden;
}
.calc-invest-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.6875rem 1rem;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.calc-invest-row:last-child { border-bottom: none; }
.calc-invest-row.highlight { background: rgba(0,229,160,0.07); }
.calc-invest-row.total { background: rgba(255,255,255,0.03); }
.calc-invest-label {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: rgba(255,255,255,0.55);
}
.calc-invest-label svg { color: #00E596; }
.calc-invest-val {
font-size: 0.9375rem;
font-weight: 600;
color: rgba(255,255,255,0.70);
font-variant-numeric: tabular-nums;
}
.calc-invest-val.green { color: #00E596; }
.calc-invest-val.tbi { color: #60a5fa; } /* TBI Bank rate — blue */
.calc-invest-val.bright { color: #fff; font-size: 1rem; font-weight: 700; }
/* Monthly chart */
.calc-monthly-chart {
background: rgba(0,0,0,0.18);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--radius-md);
padding: 1rem 1rem 0.75rem;
}
.calc-chart-label {
font-size: 0.6875rem;
color: rgba(255,255,255,0.35);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0.75rem;
}
.calc-bars-wrap {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 3px;
align-items: flex-end;
height: 68px;
}
.calc-bar-col {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
height: 100%;
justify-content: flex-end;
}
.calc-bar {
width: 100%;
height: var(--h, 50%);
background: linear-gradient(180deg, #00C278, #00C278);
border-radius: 2px 2px 0 0;
transition: height 0.65s var(--ease-out);
min-height: 3px;
}
.calc-bar-col span {
font-size: 0.5rem;
color: rgba(255,255,255,0.28);
text-transform: uppercase;
letter-spacing: 0.03em;
white-space: nowrap;
}
.calc-chart-peak-label {
font-size: 0.6875rem;
color: rgba(255,255,255,0.35);
margin-top: 0.5rem;
text-align: right;
}
.calc-chart-peak-label strong { color: rgba(255,255,255,0.60); }
/* CTA button */
.calc-pro-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 0.625rem;
margin-top: 0.25rem;
}
/* Legacy EV details collapse */
.calc-ev-details {
margin-top: 1.5rem;
border: 1px solid rgba(255,255,255,0.07);
border-radius: var(--radius-lg);
overflow: hidden;
}
.calc-ev-details summary {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 1.25rem;
cursor: pointer;
color: rgba(255,255,255,0.40);
font-size: 0.875rem;
font-weight: 500;
list-style: none;
user-select: none;
transition: color var(--duration-fast), background var(--duration-fast);
}
.calc-ev-details summary:hover {
color: rgba(255,255,255,0.68);
background: rgba(255,255,255,0.04);
}
.calc-ev-details summary::-webkit-details-marker { display: none; }
.calc-ev-details[open] summary {
color: rgba(255,255,255,0.65);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.calc-ev-details .calc-tabs,
.calc-ev-details .calculator { padding: 1.5rem; }
/* ---- Responsive ---- */
@media (max-width: 1100px) {
.calc-pro { grid-template-columns: 320px 1fr; }
}
@media (max-width: 960px) {
.calc-pro {
grid-template-columns: 1fr;
}
.calc-pro-inputs {
border-right: none;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.calc-seg-tabs { max-width: 360px; }
}
@media (max-width: 768px) {
.calc-results-top {
grid-template-columns: 1fr;
}
.calc-gauge-wrap {
flex-direction: row;
gap: 1.25rem;
align-items: center;
}
.calc-gauge-svg { width: 120px; height: 120px; }
}
@media (max-width: 540px) {
.calc-kpis { grid-template-columns: 1fr 1fr; }
.calc-pro-inputs, .calc-pro-results { padding: 1.25rem 1rem; }
.calc-bars-wrap { height: 56px; gap: 2px; }
.calc-bar-col span { font-size: 0.4375rem; }
}
@media (max-width: 380px) {
.calc-kpis { grid-template-columns: 1fr; }
}
/* ============================================================
MOBILE OPTIMIZATIONS
============================================================ */
/* Grids: testimonial — add 2-col tablet step, was 3→1 */
@media (max-width: 1024px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .testimonial-grid { grid-template-columns: 1fr; } }
/* Grids: audience — 3→2→1 instead of 3→1 */
@media (max-width: 1024px) { .audience-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .audience-grid { grid-template-columns: 1fr; } }
/* Grids: stats banner — collapse to 1 col on very small phones */
@media (max-width: 400px) { .stats-grid { grid-template-columns: 1fr; } }
/* Hero: compress visual height in single-column mobile layout */
@media (max-width: 640px) {
.hero-visual { aspect-ratio: 16/9; max-height: 260px; }
.hero-stat-card { padding: 0.75rem 1rem; }
.hero-stat-card .value { font-size: 1.125rem; }
.hero-stat-card .label { font-size: 0.6875rem; }
.hero-particle { display: none; } /* reduce visual noise on small screens */
}
/* Hero: stack CTA buttons vertically on small phones */
@media (max-width: 480px) {
.hero-actions { flex-direction: column; }
.hero-actions .btn { width: 100%; }
.hero-trust { gap: 0.75rem 1rem; }
.trust-item { font-size: 0.8125rem; }
}
/* Section header: tighter margin on mobile */
@media (max-width: 640px) { .section-header { margin-bottom: 2rem; } }
/* Calculator: radio group 2-col on small screens, 1-col on tiny phones */
@media (max-width: 480px) { .calc-radio-group { grid-template-columns: 1fr 1fr; } }
@media (max-width: 360px) { .calc-radio-group { grid-template-columns: 1fr; } }
/* Calculator tabs: horizontal scroll when tabs overflow narrow screens */
@media (max-width: 640px) {
.calc-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.calc-tab { white-space: nowrap; padding: 0.75rem 1rem; font-size: 0.875rem; }
}
/* Article tables: scroll horizontally on mobile instead of breaking layout */
@media (max-width: 640px) {
.article-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* Container: tighter horizontal padding on very small phones (≤360px) */
@media (max-width: 360px) { .container { padding: 0 1rem; } }
/* WhatsApp FAB: slightly smaller on small screens to reduce corner clutter */
@media (max-width: 480px) {
.whatsapp-fab { width: 52px; height: 52px; bottom: 1rem; right: 1rem; }
}
/* Services page: reduce large bottom margins and padding on mobile */
@media (max-width: 640px) {
.service-detail { margin-bottom: 3rem; }
.process-step { padding: 1.75rem 1.25rem; }
}
/* Portfolio: tighter card body on very small screens */
@media (max-width: 400px) {
.portfolio-body { padding: 1rem; }
.portfolio-card h3 { font-size: 0.9375rem; }
}
/* Blog featured: shorter image panel on mobile */
@media (max-width: 640px) {
.blog-featured-img { min-height: 200px; }
}
/* Nav toggle: smooth icon transition (JS swaps content on toggle) */
.nav-toggle svg {
transition: transform var(--duration-base) var(--ease-out);
}
/* Map section: stack schematic map info panel naturally on mobile */
@media (max-width: 640px) {
.map-info { min-height: auto; padding: 1.25rem; }
}
/* ================================================================
INTERACTIVE LAYER 2.0 — Accessibility, UX, Micro-interactions
reading progress · back-to-top · cookie consent · TOC ·
page transitions · lazy images · share buttons · mobile CTA
================================================================ */
/* 1. prefers-reduced-motion — respect user OS setting */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.reveal, .reveal-left, .reveal-right, .reveal-scale {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.hero-orb { animation: none !important; }
}
/* 2. Enhanced focus rings (keyboard navigation) */
:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
button:focus-visible, a:focus-visible { border-radius: var(--radius-sm); }
/* 3. Skip link (accessibility) */
.skip-link {
position: fixed;
top: -100%;
left: 50%;
transform: translateX(-50%);
z-index: 10000;
background: var(--color-primary-dark);
color: #fff;
padding: 0.75rem 2rem;
border-radius: 0 0 var(--radius-md) var(--radius-md);
font-family: var(--font-display);
font-weight: 600;
font-size: 0.9375rem;
text-decoration: none;
white-space: nowrap;
box-shadow: 0 4px 20px rgba(0,0,0,0.25);
transition: top 200ms ease;
}
.skip-link:focus { top: 0; }
/* 4. Reading progress bar — sits below sticky navbar (76px) */
.reading-progress {
position: fixed;
top: 76px; /* below the 76px-tall sticky navbar */
left: 0;
height: 3px;
width: 0%;
background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
z-index: 99; /* below navbar z-index:100 */
transition: width 80ms linear;
border-radius: 0 2px 2px 0;
pointer-events: none;
}
/* 5. Back to top button */
.back-to-top {
position: fixed;
bottom: 6rem;
right: 1.5rem;
z-index: 500;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--color-primary-dark);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(0, 98, 68, 0.4);
cursor: pointer;
opacity: 0;
transform: translateY(14px) scale(0.85);
transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out), background 150ms;
pointer-events: none;
border: none;
font-family: inherit;
}
.back-to-top.visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.back-to-top:hover {
background: var(--color-primary);
transform: translateY(-3px) scale(1.08);
}
.back-to-top:active { transform: scale(0.95); }
/* 6. Cookie / GDPR consent banner */
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9000;
background: #0F172A;
color: #fff;
padding: 1rem 1.5rem;
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
box-shadow: 0 -4px 32px rgba(0,0,0,0.25);
transform: translateY(110%);
transition: transform 420ms var(--ease-out);
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-text {
color: rgba(255,255,255,0.82);
font-size: 0.875rem;
margin: 0;
flex: 1;
min-width: 200px;
line-height: 1.5;
}
.cookie-text a { color: var(--color-primary); text-decoration: underline; }
.cookie-accept {
background: var(--color-primary);
color: #fff;
border: none;
border-radius: var(--radius-sm);
padding: 0.5rem 1.25rem;
font-size: 0.875rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: background 150ms, transform 150ms;
white-space: nowrap;
}
.cookie-accept:hover { background: var(--color-primary-hover); transform: translateY(-1px); }
.cookie-dismiss {
background: transparent;
color: rgba(255,255,255,0.55);
border: 1px solid rgba(255,255,255,0.2);
border-radius: var(--radius-sm);
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-family: inherit;
cursor: pointer;
transition: color 150ms, border-color 150ms;
white-space: nowrap;
}
.cookie-dismiss:hover { color: #fff; border-color: rgba(255,255,255,0.45); }
/* 7. Table of contents (blog articles) */
.toc-nav {
background: var(--color-bg-soft);
border: 1px solid var(--color-border);
border-left: 4px solid var(--color-primary);
border-radius: var(--radius-md);
padding: 1.25rem 1.5rem;
margin: 2rem 0 2.5rem;
}
.toc-heading {
font-family: var(--font-display);
font-weight: 700;
font-size: 0.8125rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-fg-muted);
margin: 0 0 0.875rem;
}
.toc-list {
margin: 0;
padding: 0 0 0 1.25rem;
list-style: decimal;
}
.toc-list li { margin-bottom: 0.4rem; }
.toc-list a {
color: var(--color-fg-soft);
font-size: 0.9375rem;
text-decoration: none;
transition: color 150ms, padding-left 150ms;
}
.toc-list a:hover { color: var(--color-primary-dark); padding-left: 4px; }
.toc-sub { margin-left: 1.25rem; font-size: 0.875rem !important; }
/* 8. Social share buttons (blog) */
.article-share {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 2.5rem;
padding-top: 1.75rem;
border-top: 2px solid var(--color-border);
flex-wrap: wrap;
}
.share-label {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-fg-muted);
margin-right: 0.25rem;
}
.share-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 1rem;
border-radius: var(--radius-sm);
font-size: 0.8125rem;
font-weight: 600;
font-family: var(--font-body);
text-decoration: none;
cursor: pointer;
border: none;
transition: transform 200ms var(--ease-out), opacity 200ms, box-shadow 200ms;
line-height: 1;
}
.share-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.share-btn:active { transform: scale(0.96); }
.share-fb { background: #1877F2; color: #fff; }
.share-wa { background: #25D366; color: #fff; }
.share-copy { background: var(--color-bg-soft); color: var(--color-fg-soft); border: 1px solid var(--color-border); }
.share-copy.copied { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
/* 9. Page transition overlay */
.page-transition-overlay {
position: fixed;
inset: 0;
z-index: 9997;
background: #fff;
pointer-events: none;
opacity: 0;
}
/* 10. Lazy image fade-in */
img[loading="lazy"] {
opacity: 0;
transition: opacity 450ms ease;
}
img[loading="lazy"].img-loaded { opacity: 1; }
/* 11. Mobile sticky CTA bar (blog articles on mobile) */
.mobile-cta-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 800;
background: #fff;
border-top: 1px solid var(--color-border);
padding: 0.75rem 1rem;
gap: 0.625rem;
box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
display: none;
transform: translateY(100%);
transition: transform 350ms var(--ease-out);
}
.mobile-cta-bar.is-visible {
transform: translateY(0);
}
@media (max-width: 768px) {
.mobile-cta-bar { display: flex; }
.mobile-cta-bar .btn {
flex: 1;
text-align: center;
font-size: 0.875rem;
padding: 0.75rem 0.5rem;
justify-content: center;
}
/* Push WhatsApp FAB + back-to-top above mobile CTA bar */
body.has-mobile-cta .whatsapp-fab { bottom: 5.5rem; }
body.has-mobile-cta .back-to-top { bottom: 5.5rem; }
}
/* 12. Enhanced card hover micro-interactions */
.blog-card,
.portfolio-card {
transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out) !important;
will-change: transform;
}
.blog-card:hover,
.portfolio-card:hover {
transform: translateY(-6px) !important;
box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12) !important;
}
/* 13. Button press feedback */
.btn:active { transform: scale(0.97) !important; transition: transform 80ms !important; }
/* 14. Active nav link indicator — dot only, no bleeding underline */
.nav-links a.active {
color: var(--color-primary) !important;
font-weight: 600;
}
.nav-links a.active::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 5px;
height: 5px;
background: var(--color-primary);
border-radius: 50%;
/* no animation — prevents flash on page load */
}
@keyframes navUnderline {
from { transform: translateX(-50%) scale(0); }
to { transform: translateX(-50%) scale(1); }
}
/* 15. Testimonial card hover */
.testimonial {
transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.testimonial:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
}
/* 16. Smooth image hover on service photos */
.service-detail-visual { cursor: default; }
.service-detail-visual:hover .service-photo img { transform: scale(1.04); }
/* 17. Audience card micro-interaction fix */
.audience-card {
transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out), border-color 200ms !important;
}
.audience-card:hover {
transform: translateY(-5px) !important;
box-shadow: 0 20px 40px rgba(15,23,42,0.1) !important;
}
/* ============================================
MODERN WEB GUIDANCE UPGRADES
(GoogleChrome/modern-web-guidance skill)
============================================ */
/* --- Mobile Drawer: Popover API enhancement ---
When the browser supports the Popover API, the .mobile-menu
element is promoted to the top layer via JS (showPopover/hidePopover).
:popover-open + @starting-style give us the entry/exit animation
without JavaScript-driven transforms.
Fallback (.is-open class) keeps the existing behaviour on older browsers. */
/* Default: drawer is off-screen (baseline, pre-popover) */
.mobile-menu {
/* Positions are already set inline; only add the transition target */
transition: transform var(--duration-base) var(--ease-out),
overlay allow-discrete,
display allow-discrete;
}
/* Popover-API open state — the browser places this in the top layer */
.mobile-menu:popover-open {
transform: translateX(0);
}
/* @starting-style: the value the browser animates FROM when the popover
first enters the top layer. Without this the drawer would jump in
immediately instead of sliding. */
@starting-style {
.mobile-menu:popover-open {
transform: translateX(-100%);
}
}
/* Dim backdrop provided for free by the top layer ::backdrop */
.mobile-menu::backdrop {
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
/* Animate the backdrop opacity together with the drawer */
transition: overlay allow-discrete, display allow-discrete,
background 0.25s ease-out;
}
@starting-style {
.mobile-menu::backdrop {
background: transparent;
}
}
/* --- Scroll-Driven Entry Animations ---
Elements with [data-reveal] fade-and-rise as they enter the viewport.
Wrapped in @supports so browsers without animation-timeline support
simply show the element at full opacity without any animation.
prefers-reduced-motion is respected: if the user has opted out of
motion, the animation is disabled entirely. */
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
@keyframes reveal-up {
from {
opacity: 0;
translate: 0 2.5rem;
}
}
/* Named custom property so the threshold is a tweakable token */
[data-reveal] {
animation: reveal-up linear both;
animation-timeline: view();
/* Start the reveal once the element is 10 % into the viewport,
finish once it is 35 % in — keeps the effect tight and snappy. */
animation-range: entry 10% entry 35%;
}
/* Staggered delays for grid children: child index × 80 ms */
[data-reveal-group] > *:nth-child(1) { animation-delay: 0ms; }
[data-reveal-group] > *:nth-child(2) { animation-delay: 80ms; }
[data-reveal-group] > *:nth-child(3) { animation-delay: 160ms; }
[data-reveal-group] > *:nth-child(4) { animation-delay: 240ms; }
[data-reveal-group] > *:nth-child(5) { animation-delay: 320ms; }
[data-reveal-group] > *:nth-child(6) { animation-delay: 400ms; }
}
}
/* --- scrollbar-color: modern thin scrollbars where supported --- */
@supports (scrollbar-color: auto) {
* {
scrollbar-color: var(--color-primary) transparent;
scrollbar-width: thin;
}
}
/* --- text-wrap: balance for short headings --- */
h1, h2, h3, .section-title, .hero h1 {
text-wrap: balance;
}
/* --- :user-invalid for form validation UX ---
Show validation feedback only after the user has interacted with
the field, not on initial page load (avoids red fields on mount). */
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
border-color: #ef4444;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}
input:user-valid:not(:placeholder-shown),
select:user-valid,
textarea:user-valid:not(:placeholder-shown) {
border-color: var(--color-primary);
}
/* ============================================================
ENHANCEMENT LAYER — Appended additions
Hero Parallax · Solar Calculator · Reveal Animations ·
Glass Card · Gradient Text · Hero Badge · Stats Counter ·
Service Icon · Timeline · Process Steps · Print
============================================================ */
/* ---- 1. HERO PARALLAX ---- */
.hero-parallax {
position: relative;
overflow: hidden;
}
.hero-parallax__bg {
position: absolute;
inset: -20% 0;
will-change: transform;
transform: translateY(calc(var(--scroll-y, 0) * -0.4px));
background-size: cover;
background-position: center;
}
.hero-parallax__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
160deg,
rgba(0, 80, 40, 0.55) 0%,
rgba(0, 20, 10, 0.4) 100%
);
pointer-events: none;
z-index: 1;
}
/* Only the container div needs stacking context — NOT the absolute-positioned hero children */
.hero-parallax > .container {
position: relative;
z-index: 4;
}
/* Explicit overrides for all absolutely-positioned hero layers */
.hero-parallax > .hero-rays,
.hero-parallax > .hero-particles,
.hero-parallax > .hero-float-card,
.hero-parallax > .hero-wave {
position: absolute !important;
}
/* ---- 2. SOLAR CALCULATOR STYLES ---- */
.calc-card {
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(0, 194, 120, 0.2);
border-radius: 24px;
box-shadow: 0 32px 80px rgba(0, 0, 0, 0.15);
}
.calc-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
border-radius: 3px;
background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
outline: none;
cursor: pointer;
}
.calc-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary);
border: 3px solid #fff;
box-shadow: 0 2px 8px rgba(0, 194, 120, 0.4);
cursor: pointer;
transition: transform 150ms var(--ease-out), box-shadow 150ms;
}
.calc-slider::-webkit-slider-thumb:hover {
transform: scale(1.2);
box-shadow: 0 4px 14px rgba(0, 194, 120, 0.55);
}
.calc-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary);
border: 3px solid #fff;
box-shadow: 0 2px 8px rgba(0, 194, 120, 0.4);
cursor: pointer;
}
.calc-result-highlight {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 800;
font-family: var(--font-display);
color: var(--color-primary);
text-shadow: 0 2px 20px rgba(0, 194, 120, 0.3);
line-height: 1;
letter-spacing: -0.03em;
}
.calc-savings-bar {
position: relative;
height: 10px;
background: var(--color-border);
border-radius: 100px;
overflow: hidden;
}
.calc-savings-bar__fill {
height: 100%;
border-radius: 100px;
background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
width: 0%;
transition: width 0.8s var(--ease-out);
animation: fillBar 1s var(--ease-out) forwards;
}
@keyframes fillBar {
from { width: 0%; }
to { width: var(--bar-width, 70%); }
}
/* ---- 3. SECTION REVEAL ANIMATIONS ---- */
.reveal-up {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal-up.is-visible {
opacity: 1;
transform: translateY(0);
}
.reveal-up:nth-child(2) { transition-delay: 0.1s; }
.reveal-up:nth-child(3) { transition-delay: 0.2s; }
.reveal-up:nth-child(4) { transition-delay: 0.3s; }
.reveal-up:nth-child(5) { transition-delay: 0.4s; }
/* ---- 4. GLASS CARD (enhanced utility) ---- */
.glass-card {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
border-radius: var(--radius-xl);
}
/* ---- 5. GRADIENT TEXT ---- */
.gradient-text {
background: linear-gradient(135deg, #00C278 0%, #00A864 50%, #FF8800 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ---- 6. HERO BADGE ---- */
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(0, 194, 120, 0.12);
border: 1px solid rgba(0, 194, 120, 0.3);
border-radius: 100px;
padding: 6px 16px;
font-size: 0.85rem;
font-weight: 600;
color: var(--color-primary-dark);
letter-spacing: 0.02em;
}
/* ---- 7. STATS COUNTER ANIMATION ---- */
.stat-number {
transition: all 0.5s var(--ease-out);
}
@supports (@property --num: 0) {
@property --num {
syntax: '';
initial-value: 0;
inherits: false;
}
.stat-number[data-count] {
--num: 0;
counter-reset: stat var(--num);
transition: --num 1.2s var(--ease-out);
}
.stat-number[data-count].is-visible {
--num: var(--count-target, 0);
}
.stat-number[data-count]::before {
content: counter(stat);
}
}
/* ---- 8. SERVICE CARD ICON GRADIENT ---- */
.service-icon-wrap {
width: 64px;
height: 64px;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px rgba(0, 194, 120, 0.3);
flex-shrink: 0;
color: #fff;
}
/* ---- 9. TIMELINE STYLES (despre-noi.html) ---- */
/* Note: an existing .timeline is present; these rules add padding-left variant */
.timeline {
position: relative;
padding-left: 32px;
}
.timeline::before {
content: '';
position: absolute;
left: 8px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, var(--color-primary), transparent);
}
.timeline-item {
position: relative;
padding-bottom: 48px;
}
.timeline-item::before {
content: '';
position: absolute;
left: -28px;
top: 4px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--color-primary);
border: 3px solid white;
box-shadow: 0 0 0 3px rgba(0, 194, 120, 0.2);
}
/* ---- 10. PROCESS STEP CONNECTOR ---- */
.process-steps {
counter-reset: step;
}
.process-step {
counter-increment: step;
position: relative;
}
.process-step__number::before {
content: counter(step);
}
.process-step + .process-step::before {
content: '';
position: absolute;
top: 22px;
right: 100%;
width: 2rem;
height: 2px;
background: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
opacity: 0.35;
pointer-events: none;
}
@media (max-width: 1024px) {
.process-step + .process-step::before { display: none; }
}
/* ---- 11. MOBILE PERFORMANCE — prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* === GLOBAL MOBILE IMPROVEMENTS (added 2026) === */
/* Navbar mobile (768px breakpoint — tighter than existing 1024px) */
@media (max-width: 768px) {
.nav-cta .btn-whatsapp { display: none; }
}
/* Mobile menu open state (class added by JS) */
.mobile-menu.open { transform: translateX(0) !important; }
/* Touch targets */
@media (max-width: 768px) {
a, button { min-height: 44px; }
.btn { min-height: 48px; padding: 0.75rem 1.5rem; }
}
/* Typography scale */
@media (max-width: 480px) {
:root { font-size: 15px; }
h1 { font-size: clamp(1.6rem, 5vw, 2.4rem); }
h2 { font-size: clamp(1.3rem, 4vw, 1.8rem); }
.section-title { font-size: clamp(1.3rem, 4.5vw, 1.9rem); }
}
/* Container padding on mobile */
@media (max-width: 480px) {
.container { padding-left: 1rem; padding-right: 1rem; }
}
/* Cards on mobile */
@media (max-width: 480px) {
.glass-card { padding: 1.25rem; }
}
/* Footer mobile — footer-grid already has 768/480 breakpoints; add footer-bottom column layout */
@media (max-width: 768px) {
.footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
}
/* Article pages mobile */
@media (max-width: 768px) {
.article-layout { grid-template-columns: 1fr !important; }
.article-sidebar { display: none; }
.article-body { max-width: 100%; }
.article-hero-new { height: 220px !important; min-height: 220px !important; }
}
/* WhatsApp FAB position fix on mobile */
@media (max-width: 480px) {
.whatsapp-fab { bottom: 1.25rem; right: 1.25rem; width: 52px; height: 52px; }
}
/* Calculator mobile */
@media (max-width: 600px) {
.calc-specs-strip { grid-template-columns: repeat(2, 1fr) !important; }
.calc-results-top { grid-template-columns: 1fr !important; }
.calc-gauge-wrap { align-items: center; }
}
/* Service split layout mobile (used in servicii.html and similar pages) */
@media (max-width: 768px) {
.service-split { grid-template-columns: 1fr !important; }
.service-split > *:first-child { order: -1; }
}
/* ---- 12. PRINT STYLES ---- */
@media print {
.site-header,
.site-footer,
.whatsapp-fab,
.back-to-top,
.mobile-cta-bar {
display: none !important;
}
body {
font-size: 12pt;
color: #000;
background: #fff;
}
a[href]::after {
content: ' (' attr(href) ')';
font-size: 0.8em;
color: #555;
}
.container {
max-width: 100%;
padding: 0;
}
}
/* ===== WOW HERO ENHANCEMENTS ===== */
/* Sun Rays */
.hero-rays {
position: absolute; inset: 0; pointer-events: none; z-index: 2;
background: conic-gradient(from 0deg at 65% 20%, transparent 0deg, rgba(255,200,50,0.04) 4deg, transparent 8deg, transparent 22deg, rgba(255,220,80,0.03) 26deg, transparent 30deg, transparent 44deg, rgba(255,200,50,0.04) 48deg, transparent 52deg);
animation: heroRaysRotate 60s linear infinite;
transform-origin: 65% 20%;
}
@keyframes heroRaysRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* Floating Particles */
.hero-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.hero-particle {
position: absolute; border-radius: 50%;
background: rgba(0,194,120,0.6); box-shadow: 0 0 8px 2px rgba(0,194,120,0.4);
animation: particleFloat linear infinite;
}
.hero-particle:nth-child(1) { left:10%; width:3px; height:3px; animation-duration:8s; animation-delay:0s; }
.hero-particle:nth-child(2) { left:25%; width:5px; height:5px; animation-duration:11s; animation-delay:1.5s; background:rgba(255,180,0,0.5); }
.hero-particle:nth-child(3) { left:40%; width:3px; height:3px; animation-duration:9s; animation-delay:3s; }
.hero-particle:nth-child(4) { left:55%; width:6px; height:6px; animation-duration:13s; animation-delay:0.5s; }
.hero-particle:nth-child(5) { left:68%; width:4px; height:4px; animation-duration:10s; animation-delay:2s; background:rgba(255,180,0,0.4); }
.hero-particle:nth-child(6) { left:80%; width:3px; height:3px; animation-duration:7s; animation-delay:4s; }
.hero-particle:nth-child(7) { left:88%; width:5px; height:5px; animation-duration:12s; animation-delay:1s; background:rgba(255,200,0,0.5); }
.hero-particle:nth-child(8) { left:5%; width:4px; height:4px; animation-duration:9s; animation-delay:3.5s; }
@keyframes particleFloat {
0% { bottom: -10px; opacity: 0; transform: scale(1); }
10% { opacity: 1; }
90% { opacity: 0.6; }
100% { bottom: 110%; opacity: 0; transform: scale(0.5); }
}
/* Word Reveal */
.hero-word { display: inline-block; opacity: 0; transform: translateY(24px); animation: heroWordIn 0.7s cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes heroWordIn { to { opacity: 1; transform: translateY(0); } }
/* CTA Pulse */
.hero-cta-primary { position: relative; }
.hero-cta-primary::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; background: var(--color-primary); opacity: 0; animation: ctaPulse 2.5s ease-in-out infinite; z-index: -1; }
@keyframes ctaPulse { 0%,100% { opacity: 0; transform: scale(1); } 50% { opacity: 0.25; transform: scale(1.08); } }
/* Wave Divider */
.hero-wave { position: absolute; bottom: 0; left: 0; right: 0; z-index: 5; line-height: 0; }
.hero-wave svg { width: 100%; height: 60px; display: block; }
/* Floating Savings Card */
.hero-float-card {
position: absolute;
right: max(2rem, calc((100vw - 1280px)/2 + 2rem));
top: 50%; transform: translateY(-50%);
padding: 1.5rem; width: 220px; text-align: center; z-index: 10;
animation: heroCardFloat 4s ease-in-out infinite;
color: var(--color-fg);
}
.hero-float-card__label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-fg-muted); margin-bottom: 0.25rem; }
.hero-float-card__value { font-family: var(--font-display); font-size: 2.25rem; font-weight: 800; color: var(--color-primary); line-height: 1; margin-bottom: 0.25rem; }
.hero-float-card__sub { font-size: 0.75rem; color: var(--color-fg-muted); margin-bottom: 1rem; }
.hero-float-card__cta { display: inline-block; font-size: 0.85rem; font-weight: 700; color: var(--color-primary); text-decoration: none; }
@keyframes heroCardFloat { 0%,100% { transform: translateY(-50%); } 50% { transform: translateY(calc(-50% - 10px)); } }
@media (max-width: 1100px) { .hero-float-card { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-particles, .hero-rays { display: none; } .hero-word { animation: none; opacity: 1; transform: none; } }
/* ===== END WOW HERO ===== */
/* ============================================================
GLOBAL MOBILE IMPROVEMENTS — appended 2026-05-23
============================================================ */
/* Footer responsive */
@media (max-width: 768px) {
.footer-grid { grid-template-columns: 1fr !important; gap: 2rem; }
.footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
}
/* WhatsApp FAB on small screens */
@media (max-width: 480px) {
.whatsapp-fab { bottom: 1.25rem; right: 1.25rem; width: 52px; height: 52px; }
}
/* Touch targets */
@media (max-width: 768px) {
.btn { min-height: 44px; }
.nav-links li a { min-height: 44px; display: flex; align-items: center; }
}
/* Article layout — sidebar below on mobile */
@media (max-width: 768px) {
.article-layout { grid-template-columns: 1fr !important; }
.article-sidebar { order: 2; }
}
/* Service split layout — stack on mobile */
@media (max-width: 900px) {
.svc-split { grid-template-columns: 1fr !important; }
.svc-split.reverse { direction: ltr !important; }
}
/* Portfolio grid */
@media (max-width: 900px) {
.port-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
.port-grid { grid-template-columns: 1fr !important; }
}
/* Blog grid */
@media (max-width: 960px) {
.blog-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
.blog-grid { grid-template-columns: 1fr !important; }
}
/* Landing page grids */
@media (max-width: 768px) {
.lp-cards { grid-template-columns: 1fr !important; }
.lp-usp { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
.lp-usp { grid-template-columns: 1fr !important; }
}
/* ===== FOOTER LEGAL LINKS (Wave 4 — Legal Pages) ===== */
.footer-legal-links { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.footer-legal-links a { color: rgba(255,255,255,0.45); font-size: 0.8rem; text-decoration: none; }
.footer-legal-links a:hover { color: #00C278; }
@media(max-width:600px) { .footer-bottom { flex-direction: column; gap: 0.75rem; text-align: center; } .footer-legal-links { justify-content: center; } }
/* ============================================================
2026 Design System Extensions — appended by design-system agent
Used by redesigned pages (index, despre-noi, servicii, portofoliu, contact, blog*)
NOTE: Class names that already exist in the file above are prefixed
with `ds-` here to avoid breaking older pages. All others use the
names from the design-system spec directly.
Variables consumed: --color-primary, --color-accent, --color-border,
--color-bg, --color-fg, --color-fg-muted, --font-display, --font-body,
--radius-*, --shadow-*, --ease-out, --duration-*.
============================================================ */
/* ---------- 1. Hero Variants ---------- */
.hero-fullscreen {
min-height: 100vh;
min-height: 100svh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.hero-large {
min-height: 75vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.hero-bg-overlay { position: relative; }
.hero-bg-overlay::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0.75) 100%);
z-index: 0;
pointer-events: none;
}
.hero-bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
.hero-content {
position: relative;
z-index: 1;
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 2rem 1.25rem;
}
@media (min-width: 768px) {
.hero-content { padding: 3rem 2rem; }
}
.hero-title-xxl {
font-family: var(--font-display);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.025em;
font-size: clamp(2.5rem, 6vw, 6rem);
margin: 0 0 1rem;
}
.hero-subtitle {
font-size: 1.0625rem;
line-height: 1.55;
opacity: 0.85;
max-width: 640px;
margin: 0 0 1.5rem;
}
@media (min-width: 768px) {
.hero-subtitle { font-size: 1.25rem; }
}
.hero-trust-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem 1.5rem;
font-size: 0.875rem;
opacity: 0.8;
}
.hero-trust-row > * { display: inline-flex; align-items: center; gap: 0.4rem; }
.scroll-indicator {
position: absolute;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
width: 24px;
height: 40px;
border: 2px solid currentColor;
border-radius: 999px;
opacity: 0.6;
z-index: 2;
}
.scroll-indicator::after {
content: "";
position: absolute;
top: 6px;
left: 50%;
width: 3px;
height: 8px;
background: currentColor;
border-radius: 2px;
transform: translateX(-50%);
animation: scroll-indicator-bounce 1.8s var(--ease-out) infinite;
}
@keyframes scroll-indicator-bounce {
0% { transform: translate(-50%, 0); opacity: 1; }
60% { transform: translate(-50%, 14px); opacity: 0; }
100% { transform: translate(-50%, 0); opacity: 0; }
}
/* ---------- 2. Article Reading Layout (ds- prefix where existing) ---------- */
.ds-article-hero {
padding: clamp(3rem, 6vw, 5rem) 1.25rem clamp(2rem, 4vw, 3rem);
background: linear-gradient(180deg, var(--color-bg-soft) 0%, var(--color-bg) 100%);
border-bottom: 1px solid var(--color-border);
}
.article-progress {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--color-primary);
transform-origin: 0 50%;
transform: scaleX(0);
z-index: 1000;
pointer-events: none;
transition: transform 120ms linear;
}
.article-body {
max-width: 720px;
margin: 0 auto;
line-height: 1.7;
font-size: 1.0625rem;
color: var(--color-fg);
}
.article-body p { margin: 0 0 1.25rem; }
.article-body h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); margin: 2.5rem 0 1rem; }
.article-body h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin: 2rem 0 0.75rem; }
.article-body.drop-cap-first > p:first-of-type::first-letter,
.article-body .drop-cap-first p::first-letter {
font-family: var(--font-display);
font-weight: 800;
font-size: 3.5rem;
line-height: 0.9;
float: left;
padding: 0.25rem 0.75rem 0 0;
color: var(--color-primary);
}
.article-toc {
position: sticky;
top: 100px;
max-width: 240px;
font-size: 0.875rem;
align-self: start;
}
.article-toc a {
display: block;
padding: 0.4rem 0.75rem;
color: var(--color-fg-muted);
text-decoration: none;
border-left: 2px solid transparent;
scroll-margin-top: 100px;
transition: color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out);
}
.article-toc a:hover { color: var(--color-fg); }
.article-toc a.active {
color: var(--color-primary);
border-left-color: var(--color-primary);
}
.article-callout {
border: 1px solid var(--color-border);
border-left: 4px solid var(--color-fg-muted);
border-radius: var(--radius-md);
padding: 1rem 1.25rem;
margin: 1.5rem 0;
background: var(--color-bg-muted);
}
.article-callout.callout-tip { border-left-color: var(--color-primary); background: var(--color-bg-soft); }
.article-callout.callout-warning{ border-left-color: var(--color-accent); background: #FFF7ED; }
.article-callout.callout-info { border-left-color: #3B82F6; background: #EFF6FF; }
.ds-article-share {
position: sticky;
top: 120px;
display: flex;
flex-direction: column;
gap: 0.5rem;
align-self: start;
}
.ds-article-share a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--color-bg-muted);
color: var(--color-fg-soft);
text-decoration: none;
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.ds-article-share a:hover { background: var(--color-primary); color: #fff; }
/* ---------- 3. Card System ---------- */
.card-soft {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 1.5rem;
box-shadow: var(--shadow-md);
transition: transform var(--duration-base) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out);
}
.card-soft:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
}
.card-image-top {
margin: -1.5rem -1.5rem 1.25rem;
overflow: hidden;
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
.card-image-top img {
width: 100%;
height: 240px;
object-fit: cover;
display: block;
}
.card-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.75rem;
font-weight: 600;
padding: 0.25rem 0.75rem;
border-radius: 999px;
background: var(--color-bg-soft);
color: var(--color-primary-dark);
letter-spacing: 0.02em;
}
.card-grid-3,
.card-grid-4 {
display: grid;
gap: 1.5rem;
grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.card-grid-3 { grid-template-columns: repeat(2, 1fr); }
.card-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid-4 { grid-template-columns: repeat(4, 1fr); }
}
/* ---------- 4. Filter Chips ---------- */
.chip-row {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.45rem 0.95rem;
border-radius: 999px;
border: 1px solid var(--color-border);
background: transparent;
color: var(--color-fg-soft);
font-size: 0.875rem;
font-weight: 500;
line-height: 1;
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out);
}
.chip:hover { border-color: var(--color-border-strong); color: var(--color-fg); }
.chip.active {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
}
/* ---------- 5. Stats / KPI ---------- */
.kpi-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 1024px) {
.kpi-grid { grid-template-columns: repeat(4, 1fr); }
}
.kpi-card { text-align: center; }
.kpi-value {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
color: var(--color-primary);
line-height: 1;
margin-bottom: 0.5rem;
}
.kpi-label {
color: var(--color-fg-muted);
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
}
/* ---------- 6. Timeline (ds- prefix to avoid clash) ---------- */
.timeline-vertical {
display: flex;
flex-direction: column;
gap: 1.5rem;
position: relative;
}
.ds-timeline-item {
display: flex;
gap: 1.25rem;
position: relative;
padding-left: 1.5rem;
}
.ds-timeline-item::before {
content: "";
position: absolute;
left: 7px;
top: 24px;
bottom: -1.5rem;
width: 2px;
background: var(--color-border);
}
.ds-timeline-item:last-child::before { display: none; }
.timeline-marker {
position: absolute;
left: 0;
top: 6px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--color-primary);
box-shadow: 0 0 0 4px var(--color-bg-soft);
flex-shrink: 0;
}
.ds-timeline-year {
font-family: var(--font-display);
color: var(--color-primary);
font-weight: 700;
font-size: 0.95rem;
margin-bottom: 0.25rem;
display: block;
}
.timeline-content {
flex: 1;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 1.25rem 1.5rem;
box-shadow: var(--shadow-sm);
}
/* ---------- 7. Pricing Tiers ---------- */
.pricing-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.pricing-grid { grid-template-columns: repeat(3, 1fr); }
}
.pricing-card {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 2rem 1.5rem;
box-shadow: var(--shadow-md);
display: flex;
flex-direction: column;
gap: 1rem;
transition: transform var(--duration-base) var(--ease-out);
}
.pricing-card:hover { transform: translateY(-4px); }
.pricing-card.featured {
border: 2px solid var(--color-accent);
transform: scale(1.03);
position: relative;
z-index: 1;
}
.pricing-card.featured:hover { transform: scale(1.03) translateY(-4px); }
.pricing-amount {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 800;
color: var(--color-primary-dark);
line-height: 1;
}
.pricing-features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.pricing-features li {
position: relative;
padding-left: 1.5rem;
font-size: 0.9375rem;
color: var(--color-fg-soft);
}
.pricing-features li::before {
content: "\2713";
position: absolute;
left: 0;
color: var(--color-primary);
font-weight: 700;
}
/* ---------- 8. Process Stepper ---------- */
.stepper-horizontal {
display: flex;
align-items: flex-start;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: center;
}
.stepper-step {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
flex: 1 1 140px;
text-align: center;
gap: 0.5rem;
padding: 0 0.5rem;
}
@media (min-width: 768px) {
.stepper-step:not(:last-child)::after {
content: "";
position: absolute;
top: 20px;
left: calc(50% + 24px);
right: calc(-50% + 24px);
height: 2px;
background: var(--color-border);
z-index: 0;
}
}
.stepper-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--color-bg);
border: 2px solid var(--color-primary);
color: var(--color-primary);
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
position: relative;
z-index: 1;
}
.stepper-step.active .stepper-number,
.stepper-step.complete .stepper-number {
background: var(--color-primary);
color: #fff;
}
/* ---------- 9. Form Modern ---------- */
.form-modern label {
display: block;
font-weight: 600;
font-size: 0.9375rem;
margin-bottom: 0.25rem;
color: var(--color-fg);
}
.form-modern input,
.form-modern textarea,
.form-modern select {
width: 100%;
font: inherit;
color: var(--color-fg);
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 0.75rem 1rem;
transition: border-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.form-modern textarea { min-height: 140px; resize: vertical; }
.form-modern input:focus,
.form-modern textarea:focus,
.form-modern select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(0, 194, 120, 0.18);
}
.form-modern input:user-invalid,
.form-modern textarea:user-invalid,
.form-modern select:user-invalid {
border-color: var(--color-destructive);
}
.form-modern input:user-valid,
.form-modern textarea:user-valid,
.form-modern select:user-valid {
border-color: var(--color-success);
}
/* ---------- 10. Utility Helpers ---------- */
.text-gradient {
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.glass {
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: var(--radius-lg);
}
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
.glass {
-webkit-backdrop-filter: blur(12px) saturate(140%);
backdrop-filter: blur(12px) saturate(140%);
background: rgba(255, 255, 255, 0.6);
}
}
.shadow-soft { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.rounded-soft { border-radius: 8px; }
.rounded-md { border-radius: 12px; }
.rounded-lg { border-radius: 16px; }
.rounded-xl { border-radius: 24px; }
.section-padding { padding-block: 3rem; }
@media (min-width: 768px) {
.section-padding { padding-block: 5rem; }
}
.grid-2, .grid-3, .grid-4 {
display: grid;
gap: 1.5rem;
grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
}
/* ---------- 11. Scroll-Driven Animations ---------- */
.reveal-on-scroll {
opacity: 0;
transform: translateY(24px);
transition: opacity 600ms var(--ease-out),
transform 600ms var(--ease-out);
}
.reveal-on-scroll.is-visible {
opacity: 1;
transform: none;
}
@supports (animation-timeline: view()) {
@keyframes view-reveal {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.reveal-on-scroll {
opacity: 1;
transform: none;
animation: view-reveal linear both;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}
}
@media (prefers-reduced-motion: reduce) {
.reveal-on-scroll {
opacity: 1 !important;
transform: none !important;
animation: none !important;
transition: none !important;
}
.scroll-indicator::after { animation: none; }
}
/* ---------- 12. Responsive Helpers ---------- */
.hide-mobile { display: none; }
@media (min-width: 768px) { .hide-mobile { display: revert; } }
.show-mobile { display: revert; }
@media (min-width: 768px) { .show-mobile { display: none; } }
/* ===== END 2026 Design System Extensions ===== */
/* ===== Mobile header & hamburger — improved visibility (2026-06) ===== */
@media (max-width: 1024px) {
.navbar { background: rgba(7,18,24,0.97); }
.nav-toggle {
color: #ffffff;
border: 1px solid rgba(255,255,255,0.26);
background: rgba(255,255,255,0.08);
width: 48px; height: 48px;
border-radius: 12px;
}
.nav-toggle svg { width: 26px; height: 26px; }
.nav-toggle:hover,
.nav-toggle:focus-visible {
background: rgba(0,229,150,0.18);
border-color: rgba(0,229,150,0.55);
color: #ffffff;
}
}
/* Mobile menu: clean full-width sheet below the navbar (overrides popover UA centering) */
.mobile-menu {
inset: 60px 0 auto 0 !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
max-height: calc(100dvh - 60px) !important;
margin: 0 !important;
border: none !important;
border-radius: 0 0 20px 20px !important;
box-shadow: 0 26px 60px rgba(0,0,0,0.45) !important;
transform: translateY(-115%);
padding: 0.5rem 1.25rem 1.5rem !important;
}
.mobile-menu.is-open,
.mobile-menu.open,
.mobile-menu:popover-open { transform: translateY(0) !important; }
@starting-style {
.mobile-menu:popover-open { transform: translateY(-115%); }
}
.mobile-menu::backdrop { background: rgba(4,12,18,0.6) !important; }
.mobile-menu a { font-size: 1.0625rem !important; padding: 0.95rem 0.5rem !important; }