.uni-calculator-page { --primary-gold: #3478a8;
--primary-gold-hover: #3478a8;
--gold-gradient: linear-gradient(135deg, #3478a8 0%, #3478a8 50%, #3478a8 100%);
--gold-soft-bg: #f4f3ee;
--gold-text: #3478a8; --bg-page: #FAF7F2;
--bg-sand-card: #f4f3ee;
--bg-sand-light: #f4f3ee;
--bg-white: #FFFFFF;
--border-light: #f4f3ee;
--border-card: #f4f3ee;
--border-gold: #3478a8; --dark-hero-bg: #14171A;
--dark-card: #181B1E;
--dark-surface: #22262B;
--dark-border: rgba(255, 255, 255, 0.1); --text-main: #152635;
--text-body: #152635;
--text-muted: #657580;
--text-light-muted: #657580;
--text-white: #FFFFFF; --radius-pill: 9999px;
--radius-lg: 20px;
--radius-md: 14px;
--radius-sm: 10px; --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
} .uni-calculator-page,
.uni-calculator-page *,
.uni-calculator-page *::before,
.uni-calculator-page *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.uni-calculator-page {
scroll-behavior: smooth;
font-size: 16px;
-webkit-font-smoothing: antialiased;
}
.uni-calculator-page {
background-color: var(--bg-page);
color: var(--text-main);
font-family: var(--font-body);
line-height: 1.6;
min-height: calc(100vh - 110px);
padding-top: 48px;
padding-bottom: 80px;
} .calc-app-wrapper {
max-width: 920px;
margin: 0 auto;
padding: 0 20px;
} .calc-top-header {
text-align: center;
margin-bottom: 24px;
}
.brand-mini-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--bg-white);
border: 1px solid var(--border-card);
padding: 6px 16px;
border-radius: var(--radius-pill);
font-size: 11px;
font-weight: 800;
letter-spacing: 1.5px;
color: var(--text-muted);
margin-bottom: 14px;
}
.brand-sun-icon {
width: 22px;
height: 22px;
background: var(--gold-gradient);
color: #FFFFFF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.brand-mini-badge strong {
color: var(--primary-gold);
}
.calc-main-title {
font-family: var(--font-heading);
font-size: clamp(28px, 4vw, 38px);
font-weight: 800;
letter-spacing: -0.8px;
color: var(--text-main);
margin-bottom: 6px;
}
.calc-main-subtitle {
font-size: 14.5px;
color: var(--text-muted);
max-width: 580px;
margin: 0 auto;
} .stepper-bar {
position: relative;
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
align-items: center;
background: var(--bg-white);
border: 1.5px solid var(--border-card);
border-radius: var(--radius-lg);
padding: 8px 12px 12px;
margin: 24px 0 28px;
overflow: hidden;
}
.step-item {
position: relative;
background: transparent;
border: 1.5px solid transparent;
border-radius: var(--radius-md);
padding: 10px 14px;
cursor: pointer;
display: flex;
align-items: center;
gap: 12px;
transition: all 0.2s ease;
text-align: left;
}
.step-item:hover {
background: var(--bg-sand-light);
}
.step-bubble {
width: 38px;
height: 38px;
border-radius: 50%;
background: #f4f3ee;
border: 1.5px solid #f4f3ee;
color: var(--text-muted);
font-family: var(--font-heading);
font-size: 14px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.25s ease;
}
.step-check-svg {
display: none;
}
.step-info {
display: flex;
flex-direction: column;
}
.step-kicker {
font-size: 10px;
font-weight: 800;
letter-spacing: 1px;
color: var(--text-light-muted);
text-transform: uppercase;
margin-bottom: 2px;
}
.step-name {
font-family: var(--font-heading);
font-size: 14px;
font-weight: 700;
color: var(--text-body);
white-space: nowrap;
} .step-item.active {
background: var(--gold-soft-bg);
border-color: rgba(52, 120, 168, 0.4);
}
.step-item.active .step-bubble {
background: var(--gold-gradient);
border-color: #FFFFFF;
color: #152635;
}
.step-item.active .step-kicker {
color: var(--gold-text);
font-weight: 800;
}
.step-item.active .step-name {
color: var(--text-main);
font-weight: 800;
} .step-item.completed {
background: #FAF7F2;
}
.step-item.completed .step-bubble {
background: var(--primary-gold);
border-color: var(--primary-gold);
color: #FFFFFF;
}
.step-item.completed .step-num-text {
display: none;
}
.step-item.completed .step-check-svg {
display: block;
}
.step-item.completed .step-name {
color: var(--text-main);
} .step-divider {
display: flex;
align-items: center;
justify-content: center;
color: #d9e1e5;
padding: 0 4px;
} .stepper-bottom-track {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: #f4f3ee;
}
.stepper-bottom-fill {
height: 100%;
width: 33.33%;
background: var(--gold-gradient);
transition: width 0.35s ease;
} .calc-step-pane {
display: none;
opacity: 0;
transform: translateY(8px);
transition: all 0.25s ease;
}
.calc-step-pane.active {
display: block;
opacity: 1;
transform: translateY(0);
animation: fadeIn 0.25s ease forwards;
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(6px);
}
100% {
opacity: 1;
transform: translateY(0);
}
} .figma-card {
background: var(--bg-sand-card);
border: 1.5px solid var(--border-card);
border-radius: var(--radius-lg);
padding: 28px;
margin-bottom: 20px;
position: relative;
transition: border-color 0.2s ease;
}
.card-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 22px;
}
.card-header.space-between {
justify-content: space-between;
flex-wrap: wrap;
}
.header-left {
display: flex;
align-items: center;
gap: 16px;
}
.step-num {
width: 36px;
height: 36px;
background: var(--bg-white);
border: 1.5px solid var(--border-card);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-size: 13px;
font-weight: 800;
color: var(--primary-gold);
flex-shrink: 0;
}
.step-text h3 {
font-family: var(--font-heading);
font-size: 18.5px;
font-weight: 700;
color: var(--text-main);
margin-bottom: 2px;
}
.step-text p {
font-size: 13px;
color: var(--text-muted);
} .tariff-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.tariff-option {
position: relative;
background: var(--bg-white);
border: 1.5px solid var(--border-card);
border-radius: var(--radius-md);
padding: 16px 14px;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 110px;
transition: all 0.2s ease;
}
.tariff-option:hover {
border-color: #d9e1e5;
background: #FCFAF7;
}
.tariff-option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.tariff-card-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.tariff-code-pill {
font-family: var(--font-heading);
font-size: 12px;
font-weight: 800;
color: var(--gold-text);
background: var(--gold-soft-bg);
border: 1px solid rgba(52, 120, 168, 0.3);
padding: 2px 8px;
border-radius: 6px;
letter-spacing: 0.3px;
}
.tariff-check-icon {
width: 20px;
height: 20px;
border-radius: 50%;
background: #f4f3ee;
color: #FFFFFF;
font-size: 11px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.tariff-details h4 {
font-family: var(--font-heading);
font-size: 14.5px;
font-weight: 700;
color: var(--text-main);
margin-bottom: 2px;
line-height: 1.3;
}
.tariff-details p {
font-size: 11.5px;
color: var(--text-muted);
line-height: 1.3;
} .tariff-option.selected {
border-color: var(--primary-gold);
background: #FFFFFF;
}
.tariff-option.selected .tariff-check-icon {
background: var(--primary-gold);
color: #FFFFFF;
} .mode-choice-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.mode-choice-btn {
background: var(--bg-white);
border: 1.5px solid var(--border-card);
border-radius: var(--radius-md);
padding: 22px 18px;
cursor: pointer;
display: flex;
flex-direction: column;
text-align: left;
transition: all 0.2s ease;
}
.mode-choice-btn:hover {
border-color: var(--primary-gold);
background: #FCFAF7;
}
.mode-choice-btn.active {
border-color: var(--primary-gold);
background: #FFFFFF;
}
.mode-choice-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.mode-pill-tag {
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.8px;
color: var(--gold-text);
background: var(--gold-soft-bg);
border: 1px solid rgba(52, 120, 168, 0.3);
padding: 3px 8px;
border-radius: 6px;
}
.mode-arrow-circle {
width: 26px;
height: 26px;
border-radius: 50%;
background: #f4f3ee;
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 800;
transition: all 0.2s ease;
}
.mode-choice-btn:hover .mode-arrow-circle,
.mode-choice-btn.active .mode-arrow-circle {
background: var(--primary-gold);
color: #FFFFFF;
}
.mode-choice-info h4 {
font-family: var(--font-heading);
font-size: 17px;
font-weight: 800;
color: var(--text-main);
margin-bottom: 4px;
}
.mode-choice-info p {
font-size: 12.5px;
color: var(--text-muted);
line-height: 1.45;
} .mode-tab-bar {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
padding: 4px 10px;
background: rgba(255, 255, 255, 0.8);
border: 1px solid var(--border-card);
border-radius: var(--radius-pill);
width: fit-content;
}
.mode-tab-label {
font-size: 11px;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.6px;
padding-left: 4px;
}
.mode-tab-btn {
background: transparent;
border: 0;
font-family: var(--font-heading);
font-size: 12.5px;
font-weight: 700;
color: var(--text-body);
padding: 6px 14px;
border-radius: var(--radius-pill);
cursor: pointer;
transition: all 0.2s ease;
}
.mode-tab-btn.active {
background: var(--gold-gradient);
color: #152635;
} .annual-input-box {
background: var(--bg-white);
border: 1.5px solid var(--border-card);
border-radius: var(--radius-md);
padding: 24px 20px;
}
.annual-label {
display: block;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--text-muted);
margin-bottom: 8px;
}
.annual-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.annual-field {
width: 100%;
height: 58px;
background: var(--bg-sand-light);
border: 1.5px solid var(--border-card);
border-radius: var(--radius-sm);
padding: 0 95px 0 18px;
font-family: var(--font-heading);
font-size: 22px;
font-weight: 800;
color: var(--text-main);
outline: none;
transition: all 0.2s ease;
}
.annual-field:focus {
border-color: var(--primary-gold);
background: #FFFFFF;
}
.annual-input-wrap .unit-tag {
position: absolute;
right: 14px;
font-family: var(--font-heading);
font-size: 13.5px;
font-weight: 800;
color: var(--gold-text);
background: var(--gold-soft-bg);
padding: 4px 10px;
border-radius: var(--radius-pill);
pointer-events: none;
}
.quick-presets {
display: flex;
align-items: center;
gap: 8px;
margin-top: 14px;
flex-wrap: wrap;
}
.quick-presets span {
font-size: 11px;
font-weight: 700;
color: var(--text-muted);
}
.preset-pill {
background: var(--bg-sand-light);
border: 1px solid var(--border-card);
color: var(--text-body);
font-family: var(--font-body);
font-size: 11.5px;
font-weight: 700;
padding: 4px 10px;
border-radius: var(--radius-pill);
cursor: pointer;
transition: all 0.2s ease;
}
.preset-pill:hover {
background: var(--primary-gold);
color: #FFFFFF;
border-color: var(--primary-gold);
} .sample-btn {
background: var(--bg-white);
border: 1.5px solid var(--primary-gold);
color: var(--primary-gold);
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
padding: 7px 14px;
border-radius: var(--radius-pill);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.2s ease;
}
.sample-btn:hover {
background: var(--primary-gold);
color: #FFFFFF;
}
.months-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.month-field {
background: var(--bg-white);
border: 1.5px solid var(--border-card);
border-radius: var(--radius-sm);
padding: 8px 10px;
transition: all 0.2s ease;
}
.month-field:focus-within {
border-color: var(--primary-gold);
}
.month-field label {
display: block;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 3px;
}
.input-wrap {
position: relative;
display: flex;
align-items: center;
}
.month-input {
width: 100%;
height: 34px;
border: 0;
background: transparent;
font-family: var(--font-heading);
font-size: 15px;
font-weight: 700;
color: var(--text-main);
outline: none;
padding-right: 36px;
}
.month-input::-webkit-outer-spin-button,
.month-input::-webkit-inner-spin-button,
.annual-field::-webkit-outer-spin-button,
.annual-field::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.month-input[type=number],
.annual-field[type=number] {
-moz-appearance: textfield;
}
.input-wrap span {
position: absolute;
right: 0;
font-size: 11px;
font-weight: 700;
color: var(--text-light-muted);
pointer-events: none;
} .live-calculation-banner {
background: var(--bg-white);
border: 1.5px solid var(--border-card);
border-radius: var(--radius-md);
padding: 16px 20px;
margin: 18px 0;
}
.live-calc-left {
display: flex;
flex-direction: column;
gap: 8px;
}
.live-total-line {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: var(--text-body);
}
.live-total-line strong {
font-family: var(--font-heading);
font-size: 17px;
font-weight: 800;
color: var(--text-main);
}
.live-recommendation-line {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-main);
border-top: 1px solid var(--border-light);
padding-top: 8px;
}
.live-recommendation-line strong {
font-family: var(--font-heading);
font-size: 20px;
font-weight: 800;
color: var(--gold-text);
background: var(--gold-soft-bg);
padding: 2px 12px;
border-radius: var(--radius-pill);
border: 1px solid rgba(52, 120, 168, 0.3);
}
.form-error {
color: #C93434;
font-size: 12px;
font-weight: 600;
text-align: right;
min-height: 18px;
margin-top: 4px;
} .fields-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.form-group label {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--text-body);
margin-bottom: 5px;
}
.form-group input,
.form-group select {
width: 100%;
height: 46px;
background: var(--bg-white);
border: 1.5px solid var(--border-card);
border-radius: var(--radius-sm);
padding: 0 12px;
font-family: var(--font-body);
font-size: 13.5px;
font-weight: 500;
color: var(--text-main);
outline: none;
transition: all 0.2s ease;
}
.form-group input:focus,
.form-group select:focus {
border-color: var(--primary-gold);
}
.select-wrap {
position: relative;
}
.select-wrap select {
appearance: none;
-webkit-appearance: none;
cursor: pointer;
}
.select-wrap::after {
content: '';
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid var(--text-muted);
pointer-events: none;
} .step-nav-bar {
display: flex;
align-items: center;
gap: 12px;
margin-top: 14px;
}
.step-nav-bar.flex-end {
justify-content: flex-end;
}
.step-nav-bar.space-between {
justify-content: space-between;
}
.btn-step-prev {
background: var(--bg-white);
border: 1.5px solid var(--border-card);
color: var(--text-body);
font-family: var(--font-heading);
font-size: 13.5px;
font-weight: 700;
padding: 12px 22px;
border-radius: var(--radius-pill);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.2s ease;
}
.btn-step-prev:hover {
background: #f4f3ee;
border-color: #d9e1e5;
color: var(--text-main);
}
.btn-step-next {
background: var(--gold-gradient);
border: 0;
color: #152635;
font-family: var(--font-heading);
font-size: 14.5px;
font-weight: 800;
padding: 13px 26px;
border-radius: var(--radius-pill);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.2s ease;
}
.btn-step-next:hover {
background: linear-gradient(135deg, #3478a8 0%, #3478a8 50%, #3478a8 100%);
}
.nav-btn-arrow {
font-size: 15px;
font-weight: 800;
transition: transform 0.2s ease;
}
.btn-step-next:hover .nav-btn-arrow {
transform: translateX(2px);
}
.btn-step-prev:hover .nav-btn-arrow {
transform: translateX(-2px);
} .calculate-btn {
height: 50px;
border: 0;
border-radius: var(--radius-pill);
background: var(--gold-gradient);
color: #152635;
font-family: var(--font-heading);
font-size: 15px;
font-weight: 800;
letter-spacing: 0.3px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 28px;
gap: 10px;
cursor: pointer;
transition: all 0.2s ease;
}
.calculate-btn:hover {
background: linear-gradient(135deg, #3478a8 0%, #3478a8 50%, #3478a8 100%);
}
.btn-arrow-circle {
width: 26px;
height: 26px;
background: rgba(26, 19, 5, 0.12);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease;
}
.calculate-btn:hover .btn-arrow-circle {
transform: translateX(3px);
} .result {
position: relative;
overflow: hidden;
background: #14171A;
color: #FFFFFF;
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.12);
margin-top: 28px;
padding: 44px 32px 36px;
text-align: center;
}
.result-glow {
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
background: rgba(52, 120, 168, 0.15);
filter: blur(50px);
top: -150px;
left: calc(50% - 150px);
pointer-events: none;
}
.result-badge {
display: inline-block;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
color: #51616c;
margin-bottom: 16px;
background: rgba(52, 120, 168, 0.12);
border: 1px solid rgba(52, 120, 168, 0.3);
padding: 4px 14px;
border-radius: var(--radius-pill);
}
.result-hero-metric {
display: flex;
justify-content: center;
align-items: baseline;
gap: 10px;
margin: 6px 0;
}
.capacity-val {
font-family: var(--font-heading);
font-size: clamp(60px, 9vw, 92px);
font-weight: 800;
letter-spacing: -2px;
line-height: 1;
background: linear-gradient(135deg, #FFFFFF 30%, #3478a8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.capacity-unit {
font-family: var(--font-heading);
font-size: clamp(20px, 3vw, 30px);
font-weight: 800;
color: var(--primary-gold);
}
.result-desc {
color: #9EABB8;
font-size: 14.5px;
max-width: 440px;
margin: 0 auto 26px;
}
.result-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
max-width: 780px;
margin: 0 auto 22px;
}
.stat-box {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-md);
padding: 16px 12px;
text-align: center;
transition: all 0.2s ease;
}
.stat-box:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(52, 120, 168, 0.3);
}
.stat-icon {
width: 32px;
height: 32px;
background: rgba(52, 120, 168, 0.15);
color: #51616c;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 8px;
}
.stat-box small {
display: block;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: #8C9CAE;
margin-bottom: 4px;
}
.stat-box b {
font-family: var(--font-heading);
font-size: 16px;
font-weight: 700;
color: #FFFFFF;
}
.disclaimer {
display: block;
color: #6C7D90;
font-size: 11px;
max-width: 560px;
margin: 0 auto;
line-height: 1.5;
} #contact-result h2 {
font-family: var(--font-heading);
font-size: 26px;
margin-bottom: 8px;
}
#contact-result p {
color: #BAC2CB;
font-size: 14.5px;
max-width: 480px;
margin: 0 auto 20px;
}
.contact-symbol {
width: 60px;
height: 60px;
background: var(--gold-gradient);
color: #152635;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
}
.contact-card-actions {
margin-bottom: 16px;
}
.btn-primary-gold {
background: var(--gold-gradient);
color: #152635;
font-weight: 700;
font-size: 13.5px;
padding: 11px 24px;
border-radius: var(--radius-pill);
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
cursor: pointer;
}
.reset-btn {
margin-top: 24px;
background: transparent;
border: 1.5px solid rgba(255, 255, 255, 0.25);
color: #FFFFFF;
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
padding: 9px 18px;
border-radius: var(--radius-pill);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.2s ease;
}
.reset-btn:hover {
background: rgba(255, 255, 255, 0.12);
border-color: #FFFFFF;
}
.result-actions {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
}
.result-actions .reset-btn {
margin-top: 0;
}
.offer-request-btn,
.offer-submit-btn {
min-height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 9px 20px;
border: 0;
border-radius: 999px;
background: #152635;
color: #ffffff;
font-family: var(--font-heading);
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.uni-calculator-page .offer-request-btn,
.uni-calculator-page .offer-submit-btn,
.uni-calculator-page .offer-request-btn:hover,
.uni-calculator-page .offer-submit-btn:hover,
.uni-calculator-page .offer-request-btn:focus,
.uni-calculator-page .offer-submit-btn:focus {
border: 0;
background: #152635;
color: #ffffff;
}
body.offer-modal-open {
overflow: hidden;
}
.offer-modal[hidden] {
display: none;
}
.offer-modal {
position: fixed;
inset: 0;
z-index: 100000;
display: grid;
place-items: center;
padding: 24px;
}
.offer-modal-backdrop {
position: absolute;
inset: 0;
background: rgb(30 26 22 / 68%);
backdrop-filter: blur(8px);
}
.offer-modal-panel {
position: relative;
z-index: 1;
width: min(820px, 100%);
max-height: calc(100vh - 48px);
overflow-y: auto;
padding: 42px;
border: 1px solid #f4f3ee;
border-radius: 28px;
background: #f4f3ee;
color: #152635;
text-align: left;
box-shadow: 0 30px 90px rgb(24 19 14 / 24%);
}
.offer-modal-close {
position: absolute;
top: 18px;
right: 18px;
width: 38px;
height: 38px;
padding: 0;
border: 1px solid #f4f3ee;
border-radius: 50%;
background: #fff;
color: #152635;
font-size: 0;
line-height: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0 !important;
transition: background-color .35s ease, border-color .35s ease, transform .35s cubic-bezier(.65, .05, 0, 1);
}
.offer-modal-close svg {
display: block;
width: 16px;
height: 16px;
flex: 0 0 16px;
transition: transform .45s cubic-bezier(.65, .05, 0, 1);
}
.offer-modal-close:hover {
transform: scale(.94);
}
.offer-modal-close:hover svg {
transform: rotate(90deg);
}
.offer-modal-intro {
max-width: 650px;
margin-bottom: 28px;
}
.offer-modal-eyebrow {
display: block;
margin-bottom: 10px;
color: #51616c;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.4px;
}
.offer-modal-intro h2 {
margin: 0 0 10px;
font-size: clamp(30px, 4vw, 48px);
font-weight: 500;
line-height: 1.05;
letter-spacing: -2px;
}
.offer-modal-intro p {
margin: 0;
color: #657580;
font-size: 14px;
}
.offer-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.offer-form label {
display: block;
}
.offer-form label > span {
display: block;
margin: 0 0 6px;
color: #657580;
font-size: 10px;
font-weight: 800;
letter-spacing: .5px;
text-transform: uppercase;
}
.offer-form input,
.offer-form textarea {
width: 100%;
border: 1px solid #f4f3ee;
border-radius: 14px;
background: #fff;
color: #152635;
font: 500 13px/1.5 var(--font-body);
outline: 0;
}
.offer-form input {
height: 48px;
padding: 0 14px;
}
.offer-form textarea {
min-height: 230px;
padding: 14px;
resize: vertical;
}
.offer-form input:focus,
.offer-form textarea:focus {
border-color: #3478a8;
box-shadow: 0 0 0 3px rgb(52 120 168 / 15%);
}
.offer-message-field {
grid-column: 1 / -1;
}
.offer-form-trap {
position: absolute !important;
left: -9999px !important;
}
.offer-form-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 20px;
}
.offer-form-status {
margin: 0;
color: #657580;
font-size: 12px;
}
.offer-form-status.is-success {
color: #357a42;
}
.offer-form-status.is-error {
color: #b43232;
}
.offer-submit-btn {
min-height: 48px;
flex: 0 0 auto;
padding-inline: 24px;
}
.offer-submit-btn:disabled {
opacity: .55;
cursor: wait;
} .calc-simple-footer {
text-align: center;
margin-top: 32px;
font-size: 12px;
color: var(--text-muted);
} @media (max-width: 860px) {
.stepper-bar {
grid-template-columns: 1fr;
gap: 6px;
padding: 8px;
}
.step-divider {
display: none;
}
.tariff-grid {
grid-template-columns: repeat(2, 1fr);
}
.mode-choice-grid {
grid-template-columns: 1fr;
}
.months-grid {
grid-template-columns: repeat(3, 1fr);
}
.fields-grid {
grid-template-columns: 1fr;
}
.result-stats {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.calc-app-wrapper {
margin-top: 10px;
padding: 0 12px;
}
.stepper-bar {
display: flex;
justify-content: space-between;
padding: 8px 10px;
}
.step-item {
padding: 4px;
gap: 6px;
}
.step-info {
display: none;
}
.step-bubble {
width: 34px;
height: 34px;
font-size: 12px;
}
.figma-card {
padding: 18px 14px;
}
.tariff-grid {
grid-template-columns: 1fr;
}
.months-grid {
grid-template-columns: repeat(2, 1fr);
}
.step-nav-bar {
flex-direction: column;
width: 100%;
}
.btn-step-prev,
.btn-step-next,
.calculate-btn {
width: 100%;
justify-content: center;
}
.annual-field {
font-size: 19px;
height: 50px;
padding: 0 75px 0 14px;
}
.live-calculation-banner {
padding: 12px 14px;
}
.live-recommendation-line {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.result {
padding: 30px 14px 24px;
}
.capacity-val {
font-size: 52px;
}
}
@media (max-width: 380px) {
.months-grid {
grid-template-columns: 1fr;
}
} .uni-calculator-page {
--primary-gold: #3478a8;
--primary-gold-hover: #3478a8;
--gold-gradient: #3478a8;
--gold-soft-bg: #f4f3ee;
--gold-text: #3478a8;
--bg-page: #fff;
--bg-sand-card: #f4f3ee;
--bg-sand-light: #f4f3ee;
--border-light: #f4f3ee;
--border-card: #f4f3ee;
--border-gold: #3478a8;
--dark-hero-bg: #152635;
--dark-card: #152635;
--dark-surface: #152635;
--text-main: #152635;
--text-body: #657580;
--text-muted: #657580;
--text-light-muted: #d9e1e5;
--radius-lg: 30px;
--radius-md: 18px;
--radius-sm: 12px;
--font-heading: 'Space Grotesk', 'Instrument Sans', sans-serif;
--font-body: 'Instrument Sans', 'Instrument Sans', sans-serif;
width: calc(100% - 64px);
max-width: 1380px;
min-height: auto;
margin: 0 auto;
padding: 120px 0 110px;
background: #fff;
}
.uni-calculator-page .calc-top-header {
max-width: 920px;
margin: 0 0 56px;
text-align: left;
}
.uni-calculator-page .brand-mini-badge {
gap: 7px;
margin: 0 0 16px;
padding: 0;
border: 0;
background: transparent;
color: #51616c;
font-size: 11px;
letter-spacing: 1.65px;
}
.uni-calculator-page .brand-sun-icon {
width: 28px;
height: 28px;
background: #152635;
color: #ffffff;
}
.uni-calculator-page .calc-main-title {
margin: 0 0 16px;
color: #152635;
font-size: clamp(54px, 6vw, 82px);
font-weight: 400;
line-height: 1.04;
letter-spacing: -5px;
}
.uni-calculator-page .calc-main-subtitle {
max-width: 710px;
margin: 0;
color: #657580;
font-size: 17px;
line-height: 1.7;
}
.uni-calculator-page .stepper-bar {
margin: 0 0 32px;
padding: 10px 14px 14px;
border: 1px solid #f4f3ee;
border-radius: 24px;
background: #fff;
box-shadow: 0 16px 40px rgb(67 53 36 / 5%);
}
.uni-calculator-page .step-item {
min-height: 72px;
padding: 12px 18px;
border-radius: 16px;
}
.uni-calculator-page .step-item.active {
border-color: rgb(52 120 168 / 48%);
background: #f4f3ee;
}
.uni-calculator-page .step-bubble,
.uni-calculator-page .step-num {
background: #fff;
border-color: #f4f3ee;
}
.uni-calculator-page .step-item.active .step-bubble,
.uni-calculator-page .step-item.completed .step-bubble {
border-color: #3478a8;
background: #152635;
color: #ffffff;
}
.uni-calculator-page .stepper-bottom-fill {
background: #152635;
}
.uni-calculator-page .figma-card {
margin-bottom: 28px;
padding: 44px;
border: 0;
border-radius: 30px;
background: #f4f3ee;
}
.uni-calculator-page .card-header {
gap: 18px;
margin-bottom: 32px;
}
.uni-calculator-page .step-text h3 {
color: #152635;
font-size: 22px;
font-weight: 600;
letter-spacing: -.5px;
}
.uni-calculator-page .step-text p {
color: #657580;
font-size: 14px;
}
.uni-calculator-page .tariff-grid,
.uni-calculator-page .mode-choice-grid {
gap: 18px;
}
.uni-calculator-page .tariff-option,
.uni-calculator-page .mode-choice-btn,
.uni-calculator-page .month-field {
border: 1px solid #f4f3ee;
border-radius: 18px;
background: #fff;
box-shadow: none;
}
.uni-calculator-page .tariff-option {
min-height: 148px;
padding: 22px 20px;
}
.uni-calculator-page .tariff-option:hover,
.uni-calculator-page .mode-choice-btn:hover,
.uni-calculator-page .month-field:focus-within {
border-color: #3478a8;
background: #fff;
transform: translateY(-3px);
}
.uni-calculator-page .tariff-option.selected,
.uni-calculator-page .mode-choice-btn.active {
border-color: #3478a8;
background: #f4f3ee;
box-shadow: 0 14px 30px rgb(67 53 36 / 7%);
}
.uni-calculator-page .tariff-code-pill,
.uni-calculator-page .mode-pill-tag {
border-color: rgb(52 120 168 / 40%);
background: #f4f3ee;
color: #51616c;
}
.uni-calculator-page .tariff-check-icon {
background: #f4f3ee;
color: #fff;
}
.uni-calculator-page .tariff-option.selected .tariff-check-icon {
background: #152635;
color: #ffffff;
}
.uni-calculator-page .mode-arrow-circle {
background: #f4f3ee;
color: #657580;
}
.uni-calculator-page .mode-choice-btn:hover .mode-arrow-circle,
.uni-calculator-page .mode-choice-btn.active .mode-arrow-circle {
background: #152635;
color: #ffffff;
}
.uni-calculator-page .mode-choice-btn {
min-height: 190px;
padding: 28px;
}
.uni-calculator-page .mode-tab-bar,
.uni-calculator-page .live-calculation-banner {
border: 0;
border-radius: 18px;
background: #f4f3ee;
}
.uni-calculator-page .mode-tab-bar {
gap: 6px;
padding: 5px 8px 5px 12px;
}
.uni-calculator-page .mode-tab-btn {
padding: 7px 15px;
background: #fff !important;
color: #152635 !important;
}
.uni-calculator-page .mode-tab-btn.active {
background: #152635 !important;
color: #ffffff;
box-shadow: none;
}
.uni-calculator-page .mode-tab-btn:hover,
.uni-calculator-page .mode-tab-btn:focus,
.uni-calculator-page .mode-tab-btn:focus-visible {
background: #f4f3ee !important;
color: #152635 !important;
}
.uni-calculator-page .mode-tab-btn.active:hover,
.uni-calculator-page .mode-tab-btn.active:focus,
.uni-calculator-page .mode-tab-btn.active:focus-visible {
background: #152635 !important;
}
.uni-calculator-page .annual-input-box,
.uni-calculator-page .form-group input,
.uni-calculator-page .form-group select,
.uni-calculator-page .input-wrap {
border-color: #f4f3ee;
border-radius: 14px;
background: #fff;
}
.uni-calculator-page .annual-field:focus,
.uni-calculator-page .form-group input:focus,
.uni-calculator-page .form-group select:focus,
.uni-calculator-page .month-field:focus-within {
border-color: #3478a8;
box-shadow: 0 0 0 3px rgb(52 120 168 / 16%);
}
.uni-calculator-page .preset-pill,
.uni-calculator-page .sample-btn {
border-color: #f4f3ee;
background: #fff;
color: #657580;
}
.uni-calculator-page .preset-pill:hover,
.uni-calculator-page .sample-btn:hover {
border-color: #3478a8;
background: #f4f3ee;
color: #152635;
}
.uni-calculator-page .btn-step-next,
.uni-calculator-page .calculate-btn,
.uni-calculator-page .btn-primary-gold {
border: 0;
border-radius: 999px;
background: #152635;
color: #ffffff;
box-shadow: none;
}
.uni-calculator-page .btn-step-next:hover,
.uni-calculator-page .calculate-btn:hover,
.uni-calculator-page .btn-primary-gold:hover {
background: #152635;
color: #ffffff;
transform: translateY(-2px);
}
.uni-calculator-page .btn-step-prev {
border-color: #d9e1e5;
background: #fff;
color: #657580;
}
.uni-calculator-page .result {
margin-top: 48px;
padding: 64px;
border-radius: 30px;
background: #152635;
box-shadow: none;
}
.uni-calculator-page .result-glow {
display: none;
}
.uni-calculator-page .result-badge {
border-color: rgb(52 120 168 / 35%);
background: rgb(52 120 168 / 10%);
color: #51616c;
}
.uni-calculator-page .capacity-val,
.uni-calculator-page .capacity-unit {
color: #51616c;
}
.uni-calculator-page .stat-box {
border-color: rgb(255 255 255 / 10%);
border-radius: 18px;
background: rgb(255 255 255 / 5%);
}
.uni-calculator-page .stat-icon,
.uni-calculator-page .contact-symbol {
background: #152635;
color: #ffffff;
}
.uni-calculator-page #monthly-input-section {
padding: 48px;
}
.uni-calculator-page #monthly-input-section .card-header {
margin-bottom: 36px;
padding-bottom: 28px;
border-bottom: 1px solid #f4f3ee;
}
.uni-calculator-page #monthly-input-section .header-left {
gap: 20px;
}
.uni-calculator-page #monthly-input-section .step-num {
width: 44px;
height: 44px;
border-color: rgb(52 120 168 / 55%);
color: #51616c;
}
.uni-calculator-page #monthly-input-section .sample-btn {
min-height: 44px;
padding: 10px 18px;
border: 1px solid rgb(52 120 168 / 55%);
background: #f4f3ee;
color: #51616c;
}
.uni-calculator-page #monthly-input-section .sample-btn:hover {
border-color: #3478a8;
background: #152635;
color: #ffffff;
transform: translateY(-2px);
}
.uni-calculator-page .months-grid {
gap: 16px;
}
.uni-calculator-page .month-field {
min-width: 0;
padding: 14px;
border-color: transparent;
border-radius: 18px;
background: #fff;
transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.uni-calculator-page .month-field:hover {
transform: translateY(-3px);
box-shadow: 0 14px 30px rgb(67 53 36 / 7%);
}
.uni-calculator-page .month-field:focus-within {
border-color: transparent;
background: #fff;
transform: none;
box-shadow: none;
}
.uni-calculator-page .month-field label {
display: flex;
align-items: center;
gap: 9px;
margin: 0 0 10px;
color: #657580;
font-size: 11px;
font-weight: 800;
letter-spacing: .8px;
}
.uni-calculator-page .month-index {
display: inline-flex;
width: 27px;
height: 27px;
flex: 0 0 27px;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #f4f3ee;
color: #51616c;
font-size: 9px;
letter-spacing: 0;
}
.uni-calculator-page .month-field .input-wrap {
min-height: 48px;
padding: 0 14px;
border: 1px solid #f4f3ee;
border-radius: 13px;
background: #fff;
transition: border-color .2s ease, box-shadow .2s ease;
}
.uni-calculator-page .month-field .input-wrap:focus-within {
border-color: #3478a8;
background: #fff;
box-shadow: 0 0 0 3px rgb(52 120 168 / 14%);
}
.uni-calculator-page .month-input {
height: 46px;
padding: 0 44px 0 0;
border: 0 !important;
border-radius: 0;
background: transparent;
box-shadow: none !important;
color: #152635;
font-size: 18px;
font-weight: 600;
}
.uni-calculator-page .month-input:focus,
.uni-calculator-page .month-input:focus-visible {
outline: 0 !important;
border: 0 !important;
box-shadow: none !important;
}
.uni-calculator-page .month-field .input-wrap > span {
right: 14px;
color: #d9e1e5;
font-size: 10px;
letter-spacing: .3px;
}
.uni-calculator-page .location-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
margin-top: 10px;
}
.uni-calculator-page .location-map-btn {
padding: 0;
border: 0;
background: transparent;
color: #51616c;
font-size: 12px;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.uni-calculator-page .location-map-btn:hover,
.uni-calculator-page .location-map-btn:focus-visible {
background: transparent;
color: #51616c;
}
.uni-calculator-page .location-map-btn:disabled {
opacity: .55;
cursor: wait;
}
.uni-calculator-page .location-map-link {
color: #657580;
font-size: 12px;
font-weight: 600;
text-decoration-color: #3478a8;
text-underline-offset: 3px;
}
.uni-calculator-page .location-status {
display: block;
min-height: 18px;
margin-top: 6px;
color: #657580;
font-size: 11px;
line-height: 1.5;
}
.uni-calculator-page .location-picker {
margin-top: 22px;
padding: 14px;
border: 1px solid #f4f3ee;
border-radius: 20px;
background: #fff;
}
.uni-calculator-page .location-picker-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 4px 4px 14px;
}
.uni-calculator-page .location-picker-heading strong,
.uni-calculator-page .location-picker-heading span {
display: block;
}
.uni-calculator-page .location-picker-heading strong {
margin-bottom: 3px;
color: #152635;
font-size: 14px;
}
.uni-calculator-page .location-picker-heading > div:first-child > span {
color: #657580;
font-size: 11px;
}
.uni-calculator-page .location-coordinates {
display: flex;
flex: 0 0 auto;
gap: 8px;
}
.uni-calculator-page .location-coordinates span {
padding: 7px 10px;
border-radius: 999px;
background: #f4f3ee;
color: #657580;
font-size: 10px;
}
.uni-calculator-page .location-coordinates b {
color: #152635;
font-weight: 700;
}
.uni-calculator-page .location-map {
z-index: 1;
width: 100%;
height: 330px;
overflow: hidden;
border-radius: 14px;
background: #f4f3ee;
}
.uni-calculator-page .location-map .leaflet-control-zoom a {
color: #152635;
}
.uni-calculator-page .location-map .leaflet-control-attribution {
font-size: 9px;
}
.uni-calculator-page .calc-gsap-button {
transform-origin: 50% 50%;
will-change: transform;
}
.uni-calculator-page .calc-button-text-track {
display: inline-flex;
height: 1.45em;
align-items: center;
overflow: hidden;
line-height: 1.45;
vertical-align: middle;
}
.uni-calculator-page .calc-button-text {
display: inline-flex;
align-items: center;
height: 100%;
line-height: 1.45;
white-space: nowrap;
}
.uni-calculator-page .calc-button-char {
display: inline-flex;
position: relative;
align-items: center;
line-height: 1.45;
text-shadow: 0 1.45em currentColor;
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
.uni-calculator-page .calc-gsap-button,
.uni-calculator-page .calc-button-char {
will-change: auto;
}
}
@media (max-width: 600px) {
.uni-calculator-page .location-picker-heading {
align-items: flex-start;
flex-direction: column;
}
.uni-calculator-page .location-coordinates {
width: 100%;
flex-wrap: wrap;
}
.uni-calculator-page .location-map {
height: 280px;
}
}
@media (max-width: 1024px) {
.uni-calculator-page {
width: calc(100% - 64px);
padding-top: 96px;
}
.uni-calculator-page .calc-main-title {
font-size: 64px;
letter-spacing: -4px;
}
.uni-calculator-page .figma-card {
padding: 34px;
}
}
@media (max-width: 767px) {
.uni-calculator-page {
width: calc(100% - 48px);
padding: 64px 0 80px;
}
.uni-calculator-page .calc-top-header {
margin-bottom: 40px;
}
.uni-calculator-page .calc-main-title {
font-size: clamp(44px, 13vw, 62px);
line-height: 1.06;
letter-spacing: -2.5px;
}
.uni-calculator-page .calc-main-subtitle {
font-size: 15px;
}
.uni-calculator-page .figma-card {
padding: 28px 20px;
border-radius: 24px;
}
.uni-calculator-page #monthly-input-section {
padding: 28px 20px;
}
.uni-calculator-page #monthly-input-section .card-header {
align-items: flex-start;
margin-bottom: 24px;
padding-bottom: 22px;
}
.uni-calculator-page .result {
padding: 44px 20px;
border-radius: 24px;
}
.uni-calculator-page .offer-modal {
padding: 12px;
}
.uni-calculator-page .offer-modal-panel {
max-height: calc(100vh - 24px);
padding: 36px 20px 24px;
border-radius: 22px;
}
.uni-calculator-page .offer-form-grid {
grid-template-columns: 1fr;
}
.uni-calculator-page .offer-message-field {
grid-column: auto;
}
.uni-calculator-page .offer-form-footer {
align-items: stretch;
flex-direction: column;
}
.uni-calculator-page .offer-submit-btn {
width: 100%;
}
} .uni-calculator-page .offer-request-btn,
.uni-calculator-page .offer-request-btn:hover,
.uni-calculator-page .offer-request-btn:focus,
.uni-calculator-page .offer-request-btn:focus-visible,
.uni-calculator-page .offer-submit-btn,
.uni-calculator-page .offer-submit-btn:hover,
.uni-calculator-page .offer-submit-btn:focus,
.uni-calculator-page .offer-submit-btn:focus-visible {
border-color: transparent !important;
background: #152635 !important;
color: #ffffff !important;
}
.uni-calculator-page .offer-modal-close,
.uni-calculator-page .offer-modal-close:hover,
.uni-calculator-page .offer-modal-close:focus,
.uni-calculator-page .offer-modal-close:focus-visible {
border: 1px solid #f4f3ee !important;
background: #fff !important;
color: #152635 !important;
}
.uni-calculator-page .offer-modal-close:hover,
.uni-calculator-page .offer-modal-close:focus-visible {
border-color: #3478a8 !important;
background: #152635 !important;
}
.uni-calculator-page .mode-tab-btn.active,
.uni-calculator-page .mode-tab-btn.active:hover,
.uni-calculator-page .mode-tab-btn.active:focus,
.uni-calculator-page .mode-tab-btn.active:focus-visible {
border-color: transparent !important;
background: #152635 !important;
color: #ffffff !important;
}
.uni-calculator-page .mode-tab-btn:not(.active),
.uni-calculator-page .mode-tab-btn:not(.active):hover,
.uni-calculator-page .mode-tab-btn:not(.active):focus,
.uni-calculator-page .mode-tab-btn:not(.active):focus-visible {
border-color: transparent !important;
background: #fff !important;
color: #152635 !important;
} .uni-calculator-page .annual-input-box {
padding: 20px;
border: 0;
border-radius: 18px;
background: #fff;
}
.uni-calculator-page .annual-input-wrap {
min-height: 52px;
padding: 0 12px 0 16px;
border: 1px solid #f4f3ee;
border-radius: 14px;
background: #faf7f2;
transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.uni-calculator-page .annual-input-wrap:focus-within {
border-color: #3478a8;
background: #fff;
box-shadow: 0 0 0 3px rgb(52 120 168 / 16%);
}
.uni-calculator-page .annual-field,
.uni-calculator-page .annual-field:hover,
.uni-calculator-page .annual-field:focus,
.uni-calculator-page .annual-field:focus-visible {
height: 50px;
padding: 0 100px 0 0;
border: 0 !important;
border-radius: 0;
outline: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #152635;
}
.uni-calculator-page .annual-input-wrap .unit-tag {
right: 12px;
padding: 5px 10px;
background: #f4f3ee;
color: #51616c;
}.uni-motion-button {
--uni-button-ease: cubic-bezier(.65, .05, 0, 1);
overflow: hidden;
position: relative;
isolation: isolate;
background-color: transparent !important;
transition: color 750ms var(--uni-button-ease);
}
.uni-button-bg {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
transition: transform 750ms var(--uni-button-ease),
background-color 750ms var(--uni-button-ease);
}
.uni-button-text-track {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 1.5em;
overflow: clip;
line-height: 1.5;
}
.uni-button-text {
position: relative;
display: flex;
align-items: center;
height: 100%;
line-height: 1.5;
white-space: nowrap;
}
.uni-button-char {
position: relative;
display: inline-flex;
align-items: center;
line-height: 1.5;
text-shadow: 0 1.5em currentColor;
transition: transform 750ms var(--uni-button-ease),
text-shadow 750ms var(--uni-button-ease);
will-change: transform;
}
.uni-split-heading .text-line {
display: block !important;
overflow: hidden;
padding: 0.1em 0.07em 0.15em;
margin: -0.1em -0.07em -0.15em;
}
.uni-split-heading .split-word {
display: inline-block;
will-change: transform, opacity;
}
.uni-motion-button:hover .uni-button-char,
.uni-motion-button:focus-visible .uni-button-char {
transform: translateY(-1.5em);
}
.uni-motion-button:hover .uni-button-bg,
.uni-motion-button:focus-visible .uni-button-bg {
transform: scale(.95);
}
@media (prefers-reduced-motion: reduce), (hover: none) {
.uni-button-char,
.uni-button-bg {
transition: none;
}
}.uni-company-results .uni-impact-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.uni-company-results .uni-impact-icon svg{width:38px;height:38px;color:#51616c}.uni-company-results .uni-impact-value{white-space:nowrap;font-variant-numeric:tabular-nums}.uni-company-results .uni-impact-value small{font-size:18px;margin-left:6px}.uni-results-note{font-size:12px;color:#657580;padding:0 32px 20px}.uni-service-symbol{width:54px;height:54px;padding:11px;background:#f4f3ee;border:1px solid #d9e1e5;border-radius:16px;color:#51616c;margin-bottom:18px}.uni-service-symbol svg{width:100%;height:100%}.uni-service-row-image:has(.uni-service-placeholder){background:#f4f3ee;display:grid;place-items:center}.uni-service-placeholder{width:160px;height:160px;padding:30px;color:#51616c;border:1px solid #d9e1e5;border-radius:50%}.uni-service-placeholder svg{width:100%;height:100%}.uni-project-state{display:inline-block;border-radius:99px;padding:5px 10px;font-size:11px;margin:8px 0;background:#ecf3e9;color:#35623a}.uni-project-state.is-ongoing{background:#f4f3ee;color:#51616c}.uni-project-status-filter{display:flex;gap:10px;align-items:center;margin:0 0 24px}.uni-project-status-filter select{width:auto;border:1px solid #f4f3ee;border-radius:10px;padding:10px;background:#fff}.uni-project-status-filter button{background:#152635;color: #ffffff;border:0;border-radius:99px;padding:11px 20px}.uni-partners-page{max-width:1440px;margin:auto;padding:160px 32px 80px}.uni-partners-page header{max-width:900px;margin-bottom:48px}.uni-partners-page h1{font-size:clamp(36px,5vw,72px);line-height:1.1;letter-spacing:-.04em}.uni-partners-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.uni-partners-grid article{border:1px solid #f4f3ee;border-radius:24px;padding:32px}.uni-partner-logo{height:140px;display:grid;place-items:center;border-radius:16px;background:#f4f3ee;margin-bottom:24px}.uni-partner-logo img{max-height:100px;max-width:85%;object-fit:contain}.uni-partner-logo span{color:#51616c;font-size:44px}.uni-partners-grid h2{font-size:25px}.uni-partners-grid p{color:#657580;line-height:1.7}@media(max-width:700px){.uni-partners-grid{grid-template-columns:1fr}.uni-partners-page{padding:120px 20px 48px}.uni-company-results .uni-impact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} .uni-company-results .uni-impact-icon{display:grid;place-items:center;width:76px;height:76px;margin:0 auto 22px;border:1px solid #d9e1e5;border-radius:23px;background:linear-gradient(145deg,#f4f3ee,#f4f3ee);box-shadow:inset 0 1px 0 #fff;color:#51616c}
.uni-company-results .uni-impact-icon svg{display:block;width:46px;height:46px;color:inherit;overflow:visible}
@media(max-width:600px){.uni-company-results .uni-impact-icon{width:64px;height:64px;border-radius:19px;margin-bottom:18px}.uni-company-results .uni-impact-icon svg{width:39px;height:39px}} .uni-partners-page .uni-partners-hero{max-width:none;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:50px;margin-bottom:80px}.uni-partners-heading .uni-page-kicker{color:#51616c;font-size:11px;letter-spacing:.15em}.uni-partners-page h1{margin:24px 0;font-size:clamp(42px,5.4vw,78px);line-height:1.04;letter-spacing:-.055em}.uni-partners-page h1>span{color:#51616c}.uni-partners-lead{max-width:520px;color:#657580;line-height:1.8;font-size:17px}.uni-partners-discover{display:inline-flex;gap:22px;align-items:center;color:#152635;margin-top:18px;font-weight:600}.uni-partners-discover>span{display:grid;place-items:center;width:38px;height:38px;border:1px solid #f4f3ee;border-radius:50%;transition:background .2s}.uni-partners-discover:hover>span{background:#152635}.uni-partners-network{position:relative;display:grid;place-items:center;aspect-ratio:1;max-height:440px;border-radius:36px;background:#f4f3ee;overflow:hidden}.uni-network-orbit{position:absolute;border:1px solid #f4f3ee;border-radius:50%;width:76%;height:76%}.uni-network-orbit.orbit-two{width:49%;height:49%;border-style:dashed}.uni-network-core{z-index:1;background:#152635;color:#fff;padding:24px 28px;border-radius:22px;font-size:23px;letter-spacing:-1px;font-weight:700;box-shadow:0 14px 35px #15263516}.uni-network-core>span{color:#51616c}.uni-network-node{position:absolute;display:grid;place-items:center;width:68px;height:68px;padding:16px;border:1px solid #f4f3ee;border-radius:20px;background:#fffdf9;color:#51616c;box-shadow:0 8px 24px #15263508}.uni-network-node svg{width:100%;height:100%}.node-one{top:9%;left:30%}.node-two{bottom:13%;left:12%}.node-three{right:7%;top:47%}.uni-network-dot{position:absolute;right:22%;top:14%;width:12px;height:12px;background:#152635;border-radius:50%;box-shadow:0 0 0 7px #f4f3ee}.uni-partners-collection{scroll-margin-top:120px}.uni-partners-section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #f4f3ee;padding-bottom:24px;margin-bottom:30px}.uni-partners-section-heading h2{font-size:30px;letter-spacing:-.035em;margin:0}.uni-partners-section-heading>span{font-size:10px;letter-spacing:.12em;color:#657580}.uni-partners-grid .uni-partner-story{padding:0;border:0;border-radius:0;background:transparent}.uni-partner-story .uni-partner-logo{position:relative;height:250px;border:1px solid #f4f3ee;border-radius:24px;background:#f4f3ee;overflow:hidden;margin:0;transition:background .25s,border-color .25s}.uni-partner-story:hover .uni-partner-logo{background:#f4f3ee;border-color:#d9e1e5}.uni-partner-story:nth-child(even) .uni-partner-logo{background:#f1f0eb}.uni-partner-story .uni-partner-logo img{max-width:65%;max-height:120px;transition:transform .35s}.uni-partner-story:hover .uni-partner-logo img{transform:scale(1.04)}.uni-partner-logo .uni-partner-index{position:absolute;top:20px;left:22px;font-size:12px;color:#657580}.uni-partner-logo .uni-partner-mark{position:absolute;right:20px;bottom:17px;font-size:23px;color:#d9e1e5}.uni-partner-logo .uni-partner-placeholder{width:80px;height:80px;color:#51616c}.uni-partner-placeholder svg{width:100%;height:100%}.uni-partner-story-copy{padding:24px 8px}.uni-partners-grid .uni-partner-caption{font-size:10px;letter-spacing:.13em;color:#51616c;margin:0 0 12px}.uni-partner-story h3{font-size:26px;letter-spacing:-.035em;margin:0 0 14px}.uni-partner-story-copy>p:last-child{font-size:15px;line-height:1.8}.uni-partners-invitation{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-top:60px;padding:38px 42px;border-radius:26px;background:#152635;color:#fff}.uni-partners-invitation .uni-page-kicker{color:#51616c;font-size:10px;letter-spacing:.12em}.uni-partners-invitation h2{font-size:clamp(25px,3vw,36px);letter-spacing:-.035em;margin:12px 0 0}.uni-partners-invitation>a{display:inline-flex;align-items:center;gap:20px;flex-shrink:0;background:#152635;color: #ffffff;border-radius:99px;padding:16px 24px;font-weight:600;transition:background .2s}.uni-partners-invitation>a:hover{background:#152635}.uni-partners-page a:focus-visible{outline:2px solid #3478a8;outline-offset:5px}@media(max-width:900px){.uni-partners-page .uni-partners-hero{gap:30px}.uni-partners-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.uni-network-node{width:54px;height:54px;padding:12px}.uni-network-core{font-size:19px;padding:20px}.uni-partners-invitation{align-items:flex-start;flex-direction:column}}@media(max-width:600px){.uni-partners-page .uni-partners-hero{grid-template-columns:1fr;margin-bottom:48px}.uni-partners-network{width:100%;max-height:340px}.uni-partners-grid{grid-template-columns:1fr}.uni-partners-section-heading{align-items:flex-start;flex-direction:column;gap:12px}.uni-partner-story .uni-partner-logo{height:220px}.uni-partners-invitation{padding:30px 24px;margin-top:36px}.uni-partners-invitation>a{font-size:14px;padding:14px 20px}}@media(prefers-reduced-motion:reduce){.uni-partner-story .uni-partner-logo,.uni-partner-story .uni-partner-logo img{transition:none}} .uni-partners-editorial{max-width:1320px;margin:auto;padding:160px 40px 72px;color:#152635}.uni-partners-editorial-heading{padding-bottom:64px;max-width:800px}.uni-partners-editorial-heading>p{font-size:11px;letter-spacing:.13em;color:#51616c;margin:0 0 22px}.uni-partners-editorial h1{font-size:clamp(44px,6vw,78px);font-weight:500;line-height:1.08;letter-spacing:-.05em;margin:0 0 24px}.uni-partners-editorial-heading>div{font-size:17px;line-height:1.7;color:#657580;max-width:520px}.uni-partner-editorial-row{display:grid;grid-template-columns:minmax(180px,1fr) minmax(0,1.5fr);gap:80px;align-items:center;padding:56px 0;border-top:1px solid #f4f3ee}.uni-partner-editorial-logo{min-height:130px;display:flex;align-items:center;justify-content:flex-start;padding:12px 24px 12px 0}.uni-partner-editorial-logo img{width:auto;max-width:260px;max-height:105px;object-fit:contain}.uni-partner-editorial-logo>span{font-size:28px;letter-spacing:-.035em;color:#657580;font-weight:500}.uni-partner-editorial-copy h2{font-size:27px;letter-spacing:-.025em;font-weight:500;margin:0 0 16px}.uni-partner-editorial-copy p{max-width:560px;color:#657580;font-size:16px;line-height:1.85;margin:0}.uni-partners-editorial-contact{display:flex;justify-content:space-between;gap:24px;align-items:center;border-top:1px solid #f4f3ee;padding-top:32px;margin-top:16px}.uni-partners-editorial-contact p{color:#657580;margin:0}.uni-partners-editorial-contact a{color:#152635;display:inline-flex;gap:24px;align-items:center;padding:8px 0;border-bottom:1px solid #3478a8}.uni-partners-editorial-contact a:hover{color:#51616c}.uni-partners-editorial a:focus-visible{outline:2px solid #3478a8;outline-offset:5px}@media(max-width:700px){.uni-partners-editorial{padding:120px 24px 48px}.uni-partners-editorial-heading{padding-bottom:40px}.uni-partner-editorial-row{grid-template-columns:1fr;gap:20px;padding:32px 0}.uni-partner-editorial-logo{min-height:80px;padding:0}.uni-partner-editorial-logo img{max-width:220px;max-height:80px}.uni-partner-editorial-copy h2{font-size:24px}.uni-partners-editorial-contact{align-items:flex-start;flex-direction:column;gap:12px}}:root{--uni-navy:#152635;--uni-blue:#3478a8;--uni-green:#75c16a;--uni-yellow:#ffc745;--uni-paper:#f4f3ee;--uni-border:#deded7;--uni-muted:#6d777b}
body{color:var(--uni-navy);background:#fff}
.uni-calculator-page{--primary-gold:#152635;--primary-gold-hover:#284556;--gold-gradient:linear-gradient(135deg,#152635,#284556);--gold-soft-bg:#f4f3ee;--gold-text:#51616c;--bg-page:#fff;--bg-sand-card:#f4f3ee;--bg-sand-light:#f8f8f5;--border-gold:#3478a8;--dark-hero-bg:#152635;--dark-card:#152635}
.uni-header .uni-header-bar{background:rgba(244,243,238,.94);border-color:rgba(255,255,255,.45)}
.uni-header.is-logo-only .uni-header-bar{background:rgba(244,243,238,.96)}
.uni-header .uni-header-button,.uni-hero-link--primary,.uni-services-all,.uni-projects-all,.uni-contact-form button[type=submit],.uni-career .uni-career-form button[type=submit],.uni-career .uni-job-apply{background:#152635;color:#fff;border-color:#152635}
.uni-header .uni-header-button:hover,.uni-hero-link--primary:hover,.uni-services-all:hover,.uni-projects-all:hover,.uni-contact-form button[type=submit]:hover,.uni-career .uni-career-form button[type=submit]:hover,.uni-career .uni-job-apply:hover{background:#284556;color:#fff;border-color:#284556}
.uni-hero-highlight,.uni-hero-title .is-highlight{color:#75c16a}
.uni-hero-link--secondary{color:#fff}
.uni-hero .uni-hero-link--primary{background:#f4f3ee;color:#152635;border-color:#f4f3ee}
.uni-hero .uni-hero-link--primary:hover{background:#fff;color:#152635}
.uni-hero-controls .uni-hero-progress-fill{background:#ffc745}
.uni-service-symbol,.uni-company-results .uni-impact-icon{background:#f4f3ee;border-color:#deded7;color:#152635;box-shadow:none}
.uni-company-results .uni-impact-value{color:#152635}.uni-company-results .uni-impact-label{color:#6d777b}
.uni-service-row-image:has(.uni-service-placeholder){background:#f4f3ee}.uni-service-placeholder{color:#51616c;border-color:#deded7}
.uni-career-card,.uni-contact-form-card,.uni-career-success,.uni-career-empty{background:#f4f3ee;border-color:#deded7}
.uni-career .uni-cv-drop{background:#fcfcfa;border-color:#cdd2cf}.uni-career .uni-cv-drop .uni-upload-icon{color:#51616c}
.uni-career .uni-career-form .uni-document-remove{background:#f4f3ee;color:#152635;border-color:#deded7}.uni-career .uni-career-form .uni-document-remove:hover{background:#152635;color:#fff}
.uni-career .uni-career-consent input[type=checkbox]:checked{background:#152635;border-color:#152635}.uni-career .uni-career-consent input[type=checkbox]:checked::after{border-color:#fff}.uni-career .uni-career-consent:has(input:checked){background:#f4f3ee;border-color:#b9c8bb}
.uni-success-steps li:first-child .uni-success-step-number{background:#75c16a;border-color:#75c16a;color:#152635}.uni-success-eyebrow>span{background:#75c16a}.uni-career-success h2>span,.uni-career-empty h2,.uni-partners-page h1>span{color:#152635}
.uni-career-success:before{background:radial-gradient(circle,#e3e8df80,transparent 70%)}
a.uni-whatsapp{background:#152635!important;color:#fff!important}a.uni-whatsapp:hover,a.uni-whatsapp:focus-visible{background:#284556!important;color:#fff!important}
.uni-calculator-page .offer-request-btn,.uni-calculator-page .offer-submit-btn,.uni-calculator-page .mode-tab-btn.active{background:#152635!important;color:#fff!important}.uni-calculator-page .offer-request-btn:hover,.uni-calculator-page .offer-submit-btn:hover{background:#284556!important;color:#fff!important}
.uni-calculator-page .offer-modal-close:hover,.uni-calculator-page .offer-modal-close:focus-visible{background:#152635!important;color:#fff!important}
.uni-project-state.is-completed{background:#e9f2e7;color:#315a35}.uni-project-state.is-ongoing{background:#edf2f5;color:#34566d}
.uni-footer-column a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.uni-partners-editorial-heading>p,.uni-partners-editorial-copy p,.uni-partners-editorial-contact p{color:#6d777b}.uni-partners-editorial-contact a{color:#152635;border-color:#b9c4ca} .uni-reference-filters a{color:#152635;background:#f4f3ee;box-shadow:none}
.uni-reference-filters a.is-active,
.uni-reference-filters a.is-active:hover,
.uni-reference-filters a:hover{background:#152635;color:#fff;box-shadow:none}
.uni-reference-filters a:focus-visible{outline:2px solid #3478a8;outline-offset:3px;box-shadow:none}
.uni-reference-filters a.is-active .uni-button-bg,
.uni-reference-filters a:hover .uni-button-bg{background:#152635!important}
.uni-project-status-filter button,
.uni-project-status-filter button:hover,
.uni-project-status-filter button:focus,
.uni-project-status-filter button:active{background:#152635;color:#fff;border:1px solid #152635}
.uni-project-status-filter button:hover{background:#284556;border-color:#284556}
.uni-project-status-filter button .uni-button-bg{background:#152635!important}
.uni-project-status-filter button:hover .uni-button-bg{background:#284556!important}
.uni-project-status-filter button:focus-visible{outline:2px solid #3478a8;outline-offset:3px;box-shadow:none}
.uni-project-status-filter select{box-sizing:border-box;border:1px solid #deded7;padding:10px 14px;border-radius:12px;background:#fff;color:#152635;outline:0;box-shadow:0 0 0 3px transparent;transition:border-color .18s,box-shadow .18s}
.uni-project-status-filter select:focus,
.uni-project-status-filter select:focus-visible{border:1px solid #3478a8;outline:0;box-shadow:0 0 0 3px rgb(52 120 168 / 12%)}
.uni-reference-filters a:not(.is-active):not(:hover) .uni-button-bg{background:#f4f3ee!important}
.uni-reference-filters a:hover{transform:none}
@media(prefers-reduced-motion:reduce){.uni-project-status-filter select{transition:none}}
.uni-project-status-filter select{
appearance:none;
-webkit-appearance:none;
padding-right:42px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='m3 5 4 4 4-4' stroke='%23152635' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 10px center;
background-size:14px 14px;
} .uni-hero .uni-hero-title{color:#fff}
.uni-hero .uni-hero-title span{color:inherit}
.uni-hero .uni-hero-title .uni-hero-emphasis{color:#75c16a}
.uni-hero .uni-hero-title .uni-hero-emphasis span{color:inherit}
.uni-hero .uni-hero-link--primary{background:#152635;color:#fff;border:1px solid rgba(255,255,255,.22)}
.uni-hero .uni-hero-link--primary:hover{background:#284556;color:#fff}
.uni-hero .uni-hero-link--primary .uni-button-bg{background:#152635!important}
.uni-hero .uni-hero-link--primary:hover .uni-button-bg{background:#284556!important} .uni-hero-slider{min-height:100vh;min-height:100svh}
.uni-hero-slider>.uni-hero{min-height:100vh;min-height:100svh;box-sizing:border-box} .uni-services-wrap .uni-services{background:#152635;color:#f4f3ee}
.uni-services .uni-services-title{color:#f4f3ee}
.uni-services .uni-services-eyebrow{color:#a7b7c2}
.uni-services .uni-service-card{background:#1e3444;border:1px solid #304757;box-shadow:none}
.uni-services .uni-service-card:hover,
.uni-services .uni-service-card:focus-within{background:#253e50;border-color:#506876;box-shadow:0 16px 32px rgb(0 0 0 / 10%)}
.uni-services .uni-service-copy h3{color:#f4f3ee}
.uni-services .uni-service-copy p{color:#bac7ce}
.uni-services .uni-service-number{color:#9aadb9}
.uni-services .uni-service-symbol{background:#263f4f;border-color:#3c5564;color:#a7d79f;box-shadow:none}
.uni-services .uni-service-more,
.uni-services .uni-service-more:hover{color:#a7d79f}
.uni-services .uni-services-all{background:#f4f3ee;border-color:#f4f3ee;color:#152635}
.uni-services .uni-services-all:hover{background:#fff;border-color:#fff;color:#152635}
.uni-services .uni-services-all .uni-button-bg{background:#f4f3ee!important}
.uni-services .uni-services-all:hover .uni-button-bg{background:#fff!important}
.uni-services a:focus-visible{outline:2px solid #75c16a;outline-offset:4px;box-shadow:none}
@font-face{font-family:'Space Grotesk';src:url(//unisolarks.trigitalstudio.com/wp-content/themes/unisolar/assets/fonts/space-grotesk-variable.ttf) format('truetype');font-style:normal;font-weight:300 700;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url(//unisolarks.trigitalstudio.com/wp-content/themes/unisolar/assets/fonts/instrument-sans-variable.ttf) format('truetype');font-style:normal;font-weight:400 700;font-display:swap}
:root{--uni-font-heading:'Space Grotesk',sans-serif;--uni-font-body:'Instrument Sans',sans-serif}
body{font-family:var(--uni-font-body)}
button,input,select,textarea{font-family:var(--uni-font-body)}
.uni-calculator-page{--font-heading:var(--uni-font-heading);--font-body:var(--uni-font-body)}
body h1,body h2,body h3,body h4,body h5,body h6,
.uni-hero .uni-hero-title,.uni-services .uni-services-title,.uni-service-copy h3,
.uni-statement-text,.uni-impact-value,.uni-products-hero h1,.uni-page-hero h1,
.uni-career h1,.uni-career h2,.uni-career h3,.uni-partners-editorial h1,.uni-partners-editorial h2,
.uni-contact-form-card h2,.uni-project-detail-item dd,.uni-calculator-page .calc-main-title{
font-family:var(--uni-font-heading);font-weight:500;letter-spacing:-.035em;
}
.uni-hero .uni-hero-title{font-weight:500;letter-spacing:-.045em} .uni-calculator-page{--text-main:#152635;--text-body:#334b5b;--text-muted:#657580;--text-light-muted:#657580;--border-light:#dce2e4;--border-card:#dce2e4;--gold-soft-bg:#edf3f7;--gold-text:#285f87}
.uni-calculator-page .stepper{border-color:#e2e6e8;box-shadow:none}
.uni-calculator-page .step-item{background:transparent;border-color:transparent}
.uni-calculator-page .step-item.active{background:#edf3f7;border-color:#b3cbdc}
.uni-calculator-page .step-item .step-kicker{color:#657580}
.uni-calculator-page .step-item .step-name{color:#516572}
.uni-calculator-page .step-item.active .step-kicker{color:#3478a8}
.uni-calculator-page .step-item.active .step-name{color:#152635}
.uni-calculator-page .step-item .step-bubble{background:#fff;border-color:#dce2e4;color:#657580}
.uni-calculator-page .step-item.active .step-bubble{background:#152635;color:#fff;border-color:#152635}
.uni-calculator-page .step-item.completed .step-bubble{background:#e3f0e0;color:#28532c;border-color:#bfd9b8}
.uni-calculator-page .tariff-option,.uni-calculator-page .mode-choice-btn{border-color:#e2e6e8;background:#fff;box-shadow:none}
.uni-calculator-page .tariff-option:hover,.uni-calculator-page .mode-choice-btn:hover{background:#f8fafb;border-color:#a3bdce;box-shadow:none}
.uni-calculator-page .tariff-option.selected,.uni-calculator-page .mode-choice-btn.active{background:#edf3f7;border-color:#3478a8;box-shadow:inset 0 0 0 1px #3478a8}
.uni-calculator-page .tariff-code-pill,.uni-calculator-page .mode-pill-tag{background:#f0f3f5;border-color:#d8e1e7;color:#405c70}
.uni-calculator-page .tariff-option.selected .tariff-code-pill{background:#dceaf4;border-color:#b3cbdc;color:#285f87}
.uni-calculator-page .tariff-check-icon{background:#eef1f2;color:#82929b}
.uni-calculator-page .tariff-option:not(.selected) .tariff-check-icon svg{visibility:hidden}
.uni-calculator-page .tariff-option.selected .tariff-check-icon{background:#3478a8;color:#fff}
.uni-calculator-page .month-field,.uni-calculator-page .form-group input,.uni-calculator-page .form-group select{border-color:#dce2e4}
.uni-calculator-page .month-field:focus-within{border-color:#3478a8;background:#fff;box-shadow:0 0 0 3px rgb(52 120 168 / 10%);transform:none}
.uni-calculator-page .annual-field:focus,.uni-calculator-page .form-group input:focus,.uni-calculator-page .form-group select:focus{border-color:#3478a8;box-shadow:0 0 0 3px rgb(52 120 168 / 10%);outline:none}
.uni-calculator-page .result{background:#152635;border-color:#2d4353;color:#fff}
.uni-calculator-page .result-glow{background:rgba(52,120,168,.13)}
.uni-calculator-page .result-badge{background:#203c43;border-color:#3b5a57;color:#b1dba8}
.uni-calculator-page .capacity-val{background:none;color:#fff;-webkit-text-fill-color:#fff}
.uni-calculator-page .capacity-unit{color:#a7d79f}
.uni-calculator-page .result-desc,.uni-calculator-page .disclaimer{color:#bbc9d2}
.uni-calculator-page .stat-icon{background:#253f50;color:#c1d5e3}
.uni-calculator-page .stat-box small{color:#bbc9d2}
.uni-calculator-page .stat-box:hover{border-color:#638294}
.uni-calculator-page .result .offer-request-btn,.uni-calculator-page .result .btn-primary-gold{background:#f4f3ee!important;color:#152635!important;border-color:#f4f3ee!important}
.uni-calculator-page .result .offer-request-btn .calc-button-bg{background:#f4f3ee!important}
.uni-calculator-page .result .offer-request-btn:hover{background:#fff!important;color:#152635!important}
.uni-calculator-page .result .reset-btn{color:#fff;border-color:#71818d}
.uni-calculator-page .result .reset-btn:hover{background:#284556;color:#fff}
.uni-project-status-filter .uni-nice-select{position:relative;min-width:185px}
.uni-project-status-filter .uni-nice-select-trigger,
.uni-project-status-filter .uni-nice-select-trigger:hover,
.uni-project-status-filter .uni-nice-select-trigger:focus,
.uni-project-status-filter .uni-nice-select-trigger:active{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;padding:11px 14px;border:1px solid #deded7;border-radius:12px;background:#fff;color:#152635;font:400 15px/1.5 'Instrument Sans',sans-serif;text-align:left;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.uni-project-status-filter .uni-nice-select-trigger:focus-visible,.uni-project-status-filter .uni-nice-select.is-open .uni-nice-select-trigger{outline:none;border-color:#3478a8;box-shadow:0 0 0 3px rgb(52 120 168 / 10%)}
.uni-nice-select-arrow{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s;flex:none}
.is-open .uni-nice-select-arrow{transform:translateY(2px) rotate(225deg)}
.uni-nice-select-options{position:absolute;z-index:20;top:calc(100% + 8px);left:0;min-width:100%;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid #e1e5e7;border-radius:14px;box-shadow:0 12px 30px rgb(21 38 53 / 10%);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px);transition:opacity .18s,transform .18s,visibility .18s}
.uni-nice-select.is-open .uni-nice-select-options{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.uni-nice-select-options li{display:block;position:relative;white-space:nowrap;padding:10px 32px 10px 12px;border-radius:8px;color:#152635;font-size:14px;cursor:pointer}
.uni-nice-select-options li[aria-selected=true]{background:#f4f3ee;font-weight:600}
.uni-nice-select-options li[aria-selected=true]::after{content:'✓';position:absolute;right:12px;color:#3478a8}
.uni-nice-select-options li:hover,.uni-nice-select-options li.is-highlighted{background:#edf3f7}
.uni-project-status-filter select[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.uni-nice-select-options,.uni-nice-select-arrow{transition:none}} .uni-company-results .uni-impact-icon{
background:#edf3f7;
border-color:#d7e4ed;
color:#3478a8;
}
.uni-company-results .uni-impact-icon svg{color:inherit}