/* Designsproget for nicolaikaraas.dk — delt af index.html og cv.html. Ét sted, så de to sider ikke kan drive fra hinanden. @import henter fontene; url()'erne inde i fontfaces.css er relative til DEN fil, og den ligger i fonts/ — derfor virker det herfra. */ @import url('fonts/fontfaces.css'); :root{ /* PALET: «Natblå og fersken» — valgt af Nicolai 2026-08-03 i tools/palet-lab.gen.html (bud 07 af ti). ⚠️ FORMSPROGET er flamingobingos og skal blive: sticker-kort, hårde ink-offset-skygger UDEN blur, 2 px kanter, papir-grain, Fraunces/ Space Grotesk/Inter. Token-navnene er også de samme på tværs af projekterne, så en rettelse kan læses samme sted begge steder. Det er KUN farverne, der er sidens egne. ⚠️⚠️ FARVERNE MÅ IKKE GLIDE TILBAGE MOD SPILLENES. Nicolai bad netop om afstand: cream-papiret er blevet køligt-varmt off-white, sennepsbåndet er blevet fersken, og blækket er næsten sort blåt. Kommer der en dag et cream #faf3e7 eller et sennep #e0a83c ind igen, er man på vej tilbage til flamingobingo. ⚠️ Skal paletten skiftes igen: ret i tools/palet_lab_build.py og kør lab'et — det REGNER kontrasten på elleve farvepar og stopper bygningen, hvis et falder under WCAG AA. Skriv aldrig nye hex-værdier direkte herind uden at have kørt den kontrol. ⚠️ Projektkortene bærer HVER SIN farve (terracotta til flamingobingo, lilla til stopdans) — sidens egen farve må aldrig blive den ene af dem. Se --accent nedenfor, der netop var faldet i den fælde. */ --ink:#151b2b; --ink-soft:#3e4761; --muted:#676e7f; --paper:#f6f3ee; --surface:#fffdf9; --line:#e2ddd3; --brand:#243a6b; --brand-deep:#17264a; --amber:#f0b795; --cyan:#6d84b0; /* ⚠️ SIDENS EGEN ANDENFARVE. Bruges til kartotekets navneplade i heroen og placecard-numrene. Den var sat til --flamingo, altså flamingobingos terracotta — præcis dét, noten nedenfor forbyder: sidens eget krom bar et af PROJEKTERNES farver, så heroen råbte «flamingobingo». */ --accent:#d9603a; /* ⚠️ TO AFLEDTE, OG DE ER IKKE PYNT. --accent-deep er accenten som TEKST (placecard-numrene på et lyst kort); --paa-accent er teksten PÅ accenten (kartotekets navneplade). Sidstnævnte er ikke bare #fff: målt 2026-08-03 giver hvid på en mellemtonet accent 3,3-4,4:1, altså under WCAG AA. Se tools/palet_lab_build.py, der REGNER begge og stopper bygningen. */ --accent-deep:#bc5332; --paa-accent:#151b2b; /* ⚠️ PROJEKTFARVER — KUN til projektkortene. Rør dem aldrig i sidens eget krom; hvert kort skal bære sin egen identitet, og siden sin. */ --flamingo:#d95d39; --stopdans:#7a5ea8; /* Samme farver som rå kanaler, så de kan bruges med gennemsigtighed (skygger, washi-tape, fokusring). Uden dem stod værdierne hårdkodet tolv steder, og en paletændring ramte kun halvdelen af siden. */ --ink-rgb:21,27,43; --paper-rgb:246,243,238; --brand-rgb:36,58,107; --amber-rgb:240,183,149; /* Tekstfarver PÅ de farvede bånd. De kan ikke udledes af tokens ovenfor — de er valgt for at holde kontrasten på netop den baggrund. */ --paa-brand:#c6d2ee; /* dæmpet tekst på --brand */ --paa-amber:#41291b; /* tekst på --amber (muted er ulæselig dér) */ --paa-ink:#e9ecf4; /* brødtekst på --ink */ --paa-ink-svag:#98a0b4;/* dæmpet tekst på --ink */ --radius:22px; --bd:2px solid var(--ink); --shadow:0 5px 0 var(--ink); --shadow-sm:0 3px 0 var(--ink); --eo:cubic-bezier(.19,1,.22,1); --eio:cubic-bezier(.83,0,.17,1); } *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:76px} /* Der står med vilje INTET overflow-x her. Første udgave havde overflow-x:clip, kopieret fra flamingobingo — men dér er det nødvendigt, fordi båndene bygges med width:100vw og derfor stikker ud. Her gør de ikke (se .band nedenfor), så der er intet at klippe, og en overflow-egenskab på rod-elementet er ikke gratis: den gør til en scroll-beholder og kan påvirke sticky, scroll-anchoring og smooth scroll. Målt efter ændringen: scrollWidth - clientWidth = 0. */ html,body{margin:0} body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--paper); line-height:1.55;-webkit-font-smoothing:auto} /* Papir-grain over hele siden. Samme feTurbulence-URI som i spillene — data: er tilladt i CSP'ens img-src. */ body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.30; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E")} h1,h2,h3{font-family:'Fraunces',serif;font-weight:700;line-height:1.15;margin:0} p{margin:0} a{color:var(--brand-deep)} :focus-visible{outline:3px solid rgba(var(--brand-rgb),.5);outline-offset:2px} /* ===== Sticky topbar ===== */ .fj-top{position:sticky;top:0;z-index:120;background:rgba(var(--paper-rgb),.97); backdrop-filter:blur(8px);border-bottom:2px solid var(--ink); padding-top:env(safe-area-inset-top)} .fj-top .in{max-width:1100px;margin:0 auto;padding:11px 20px;display:flex;align-items:center;gap:18px} .fj-logo{font-family:'Fraunces',serif;font-weight:900;font-size:1.1rem;color:var(--ink); text-decoration:none;letter-spacing:-.01em} .fj-logo span{color:var(--brand)} .fj-nav{display:flex;gap:16px;margin-left:auto;font-family:'Space Grotesk',sans-serif; font-weight:500;font-size:.86rem} .fj-nav a{color:var(--ink-soft);text-decoration:none} .fj-nav a:hover{color:var(--ink)} @media(max-width:760px){.fj-nav{gap:13px;font-size:.8rem}.fj-nav .skjul-lille{display:none}} /* ⚠️ Ved 320 px (iPhone SE) stak navigationen 19 px ud over kanten og gav HELE siden vandret overløb. Fejlen var der før kartoteket og har intet med heroen at gøre — fundet ved at måle hvert element mod viewporten. */ @media(max-width:400px){.fj-nav{gap:9px;font-size:.72rem}} /* ===== Knapper ===== */ .btn{border:var(--bd);border-radius:999px;padding:12px 22px;font-family:'Space Grotesk',sans-serif; font-weight:700;font-size:1rem;box-shadow:0 4px 0 var(--ink);text-decoration:none; transition:transform .18s var(--eo),box-shadow .18s var(--eo); display:inline-flex;align-items:center;gap:8px;justify-content:center} .btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)} .btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink);transition-duration:.06s} .btn-primary{background:var(--brand);color:#fff} .btn-ghost{background:var(--surface);color:var(--ink)} .btn-light{background:#fff;color:var(--brand-deep)} .btn-dark{background:var(--ink);color:#fff} .btn.xl{padding:16px 28px;font-size:1.1rem} /* Pilen glider ind ved hover — samme trick som i flamingobingos hoved-CTA'er */ .btn-cta::after{content:"→";display:inline-block;margin-left:-1.1em;opacity:0; transform:translateX(-6px); transition:margin-left .22s var(--eo),opacity .22s var(--eo),transform .22s var(--eo)} .btn-cta:hover::after{margin-left:0;opacity:1;transform:none} /* ===== Sektionsrytme ===== */ /* Cream-sektioner har egen padding; farvebåndene ligger KANT MOD KANT. */ .fsec{padding:64px 0 70px} .wrap{max-width:1100px;margin:0 auto;padding:0 20px} /* Farvebånd i fuld bredde. ⚠️ IKKE width:100vw + negativ margin, som flamingobingo bruger: 100vw tæller scrollbaren MED, så båndet bliver ca. 15 px bredere end viewporten og skal klippes bagefter. Her ligger båndene direkte i
, der ingen max-width har — en helt almindelig blok fylder altså allerede præcis hele bredden, uden overløb og uden clip. Indholdet holdes på plads af .band-in. */ .band{width:100%} .band-in{max-width:1100px;margin:0 auto;padding:0 20px} .band-om{background:var(--brand);color:#fff;border-top:3px solid var(--ink); border-bottom:3px solid var(--ink);padding:64px 0 68px} .band-om .eyebrow{color:var(--paa-brand)} /* ⚠️ Kom til med case-siden: forsidens .band-om har ingen .sub, så kombinationen fandtes ikke. Uden denne arver den --muted (#676e7f), som på mørkeblå giver 2,0:1 — praktisk talt ulæseligt. */ .band-om .sub{color:var(--paa-brand)} .band-om h2,.band-om h3{color:#fff} .band-proj{background:var(--amber);border-top:3px solid var(--ink); border-bottom:3px solid var(--ink);padding:64px 0 68px} .band-proj .eyebrow{color:var(--paa-amber)} .band-proj .sub{color:var(--paa-amber)} /* --muted var ulæselig mod sennep */ .band-fakta{background:var(--ink);color:var(--paa-ink);border-top:3px solid var(--ink); border-bottom:3px solid var(--ink);padding:60px 0 72px} .band-fakta .eyebrow{color:var(--amber)} .band-fakta h2{color:#fff} .band-fakta .sub{color:var(--paa-ink-svag)} /* Venstrestillede sektionshoveder, fede overskrifter */ .lp-head{margin:0 0 34px} .lp-head h2{max-width:26ch;font-size:clamp(1.8rem,3.6vw,2.7rem);font-weight:900;line-height:1.1} .lp-head.lp-big h2{font-size:clamp(1.9rem,4vw,3rem)} .lp-head .sub{color:var(--muted);margin:12px 0 0;max-width:56ch;font-size:1.02rem} .eyebrow{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:.2em; text-transform:uppercase;font-size:.74rem;color:var(--brand-deep);margin:0 0 9px} /* ===== Hero: split, venstrestillet ===== */ .hero-in{max-width:1100px;margin:0 auto;padding:80px 20px 96px;display:grid; grid-template-columns:1.05fr 1fr;gap:72px;align-items:center} .hero-kicker{margin:0 0 16px;font-family:'Space Grotesk',sans-serif;font-weight:700; letter-spacing:.16em;text-transform:uppercase;font-size:.78rem;color:var(--brand-deep)} .hero h1{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(2.2rem,4.6vw,3.6rem); line-height:1.06;letter-spacing:-.01em;max-width:15ch} /* ⚠️ Fremhævningen er en HÅNDTEGNET BUE i accentfarven — ikke en lige amber bjælke under ordet. Bjælken var flamingobingos dokumenterede h1-signatur, ordret, og var derfor et af de fire greb, heroen skulle af med (2026-08-04). Buen laves med en asymmetrisk border-radius på en bundkant, så stregen løfter sig i den ene ende som et tuschstrøg. Læg den ikke tilbage. */ .hero h1 em{font-style:normal;color:var(--brand);position:relative;white-space:nowrap} .hero h1 em::after{content:"";position:absolute;left:-.04em;right:-.04em;bottom:-.10em; height:.34em;border-bottom:4px solid var(--accent); border-radius:0 0 60% 40%/0 0 100% 100%} .hero-why{margin:22px 0 0;color:var(--ink-soft);font-size:1.1rem;max-width:44ch} .hero-why b{color:var(--ink)} .hero-ctas{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap} .hero-fine{margin:18px 0 0;font-size:.85rem;color:var(--ink-soft); font-family:'Space Grotesk',sans-serif;font-weight:600} /* ===== Kartoteket: tre arkivkort ====================================== Heroens visuelle halvdel. Afløste navneskiltet 2026-08-04, fordi det — roteret kort med rund badge i hjørnet — var flamingobingos eget greb. ÉN STAK PÅ ALLE BREDDER. Tilstanden bor i tre radio-knapper, og fanerne over stakken skifter kort. `kartotek.js` lægger et SWIPE oven på: kortet følger fingeren og kastes bagerst. ⚠️⚠️ SWIPET ER EN FORBEDRING, IKKE EN FORUDSÆTNING. Fanerne virker uden en linje JavaScript, og de er synlige på alle skærme netop derfor. Skjul dem aldrig «fordi man jo kan swipe» — så mister en bruger uden JS, eller med en udvidelse der blokerer den, sin eneste vej til de to andre kort. ⚠️ En KARRUSEL blev prøvet først (CSS scroll-snap, kortene side om side) og forkastet af Nicolai: «man skal bare swipe på kortet og så bytter det plads, ikke swipe ind fra siden». Scroll-snap KAN ikke det — for at der overhovedet kan scrolles, skal indholdet være bredere end beholderen, så bevægelsen bliver altid vandret transport. Genindfør den ikke. ⚠️ Søskende-selektorerne (~) KRÆVER at de tre står FØR både .kt-faner og .kt-kort i markup'en. Flyttes de ned, holder alt herunder op med at virke — tavst, uden fejl nogen steder. */ .kartotek{width:100%;max-width:420px;justify-self:end;min-width:0} /* Æskens etiket. Navnet skal stå fast, uanset hvilket kort der er fremme. */ .kt-plade{display:inline-block;background:var(--accent);color:var(--paa-accent); border:var(--bd);border-radius:12px;box-shadow:var(--shadow-sm); padding:9px 18px 8px;margin:0 0 18px;transform:rotate(-1.6deg)} .kt-plade span{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700; font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;opacity:.85} .kt-plade strong{display:block;font-family:'Fraunces',serif;font-weight:900; font-size:1.5rem;line-height:1.1} /* Skjult, men stadig fokuserbar — derfor ikke display:none. */ .kt-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .kt-faner{display:flex;gap:6px;position:relative;z-index:5;padding-left:6px} .kt-fane{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.66rem; letter-spacing:.16em;text-transform:uppercase;cursor:pointer; background:var(--paper);color:var(--muted); border:var(--bd);border-bottom:none;border-radius:9px 9px 0 0; padding:8px 15px 7px;transform:translateY(3px); transition:transform .22s var(--eo),background .22s,color .22s} .kt-fane:hover{color:var(--ink)} .kt-stak{position:relative;min-height:330px;touch-action:pan-y} .kt-kort{position:absolute;left:0;right:0;top:38px; background:var(--surface);border:var(--bd);border-radius:0 14px 14px 14px; padding:22px 22px 18px;box-shadow:0 5px 0 rgba(var(--ink-rgb),.32); transition:transform .46s var(--eo),box-shadow .3s var(--eo)} .kt-kort h2{font-family:'Fraunces',serif;font-weight:900;font-size:1.42rem; line-height:1.15;margin:0 0 14px} .kt-kort ul{margin:0;padding:0;list-style:none;display:grid;gap:8px} /* `flex-wrap:wrap` er et sikkerhedsnet: værdien til højre har flex:none og kan ikke krympe, så en længere værdi ville ellers skyde rækken ud over kortets kant. Målt ved ægte 360 px passer den med 24 px til overs. */ .kt-kort li{display:flex;flex-wrap:wrap;justify-content:space-between; align-items:baseline;gap:2px 12px; font-family:'Space Grotesk',sans-serif;font-size:.72rem;letter-spacing:.08em; text-transform:uppercase;color:var(--muted); border-bottom:1px dashed var(--line);padding-bottom:7px} .kt-kort li b{flex:none;margin-left:auto;font-size:.88rem;letter-spacing:0; text-transform:none;color:var(--ink);text-align:right} .kt-fod{margin:14px 0 0;font-family:'Space Grotesk',sans-serif;font-weight:700; font-size:.64rem;letter-spacing:.14em;text-transform:uppercase; color:var(--accent-deep)} /* ⚠️⚠️ LAGENE FØLGER KORTETS ROLLE, IKKE DETS NAVN. Første udgave gav hvert kort et fast z-index (foto 1, kode 2, spil 3). Det brød sammen, så snart man swipede: «næste kort»-reglen satte OGSÅ 3, og ved lige z-index afgør rækkefølgen i DOM'en — så Spil lagde sig oven på Kode. Nicolai så det med det samme: bag Foto stod Spil, hvor Kode skulle have været. Rollerne er nu ØVERST(4) · MIDT(3) · NEDERST(2), og de flytter sig med, hvilket kort der er aktivt. Giv aldrig et kort et fast lag igen. */ .kt-kort{z-index:1;transform:rotate(-2.4deg) translate(-12px,17px) scale(.96)} /* ØVERST — det aktive kort. */ #kt-foto:checked ~ .kt-foto, #kt-kode:checked ~ .kt-kode, #kt-spil:checked ~ .kt-spil{transform:none;z-index:4; box-shadow:0 9px 0 var(--ink);cursor:grab} /* NEDERST — kortet to pladser frem. Det ligger allerede i basis-stillingen, men skal have et lag mellem det nederste (1) og det midterste (3). */ #kt-foto:checked ~ .kt-spil, #kt-kode:checked ~ .kt-foto, #kt-spil:checked ~ .kt-kode{z-index:2} /* Den aktive fane hænger sammen med kortet: samme flade, ingen skygge under. */ #kt-foto:checked ~ .kt-faner [for="kt-foto"], #kt-kode:checked ~ .kt-faner [for="kt-kode"], #kt-spil:checked ~ .kt-faner [for="kt-spil"]{background:var(--surface); color:var(--ink);transform:translateY(3px) scale(1.04);transform-origin:bottom} /* ⚠️ Fokusringen skal sidde på FANEN, ikke på den skjulte radio — ellers er der intet at se for en tastaturbruger. */ #kt-foto:focus-visible ~ .kt-faner [for="kt-foto"], #kt-kode:focus-visible ~ .kt-faner [for="kt-kode"], #kt-spil:focus-visible ~ .kt-faner [for="kt-spil"]{outline:3px solid var(--brand); outline-offset:2px} /* ---- Swipet (kartotek.js) --------------------------------------------- ⚠️⚠️ INGEN OPACITY NOGEN STEDER I DENNE BLOK. Første udgave lod kortet fade ud under kastet, og Nicolai fangede hvorfor det var forvirrende: «det ville et rigtigt kort aldrig gøre». Fadet var en genvej til at skjule kortet, mens stakken skiftede — den ødelagde illusionen af ét fysisk kort. Kortet er synligt hele vejen: ud af skærmen, og ind igen nedenunder. */ /* Mens der trækkes: ingen overgang, ellers slæber kortet efter fingeren. */ .kt-kort.kt-tager{transition:none;cursor:grabbing} /* FASE 1 — flugten. Accelererende easing: kortet tager fart væk fra hånden, som noget der er kastet. Den bremser IKKE op til sidst (ingen ease-out) — det ville se ud, som om det ramte en usynlig væg. */ .kt-kort.kt-flyver{transition:transform .30s cubic-bezier(.36,0,.78,.24)} /* FASE 2 — hjemturen. Blød expo-udgang, så kortet daler på plads nederst i stakken i stedet for at klaske ned. Længere end flugten med vilje: ud går hurtigt, ind går roligt. */ .kt-kort.kt-vender{transition:transform .46s var(--eo)} /* ⚠️ Z-INDEX OG SKYGGE KRÆVER ID'ET I SELEKTOREN. `#kt-foto:checked ~ .kt-foto` er id + klasse (110) og slår enhver ren klasse (10) — en `.kt-flyver{z-index:7}` ville tabe, og kortet ville flyve BAG de andre. Derfor de tre lange selektorer frem for et `!important`, som ville skjule problemet. */ #kt-foto:checked ~ .kt-foto.kt-tager, #kt-kode:checked ~ .kt-kode.kt-tager, #kt-spil:checked ~ .kt-spil.kt-tager, #kt-foto:checked ~ .kt-foto.kt-flyver, #kt-kode:checked ~ .kt-kode.kt-flyver, #kt-spil:checked ~ .kt-spil.kt-flyver{z-index:7;box-shadow:0 16px 0 rgba(var(--ink-rgb),.30)} /* ⚠️ Der stod tidligere `.kt-vender{z-index:0}` her for at lægge det hjemvendende kort nederst. Den er FJERNET: rolle-reglerne ovenfor har højere specificitet (id+klasse) og ville alligevel vinde. Kortet er på dette tidspunkt blevet det NEDERSTE i stakken og får z-index 2 — altså under både det aktive (4) og det midterste (3), præcis som det skal. Se rolle-reglerne, hvis lagene skal ændres. */ /* Kortet UNDER det aktive retter sig gradvist op, mens man trækker. `--drag` går 0→1 og sættes af JS'en. Det er dét, der får stakken til at føles levende frem for at være to uafhængige animationer. */ /* MIDT — det næste kort. Retter sig gradvist op, mens det øverste trækkes væk: `--drag` går 0→1 og sættes af kartotek.js. */ #kt-foto:checked ~ .kt-kode, #kt-kode:checked ~ .kt-spil, #kt-spil:checked ~ .kt-foto{z-index:3; transform:rotate(calc((1 - var(--drag,0)) * 1.7deg)) translate(calc((1 - var(--drag,0)) * 10px), calc((1 - var(--drag,0)) * 9px)) scale(calc(.965 + .035 * var(--drag,0)))} .kt-hint{margin:14px 0 0;font-family:'Space Grotesk',sans-serif;font-weight:700; font-size:.62rem;letter-spacing:.16em;text-transform:uppercase; color:var(--muted)} /* Teksten følger hvad der FAKTISK er muligt: JS'en sætter .kt-kan-swipe, så uden JavaScript står der «tryk på fanerne» — og det er sandt. */ .kt-hint::before{content:"Tryk på fanerne for at skifte kort"} .kt-kan-swipe ~ .kt-hint::before{content:"Swipe kortet væk — eller tryk på fanerne"} @media(max-width:900px){ .hero-in{grid-template-columns:1fr;gap:48px;padding:48px 20px 78px} .kartotek{justify-self:center} } @media(max-width:420px){ .kt-fane{font-size:.6rem;letter-spacing:.1em;padding:8px 11px 7px} .kt-stak{min-height:352px} } /* ⚠️ Ved reduced motion slår den globale regel nederst i arket alle overgange fra. Kortet skifter stadig — kastet sker bare øjeblikkeligt, hvilket er den rigtige opførsel: tilstanden må aldrig afhænge af en animation, der er slået fra. */ /* ===== Om: tekst + citat ===== */ .om-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:start} @media(max-width:860px){.om-grid{grid-template-columns:1fr;gap:32px}} .om-tekst p{font-size:1.06rem;margin:0 0 16px;max-width:56ch} .om-tekst p:last-child{margin-bottom:0} .om-tekst b{font-weight:700} /* Citatkort med washi-tape — samme greb som placecards, men lyst på farvebåndet */ .citat{background:var(--surface);color:var(--ink);border:var(--bd);border-radius:16px; box-shadow:0 7px 0 var(--ink);padding:26px 24px 22px;position:relative;transform:rotate(-1.4deg)} .citat::before{content:"";position:absolute;top:-11px;left:50%;width:64px;height:17px; transform:translateX(-50%) rotate(-2deg);background:rgba(var(--amber-rgb),.9); border:1.5px solid rgba(var(--ink-rgb),.35);border-radius:3px} .citat q{display:block;font-family:'Fraunces',serif;font-size:1.16rem;font-weight:600; line-height:1.4;quotes:'»' '«'} .citat cite{display:block;margin-top:14px;font-style:normal;font-family:'Space Grotesk',sans-serif; font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)} /* ===== Hvad jeg arbejder med ===== */ .laver{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0;list-style:none;margin:0} @media(max-width:860px){.laver{grid-template-columns:repeat(2,1fr)}} @media(max-width:540px){.laver{grid-template-columns:1fr}} .laver li{background:var(--surface);border:var(--bd);border-radius:16px;box-shadow:var(--shadow-sm); padding:18px 20px;transition:transform .18s var(--eo),box-shadow .18s var(--eo)} .laver li:hover{transform:translateY(-3px);box-shadow:0 6px 0 var(--ink)} .laver b{display:block;font-family:'Fraunces',serif;font-weight:700;font-size:1.1rem;margin-bottom:6px} .laver span{font-size:.92rem;color:var(--ink-soft);line-height:1.5} /* ===== Projektkort ===== */ .projekter{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} @media(max-width:820px){.projekter{grid-template-columns:1fr}} .proj{display:flex;flex-direction:column;background:var(--surface);border:var(--bd); border-radius:var(--radius);box-shadow:var(--shadow);text-decoration:none;color:var(--ink); position:relative;overflow:hidden; transition:transform .18s var(--eo),box-shadow .18s var(--eo)} a.proj:hover{transform:translateY(-4px);box-shadow:0 9px 0 var(--ink)} a.proj:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ink);transition-duration:.06s} /* Cover i projektets egen farve, med halftone-prikker — som pack-covers i spillet */ .proj-cover{height:96px;flex:none;border-bottom:2px solid var(--ink);position:relative; background-color:var(--pf,var(--brand));overflow:hidden; background-image:radial-gradient(rgba(var(--ink-rgb),.16) 1.5px,transparent 1.5px); background-size:11px 11px} /* ⚠️ Emoji'en skal ligge HELT inde i coveret. Første udgave lod den hænge ud over underkanten (bottom:-20px), men coveret har overflow:hidden pga. halftone-mønsteret — så blev mærkatet skåret over på midten. Samme placering som pack-emoji i flamingobingo. */ .proj-emoji{position:absolute;left:16px;bottom:11px;width:54px;height:54px;border:var(--bd); border-radius:14px;background:var(--surface);display:grid;place-items:center; font-size:1.7rem;box-shadow:var(--shadow-sm);rotate:-6deg; transition:transform .3s var(--eo)} a.proj:hover .proj-emoji{transform:rotate(9deg) scale(1.08)} .proj-krop{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;gap:10px} .proj h3{font-size:1.3rem;font-weight:800;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .proj p{color:var(--ink-soft);font-size:.96rem;flex:1} .proj .dom{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.88rem; color:var(--pf,var(--brand))} .maerke{font-family:'Space Grotesk',sans-serif;font-size:.62rem;font-weight:700;letter-spacing:.11em; text-transform:uppercase;border:1.5px solid var(--ink);border-radius:99px;padding:3px 10px; background:var(--amber);color:var(--ink);rotate:2deg;box-shadow:0 2px 0 var(--ink)} .proj-fb{--pf:var(--flamingo)} .proj-sd{--pf:var(--stopdans)} .proj-pp{--pf:var(--cyan)} .proj-pp .proj-cover{opacity:.75} /* Vejen ind i casen. Ligger under kortet, ikke inde i det — se noten i index.html om link-i-link. */ .proj-case{grid-column:1/-1;margin:2px 0 0;font-family:'Space Grotesk',sans-serif; font-weight:700;font-size:.88rem} .proj-case a{color:var(--paa-amber);text-decoration:none; border-bottom:2px solid var(--accent);padding-bottom:2px} .proj-case a:hover{color:var(--ink)} /* ===== Tre ting: tape-kort på mørkt bånd ===== */ .placecards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px} @media(max-width:820px){.placecards{grid-template-columns:1fr;gap:26px}} .placecard{background:var(--surface);color:var(--ink);border:var(--bd);border-radius:16px; box-shadow:0 7px 0 rgba(0,0,0,.45);padding:24px 22px;position:relative;transform:rotate(-1.2deg)} .placecard:nth-child(2){transform:rotate(.8deg)} .placecard:nth-child(3){transform:rotate(-.6deg)} .placecard::before{content:"";position:absolute;top:-11px;left:50%;width:54px;height:16px; transform:translateX(-50%) rotate(-2deg);background:rgba(var(--amber-rgb),.85); border:1.5px solid rgba(var(--ink-rgb),.35);border-radius:3px} .placecard .pc-n{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.7rem; letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep)} .placecard .pc-t{font-family:'Fraunces',serif;font-size:1.22rem;font-weight:800;line-height:1.25;margin-top:6px} .placecard p{margin:9px 0 0;font-size:.92rem;color:var(--ink-soft)} /* ===== Kontakt ===== */ .kontakt-liste{display:flex;flex-wrap:wrap;gap:13px;margin:0;padding:0;list-style:none} .kontakt-liste a{display:inline-flex;align-items:center;gap:9px;background:var(--surface); border:var(--bd);border-radius:99px;box-shadow:var(--shadow-sm);padding:12px 22px; text-decoration:none;color:var(--ink);font-weight:600; transition:transform .18s var(--eo),box-shadow .18s var(--eo)} .kontakt-liste a:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--ink)} .kontakt-liste a:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink);transition-duration:.06s} footer{border-top:2px solid var(--ink);background:var(--surface); padding:26px 0 calc(34px + env(safe-area-inset-bottom));font-size:.88rem;color:var(--muted)} footer .in{max-width:1100px;margin:0 auto;padding:0 20px;display:flex;gap:8px 20px;flex-wrap:wrap} footer a{color:var(--muted)} /* ===== ⚠️ PLACEHOLDER — må ikke gå i luften ===== Gul-rød advarselsramme, så en uskreven tekst ikke kan smutte ubemærket med op på serveren. Slet BÅDE klassen og boksen, når teksten er skrevet. */ .udfyld{border:2px dashed #b8432a;background:#fdf0e8;color:var(--ink);border-radius:14px; padding:17px 19px;margin:20px 0 0;max-width:56ch} .udfyld::before{content:"⚠️ SKAL SKRIVES FÆRDIG — Nicolai udfylder";display:block; font-family:'Space Grotesk',sans-serif;font-size:.68rem;font-weight:700; letter-spacing:.13em;text-transform:uppercase;color:#b8432a;margin-bottom:9px} .udfyld p{margin:0 0 9px;font-size:.95rem} .udfyld p:last-child{margin:0} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} /* ⚠️⚠️ `animation-iteration-count:1` ER PÅKRÆVET, ikke en detalje. Med kun `animation-duration:.01ms` ville en LØKKE (`infinite`) køre tusindvis af gange i sekundet — altså flimmer, for præcis de brugere reglen skal beskytte. Med ét gennemløb lander hver animation i stedet på sit sidste keyframe og bliver stående. ⚠️ Derfor SKAL sidste keyframe være en komplet, læsbar tilstand. Alle mockup-animationer er skrevet sådan: teksten er skrevet færdig, alle tre flueben er sat, barerne er fyldt. Skriver du en ny løkke, så tjek at 100 % ser rigtigt ud helt uden bevægelse. */ *{transition-duration:.01ms!important;animation-duration:.01ms!important; animation-iteration-count:1!important} } /* ========================================================================== CASE-SIDER (flamingobingo.html) Samme designsprog som forsiden — farvebånd, sticker-kort, samme fonte — men med plads til at folde ét projekt ud. Forsiden bliver ved med at være en hub, der kan skimmes; casen er dét, man klikker sig ind i. ⚠️ Klasserne her er DELT af alle fremtidige cases. Skal stopdans have en, skal den bruge de samme — ellers begynder to case-sider at se forskellige ud, og så er det ikke et designsprog længere. ========================================================================== */ .case-hero{padding:44px 0 56px} /* Brødkrummen er ikke pynt: en case nås både fra forsiden og (senere) fra Google, og så skal man kunne se hvor man er landet. */ .krumme{font-family:'Space Grotesk',sans-serif;font-size:.74rem;font-weight:600; letter-spacing:.04em;color:var(--muted);margin:0 0 26px} .krumme a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)} .krumme a:hover{color:var(--ink)} .case-hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);max-width:17ch;margin:0} /* ⚠️ Samme håndtegnede bue som forsidens h1. Reglen dér er scopet til `.hero h1 em` og rammer IKKE her — uden denne stod fremhævningen bare i kursiv, altså et helt andet greb end resten af sitet. */ .case-hero h1 em{font-style:normal;color:var(--brand);position:relative;white-space:nowrap} .case-hero h1 em::after{content:"";position:absolute;left:-.04em;right:-.04em;bottom:-.10em; height:.34em;border-bottom:4px solid var(--accent); border-radius:0 0 60% 40%/0 0 100% 100%} .case-hero .hero-why{max-width:52ch} .case-fakta{display:flex;flex-wrap:wrap;gap:14px 40px;margin:40px 0 0;padding:26px 0 0; list-style:none;border-top:1px dashed var(--line)} .case-fakta li{font-family:'Space Grotesk',sans-serif;font-size:.68rem;letter-spacing:.13em; text-transform:uppercase;color:var(--muted);line-height:1.5} .case-fakta b{display:block;font-family:'Fraunces',serif;font-weight:900;font-size:1.6rem; letter-spacing:0;text-transform:none;color:var(--ink)} /* Billeder. ⚠️ `width`/`height` står i markup'en og SKAL blive der: uden dem hopper siden, når billedet lander (layout shift), og det er netop den slags en case bliver bedømt på. `aspect-ratio:auto` lader dem styre højden. */ .case-fig{margin:0 auto 8px;padding-top:14px;padding-bottom:34px} .case-fig img{display:block;width:100%;height:auto;border:var(--bd); border-radius:16px;box-shadow:var(--shadow)} .case-fig figcaption{margin:16px 2px 0;font-size:.9rem;color:var(--muted);max-width:62ch} /* Tre trin. Tallet kommer fra en CSS-counter, så rækkefølgen ikke kan komme til at stå forkert i markup'en. */ .trin{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0;padding:0; list-style:none;counter-reset:trin} @media(max-width:820px){.trin{grid-template-columns:1fr}} .trin li{counter-increment:trin;background:var(--surface);border:var(--bd); border-radius:16px;box-shadow:var(--shadow-sm);padding:22px 22px 20px; transition:transform .18s var(--eo),box-shadow .18s var(--eo)} .trin li:hover{transform:translateY(-3px);box-shadow:0 6px 0 var(--ink)} .trin li::before{content:counter(trin);display:grid;place-items:center; width:34px;height:34px;border-radius:50%;background:var(--accent); color:var(--paa-accent);border:var(--bd);box-shadow:0 3px 0 var(--ink); font-family:'Fraunces',serif;font-weight:900;font-size:1rem; margin-bottom:14px} .trin b{display:block;font-family:'Fraunces',serif;font-weight:800;font-size:1.16rem; margin-bottom:7px} .trin span{font-size:.95rem;color:var(--ink-soft);line-height:1.55} /* Fire valg, på det mørke bånd. Lyse kort, så de læses som noter på en tavle. */ .valg{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} /* ⚠️ Ligger .valg inde i .om-grid's smalle kolonne, bliver to spalter til to meget smalle kort med orddeling i hver linje. Ét spor dér. */ .om-grid .valg{grid-template-columns:1fr} @media(max-width:760px){.valg{grid-template-columns:1fr}} .valg-kort{background:var(--surface);color:var(--ink);border:var(--bd); border-radius:16px;box-shadow:0 7px 0 rgba(0,0,0,.45);padding:24px 22px 22px} .valg-kort b{display:block;font-family:'Fraunces',serif;font-weight:800;font-size:1.14rem; line-height:1.3;margin-bottom:9px} .valg-kort p{font-size:.95rem;color:var(--ink-soft);line-height:1.6} .valg-kort em{font-style:italic;color:var(--ink)} .rolle-liste{margin:0;padding:0;list-style:none;display:grid;gap:9px;align-content:start} .rolle-liste li{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.92rem; background:var(--surface);border:var(--bd);border-radius:99px; box-shadow:var(--shadow-sm);padding:10px 18px} .case-slut .hero-ctas{margin-top:28px} /* ⚠️ Knappen på ferskenbåndet skal være MØRK, ikke brand-blå: --brand på --amber giver for lav kontrast mellem de to flader, og knappen forsvinder i båndet i stedet for at være det, man klikker på. */ .case-slut .btn-ghost{background:var(--surface)} /* ===== Case-mockups ==================================================== Tre skærmbilleder af flowet, bygget i CSS frem for hentet som PNG. ⚠️⚠️ HVORFOR IKKE SKÆRMBILLEDER: vært-visningen og hub'en findes kun for et RIGTIGT spil, og et skærmbillede ville derfor kræve, at der blev oprettet spil i flamingobingos produktionsdatabase. Det er ikke en pris værd at betale for et billede. Mockups kan desuden animere, vejer ingenting, og kan ikke vise persondata. ⚠️ De er MOTIVER, ikke kopier: de låner formsproget, men deler ikke CSS med flamingobingo. En case skal vise, hvordan noget føles — den skal ikke være en anden udgave af produktet, der kan drifte fra originalen. ⚠️⚠️ HVILETILSTANDEN ER KOMPLET. Alt herunder ser rigtigt ud UDEN animation: listen har tre sange, alle tre hub-trin har flueben, baren er fyldt. Animationerne TILFØJER bevægelse. Det er ikke pedanteri — se reduced-motion-blokken nederst: der slås de fra, og et halvt tegnet mockup ville stå tilbage som en fejl. */ .mock-raekke{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media(max-width:900px){.mock-raekke{grid-template-columns:1fr;gap:26px}} .case-mock{margin:0} .mock-ramme{background:var(--ink);border:var(--bd);border-radius:16px; box-shadow:var(--shadow);padding:16px;overflow:hidden; min-height:210px;display:grid;align-content:start;gap:10px} .case-mock figcaption{margin:14px 2px 0;font-size:.93rem;color:var(--ink-soft); line-height:1.55} .case-mock figcaption b{display:block;font-family:'Fraunces',serif;font-weight:800; font-size:1.05rem;color:var(--ink);margin-bottom:3px} /* ---- 1 · byggeren ---- */ .mb-soeg{background:var(--paa-ink);border-radius:8px;padding:8px 11px; font-family:'Space Grotesk',sans-serif;font-size:.76rem;font-weight:600; color:var(--ink);display:flex;align-items:center;gap:1px} .mb-tekst{overflow:hidden;white-space:nowrap;display:inline-block; animation:mb-skriv 7s steps(7) infinite} .mb-caret{width:1.5px;height:.95em;background:var(--accent); animation:mb-blink 1s steps(1) infinite} .mb-res{display:flex;align-items:center;justify-content:space-between;gap:8px; background:rgba(255,255,255,.07);border-radius:8px;padding:8px 10px; animation:mb-ind 7s var(--eo) infinite} .mb-t{font-family:'Space Grotesk',sans-serif;font-size:.72rem;font-weight:700; color:#fff;line-height:1.35} .mb-t em{display:block;font-style:normal;font-weight:500;font-size:.66rem; color:var(--paa-ink-svag)} .mb-knap{flex:none;font-family:'Space Grotesk',sans-serif;font-size:.6rem; font-weight:700;letter-spacing:.06em;background:var(--accent); color:var(--paa-accent);border-radius:99px;padding:5px 9px;white-space:nowrap} .mb-knap::after{content:""} .mb-liste{display:grid;gap:6px} .mb-flise{font-family:'Space Grotesk',sans-serif;font-size:.66rem;font-weight:600; color:var(--paa-ink);background:rgba(255,255,255,.06);border-radius:7px; padding:6px 9px;line-height:1.3} .mb-flise em{display:block;font-style:normal;color:var(--paa-ink-svag);font-weight:500;font-size:.6rem} .mb-ny{animation:mb-pop 7s var(--eo) infinite} @keyframes mb-skriv{0%,4%{width:0}22%,100%{width:3.6em}} @keyframes mb-blink{0%,49%{opacity:1}50%,100%{opacity:0}} @keyframes mb-ind{0%,24%{opacity:0;transform:translateY(-6px)} 32%,100%{opacity:1;transform:none}} @keyframes mb-pop{0%,52%{opacity:0;transform:scale(.9)} 60%{opacity:1;transform:scale(1.04)}66%,100%{opacity:1;transform:none}} /* ---- 2 · hub'en ---- */ .mh-trin{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px; background:rgba(255,255,255,.07);border-radius:10px;padding:11px 12px} .mh-trin i{font-style:normal;display:grid;place-items:center;width:26px;height:26px; border-radius:50%;background:var(--amber);color:var(--paa-amber); font-family:'Fraunces',serif;font-weight:900;font-size:.82rem} .mh-trin b{font-family:'Space Grotesk',sans-serif;font-size:.74rem;font-weight:700;color:#fff} .mh-trin span{font-family:'Space Grotesk',sans-serif;font-size:.62rem; color:var(--paa-ink-svag)} /* Fluebenet ER hviletilstanden — cirklen skifter til grøn og et ✓ lægger sig oven på tallet. Animationen forsinker det bare, ét trin ad gangen. */ .mh-trin i::after{content:"✓";position:absolute;font-size:.8rem} .mh-trin i{position:relative;overflow:hidden} .mh-trin i::after{inset:0;display:grid;place-items:center;background:var(--cyan); color:var(--ink)} .mh-trin:nth-child(1) i::after{animation:mh-hak 6s var(--eo) infinite} .mh-trin:nth-child(2) i::after{animation:mh-hak 6s var(--eo) infinite .5s} .mh-trin:nth-child(3) i::after{animation:mh-hak 6s var(--eo) infinite 1s} @keyframes mh-hak{0%,8%{opacity:0;transform:scale(.4)} 16%{opacity:1;transform:scale(1.15)}22%,100%{opacity:1;transform:none}} /* ---- 3 · vært-afviklingen ---- */ .mv-nu{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px} .mv-cover{width:38px;height:38px;border-radius:7px;background:var(--accent); color:var(--paa-accent);display:grid;place-items:center;font-size:1rem} .mv-txt b{display:block;font-family:'Space Grotesk',sans-serif;font-size:.76rem; font-weight:700;color:#fff} .mv-txt span{font-family:'Space Grotesk',sans-serif;font-size:.64rem; color:var(--paa-ink-svag)} /* Nedtællingen ruller som en strimmel tal. ⚠️ `content` kan ikke animeres, så cifrene ligger i DOM'en og strimlen flyttes med steps(). */ .mv-ur{height:1.15em;overflow:hidden;font-family:'Fraunces',serif;font-weight:900; font-size:1.15rem;color:var(--amber);line-height:1.15;min-width:1ch; text-align:right} .mv-tal{animation:mv-tael 6s steps(5) infinite} .mv-tal i{display:block;font-style:normal;height:1.15em} .mv-bar{height:5px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden} .mv-bar span{display:block;height:100%;width:100%;border-radius:99px; background:var(--amber);animation:mv-fyld 6s linear infinite} .mv-plader{display:grid;gap:7px;margin-top:2px} .mv-plade{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px; font-family:'Space Grotesk',sans-serif;font-size:.62rem} .mv-plade b{color:#fff;font-size:.7rem} .mv-plade em{font-style:normal;color:var(--paa-ink-svag);white-space:nowrap} .mv-p{height:5px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden} .mv-p span{display:block;height:100%;width:78%;border-radius:99px;background:var(--cyan); animation:mv-vokse 6s var(--eo) infinite} .mv-p2 span{width:56%;animation-delay:.4s} @keyframes mv-tael{0%{transform:none}100%{transform:translateY(-5.75em)}} @keyframes mv-fyld{0%{width:8%}100%{width:100%}} @keyframes mv-vokse{0%,20%{transform:scaleX(.72);transform-origin:left} 40%,100%{transform:none;transform-origin:left}} /* ---- Fundet: det store tal ---- */ .fund{background:var(--surface);border:var(--bd);border-radius:16px; box-shadow:var(--shadow);padding:24px 24px 22px;align-self:start} .fund-nr{font-family:'Fraunces',serif;font-weight:900;font-size:3.4rem;line-height:1; color:var(--accent-deep);margin:0 0 10px} .fund-txt{font-size:.95rem;color:var(--ink-soft);line-height:1.6;margin:0} .fund-txt b{color:var(--ink)} .fund-fod{margin:14px 0 0;padding-top:13px;border-top:1px dashed var(--line); font-size:.88rem;color:var(--muted);line-height:1.55} .tjek-kort{background:var(--surface);border:var(--bd);border-radius:14px; box-shadow:var(--shadow-sm);padding:18px 20px 17px} .tjek-kort b{display:block;font-family:'Fraunces',serif;font-weight:800;font-size:1.02rem; margin-bottom:6px} .tjek-kort p{font-size:.9rem;color:var(--ink-soft);line-height:1.55} /* ===== To veje (musikken) ===== */ .to-veje{display:grid;grid-template-columns:1fr 1fr;gap:20px} @media(max-width:760px){.to-veje{grid-template-columns:1fr}} .vej{background:var(--surface);color:var(--ink);border:var(--bd);border-radius:16px; box-shadow:0 7px 0 rgba(0,0,0,.45);padding:24px 22px 20px} .vej-mark{display:inline-block;font-family:'Space Grotesk',sans-serif;font-weight:700; font-size:.6rem;letter-spacing:.16em;text-transform:uppercase; background:var(--paper);border:1.5px solid var(--ink);border-radius:99px; padding:4px 11px;margin:0 0 12px} .vej-frem .vej-mark{background:var(--amber);color:var(--paa-amber)} .vej b{display:block;font-family:'Fraunces',serif;font-weight:800;font-size:1.28rem; margin-bottom:9px} .vej p{font-size:.95rem;color:var(--ink-soft);line-height:1.6} .vej-liste{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px} .vej-liste li{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.68rem; letter-spacing:.05em;background:var(--paper);border:1.5px solid var(--line); border-radius:99px;padding:5px 11px} .under-noten{margin:22px 0 0;max-width:70ch;color:var(--paa-brand);font-size:.95rem; line-height:1.6} /* ===== Design-væggen ===== Et bånd af mini-plader, der glider forbi. ⚠️ Rækken er DUBLERET i markup'en og glider præcis 50 % — så er løkken sømløs, og der er ingen kant, hvor den hopper. Samme greb som flamingobingos egen tema-væg. ⚠️ Ved reduced motion står båndet stille på anden halvdel (se den globale regel: iteration-count 1). Det er stadig plader — der mangler intet. */ .vaeg{overflow:hidden;padding:6px 0 4px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .vaeg-baand{display:flex;gap:14px;width:max-content;animation:vaeg-glid 46s linear infinite} @keyframes vaeg-glid{to{transform:translateX(-50%)}} .mini{flex:none;width:132px;height:92px;border:var(--bd);border-radius:10px; box-shadow:var(--shadow-sm);background:var(--surface); display:grid;grid-template-rows:24px 1fr;overflow:hidden} /* Hovedbåndet er pladens farve; gitteret er ni celler, som på en rigtig plade. */ .mini::before{content:"";display:block;background:var(--mf,var(--accent)); border-bottom:2px solid var(--ink)} .mini::after{content:"";display:grid;grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);gap:3px;padding:5px; background: linear-gradient(var(--mc,var(--line)) 0 0) 0 0/calc(33.3% - 3px) calc(33.3% - 3px) no-repeat, linear-gradient(var(--mc,var(--line)) 0 0) 50% 0/calc(33.3% - 3px) calc(33.3% - 3px) no-repeat, linear-gradient(var(--mc,var(--line)) 0 0) 100% 0/calc(33.3% - 3px) calc(33.3% - 3px) no-repeat, linear-gradient(var(--mc,var(--line)) 0 0) 0 50%/calc(33.3% - 3px) calc(33.3% - 3px) no-repeat, linear-gradient(var(--mc,var(--line)) 0 0) 50% 50%/calc(33.3% - 3px) calc(33.3% - 3px) no-repeat, linear-gradient(var(--mc,var(--line)) 0 0) 100% 50%/calc(33.3% - 3px) calc(33.3% - 3px) no-repeat, linear-gradient(var(--mc,var(--line)) 0 0) 0 100%/calc(33.3% - 3px) calc(33.3% - 3px) no-repeat, linear-gradient(var(--mc,var(--line)) 0 0) 50% 100%/calc(33.3% - 3px) calc(33.3% - 3px) no-repeat, linear-gradient(var(--mc,var(--line)) 0 0) 100% 100%/calc(33.3% - 3px) calc(33.3% - 3px) no-repeat; margin:5px} /* Otte farvestillinger — nok til at båndet ser varieret ud uden at love, at det ER alle 47. Tallet står i overskriften, hvor det kan efterprøves. */ .m1{--mf:#d9603a}.m2{--mf:#243a6b}.m3{--mf:#f0b795;--mc:#e6d6c4} .m4{--mf:#151b2b}.m5{--mf:#6d84b0}.m6{--mf:#bc5332} .m7{--mf:#f6f3ee;--mc:#ded8cf}.m8{--mf:#3f6f74} .chip-raekke{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0;list-style:none} .chip-raekke li{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.72rem; letter-spacing:.04em;background:var(--surface);border:var(--bd); border-radius:99px;box-shadow:var(--shadow-sm);padding:8px 15px} /* ===== Fundet + tjek ===== */ .fund-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:22px;align-items:start} @media(max-width:860px){.fund-grid{grid-template-columns:1fr}} /* ⚠️ `grid-template-columns` SKAL stå her. En tidligere .tjek-regel satte tre spalter, og uden en eksplicit nulstilling arvede kortene den og blev klemt sammen i en smal kolonne. Reglen er nu fjernet, men skriv aldrig en grid-regel, der kun sætter halvdelen af det, den overtager. */ .tjek{display:grid;grid-template-columns:1fr;gap:14px;margin:0} /* ===== Sikkerhed ===== */ .sik{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:900px){.sik{grid-template-columns:repeat(2,1fr)}} @media(max-width:620px){.sik{grid-template-columns:1fr}} .sik-kort{background:rgba(255,255,255,.055);border:2px solid rgba(255,255,255,.16); border-radius:14px;padding:20px 19px 18px} .sik-mark{display:inline-block;font-family:'Space Grotesk',sans-serif;font-weight:700; font-size:.6rem;letter-spacing:.14em;text-transform:uppercase; color:var(--paa-amber);background:var(--amber);border-radius:99px; padding:4px 10px;margin-bottom:11px} .sik-kort b{display:block;font-family:'Fraunces',serif;font-weight:800;font-size:1.06rem; color:#fff;line-height:1.3;margin-bottom:7px} .sik-kort p{font-size:.92rem;color:var(--paa-ink);line-height:1.6;opacity:.92} /* ========================================================================== CV-siden (cv.html) Bevidst roligere end forsiden: ingen farvebånd, ét spor, meget luft. Et CV skal kunne skimmes på tyve sekunder og printes uden at brække. ========================================================================== */ .cv-head{padding:56px 0 40px} .cv-head h1{font-family:'Fraunces',serif;font-weight:900; font-size:clamp(2.1rem,5vw,3.1rem);line-height:1.05;letter-spacing:-.02em} .cv-head .sub{color:var(--ink-soft);margin:16px 0 0;max-width:54ch;font-size:1.05rem} .cv-blok{padding:0 0 52px} .cv-blok h2{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(1.4rem,3vw,1.9rem); margin:0 0 22px;padding-bottom:12px;border-bottom:2px solid var(--ink)} /* Tidslinje: årstallet i sin egen kolonne, så øjet kan løbe ned ad den. */ .tl{list-style:none;margin:0;padding:0;display:grid;gap:26px} .tl li{display:grid;grid-template-columns:112px 1fr;gap:22px;align-items:start} @media(max-width:600px){.tl li{grid-template-columns:1fr;gap:5px}} .tl .aar{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.84rem; letter-spacing:.06em;color:var(--brand-deep);padding-top:4px;white-space:nowrap} .tl h3{font-family:'Fraunces',serif;font-weight:800;font-size:1.16rem;line-height:1.3} .tl .sted{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.9rem; color:var(--muted);margin-top:3px} .tl p{margin:9px 0 0;color:var(--ink-soft);font-size:.97rem;max-width:62ch} /* Værktøjer: chips, grupperet. Samme form som pack-chips i flamingobingo. */ .vt-gruppe{margin:0 0 20px} .vt-gruppe h3{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.74rem; letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 11px} .chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0} .chips li{border:1.5px solid var(--ink);background:var(--surface);border-radius:99px; padding:7px 15px;font-size:.88rem;font-weight:600; font-family:'Space Grotesk',sans-serif;box-shadow:0 2px 0 var(--ink)} /* Print: farvebånd, topbar og knapper væk — papir er ikke en skærm. */ @media print{ body::after,.fj-top,.cv-print-vaek{display:none!important} body{background:#fff;color:#000} .cv-blok{padding-bottom:26px;break-inside:avoid} .tl li{break-inside:avoid} .chips li{box-shadow:none} a{color:#000;text-decoration:none} }