/* index.html — sektionslag.
*
* Reglerne står i css/tokens.css. Her sættes kun layout og de greb, der er
* specifikke for forsidens sektioner. Farve hentes altid via rollenavne
* (--accent, --fg-muted, --line …), som fladeklassen på sektionen resolver.
*
* Billedstier er relative til DETTE stylesheet, derfor ../images/.
*/
/* ---------- Sektionsramme ----------
* Sektionerne er fuldbleed, så fladeskiftet går kant til kant, men indholdet
* holdes på --content-max. Uden indre wrapper-div løses det med asymmetrisk
* padding i stedet for margin: auto. */
.about, .media, .testimonials, .plans, .b2b, .b2b-head, .timeline, .u4c, .faq, .contact,
.stats-bar, .sponsor-strip, .pull-quote, .quote-section, .press-band {
padding: var(--section-gap) max(var(--space-4), calc((100% - var(--content-max)) / 2));
}
.section-tag {
display: block;
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
text-transform: uppercase;
letter-spacing: .14em;
color: var(--fg-muted);
margin-bottom: var(--space-3);
}
.section-title { margin-bottom: var(--space-8); }
/* ---------- Ø i displaysnittet ----------
* Barlow Condensed giver Ø en bred højre-sidebearing, så skråstregen ikke
* støder ind i næste bogstav, og fonten har intet kern-par for Ø + følgende
* tegn. Målt ved 200px: hullet efter Ø er 13px, hvor alle andre bogstavpar
* ligger på 4–6px. Det læses som "LØ BE".
*
* Hullet FØR Ø er normalt, så korrektionen hører kun på højresiden. Fontfilen
* kunne rettes i stedet, men OFL kræver navneskift ved modifikation, så det
* bliver et CSS-indgreb. Spannene sættes af scriptet i index.html. */
/* display:inline er defensivt: spannene indsættes midt inde i ord, så bliver
* de nogensinde gjort til blokelementer af en bredere regel, brækker ordet. */
.kern-oe { display: inline; margin-right: -.035em; }
/* ---------- Topbar ----------
* Sticky, mørk, permanent CTA i hi-vis. Højden skal svare til --topbar-h,
* ellers lander ankerspring under baren. */
nav {
position: sticky;
top: 0;
z-index: 40;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
background: var(--ink);
border-bottom: 1px solid var(--line-dark);
padding: var(--space-3) max(var(--space-4), calc((100% - var(--content-max)) / 2));
}
/* Davids logo er en LODRET lockup — mærke over signatur — designet til stort
* format. I en topbar ville signaturen kun få ~28 % af højden og blive et
* udtværet strøg. Derfor er de to dele skåret ud som separate transparente
* WebP'er og lagt vandret. Grafikken er hans egen; kun kompositionen er ny.
*
* Ingen border-radius og ingen baggrund: mærket er selv cirkulært med sin
* guldring, og PNG'ens sorte baggrund er nøglet væk. */
.nav-logo {
display: flex;
align-items: center;
gap: var(--space-3);
text-decoration: none;
flex: none;
}
.nav-maerke { height: 64px; width: auto; flex: none; }
/* Navnet i displaysnittet, undertitlen bredt sat og dæmpet. Signaturen fra
* hans logo bruges ikke her: den er en lodret lockup og bliver et udtværet
* strøg under ~40px. Mærket er hans grafik; navnetrækket er sidens egne snit. */
.nav-wordmark {
display: flex;
flex-direction: column;
gap: 3px;
font-family: var(--font-display);
font-size: 22px;
font-weight: var(--weight-black);
letter-spacing: .04em;
text-transform: uppercase;
line-height: 1;
color: var(--fg-on-dark);
white-space: nowrap;
}
.nav-wordmark small {
font-family: var(--font-display);
font-size: 13px;
font-weight: var(--weight-medium);
letter-spacing: .22em;
color: var(--slate-light);
}
.nav-logo:hover .nav-maerke { opacity: .85; }
.nav-logo:hover .nav-wordmark { color: var(--hivis); }
.nav-logo:hover .nav-wordmark small { color: var(--slate-light); }
/* Syv punkter, et logo-lockup og en CTA skal dele 1120px. Derfor 16px
* mellemrum og 12px skrift her i stedet for sidens --text-xs på 13px —
* ellers bryder rækken ud af indholdskolonnen. Målt, ikke gættet. */
.nav-links {
display: none;
align-items: center;
gap: var(--space-3);
list-style: none;
}
.nav-links a {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--fg-on-dark);
text-decoration: none;
white-space: nowrap;
padding: 6px 0;
border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--hivis); border-bottom-color: var(--hivis); }
.nav-cta {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 var(--space-6);
background: var(--hivis);
color: var(--ink);
border-radius: var(--radius-control);
font-family: var(--font-display);
font-size: 17px;
font-weight: var(--weight-bold);
letter-spacing: .02em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
}
.nav-cta:hover { background: var(--hivis-hover); color: var(--ink); }
@media (min-width: 1200px) { .nav-links { display: flex; } }
/* Signaturen skal dele rækken med syv navigationspunkter og en CTA. Målt:
* ved 1100px koster den 17px mere, end rækken har — så under 1200px vises
* kun mærket, der bærer identiteten alene. Navigationspunkterne bevares
* fra 1100px som før, for de har en funktion; signaturen er identitet. */
/* Navnetrækket koster 198px i rækken. Under 460px er der ikke plads sammen
* med mærket og CTA'en, så det skjules dér. Navigationspunkterne vises først
* fra 1200px — målt: syv punkter, navnetrækket og CTA'en fylder 1106px af
* indholdskolonnens 1120px, og ved 1100px viewport er der kun 1068px. */
@media (max-width: 620px) {
.nav-maerke { height: 52px; }
.nav-wordmark { font-size: 16px; gap: 2px; }
.nav-wordmark small { font-size: 10px; letter-spacing: .18em; }
}
/* Under 375px er der ikke plads til mærke, navn og CTA på én række.
* Målt: ved 375px er der 9px til overs, ved 360px mangler der 6px. */
@media (max-width: 374px) { .nav-wordmark { display: none; } }
/* ---------- Hero ----------
* Fuldbleed fotografi, ingen container, ingen afrundede hjørner. Fladet ud i
* ink, så statsbjælken nedenunder er samme flade. 85vh lader bjælken brydes
* af skærmkanten og invitere til scroll. */
.hero {
position: relative;
min-height: 85vh;
display: flex;
flex-direction: column;
justify-content: flex-end;
background: var(--ink);
color: var(--fg-on-dark);
isolation: isolate;
overflow: hidden;
padding: var(--space-24) max(var(--space-4), calc((100% - var(--content-max)) / 2)) var(--space-16);
}
/* Højere end feltet, fordi JavaScript'et parallakser laget nedad. Uden
* overskudshøjde ville overkanten blive afsløret under scroll. */
.hero-bg {
position: absolute;
inset: -15% 0 0 0;
height: 130%;
z-index: -2;
/* 2000px fra originalen. a0.webp er 400px og bruges kun som nav-mærke —
det blev nedskaleret dengang fotoet ikke var hero. */
background: url("../images/hero.webp") center 38% / cover no-repeat, var(--forest);
will-change: transform;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--overlay-photo);
}
/* Sidens mest eksponerede tal. Mono med tabulære cifre, som alle andre tal. */
.hero-distance {
position: absolute;
right: max(var(--space-4), calc((100% - var(--content-max)) / 2));
top: 50%;
z-index: -1;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: clamp(72px, 11vw, 168px);
font-weight: var(--weight-medium);
line-height: .82;
letter-spacing: -.04em;
text-align: right;
color: var(--hivis);
opacity: .16;
pointer-events: none;
}
.hero-tag {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
text-transform: uppercase;
letter-spacing: .14em;
color: var(--hivis);
margin-bottom: var(--space-6);
}
.hero h1 { margin: 0; max-width: 18ch; }
/* Klassen er ikke pynt: en bar `.hero h1 span` ramte også de spans som
* kerning.js indsætter omkring Ø, gjorde dem til blokelementer midt inde i
* ordet og farvede dem hi-vis — "LØBE" brækkede i tre linjer. */
.hero h1 .hero__break { display: block; color: var(--hivis); }
.hero-sub {
margin: var(--space-8) 0 0;
font-size: var(--text-lead);
line-height: 1.5;
max-width: 54ch;
color: var(--fg-on-dark);
}
.hero-sub strong { font-weight: var(--weight-medium); }
.hero-cta-group { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }
@media (max-width: 767px) {
.hero { min-height: 88vh; padding-top: var(--space-16); }
.hero-cta-group .btn-primary { width: 100%; }
/* Tallet er bredere efter 555 → 1.343 og rækker nu ind under h1'ens anden
* linje. På mobil er der ikke plads til at flytte det, så det trækkes ned
* til et knap synligt vandmærke i stedet. */
.hero-distance { opacity: .04; }
/* Heroen er lavere på mobil, så tekstblokken rykker op i den del af
* gradienten, der næsten er gennemsigtig. Scrimmen trækkes højere op, så
* hi-vis-labelen ikke lander på et lyst sted i fotoet. */
.hero::before {
background: linear-gradient(to top,
rgba(11,31,23,.96) 0%,
rgba(11,31,23,.88) 42%,
rgba(11,31,23,.62) 74%,
rgba(11,31,23,.28) 100%);
}
}
/* ---------- Knapper ----------
* Markup'en bruger .btn-primary og .btn-cta. De arver basislagets .btn-udtryk
* så der ikke skal røres ved hvert eneste anker i HTML'en. */
.btn-primary, .btn-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 52px;
padding: 0 var(--space-8);
border: 2px solid transparent;
border-radius: var(--radius-control);
background: var(--cta-fill);
color: var(--cta-fg);
font-family: var(--font-display);
font-size: 20px;
font-weight: var(--weight-bold);
line-height: 1;
letter-spacing: .02em;
text-transform: uppercase;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
transition: background-color .15s ease, color .15s ease;
}
.btn-primary:hover, .btn-cta:hover { background: var(--cta-hover); color: var(--cta-fg); }
/* Hero og andre sektioner uden .on-*-klasse skal stadig kende deres accent. */
.hero, .stats-bar, .b2b-head, .contact, .sticky-cta, footer {
--cta-fill: var(--hivis);
--cta-fg: var(--ink);
--cta-hover: var(--hivis-hover);
--cta-text: var(--hivis);
--accent: var(--hivis);
--fg-muted: var(--slate-light);
--line: var(--line-dark);
--heading-color: var(--fg-on-dark);
}
.about, .media, .press-band, .testimonials, .plans, .b2b, .u4c, .faq, .sponsor-strip {
--cta-fill: var(--forest);
--cta-fg: var(--white);
--cta-hover: var(--ink);
--cta-text: var(--forest);
--accent: var(--forest);
--fg-muted: var(--slate-ink);
--line: var(--line-light);
--heading-color: var(--ink);
--card: var(--paper);
}
.timeline, .quote-section, .pull-quote, .quiz-cta-band {
--cta-fill: var(--hivis);
--cta-fg: var(--ink);
--cta-hover: var(--hivis-hover);
--cta-text: var(--hivis);
--accent: var(--hivis);
--fg-muted: var(--slate-light);
--line: var(--line-dark);
--heading-color: var(--fg-on-dark);
}
/* ---------- Statsbjælke ----------
* Samme flade som hero. Kun en hårfin linje skiller — ikke et fladeskift. */
.stats-bar {
background: var(--ink);
color: var(--fg-on-dark);
border-top: 1px solid var(--line-dark);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-8) var(--space-6);
padding-block: var(--space-12);
}
.stat { display: flex; flex-direction: column; gap: var(--space-2); }
.stat + .stat { border-left: 1px solid var(--line-dark); padding-left: var(--space-6); }
.stat-number {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: clamp(40px, 5.4vw, 68px);
font-weight: var(--weight-medium);
line-height: .9;
letter-spacing: -.03em;
color: var(--hivis);
}
.stat-number .unit { font-size: .38em; letter-spacing: 0; margin-left: .18em; }
.stat-label {
font-family: var(--font-mono);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: .12em;
color: var(--slate-light);
}
@media (min-width: 900px) { .stats-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 899px) { .stat:nth-child(odd) { border-left: 0; padding-left: 0; } }
/* ---------- Om David ---------- */
.about {
background: var(--bone);
color: var(--ink);
display: grid;
grid-template-columns: 1fr;
gap: var(--space-12);
align-items: start;
}
.about .section-title { font-size: clamp(48px, 4.2vw, 58px); }
.about-text p { margin-bottom: var(--space-4); max-width: var(--measure); font-size: var(--text-lead); line-height: 1.5; }
/* Begge CV'er er lange lister. De ligger foldet sammen, så "Om David" kan
* læses som tre afsnit — og folder ud for den, der vil have hele listen. */
.cv-columns {
display: grid;
grid-template-columns: 1fr;
gap: 0;
margin-top: var(--space-12);
border-top: 1px solid var(--line-light);
}
.cv-block { border-bottom: 1px solid var(--line-light); }
.cv-block > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-4) 0;
cursor: pointer;
list-style: none;
}
.cv-block > summary::-webkit-details-marker { display: none; }
.cv-block > summary h3 { margin: 0; }
.cv-block > summary::after {
content: "+";
flex: none;
font-family: var(--font-mono);
font-size: 24px;
line-height: 1;
color: var(--accent);
}
.cv-block[open] > summary::after { content: "–"; }
.cv-columns ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-6); }
.cv-columns li { position: relative; padding-left: 24px; font-size: var(--text-base); line-height: 1.45; }
.cv-columns li::before {
content: "";
position: absolute;
left: 0;
top: .62em;
width: 10px;
height: 2px;
background: var(--accent);
}
.about-image { aspect-ratio: 4/5; overflow: hidden; background: var(--forest); }
@media (min-width: 900px) {
.about { grid-template-columns: minmax(0, 1fr) minmax(0, 34%); gap: var(--space-16); }
.cv-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-12); }
}
/* ---------- Medielogo-bånd ----------
* Ligger direkte under statsbjælken, som hos referencen. Selve mediekortene
* er flyttet længere ned på siden; kun logorækken bliver heroppe. */
.press-band { background: var(--bone); color: var(--ink); padding-block: var(--space-12); }
.press-band .section-tag { margin-bottom: var(--space-6); }
.press-band .media-logo-marquee { margin-bottom: 0; border: 0; padding-block: 0; }
/* ---------- Medier ---------- */
.media { background: var(--bone); color: var(--ink); }
.media-logo-marquee {
overflow: hidden;
margin-bottom: var(--space-12);
border-block: 1px solid var(--line-light);
padding-block: var(--space-6);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.media-logo-track { display: flex; align-items: center; gap: var(--space-12); width: max-content; animation: marquee 46s linear infinite; }
@keyframes marquee { to { transform: translateX(-33.333%); } }
.media-logo-chip { display: flex; align-items: center; gap: 6px; flex: none; opacity: .7; }
.media-logo-chip img { height: 26px; width: auto; filter: grayscale(1); mix-blend-mode: multiply; }
.media-logo-word, .chip-suffix {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--slate-ink);
}
/* Vandret scroll ved alle bredder, samme mekanik som tidslinjen. */
.media-scroll-wrapper { margin-inline: calc(max(var(--space-4), calc((100% - var(--content-max)) / 2)) * -1); }
.media-grid {
display: flex;
gap: var(--space-6);
overflow-x: auto;
scroll-snap-type: x mandatory;
/* Uden denne måles snappunkterne mod padding-boksen, og browseren ruller
* venstremargenen væk ved indlæsning: første kort klistrer til skærmkanten.
* scroll-padding flytter snapporten ind, så margenen overlever snappet. */
scroll-padding-inline: max(var(--space-4), calc((100% - var(--content-max)) / 2));
padding: 0 max(var(--space-4), calc((100% - var(--content-max)) / 2)) var(--space-6);
scrollbar-width: thin;
scrollbar-color: var(--border-strong, #B4B8AB) transparent;
}
.media-card {
flex: 0 0 clamp(260px, 76vw, 340px);
scroll-snap-align: start;
display: flex;
flex-direction: column;
gap: var(--space-3);
background: var(--paper);
border: 1px solid var(--line-light);
padding: var(--space-6);
text-decoration: none;
color: var(--ink);
}
a.media-card:hover { background: var(--white); }
.media-card-img { width: calc(100% + var(--space-12) + 2px); margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-2); aspect-ratio: 3/2; object-fit: cover; }
.media-card .source {
font-family: var(--font-mono);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: .12em;
color: var(--accent);
}
.media-card h3 { font-size: var(--text-h3); }
.media-card p { font-size: var(--text-sm); line-height: 1.5; color: var(--slate-ink); }
.scroll-hint {
margin-top: var(--space-6);
font-family: var(--font-mono);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: .12em;
color: var(--fg-muted);
}
/* ---------- B2B-hoved ----------
* Kapitelskiftet og Workshops-sektionens eget hoved sagde det samme lige
* efter hinanden. De er slået sammen til ét: hovedet ligger på ink med
* hi-vis overkant og markerer samtidig, at siden skifter modtager — herfra
* sælges til klubber og foreninger, ikke til abonnenten. Kortene følger på
* papirfladen nedenunder. */
.b2b-head {
background: var(--ink);
color: var(--fg-on-dark);
border-top: 2px solid var(--hivis);
padding-block: var(--space-24);
}
.b2b-head .section-title { margin-bottom: var(--space-6); max-width: 26ch; }
.b2b-head .b2b-intro {
margin: 0;
font-size: var(--text-lead);
line-height: 1.5;
max-width: 52ch;
color: var(--fg-on-dark);
}
@media (max-width: 767px) { .b2b-head { padding-block: var(--space-16); } }
/* ---------- Udtalelser ---------- */
.testimonials { background: var(--bone); color: var(--ink); }
/* Vandret scroll, samme mekanik som tidslinjen og mediekortene. */
.testimonial-grid {
display: flex;
gap: var(--space-8);
overflow-x: auto;
scroll-snap-type: x mandatory;
/* Uden denne måles snappunkterne mod padding-boksen, og browseren ruller
* venstremargenen væk ved indlæsning: første kort klistrer til skærmkanten.
* scroll-padding flytter snapporten ind, så margenen overlever snappet. */
scroll-padding-inline: max(var(--space-4), calc((100% - var(--content-max)) / 2));
margin-inline: calc(max(var(--space-4), calc((100% - var(--content-max)) / 2)) * -1);
padding: 0 max(var(--space-4), calc((100% - var(--content-max)) / 2)) var(--space-6);
scrollbar-width: thin;
scrollbar-color: var(--border-strong, #B4B8AB) transparent;
}
.testimonial {
flex: 0 0 clamp(260px, 76vw, 340px);
scroll-snap-align: start;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-4);
border-top: 1px solid var(--line-light);
padding-top: var(--space-6);
}
.testimonial-img { width: 100%; aspect-ratio: 4/5; object-fit: cover; background: var(--forest); }
.testimonial-figure {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: clamp(38px, 4.4vw, 58px);
font-weight: var(--weight-medium);
line-height: .95;
letter-spacing: -.03em;
color: var(--accent);
}
.testimonial-rubric {
font-family: var(--font-mono);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: .12em;
color: var(--fg-muted);
margin-top: calc(var(--space-2) * -1);
}
.testimonial blockquote {
font-family: var(--font-display);
font-size: clamp(22px, 2vw, 28px);
font-weight: var(--weight-medium);
line-height: 1.2;
letter-spacing: -.01em;
text-wrap: pretty;
}
.testimonial blockquote em { font-style: normal; }
.testimonial figcaption {
font-family: var(--font-mono);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: .12em;
color: var(--fg-muted);
}
/* ---------- Forløb ---------- */
.plans { background: var(--bone); color: var(--ink); }
.plans-intro { max-width: var(--measure); font-size: var(--text-lead); line-height: 1.5; margin-bottom: var(--space-12); }
.plans-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
.coaching-card {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-8);
background: var(--paper);
border: 1px solid var(--line-light);
}
/* Trappen: papir → forest → ink. Fladeskiftet er hele hierarkiet. */
.coaching-card[data-plan="udvidet"] {
background: var(--forest);
border-color: transparent;
border-top: 3px solid var(--hivis);
color: var(--fg-on-dark);
--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);
--heading-color: var(--fg-on-dark);
--field-bg: #08170F;
--field-border: var(--line-dark);
--field-fg: var(--fg-on-dark);
--field-placeholder: var(--slate-light);
--ring: var(--hivis);
}
.coaching-card[data-plan="personlig"] {
background: var(--ink);
border-color: transparent;
color: var(--fg-on-dark);
--accent: var(--hivis);
--cta-fill: transparent;
--cta-fg: var(--hivis);
--cta-hover: var(--hivis);
--cta-text: var(--hivis);
--fg-muted: var(--slate-light);
--heading-color: var(--fg-on-dark);
--field-bg: #08170F;
--field-border: var(--line-dark);
--field-fg: var(--fg-on-dark);
--field-placeholder: var(--slate-light);
--ring: var(--hivis);
}
.coaching-card[data-plan="personlig"] .btn-primary { border-color: var(--hivis); }
.coaching-card[data-plan="personlig"] .btn-primary:hover { color: var(--ink); }
.card-tag {
align-self: flex-start;
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
text-transform: uppercase;
letter-spacing: .12em;
padding: 6px 10px;
background: var(--hivis);
color: var(--ink);
}
.card-tag-scarcity { background: transparent; border: 1px solid var(--hivis); color: var(--hivis); }
.price {
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(--heading-color, inherit);
}
.price-amount {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: clamp(44px, 4.6vw, 64px);
font-weight: var(--weight-medium);
line-height: .9;
letter-spacing: -.03em;
color: var(--accent);
}
.price-amount .unit { font-size: .3em; letter-spacing: 0; margin-left: .2em; }
.price-note {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: var(--text-sm);
color: var(--fg-muted);
letter-spacing: -.01em;
}
.coaching-card-features { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.coaching-card-features li { display: flex; gap: var(--space-3); font-size: var(--text-base); line-height: 1.45; }
.check { color: var(--accent); flex: none; font-weight: var(--weight-bold); }
.coaching-card .btn-primary { width: 100%; margin-top: var(--space-4); }
.plan-unsure {
font-family: var(--font-mono);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: .1em;
text-align: center;
text-decoration: none;
}
/* To pakker efter at Grundkurset udgik. Kortene blev først holdt på deres gamle
* tre-kolonne-bredde og rækken centreret — men så flugtede intet: overskriften og
* introteksten begyndte ved spaltens venstrekant, kortene ~190px længere inde.
* Det er justeringen, ikke bredden, der bærer sektionen, så de to kort deler nu
* spalten ligeligt og har samme kanter som teksten over dem. */
@media (min-width: 1000px) { .plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ---------- Venteliste ----------
* Bruges på Personlig plan begge steder: forsidens priskort og salgssidens.
* Derfor i det delte lag og ikke i css/start.css. Felternes farver kommer
* fra --field-*, som kortets egen regel sætter til den mørke flade. */
.waitlist-form { display: none; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.waitlist-form.open { display: flex; }
:where(.waitlist-form) label {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--fg-muted);
margin-top: var(--space-3);
}
.waitlist-form input {
min-height: 52px;
padding: 14px 16px;
border: 1px solid var(--field-border);
border-radius: var(--radius-control);
background: var(--field-bg);
color: var(--field-fg);
font-family: var(--font-body);
font-size: var(--text-base);
width: 100%;
}
.waitlist-form input:focus-visible { border-color: var(--ring); }
.waitlist-form .btn-primary { width: 100%; margin-top: var(--space-4); }
/* Personlig plans egen CTA er et omrids (--cta-fill er transparent dér).
* Indsend-knappen er den primære handling, når formularen først er åben, så
* den fyldes — ellers ville "border: none" gøre den usynlig på kortet. */
.coaching-card[data-plan="personlig"] .waitlist-form .btn-primary {
background: var(--hivis);
color: var(--ink);
border-color: transparent;
}
.waitlist-consent { font-size: var(--text-sm); line-height: 1.5; color: var(--fg-muted); margin-top: var(--space-3); }
.waitlist-status:not(:empty) {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--accent);
margin-top: var(--space-3);
}
/* ---------- Videobånd fra kursusbiblioteket ----------
* Ligger under prissøjlerne som en smagsprøve på indholdet. Samme mekanik som
* medielogo-båndet: sporet klones ×3 af scriptet, og keyframen kører -100%/3,
* så overgangen er umulig at se.
*
* Titlen er brændt ind i hvert thumbnail, så der er ingen billedtekst — ellers
* ville den stå to gange. Play-markøren er rent visuel og siger "det er
* videoer"; der er intet at klikke på, så intet lover afspilning. */
.kursus-band {
background: var(--bone);
color: var(--ink);
padding: var(--space-16) 0;
}
.kursus-band .section-tag {
padding-inline: max(var(--space-4), calc((100% - var(--content-max)) / 2));
margin-bottom: var(--space-6);
}
.kursus-marquee {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.kursus-track {
display: flex;
gap: var(--space-6);
width: max-content;
animation: marquee 120s linear infinite;
}
.kursus-item {
position: relative;
flex: none;
width: clamp(240px, 26vw, 320px);
display: block;
}
.kursus-item img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
display: block;
background: var(--forest);
}
/* Neutral markør frem for hi-vis: accenten er forbeholdt ting man kan gøre,
* og her er der ikke noget at gøre. */
.kursus-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 44px;
height: 44px;
display: grid;
place-items: center;
background: rgba(11, 31, 23, .68);
pointer-events: none;
}
.kursus-play::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 8px 0 8px 13px;
border-color: transparent transparent transparent #fff;
margin-left: 3px;
}
@media (max-width: 767px) { .kursus-band { padding-block: var(--space-12); } }
/* ---------- Citater ---------- */
.quote-section, .pull-quote { background: var(--forest); color: var(--fg-on-dark); }
.quote-section blockquote, .pull-quote p {
margin: 0;
font-family: var(--font-display);
font-size: clamp(26px, 3.2vw, 46px);
font-weight: var(--weight-medium);
line-height: 1.14;
letter-spacing: -.01em;
max-width: 34ch;
border-left: 3px solid var(--hivis);
padding-left: var(--space-8);
}
.quote-attr {
margin-top: var(--space-6);
padding-left: calc(var(--space-8) + 3px);
font-family: var(--font-mono);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: .12em;
color: var(--hivis);
}
.pull-quote { padding-block: var(--space-24); }
/* ---------- Workshops & Foredrag ---------- */
.b2b { background: var(--bone); color: var(--ink); }
.b2b-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: start; }
.b2b-card {
display: flex;
flex-direction: column;
gap: var(--space-4);
border-top: 1px solid var(--line-light);
padding-top: var(--space-6);
}
.b2b-card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; background: var(--forest); }
.b2b-price {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: var(--text-sm);
line-height: 1.5;
letter-spacing: -.01em;
color: var(--accent);
}
.b2b-card p { font-size: var(--text-base); line-height: 1.5; }
.b2b-quote {
border-top: 1px solid var(--line-light);
padding-top: var(--space-4);
font-size: var(--text-sm);
line-height: 1.5;
color: var(--fg-muted);
}
.b2b-quote em { font-style: normal; color: var(--ink); font-weight: var(--weight-medium); }
.b2b-card .btn-primary { margin-top: auto; align-self: flex-start; }
.b2b-location {
margin-top: var(--space-12);
padding-top: var(--space-6);
border-top: 1px solid var(--line-light);
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: var(--text-sm);
line-height: 1.7;
color: var(--fg-muted);
}
@media (min-width: 900px) { .b2b-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* ---------- Tidslinje ----------
* Årstallet lapper ned over fotoets underkant. Det er kortets eneste
* dekoration — der er hverken ramme, radius eller skygge. */
.timeline { background: var(--forest); color: var(--fg-on-dark); }
.timeline-scroll-wrapper { margin-inline: calc(max(var(--space-4), calc((100% - var(--content-max)) / 2)) * -1); }
.timeline-list {
display: flex;
gap: var(--space-8);
overflow-x: auto;
scroll-snap-type: x mandatory;
/* Uden denne måles snappunkterne mod padding-boksen, og browseren ruller
* venstremargenen væk ved indlæsning: første kort klistrer til skærmkanten.
* scroll-padding flytter snapporten ind, så margenen overlever snappet. */
scroll-padding-inline: max(var(--space-4), calc((100% - var(--content-max)) / 2));
padding: 0 max(var(--space-4), calc((100% - var(--content-max)) / 2)) var(--space-6);
scrollbar-width: thin;
scrollbar-color: var(--stroke-slate) transparent;
}
.timeline-item {
flex: 0 0 clamp(260px, 78vw, 340px);
scroll-snap-align: start;
display: flex;
flex-direction: column;
}
.timeline-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--ink); }
.timeline-date {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: clamp(30px, 3vw, 44px);
font-weight: var(--weight-medium);
line-height: 1;
letter-spacing: -.03em;
color: var(--hivis);
margin-top: -.52em;
margin-bottom: var(--space-4);
position: relative;
}
.timeline-content h3 { margin-bottom: var(--space-2); }
.timeline-content p { font-size: var(--text-sm); line-height: 1.55; color: var(--slate-light); }
.timeline .scroll-hint { color: var(--slate-light); padding-inline: max(var(--space-4), calc((100% - var(--content-max)) / 2)); }
@media (min-width: 900px) { .timeline .scroll-hint { display: block; } }
/* ---------- Ultra4Charity ---------- */
.u4c { background: var(--bone); color: var(--ink); }
.u4c-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-12); align-items: center; }
.u4c-text p { margin-bottom: var(--space-4); font-size: var(--text-lead); line-height: 1.5; max-width: var(--measure); }
.u4c-text ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.u4c-text li {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-1);
padding-top: var(--space-3);
border-top: 1px solid var(--line-light);
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: var(--text-sm);
line-height: 1.5;
letter-spacing: -.01em;
}
.u4c-image { aspect-ratio: 3/2; overflow: hidden; background: var(--forest); }
.u4c-image img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .u4c-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 42%); gap: var(--space-16); } }
/* ---------- Sponsorer ---------- */
.sponsor-strip { background: var(--bone); color: var(--ink); padding-top: 0; }
.sponsor-label {
font-family: var(--font-mono);
font-size: var(--text-sm);
text-transform: uppercase;
letter-spacing: .14em;
color: var(--fg-muted);
padding-top: var(--space-12);
border-top: 1px solid var(--line-light);
margin-bottom: var(--space-8);
}
.sponsor-logos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: var(--space-8);
align-items: center;
}
.sponsor-logos img { height: 40px; width: 100%; object-fit: contain; filter: grayscale(1); mix-blend-mode: multiply; opacity: .8; }
/* ---------- FAQ ---------- */
.faq { background: var(--bone); color: var(--ink); }
.faq-list { border-top: 1px solid var(--line-light); max-width: var(--content-narrow); }
.faq-item { border-bottom: 1px solid var(--line-light); }
.faq-item summary {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--space-6);
padding: var(--space-6) 0;
cursor: pointer;
list-style: none;
font-family: var(--font-display);
font-size: var(--text-h3);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: var(--display-tracking);
line-height: 1.15;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; font-family: var(--font-mono); font-size: 28px; line-height: 1; color: var(--accent); }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { padding-bottom: var(--space-6); font-size: var(--text-base); line-height: 1.6; max-width: var(--measure); color: var(--slate-ink); }
/* ---------- Kontakt ---------- */
.contact { background: var(--ink); color: var(--fg-on-dark); }
.contact-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-12); align-items: start; }
.contact-form-col p { margin-bottom: var(--space-6); font-size: var(--text-base); line-height: 1.6; max-width: var(--measure); color: var(--slate-light); }
.contact-form-col form { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-8); }
:where(.contact-form-col) label {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--slate-light);
margin-top: var(--space-4);
}
.contact-form-col input[type="text"],
.contact-form-col input[type="tel"],
.contact-form-col input[type="email"],
.contact-form-col textarea {
min-height: 52px;
padding: 14px 16px;
border: 1px solid var(--line-dark);
border-radius: var(--radius-control);
background: #08170F;
color: var(--fg-on-dark);
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.4;
width: 100%;
}
.contact-form-col textarea { min-height: 132px; resize: vertical; }
.contact-form-col input:focus-visible, .contact-form-col textarea:focus-visible { border-color: var(--hivis); }
/* --stroke-slate er forbudt som tekst (2,49:1 mod ink). Sekundær tekst
* hentes via --fg-muted, som fladen resolver til --slate-light her. */
/* Vises kun når man er kommet hertil via en "Book her"-knap, så det er
* tydeligt hvad forespørgslen gælder — den information stod før i mailtoens
* emnefelt. Skal slå `.contact-form-col p` (0,2,0), derfor den kædede selektor. */
.contact-form-col .form-context {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
margin: 0 0 var(--space-4);
padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
background: var(--forest);
border-left: 3px solid var(--hivis);
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--fg-on-dark);
max-width: none;
}
.form-context[hidden] { display: none; }
/* Krydser man båndet væk, bliver formularen den almindelige henvendelse igen. */
/* IBM Plex Mono sætter × på matematik-aksen, ikke midt i em-boksen: målt ved
* 180px sidder blækket 11,5px under midten = 0,064em. place-items:center
* centrerer linjeboksen, ikke glyffen, så den skævhed overlever.
*
* Korrektionen er padding-bottom og ikke transform: padding krymper kun
* indholdsboksen, så glyffen rykker op uden at kanten følger med.
* pb/2 = forskydningen, derfor 0,128em. */
.form-context__close {
flex: none;
width: 32px;
height: 32px;
display: grid;
place-items: center;
padding: 0 0 .128em;
background: none;
border: 1px solid var(--line-dark);
border-radius: var(--radius-control);
color: var(--fg-on-dark);
font-family: var(--font-mono);
font-size: 18px;
line-height: 1;
cursor: pointer;
}
.form-context__close:hover { border-color: var(--hivis); color: var(--hivis); }
.label-optional { text-transform: none; letter-spacing: 0; color: var(--fg-muted); }
/* Samtykke-fluebenet bruges i BÅDE kontaktformularen og ventelisten på
* Personlig plan, så reglen må ikke være scopet til den ene. Feltlabelernes
* mono-versaler ligger i :where(), som vejer nul — derfor vinder .form-optin
* her uden en kædet undtagelse. Farverne kommer fra fladen, så fluebenet
* virker både på papirfladen og på det mørke priskort. */
.form-optin {
display: flex;
gap: var(--space-3);
align-items: flex-start;
margin-top: var(--space-6);
font-family: var(--font-body);
font-size: var(--text-sm);
letter-spacing: 0;
text-transform: none;
line-height: 1.5;
color: var(--slate-light);
}
.form-optin input { width: 20px; height: 20px; flex: none; accent-color: var(--accent); margin-top: 2px; }
.form-consent { font-size: var(--text-sm); color: var(--slate-light); margin: var(--space-4) 0 var(--space-2); }
/* Kun indsend-knappen. Uden [type=submit] ramte reglen også lukkeknappen i
* bookingbåndet, og en 16px topmargin på et flex-element flytter det synlige
* felt ned — align-items:center centrerer margin-boksen, ikke border-boksen. */
.contact-form-col button[type="submit"] { margin-top: var(--space-4); }
#formStatus:not(:empty) {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--hivis);
margin-top: var(--space-4);
}
.contact-alt, .contact-signoff { font-size: var(--text-sm); line-height: 1.6; color: var(--slate-light); }
.contact-alt { margin-top: var(--space-8); }
.contact-signoff strong { color: var(--fg-on-dark); }
.contact-side { display: flex; flex-direction: column; gap: var(--space-6); }
.contact-join-box {
background: var(--forest);
border-left: 3px solid var(--hivis);
padding: var(--space-8);
display: flex;
flex-direction: column;
gap: var(--space-6);
align-items: stretch;
}
.contact-join-box p { margin: 0; color: var(--fg-on-dark); font-size: var(--text-base); line-height: 1.5; }
/* Overskriften er en blok inde i afsnittet. Der må IKKE stå et
efter den
* i markup'en — det gav en tom linje oveni margin'en og et hul på ~37px. */
.contact-join-box strong {
display: block;
margin-bottom: var(--space-3);
font-family: var(--font-display);
font-size: var(--text-h3);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: var(--display-tracking);
line-height: var(--leading-tight);
}
/* Knappen fylder boksen ud, så kanten ikke ser tilfældig ud. */
.contact-join-box .btn-primary { width: 100%; }
.contact-photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--forest); }
@media (min-width: 900px) { .contact-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 38%); gap: var(--space-16); } }
/* ---------- Sticky CTA ---------- */
.sticky-cta {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 30;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
background: var(--ink);
border-top: 1px solid var(--hivis);
padding: var(--space-3) max(var(--space-4), calc((100% - var(--content-max)) / 2));
transform: translateY(110%);
transition: transform .3s ease;
}
.sticky-cta.visible { transform: translateY(0); }
.sticky-cta-text { font-size: var(--text-sm); line-height: 1.4; color: var(--slate-light); }
.sticky-cta-text strong { color: var(--fg-on-dark); font-weight: var(--weight-medium); }
.sticky-cta .btn-cta { min-height: 44px; padding: 0 var(--space-6); font-size: 17px; }
@media (max-width: 700px) { .sticky-cta-text { display: none; } .sticky-cta .btn-cta { width: 100%; } }
/* ---------- Footer ---------- */
footer {
background: var(--ink);
color: var(--fg-on-dark);
border-top: 2px solid var(--hivis);
padding: var(--space-16) max(var(--space-4), calc((100% - var(--content-max)) / 2)) calc(var(--space-16) + 72px);
}
/* Syv knapper skal dele indholdskolonnens 1120px. Målt: med 16px polstring og
* .1em tracking kræver rækken 1176px og brækker. Pladsen er hentet i
* mellemrummene frem for i teksten — e-mailknappen alene fylder 262px, men
* adressen er Davids og skal stå som den står. */
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-12); }
.footer-links a {
display: inline-flex;
align-items: center;
min-height: 48px;
padding: 0 var(--space-3);
border: 1px solid var(--line-dark);
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: .07em;
text-transform: uppercase;
color: var(--fg-on-dark);
text-decoration: none;
}
.footer-links a:hover { border-color: var(--hivis); color: var(--hivis); }
footer p {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: var(--text-xs);
letter-spacing: .04em;
color: var(--slate-light);
}