/* ═══════════════════════════════════════════════════════════════════════════ KAFE.dk — forsiden, 9. september 2026, runde 2: den lyse driftsflade. Sidens eget lag oven på scrollcraft.css. Motoren temasættes med tokens og får aldrig ændret en linje: al bespoke adfærd bor i /forside.js og i de klasser, der står her. RUNDE 2. Produktet er lyst — creme, mørkegrøn, terrakotta — og forsiden følger nu produktet. Driftsfladen er lys; mørke flader er undtagelse og kontrast: heroen over filmen og afslutningen i brandets grønne. Tråden er væk. Progressionen bor i teksten selv: TEKSTLYSET (sektion 2). Læsevejledning: 1 Tokens lys grund, to tekst-toner, én accent 2 Grundflade og type systemstakken, ingen webfonts. Tekstlyset. 3 Chrome marketingbar der konverterer til statuslinje 4 Knapper og felter 5 Ordrekortet ægte markup, delt mellem akt 1 og akt 3 6 Akt 1 · Verden fire dybdelag, mørk over filmen 7 Akt 2 · Konvertering lyset går op 8 Akt 3 · Fra bordet gæstens side og jeres side, vekslende 9 Akt 4 · Systemet sidens peak, to spor 10 Akt 5 · Substansen 11 Akt 6 · Forpligtelsen mørk igen, i brandets grønne 12 Mobil en selvstændig komposition, ikke en skalering 13 Reduceret bevægelse en anden side, ikke den samme med motoren slukket 14 Nødudgange JS slået fra, motoren nåede aldrig frem ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1 · TOKENS ───────────────────────────────────────────────────────────── Grunden er brandets creme, fordi produktet står på creme. Én accent: den mørkegrønne, som er produktets primærknap — her den primære CTA på lys grund og den aktive tilstand. Terrakotta er et SIGNAL, ikke en accent: labels og prikker, aldrig flader. TO TEKST-TONER. Tekstlyset blander mellem dem, og BEGGE er målt til AA på den grund, de står på — afdæmpet tekst er stadig tekst: --sc-ink #181610 15,4:1 på creme overskrifter i fokus --sc-ink-body #2C2820 12,5:1 på creme brødtekst i fokus --sc-ink-soft #5D5648 6,2:1 på creme sekundær tekst --sc-daemp #6F6858 4,70:1 på creme, 5,18:1 på kortflade Akt 4 står på en anelse mørkere papir og har sin egen, mørkere dæmpet tone (5,0:1 dér). Se sektion 9. Mørke flader redefinerer tokens LOKALT på deres akt-element. Det er ikke pynt: motoren skriver --sc-canvas inline på og driver den mellem akternes data-sc-drift-farver, så en hero-scrim, der hang på den globale token, ville lysne til creme, mens filmen stadig stod på skærmen. */ :root { /* Runde 3: canvas løftet fra #F3ECDD. Ejeren så pap i den gamle tone. Den nye er lysere og mere neutral, men ikke klinisk, og MÅLT: dæmpet tekst 5,08:1 (var 4,70), signal 5,25:1 (var 4,86), brød 13,47:1. Mørk tekst vinder på lysere grund, så intet faldt. */ --sc-canvas: #F8F5EE; --sc-surface: #FDFBF7; --sc-ink: #181610; --sc-ink-body: #2C2820; --sc-ink-soft: #5D5648; --sc-daemp: #6F6858; --sc-accent: #2E4636; /* mørkegrøn, produktets primærknap */ --sc-accent-ink: #F3ECDD; --sc-signal: #A34E27; /* terrakotta, 5,25:1 på den nye canvas */ --sc-hairline: #E6DDCB; --sc-hairline-strong: #DACFB8; /* Systemstakken. Sidens tekniske grundlov forbyder webfonts: et blokeret CDN tog hele fladen ned 31/8, og typografi må ikke afhænge af nettet. Serif'en er sidens eksisterende displayface og en del af identiteten. */ --sc-font-display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --sc-font-text: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --sc-font-mono: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Skygger tonet mod cremen, aldrig sorte. På lys grund skal de være blødere end motorens mørke standard. */ --sc-shadow-color: 35 30% 22%; --kafe-groen: #2E4636; --kafe-dyb: #0F251F; --kafe-sage: #A5B792; --sc-maxw: 84rem; } /* ── 2 · GRUNDFLADE OG TYPE ─────────────────────────────────────────────── */ body { background: var(--sc-canvas); color: var(--sc-ink); } ::selection { background: color-mix(in oklab, var(--sc-accent) 24%, transparent); } .serif { font-family: var(--sc-font-display); } .sc-label { font-weight: 700; font-size: 0.78rem; letter-spacing: 0.22em; color: var(--sc-signal); margin: 0; /* Boksen må kun dække sine egne bogstaver: en label, hvis rect spænder hele kolonnen, står pr. definition over alt det, kolonnen dækker, og kontrastmålingen rammer så den lyseste plet under KASSEN. Målt 1,09:1. */ width: fit-content; } /* Lys tekst på mørk grund skal kompenseres med en anelse mere tracking, ellers ser creme på mørk brun tynd og udvasket ud. Kun de to mørke flader. */ .sub, .close__p { letter-spacing: 0.004em; } a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 4px; } /* TEKSTLYSET — signaturtrækket. Hvert [data-fokus]-element får en inline --f i 0..1 fra /forside.js, og tekstfarven blandes mellem den afdæmpede tone og den fulde. Ingen opacitet: opacitet ville trække sekundær tekst under AA, målt til 2,63:1 ved 60 %. Farven derimod er målt i begge ender. Standarden er --f: 1, altså fuld tekst. Lyset er en TILFØJELSE: uden JS, uden motoren, under reduceret bevægelse og i en browser uden color-mix står alt fuldt læsbart fra start. Den første color-linje er fallback'en; en browser, der ikke forstår den anden, beholder den første. */ [data-fokus] { --f: 1; } .konv__statement, .hus__h, .station__h, .modul__navn, .rail__h, .substans__h, .egen__h, .ordrekort__bord { --fuld: var(--sc-ink); } .station__p, .modul__hvad, .rail__p, .substans__p, .egen__p, .ordrekort__linjer li { --fuld: var(--sc-ink-body); } .substans__note { --fuld: var(--kafe-groen); } .modul__ud { --fuld: var(--sc-accent); } .konv__statement, .hus__h, .station__h, .station__p, .modul__navn, .modul__hvad, .modul__ud, .rail__h, .rail__p, .substans__h, .substans__p, .substans__note, .egen__h, .egen__p, .ordrekort__bord, .ordrekort__linjer li { color: var(--fuld); color: color-mix(in oklab, var(--sc-daemp), var(--fuld) calc(var(--f, 1) * 100%)); transition: color 170ms var(--sc-ease-out); } /* ── 3 · CHROME ───────────────────────────────────────────────────────────── Grammatikkens navigationstræk. Over filmen er den en marketingbar; under konverteringen bliver den en tynd statuslinje i driftsfladens eget idiom. Fladen er lys det meste af vejen og mørk igen til sidst, så statuslinjen har to tilstande ud over "verden". Statuslinjen er en INDIKATOR, ikke navigation: wordmark og Login er fortsat sidens eneste to chrome-links. Begge logovarianter ligger i markup'en og vælges her, så skiftet aldrig venter på et billede. Logoet får ingen filtre, konturer eller gradienter: skyggen over filmen er en dokumenteret PLACERINGS-rettelse over levende billede, ikke en ændring af mærket, og findes kun i "verden". */ .krom { position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome); display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4); padding: clamp(14px, 2.4vw, 26px) var(--sc-gutter); transition: padding 320ms var(--sc-ease-out); } /* Pladen bag statuslinjen. Et separat lag, så den kan fade uafhængigt af indholdet, og så den aldrig bliver et fuldskærms-lag. Farven følger tilstanden, ikke motorens drivende --sc-canvas: den drift er på vej fra mørkt til creme, mens akt 2 allerede står på creme. */ .krom::before { content: ""; position: absolute; inset: 0; z-index: -1; --plade: #F8F5EE; background: linear-gradient(180deg, color-mix(in oklab, var(--plade) 90%, transparent) 0%, color-mix(in oklab, var(--plade) 64%, transparent) 62%, transparent 100%); opacity: 0; transition: opacity 380ms var(--sc-ease-out); } .krom[data-krom="moerk"]::before { --plade: #2E4636; } .krom:not([data-krom="verden"]) { padding-block: clamp(10px, 1.6vw, 16px); } .krom:not([data-krom="verden"])::before { opacity: 1; } .krom__mark { display: inline-flex; align-items: center; min-height: 44px; padding-block: 5px; } .krom__logo { display: none; height: clamp(26px, 3.2vw, 34px); width: auto; transition: height 320ms var(--sc-ease-out); } .krom[data-krom="verden"] .krom__logo--lys, .krom[data-krom="moerk"] .krom__logo--lys, .krom[data-krom="lys"] .krom__logo--moerk { display: block; } .krom:not([data-krom="verden"]) .krom__logo { height: clamp(22px, 2.4vw, 26px); } /* Filmen har lyse frames — den hvide markise — og dér forsvinder et off-white logo næsten helt. */ .krom[data-krom="verden"] .krom__logo { filter: drop-shadow(0 2px 14px rgba(20, 17, 12, 0.55)); } /* Kapitelmarkøren. Runde 5: et nøk mere synlig — større, i fuld blæk, med lidt mere luft — men stadig en markør for historien, ikke navigation. */ .krom__status { margin: 0; display: flex; align-items: center; gap: 11px; font-size: 0.86rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-ink); opacity: 0; transform: translateY(-4px); transition: opacity 380ms var(--sc-ease-out), transform 380ms var(--sc-ease-out), color 380ms var(--sc-ease-out); pointer-events: none; white-space: nowrap; } .krom:not([data-krom="verden"]) .krom__status { opacity: 1; transform: none; } .krom[data-krom="moerk"] .krom__status { color: #E4E9E0; } /* Skiftet mellem kapitler: navnet glider et hak ind. Klassen sættes af forside.js i det øjeblik, teksten skifter. */ .krom__status.er-skift #kromKapitel { animation: kapitel-ind 360ms var(--sc-ease-out); } @keyframes kapitel-ind { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } .krom__prik { width: 7px; height: 7px; border-radius: 999px; flex: none; background: var(--sc-signal); box-shadow: 0 0 0 4px color-mix(in oklab, var(--sc-signal) 16%, transparent); } .krom[data-krom="moerk"] .krom__prik { background: var(--kafe-sage); box-shadow: 0 0 0 4px color-mix(in oklab, var(--kafe-sage) 18%, transparent); } .krom__login { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; color: #F3ECDD; text-decoration: none; padding: 9px 20px; border: 1px solid rgba(243, 236, 221, 0.42); border-radius: 999px; transition: background-color 180ms var(--sc-ease-out), border-color 180ms var(--sc-ease-out), color 180ms var(--sc-ease-out); } .krom__login:hover, .krom__login:focus-visible { background: rgba(243, 236, 221, 0.12); border-color: #F3ECDD; } .krom[data-krom="lys"] .krom__login { color: var(--sc-ink); border-color: color-mix(in oklab, var(--sc-ink) 34%, transparent); } .krom[data-krom="lys"] .krom__login:hover, .krom[data-krom="lys"] .krom__login:focus-visible { background: color-mix(in oklab, var(--sc-ink) 8%, transparent); border-color: var(--sc-ink); } /* ── 4 · KNAPPER OG FELTER ───────────────────────────────────────────────── Hver interaktiv flade har hvile, hover, fokus og tryk. Radiusskalaen er pille hele vejen igennem, fordi kortene også er stærkt afrundede. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--sc-font-text); font-size: 16px; font-weight: 600; text-decoration: none; border-radius: 999px; padding: 15px 27px; cursor: pointer; border: 1px solid transparent; min-height: 48px; transition: transform 120ms var(--sc-ease-out), background-color 180ms var(--sc-ease-out), border-color 180ms var(--sc-ease-out), color 180ms var(--sc-ease-out); } .btn:active { transform: translateY(1px); } /* Den primære CTA på mørk grund: creme med mørk skrift. Bruges i heroen og i den grønne afslutning, så begge mørke flader har samme knap. */ .btn--cream { background: #F3ECDD; color: #1B1409; border-color: #F3ECDD; } .btn--cream:hover, .btn--cream:focus-visible { background: #fff; } .btn--ghost-light { background: transparent; color: #F3ECDD; border-color: rgba(243, 236, 221, 0.46); } .btn--ghost-light:hover, .btn--ghost-light:focus-visible { border-color: #F3ECDD; background: rgba(243, 236, 221, 0.10); } /* Den primære CTA på lys grund: produktets grønne knap. */ .btn--accent { background: var(--sc-accent); color: var(--sc-accent-ink); border-color: var(--sc-accent); font-weight: 700; } .btn--accent:hover, .btn--accent:focus-visible { background: color-mix(in oklab, var(--sc-accent) 88%, #000); } /* ── 5 · ORDREKORTET ─────────────────────────────────────────────────────── Der findes ingen ægte produktskærmbilleder i dette repo, og et par divs, der poserer som en kørende flade, er forbudt. Kortet er ægte markup, bygget fra et dataarray i /forside.js, og det siger selv, hvad det er. Mærkaten er ikke en ansvarsfraskrivelse, den er sandheden. Ét kort, to grunde: i heroen arver det de mørke tokens og bliver mørkt glas over filmen; i akt 3 står det lyst på creme. Trin-listen i bunden er restaurantens rejse i miniature: bestilt → betalt → i driften. */ .ordrekort { width: min(20rem, 62vw); background: color-mix(in oklab, var(--sc-surface) 84%, transparent); border: 1px solid var(--sc-hairline-strong); border-radius: 18px; padding: 15px 17px 13px; box-shadow: var(--sc-e3), var(--sc-edge); backdrop-filter: blur(14px) saturate(1.1); font-size: 0.92rem; transform-origin: 100% 100%; /* runde 11: ankomsten ligger på .ordresaet */ } .ordrekort__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--sc-hairline); } .ordrekort__bord { font-weight: 700; letter-spacing: 0.02em; font-size: 0.98rem; } .ordrekort__maerke { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-ink-soft); border: 1px solid var(--sc-hairline-strong); border-radius: 999px; padding: 3px 8px; flex: none; } .ordrekort__linjer { list-style: none; margin: 11px 0 0; padding: 0; display: grid; gap: 7px; } .ordrekort__linjer li { display: flex; gap: 10px; align-items: baseline; opacity: 0; transform: translateY(6px); transition: opacity 320ms var(--sc-ease-out), transform 320ms var(--sc-ease-out), color 170ms var(--sc-ease-out); } .ordrekort__linjer li.er-inde { opacity: 1; transform: none; } .ordrekort__antal { font-variant-numeric: tabular-nums; color: var(--sc-ink-soft); min-width: 2.1em; } .ordrekort__bund { margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--sc-hairline); } .ordrekort__trin { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; } .ordrekort__trin li { display: inline-flex; align-items: center; gap: 7px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-daemp); transition: color 220ms var(--sc-ease-out); } .ordrekort__trin li::before { content: ""; width: 7px; height: 7px; border-radius: 999px; flex: none; background: currentColor; opacity: 0.45; transition: opacity 220ms var(--sc-ease-out), box-shadow 220ms var(--sc-ease-out); } .ordrekort__trin li.er-naaet { color: var(--sc-accent); } .ordrekort__trin li.er-naaet::before { opacity: 1; } /* Runde 3: det AKTIVE trin var kun en farvet prik — ejeren kunne se skiftet, hvis han holdt øje med det. Nu er det en fyldt pille: læsbart uden at lede, stadig roligt. Nåede trin bag det beholder det grønne ord. */ .ordrekort__trin li.er-nu { color: var(--sc-accent-ink); background: var(--sc-accent); padding: 4px 11px; border-radius: 999px; transition: color 220ms var(--sc-ease-out), background-color 220ms var(--sc-ease-out); } .ordrekort__trin li.er-nu::before { background: var(--sc-accent-ink); opacity: 1; box-shadow: none; } /* ── 6 · AKT 1 · VERDEN ──────────────────────────────────────────────────── Fire dybdelag skilt ud af den film, der allerede står på forsiden. Layer contract, rater og exit-states: BRIEF.md §10. MØRK OVER FILMEN, og det er lokalt: tokens redefineres på akten, så hverken motorens drift af --sc-canvas eller den lyse grund udenfor kan nå scrimmene. Scrimmenes densiteter er MÅLT over hele filmens loop og står uændrede fra runde 1. Fælder der er skrevet ind fra start: · planerne har max-width:none og fast pixelbredde, ellers krymper det globale img{max-width:100%} dem væk på telefon · INGEN transition på transform nogen steder her: det ville udglatte hver scroll-skrivning over sin varighed og læses på telefon som at billedet halter et sekund efter tommelfingeren · gulvet fader planernes klippekant væk mod sektionens bund */ .akt { position: relative; } .akt--verden { --sc-canvas: #14100C; --sc-surface: #1E1912; --sc-ink: #F3ECDD; --sc-ink-body: #F3ECDD; --sc-ink-soft: #A79B85; --sc-daemp: #A79B85; --sc-accent: #F3ECDD; --sc-accent-ink: #14100C; --sc-hairline: rgba(243, 236, 221, 0.13); --sc-hairline-strong: rgba(243, 236, 221, 0.24); --sc-shadow-color: 30 40% 3%; background: #14100C; color: var(--sc-ink); } .verden { background: var(--sc-canvas); } .lag { position: absolute; inset: 0; will-change: transform; } /* LAG 1 · WORLD ------------------------------------------------------------ */ .lag--verden { z-index: 0; } .lag__zoom { position: absolute; inset: -3%; /* Den eneste bevægelse laget har ud over sin parallakse: en meget subtil indzoomning, drevet af aktens egen progress. */ transform: scale(calc(1 + var(--sc-p, 0) * 0.045)); transform-origin: 52% 62%; } .verden__plade { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* Hero-filmen. Laget, klasserne og #heroMedia er kontrakt: /hero.js er en tilstandsmaskine med en dokumenteret fejlrettelse (et afvist play() må ALDRIG rydde hero-laget) og skrives ikke om. */ .hero__media { position: absolute; inset: 0; z-index: 1; overflow: hidden; } .hero__video, .hero__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.45s ease; } .hero__video.is-visible, .hero__still.is-visible { opacity: 1; } /* LAG 4a · ATMOSPHERE ------------------------------------------------------ */ .verden__haze { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(120% 68% at 62% 8%, color-mix(in oklab, #F6D9A8 12%, transparent), transparent 62%), linear-gradient(180deg, color-mix(in oklab, var(--sc-canvas) 42%, transparent) 0%, transparent 26%); } /* Scrimmen. Ikke et fuldskærms-mørkelag: densiteten lægges der, hvor teksten står. Målt over 60 frames af den faktiske forsidefilm er nederste tredjedel det ENESTE sted, hvor lys tekst når AA — 7,41:1 nederst til venstre mod 2,31:1 i den zone, Brand Bible ellers udpeger. Derfor står copy'en nederst, og derfor er bunden den tunge ende af gradienten. */ .verden__scrim { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 74%, transparent) 20%, color-mix(in oklab, var(--sc-canvas) 34%, transparent) 44%, transparent 66%), radial-gradient(96% 62% at 16% 96%, color-mix(in oklab, var(--sc-canvas) 62%, transparent), transparent 68%); } /* LAG 2 · SUBJECT · ordrekortet -------------------------------------------- */ .lag--ordre { z-index: 12; display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 clamp(3rem, 12vw, 15rem) clamp(9rem, 26vh, 18rem) 0; /* Runde 11: laget selv er altid synligt; kvitteringen (.handoff) og kortet (.ordresaet) har hver deres indtoning. Se §17. */ --ordre-pr: clamp(3rem, 12vw, 15rem); --ordre-pb: clamp(9rem, 26vh, 18rem); padding: 0 var(--ordre-pr) var(--ordre-pb) 0; } /* LAG 3 · CONTACT · bordkanten --------------------------------------------- */ /* LAG 3 · CONTACT — fjernet i runde 3. Se kommentaren i index.html: både den brede bordkant og et udklippet bordskilt var et andet bord oven på filmens, og filmen har sit eget QR-skilt i fokus. Ordrekortet er forgrunden. */ /* Nærplanets scrim. Densitet KUN i den kolonne, teksten står i. Den ligger OVER lag 3, fordi det var bordkanten — ikke filmen — der målte 1,44:1 under overskriften. Sibling af copy'en, aldrig et ::before på den: et ::before skjules sammen med teksten, når kontrasten måles. Densiteten er MÅLT over hele filmens 15 s (diag-kontrast-fuld.mjs): ved t=7,9 s går en lys passage ind under overskriften, og med denne holder h1 4,52:1 på sin værste frame. Tolv prøver à 1,1 s frikendte en løsere scrim tre gange i træk, fordi vinduet lå forbi passagen. Mål hele loopet. */ .verden__naer { position: absolute; inset: 0; z-index: 18; pointer-events: none; background: linear-gradient(to right, color-mix(in oklab, var(--sc-canvas) 88%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 74%, transparent) 26%, color-mix(in oklab, var(--sc-canvas) 46%, transparent) 46%, color-mix(in oklab, var(--sc-canvas) 14%, transparent) 62%, transparent 72%), linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 62%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 52%, transparent) 40%, color-mix(in oklab, var(--sc-canvas) 34%, transparent) 62%, transparent 80%); } /* COPY. Kører 1x — den er ikke på noget parallax-lag. Ingen brødtekst bevæger sig relativt til det, den læses mod. Ingen eyebrow: den målte 2,17:1 mod filmens lyseste pixel og blev fjernet, ikke omfarvet. */ .verden__copy { z-index: 20; max-width: min(40rem, 76vw); } .headline { margin: 0; font-weight: 600; font-size: clamp(2.4rem, 6.4vw, 4.9rem); line-height: 1.02; letter-spacing: -0.018em; text-wrap: balance; color: var(--sc-ink); text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35); } .sub { margin: clamp(16px, 2.6vh, 24px) 0 0; font-size: clamp(17px, 1.9vw, 21px); font-weight: 500; line-height: 1.5; color: var(--sc-ink); max-width: 34ch; } .cta-row { margin-top: clamp(22px, 3.4vh, 32px); display: flex; flex-wrap: wrap; gap: 13px; } /* Sekundær information. Kontrasten er MÅLT over 60 frames med sidens egen scrim ovenpå: værste enkeltpixel 5,50:1, nul frames under AA. */ .trust { margin: clamp(15px, 2.2vh, 21px) 0 0; font-size: 14px; font-weight: 500; line-height: 1.5; color: color-mix(in oklab, var(--sc-ink) 76%, transparent); max-width: 44ch; } /* Planerne rejser forbi sektionens bundkant og bliver klippet dér. Gulvet fader de sidste 240 px til heroens egen mørke, så klippelinjen aldrig ses. */ .verden__gulv { position: absolute; left: 0; right: 0; bottom: 0; height: 240px; z-index: 24; pointer-events: none; background: linear-gradient(to top, var(--sc-canvas) 0%, color-mix(in oklab, var(--sc-canvas) 62%, transparent) 46%, transparent 100%); } /* ── 7 · AKT 2 · KONVERTERINGEN ──────────────────────────────────────────── Sidens ENE tilstandsskifte: lyset går op. Grunden er motorens drivende --sc-canvas, som starter i heroens mørke og er creme, før sektionen har taget en tredjedel af skærmen. Fotografiet — samme terrasse, samme aften, set fra den anden side af disken — er den sidste mørke flade og står nu indrammet på det lyse, ikke full-bleed: det er et billede AF verden, set fra systemet. Wipen kører stadig op fra bunden. */ .akt--konv { /* Cremen står fast her og drives IKKE af motoren: målt på kontaktark var den drivende grund en grå vask mellem heroen og cremen, mens de to gled forbi hinanden. Lyset går op som en kant i stedet, se ::before. */ --sc-canvas: #F8F5EE; background: var(--sc-canvas); color: var(--sc-ink); } /* Daggryet. Sømmen mellem den mørke hero og cremen er en hård kant, mens de to glider forbi hinanden; det her bånd gør den til en kort overgang fra mørke til lys, og det er væk, når sektionen har taget skærmen. */ .akt--konv::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14vh; pointer-events: none; z-index: 1; background: linear-gradient(to bottom, #14100C, transparent); opacity: clamp(0, calc(1 - var(--sc-p, 0) * 2.6), 1); } .konv { z-index: 2; /* IKKE position: relative — det overskrev motorens sticky stage (runde 8) */ width: 100%; max-width: var(--sc-maxw); margin-inline: auto; /* Runde 8: stage i en kort pin — fuld højde, kompositionen centreret. */ height: 100vh; height: 100svh; min-height: 0; padding: clamp(5rem, 13vh, 8rem) var(--sc-gutter) clamp(4rem, 10vh, 7rem); display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; } .konv__statement { margin: 14px 0 0; font-size: clamp(1.9rem, 4.2vw, 3.4rem); line-height: 1.08; letter-spacing: -0.016em; max-width: 15ch; text-wrap: balance; } .konv__ramme { position: relative; margin: 0; border-radius: 26px; overflow: hidden; aspect-ratio: 16 / 10; box-shadow: var(--sc-e3); background: var(--sc-hairline); } .konv__foto { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── 8 · AKT 3 · FRA BORDET ──────────────────────────────────────────────── Rammen står stille mens indholdet avancerer. TO SPOR, side om side, med deres egne hoveder: gæstens handlinger til venstre, det restauranten ser til højre. Tekstlyset veksler mellem dem — gæsten bestiller, ordren lander hos jer; gæsten betaler, ordren er betalt; og videre — og den vekslen ER forbindelsen mellem de to rejser. Der tegnes ingen streg. */ .akt--hus { --sc-canvas: #F8F5EE; background: var(--sc-canvas); color: var(--sc-ink); } .hus { background: var(--sc-canvas); /* CLASS GOLD: fra toppen, ikke centreret. Med fire trin var indholdet på 1440×900 højere end den centrerede plads og gled op under chromet (målt: label under logoet). Toppen er chromets højde plus luft. */ display: grid; align-content: start; padding: clamp(6.5rem, 13vh, 9rem) var(--sc-gutter) clamp(2rem, 6vh, 4rem); } .hus__inder { position: relative; z-index: 2; width: 100%; max-width: var(--sc-maxw); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); grid-template-areas: "hoved hoved" "sporg sporh" "stationer ordre"; column-gap: clamp(2rem, 6vw, 7rem); align-items: start; } .hus__hoved { grid-area: hoved; margin-bottom: clamp(1.6rem, 4vh, 3rem); } /* Realtidsprincippet, én linje under overskriften. Samme dæmpede tone som stationernes brødtekst, så den læses som forklaring, ikke som slogan. */ .hus__p { margin: 14px 0 0; max-width: 52ch; font-size: clamp(1rem, 1.2vw, 1.14rem); line-height: 1.55; color: var(--sc-ink-soft); text-wrap: pretty; } .hus__h { margin: 14px 0 0; font-weight: 600; font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1.06; letter-spacing: -0.018em; text-wrap: balance; max-width: 22ch; } /* Sporenes hoveder. Samme to ord som i platformen og i akt 2: de to rejser har ét vokabular hele vejen. */ .spor { margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--sc-hairline-strong); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-signal); } .spor--gaest { grid-area: sporg; } .spor--hus { grid-area: sporh; display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* "Live" ved sporets hoved: ét ord og en prik, der ånder. Det er hele realtidsforklaringen på restaurantens side. Prikken er accentens farve, ikke signalets — den er tilstand, ikke opfordring. */ .spor__live { display: inline-flex; align-items: center; gap: 7px; font-size: 0.68rem; letter-spacing: 0.16em; color: var(--sc-ink-soft); } .spor__prik { width: 7px; height: 7px; border-radius: 999px; flex: none; background: var(--sc-accent); box-shadow: 0 0 0 0 color-mix(in oklab, var(--sc-accent) 40%, transparent); animation: spor-aande 2.4s ease-out infinite; } @keyframes spor-aande { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--sc-accent) 40%, transparent); } 60% { box-shadow: 0 0 0 7px color-mix(in oklab, var(--sc-accent) 0%, transparent); } 100% { box-shadow: 0 0 0 7px color-mix(in oklab, var(--sc-accent) 0%, transparent); } } .hus__stationer { grid-area: stationer; list-style: none; margin: 0; padding: clamp(0.8rem, 2.4vh, 1.4rem) 0 0; display: grid; gap: clamp(0.2rem, 1.2vh, 0.8rem); } .station { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; align-items: start; padding: clamp(8px, 1.4vh, 14px) 0; } .station__ikon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--sc-hairline-strong); background: var(--sc-surface); color: var(--sc-ink-soft); transition: background-color 320ms var(--sc-ease-out), color 320ms var(--sc-ease-out), border-color 320ms var(--sc-ease-out), box-shadow 320ms var(--sc-ease-out); } .station.er-aktiv .station__ikon { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); box-shadow: 0 0 0 6px color-mix(in oklab, var(--sc-accent) 14%, transparent); } .station__ikon svg { width: 21px; height: 21px; } .station__tekst { min-width: 0; } .station__h { margin: 9px 0 5px; font-size: clamp(1.2rem, 1.7vw, 1.5rem); font-weight: 600; letter-spacing: -0.008em; } .station__p { margin: 0; font-size: clamp(0.98rem, 1.1vw, 1.08rem); line-height: 1.55; max-width: 36ch; text-wrap: pretty; } /* Runde 5: fire trin i stedet for tre. På en lav desktop (≤ 860 px høj) skal alle fire og kortet stå inden for den pinnede ramme, under chromet. CLASS GOLD: grænsen hævet 860 → 960: på 1440×900 blev Betal klippet i bunden. */ @media (min-width: 821px) and (max-height: 960px) { .hus { padding-top: clamp(5.5rem, 12vh, 7rem); } .hus__hoved { margin-bottom: clamp(0.9rem, 2.4vh, 1.6rem); } .hus__h { font-size: clamp(1.7rem, 3.2vw, 2.4rem); } .hus__p { margin-top: 10px; font-size: 1rem; } .station { padding: clamp(4px, 0.8vh, 8px) 0; } .station__h { margin: 6px 0 2px; font-size: clamp(1.1rem, 1.5vw, 1.3rem); } .station__p { font-size: 0.95rem; line-height: 1.45; } .hus__stationer { gap: 0; } } .hus__ordre { grid-area: ordre; padding-top: clamp(0.8rem, 2.4vh, 1.4rem); display: flex; justify-content: center; } .ordrekort--rejse { width: min(24rem, 100%); font-size: 1rem; backdrop-filter: none; transform: none; background: var(--sc-surface); padding: 20px 22px 18px; box-shadow: var(--sc-e1); transition: box-shadow 320ms var(--sc-ease-out), border-color 320ms var(--sc-ease-out); } /* Reaktionen. Når lyset står på jeres side, løfter kortet sig en anelse. */ .ordrekort--rejse.er-lyst { border-color: color-mix(in oklab, var(--sc-accent) 40%, var(--sc-hairline-strong)); box-shadow: var(--sc-e3); } .ordrekort--rejse .ordrekort__linjer { gap: 10px; margin-top: 14px; } .ordrekort--rejse .ordrekort__bund { margin-top: 16px; padding-top: 14px; } /* Routingen: ét lille ord yderst på hver linje — Bar eller Køkken. Ordene findes fra start (uden JS står de der), men toner først frem, når ordren er MODTAGET: det er dét øjeblik, huset fordeler den. */ .ordrekort__navn { flex: 1 1 auto; min-width: 0; } .ordrekort__til { flex: none; margin-left: auto; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft); border: 1px solid var(--sc-hairline-strong); border-radius: 999px; padding: 2px 7px; transition: opacity 320ms var(--sc-ease-out), transform 320ms var(--sc-ease-out); } html.js .ordrekort--rejse:not(.er-fordelt) .ordrekort__til { opacity: 0; transform: translateX(4px); } /* Trinnet, der lige er blevet aktivt, lander med et lille løft. Klassen sættes på ny hver gang trinnet skifter, så animationen kører igen. */ .ordrekort--rejse .ordrekort__trin li.er-nu { animation: trin-ind 420ms var(--sc-ease-out); } @keyframes trin-ind { from { transform: translateY(3px); opacity: 0.4; } to { transform: none; opacity: 1; } } /* ── 9 · AKT 4 · SYSTEMET ★ PEAK ─────────────────────────────────────────── Sidens største scroll-rum og største visuelle forandring. Sideværts rejse læses som VALGMULIGHEDER, lodret som argument — og pointen her er netop, at man kan vælge. Kortene buer omkring et roligt centrum, drevet af --d, som /forside.js skriver pr. kort ud fra dets afstand til viewportens midte. To spor med hver deres hoved: gæstens tre kort, jeres tre. Grunden er et papir en anelse mørkere end cremen, så de lyse kort står frem. Den dæmpede tone er derfor mørkere her: #665F50 måler 5,0:1 på papiret, hvor #6F6858 kun ville nå 4,4. */ .akt--system { --sc-canvas: #F1EBDE; --sc-daemp: #665F50; background: var(--sc-canvas); color: var(--sc-ink); } .system { background: var(--sc-canvas); display: flex; align-items: center; overflow: clip; } .system__kerne { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 0; pointer-events: none; width: min(58rem, 96vw); aspect-ratio: 1; display: grid; place-items: center; background: radial-gradient(closest-side, color-mix(in oklab, var(--sc-accent) 9%, transparent) 0%, color-mix(in oklab, var(--sc-accent) 4%, transparent) 42%, transparent 72%); } .system__kerne img { width: clamp(56px, 7vw, 96px); height: auto; opacity: 0.12; } .system__kerne::before { content: ""; position: absolute; inset: 18%; border: 1px solid color-mix(in oklab, var(--sc-ink) 7%, transparent); border-radius: 999px; } .rail { position: relative; z-index: 1; display: flex; align-items: center; gap: clamp(1.4rem, 2.6vw, 2.8rem); padding-inline: var(--sc-gutter); will-change: transform; } .rail__lead { flex: 0 0 clamp(19rem, 30vw, 36rem); align-self: center; } .rail__h { margin: 14px 0 0; font-weight: 600; font-size: clamp(1.85rem, 3.6vw, 3rem); line-height: 1.05; letter-spacing: -0.018em; text-wrap: balance; } .rail__p { margin: 16px 0 0; font-size: 1.02rem; line-height: 1.6; max-width: 40ch; } /* Sporene. Hovedet er en linje over kortene med ordet i venstre ende: det er samme streg som i akt 3, så øjet kender den. */ .rail__spor { position: relative; flex: none; display: flex; align-items: center; padding-top: 40px; } .rail__sporlabel { position: absolute; top: 0; left: 0; right: 0; margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--sc-hairline-strong); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-signal); } .modul { position: relative; flex: 0 0 clamp(17.5rem, 27vw, 31rem); height: clamp(19rem, 54vh, 28rem); display: flex; flex-direction: column; border: 1px solid var(--sc-hairline); border-radius: 24px; overflow: hidden; background: var(--sc-surface); box-shadow: var(--sc-e2); /* Buen. INGEN transition: hver frame skriver sin egen værdi, og en transition ville udglatte dem og læses som forsinkelse. Ingen opacitet: tekstens tone bæres af tekstlyset, som er målt i begge ender. */ transform: translateY(calc(var(--d, 0) * var(--d, 0) * 5.6rem)) scale(calc(1 - var(--d, 0) * var(--d, 0) * 0.1)); filter: blur(calc(var(--d, 0) * var(--d, 0) * 1.2px)); transition: border-color 320ms var(--sc-ease-out), box-shadow 320ms var(--sc-ease-out); } /* Overlap: ét element, der krydser et andets kant, giver mere dybde end nogen skygge. Kortet nærmest midten ligger øverst (z-index skrives af /forside.js sammen med --d), og naboerne glider ind under det. */ .modul + .modul { margin-left: -1.9rem; } .modul.er-aktiv { border-color: color-mix(in oklab, var(--sc-accent) 36%, var(--sc-hairline)); box-shadow: var(--sc-e3); } /* Fotografiet er et BÅND øverst på det lyse kort, ikke en mørk grund bag teksten. Det fader ind i kortfladen, så teksten aldrig står på foto. */ .modul__foto { position: relative; flex: 0 0 46%; overflow: hidden; } .modul__foto img { width: 100%; height: 100%; object-fit: cover; display: block; mask-image: linear-gradient(to bottom, #000 74%, transparent 100%); } .modul__krop { position: relative; z-index: 1; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 clamp(18px, 1.8vw, 24px) clamp(22px, 2.2vw, 30px); } .modul__ikon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; background: color-mix(in oklab, var(--sc-ink) 7%, transparent); color: var(--sc-ink-soft); transition: background-color 320ms var(--sc-ease-out), color 320ms var(--sc-ease-out); } .modul.er-aktiv .modul__ikon { background: var(--sc-accent); color: var(--sc-accent-ink); } .modul__ikon svg { width: 19px; height: 19px; } .modul__navn { margin: 14px 0 6px; font-size: clamp(1.05rem, 1.35vw, 1.32rem); font-weight: 600; letter-spacing: -0.008em; text-wrap: balance; } .modul__hvad { margin: 0; font-size: 0.97rem; line-height: 1.55; } .modul__ud { display: inline-flex; align-items: center; gap: 7px; width: fit-content; margin-top: 14px; padding: 7px 13px; border-radius: 999px; background: color-mix(in oklab, var(--sc-accent) 9%, transparent); border: 1px solid color-mix(in oklab, var(--sc-accent) 28%, transparent); font-size: 0.8rem; font-weight: 600; white-space: nowrap; } .modul__ud svg { width: 14px; height: 14px; flex: none; } .rail__close { position: relative; flex: 0 0 clamp(24rem, 36vw, 40rem); padding-top: 40px; } /* PLATFORMEN SAMLET. Railens slutning: de seks moduler står sammen i én flade, i de samme to spor. Fliserne tændes én ad gangen af /forside.js, i takt med at deres kort passerer midten, og de slukkes aldrig igen: det, der er samlet, er samlet. Ingen kort-i-kort: fliserne er rækker med hårlinjer, ikke bokse. */ .platform { position: relative; border: 1px solid color-mix(in oklab, var(--sc-accent) 30%, var(--sc-hairline)); border-radius: 24px; background: var(--sc-surface); box-shadow: var(--sc-e3); padding: clamp(20px, 2vw, 28px); } .platform__top { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--sc-hairline); } .platform__top img { width: 30px; height: 30px; } .platform__navn { font-weight: 700; color: var(--sc-ink); letter-spacing: 0.01em; } .platform__maerke { margin-left: auto; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-signal); } .platform__spor { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; padding-top: 16px; } .platform__sporlabel { margin: 0 0 2px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-signal); } .platform__moduler { list-style: none; margin: 0; padding: 0; } .platform__moduler li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--sc-hairline); font-size: 0.9rem; font-weight: 600; color: var(--sc-daemp); transition: color 320ms var(--sc-ease-out); } .platform__moduler li.er-med { color: var(--sc-ink); } .platform__moduler svg { width: 18px; height: 18px; flex: none; color: var(--sc-daemp); transition: color 320ms var(--sc-ease-out); } .platform__moduler li.er-med svg { color: var(--sc-accent); } .platform .sc-label { margin-top: 20px; } .platform .chips { margin-top: 12px; } .chips { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 17px; border-radius: 999px; border: 1px solid var(--sc-hairline-strong); color: var(--sc-ink); font-size: 0.92rem; font-weight: 600; background: var(--sc-canvas); } .chip::before { content: ""; width: 5px; height: 5px; border-radius: 999px; flex: none; background: var(--sc-accent); } /* ── 9b · AKT 4b · EGENKONTROL ───────────────────────────────────────────── Restaurantens rejse slutter i drift og dokumentation. Egenkontrol var én chip blandt seks (RUNDE-2 §5); nu er den et kort i railen og denne flade. Fotografiet viser handlingen, og det, der står på telefonen, er ægte markup ved siden af, mærket Eksempel, i ordrekortets idiom (§11). Kortet står i normalt flow under fotoet og skubbes op over dets nederste tredjedel, til højre: dér dækker det kun dørhåndens underkant, mens telefonen (handlingen), bakkerne og termometret bliver synlige. Målt på 1440: lagt over hele hjørnet var kortet højere end fotoet og skjulte telefonhånden, altså selve pointen. Det hænger ud over fotoets kant som en flade, der hører til huset og ikke til billedet. Foto til venstre, ord til højre: byttet i forhold til akt 2 og 5, så tre lyse flow-akter ikke står i samme layout. Grunden er cremen, ikke akt 4's papir. */ .akt--egen { --sc-canvas: #F8F5EE; background: var(--sc-canvas); color: var(--sc-ink); } .egen { /* ingen position: motoren gør stagen sticky (runde 8) */ width: 100%; max-width: var(--sc-maxw); margin-inline: auto; /* Runde 8: stage i en kort pin (1,45 vh). Fuld højde, indholdet centreret. */ height: 100vh; height: 100svh; align-content: center; padding: clamp(4.5rem, 10vh, 7rem) var(--sc-gutter) clamp(3rem, 8vh, 5rem); display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); grid-template-areas: "scene ord"; gap: clamp(2.4rem, 5.5vw, 6rem); align-items: start; } /* Ordene står i højde med fotoets top, ikke midt på scenen: så læses foto, ord, kort i den rækkefølge, og kortet er det sidste, øjet lander på. */ .egen__ord { grid-area: ord; padding-top: clamp(1rem, 5vh, 3.5rem); } .egen__h { margin: 16px 0 0; font-weight: 600; font-size: clamp(1.8rem, 3.4vw, 2.9rem); line-height: 1.08; letter-spacing: -0.018em; text-wrap: balance; } .egen__p { margin: 20px 0 0; font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.62; max-width: 46ch; text-wrap: pretty; } .egen__scene { grid-area: scene; position: relative; } .egen__f { margin: 0; border-radius: 26px; overflow: hidden; aspect-ratio: 16 / 10; box-shadow: var(--sc-e3); background: var(--sc-hairline); } .egen__f img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; } /* Kontrolkortet: ordrekortets idiom, produktets indhold. Lyst, uden glas (det står på creme, ikke over film), og uden ordrekortets p-skalering. */ .kontrolkort { position: relative; z-index: 2; margin: -7.5rem calc(-1 * min(3.5rem, 4vw)) 0 auto; width: min(22rem, 80%); font-size: 0.92rem; backdrop-filter: none; transform: none; background: var(--sc-surface); padding: 16px 18px 14px; box-shadow: var(--sc-e3), var(--sc-edge); } .kontrolkort__tal { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.8rem; color: var(--sc-ink-soft); } .kontrolkort__tal b { font-size: 1.22rem; font-weight: 700; color: var(--sc-ink); font-variant-numeric: tabular-nums; margin-right: 4px; } .kontrolkort__punkter { list-style: none; margin: 12px 0 0; padding: 0; } .kontrolkort__punkter li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "navn status" "graense status"; column-gap: 10px; align-items: center; padding: 9px 0 9px 11px; border-top: 1px solid var(--sc-hairline); border-left: 3px solid var(--sc-hairline-strong); } /* Produktets egne gruppefarver: køl/frys blå, varemodtagelse grøn, varmebehandling terrakotta. Streger, ikke flader. */ .kontrolkort__punkter li[data-gruppe="koel"] { border-left-color: #4F6E8F; } .kontrolkort__punkter li[data-gruppe="vare"] { border-left-color: var(--kafe-groen); } .kontrolkort__punkter li[data-gruppe="varme"] { border-left-color: var(--sc-signal); } .kontrolkort__navn { grid-area: navn; font-weight: 600; font-size: 0.9rem; color: var(--sc-ink); } .kontrolkort__graense { grid-area: graense; margin-top: 2px; font-size: 0.76rem; line-height: 1.4; color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; } /* Statusordene er produktets tre. Alle tre målt på deres egen tint: I orden 7,9:1 · Forfalden 6,3:1 · Afvigelse 6,0:1. */ .kontrolkort__status { grid-area: status; align-self: center; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; white-space: nowrap; } .kontrolkort__status[data-status="orden"] { color: #2E4636; background: color-mix(in oklab, #2E4636 12%, var(--sc-surface)); } .kontrolkort__status[data-status="forfalden"] { color: #6B4A0B; background: #EFE3C6; } .kontrolkort__status[data-status="afvigelse"] { color: #8A3A18; background: #EFDFD3; } /* Under 1100 px er fotokolonnen lavere end kortet. Én kolonne: ordene øverst, fotoet i fuld bredde, kortet stadig over hjørnet. */ @media (min-width: 821px) and (max-width: 1100px) { .egen { grid-template-columns: 1fr; grid-template-areas: "ord" "scene"; gap: clamp(1.6rem, 4vh, 2.4rem); } .egen__p { max-width: 56ch; } .kontrolkort { margin-right: 1.5rem; } } /* ── 10 · AKT 5 · SUBSTANSEN ─────────────────────────────────────────────── Intensiteten falder efter peak'et. Runde 1's lyse sektion var ejerens pejlemærke for hele den lyse retning, og den står her næsten uændret — nu tilbage på cremen efter papiret i akt 4. */ .akt--substans { --sc-canvas: #F8F5EE; background: var(--sc-canvas); color: var(--sc-ink); } .substans { /* ingen position: motoren gør stagen sticky (runde 8) */ width: 100%; max-width: var(--sc-maxw); margin-inline: auto; /* Runde 8: stage i en kort pin (1,4 vh). */ height: 100vh; height: 100svh; align-content: center; padding: clamp(4.5rem, 10vh, 7rem) var(--sc-gutter); display: grid; /* Runde 3: stolebilledet (foto-b) er flyttet til sin egen pinnede akt, Fyraften, så det får tid. Rækken er derfor væk; ellers stod der et tomt gab med gitterets gap i. */ grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "ord foto-a"; gap: clamp(1.5rem, 3.4vw, 3.2rem); align-items: center; } .substans__ord { grid-area: ord; } .substans__ord .sc-label { color: var(--kafe-groen); } .substans__h { margin: 16px 0 0; font-weight: 600; font-size: clamp(1.8rem, 3.4vw, 2.9rem); line-height: 1.08; letter-spacing: -0.018em; --fuld: var(--kafe-groen); text-wrap: balance; } .substans__p { margin: 20px 0 0; font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.62; max-width: 52ch; text-wrap: pretty; } /* Det eneste sted på hele siden, hvor der står, at produktet allerede er i rigtig drift. Den stod som en fodnote. Nu har den vægt. */ .substans__note { margin: 26px 0 0; padding: 16px 0 16px 20px; border-left: 3px solid var(--kafe-groen); font-size: clamp(1.02rem, 1.15vw, 1.16rem); font-weight: 500; line-height: 1.5; max-width: 40ch; text-wrap: pretty; } .substans__f { margin: 0; border-radius: 22px; overflow: hidden; box-shadow: var(--sc-e2); } .substans__f--a { grid-area: foto-a; } .substans__f--b { grid-area: foto-b; } /* width og height overskrives sammen, aldrig kun den ene: ellers resolver den anden til attributtens rå pixelværdi og skubber alting under sig ned. */ .substans__f img { display: block; width: 100%; height: auto; } .substans__f--b img { aspect-ratio: 21 / 8; object-fit: cover; height: auto; } /* ── 11 · AKT 6 · FORPLIGTELSEN ──────────────────────────────────────────── Grammatikkens slutning er et faktisk input inde i fladen. Meget lidt bevægelse: efter peak'et skal siden være nem at bruge. Mørk igen, i brandets grønne, så siden slutter med samme vægt, som den åbnede — og knappen er den samme creme som heroens. Formularen har med vilje INGEN cue — en fokuserbar kontrol, der venter på scroll-progress, er en tastaturfælde. */ .akt--pilot { --sc-canvas: #0F251F; /* runde 4: logoets dybe groen, heroens vaegt */ --sc-surface: #16302A; --sc-ink: #F3ECDD; --sc-ink-body: #F3ECDD; --sc-ink-soft: #C9D2C4; /* 6,6:1 på det grønne */ --sc-daemp: #C9D2C4; --sc-accent: #F3ECDD; --sc-accent-ink: #1F3328; /* Runde 3: løftet fra logosystemets sage #A5B792. Den regnede til 4,79:1, men harnessen målte kickeren "Pilot" til 4,13:1 på værste billede — under 4,5 for lille tekst. #B4C4A2 regner til 5,55:1 på det grønne og 6,50 på overfladen, og er stadig sage i samme familie. */ --sc-signal: #B4C4A2; --sc-hairline: rgba(243, 236, 221, 0.16); --sc-hairline-strong: rgba(243, 236, 221, 0.30); --sc-shadow-color: 150 30% 6%; background: #0F251F; color: var(--sc-ink); } .close { background: var(--sc-canvas); display: grid; grid-template-rows: 1fr auto; padding: clamp(5rem, 12vh, 8rem) var(--sc-gutter) 0; align-items: center; } .close__grund { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .close__grund img { width: 100%; height: 100%; object-fit: cover; opacity: 0.14; } .close__grund::after { content: ""; position: absolute; inset: 0; background: radial-gradient(78% 70% at 50% 42%, color-mix(in oklab, var(--sc-canvas) 40%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 88%, transparent) 62%, var(--sc-canvas) 100%); } /* Spotlight: pointeren flytter et varmt lys hen over fladen. Motoren slår effekten helt fra på touch og under reduceret bevægelse. */ .close[data-sc-spotlight]::after { background: radial-gradient(38rem 38rem at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%), color-mix(in oklab, var(--kafe-sage) 10%, transparent), transparent 62%); } .close__inder { position: relative; z-index: 2; width: 100%; max-width: 46rem; margin-inline: auto; align-self: center; text-align: center; } .close__h { margin: 14px 0 0; font-weight: 600; font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1.06; letter-spacing: -0.018em; color: var(--sc-ink); text-wrap: balance; } .close__inder .sc-label { display: block; margin-inline: auto; } .close__p { margin: 18px auto 0; font-size: 1rem; line-height: 1.62; color: var(--sc-ink-soft); max-width: 54ch; text-wrap: pretty; } .pilotform { margin: clamp(24px, 4vh, 34px) auto 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 34rem; } .pilotform__felt { position: relative; flex: 1 1 16rem; min-width: 0; display: flex; } .pilotform input[type="email"] { flex: 1 1 auto; min-width: 0; padding: 15px 20px; font-size: 16px; font-family: inherit; border-radius: 999px; border: 1px solid var(--sc-hairline-strong); background: rgba(243, 236, 221, 0.08); color: var(--sc-ink); min-height: 48px; transition: border-color 180ms var(--sc-ease-out), background-color 180ms var(--sc-ease-out); } .pilotform input[type="email"]::placeholder { color: var(--sc-ink-soft); } .pilotform input[type="email"]:hover { border-color: rgba(243, 236, 221, 0.5); } .pilotform input[type="email"]:focus-visible { border-color: var(--sc-ink); background: rgba(243, 236, 221, 0.14); } /* Bot-tjekket får hele bredden under feltet og knappen; tomt fylder det intet. */ .interesse-vaern { flex: 1 1 100%; display: flex; justify-content: center; } .interesse-vaern:empty { display: none; } .pilotform__status { margin: 18px auto 0; font-size: 15px; font-weight: 600; color: var(--sc-ink); max-width: 46ch; } .fod { position: relative; z-index: 2; width: 100%; max-width: var(--sc-maxw); margin-inline: auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: clamp(20px, 3vh, 30px) 0; border-top: 1px solid var(--sc-hairline); color: var(--sc-ink-soft); font-size: 14px; } .fod__mark { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 0; } .fod__mark img { display: block; height: 24px; width: auto; } /* Håndskrevet slogan (traceret vektor), dæmpet så det er en hilsen, ikke en overskrift. */ .fod__slogan { display: block; height: 52px; width: auto; opacity: 0.9; } /* ── 12 · MOBIL ──────────────────────────────────────────────────────────── En selvstændig komposition, ikke en skaleret desktop. Prioriteringen er ejerens: læsbarhed, hastighed, produktforståelse, enkel navigation, tydelige CTA'er. Det, der er dæmpet her: · ordrekortets parallakse i heroen (planerne beholder deres, det er dybden; kortet står stille, så det kan læses) · buen, overlappet, sløringen og sticky-stakken i akt 4: en almindelig liste i to spor · kornet: et fast fuldskærmslag koster på en telefon og ses ikke Tekstlyset bliver: det er en farve, ikke en bevægelse, og det er det, der fører øjet. Motoren regner mobil som (hover:none) and (pointer:coarse) eller max-width:860px; sidens eget brud ligger på 820/430. De to er ikke ens, og det er med vilje. */ @media (max-width: 820px) { .sc-grain { display: none; } .krom { padding-inline: clamp(16px, 5vw, 24px); } .krom__status { display: none; } /* to elementer i en telefonbar, ikke tre */ /* AKT 1. Ingen film under 720 px: hero.js vælger med vilje posteren. Trust-linjen lå på den LYSE bordkant på telefon: kolonne-scrimmen virker kun, når copy'en holder én side af skærmen. Densiteten bliver derfor et bånd langs bunden. */ .verden__naer { background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 93%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 76%, transparent) 18%, color-mix(in oklab, var(--sc-canvas) 34%, transparent) 42%, transparent 62%); } .lag--ordre { justify-content: center; align-items: center; /* Runde 11: 58 → 48 vh, så kontekstlinjen over kortet ikke rammer chromet. */ padding: 0 0 48vh 0; transform: none !important; /* motoren skriver inline; kortet står stille */ } .ordrekort { width: min(17rem, 74vw); font-size: 0.86rem; } /* Tablet: her står CTA'erne side om side, og zonen til højre for underrubrikken er fri. Skiltet flyttes derhen i stedet for at stå bag teksten. Under 600 px fylder copy'en hele bredden, og bordet er med vilje kun en mørk tekstur i bunden. */ @media (min-width: 600px) { } .verden__copy { max-width: none; } .headline { font-size: clamp(2.05rem, 8.6vw, 2.9rem); } .sub { font-size: 16.5px; max-width: 30ch; } .cta-row { gap: 10px; } .cta-row .btn { flex: 1 1 auto; } /* Runde 8: ingen dwell paa mobil — de tre korte pins er sektioner, cues og reveals staar aabne (motoren regner stadig p som pin, og et p paa 0, mens sektionen glider ind, ville ellers skjule indholdet). Native scroll vinder. */ .akt--konv, .akt--egen, .akt--substans { height: auto !important; } .akt--konv .konv, .akt--egen .egen, .akt--substans .substans { position: relative !important; height: auto !important; min-height: 0 !important; } .akt--konv [data-sc-cue], .akt--egen [data-sc-cue], .akt--substans [data-sc-cue] { opacity: 1 !important; transform: none !important; pointer-events: auto !important; } .akt--konv [data-sc-reveal], .akt--egen [data-sc-reveal], .akt--substans [data-sc-reveal] { clip-path: none !important; } .akt--konv [data-sc-in], .akt--egen [data-sc-in], .akt--substans [data-sc-in], .akt--egen [data-sc-stagger] > *, .akt--substans [data-sc-stagger] > * { opacity: 1 !important; transform: none !important; } /* AKT 2. Udsagn over billedet, én kolonne. */ .konv { grid-template-columns: 1fr; min-height: 0; padding: clamp(5rem, 14vh, 7rem) clamp(16px, 5vw, 24px) clamp(3rem, 8vh, 4rem); gap: clamp(1.6rem, 5vh, 2.4rem); } .konv__ramme { aspect-ratio: 4 / 3; border-radius: 20px; } /* AKT 3. Én kolonne: gæstens spor, så jeres. Kortet er kompakt — kun bord og trin — så hele vekslen står på én skærm. */ /* Runde 5: fire trin. Rammen er stadig én skærm, så alt er et hak tættere, og indholdet står fra toppen (ikke centreret): centrering skubbede labelen op under logoet, når indholdet var højere end viewporten. */ .hus { align-content: start; padding: clamp(4.2rem, 10vh, 5.2rem) clamp(16px, 5vw, 24px) clamp(1.2rem, 4vh, 2rem); } .hus__inder { grid-template-columns: 1fr; grid-template-areas: "hoved" "sporg" "stationer" "sporh" "ordre"; } .hus__hoved { margin-bottom: clamp(0.8rem, 2vh, 1.2rem); } .hus__h { font-size: clamp(1.5rem, 6.4vw, 1.9rem); } .hus__p { margin-top: 8px; font-size: 0.95rem; line-height: 1.45; } .spor { padding-bottom: 8px; } .hus__stationer { padding-top: 0.3rem; gap: 0; padding-bottom: clamp(0.7rem, 2vh, 1.2rem); } .station { grid-template-columns: 36px 1fr; column-gap: 14px; padding: 6px 0; } .station__ikon { width: 36px; height: 36px; } .station__ikon svg { width: 18px; height: 18px; } .station__h { margin: 4px 0 1px; font-size: 1.05rem; } .station__p { font-size: 0.9rem; line-height: 1.4; } .hus__ordre { padding-top: 0.75rem; justify-content: stretch; } .ordrekort--rejse { width: 100%; padding: 14px 16px 12px; font-size: 0.9rem; } .ordrekort--rejse .ordrekort__linjer { display: none; } .ordrekort--rejse .ordrekort__bund { margin-top: 0; padding-top: 12px; border-top: 0; } /* AKT 4. INGEN rail, ingen bue, ingen stak: en liste i to spor. */ .akt--system { height: auto !important; } .system { position: relative !important; height: auto !important; display: block; padding: clamp(4rem, 10vh, 6rem) 0 clamp(3rem, 8vh, 5rem); overflow: visible; } .system__kerne { display: none; } .rail { transform: none !important; display: block; padding-inline: clamp(16px, 5vw, 24px); } .rail__lead { margin-bottom: clamp(1.6rem, 4vh, 2.4rem); } .rail__spor { display: block; padding-top: 34px; margin-bottom: clamp(1.4rem, 4vh, 2rem); } .modul { flex: none; height: auto; transform: none !important; filter: none !important; margin: 0 0 12px; border-radius: 20px; } .modul + .modul { margin-left: 0; } .modul__foto { flex: none; aspect-ratio: 16 / 7; } .modul__krop { padding: 4px 18px 20px; } .modul__ikon { margin-top: -19px; width: 38px; height: 38px; border: 3px solid var(--sc-surface); background: var(--sc-canvas); } .modul__navn { margin-top: 10px; font-size: 1.08rem; } .rail__close { flex: none; padding-top: 0; margin-top: clamp(1rem, 3vh, 1.6rem); } .platform__spor { grid-template-columns: 1fr; } .chips { gap: 8px; } /* AKT 4b. Ordene, fotoet, kortet: under hinanden, kortet i fuld bredde og ikke længere over hjørnet. */ .egen { grid-template-columns: 1fr; grid-template-areas: "ord" "scene"; gap: clamp(1.4rem, 4vh, 2rem); padding: clamp(4rem, 10vh, 5rem) clamp(16px, 5vw, 24px) clamp(3rem, 8vh, 4rem); } .egen__f { aspect-ratio: 4 / 3; border-radius: 20px; } .egen__ord { padding-top: 0; } .kontrolkort { width: 100%; margin: 14px 0 0; } /* Tablet: fotoet er 4:3 og højt nok til, at kortet kan ligge over hjørnet som på desktop, i stedet for at stå som et 720 px bredt bånd. */ @media (min-width: 600px) { .kontrolkort { width: min(80%, 26rem); margin: -6rem 1.25rem 0 auto; } } /* AKT 5. Ét billede ad gangen, fuld bredde. */ .substans { grid-template-columns: 1fr; grid-template-areas: "ord" "foto-a"; gap: clamp(1.6rem, 5vh, 2.4rem); } .substans__f--b img { aspect-ratio: 16 / 10; } /* AKT 6. Større felter, stablet. */ .close { padding-top: clamp(4.5rem, 11vh, 6.5rem); } .close__p { font-size: 0.97rem; } .pilotform { flex-direction: column; align-items: stretch; max-width: 24rem; } .pilotform__felt { flex: none; } .pilotform input[type="email"], .pilotform .btn { min-height: 52px; width: 100%; } .fod { justify-content: center; text-align: center; font-size: 13px; } } /* Den smalle ende. Ét trin ned på display-typen: en normal dansk overskrift wrapper ellers til fem linjer på 390 px. */ @media (max-width: 430px) { .headline { font-size: clamp(1.92rem, 8.4vw, 2.35rem); } .konv__statement { font-size: clamp(1.5rem, 7.4vw, 2rem); } .hus__h, .close__h { font-size: clamp(1.6rem, 7vw, 2.1rem); } .rail__h, .substans__h { font-size: clamp(1.55rem, 6.8vw, 2.05rem); } } /* Motorens eget mobilbrud ligger på 860 px. Railen skal have sin bue slået ned i det mellemrum, hvor sidens brud (820) endnu ikke er nået, og skærmen alligevel er for smal til en meningsfuld orbit. */ @media (min-width: 821px) and (max-width: 1040px) { .modul { transform: translateY(calc(var(--d, 0) * var(--d, 0) * 2.2rem)) scale(calc(1 - var(--d, 0) * var(--d, 0) * 0.05)); filter: none; } } /* ── 13 · REDUCERET BEVÆGELSE ────────────────────────────────────────────── En ANDEN side, ikke den samme side med motoren slukket. De pinnede akter foldes ud til almindeligt flow-layout, så al copy står samtidig og i læserækkefølge. Lagfølelsen bevares statisk. TEKSTLYSET ER SLUKKET: al tekst står fuld fra start. Fremhævelsen er en tilføjelse, aldrig en forudsætning for at kunne læse siden. !important er ikke pynt: /forside.js rører aldrig --f under reduceret bevægelse, men skulle en værdi alligevel stå inline, taber den her. */ /* CLASS GOLD (9/9): samme statiske tilstand for KORTE viewports (≤ 600 px høje: iPhone SE, enhver telefon i landscape). Pinnede scener på 390 px højde kan ikke rumme fire trin, et kort og et chrome — så de bliver almindelige sektioner, og alt står tændt. Reduceret bevægelse og kort skærm er samme svar: ro, læsbarhed, retning. */ @media (prefers-reduced-motion: reduce), (max-height: 600px) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } [data-fokus] { --f: 1 !important; } /* Alt cue-styret indhold er synligt. Motoren skriver opacity inline, så der skal !important til — det er hele pointen med at gøre det her. */ [data-sc-cue] { opacity: 1 !important; transform: none !important; pointer-events: auto !important; } [data-sc-in], [data-sc-stagger] > * { opacity: 1 !important; transform: none !important; } .akt--konv::before { display: none; } /* Pinnede akter bliver almindelige sektioner. Motoren skriver aktens højde inline (span x 100vh), så den skal også overskrives. */ .akt--hus, .akt--system, .akt--pilot, .akt--konv, .akt--egen, .akt--substans, .akt--fyraften { height: auto !important; } .akt--konv .konv, .akt--egen .egen, .akt--substans .substans, .akt--fyraften .fyraften { position: relative !important; height: auto !important; min-height: 0 !important; } .akt--konv .konv { min-height: 92svh !important; } .akt--hus .hus, .akt--pilot .close { position: relative !important; height: auto !important; min-height: 0 !important; overflow: visible !important; } .akt--hus .hus { padding-block: clamp(4.5rem, 10vh, 7rem); } /* 72 px: chromets højde */ /* Platformen står samlet fra start: fortællingen er færdig med det samme. */ .platform__moduler li { color: var(--sc-ink) !important; } .platform__moduler svg { color: var(--sc-accent) !important; } /* Heroen: lagene står stille, men de står STADIG i lag. Overlappet og okklusionen er dybden; bevægelsen var kun forstærkningen. */ .akt--verden { height: auto !important; } .verden { position: relative !important; height: 100svh !important; overflow: hidden !important; } .lag__zoom { transform: none !important; } .lag--ordre { opacity: 1 !important; } .ordrekort { transform: none !important; } .ordrekort__linjer li { opacity: 1 !important; transform: none !important; } /* Stationerne står alle tændt, og kortet er nået hele vejen: fortællingen er færdig med det samme. Ingen halv sandhed. */ .station__ikon { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); } .ordrekort--rejse { box-shadow: var(--sc-e3); } /* Railen: et gitter i to spor. Buen slukkes; den var afstand, ikke information. */ .akt--system { height: auto !important; } .system { position: relative !important; height: auto !important; display: block; } .akt--system .sc-stage { overflow: visible !important; padding-block: clamp(3rem, 8vh, 5rem); } .rail { display: block !important; transform: none !important; } .rail__lead { margin-bottom: clamp(1.6rem, 4vh, 2.4rem); } .rail__spor { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); padding-top: 40px; margin-bottom: clamp(1.4rem, 4vh, 2.2rem); align-items: stretch; } .modul { transform: none !important; filter: none !important; height: auto !important; min-height: 15rem; margin: 0; } .modul + .modul { margin-left: 0; } .modul__foto { flex: none; aspect-ratio: 16 / 8; } .rail__close { flex: none; padding-top: 0; } .system__kerne { display: none; } .akt--pilot .close { padding-block: clamp(4.5rem, 10vh, 7rem) 0; } .krom, .krom__status, .krom::before { transition: none; } } /* ── 14 · NØDUDGANGE ─────────────────────────────────────────────────────── scrollcraft.css sætter [data-sc-cue]{opacity:0}, fordi motoren skriver den rigtige værdi i første frame. Uden motoren stod siden tom. Det er en uacceptabel enkeltfejlskilde for en forside, så der er to udgange: html:not(.js) JS er slået fra i browseren html.sc-svigt JS kører, men scrollcraft.js nåede aldrig frem Begge sættes af tre linjer inline i , som ikke kan fejle på nettet. Tekstlyset kræver ingen udgang: --f er 1, medmindre /forside.js skriver andet. */ html:not(.js) [data-sc-cue], html.sc-svigt [data-sc-cue], html:not(.js) [data-sc-in], html.sc-svigt [data-sc-in], html:not(.js) [data-sc-stagger] > *, html.sc-svigt [data-sc-stagger] > * { opacity: 1 !important; transform: none !important; } html:not(.js) [data-sc-reveal], html.sc-svigt [data-sc-reveal] { clip-path: none !important; } html:not(.js) .akt--konv::before, html.sc-svigt .akt--konv::before { display: none; } html:not(.js) .sc-stage, html.sc-svigt .sc-stage { position: relative; height: auto; min-height: 100svh; } html:not(.js) .akt, html.sc-svigt .akt { height: auto !important; } html:not(.js) .lag--ordre, html.sc-svigt .lag--ordre { opacity: 1; } html:not(.js) .ordrekort__linjer li, html.sc-svigt .ordrekort__linjer li { opacity: 1; transform: none; } html:not(.js) .station__ikon, html.sc-svigt .station__ikon { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); } html:not(.js) .rail, html.sc-svigt .rail { flex-wrap: wrap; } html:not(.js) .rail__spor, html.sc-svigt .rail__spor { flex-wrap: wrap; } /* ── 10b · FYRAFTEN · punktummet ────────────────────────────────────────── Runde 3. Restaurantens sidste beat får sin egen pinnede akt, så billedet med stolene på bordene faktisk bliver set, før pilot-sektionen tager over. Ét billede, fire sætninger fra ejeren, ingen anden bevægelse. Copy'en ligger PÅ billedet nederst til venstre, i samme zone som heroens, med en lokal scrim bag sig — aldrig et fuldskærms-mørkelag. */ .fyraften { /* Runde 8: position: relative overskrev motorens sticky stage — Fyraften var aldrig pinnet, billedet scrollede blot gennem en høj sektion. Deraf "passerer næsten direkte". Og height: 100% (af akten, 1890 px) gjorde det samme igen: en sticky, der er lige så høj som sin forælder, står aldrig fast. Højden er motorens (100 svh) — ingen height her. */ width: 100%; display: flex; align-items: center; justify-content: center; padding: clamp(2rem, 6vh, 4rem) var(--sc-gutter); } .fyraften__f { position: relative; margin: 0; width: min(100%, var(--sc-maxw)); aspect-ratio: 21 / 9; border-radius: 22px; overflow: hidden; box-shadow: var(--sc-e2); /* Åbner roligt over aktens første tredjedel, kun opacity og en scale der ikke er en transition men en funktion af progress. */ /* Runde 4: ejeren oplevede indgangen som pludselig. Den var det: fuldt inde ved p 0,20 af en 1,5 vh-akt, altså ~270 px scroll. Nu 2,1 vh, billedet toner ind over den første halvdel, og skalaen falder til ro over 70 % — mindre, langsommere, og med tid til at stå. Aftenen er slut. */ opacity: clamp(0, calc(var(--sc-p, 0) * 3.2), 1); /* runde 8: inde ved 0,31 */ } /* Runde 5, root cause på den slørede sidste linje: skalaen lå på FIGUREN, så billedteksten blev rasteriseret som del af et lag i ikke-hel skala og sad mellem pixels, mens den tonede ind (cue 0,34–1,0 overlapper skalaens 0–0,69). Første linje så bedre ud, fordi den er lettere; den fede sidste linje viste det. Skalaen ligger nu på BILLEDET alene: teksten rasteriseres i 1:1 på sin egen flade, og billedet bevæger sig stadig. */ .fyraften__f img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.014 - clamp(0, var(--sc-p, 0) * 1.45, 1) * 0.014)); } /* Scrimmen er en SIBLING af figcaption'en (se index.html): en baggrund på selve tekstblokken skjules sammen med teksten, når kontrasten måles, og målingen så det rå foto — 2,13:1 to gange i træk. Densiteten ligger, hvor ordene står: tæt i bunden og i venstre halvdel. Stolene til højre er fri. */ .fyraften__scrim { position: absolute; inset: auto 0 0 0; height: 64%; pointer-events: none; /* Højre-gradienten har ingen lodret fade og ville ellers stå som en vandret kant ved boksens top, tværs over markisen. Masken lader HELE scrimmen dø ud opad, så der ikke findes en linje at se. */ -webkit-mask-image: linear-gradient(to top, #000 52%, transparent 100%); mask-image: linear-gradient(to top, #000 52%, transparent 100%); background: linear-gradient(to right, rgba(20, 16, 12, 0.66) 0%, rgba(20, 16, 12, 0.46) 46%, transparent 74%), linear-gradient(to top, rgba(20, 16, 12, 0.88) 0%, rgba(20, 16, 12, 0.70) 40%, rgba(20, 16, 12, 0.30) 72%, transparent 100%); } .fyraften__ord { position: absolute; inset: auto 0 0 0; padding: clamp(3rem, 8vh, 6rem) clamp(1.6rem, 4vw, 3.2rem) clamp(1.6rem, 4vh, 2.6rem); color: #F3ECDD; } .fyraften__p { margin: 0; max-width: 30ch; /* Skygge MED forskydning og blur, aldrig et nul-offset-halo. */ text-shadow: 0 2px 14px rgba(20, 16, 12, 0.55); font-size: clamp(1.25rem, 2.4vw, 1.9rem); line-height: 1.22; letter-spacing: -0.005em; --fuld: #F3ECDD; color: var(--fuld); /* Runde 5: dæmpet tone uden alfa. Creme med 62 % alfa over et foto blev læst som uskarphed (halvgennemsigtige kanter). #B8B1A4 er samme optiske tone, dækkende, og måler ≥ 3:1 på scrimmen (stor tekst). */ color: color-mix(in oklab, #B8B1A4, var(--fuld) calc(var(--f, 1) * 100%)); transition: color 170ms var(--sc-ease-out); } .fyraften__p--sidst { margin-top: 0.35em; font-weight: 600; } @media (max-width: 720px) { .fyraften__f { aspect-ratio: 4 / 5; border-radius: 16px; } /* 1,28 rem = 20,5 px: STOR tekst efter WCAG (≥ 18,66 px), så kravet er 3:1. Ved 1,15 rem (18,4 px) var den lille tekst med krav 4,5 og målte 3,58 på mobil. Ikke en harness-fejl, harnessen tester 3:1; det er den strengere regel, siden holder sig til. */ .fyraften__p { font-size: 1.28rem; max-width: 20ch; } } @media (prefers-reduced-motion: reduce), (max-height: 600px) { /* Punktummet står færdigt fra start; billedet må aldrig vente på progress. */ .fyraften__f { opacity: 1 !important; } .fyraften__f img { transform: none !important; } .spor__prik { animation: none; } .ordrekort--rejse .ordrekort__trin li.er-nu, .krom__status.er-skift #kromKapitel { animation: none; } } /* ── 10c · BLAND SELV (runde 4) ─────────────────────────────────────────── Ejerens koncept for den modulære tanke uden systemsprog. Én linje i serif som brandøjeblik, og planerne som en dæmpet, ikke-fremhævet linje under: de tre ægte tiers, ingen priser. */ .substans__bland { margin: clamp(1.4rem, 2.6vh, 2rem) 0 0; font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.25; letter-spacing: -0.01em; --fuld: var(--sc-ink); color: var(--fuld); color: color-mix(in oklab, var(--sc-daemp), var(--fuld) calc(var(--f, 1) * 100%)); transition: color 170ms var(--sc-ease-out); } .substans__planer { margin: 0.5rem 0 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-signal); } /* ── 15 · CLASS GOLD · små, korte telefoner ───────────────────────────────── På 320×568 (iPhone SE) lagde heroens ordrekort sig over overskriften: der er ikke plads til både film, kort og copy. Kortet er et eksempel, og det samme kort står i akt 3 — så på små, korte skærme udgår det i heroen (animation klasse D). Copy'en og CTA'erne er informationen. */ @media (max-width: 480px) and (max-height: 640px) { .lag--ordre { display: none !important; } } /* Telefon i landscape (≤ 500 px høj). Heroens copy er bundforankret og voksede op under chromet; kortet lagde sig over overskriften. Her bliver heroen en almindelig sektion, der må være højere end skærmen: copy'en står i flow under chromet, kortet udgår (klasse D), filmen står bag. */ @media (max-height: 500px) { .lag--ordre { display: none !important; } .verden { height: auto !important; min-height: 100svh; } .verden__copy { position: relative !important; left: auto !important; bottom: auto !important; margin-left: var(--sc-gutter); padding: 92px var(--sc-gutter) 44px 0; max-width: min(40rem, 88vw); } .headline { font-size: clamp(1.7rem, 4.6vw, 2.4rem); } } /* ── 16 · RUNDE 9 · HOS JER SOM SCENE ───────────────────────────────────── Højresiden af "Fra bordet": et fotografisk lag (passet fra personalets side), to stationer der tænder, og kortet som en flade oven på disken. Dybden er tre lag, der bevæger sig hver sin smule med aktens progress: fotoet driver ≤ 3 %, stationerne tænder med et løft, kortet løfter sig ved hvert svar. Ingen streger. */ .hus__ordre { justify-content: stretch; } .drift { position: relative; width: 100%; max-width: 27rem; margin-inline: auto; height: clamp(22rem, calc(100svh - 24rem), 32rem); border-radius: 24px; overflow: hidden; background: var(--sc-hairline); box-shadow: var(--sc-e2); } .drift__foto { position: absolute; inset: 0; } .drift__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: translateY(calc(var(--sc-p, 0) * -3%)) scale(1.07); transform-origin: 50% 60%; } /* Lys scrim i bunden, så kortet sidder på disken og ikke svæver i et foto. */ .drift__foto::after { content: ""; position: absolute; inset: auto 0 0 0; height: 62%; background: linear-gradient(to top, rgba(248, 245, 238, 0.92) 0%, rgba(248, 245, 238, 0.55) 45%, transparent 100%); pointer-events: none; } .drift__stationer { position: absolute; left: 14px; top: 14px; margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .drift__station { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px 7px 9px; border-radius: 999px; background: color-mix(in oklab, var(--sc-surface) 90%, transparent); backdrop-filter: blur(10px) saturate(1.1); border: 1px solid color-mix(in oklab, var(--sc-hairline-strong) 70%, transparent); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); box-shadow: var(--sc-e1); opacity: 0.62; transform: translateY(5px); transition: opacity 360ms var(--sc-ease-out), transform 360ms var(--sc-ease-out), color 360ms var(--sc-ease-out); } .drift__prik { width: 7px; height: 7px; border-radius: 999px; background: currentColor; opacity: 0.45; transition: background-color 300ms, opacity 300ms; } .drift__antal { min-width: 1.5em; text-align: center; padding: 2px 6px; border-radius: 999px; background: color-mix(in oklab, var(--sc-ink) 8%, transparent); letter-spacing: 0; font-variant-numeric: tabular-nums; } .drift__station.er-aktiv { opacity: 1; transform: none; color: var(--sc-ink); } .drift__station.er-aktiv .drift__prik { background: var(--sc-accent); opacity: 1; } .drift__station.er-klar .drift__prik { box-shadow: 0 0 0 4px color-mix(in oklab, var(--sc-accent) 18%, transparent); } /* Kortet sidder nederst på disken, bredt som scenen minus kant. */ .drift .ordrekort--rejse { position: absolute; left: 14px; right: 14px; bottom: 14px; width: auto; box-shadow: var(--sc-e2); transform: translateY(calc((1 - var(--f, 1)) * 4px)); transition: box-shadow 320ms var(--sc-ease-out), border-color 320ms var(--sc-ease-out), transform 320ms var(--sc-ease-out); } .drift .ordrekort--rejse.er-lyst { box-shadow: var(--sc-e3), 0 24px 48px -24px rgba(24, 22, 16, 0.35); } /* Kortets hoved: Kafe-mærket som app-navn, bordet, og Eksempel. */ .ordrekort__top { align-items: center; } .ordrekort__app { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em; color: var(--sc-ink); } .ordrekort__app img { width: 18px; height: 18px; display: block; } .ordrekort--rejse .ordrekort__bord { margin-left: auto; font-weight: 600; color: var(--sc-ink-soft); font-size: 0.9rem; } /* Gæstens svar-chips: status, der går tilbage til bordet. Tekst, ikke animation — de toner ind, når kortet har svaret. */ .station__svar { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; padding: 4px 11px 4px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em; color: var(--sc-accent); background: color-mix(in oklab, var(--sc-accent) 10%, transparent); transition: opacity 360ms var(--sc-ease-out), transform 360ms var(--sc-ease-out); } .station__svarprik { width: 6px; height: 6px; border-radius: 999px; background: var(--sc-accent); } html.js .station__svar:not(.er-inde) { opacity: 0; transform: translateY(4px); } @media (max-width: 820px) { /* Mobil: scenen er et kompakt panel — fotoet som lav grund med stationerne over, kortet under. Ingen parallax. */ .drift { height: auto; max-width: none; display: grid; gap: 10px; background: none; box-shadow: none; overflow: visible; border-radius: 0; } .drift__foto { position: relative; height: 132px; border-radius: 16px; overflow: hidden; box-shadow: var(--sc-e1); } .drift__foto img { transform: none; object-position: 50% 55%; } .drift__foto::after { height: 100%; background: linear-gradient(to top, rgba(248, 245, 238, 0.55), transparent 70%); } .drift__stationer { left: 10px; top: auto; bottom: 10px; grid-auto-flow: column; gap: 6px; } .drift__station { padding: 5px 9px 5px 7px; font-size: 0.64rem; opacity: 1; transform: none; } .drift .ordrekort--rejse { position: static; width: 100%; transform: none; } .station__svar { margin-top: 7px; font-size: 0.74rem; } } @media (prefers-reduced-motion: reduce), (max-height: 600px) { .drift__foto img { transform: none !important; } .drift__station { opacity: 1 !important; transform: none !important; color: var(--sc-ink); } .drift__station .drift__prik { background: var(--sc-accent); opacity: 1; } .station__svar { opacity: 1 !important; transform: none !important; } .drift .ordrekort--rejse { transform: none !important; } } /* Telefon (≤ 480): den pinnede ramme på 844 px har ikke plads til foto, fire trin, svar-chips OG kortet. Fotoet og chips udgår; stationerne står som en række over kortet. Kortets trin bærer statussen. */ @media (max-width: 480px) { .drift { gap: 8px; } .drift__foto { height: auto; border-radius: 0; box-shadow: none; overflow: visible; } .drift__foto img, .drift__foto::after { display: none; } .drift__stationer { position: static; grid-auto-flow: column; justify-content: start; } .station__svar { display: none; } } /* Tablet portrait (481–820) med højde til det (≥ 1100, iPad 820×1180): kortet viser linjerne og routingen. På 768×1024 (iPad mini) løb akten 47 px over. */ @media (min-width: 481px) and (max-width: 820px) and (min-height: 1100px) { .ordrekort--rejse .ordrekort__linjer { display: grid; } .ordrekort--rejse .ordrekort__bund { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--sc-hairline); } } /* ── 17 · RUNDE 11 · HANDOFF I HEROEN ───────────────────────────────────── Årsag → virkning i tre beats, drevet af aktens progress. forside.js skriver --hand (0..1, eased) og --handop (kvitteringens opacity) på laget og sætter .er-modtaget på kortet ved ankomst. Ingen timere. */ .lag--ordre { --hand: 0; --handop: 0; --hx: -52vw; --hy: 12vh; --kort-h: 190px; } /* Beat 1–2: gæstens kvittering. Starter ved copy'en (gæstens side), lander dér hvor kortet materialiserer sig, og toner ud i det. */ .handoff { position: absolute; right: var(--ordre-pr); bottom: calc(var(--ordre-pb) + var(--kort-h) + 14px); display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 999px; font: 600 0.78rem/1 var(--sc-font-text); letter-spacing: 0.01em; white-space: nowrap; color: #F3ECDD; background: rgba(20, 16, 12, 0.74); border: 1px solid rgba(243, 236, 221, 0.18); backdrop-filter: blur(10px); opacity: var(--handop); transform: translate(calc(var(--hx) * (1 - var(--hand))), calc(var(--hy) * (1 - var(--hand)))); will-change: transform, opacity; z-index: 2; pointer-events: none; } .handoff__prik { width: 7px; height: 7px; border-radius: 999px; background: var(--kafe-sage); box-shadow: 0 0 0 4px color-mix(in oklab, var(--kafe-sage) 22%, transparent); } /* Beat 3: kortet ankommer som en ny ordre — ikke en fade. */ .ordresaet { position: relative; --ank: clamp(0, calc((var(--sc-p, 0) - 0.32) * 8), 1); /* 0,32 → 0,445 */ opacity: var(--ank); transform: translateY(calc((1 - var(--ank)) * 10px)) scale(calc(0.97 + var(--ank) * 0.03)); transform-origin: 100% 100%; } .ordrekort__kontekst { position: absolute; left: 2px; bottom: calc(100% + 10px); margin: 0; display: inline-flex; align-items: center; gap: 7px; font: 700 0.66rem/1 var(--sc-font-text); letter-spacing: 0.16em; text-transform: uppercase; color: #C9D2C4; white-space: nowrap; text-shadow: 0 1px 8px rgba(20, 16, 12, 0.6); } .ordrekort__kontekstprik { width: 6px; height: 6px; border-radius: 999px; background: var(--kafe-sage); } /* Ringen, når ordren lander. Kører én gang, når klassen sættes. */ .ordrekort.er-modtaget { animation: kort-modtaget 900ms var(--sc-ease-out); } @keyframes kort-modtaget { 0% { box-shadow: var(--sc-e3), 0 0 0 0 color-mix(in oklab, var(--kafe-sage) 55%, transparent); } 100% { box-shadow: var(--sc-e3), 0 0 0 16px color-mix(in oklab, var(--kafe-sage) 0%, transparent); } } .ordrekort.er-modtaget .ordrekort__trin li.er-nu { animation: trin-ind 420ms var(--sc-ease-out); } /* Heroens kort: samme hoved som i akt 3 — mærket, bordet, Eksempel. */ .ordrekort[data-ordre-hero] .ordrekort__app { color: #F3ECDD; } .ordrekort[data-ordre-hero] .ordrekort__app img { width: 16px; height: 16px; } .ordrekort[data-ordre-hero] .ordrekort__bord { margin-left: auto; color: #F3ECDD; font-weight: 600; } /* Prototyper (bedømt i den rigtige hero): A timing+ankomst · B kvittering+ankomst · C kontekstlinje+ankomst · BC begge. */ .verden[data-handoff="A"] .handoff, .verden[data-handoff="A"] .ordrekort__kontekst, .verden[data-handoff="B"] .ordrekort__kontekst, .verden[data-handoff="C"] .handoff { display: none; } @media (max-width: 820px) { /* Mobil: kortet står øverst, copy'en nederst — kvitteringen kommer nedefra. */ .lag--ordre { --hx: 0px; --hy: 30vh; } .handoff { right: auto; left: 50%; margin-left: calc(min(17rem, 74vw) / -2); bottom: calc(48vh + var(--kort-h) + 12px); } .ordrekort__kontekst { left: 0; } } @media (prefers-reduced-motion: reduce), (max-height: 600px) { /* Rækkefølgen som statiske tilstande: kvitteringen docket ved kortet, kortet ankommet med MODTAGET og alle linjer, kontekstlinjen synlig. */ .lag--ordre { --hand: 1; --handop: 1; } .handoff { transform: none !important; opacity: 1 !important; } .ordresaet { opacity: 1 !important; transform: none !important; } .ordrekort.er-modtaget, .ordrekort.er-modtaget .ordrekort__trin li.er-nu { animation: none; } } html:not(.js) .ordresaet, html.sc-svigt .ordresaet { opacity: 1; transform: none; } html:not(.js) .handoff, html.sc-svigt .handoff { display: none; } /* ── 18 · RUNDE 12 · FINALEN ────────────────────────────────────────────── Slutningen på heroens historie: det samme bord, gæsterne er gået. To kompositioner, valgt med data-finale på .close: A cinematic full-bleed — scenen bag alt, scrim i top og bund, copy centreret B editorial split — copy + formular på dyb grøn til venstre, scenen i fuld højde til højre med en blød kant ind i det grønne Scenen får dybde på ankomst (skala 1,05 → 1, toner op) og falder så til ro. Formularen rører intet: den står stille fra p = 0. */ .close__scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .close__still, .close__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transform: scale(calc(1.05 - clamp(0, var(--sc-p, 0) * 3.2, 1) * 0.05)); transform-origin: 50% 70%; } .close__film { display: none; transition: opacity 900ms var(--sc-ease-out); } .close__scene.er-film .close__film { display: block; } .close__scene.er-faerdig .close__film { opacity: 0 !important; } /* A · full-bleed. Scenen ses (0,62), og copy'en står i en lodret scrim-korridor. */ .close[data-finale="A"] .close__still { opacity: calc(0.62 * clamp(0, 0.35 + var(--sc-p, 0) * 2.4, 1)); } .close[data-finale="A"] .close__scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15, 37, 31, 0.92) 0%, rgba(15, 37, 31, 0.35) 30%, rgba(15, 37, 31, 0.35) 62%, rgba(15, 37, 31, 0.96) 100%), radial-gradient(60% 55% at 50% 52%, rgba(15, 37, 31, 0.55) 0%, transparent 100%); } /* B · editorial split. */ .close[data-finale="B"] { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); grid-template-rows: 1fr auto; grid-template-areas: "inder scene" "fod fod"; column-gap: clamp(2rem, 4vw, 4rem); padding-top: clamp(5rem, 12vh, 7rem); } .close[data-finale="B"] .close__inder { grid-area: inder; text-align: left; max-width: 34rem; margin-inline: 0; /* Store skærme: venstre kant flugter med sidens maxw (footerens kant), scenen er stadig full-bleed til højre. */ margin-left: max(0px, calc((100vw - var(--sc-maxw)) / 2 - var(--sc-gutter))); } .close[data-finale="B"] .close__inder .sc-label { margin-inline: 0; } .close[data-finale="B"] .close__p { margin-inline: 0; } .close[data-finale="B"] .pilotform { margin-inline: 0; justify-content: flex-start; } .close[data-finale="B"] .pilotform__status { margin-inline: 0; } .close[data-finale="B"] .interesse-vaern { justify-content: flex-start; } .close[data-finale="B"] .close__scene { position: absolute; inset: 0 0 auto auto; width: 56%; height: calc(100% - var(--fod-h, 130px)); z-index: 0; border-radius: 0 0 0 28px; overflow: hidden; } .close[data-finale="B"] .close__still { opacity: calc(0.92 * clamp(0, 0.6 + var(--sc-p, 0) * 2.4, 1)); object-position: 58% 60%; } /* ankomst: 0,55 → 0,92, ikke fra mørkt */ .close[data-finale="B"] .close__scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, #0F251F 0%, rgba(15, 37, 31, 0.55) 14%, transparent 42%), linear-gradient(to top, rgba(15, 37, 31, 0.9) 0%, transparent 34%), linear-gradient(to bottom, rgba(15, 37, 31, 0.6) 0%, transparent 24%); } .close[data-finale="B"] .fod { grid-area: fod; } @media (max-width: 820px) { /* Mobil: scenen som et bånd øverst (den samme terrasse, aftenlys), copy og formular under — ikke bag. */ .close[data-finale="B"] { grid-template-columns: 1fr; grid-template-areas: "scene" "inder" "fod"; grid-template-rows: auto 1fr auto; padding-top: clamp(4.5rem, 10vh, 5.5rem); column-gap: 0; } .close[data-finale="B"] .close__scene { position: relative; grid-area: scene; width: auto; height: auto; aspect-ratio: 16 / 10; inset: auto; border-radius: 18px; margin: 0 0 clamp(1.6rem, 4vh, 2.4rem); } .close[data-finale="B"] .close__inder { align-self: start; } .close[data-finale="B"] .close__scene::after { background: linear-gradient(to top, rgba(15, 37, 31, 0.55) 0%, transparent 40%); } .close[data-finale="B"] .close__still { opacity: 1; object-position: 50% 62%; } .close[data-finale="B"] .close__inder { max-width: none; } .close[data-finale="A"] .close__still { object-position: 50% 62%; } } @media (prefers-reduced-motion: reduce), (max-height: 600px) { .close__still, .close__film { transform: none !important; opacity: 1 !important; } .close[data-finale="A"] .close__still { opacity: 0.62 !important; } .close[data-finale="B"] .close__still { opacity: 0.92 !important; } } /* ── 19 · CLS · pinnede akter er forudsat i CSS ───────────────────────────── Motoren skriver aktens højde inline ved mount (span × 100vh). Uden en CSS-højde flyttede alt under heroen ~1 vh ned, når motoren kom — målt som CLS 1,0 ved load (også i den forrige prod). Samme tal her, så inline- værdien ændrer intet. De statiske tilstande (§13/§15) overskriver med height: auto !important og vinder stadig. */ .akt--verden { height: 220vh; } .akt--konv { height: 160vh; } .akt--hus { height: 380vh; } .akt--egen { height: 160vh; } .akt--substans { height: 155vh; } .akt--fyraften { height: 210vh; } .akt--pilot { height: 160vh; } @media (max-width: 820px) { .akt--hus { height: 340vh; } /* forside.js sætter span 3,4 på touch/smal */ } /* ── 20 · TEMA-BANNER ────────────────────────────────────────────────────── Én stribe øverst i sidens normale flow. Den er tom og `hidden`, indtil /tema.js finder et aktivt banner i manifestet — derfor er HVER regel herunder hængt op på `.banner:not([hidden])` eller på selve `.banner`, som ikke findes på skærmen, når attributten står. Den daglige forside tegnes altså præcis som før denne sektion blev skrevet. `[hidden]` ER IKKE NOK AF SIG SELV. Browserens egen regel er `[hidden]{display:none}` med lavest mulige vægt, og et `display:flex` på klassen ville slå den. Derfor står `.banner[hidden]{display:none}` eksplicit — uden den linje ville et tomt banner fylde en stribe hver dag. INGEN BEVÆGELSE. Ingen animation, ingen ind-fade, ingen cue: banneret er en besked, ikke et beat. Derfor ser reduceret bevægelse (§13) og de korte viewports (§15) nøjagtig det samme som alle andre, og motoren har intet at slukke. `role="status"` gør, at teksten læses op, når den kommer. KROMET. .krom er `position: fixed` i toppen, så en synlig stribe og wordmarket ville dele de øverste pixels. Så længe banneret står, skubbes det faste krom ned med bannerets egen højde; nøjagtig samme greb som headerens øvrige tilstandsskift, med den samme rate. Over heroen er kromets plade gennemsigtig, så forskellen er, hvor logoet står — ikke en bjælke, der flytter sig. Bryder en meget lang banner-tekst til to linjer, er offsettet for lille; det er accepteret, teksten er kort pr. kontrakt. */ /* Højden bor på :root, ikke på .banner: kromet er SIBLING, og en CSS-variabel arves nedad — aldrig sidelaens. */ :root { --banner-h: 2.25rem; } .banner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5ch; min-height: var(--banner-h); padding: 0.4rem var(--sc-gutter); background: var(--sc-canvas); color: var(--sc-ink-body); border-bottom: 1px solid var(--sc-hairline); font-family: var(--sc-font-text); font-size: 0.84rem; line-height: 1.35; text-align: center; /* Over det faste krom, så striben ikke bliver læst gennem en logo-kant i de første pixels af scroll. Den er stadig i flowet og ruller væk. */ position: relative; z-index: calc(var(--sc-z-chrome) + 1); } .banner[hidden] { display: none; } .banner a { color: var(--sc-accent); text-underline-offset: 0.18em; } .banner:not([hidden]) ~ .krom { top: var(--banner-h); transition: padding 320ms var(--sc-ease-out), top 320ms var(--sc-ease-out); } /* Når kromet er blevet til statuslinje, er banneret for længst rullet ud af billedet, og linjen skal hugge den øverste kant som altid. */ .banner:not([hidden]) ~ .krom:not([data-krom="verden"]) { top: 0; } @media (max-width: 640px) { :root { --banner-h: 2rem; } .banner { font-size: 0.79rem; padding-inline: 1rem; } }