:root {
--asseco-blue:  #00AEE8;
--blue-dark:    #005CA9;
--blue-mid:     #00AEE8;
--blue-light:   #E8EEF7;
--blue-lighter: #F0F5FB;
--green-dark:   #1A7340;
--green-light:  #E8F5EE;
--green-text:   #3B6D11;
--orange-dark:  #B45C00;
--orange-light: #FFF3E0;
--orange-text:  #854F0B;
--red-dark:     #A32D2D;
--red-light:    #FCEBEB;
--red-text:     #791F1F;
--info-light:   #E6F1FB;
--info-text:    #185FA5;
--gray-text:    #444444;
--gray-muted:   #666666;
--gray-hint:    #999999;
--border:       #DDDDDD;
--border-light: #EEEEEE;
--bg-section:   #F7F9FC;
--bg-white:     #FFFFFF;
--radius-sm:    0px;
--radius-md:    0px;
--radius-lg:    0px;
--shadow-card:  0 1px 4px rgba(0,0,0,.07);
} *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.asseco-noise-calculator-wrap {
font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
background: #efefef;
color: var(--gray-text);
font-size: 15px;
line-height: 1.6;
padding: 2rem 1rem;
} .kalk-widget {
max-width: 780px;
margin: 0 auto;
} .kalk-header {
margin-bottom: 1.5rem;
}
.kalk-header h1 {
font-size: 1.6rem;
font-weight: 700;
color: var(--blue-dark);
margin-bottom: .3rem;
}
.kalk-header p {
font-size: .95rem;
color: var(--gray-muted);
} .kalk-card {
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 1.5rem;
margin-bottom: 1rem;
box-shadow: var(--shadow-card);
}
.kalk-card-title {
font-size: .7rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--gray-muted);
margin-bottom: 1.2rem;
} .kalk-field { margin-bottom: 1rem; }
.kalk-field:last-child { margin-bottom: 0; }
.kalk-field label {
display: block;
font-size: .85rem;
font-weight: 500;
color: var(--gray-muted);
margin-bottom: .35rem;
} .kalk-grid2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (max-width: 560px) {
.kalk-grid2 { grid-template-columns: 1fr; }
} .kalk-input,
.kalk-select {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-white);
color: var(--gray-text);
font-size: .95rem;
font-family: inherit;
transition: border-color .15s, box-shadow .15s;
appearance: none;
-webkit-appearance: none;
}
.kalk-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
cursor: pointer;
}
.kalk-input:focus,
.kalk-select:focus {
outline: none;
border-color: var(--blue-mid);
box-shadow: 0 0 0 3px rgba(0,174,232,.16);
}
.kalk-input:hover,
.kalk-select:hover {
border-color: #AAAAAA;
} .kalk-slider-wrap {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: .4rem;
}
.kalk-slider {
flex: 1;
-webkit-appearance: none;
appearance: none;
height: 5px;
border-radius: 3px;
background: var(--border-light);
outline: none;
cursor: pointer;
}
.kalk-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--blue-mid);
border: 2px solid var(--bg-white);
box-shadow: 0 1px 4px rgba(0,0,0,.2);
cursor: pointer;
transition: transform .1s;
}
.kalk-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.kalk-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--blue-mid);
border: 2px solid var(--bg-white);
box-shadow: 0 1px 4px rgba(0,0,0,.2);
cursor: pointer;
}
.kalk-slider-val {
font-size: .95rem;
font-weight: 600;
min-width: 58px;
text-align: right;
color: var(--gray-text);
} .kalk-bar-bg {
height: 8px;
border-radius: 4px;
background: var(--border-light);
overflow: hidden;
margin-bottom: .3rem;
}
.kalk-bar-fill {
height: 100%;
border-radius: 4px;
transition: width .35s ease, background-color .35s ease;
}
.kalk-bar-label {
font-size: .8rem;
font-weight: 500;
transition: color .35s;
} .kalk-results-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
gap: .75rem;
margin-top: .5rem;
}
.kalk-metric {
background: var(--bg-section);
border-radius: var(--radius-md);
padding: 1rem;
border: 1px solid var(--border-light);
}
.kalk-metric.kalk-metric--total {
grid-column: 1 / -1;
background: var(--blue-lighter);
border-color: rgba(0,174,232,.35);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: .5rem;
}
.kalk-metric-label {
font-size: .75rem;
font-weight: 500;
color: var(--gray-muted);
margin-bottom: .3rem;
line-height: 1.3;
}
.kalk-metric--total .kalk-metric-label {
font-size: .85rem;
color: var(--blue-dark);
font-weight: 600;
margin-bottom: 0;
}
.kalk-metric-val {
font-size: 1.3rem;
font-weight: 700;
line-height: 1.2;
}
.kalk-metric--total .kalk-metric-val { font-size: 1.6rem; }
.kalk-val--ok     { color: var(--green-text); }
.kalk-val--warn   { color: var(--orange-text); }
.kalk-val--danger { color: var(--red-dark); } .kalk-metric--fine-warn {
grid-column: 1 / -1;
background: #FFF8E7;
border: 1.5px solid #F5C842;
border-left: 4px solid var(--asseco-blue);
border-radius: var(--radius-md);
padding: 0.9rem 1.1rem;
}
.kalk-metric--fine-warn .kalk-metric-label {
font-size: .8rem;
font-weight: 700;
color: #7A5A00;
margin-bottom: .35rem;
}
.kalk-fine-warn-text {
font-size: .8rem;
color: #5C4200;
line-height: 1.55;
} .kalk-badge {
display: inline-block;
font-size: .65rem;
font-weight: 600;
background: var(--info-light);
color: var(--info-text);
border-radius: 4px;
padding: 1px 5px;
margin-left: 5px;
vertical-align: middle;
line-height: 1.6;
} .kalk-divider {
height: 1px;
background: var(--border-light);
margin: 1.25rem 0;
} .kalk-finding {
display: flex;
gap: .6rem;
align-items: flex-start;
padding: .65rem .9rem;
border-radius: var(--radius-sm);
margin-bottom: .5rem;
font-size: .85rem;
line-height: 1.5;
}
.kalk-finding:last-child { margin-bottom: 0; }
.kalk-finding--danger {
background: var(--red-light);
color: var(--red-text);
border-left: 3px solid #E24B4A;
}
.kalk-finding--warn {
background: var(--orange-light);
color: var(--orange-dark);
border-left: 3px solid #EF9F27;
}
.kalk-finding--ok {
background: var(--green-light);
color: var(--green-dark);
border-left: 3px solid #639922;
}
.kalk-finding--info {
background: var(--info-light);
color: var(--info-text);
border-left: 3px solid #378ADD;
}
.kalk-finding-icon {
flex-shrink: 0;
font-size: 1rem;
margin-top: 1px;
} .kalk-disclaimer {
font-size: .75rem;
color: var(--gray-hint);
line-height: 1.6;
margin-top: 1rem;
} .kalk-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
margin-top: 1rem;
padding: 12px 20px;
background: var(--asseco-blue);
color: var(--bg-white);
border: none;
border-radius: 30px;
font-size: .95rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
text-decoration: none;
transition: background .15s, transform .1s;
}
.kalk-cta:hover { background: var(--blue-dark); }
.kalk-cta:active { transform: scale(.98); }
.kalk-cta svg { flex-shrink: 0; } .kalk-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 28, 55, .48);
display: none;
align-items: center;
justify-content: center;
padding: 1rem;
z-index: 2147483647;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
.kalk-modal-backdrop.is-open { display: flex; }
body.kalk-modal-open {
overflow: hidden !important;
}
.kalk-modal {
width: 100%;
max-width: 640px;
max-height: calc(100vh - 2rem);
background: var(--bg-white);
border-radius: 22px;
box-shadow: 0 24px 70px rgba(0, 55, 100, .24);
overflow: hidden;
font-family: inherit;
border: 1px solid rgba(0, 174, 232, .18);
animation: kalkModalIn .18s ease-out;
}
@keyframes kalkModalIn {
from { opacity: 0; transform: translateY(10px) scale(.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.kalk-modal-head {
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1.55rem 1.65rem 1.35rem;
background-color:black;
color: var(--bg-white);
}
.kalk-modal-head::after {
content: '';
position: absolute;
left: 1.65rem;
right: 1.65rem;
bottom: 0;
height: 4px;
border-radius: 99px 99px 0 0;
background: var(--asseco-blue);
}
.kalk-modal-title {
font-size: clamp(1.25rem, 2.5vw, 1.55rem);
font-weight: 700;
letter-spacing: -.02em;
line-height: 1.25;
margin-bottom: .4rem;
max-width: 500px;
}
.kalk-modal-subtitle {
font-size: .92rem;
opacity: .92;
line-height: 1.55;
max-width: 520px;
}
.kalk-modal-close {
flex: 0 0 auto;
width: 34px;
height: 34px;
border: 1px solid rgba(255,255,255,.22);
border-radius: 50%;
background: rgba(255,255,255,.10);
color: var(--bg-white);
font-size: 1.35rem;
line-height: 30px;
cursor: pointer;
opacity: .92;
font-family: inherit;
transition: background .15s, transform .15s, opacity .15s;
}
.kalk-modal-close:hover {
opacity: 1;
background: rgba(255,255,255,.18);
transform: rotate(90deg);
}
.kalk-modal-body {
padding: 1.55rem 1.65rem 1.65rem;
background: linear-gradient(180deg, #fff 0%, #FAFCFE 100%);
overflow: auto;
max-height: calc(100vh - 205px);
}
.kalk-modal-body .kalk-field { margin-bottom: .85rem; } .kalk-modal-body .kalk-field label {
font-size: .85rem;
font-weight: 500;
color: var(--gray-muted);
margin-bottom: .35rem;
}
.kalk-modal-body .kalk-input {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-white);
color: var(--gray-text);
font-size: .95rem;
font-family: inherit;
transition: border-color .15s, box-shadow .15s;
appearance: none;
-webkit-appearance: none;
}
.kalk-modal-body .kalk-input::placeholder { color: var(--gray-hint); }
.kalk-modal-body .kalk-input:focus {
outline: none;
border-color: var(--blue-mid);
box-shadow: 0 0 0 3px rgba(0,174,232,.16);
}
.kalk-modal-body .kalk-input:hover {
border-color: #AAAAAA;
}
.kalk-grid2--lead-contact { align-items: start; }
.kalk-check-row {
display: flex;
align-items: flex-start;
gap: .65rem;
margin-top: .55rem;
padding: .82rem .9rem;
border-radius: 12px;
border: 1px solid #DDEAF3;
background: #F7FBFE;
font-size: .78rem;
color: #52687A;
line-height: 1.45;
}
.kalk-check-row input {
flex: 0 0 auto;
width: 17px;
height: 17px;
margin-top: .15rem;
accent-color: var(--asseco-blue);
}
.kalk-status {
display: none;
margin-top: .9rem;
padding: .8rem .95rem;
border-radius: 12px;
font-size: .85rem;
line-height: 1.45;
border: 1px solid transparent;
}
.kalk-status.is-visible { display: block; }
.kalk-status--ok {
background: var(--green-light);
color: var(--green-dark);
border-color: rgba(26,115,64,.18);
}
.kalk-status--error {
background: var(--red-light);
color: var(--red-text);
border-color: rgba(163,45,45,.16);
}
.kalk-modal-body .kalk-cta {
min-height: 48px;
margin-top: 1rem;
border-radius: 30px;
background-color: #00aee8;
box-shadow: 0 10px 22px rgba(0, 126, 194, .22);
}
.kalk-modal-body .kalk-cta:hover {
background: linear-gradient(135deg, #12BDF3 0%, #006EAE 100%);
transform: translateY(-1px);
}
.kalk-cta[disabled] {
opacity: .65;
cursor: not-allowed;
transform: none !important;
box-shadow: none;
}
@media (max-width: 560px) {
.kalk-modal-backdrop { padding: .6rem; align-items: flex-end; }
.kalk-modal { border-radius: 20px 20px 0 0; max-height: calc(100vh - .6rem); }
.kalk-modal-head { padding: 1.35rem 1.2rem 1.15rem; }
.kalk-modal-head::after { left: 1.2rem; right: 1.2rem; }
.kalk-modal-body { padding: 1.25rem 1.2rem 1.35rem; max-height: calc(100vh - 190px); }
} .kalk-hp {
position: absolute !important;
left: -10000px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
.kalk-turnstile-wrap {
margin: .95rem 0 0;
padding: .65rem;
border: 1px solid #DDEAF3;
border-radius: 12px;
background: #fff;
} .kalk-turnstile-wrap {
display: flex;
align-items: center;
justify-content: center;
min-height: 86px;
}
.kalk-turnstile-wrap .cf-turnstile {
min-height: 65px;
} .kalk-gated-report-card {
position: relative;
overflow: hidden;
}
.kalk-gated-report-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--asseco-blue), var(--blue-mid));
}
.kalk-report-initial,
.kalk-report-loading,
.kalk-report-ready-wrap {
display: none;
}
.kalk-gated-report-card[data-state="initial"] .kalk-report-initial,
.kalk-gated-report-card[data-state="loading"] .kalk-report-loading,
.kalk-gated-report-card[data-state="ready"] .kalk-report-ready-wrap {
display: block;
}
.kalk-report-initial {
padding: 1.15rem;
border: 1px solid rgba(0,174,232,.22);
background: linear-gradient(180deg, rgba(0,174,232,.08), rgba(255,255,255,.95));
border-radius: var(--radius-lg);
}
.kalk-report-initial h2,
.kalk-report-loading h2,
.kalk-report-ready h2 {
color: black;
font-size: 1.25rem;
line-height: 1.25;
margin: 0 0 .45rem;
}
.kalk-report-initial p,
.kalk-report-loading p,
.kalk-report-ready p {
margin: .35rem 0 0;
color: var(--gray-text);
font-size: .92rem;
line-height: 1.55;
}
.kalk-calculate-cta {
margin-top: 1rem;
}
.kalk-report-loading {
padding: 1.25rem;
border: 1px solid rgba(0,174,232,.22);
background: var(--bg-white);
border-radius: var(--radius-lg);
text-align: center;
}
.kalk-loader {
width: 46px;
height: 46px;
border-radius: 50%;
border: 4px solid rgba(0,174,232,.18);
border-top-color: var(--asseco-blue);
margin: 0 auto .9rem;
animation: kalk-spin .85s linear infinite;
}
@keyframes kalk-spin {
to { transform: rotate(360deg); }
}
.kalk-report-ready {
display: flex;
gap: 1rem;
align-items: flex-start;
padding: 1.1rem;
border: 1px solid rgba(0,174,232,.22);
background: linear-gradient(180deg, rgba(0,174,232,.08), rgba(255,255,255,.92));
border-radius: var(--radius-lg);
margin-bottom: 1rem;
}
.kalk-report-ready__icon {
flex: 0 0 42px;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--asseco-blue);
color: #fff;
font-weight: 700;
font-size: 1.2rem;
box-shadow: 0 8px 18px rgba(0,174,232,.25);
}
.kalk-report-steps {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .75rem;
margin: 1rem 0;
}
.kalk-report-step {
display: flex;
align-items: center;
gap: .55rem;
background: var(--bg-section);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
padding: .78rem .9rem;
font-size: .86rem;
font-weight: 500;
color: var(--gray-text);
}
.kalk-report-step span {
flex: 0 0 22px;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(0,174,232,.14);
color: var(--blue-mid);
font-weight: 700;
}
.kalk-gated-note {
color: var(--gray-muted);
font-size: .84rem;
line-height: 1.6;
margin: .5rem 0 0;
}
.kalk-hidden-results {
display: none !important;
}
@media (max-width: 640px) {
.kalk-report-ready { flex-direction: column; }
.kalk-report-steps { grid-template-columns: 1fr; }
}