.hearcube-hearing-test {
--hc-bg: #f3efe6;
--hc-surface: #fbf8f2;
--hc-accent: #b79b68;
--hc-accent-2: #8f774c;
--hc-text: #222222;
--hc-muted: #6b655a;
--hc-dark: #1f1f1f;
--hc-button-hover: #8f774c;
--hc-radius: 22px;
--hc-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-family: var(--hc-font);
color: var(--hc-text);
background: var(--hc-bg);
padding: clamp(16px, 3vw, 34px);
border-radius: var(--hc-radius);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
position: relative;
}
.hearcube-hearing-test *,
.hearcube-hearing-test *::before,
.hearcube-hearing-test *::after {
box-sizing: border-box;
}
.hearcube-hearing-test .hc-grid {
display: grid;
grid-template-columns: 1fr 260px;
gap: 22px;
align-items: start;
}
.hearcube-hearing-test .hc-card {
background: var(--hc-surface);
border-radius: var(--hc-radius);
padding: clamp(18px, 2.5vw, 30px);
box-shadow: 0 18px 40px rgba(31, 31, 31, 0.06);
}
.hearcube-hearing-test .hc-sidebar {
position: sticky;
top: 24px;
} .hearcube-hearing-test .hc-screen {
animation: hc-fade 0.4s ease;
}
.hearcube-hearing-test .hc-hidden {
display: none !important;
}
@keyframes hc-fade {
from { opacity: 0; transform: translateY(8px); }
to   { opacity: 1; transform: translateY(0); }
} .hearcube-hearing-test .hc-eyebrow {
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 12px;
font-weight: 600;
color: var(--hc-accent-2);
margin-bottom: 8px;
}
.hearcube-hearing-test .hc-step-title {
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--hc-muted);
margin-bottom: 6px;
}
.hearcube-hearing-test .hc-headline {
font-size: clamp(22px, 3vw, 30px);
line-height: 1.2;
margin: 0 0 12px;
font-weight: 700;
}
.hearcube-hearing-test .hc-subtle {
color: var(--hc-muted);
margin: 0 0 18px;
}
.hearcube-hearing-test .hc-tiny {
font-size: 12px;
color: var(--hc-muted);
} .hearcube-hearing-test .hc-toolbar {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
}
.hearcube-hearing-test .hc-btn {
appearance: none;
border: 1px solid transparent;
border-radius: 999px;
padding: 13px 26px;
font-size: 15px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease, transform 0.05s ease;
}
.hearcube-hearing-test .hc-btn:active {
transform: translateY(1px);
}
.hearcube-hearing-test .hc-btn-primary {
background: var(--hc-dark);
color: #fff;
}
.hearcube-hearing-test .hc-btn-primary:hover {
background: var(--hc-button-hover);
}
.hearcube-hearing-test .hc-btn-secondary {
background: var(--hc-accent);
color: #fff;
}
.hearcube-hearing-test .hc-btn-secondary:hover {
background: var(--hc-accent-2);
}
.hearcube-hearing-test .hc-btn-ghost {
background: transparent;
color: var(--hc-text);
border-color: rgba(31, 31, 31, 0.18);
}
.hearcube-hearing-test .hc-btn-ghost:hover {
background: rgba(31, 31, 31, 0.05);
}
.hearcube-hearing-test .hc-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
} .hearcube-hearing-test .hc-qa-list,
.hearcube-hearing-test .hc-checks {
display: flex;
flex-direction: column;
gap: 16px;
margin: 8px 0 4px;
}
.hearcube-hearing-test .hc-qa-item {
background: rgba(183, 155, 104, 0.08);
border-radius: 16px;
padding: 16px 18px;
}
.hearcube-hearing-test .hc-qa-item strong {
display: block;
margin-bottom: 10px;
}
.hearcube-hearing-test .hc-pill-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.hearcube-hearing-test .hc-pill {
border: 1px solid rgba(31, 31, 31, 0.2);
background: #fff;
border-radius: 999px;
padding: 8px 20px;
font-size: 14px;
font-family: inherit;
cursor: pointer;
transition: all 0.15s ease;
}
.hearcube-hearing-test .hc-pill:hover {
border-color: var(--hc-accent);
}
.hearcube-hearing-test .hc-pill.is-active {
background: var(--hc-dark);
color: #fff;
border-color: var(--hc-dark);
}
.hearcube-hearing-test .hc-pill.is-active-warn {
background: #b3261e;
color: #fff;
border-color: #b3261e;
} .hearcube-hearing-test .hc-notice {
border-radius: 14px;
padding: 14px 18px;
margin: 16px 0;
font-size: 14px;
}
.hearcube-hearing-test .hc-notice.hc-warn {
background: #fdf4e3;
border: 1px solid #efd9a8;
color: #7a5b16;
}
.hearcube-hearing-test .hc-notice.hc-danger {
background: #fbe9e7;
border: 1px solid #f0b7af;
color: #8c2a1e;
} .hearcube-hearing-test .hc-hands-check {
display: grid;
grid-template-columns: 1fr 220px;
gap: 20px;
align-items: center;
margin: 8px 0 20px;
}
.hearcube-hearing-test .hc-hands-visual img,
.hearcube-hearing-test .hc-hands-visual svg {
width: 100%;
border-radius: 18px;
display: block;
}
.hearcube-hearing-test .hc-checkbox-row {
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 14px;
cursor: pointer;
}
.hearcube-hearing-test .hc-checkbox-row input {
margin-top: 3px;
width: 18px;
height: 18px;
flex: 0 0 auto;
}
.hearcube-hearing-test .hc-calibration-box {
background: rgba(183, 155, 104, 0.08);
border-radius: 16px;
padding: 18px;
display: flex;
flex-direction: column;
gap: 12px;
}
.hearcube-hearing-test .hc-range {
width: 100%;
accent-color: var(--hc-accent);
} .hearcube-hearing-test .hc-freq-list {
display: flex;
flex-direction: column;
gap: 12px;
margin: 6px 0;
}
.hearcube-hearing-test .hc-freq-item {
background: #fff;
border: 1px solid rgba(31, 31, 31, 0.08);
border-radius: 16px;
padding: 14px 16px;
}
.hearcube-hearing-test .hc-freq-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.hearcube-hearing-test .hc-freq-top strong {
font-size: 16px;
}
.hearcube-hearing-test .hc-gain-box {
display: flex;
align-items: center;
gap: 10px;
}
.hearcube-hearing-test .hc-db {
min-width: 64px;
text-align: center;
font-variant-numeric: tabular-nums;
font-weight: 600;
background: rgba(183, 155, 104, 0.14);
border-radius: 999px;
padding: 4px 10px;
}
.hearcube-hearing-test .hc-freq-btn {
border: 1px solid rgba(31, 31, 31, 0.18);
background: #fff;
border-radius: 999px;
width: 40px;
height: 40px;
font-size: 18px;
cursor: pointer;
font-family: inherit;
line-height: 1;
}
.hearcube-hearing-test .hc-freq-btn:hover {
border-color: var(--hc-accent);
}
.hearcube-hearing-test .hc-freq-play {
border: none;
background: var(--hc-dark);
color: #fff;
border-radius: 999px;
padding: 9px 18px;
cursor: pointer;
font-family: inherit;
font-weight: 600;
}
.hearcube-hearing-test .hc-freq-play.is-playing,
.hearcube-hearing-test .hc-btn-secondary.is-playing,
.hearcube-hearing-test .hc-btn.is-playing {
background: #1aa179 !important;
color: #fff !important;
box-shadow: 0 0 0 4px rgba(26, 161, 121, 0.22);
animation: hc-playing-pulse 1.1s ease-in-out infinite;
}
@keyframes hc-playing-pulse {
0%   { box-shadow: 0 0 0 0 rgba(26, 161, 121, 0.35); }
70%  { box-shadow: 0 0 0 9px rgba(26, 161, 121, 0); }
100% { box-shadow: 0 0 0 0 rgba(26, 161, 121, 0); }
}
@media (prefers-reduced-motion: reduce) {
.hearcube-hearing-test .is-playing { animation: none; }
}
.hearcube-hearing-test .hc-freq-nohear {
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
font-size: 13px;
color: var(--hc-muted);
} .hearcube-hearing-test .hc-progress {
display: flex;
flex-direction: column;
gap: 4px;
}
.hearcube-hearing-test .hc-step {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
border-radius: 12px;
font-size: 14px;
color: var(--hc-muted);
}
.hearcube-hearing-test .hc-step::before {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(31, 31, 31, 0.16);
flex: 0 0 auto;
}
.hearcube-hearing-test .hc-step.is-active {
background: rgba(183, 155, 104, 0.14);
color: var(--hc-text);
font-weight: 600;
}
.hearcube-hearing-test .hc-step.is-active::before {
background: var(--hc-accent);
}
.hearcube-hearing-test .hc-step.is-done::before {
background: var(--hc-accent-2);
} .hearcube-hearing-test .hc-screen-with-modal {
position: relative;
}
.hearcube-hearing-test .hc-modal-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(243, 239, 230, 0.7);
border-radius: var(--hc-radius);
z-index: 5;
padding: 16px;
}
.hearcube-hearing-test .hc-modal-overlay.hc-blur {
backdrop-filter: blur(6px);
}
.hearcube-hearing-test .hc-modal-card {
background: var(--hc-surface);
border-radius: 20px;
padding: clamp(20px, 3vw, 32px);
width: min(520px, 100%);
box-shadow: 0 30px 70px rgba(31, 31, 31, 0.18);
max-height: 100%;
overflow: auto;
}
.hearcube-hearing-test .hc-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin: 16px 0;
}
.hearcube-hearing-test .hc-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.hearcube-hearing-test .hc-field.hc-full {
grid-column: 1 / -1;
}
.hearcube-hearing-test .hc-field label {
font-size: 13px;
font-weight: 600;
}
.hearcube-hearing-test .hc-field input,
.hearcube-hearing-test .hc-field textarea {
border: 1px solid rgba(31, 31, 31, 0.18);
border-radius: 12px;
padding: 11px 13px;
font-size: 15px;
font-family: inherit;
width: 100%;
}
.hearcube-hearing-test .hc-field input:focus,
.hearcube-hearing-test .hc-field textarea:focus {
outline: none;
border-color: var(--hc-accent);
box-shadow: 0 0 0 3px rgba(183, 155, 104, 0.2);
}
.hearcube-hearing-test .hc-field input.hc-invalid,
.hearcube-hearing-test .hc-field textarea.hc-invalid {
border-color: #b3261e;
}
.hearcube-hearing-test .hc-consent-row {
font-size: 13px;
color: var(--hc-muted);
}
.hearcube-hearing-test .hc-consent-row a {
color: var(--hc-accent-2);
}
.hearcube-hearing-test .hc-form-error {
color: #8c2a1e;
font-size: 14px;
margin: 8px 0;
} .hearcube-hearing-test .hc-audiogram-wrap {
margin: 18px 0;
padding: 14px;
}
.hearcube-hearing-test .hc-audiogram-wrap svg {
display: block;
width: 100%;
height: auto;
}
.hearcube-hearing-test .hc-result-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 16px;
}
.hearcube-hearing-test .hc-result-mini {
background: rgba(183, 155, 104, 0.08);
border-radius: 16px;
padding: 16px;
}
.hearcube-hearing-test .hc-result-mini .hc-result-label {
font-size: 17px;
font-weight: 700;
margin: 4px 0;
}
.hearcube-hearing-test .hc-next-steps {
margin-top: 22px;
}
.hearcube-hearing-test .hc-next-steps h3 {
margin-top: 0;
}
.hearcube-hearing-test .hc-cta-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px;
margin: 14px 0;
}
.hearcube-hearing-test .hc-cta-card {
background: #fff;
border: 1px solid rgba(31, 31, 31, 0.08);
border-radius: 16px;
padding: 18px;
display: flex;
flex-direction: column;
gap: 8px;
}
.hearcube-hearing-test .hc-cta-link {
margin-top: auto;
display: inline-block;
background: var(--hc-dark);
color: #fff;
text-decoration: none;
text-align: center;
border-radius: 999px;
padding: 11px 18px;
font-weight: 600;
}
.hearcube-hearing-test .hc-cta-link:hover {
background: var(--hc-button-hover);
} .hearcube-hearing-test .hc-coupon-card {
display: grid;
grid-template-columns: 1fr 220px;
gap: 18px;
background: linear-gradient(135deg, #2a2620, #1f1f1f);
color: #fff;
border-radius: 20px;
padding: 26px;
margin-top: 18px;
overflow: hidden;
}
.hearcube-hearing-test .hc-coupon-card .hc-subtle {
color: rgba(255, 255, 255, 0.78);
}
.hearcube-hearing-test .hc-coupon-badge {
display: inline-block;
background: var(--hc-accent);
color: #1f1f1f;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 999px;
padding: 5px 14px;
margin-bottom: 10px;
}
.hearcube-hearing-test .hc-coupon-title {
font-size: 22px;
margin: 0 0 8px;
}
.hearcube-hearing-test .hc-coupon-note {
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
margin: 4px 0 0;
}
.hearcube-hearing-test .hc-coupon-card .hc-cta-link {
background: var(--hc-accent);
color: #1f1f1f;
margin-top: 14px;
}
.hearcube-hearing-test .hc-coupon-visual {
background-size: cover;
background-position: center;
border-radius: 16px;
min-height: 140px;
background-color: rgba(255, 255, 255, 0.08);
}
.hearcube-hearing-test .hc-footer-note {
font-size: 12px;
color: var(--hc-muted);
margin-top: 22px;
padding-top: 16px;
border-top: 1px solid rgba(31, 31, 31, 0.08);
} @media (max-width: 900px) {
.hearcube-hearing-test .hc-grid {
grid-template-columns: 1fr;
}
.hearcube-hearing-test .hc-sidebar {
position: static;
order: -1;
}
.hearcube-hearing-test .hc-progress {
flex-direction: row;
flex-wrap: wrap;
}
.hearcube-hearing-test .hc-hands-check,
.hearcube-hearing-test .hc-coupon-card {
grid-template-columns: 1fr;
}
.hearcube-hearing-test .hc-result-cards {
grid-template-columns: 1fr;
}
.hearcube-hearing-test .hc-form-grid {
grid-template-columns: 1fr;
}
.hearcube-hearing-test .hc-modal-overlay {
position: fixed;
inset: 0;
border-radius: 0;
z-index: 99999;
}
}