/* ---- LØBERTEST ----
Delt af index.html og start.html. Forudsætter css/tokens.css og
css/base.css. Markup til selve overlayet indsprøjtes af quiz.js, så en side
kun behøver denne fil, scriptet og et element med klassen .quiz-start.
Filen indlæses SIDST, så den vinder ved lige specificitet. Det er bevidst:
den skal kunne overskrive priskortenes badge (se .card-tag-scarcity nederst).
Alle klassenavne herunder er kroge, quiz.js hænger på. De må ikke ændres. */
/* Sætter sin egen flade, så den også virker på salgssiden, hvor css/site.css
ikke er indlæst. */
.quiz-cta-band,
.quiz-overlay {
--accent: var(--hivis);
--cta-fill: var(--hivis);
--cta-fg: var(--ink);
--cta-hover: var(--hivis-hover);
--cta-text: var(--hivis);
--fg-muted: var(--slate-light);
--line: var(--line-dark);
--heading-color: var(--fg-on-dark);
}
/* ---------- Indgangsbånd ---------- */
.quiz-cta-band {
background: var(--forest);
color: var(--fg-on-dark);
padding: var(--space-16) max(var(--space-4), calc((100% - var(--content-max)) / 2));
}
/* Alt stablet: label, overskrift, tekst, knap. Tekstspalten er dog bredere
* end tidligere (46ch), så overskriften ikke brækker unødigt. */
.quiz-cta-inner {
border-left: 3px solid var(--hivis);
padding-left: var(--space-8);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-4);
}
.quiz-cta-band p { max-width: 46ch; }
@media (min-width: 900px) {
.quiz-cta-band .btn-primary {
min-height: 64px;
padding: 0 var(--space-12);
font-size: 22px;
}
}
.quiz-cta-tag {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--hivis);
}
.quiz-cta-band h2 { margin: 0; color: var(--fg-on-dark); }
.quiz-cta-band p { margin: 0; font-size: var(--text-lead); line-height: 1.5; color: var(--fg-on-dark); }
.quiz-cta-band .btn-primary { margin-top: var(--space-4); border: none; }
/* ---------- Overlay ---------- */
.quiz-overlay {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(11, 31, 23, .94);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
display: none;
align-items: center;
justify-content: center;
padding: var(--space-6);
}
.quiz-overlay.open { display: flex; }
/* Fremdriftsbjælken ER modalens overkant: den vokser hi-vis hen over den
* mørke linje, i stedet for at ligge som et separat element med luft omkring.
* Derfor ingen border-top her — to vandrette streger over hinanden ville
* læses som en fejl. */
.quiz-modal {
background: var(--ink);
border: 1px solid var(--line-dark);
border-radius: var(--radius);
color: var(--fg-on-dark);
width: 100%;
max-width: 600px;
max-height: 90vh;
overflow-y: auto;
padding: var(--space-16) var(--space-12) var(--space-12);
position: relative;
}
/* Samme optiske korrektion som lukkeknappen i kontaktformularen — se
* kommentaren ved .form-context__close i css/site.css. Uden den eksplicitte
* grid-centrering lå glyffen desuden på browserens standardplacering. */
.quiz-close {
position: absolute;
top: var(--space-6);
right: var(--space-6);
width: 40px;
height: 40px;
display: grid;
place-items: center;
padding: 0 0 .128em;
background: none;
border: 1px solid var(--line-dark);
color: var(--fg-on-dark);
font-family: var(--font-mono);
font-size: 20px;
line-height: 1;
cursor: pointer;
}
.quiz-close:hover { border-color: var(--hivis); color: var(--hivis); }
.quiz-progress {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--line-dark);
overflow: hidden;
}
.quiz-progress-bar { height: 100%; width: 0; background: var(--hivis); transition: width .4s ease; }
.quiz-step-label {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--hivis);
margin-bottom: var(--space-3);
}
.quiz-q {
font-family: var(--font-display);
font-size: clamp(30px, 4vw, 42px);
font-weight: var(--weight-black);
line-height: var(--leading-tight);
letter-spacing: var(--display-tracking);
text-transform: uppercase;
color: var(--fg-on-dark);
margin-bottom: var(--space-8);
text-wrap: balance;
}
/* Kantede felter. Valget markeres med hi-vis kant — ikke med fyld, så
accenten forbliver forbeholdt handlinger. */
.quiz-options { display: flex; flex-direction: column; gap: var(--space-3); }
.quiz-option {
text-align: left;
background: #08170F;
border: 1px solid var(--line-dark);
border-radius: var(--radius-control);
color: var(--fg-on-dark);
padding: var(--space-4) var(--space-6);
min-height: 56px;
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.4;
cursor: pointer;
transition: border-color .2s ease, background-color .2s ease;
}
.quiz-option:hover, .quiz-option:focus-visible { border-color: var(--hivis); background: var(--forest); }
.quiz-back {
margin-top: var(--space-6);
background: none;
border: none;
padding: 0;
color: var(--slate-light);
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: .12em;
text-transform: uppercase;
cursor: pointer;
}
.quiz-back:hover { color: var(--hivis); }
/* ---------- Resultat ---------- */
.quiz-result-name {
font-family: var(--font-display);
font-size: clamp(34px, 4.6vw, 52px);
font-weight: var(--weight-black);
text-transform: uppercase;
letter-spacing: var(--display-tracking);
line-height: var(--leading-tight);
color: var(--hivis);
margin-bottom: var(--space-4);
}
.quiz-result-line {
font-family: var(--font-display);
font-size: clamp(20px, 2.2vw, 26px);
font-weight: var(--weight-medium);
line-height: 1.2;
color: var(--fg-on-dark);
margin-bottom: var(--space-4);
}
.quiz-result-body { line-height: var(--leading-body); color: var(--slate-light); margin-bottom: var(--space-8); }
/* Anbefalingskortet arver priskortenes flade: forest med hi-vis venstrekant. */
.quiz-tier-card {
background: var(--forest);
border: 0;
border-left: 3px solid var(--hivis);
border-radius: var(--radius);
padding: var(--space-6) var(--space-8);
margin-bottom: var(--space-8);
}
.quiz-tier-label {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--slate-light);
margin-bottom: var(--space-2);
}
.quiz-tier-name {
font-family: var(--font-display);
font-size: var(--text-h3);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: var(--display-tracking);
color: var(--fg-on-dark);
margin-bottom: var(--space-3);
}
.quiz-tier-why { font-size: var(--text-sm); line-height: 1.55; color: var(--fg-on-dark); }
.quiz-tier-scarcity {
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--line-dark);
font-family: var(--font-mono);
font-size: var(--text-xs);
line-height: 1.5;
letter-spacing: .04em;
color: var(--hivis);
}
#quizBody .btn-primary {
display: flex;
width: 100%;
margin-bottom: var(--space-3);
border: none;
font-family: var(--font-display);
}
.quiz-secondary {
display: block;
width: 100%;
text-align: center;
background: none;
border: 1px solid var(--line-dark);
min-height: 48px;
color: var(--fg-on-dark);
cursor: pointer;
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: .12em;
text-transform: uppercase;
margin-bottom: var(--space-3);
}
.quiz-secondary:hover { border-color: var(--hivis); color: var(--hivis); }
.quiz-again {
display: block;
width: 100%;
text-align: center;
background: none;
border: none;
padding: var(--space-2) 0;
color: var(--slate-light);
cursor: pointer;
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: .12em;
text-transform: uppercase;
}
.quiz-again:hover { color: var(--hivis); }
/* ---------- Priskort-kroge ----------
Testen fremhæver det anbefalede kort. Ingen skygge — systemet har ingen.
Markeringen er en dobbelt hi-vis kant, som virker på alle tre kortflader. */
.plan-card { transition: outline-color .4s ease; outline: 2px solid transparent; outline-offset: 3px; }
.plan-card.plan-highlight { outline-color: var(--hivis); }
/* Ombryder .card-tag på "Personlig plan". Specificiteten skal slå
`.coaching-card .card-tag` (0,2,0) i css/site.css — derfor den kædede
selektor. Knapheden markeres med omrids, ikke med fyld: fyldt hi-vis er
forbeholdt den primære handling. */
.coaching-card .card-tag.card-tag-scarcity {
display: inline-block;
background: transparent;
border: 1px solid var(--hivis);
color: var(--hivis);
border-radius: var(--radius-control);
padding: 6px 10px;
}
@media (max-width: 700px) {
.quiz-modal { padding: var(--space-8) var(--space-4); }
.quiz-cta-inner { padding-left: var(--space-6); }
}