/* ============================================================ BLACK TEAM — scroll-motor Alt bevægelse er transform/opacity, så det holder 60 fps. Alt slås fra under prefers-reduced-motion, uden at layoutet ændrer sig. ============================================================ */ /* ---------------------------------------------------------- REVEAL Bemærk `.js`-præfikset. Klassen sættes synkront af et lille script i , og afsløringen af indhold afhænger af JavaScript. Uden præfikset ville en blokeret, fejlet eller langsom site.js efterlade hele sitet på opacity: 0 — altså usynligt. Med præfikset er standardtilstanden "synlig", og animationen er en tilføjelse oven på et site, der virker uden. ---------------------------------------------------------------------- */ .js [data-reveal] { opacity: 0; transform: translate3d(0, var(--reveal-y, 26px), 0); transition: opacity var(--bt-dur-slow) var(--bt-ease), transform var(--bt-dur-slow) var(--bt-ease); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .js [data-reveal].is-visible { opacity: 1; transform: translate3d(0, 0, 0); will-change: auto; } .js [data-reveal="left"] { transform: translate3d(-32px, 0, 0); } .js [data-reveal="right"] { transform: translate3d(32px, 0, 0); } .js [data-reveal="scale"] { transform: scale(0.965); } .js [data-reveal="mask"] { opacity: 1; transform: none; } /* Maskeret linjeafsløring — overskrifter der "kører op" bag en kant */ .js [data-reveal="mask"] > * { display: block; transform: translate3d(0, 105%, 0); transition: transform 1s var(--bt-ease); transition-delay: var(--reveal-delay, 0ms); } .js [data-reveal="mask"].is-visible > * { transform: translate3d(0, 0, 0); } /* Maskens overflow:hidden er nødvendig for at skjule linjen, før den kører op. Men linjehøjden er 0.94 — altså MINDRE end skriftstørrelsen — og så rager ringen på Å og toppen af ? uden for linjeboksen og bliver klippet væk. Det ses især på dansk: Å, Æ, Ø og accenter sidder alle over versalhøjden. Luften tilføjes som padding (den ligger inden for klipningen, så tegnene kan tegnes der) og trækkes ud igen med en negativ margen af samme størrelse, så linjerne står præcis hvor de gjorde. */ .mask-line { overflow: hidden; display: block; padding-top: 0.2em; margin-top: -0.2em; padding-bottom: 0.1em; margin-bottom: -0.04em; } /* Stagger: sæt --reveal-delay på børn via nth-child */ .js [data-stagger] > * { transition-delay: calc(var(--stagger-step, 80ms) * var(--i, 0)); } [data-stagger] > *:nth-child(1) { --i: 0; } [data-stagger] > *:nth-child(2) { --i: 1; } [data-stagger] > *:nth-child(3) { --i: 2; } [data-stagger] > *:nth-child(4) { --i: 3; } [data-stagger] > *:nth-child(5) { --i: 4; } [data-stagger] > *:nth-child(6) { --i: 5; } [data-stagger] > *:nth-child(7) { --i: 6; } [data-stagger] > *:nth-child(8) { --i: 7; } [data-stagger] > *:nth-child(9) { --i: 8; } [data-stagger] > *:nth-child(10) { --i: 9; } /* ---------------------------------------------------------- HERO */ .hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: clip; background: var(--bt-ink-950); color: var(--bt-on-dark); isolation: isolate; } .hero__media { position: absolute; inset: -8% 0 0 0; z-index: -2; /* --hero-p sættes af scroll.js, 0 → 1 */ transform: translate3d(0, calc(var(--hero-p, 0) * 14%), 0) scale(calc(1 + var(--hero-p, 0) * 0.09)); will-change: transform; } .hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; } .hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--bt-ink-950) 2%, rgba(2, 8, 14, 0.72) 34%, rgba(2, 8, 14, 0.34) 62%, rgba(2, 8, 14, 0.68) 100%), radial-gradient(120% 80% at 20% 90%, rgba(2, 8, 14, 0.85), transparent 60%); } .hero__inner { position: relative; padding-block: calc(var(--bt-header-h) + 4rem) clamp(3.5rem, 2rem + 6vw, 8rem); /* Indholdet driver langsomt opad og toner ud mens man scroller væk */ transform: translate3d(0, calc(var(--hero-p, 0) * -60px), 0); opacity: calc(1 - var(--hero-p, 0) * 1.15); will-change: transform, opacity; } .hero__title { font-family: var(--bt-font-display); font-weight: 700; font-size: var(--bt-fs-hero); line-height: var(--bt-lh-tight); letter-spacing: -0.02em; text-transform: uppercase; text-wrap: balance; } .hero__title .amber { display: block; } .hero__lead { margin-top: clamp(1.25rem, 0.8rem + 1.4vw, 2rem); max-width: 46ch; font-size: var(--bt-fs-lead); line-height: 1.5; color: #C7D2DC; } .hero__actions { margin-top: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); display: flex; flex-wrap: wrap; gap: 0.85rem; } /* Scroll-indikator */ .scrollcue { position: absolute; left: 50%; bottom: 1.75rem; translate: -50% 0; display: grid; justify-items: center; gap: 0.6rem; font-family: var(--bt-font-display); font-size: 0.6875rem; letter-spacing: var(--bt-track-micro); text-transform: uppercase; color: var(--bt-on-dark-faint); opacity: calc(1 - var(--hero-p, 0) * 2.4); pointer-events: none; } .scrollcue__rail { width: 1px; height: 46px; background: linear-gradient(to bottom, var(--bt-amber), transparent); position: relative; overflow: hidden; } .scrollcue__rail::after { content: ""; position: absolute; inset: 0 auto auto 0; width: 1px; height: 14px; background: var(--bt-amber); animation: cue 2.1s var(--bt-ease-io) infinite; } @keyframes cue { 0% { transform: translateY(-16px); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateY(46px); opacity: 0; } } /* ---------------------------------------------------------- PARALLAX-LAG */ [data-parallax] { transform: translate3d(0, calc(var(--p, 0) * var(--parallax-strength, 60px)), 0); will-change: transform; } /* ---------------------------------------------------------- PINNET SEKVENS */ /* Uden JavaScript giver en pinnet sekvens ingen mening: der er ingen der skifter trin. Så bliver den til en almindelig, læsbar liste, og den høje scroll-spacer fjernes, så der ikke står tre skærmfulde tomhed tilbage. */ html:not(.js) .pin__spacer { display: none; } html:not(.js) .pin__stage { position: static; min-height: 0; } html:not(.js) .pinstep { padding-block: 1.5rem; border-top: 1px solid var(--bt-ink-700); } .pin { position: relative; } .pin__stage { position: sticky; top: 0; min-height: 100svh; display: grid; align-content: center; overflow: clip; } /* Trin i en pinnet sekvens: kun det aktive er fuldt synligt */ .js .pinstep { grid-area: 1 / 1; opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity 520ms var(--bt-ease), transform 620ms var(--bt-ease); pointer-events: none; } .pinstep.is-active { opacity: 1; transform: translate3d(0, 0, 0); pointer-events: auto; } .pinstep.is-past { opacity: 0; transform: translate3d(0, -28px, 0); } /* Lodret trinskinne med guld-progression */ .pinrail { position: relative; width: 2px; background: var(--bt-ink-700); border-radius: 2px; } .pinrail__fill { position: absolute; inset: 0 0 auto 0; height: calc(var(--seq-p, 0) * 100%); background: linear-gradient(to bottom, var(--bt-amber), var(--bt-gold)); border-radius: 2px; } .pinrail__dots { position: absolute; inset: 0; display: grid; align-content: space-between; justify-items: center; } .pinrail__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--bt-ink-850); border: 2px solid var(--bt-ink-600); transition: background var(--bt-dur) var(--bt-ease), border-color var(--bt-dur) var(--bt-ease), transform var(--bt-dur) var(--bt-ease); } .pinrail__dot.is-on { background: var(--bt-amber); border-color: var(--bt-amber); transform: scale(1.35); } /* ---------------------------------------------------------- ORDVIS OPLYSNING */ .wordlight { text-wrap: balance; } .wordlight span { color: var(--bt-ink-700); transition: color 260ms linear; } .section--dark .wordlight span { color: #24384A; } .wordlight span.is-lit { color: currentColor; } .wordlight span.is-accent.is-lit { color: var(--accent); } /* ---------------------------------------------------------- TÆLLERE */ .counter { font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------- STAKKEDE KORT (niveauer) */ .stackcards { display: grid; gap: clamp(1rem, 0.6rem + 1.2vw, 1.75rem); } .stackcards > * { position: sticky; top: calc(var(--bt-header-h) + clamp(1rem, 4vh, 3rem)); } /* Trapper: hvert kort lidt længere inde, som en stige */ .levelcard { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(1rem, 0.6rem + 1.4vw, 2rem); align-items: center; padding: clamp(1.25rem, 0.9rem + 1.2vw, 2rem); border: 1px solid var(--bt-ink-700); border-radius: var(--bt-radius-lg); background: var(--bt-ink-850); color: var(--bt-on-dark); box-shadow: var(--bt-shadow-lg); transition: border-color var(--bt-dur) var(--bt-ease), transform var(--bt-dur) var(--bt-ease); } .levelcard:hover { border-color: var(--bt-amber-line); } .levelcard__num { font-family: var(--bt-font-display); font-weight: 700; font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); line-height: 0.9; color: var(--accent); min-width: 2.2ch; font-variant-numeric: tabular-nums; } .levelcard__title { font-family: var(--bt-font-display); text-transform: uppercase; font-size: var(--bt-fs-h3); line-height: 1.1; } .levelcard__body { margin-top: 0.4rem; color: var(--bt-on-dark-muted); font-size: var(--bt-fs-small); } .levelcard__price { font-family: var(--bt-font-display); font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.04em; color: var(--accent); white-space: nowrap; text-align: right; } @media (max-width: 720px) { .levelcard { grid-template-columns: auto minmax(0, 1fr); } .levelcard__price { grid-column: 2; text-align: left; } } /* ---------------------------------------------------------- VANDRET SKINNE */ .hscroll { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 24rem); gap: clamp(0.85rem, 0.5rem + 1vw, 1.5rem); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-inline: var(--bt-gutter); padding-block: 0.5rem 1.5rem; scrollbar-width: thin; scrollbar-color: var(--bt-ink-600) transparent; } .hscroll > * { scroll-snap-align: start; } .hscroll::-webkit-scrollbar { height: 6px; } .hscroll::-webkit-scrollbar-thumb { background: var(--bt-ink-600); border-radius: 3px; } /* ---------------------------------------------------------- SIDEPROGRESSION */ .readbar { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 101; background: var(--bt-amber); transform-origin: left; transform: scaleX(var(--read-p, 0)); pointer-events: none; } /* ---------------------------------------------------------- REDUCERET BEVÆGELSE */ @media (prefers-reduced-motion: reduce) { .js [data-reveal], .js [data-reveal].is-visible { opacity: 1 !important; transform: none !important; transition: none !important; } .js [data-reveal="mask"] > * { transform: none !important; transition: none !important; } [data-parallax] { transform: none !important; } .hero__media, .hero__inner { transform: none !important; opacity: 1 !important; } .scrollcue__rail::after { animation: none; } .scrollcue { opacity: 1; } /* Pinnede sekvenser bliver til almindelige, læsbare lister. Afstandsstykket skal med væk — ellers står der tre skærmfulde tomhed, hvor scrollen tidligere drev sekvensen frem. */ .pin__spacer { display: none; } .pin__stage { position: static; min-height: 0; display: block; } .js .pinstep { opacity: 1 !important; transform: none !important; pointer-events: auto; display: block; padding-block: 2rem; border-top: 1px solid var(--bt-ink-700); } .stackcards > * { position: static; } .wordlight span { color: inherit !important; } .wordlight span.is-accent { color: var(--accent) !important; } } /* ---------------------------------------------------------- MOBIL: HERO Scroll-indikatoren sad midt i hero'ens bund og lagde sig oven i CTA-knapperne på smalle skærme, hvor knapperne bliver fuldbredde. Den skjules under 900 px, hvor den alligevel ikke tilfører noget: på touch scroller man uden at blive bedt om det. Hero'en får samtidig lidt luft i bunden, så knapperne ikke klistrer til kanten. ---------------------------------------------------------------------- */ @media (max-width: 900px) { .scrollcue { display: none; } .hero__inner { padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 4rem); } } /* Lave vinduer: hero'en må ikke tvinge indholdet ud over skærmen */ @media (max-height: 700px) { .hero__inner { padding-block: calc(var(--bt-header-h) + 2rem) 2.5rem; } .hero__lead { margin-top: 1rem; } .hero__actions { margin-top: 1.25rem; } }