/* ════════════════════════════════════════════════════════════ VIVID MEMOIR — designsystem Tre typografiske roller: Bodoni Moda display. Ægte didone, høj kontrast. Spectral brødtekst. Elegant lavkontrast-serif til skærm. Instrument Sans kun etiketter. Aldrig løbende tekst. Tre fladetoner giver sektionsrytmen, så man kan se hvor én sektion slutter og den næste begynder: --ink sidens grundflade --band hver anden sektion, knap synlig men nok --card kort, altid et trin lysere end fladen de står på ════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════ PALET — lys flade (standard fra 0.15.0) ------------------------------------------------------------ Fladen beholder det grønne anslag fra den oprindelige mørke palet. Det er dét, der gør den til Vivid Memoirs og ikke til enhver lys bryllupsside. Brandguldet #DBAE5B kan ikke bære tekst på lys flade (1,8:1). Derfor to roller for det samme metal: --gold / --gold-deep mørk bronze til tekst og rammer --gold-fill brandguldet som FYLD: knaphover, markering, prikkerne i stedsbåndet --on-gold tekst oven på --gold-fill Målt kontrast (WCAG 2.1 AA): --bone #1A1E17 14,9:1 mod fladen krav 4,5 OK --bone-dim #5C6155 5,6:1 / 5,2:1 på bånd krav 4,5 OK --gold #7D5F1F 5,3:1 / 4,8:1 på bånd krav 4,5 OK --gold-deep #6B5119 6,6:1 krav 4,5 OK --line-ctrl .72 3,2:1 mod kortet krav 3 OK --warn #A6431F 5,8:1 mod kortet krav 4,5 OK --on-gold #221B08 6,7:1 mod --gold-fill krav 4,5 OK Den mørke palet lever videre i lightboxen (.viewer), hvor billederne skal ses i et bevidst mørkt rum. Se "Lightbox". ════════════════════════════════════════════════════════════ */ :root{ --ink:#F3F1E9; --band:#EAE7DC; --card:#FBFAF6; --bone:#1A1E17; --bone-dim:#5C6155; --gold:#7D5F1F; --gold-deep:#6B5119; --gold-fill:#C99B3F; --on-gold:#221B08; /* Logoets eget guld. Kun som hover og tryk på den fyldte knap: et trin lysere end --gold-fill, aldrig mørkere. 8,3:1 mod --on-gold. */ --gold-fill-hi:#DBAE5B; --hair:rgba(var(--gold-rgb),.22); /* Rammer på betjeningselementer skal have 3:1 mod fladen (WCAG 1.4.11). På lys flade kræver det MERE opacitet end på mørk: .72 giver 3,2:1. */ --line-ctrl:rgba(var(--gold-rgb),.72); --warn:#A6431F; /* Samme farver som RGB-tripler, så gennemsigtige lag kan bygges af tokens frem for af hårdkodede tal. */ --ink-rgb:243,241,233; --gold-rgb:125,95,31; --bone-dim-rgb:92,97,85; --warn-rgb:166,67,31; /* Feltet ligger ét trin fra kortet, og "et trin" er mørkere her, så fyldet bygges af tekstfarven. */ /* Hvide felter (0.23.0): fyldet er væk, rammen bærer feltet alene. Den grå flade oven på det hvide kort gav en kasse i en kasse. */ --field-fill:transparent; --field-fill-focus:rgba(var(--bone-dim-rgb),.15); --placeholder:var(--bone-dim); /* Korn ligger kun på fladerne (body, .band), aldrig oven på fotos. Opaciteten er bagt ind i SVG'en, fordi et baggrundsbillede ikke har sin egen opacity. .022 — kornet ligner snavs på lys flade længe før det gør på mørk. */ --grain-img: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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.022'/%3E%3C/svg%3E"); --display:"Bodoni Moda",Didot,"Times New Roman",serif; --body:"Spectral",Georgia,"Times New Roman",serif; --util:"Instrument Sans","Helvetica Neue",system-ui,sans-serif; /* Spatiering til versaler i Instrument Sans (0.22.0). Før var der seks forskellige værdier (.14–.26em) på etiketter i samme størrelse. */ --ls-label:.2em; --ls-btn:.16em; --d1:clamp(40px,8.2vw,94px); --d2:clamp(28px,4.2vw,52px); --d3:clamp(21px,2.3vw,29px); --fs-body:17px; /* Småtekst (1.1.2): systemets mindste grad, til noter der skal være der uden at tage opmærksomhed, fx leverandørerne i gallerierne. Aldrig mindre end dette. */ --fs-xs:11px; --pad:20px; --sec:72px; --maxw:1240px; --slow:cubic-bezier(.16,.72,.24,1); } @media(min-width:480px){:root{--pad:24px;--sec:88px}} @media(min-width:760px){:root{--pad:48px;--sec:120px;--fs-body:18px}} @media(min-width:1180px){:root{--pad:72px;--sec:140px}} *{margin:0;padding:0;box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden} body{ background:var(--ink) var(--grain-img);color:var(--bone); font-family:var(--body);font-size:var(--fs-body);font-weight:300; line-height:1.78;letter-spacing:.005em; -webkit-font-smoothing:antialiased;overflow-x:hidden; } /* clip frem for hidden, hvor det understøttes (0.22.0). overflow-x:hidden gør body til en rulleflade, der aldrig ruller, og så kan position:sticky ikke klæbe til noget. clip klipper det samme uden at lave en rulleflade. Ældre browsere beholder hidden ovenfor. */ @supports (overflow:clip){html,body{overflow-x:clip}} body.menu-open,body.viewer-open{overflow:hidden} img{display:block;max-width:100%;height:auto} /* Billedbeskyttelse (0.52.0): ingen "Gem i Fotos"-menu ved langt tryk på iOS, ingen markering og intet træk ud på skrivebordet. Højreklik stoppes i main.js. Det er en bremse, ikke en lås: skærmbilleder og udviklerværktøjer virker stadig. Linkene om billederne (galleriets forsider) får samme regel, ellers viser iOS stadig en forhåndsvisning med "Gem". */ img,.cover{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none} /* For sig selv: en browser uden :has() dropper hele reglen, den står i */ a:has(> img){-webkit-touch-callout:none;-webkit-user-select:none;user-select:none} img{-webkit-user-drag:none} /* 0.53.0: billederne tager ikke imod tryk og klik. Et langt tryk lander så på kortet eller sektionen bagved, og Safari har intet billede at tilbyde "Gem i Fotos" eller "Kopier emne" for. Klik virker stadig, fordi de lytter på forældrene (galleriets knapper, buen, lightboxen). */ img{pointer-events:none} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ul,ol{list-style:none} ::selection{background:var(--gold-fill);color:var(--on-gold)} /* 2px, ikke 1px — et hairline-fokusmærke er svært at se på mørk flade */ :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px} /* Skjult for øjet, læst af skærmlæsere. IKKE position:absolute. En absolut .vh uden positioneret forælder forankres til den initiale containing block, og dens nowrap-indhold (fx "5 ud af 5 stjerner") udvider så mobilbrowserens LAYOUT-VIEWPORT: Safari og Chrome på telefon zoomer ud, så siden bliver bredere end skærmen og kan panoreres sidelæns — selv med overflow-x:hidden, fordi viewporten selv er blevet bred. Som inline-block i normalt flow er boksen 1×1px og kan ikke påvirke noget. */ .vh{display:inline-block;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap;vertical-align:baseline} /* Skjules med clip frem for left:-9999px — sidstnævnte gør dokumentet 10.000px bredt og kan panoreres på touch trods overflow-x:hidden. */ .skip{position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap;left:0;top:0} .skip:focus{width:auto;height:auto;overflow:visible;clip-path:none; left:var(--pad);top:12px;z-index:70;background:var(--gold);color:var(--ink); min-height:44px;display:flex;align-items:center; padding:12px 18px;font-family:var(--util);font-size:12px} main:focus{outline:none} /* Sprog — !important, så ingen descendant-regel kan vise begge sprog */ [data-lang="da"] .en,[data-lang="en"] .da{display:none!important} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)} /* Den faste header er ~72px høj; uden dette lander ankerspring bag den */ main,section[id],.form-card{scroll-margin-top:96px} .sec{padding-block:var(--sec)} .band{background:var(--band) var(--grain-img)} /* ── Typografiske roller ── Etiketter i spatieret majuskel: line-height 1.4, ikke 1.6. Ved 1.6 blev afstanden mellem to brudte linjer for stor. */ .eye{display:block;font-family:var(--util);font-size:11px;font-weight:400; text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--gold);line-height:1.4} /* text-wrap:balance fordeler ordene jævnt over linjerne, så et enkelt ord ikke bliver hængende alene på den sidste. "Billeder, der føles som dagen / selv" bliver til "Billeder, der føles som / dagen selv". Browseren regner det ud pr. bredde, så det virker på alle skærme og begge sprog — modsat en hårdkodet  , der kun passer ét sted. Ældre browsere ignorerer den og bryder som før. */ /* 500 og fast opsz 24 (0.15.0): Bodoni Moda 400 med automatisk optisk størrelse giver hårtynde streger i store grader, og på lys flade læses overskriften som svag, selvom farvekontrasten er 14,9:1. Et lavere opsz tegner kraftigere hårlinjer. Kursiven holdes på det ægte 400-snit, der er hentet, så browseren ikke fabrikerer en falsk fed kursiv. */ .disp{font-family:var(--display);font-weight:500;letter-spacing:-.012em;line-height:1.06; font-optical-sizing:none;font-variation-settings:"opsz" 24; text-wrap:balance} h1.disp{font-size:var(--d1)} /* Mobil (0.53.0): opsz 14 i stedet for 24. På Android forsvandt de tynde streger i overskrifterne næsten helt (fx t'ets tværstreg); et lavere opsz tegner tykkere hårlinjer. Desktop beholder 24. */ @media(max-width:759px){.disp{font-variation-settings:"opsz" 14}} h2.disp{font-size:var(--d2)} h3.disp{font-size:var(--d3);line-height:1.18} .disp em{font-style:italic;font-weight:400} /* Samme snit på ALT, der sættes i Bodoni som overskrift, navn eller tal (0.16.0): menuen, trust-tallene, manifestet, FAQ-spørgsmålene, prisen, historiernes navne, formularens overskrift, forløbets cifre og undersidernes overskrifter. Før stod nogle i 400 og andre i 500. Kursiven (em) holdes på 400 overalt, ligesom i .disp. Citater og margin-noter er bevidst kursiv 400 og ikke med her. */ .drawer nav a,.manifest .lines,.story .meta b,.viewer-bar b,.faq-list summary, .price-figure,.form-head h3,.step .num,.cc-title,.local-hero h1,.spot h3,.legal h2{ font-weight:500;font-optical-sizing:none;font-variation-settings:"opsz" 24} :is(.drawer nav a,.manifest .lines,.faq-list summary,.form-head h3,.legal h2) em{font-weight:400} /* text-wrap:pretty undgår, at et enkelt ord står alene på sidste linje i afsnit og listepunkter. balance (som på overskrifterne) er for voldsom til brødtekst: den gør alle linjer lige korte. Browsere uden understøttelse bryder bare som før. */ p,li,dd,blockquote{text-wrap:pretty} /* Korte punkter (1-2 linjer) får balance. pretty lader et langt sidsteord stå alene ("… med / adgangskode"), fordi Chrome kun griber ind, når sidste linje er meget kort. Målt ved 360 og 390px. */ .price-card li,.album-feats li,.facts dd{text-wrap:balance} .prose{max-width:56ch;color:var(--bone-dim);line-height:1.85} .note{font-family:var(--display);font-style:italic;font-size:1.02em;color:var(--gold-deep);line-height:1.5} .cap{display:block;font-family:var(--util);font-size:11px;text-transform:uppercase; letter-spacing:var(--ls-label);color:var(--bone-dim);line-height:1.45} .ul{position:relative;display:inline-block} .ul::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px; background:var(--gold);transform:scaleX(0);transform-origin:left; transition:transform .5s var(--slow)} .ul:focus-visible::after{transform:scaleX(1)} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:48px;padding:15px 36px; /* Fyldt fra 0.21.0, i brandguldet (--gold-fill) med mørk tekst, som designsystemet foreskriver for fyld. Bronzen (--gold) er kun til tekst og rammer. Hover lysner til logoets guld, aldrig mørkere. */ border:1px solid var(--gold-fill);border-radius:2px;background:var(--gold-fill); font-family:var(--util);font-size:12px;font-weight:500; /* 500 og .16em (0.21.2): 400 med .2em blev spinkel på guldfladen */ text-transform:uppercase;letter-spacing:var(--ls-btn);color:var(--on-gold); /* isolation + z-index:-1 (0.28.0): fyldet og refleksen ligger OVER knappens baggrund, men UNDER teksten. Før lå de over al tekst, der ikke stod i et element — på den engelske side står knapteksten direkte i , så "Make an inquiry" forsvandt under hover-fyldet. */ position:relative;overflow:hidden;isolation:isolate; transition:color .5s var(--slow),border-color .5s var(--slow),background-color .5s var(--slow); } /* Lysrefleks (0.28.0): en skrå stribe lys glider én gang hen over knappen fra venstre hjørne, som lys på metal, mens guldet lysner en anelse. Den kører som en animation frem for en transition, så den ikke løber baglæns, når musen forlader knappen. Ved reduceret bevægelse sker kun farveskiftet (den globale regel sætter animationer til 0,01ms). */ .btn::before{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;z-index:-1;pointer-events:none; background:linear-gradient(90deg,rgba(255,250,236,0) 0%,rgba(255,250,236,.62) 50%,rgba(255,250,236,0) 100%); transform:translateX(-130%) skewX(-20deg)} @keyframes vm-shine{from{transform:translateX(-130%) skewX(-20deg)}to{transform:translateX(240%) skewX(-20deg)}} .btn:focus-visible{color:var(--on-gold);border-color:var(--gold-fill-hi); background-color:color-mix(in srgb,var(--gold-fill) 55%,var(--gold-fill-hi))} .btn:focus-visible::before{animation:vm-shine .95s cubic-bezier(.3,0,.2,1) both} .btn.sm{min-height:44px;padding:12px 22px;font-size:11px;letter-spacing:.14em} /* ════════════════════════════════════════════════════════════ HOVER — kun på enheder med rigtig pegeredskab. Uden denne indpakning bliver hover-tilstanden hængende efter et tap på touch, fordi browseren emulerer :hover indtil man rører noget andet. Værst på .btn, hvor guldudfyldningen blev stående over knappen. ════════════════════════════════════════════════════════════ */ @media(hover:hover) and (pointer:fine){ .ul:hover::after{transform:scaleX(1)} .btn:hover{color:var(--on-gold);border-color:var(--gold-fill-hi); background-color:color-mix(in srgb,var(--gold-fill) 55%,var(--gold-fill-hi))} .btn:hover::before{animation:vm-shine .95s cubic-bezier(.3,0,.2,1) both} .drawer nav a:hover{opacity:1;font-style:italic} .story:hover .cover img{transform:scale(1.03)} .faq-list summary:hover{color:var(--gold)} .foot-col a:hover,.foot-col button:hover{color:var(--bone)} .socials a:hover{border-color:var(--gold);background:rgba(var(--gold-rgb),.08)} } /* Touch får en pressed-tilstand i stedet, så et tap kvitterer med det samme */ @media(hover:none){ .btn:active{background:var(--gold-fill-hi);border-color:var(--gold-fill-hi)} .story:active .cover{opacity:.86} .opt > span:active{border-color:var(--gold)} .socials a:active,.viewer-bar button:active,.head-actions .txt:active{opacity:.6} } /* ══ TAP DELAY: fjerner browserens 300ms forsinkelse på tap ══ */ a,button,summary,label.opt,.consent,input,textarea{touch-action:manipulation} /* ════════ HEADER ════════ */ .head{position:fixed;top:0;left:0;right:0;z-index:30; display:flex;align-items:center;justify-content:space-between; gap:16px;padding:18px var(--pad)} /* Dækker helt bag logo og menu og toner først ud under dem (0.19.0). Før gik gradienten fra 95 % til 0 % over selve headeren, så teksten bag logoet kun var halvt dækket; på lys flade skinnede den tydeligt igennem. Laget rækker 18px under headeren, så udtoningen har plads. */ /* 0.26.0: udtoningen strækker sig 48px under headeren og følger en blød kurve i fem trin. Med ét trin fra 97 % til 0 % over 27px stod kanten hårdt over billederne. Logo og menu er stadig helt dækket. */ .head::before{content:"";position:absolute;inset:0 0 -48px 0;z-index:-1; background:linear-gradient(to bottom,rgba(var(--ink-rgb),.97) 0,rgba(var(--ink-rgb),.96) 48%,rgba(var(--ink-rgb),.8) 62%,rgba(var(--ink-rgb),.45) 78%,rgba(var(--ink-rgb),.14) 91%,rgba(var(--ink-rgb),0) 100%); opacity:0;transition:opacity .6s var(--slow)} .head.solid::before{opacity:1} /* Monogrammet i brandguld (0.27.0) i stedet for ordmærket i bronze. Navnet står stadig i fanens titel, heroens slogan og footeren. */ .wordmark{display:flex;align-items:center;width:auto;color:var(--gold-fill); min-height:44px;margin:-10px 0;padding:0} .wordmark svg{height:38px;width:auto;display:block} @media(max-width:759px){.wordmark svg{height:34px}} .head-actions{display:flex;align-items:center;gap:clamp(14px,2.2vw,26px)} /* Hit-område på mindst 40px, selvom teksten kun er 11px */ .head-actions .txt{font-family:var(--util);font-size:11px;text-transform:uppercase; letter-spacing:var(--ls-label);padding:12px 6px;line-height:1.4;min-height:44px; display:inline-flex;align-items:center} .lang{color:var(--gold);min-width:44px;justify-content:center} /* Nav-CTA'en dukker først op, når heroens egen CTA er scrollet forbi, og forsvinder igen, når kontaktformularen er på skærmen. Så er der aldrig to identiske opfordringer synlige samtidig. */ .head-cta{ display:none; opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none; transition:opacity .5s var(--slow),transform .5s var(--slow),visibility .5s; } @media(min-width:760px){.head-cta{display:inline-flex}} .head-cta.show{opacity:1;visibility:visible;transform:none;pointer-events:auto} /* Omrids i headeren (0.22.0). Fyldet er forbeholdt hero, formular og mobilens faste knap; en fyldt knap i toppen konkurrerede med logoet og med knapperne i sektionerne. Hover fylder med brandguldet. */ .btn.head-cta,.btn.cc-btn{background:transparent;border-color:var(--gold-deep);color:var(--gold)} /* Headerknappen (0.29.0): fyldet glider skråt ind fra venstre i samme vinkel som refleksen på de fyldte knapper. Laget er 130 % bredt, så de skrå kanter aldrig efterlader et hjørne udækket. */ .btn.head-cta::before,.btn.cc-btn::before{left:-15%;right:-15%;width:auto;background:var(--gold-fill); transform:translateX(-100%) skewX(-20deg);transition:transform .6s var(--slow);animation:none} .btn.head-cta:focus-visible,.btn.cc-btn:focus-visible{background-color:transparent} .btn.head-cta:focus-visible::before,.btn.cc-btn:focus-visible::before{transform:translateX(0) skewX(-20deg);animation:none} @media(hover:hover) and (pointer:fine){ .btn.head-cta:hover,.btn.cc-btn:hover{background-color:transparent} .btn.head-cta:hover::before,.btn.cc-btn:hover::before{transform:translateX(0) skewX(-20deg);animation:none} } .btn.head-cta:focus-visible,.btn.cc-btn:focus-visible{color:var(--on-gold);border-color:var(--gold-fill)} @media(hover:hover) and (pointer:fine){.btn.head-cta:hover,.btn.cc-btn:hover{color:var(--on-gold);border-color:var(--gold-fill)}} /* Menuen skal kunne rulles, når den er højere end skærmen — ellers er de nederste punkter (bl.a. Kontakt) uopnåelige i landskab på telefon. "safe center" centrerer normalt, men falder tilbage til start-justering, når indholdet er for højt, så toppen ikke ryger uden for scrollområdet. */ .drawer{position:fixed;inset:0;height:100dvh;z-index:40;background:var(--ink); display:grid;justify-items:center;align-content:center;align-content:safe center; overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; padding:74px var(--pad) 40px; opacity:0;visibility:hidden; /* visibility skifter FØRST ved åbning og SIDST ved lukning. Med en almindelig transition er laget stadig visibility:hidden, når scriptet kalder focus(), og så lander fokus ingen steder. */ transition:opacity .6s var(--slow),visibility 0s linear .6s} body.menu-open .drawer{opacity:1;visibility:visible; transition:opacity .6s var(--slow),visibility 0s linear 0s} .drawer nav{display:grid;gap:4px;text-align:center} .drawer nav a{font-family:var(--display);font-size:clamp(27px,min(5.6vw,5.6vh),50px); letter-spacing:-.02em;line-height:1.35;opacity:.55;padding:4px 12px; transition:opacity .45s var(--slow)} .drawer nav a:focus-visible{opacity:1;font-style:italic} .drawer .x{position:fixed;top:18px;right:var(--pad);font-family:var(--util); font-size:11px;text-transform:uppercase;letter-spacing:var(--ls-label);padding:12px} /* Kontaktlinjen ligger i flowet under menuen (1.1.0). Før stod den fast 30px fra bunden, og på en lav desktopskærm lagde den sig oven i "Spørgsmål". */ .drawer .df{margin-top:clamp(24px,5vh,56px);text-align:center;padding:0 var(--pad)} /* Under ~560px højde (telefon i landskab) er der ikke plads til display-størrelsen. Menuen skrumper, og kontaktlinjen flyder med i stedet for at ligge fast i bunden, hvor den ville overlappe. */ @media(max-height:560px){ .drawer{padding:60px var(--pad) 28px} .drawer nav a{font-size:clamp(19px,4.6vh,26px);padding:2px 12px;line-height:1.25} .drawer nav{gap:0} .drawer .df{position:static;margin-top:20px} } /* ════════ HERO ════════ */ .hero{padding-top:min(13vh,104px);text-align:center} .hero .slogan{font-family:var(--display);font-style:italic; font-size:clamp(15px,1.7vw,20px);color:var(--gold-deep);margin-bottom:16px;line-height:1.5} /* 0.21.0: heroen har kun overskrift, tekst og knap. Tal-rækken og anmeldelseslinjen er fjernet (anmeldelserne står længere nede), og pladsen er givet til luft om knappen. Overskriften er lidt mindre og tættere (1.04), så den ikke presser resten. */ /* max-width holder overskriften på to linjer. Ved 70px på en bred, lav skærm (1280×720) var der plads nok til, at den faldt sammen til én. */ .hero h1{margin:0 auto 20px;line-height:1.04;max-width:11em} .hero .prose{margin:0 auto 44px;max-width:52ch} /* Sidens signatur: en buet fotorække som en åben albumside. Rækken er ét bånd ved alle bredder. Kurven ligger fast i skærmen — billederne stiger op mod midten og synker igen ude i kanterne — og de kører igennem den med uret og gentager sig selv. Ingen padding: et bånd skal bleede helt ud til begge kanter. .arc klipper selv bunden, så de sænkede billeder forsvinder ud under kanten i stedet for at skubbe næste sektion ned. */ /* contain:paint UD OVER overflow:hidden. iOS Safari klipper ikke altid transformerede efterkommere med overflow alene — og buens billeder flyttes med translate/rotate/scale fra JS. Uden dette kan de rage ud og gøre siden panorerbar sidelæns på iPhone, selv med overflow-x:hidden på html/body. Chrome klipper korrekt, så fejlen ses kun på rigtige Apple-enheder. */ .arc-clip{overflow:hidden;contain:paint;margin-top:clamp(38px,3.8vw,56px)} .arc{ width:auto;margin:0 0 clamp(-30px,-2.6vw,-14px);padding:0; display:flex;gap:clamp(8px,1vw,14px);align-items:flex-start; overflow:hidden;contain:paint; } .arc figure{position:relative;flex:0 0 40%;aspect-ratio:3/4; overflow:hidden;border-radius:2px;background:var(--card)} .arc figure img{width:100%;height:100%;object-fit:cover} /* Træk (0.15.0). Kun når båndet kører — .can-drag sættes af scriptet. pan-y: lodrette swipes ruller stadig siden, vandrette går til båndet. */ .arc.can-drag{touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none} .arc.can-drag img{-webkit-user-drag:none;pointer-events:none} .arc.dragging{cursor:grabbing} /* Statisk bue, hvis JS ikke kører, eller brugeren har bedt om mindre bevægelse. Så står den stille i samme form. */ .arc figure:nth-child(7n+1){rotate:-8.5deg;translate:0 62px;scale:.92} .arc figure:nth-child(7n+2){rotate:-5.7deg;translate:0 28px;scale:.95} .arc figure:nth-child(7n+3){rotate:-2.8deg;translate:0 7px;scale:.98} .arc figure:nth-child(7n+4){rotate:0deg;translate:0 0;scale:1} .arc figure:nth-child(7n+5){rotate:2.8deg;translate:0 7px;scale:.98} .arc figure:nth-child(7n+6){rotate:5.7deg;translate:0 28px;scale:.95} .arc figure:nth-child(7n+7){rotate:8.5deg;translate:0 62px;scale:.92} /* Mobil: mindre sænkning og mindre bundklip — mere synligt foto. Spejler JS'ens LIFT=0.16 i den statiske fallback. */ @media(max-width:759px){ .arc-clip{margin-top:40px} .arc{margin-bottom:-8px} .arc figure:nth-child(7n+1),.arc figure:nth-child(7n+7){translate:0 38px} .arc figure:nth-child(7n+2),.arc figure:nth-child(7n+6){translate:0 17px} .arc figure:nth-child(7n+3),.arc figure:nth-child(7n+5){translate:0 4px} } @media(max-width:360px){.arc figure{flex-basis:44%}} @media(min-width:620px){.arc figure{flex-basis:30%}} /* Ingen flex-basis over 760px: dér styrer højden, se blokken nedenfor. De gamle 20%- og 17%-regler er fjernet, fordi de aldrig kunne ramme. */ /* ════════════════════════════════════════════════════════════ BUEN OVER FOLDEN (fra 760px) Fejlen: billedbredden var en procentdel af viewportens BREDDE, og højden fulgte med via aspect-ratio 3:4. Men den plads, der er tilbage til buen, er bundet til viewportens HØJDE. På en bred, lav skærm — den helt almindelige bærbare på 1850×960 — gav 17% en billedhøjde på 419px, mens der kun var 170px tilbage under trust-rækken. Resultatet var, at kun overkanten af billederne kunne ses, og forsiden åbnede med en tom flade. Jo bredere skærmen blev, jo værre blev det. På mobil var det omvendt godt, fordi 40% af 390px kun er 208px højt. Rettelsen vender afhængigheden om: heroen er præcis én skærm høj, buen får den plads, der bliver til overs, og billederne skaleres efter HØJDEN. Bredden følger så med via aspect-ratio. Dermed kan buen aldrig falde under folden, uanset skærmens format. Mobil er urørt — dér virkede det. ════════════════════════════════════════════════════════════ */ @media(min-width:760px){ .hero{ min-height:100vh; /* fallback for browsere uden svh */ min-height:100svh; display:flex;flex-direction:column; padding-bottom:0; } /* 0.21.1: teksten tager resten af heroen og centreres lodret i den. Før tog buen resten, så den voksede, hver gang der blev fjernet noget fra teksten. Nu har buen en fast højde, og frigjort plads bliver luft over og under teksten og knappen. */ .hero > .wrap{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;width:100%} /* flex:1 spiser præcis resten af skærmen. Bliver hero-teksten høj (tre linjers overskrift, engelsk tekst), skrumper buen i stedet for at skubbe sig selv ned — indtil min-height, hvor den giver op og lader heroen vokse. */ /* flex-basis:0, ikke auto. Med auto er udgangsstørrelsen indholdets egen højde — og indholdet er netop det, der skal styres. Så voksede klippet med billederne i stedet for omvendt. Med 0 er udgangspunktet ingenting, og klippet får præcis den plads, heroen har tilbage. */ .arc-clip{flex:0 0 auto;height:clamp(240px,32svh,380px); display:flex;align-items:stretch} /* IKKE height:100%. En procenthøjde skal opløses mod en forælder med definit højde, og et flex-element med flex-basis:auto er netop ikke definit — figurerne blev 1225×1500px i stedet for at følge buen. stretch giver derimod en ægte definit højde, og aspect-ratio kan så regne bredden ud fra den. Den negative bundmargin bliver samtidig bundklippet: et strakt element får højden "beholder minus egne margener", så en margin på -30px gør buen 30px højere end klippet, og midterbilledet bløder ud under kanten præcis som før. */ .arc{flex:1 1 auto;min-width:0;align-items:stretch; margin:0 0 clamp(-30px,-2.6vw,-14px)} .arc figure{flex:0 0 auto;width:auto;height:auto;min-height:0} } /* Lave skærme: heroen giver en smule efter, så buen kan ses — men kun en smule. Luften mellem elementerne ER luksussignalet, og en overskrift, der falder sammen til én linje, mister sit fald. Overskriften skal blive på to linjer, og afstandene skal stadig være rundhåndede. Buen behøver ikke at slutte præcis ved folden. Det, der betyder noget, er, hvor MEGET af den man ser: billeder, der bløder ud over underkanten, er en invitation til at scrolle. En stribe på 80px er det ikke. Gated på HØJDE alene, så en stor skærm er helt urørt. */ /* Desktop generelt: overskriften topper ved 84px (før 94). Ved 94px og tre linjers tekst var der ikke luft nok om knappen. */ @media(min-width:760px){ :root{--d1:clamp(52px,6.6vw,84px)} .arc-clip{margin-top:clamp(48px,4.4vw,68px)} } @media(min-width:760px) and (max-height:1000px){ :root{--d1:clamp(48px,6vw,76px)} .hero{padding-top:clamp(84px,11vh,112px)} .hero .slogan{margin-bottom:15px} .hero h1{margin-bottom:18px} .hero .prose{margin-bottom:42px} .arc-clip{margin-top:clamp(42px,4vw,60px)} } /* De lavere bærbare (MacBook Air på 823px, 720p-skærme) giver ét trin mere. Overskriften er stadig to linjer og stadig stor — 84px er ikke en nedgradering, det er den samme overskrift på en lavere skærm. */ @media(min-width:760px) and (max-height:880px){ :root{--d1:clamp(44px,5.6vw,70px)} .hero{padding-top:clamp(72px,9.5vh,92px)} .hero .slogan{margin-bottom:13px} .hero h1{margin-bottom:16px} .hero .prose{margin-bottom:34px} .arc-clip{margin-top:clamp(28px,2.8vw,40px);height:clamp(200px,30svh,340px)} } /* ════════ STEDER ════════ */ /* ════════ STEDER — én linje, marquee kun når den ikke kan stå der ════════ Afstanden mellem punkterne ligger som padding-right på hvert
  • frem for som gap. Så er hvert punkts kasse selvindeholdt, listens bredde er præcis to gange ét sæt, og båndet kan løkke på -50% uden at der opstår et hul ved overgangen. */ .places{border-block:1px solid var(--hair);padding:20px 0;background:var(--band); overflow:hidden;contain:paint} .places ul{ --sep:clamp(16px,3vw,34px); display:flex;align-items:center;justify-content:center; padding-inline:var(--pad); font-family:var(--util);font-size:11px;text-transform:uppercase; letter-spacing:var(--ls-label);color:var(--bone-dim);line-height:1.4;white-space:nowrap} .places li{display:flex;align-items:center;padding-right:var(--sep);flex:none} .places li::after{content:"";width:3px;height:3px;border-radius:50%; background:var(--gold-fill);flex:none;margin-left:var(--sep)} .places li:last-child{padding-right:0} .places li:last-child::after{display:none} /* Marquee-tilstand, slået til af JS når indholdet er bredere end båndet */ .places.roll ul{ justify-content:flex-start;width:max-content;padding-inline:0; animation:placesRoll var(--dur,42s) linear infinite} .places.roll li:last-child{padding-right:var(--sep)} .places.roll li:last-child::after{display:block} .places.roll.hold ul{animation-play-state:paused} @keyframes placesRoll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){ .places.roll ul{animation:none} .places.roll{overflow-x:auto;scrollbar-width:none} } /* ════════ MANIFEST ════════ */ .manifest-grid{display:grid;gap:clamp(34px,4.5vw,68px);align-items:center} @media(min-width:900px){.manifest-grid{grid-template-columns:1.08fr .92fr}} .manifest .lines{font-family:var(--display);font-size:clamp(27px,3.9vw,52px); line-height:1.18;letter-spacing:-.018em;max-width:19ch;color:var(--bone)} .manifest .lines > span{display:block} .manifest-visual{position:relative;aspect-ratio:4/5;overflow:hidden; border-radius:2px;background:var(--card)} .manifest-visual img{width:100%;height:100%;object-fit:cover} @media(max-width:899px){.manifest-visual{max-width:380px}} /* ════════ SEKTIONSHOVED ════════ */ .sec-head{margin-bottom:clamp(38px,5vw,72px)} .sec-head h2{margin-bottom:18px} /* ════════ GALLERI ════════ */ /* Coverne ligger flush med kun en fin søm imellem — de brede mellemrum læste som sorte huller i rækken. Teksten under får sin egen indrykning. */ .stories{display:grid;column-gap:4px;row-gap:44px} @media(min-width:1024px){.stories{grid-template-columns:repeat(3,1fr)}} /* Kolonne-flex, ikke block: kortene i gitteret strækkes til rækkens højde, og den ekstra plads skal lægge sig i .meta, så "Se historien" står i bund på alle tre kort — også når én billedtekst løber over to linjer. ÉT sæt regler pr. selektor. Filen havde tidligere .story og .story .meta erklæret to gange hver, hvor den sidste vandt og gjorde flex:1 og margin-top:auto til død kode. */ .story{display:flex;flex-direction:column;text-align:left;width:100%} .story .cover{display:block;flex:none;position:relative;aspect-ratio:4/5; overflow:hidden;border-radius:2px;background:var(--card)} .story .cover img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--slow)} .story .count{position:absolute;left:14px;bottom:14px;z-index:2; display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:2px; background:rgba(var(--ink-rgb),.82);backdrop-filter:blur(6px); font-family:var(--util);font-size:11px;text-transform:uppercase; letter-spacing:var(--ls-label);color:var(--bone);line-height:1.3} .story .count svg{width:12px;height:12px;flex:none} .story .meta{margin-top:16px;flex:1;display:flex;flex-direction:column;gap:6px} .story .meta b{font-family:var(--display);font-size:21px;font-weight:500;letter-spacing:-.01em;line-height:1.2} /* Lightbox */ /* Lightboxen er et bevidst mørkt rum, også efter at sitet blev lyst. Tokens sættes om lokalt, så alt indeni (tekst, fokusring, rammer, pladsholdere) automatisk følger den mørke palet. */ .viewer{ --ink:#0E110D;--ink-rgb:14,17,13;--band:#141914;--card:#1D231C; --bone:#EFEAE0;--bone-dim:#969C8F;--bone-dim-rgb:150,156,143; --gold:#DBAE5B;--gold-rgb:219,174,91;--gold-deep:#BA944D; --gold-fill:#DBAE5B;--on-gold:#0E110D; --hair:rgba(var(--gold-rgb),.15);--line-ctrl:rgba(var(--gold-rgb),.58); color:var(--bone);color-scheme:dark; position:fixed;inset:0;height:100dvh;z-index:50;background:var(--ink); opacity:0;visibility:hidden; /* Samme mønster som menuen: synlig før focus(), skjult efter fade */ transition:opacity .5s var(--slow),visibility 0s linear .5s; display:grid;grid-template-rows:auto 1fr} .viewer.open{opacity:1;visibility:visible; transition:opacity .5s var(--slow),visibility 0s linear 0s} .viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:20px; padding:16px var(--pad);border-bottom:1px solid var(--hair)} .viewer-bar b{font-family:var(--display);font-size:21px;font-weight:500;display:block;line-height:1.2} .viewer-bar > div{line-height:1.3} .viewer-bar .vsub{display:block;font-family:var(--util);font-size:11px; text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--bone-dim);line-height:1.4} .viewer-bar button{font-family:var(--util);font-size:11px;text-transform:uppercase; letter-spacing:var(--ls-label);color:var(--gold);padding:12px} .viewer-scroll{overflow-y:auto;padding:clamp(32px,5vw,68px) var(--pad) 96px;-webkit-overflow-scrolling:touch} .viewer-intro{max-width:46ch;margin:0 auto clamp(32px,4.5vw,60px);text-align:center; color:var(--bone-dim);font-style:italic} /* Leverandører (1.1.0): en stille linje under introen, når andre har været med til billederne. Etiket i guld, navnene i brødtekstens grå. */ .viewer-intro.has-credits{margin-bottom:12px} /* Nedtonet (1.1.2): småtekst og 80 % opacitet, så listen står som en note og ikke konkurrerer med introen og billederne. Spectral 400 i stedet for 300, fordi 300 bliver for tynd i 11px. */ .viewer-credits{max-width:72ch;margin:0 auto clamp(32px,4.5vw,60px); display:flex;flex-wrap:wrap;justify-content:center;column-gap:14px;row-gap:0; font-size:var(--fs-xs);font-weight:400;line-height:1.7;color:var(--bone-dim);opacity:.8} .viewer-credits[hidden]{display:none} .viewer-credits .lbl{flex-basis:100%;text-align:center;margin-bottom:2px;font-family:var(--util);font-size:var(--fs-xs); text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--gold)} /* En centreret liste med luft imellem, uden skilletegn: ved mange leverandører endte et | ellers i hver linjes slutning. Hvert punkt holdes samlet; ombrydningen sker mellem punkterne. */ .viewer-credits .cr{white-space:nowrap} .viewer-credits a{color:var(--gold);text-decoration:none} @media(hover:hover) and (pointer:fine){.viewer-credits a:hover{text-decoration:underline;text-underline-offset:3px}} .viewer-credits a:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px} /* Vandrette rækker (0.38.0) i stedet for spalter, så rækkefølgen læses som tekst: venstre mod højre, række for række. Hvert billede vokser i forhold til sit format (--r = bredde/højde), så alle billeder i en række får samme højde og intet beskæres. Målene står i data-images, så rækkerne ligger fast, før billederne er hentet. ::after holder sidste række i normal højde i stedet for at strække den ud. */ .vgrid{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;gap:4px} .vgrid::after{content:"";flex:1000 1 0} .vgrid figure{--r:1.3333;flex:var(--r) 1 calc(var(--r) * 270px); aspect-ratio:var(--r);overflow:hidden;border-radius:2px;background:var(--card); opacity:0;transition:opacity .7s var(--slow)} .vgrid figure.seen{opacity:1} .vgrid figure img{width:100%;height:100%;object-fit:cover} /* ════════ OM ════════ Portrættet er nu smallere og klæber, mens den længere tekst ruller forbi. Overskrift og tal går på tværs af begge spalter, så det ikke længere er ét billede over for én meget høj tekstspalte. */ .about{display:grid;gap:clamp(30px,4vw,52px)} .about-copy h2{margin-bottom:24px} .about-portrait{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:var(--card)} @media(max-width:899px){ .about-side{max-width:400px} .portrait-note{text-align:left} } .about-portrait img{width:100%;height:100%;object-fit:cover} .portrait-note{margin-top:14px} .about-copy .prose{margin-bottom:22px} @media(min-width:900px){ .about{grid-template-columns:.5fr 1fr;column-gap:clamp(40px,5vw,80px);align-items:start} .portrait-note{text-align:right} } .team-line{display:grid;gap:22px;margin-top:32px;padding-top:28px;border-top:1px solid var(--hair)} /* Desktop (0.42.0): teksten centreres mod personerne (billede, navn og rolle), ikke mod "HOLDET". Overskriften er taget ud af flowet og står altid 14px over billederne, også når teksten er højere end rækken. padding-top giver plads til den (28px + 16px linje + 14px). */ @media(min-width:620px){ .team-line{grid-template-columns:auto 1fr;align-items:center; column-gap:clamp(36px,4.5vw,64px);padding-top:58px} .team-line .team{display:block;position:relative} .team-h{position:absolute;left:0;bottom:calc(100% + 14px);white-space:nowrap} } /* Ingen bundmargin her (0.41.0): .prose' margin skubbede teksten 11px op, så den ikke stod lodret midt for holdet. */ .team-line .prose{margin:0} /* Holdet (0.40.0): overskriften "Holdet" og tre personer side om side, Brana først, hver med fornavn og rolle. Tre ansigter i række læses som et hold; to ukendte ansigter gjorde ikke. Rollen står i kursiv brødtekst, så "Andenfotograf" kan være der på en telefon uden at bryde. */ .team{display:grid;gap:14px;justify-items:start} .faces{display:flex;gap:16px} .faces li{display:grid;justify-items:center;gap:6px;text-align:center} .faces img{width:64px;height:64px;border-radius:50%;object-fit:cover; border:1px solid var(--hair);background:var(--card)} .faces .nm{font-family:var(--util);font-size:11px;text-transform:uppercase; letter-spacing:var(--ls-label);color:var(--bone);line-height:1.3;margin-top:4px} .faces .role{font-family:var(--body);font-style:italic;font-size:14px;color:var(--bone-dim);line-height:1.3} /* ════════ YDELSER ════════ */ .svcs{display:grid;gap:44px} @media(min-width:1024px){ .svcs{grid-template-columns:repeat(3,1fr);gap:0} /* Subgrid (0.22.0): overskrifterne deler én række, så brødteksten starter på samme linje i alle tre kolonner, også når én overskrift står på én linje og de andre på to. */ .svcs{grid-template-rows:auto auto} .svcs > article{padding-inline:clamp(22px,3.2vw,48px);border-left:1px solid var(--hair); display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0;align-content:start} .svcs > article:first-child{padding-left:0;border-left:0} .svcs > article:last-child{padding-right:0} } .svcs h3{margin-bottom:16px} .svcs p{color:var(--bone-dim)} /* ════════ FORLØB — horisontal timeline med tråd ════════ */ .steps{position:relative} .steps-list{display:grid} .thread{display:none} /* Safari/VoiceOver dropper listesemantik ved list-style:none — role="list" holder den */ .step .num{display:grid;place-items:center;width:40px;height:40px;border-radius:50%; border:1px solid var(--line-ctrl);background:var(--ink);position:relative;z-index:1; font-family:var(--display);font-size:16px;color:var(--gold);letter-spacing:.04em} .step h3{margin:18px 0 12px} .step p{color:var(--bone-dim);font-size:.95em} @media(max-width:1023px){ .step{padding:26px 0;border-top:1px solid var(--hair)} .steps-list{gap:0} .step:last-child{border-bottom:1px solid var(--hair)} .step h3{margin:14px 0 10px} } @media(min-width:1024px){ .steps-list{grid-template-columns:repeat(4,1fr);gap:clamp(22px,3vw,46px)} /* Tråden ligger bag numrene, i deres lodrette midte, og tegnes fra venstre når sektionen kommer i syne. */ .thread{display:block;position:absolute;top:20px;left:20px;right:20px;height:1px;background:var(--hair)} .thread i{display:block;height:1px;background:var(--gold); transform:scaleX(0);transform-origin:left;transition:transform 1.9s var(--slow) .25s} .steps.in .thread i{transform:scaleX(1)} .step p{max-width:34ch} } /* ════════ ANMELDELSER ════════ */ .gbadge{display:flex;align-items:center;gap:11px;font-family:var(--util); font-size:12px;color:var(--bone-dim);line-height:1.5} .gbadge b{color:var(--bone);font-weight:500} .gbadge a{color:var(--gold)} .reviews-grid{display:grid;gap:clamp(20px,2.6vw,34px)} @media(max-width:1023px){ .reviews-grid{ display:flex;column-gap:10px;row-gap:0; overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x proximity;scroll-padding-inline:var(--pad); -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-inline:calc(var(--pad) * -1); padding:0 var(--pad) 4px; } .reviews-grid::-webkit-scrollbar{display:none} .reviews-grid:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .review{flex:0 0 80%;scroll-snap-align:start} .review:last-child{scroll-snap-align:end} } @media(min-width:620px) and (max-width:1023px){.review{flex-basis:44%}} @media(min-width:1024px){.reviews-grid{grid-template-columns:repeat(3,1fr)}} .review{padding:clamp(26px,3vw,38px);border:1px solid var(--hair);border-radius:2px;background:var(--card); /* Kolonne, så navnelinjen står på samme højde i alle tre kort, selvom citaterne er forskellige i længden */ display:flex;flex-direction:column} .review blockquote{flex:1} .rev-note{margin-top:24px} .review .stars{color:var(--gold);font-size:14px;letter-spacing:.2em;display:block;margin-bottom:18px} /* Citaterne i håndskrift (0.18.0), så kortet læses som en skrevet hilsen fra parret og ikke som endnu en overskrift. Caveat er valgt, fordi den forbliver læsbar over 40 ord og har æ, ø og å. Den har en lille x-højde; 20-23px (23-27 blev for stort). Skriften hentes kun på forsiderne (da/en), hvor anmeldelserne står. */ .review blockquote{font-family:"Caveat","Segoe Print","Bradley Hand",cursive; font-weight:400;font-style:normal;font-size:clamp(20px,1.9vw,23px); line-height:1.32;letter-spacing:0;color:var(--bone);margin-bottom:24px} .review .who{display:flex;align-items:center;gap:13px;padding-top:20px;border-top:1px solid var(--hair)} .review .who > div{display:grid;gap:4px;line-height:1.4} .review .who b{font-family:var(--util);font-size:12px;font-weight:500;line-height:1.4} .review .who > div > span{display:block;font-family:var(--util);font-size:11px; text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--bone-dim);line-height:1.4} /* ════════ PRISER ════════ */ .price-card{display:grid;gap:clamp(32px,4vw,64px);padding:clamp(28px,4vw,56px); border:1px solid var(--hair);border-radius:2px;background:var(--card)} @media(min-width:860px){.price-card{grid-template-columns:1fr 1fr}} .price-figure{font-family:var(--display);font-size:clamp(38px,5.4vw,72px);font-weight:500; letter-spacing:-.025em;line-height:1;margin:14px 0 22px} .price-card ul{display:grid;gap:13px;align-content:start} /* Punkttegnet er en tankestreg i teksten (0.25.0), ikke en tegnet linje. Den står på samme grundlinje som ordene og flugter derfor af sig selv, og tekst lægges på hele pixels, så alle streger ser ens ud. Før var det en 1px-kant på top:.62em: den sad for højt og ramte brøkdele af en pixel ved 125 % skalering, så nogle streger så mørkere ud end andre. Grid holder den brudte linje på linje med teksten, ikke under stregen. */ .price-card li,.album-feats li{display:grid;grid-template-columns:auto 1fr;column-gap:14px; color:var(--bone-dim);font-size:.95em;line-height:1.7} .price-card li::before,.album-feats li::before{content:"–";color:var(--gold)} /* ════════ ALBUM ════════ */ .album-grid{display:grid;gap:clamp(36px,5vw,76px)} @media(min-width:900px){.album-grid{grid-template-columns:1fr 1fr;align-items:center}} .album-visual{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:2px;background:var(--card)} .album-visual img{width:100%;height:100%;object-fit:cover} .price-tag{position:absolute;right:16px;bottom:16px;padding:9px 15px;border-radius:2px; background:rgba(var(--ink-rgb),.84);backdrop-filter:blur(6px);color:var(--gold); font-family:var(--util);font-size:11px;text-transform:uppercase;letter-spacing:var(--ls-label);line-height:1.3} .album-copy h2{margin-bottom:22px} .album-copy .prose{margin-bottom:22px} /* Samme punkter som i prisboksen (0.16.0). Før stod de i Instrument Sans 12px, som er etiketskriften — og de er løbende tekst. */ .album-feats{display:grid;gap:13px;margin:24px 0} /* ════════ FAQ ════════ */ .faq-list{max-width:900px} .faq-list details{border-top:1px solid var(--hair)} .faq-list details:last-of-type{border-bottom:1px solid var(--hair)} .faq-list summary{display:flex;align-items:baseline;justify-content:space-between;gap:16px; padding:24px 0;cursor:pointer;list-style:none; font-family:var(--display);font-size:clamp(18px,2vw,25px);letter-spacing:-.01em;line-height:1.3; transition:color .4s var(--slow)} .faq-list summary::-webkit-details-marker{display:none} .faq-list .plus{flex:none;color:var(--gold);font-family:var(--util);font-size:18px; transition:transform .5s var(--slow);line-height:1} .faq-list details[open] .plus{transform:rotate(45deg)} .faq-list .a{padding:0 0 28px;color:var(--bone-dim);max-width:62ch} /* ════════ KONTAKT ════════ */ .contact-grid{display:grid;gap:clamp(42px,5vw,84px)} @media(min-width:960px){.contact-grid{grid-template-columns:2fr 3fr;align-items:start}} /* Venstre kolonne følger med, mens formularen ruller forbi (0.22.0). Før stod der et stort tomt felt ved siden af den lange formular. Kun på skærme, der er høje nok til at vise hele kolonnen. */ @media(min-width:960px) and (min-height:640px){.contact-grid > :first-child{position:sticky;top:120px}} .contact h2{margin-bottom:22px} .direct{display:grid;gap:14px;margin-top:30px;padding-top:26px;border-top:1px solid var(--hair)} .direct > span{display:flex;align-items:center;gap:13px;font-family:var(--util);font-size:13px;line-height:1.5} /* Mail og Instagram er selvstændige handlinger, ikke links inde i en sætning, så WCAG 2.5.8's inline-undtagelse gælder ikke: de skal have fuldt trykmål. Negativ margin holder den visuelle rytme uændret. */ .direct > span a{display:inline-flex;align-items:center;min-height:44px;margin:-11px 0} .direct svg{width:16px;height:16px;flex:none;color:var(--gold)} .reply-note{margin-top:24px} .form-card{padding:clamp(24px,3.4vw,44px);border:1px solid var(--hair);border-radius:2px;background:var(--card)} .form-head{margin-bottom:30px;padding-bottom:22px;border-bottom:1px solid var(--hair)} .form-head h3{font-family:var(--display);font-size:var(--d3);font-weight:500; letter-spacing:-.01em;margin-bottom:8px;line-height:1.2} /* KRITISK, samme fælde som .field-err: display:grid overtrumfer browserens [hidden]-regel, fordi forfatter-CSS altid vinder over UA-styles. Uden denne linje bliver formularen stående og ligge oven i kvitteringen, når JS sætter form.hidden = true. */ .inq[hidden]{display:none} .inq{display:grid;gap:22px} .two{display:grid;gap:22px} @media(min-width:620px){.two{grid-template-columns:1fr 1fr}} .field{display:grid;gap:10px;min-width:0} @supports (grid-template-rows:subgrid){ @media(min-width:620px){ .two{grid-template-rows:auto auto;row-gap:10px} /* row-gap 10px (1.1.1): med gap:0 stod felterne i to-spaltede rækker helt op ad etiketten, mens enkeltfelterne havde 10px */ .two > .field{grid-row:span 2;grid-template-rows:subgrid;gap:0;row-gap:10px} } } .field label,.field legend{font-family:var(--util);font-size:11px;text-transform:uppercase; letter-spacing:var(--ls-label);color:var(--bone-dim);line-height:1.4} /* Stjernen sidder tæt på etiketten (1.1.0); før stod den med et mellemrum plus etikettens spatiering og så løsrevet ud. */ .field .req{color:var(--gold);letter-spacing:0;margin-left:.15em} /* Ramme hele vejen rundt i stedet for kun understregning */ .field input,.field textarea{ width:100%;background:var(--field-fill); border:1px solid var(--line-ctrl);border-radius:2px; padding:13px 14px;color:var(--bone); font-family:var(--body);font-size:16px;font-weight:300;line-height:1.5; font-variant-numeric:lining-nums tabular-nums; transition:border-color .4s var(--slow),background .4s var(--slow)} .field input:focus,.field textarea:focus{outline:none;border-color:var(--gold);background:var(--field-fill-focus)} .field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--gold);outline-offset:1px} /* .85 opacitet, ikke .6 — ved .6 var kontrasten 3,1:1 og faldt under 4,5:1 */ .field input::placeholder,.field textarea::placeholder{color:var(--placeholder)} .field textarea{min-height:120px;resize:vertical;line-height:1.7} fieldset{border:0} .opts{display:flex;flex-wrap:wrap;gap:9px;margin-top:10px} .opt{position:relative} .opt input{position:absolute;opacity:0;width:1px;height:1px} .opt > span{display:flex;align-items:center;min-height:44px;padding:11px 16px; border:1px solid var(--line-ctrl);border-radius:2px; font-family:var(--util);font-size:12px;color:var(--bone-dim);cursor:pointer;line-height:1.4; transition:border-color .4s var(--slow),color .4s var(--slow),background .4s var(--slow)} .opt input:checked + span{border-color:var(--gold);color:var(--gold);background:rgba(var(--gold-rgb),.09)} .opt input:focus-visible + span{outline:2px solid var(--gold);outline-offset:3px} .consent{display:flex;gap:13px;align-items:flex-start;font-size:.92em;color:var(--bone-dim); cursor:pointer;line-height:1.6} .consent input{margin-top:.4em;width:17px;height:17px;flex:none;accent-color:var(--gold)} .inq .btn{justify-self:start;margin-top:4px} /* Fuldbredde-submit på mobil: én tydelig handling, nemt tommelfingermål */ @media(max-width:759px){.inq .btn{justify-self:stretch;width:100%}} /* Inline-fejl under krævede felter. Ikon plus tekst, aldrig kun farve. .ctl holder input + fejl i ÉN subgrid-række, så .two-felterne stadig deler label- og inputrækken. */ .ctl{min-width:0;display:grid;gap:7px;align-content:start} /* KRITISK: [hidden] taber ellers til display:flex — forfatter-CSS vinder over browserens [hidden]-regel, og de "skjulte" fejl renderes som tomme linjer, der skubber layoutet og strækker nabofeltets input. */ .field-err[hidden]{display:none} .field-err{display:flex;gap:8px;align-items:flex-start;margin:0; font-family:var(--body);font-weight:400;font-size:14px;line-height:1.5;color:var(--warn)} .field-err .ico{flex:none;width:15px;height:15px;margin-top:2px} .field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--warn)} /* Klasse, ikke aria-invalid: .opts er en
    og altså ikke en formular- kontrol, så aria-invalid hørte ikke hjemme dér. Attributten sidder nu på selve afkrydsningsfelterne, hvor skærmlæsere rent faktisk læser den, og klassen bærer det visuelle. */ .opts.invalid .opt input:not(:checked)+span{border-color:rgba(var(--warn-rgb),.75)} /* Fejlen under samtykket skal ligge tæt på boksen, ikke et helt gap væk */ .consent + .field-err{margin-top:-14px} .form-msg{display:none;padding:16px 18px;border:1px solid var(--gold);border-left-width:3px; border-radius:2px;background:rgba(var(--gold-rgb),.07);color:var(--bone);font-size:.94em} .form-msg.show{display:flex;gap:12px;align-items:flex-start} .form-msg b{color:var(--gold);font-weight:400;font-family:var(--display);font-style:italic} .form-msg .ico{flex:none;width:18px;height:18px;margin-top:3px;color:var(--gold)} .form-msg.error{border-color:var(--warn)} .form-msg.error b,.form-msg.error .ico{color:var(--warn)} /* ════════════════════════════════════════════════════════════ KVITTERING — træder i stedet for hele formularen Kortet måler sin egen højde før og efter skiftet og glider imellem de to, så der ikke opstår et spring, når felterne forsvinder. JS sætter --h; CSS gør resten. ════════════════════════════════════════════════════════════ */ .form-card{position:relative;transition:height .55s var(--slow)} .form-card.swapping{overflow:hidden} /* Kortet har også .rv, og ".rv.in" længere nede sætter sin egen transition (opacity/transform) med højere vægt — så gled højden aldrig, den sprang. Tre klasser vinder over to, og kun mens skiftet står på. (0.47.1) */ .form-card.in.swapping,.form-card.swapping{transition:height .55s var(--slow);transition-delay:0s} /* Formularen fader ud på stedet, så kortet ikke kollapser, mens den gør det */ .form-card.leaving .form-head, .form-card.leaving .inq{opacity:0;transform:translateY(-8px); transition:opacity .34s var(--slow),transform .34s var(--slow);pointer-events:none} .form-done{text-align:center;padding:clamp(18px,3vw,34px) 0 clamp(6px,1.4vw,14px)} .form-done:focus{outline:none} .form-done[hidden]{display:none} .form-done h3{font-size:var(--d2);margin:22px 0 14px;color:var(--bone)} .form-done .prose{margin:0 auto;max-width:34ch} .form-done-note{margin-top:22px;color:var(--bone-dim)} /* Du eller I (0.53.0): uden partnerens mail skrives der til én person. main.js sætter .sg på kvitteringen. */ .form-done:not(.sg) .n-sg,.form-done.sg .n-pl{display:none} /* Ringen tegnes rundt, derefter skrives fluebenet. To streger, ét ophold imellem — nok til at det læses som en bevægelse og ikke som et ikon, der bare dukker op. */ .form-done-mark{display:inline-block;width:44px;height:44px;color:var(--gold)} .form-done-mark svg{width:100%;height:100%;display:block;overflow:visible} .form-done-mark .ring{stroke-dasharray:126;stroke-dashoffset:126; transform-origin:50% 50%;rotate:-90deg} .form-done-mark .tick{stroke-dasharray:26;stroke-dashoffset:26;stroke-linecap:round;stroke-linejoin:round} .form-done.play .ring{animation:vm-ring .7s var(--slow) forwards} .form-done.play .tick{animation:vm-tick .38s var(--slow) .52s forwards} @keyframes vm-ring{to{stroke-dashoffset:0}} @keyframes vm-tick{to{stroke-dashoffset:0}} /* Uden bevægelse: intet spring, ingen tegning — bare det færdige billede */ @media(prefers-reduced-motion:reduce){ .form-card{transition:none} .form-card.leaving .form-head,.form-card.leaving .inq{transition:none} .form-done-mark .ring,.form-done-mark .tick{stroke-dashoffset:0;animation:none} } /* ════════ FOOTER ════════ */ .foot{padding:clamp(48px,6vw,80px) var(--pad) 42px;border-top:1px solid var(--hair)} /* To blokke, ikke tre: identitet til venstre (logo, bylinje, ikoner), navigation til højre i to kolonner. Før lå logo, én lang linkliste og ikonerne som tre søjler med 1fr på den første — al slæk samlede sig under logoet og efterlod et bredt tomrum midt i footeren. */ .foot-grid{max-width:var(--maxw);margin:0 auto;display:grid;gap:46px} /* To lige halvdele, ikke 1fr + auto. Med auto klumpede linkene sig helt ude til højre, og hele slækken blev til ét bredt tomrum midt i footeren — præcis det, der gjorde den gamle trespaltede udgave utidig. */ @media(min-width:820px){ .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,5vw,80px);align-items:start} } .fl .socials{margin-top:28px} /* Linkkolonnerne: Områder og Praktisk. Den gamle liste blandede fem stedslinks, et sprogskift og to juridiske links i én søjle på otte punkter — tre forskellige slags i samme kolonne. */ .foot-links{display:grid;gap:34px} @media(min-width:440px){ .foot-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px)} } .foot-col{display:grid;gap:4px;align-content:start} /* Fuldt logo: monogram + ordmærke, ikke kun monogrammet */ /* Logoet står i brandguldet (0.26.0), ikke i tekstbronzen. Logoer er undtaget fra WCAG's kontrastkrav, så guldet må bruges som farve her. */ .foot-logo{display:block;width:clamp(112px,13vw,146px);color:var(--gold-fill);margin-bottom:22px} .foot-logo svg{width:100%;height:auto;display:block} .fl p{font-family:var(--util);font-size:11px;text-transform:uppercase; letter-spacing:var(--ls-label);color:var(--bone-dim);line-height:1.7} .foot-col .h{font-family:var(--util);font-size:11px;text-transform:uppercase; letter-spacing:var(--ls-label);color:var(--gold);margin-bottom:8px;line-height:1.4} .foot-col a,.foot-col button{font-family:var(--util);font-size:12px;color:var(--bone-dim); text-align:left;padding:11px 0;line-height:1.4;transition:color .4s var(--slow); min-height:44px;display:flex;align-items:center} /* Med mus (0.22.0): 44px trykmål gav 48px mellem hvert link og så løst ud på desktop. 32px er stadig over WCAG 2.5.8s minimum på 24px. Touch beholder 44px. */ @media(pointer:fine){.foot-col a,.foot-col button{min-height:32px;padding:6px 0}} .socials{display:flex;gap:14px} .socials a{width:44px;height:44px;border:1px solid var(--line-ctrl);border-radius:50%; display:grid;place-items:center;color:var(--gold); transition:border-color .4s var(--slow),background .4s var(--slow)} .socials svg{width:17px;height:17px} /* ════════ STICKY CTA (mobil) ════════ */ .sticky{position:fixed;left:0;right:0;bottom:0;z-index:20; padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom)); background:linear-gradient(to top,rgba(var(--ink-rgb),.97),rgba(var(--ink-rgb),.90)); transform:translateY(115%);visibility:hidden; transition:transform .6s var(--slow),visibility .6s} /* Udtoningen ligger i en fane over selve baren og følger dens transform. pointer-events:none, så den ikke stjæler tryk fra indholdet bagved. Flere stop = eased kurve i stedet for en hård kant. 20px fra 0.53.0; 48px dækkede for meget af indholdet over knappen. */ .sticky::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:20px; pointer-events:none; background:linear-gradient(to top, rgba(var(--ink-rgb),.90) 0%, rgba(var(--ink-rgb),.78) 22%, rgba(var(--ink-rgb),.58) 44%, rgba(var(--ink-rgb),.36) 64%, rgba(var(--ink-rgb),.18) 81%, rgba(var(--ink-rgb),.07) 92%, transparent 100%)} /* visibility, ikke kun transform — ellers kan man tabbe til en knap, der ligger uden for skærmen */ .sticky.show{transform:none;visibility:visible} /* Lavere bar (0.22.0): 44px knap og 10px luft, før 48 og 12. */ .sticky .btn{width:100%;min-height:44px;padding-block:11px} @media(min-width:760px){.sticky{display:none}} /* ════════ MOTION ════════ */ .stage{opacity:0;transform:translateY(16px)} body.ready .stage{opacity:1;transform:none; transition:opacity .9s var(--slow),transform .9s var(--slow)} body.ready .s1{transition-delay:.10s} body.ready .s2{transition-delay:.22s} body.ready .s3{transition-delay:.34s} body.ready .s4{transition-delay:.46s} body.ready .s6{transition-delay:.74s} .arc-clip.stage{transform:translateY(52px)} .rv{opacity:0;transform:translateY(20px)} .rv.in{opacity:1;transform:none;transition:opacity .8s var(--slow),transform .8s var(--slow)} .rv.d1.in{transition-delay:.1s} .rv.d2.in{transition-delay:.2s} /* Uden JS bliver hverken html.js eller nogen .in-klasse nogensinde sat, så indholdet ville stå usynligt for evigt. :not(.js) tvinger det synligt. KRITISK LÆRING: en tidligere udgave gatede skjulingen selv med "html.js .rv{opacity:0}" — men den selektor har HØJERE specificitet end ".rv.in{opacity:1}" (ét element-selector mere), så den vandt permanent over afsløringen, selv efter JS satte .in. Løsningen er IKKE at gøre skjulingen betinget, men at tilføje en selvstændig, uafhængig fallback-regel for det modsatte tilfælde (intet JS). */ html:not(.js) .stage, html:not(.js) .rv, /* Og hvis main.js dør undervejs eller aldrig kommer: head-scriptet sætter .failopen, når .js-ok mangler ved DOMContentLoaded. */ html.failopen .stage, html.failopen .rv{opacity:1!important;transform:none!important;transition:none!important} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important} .stage,.rv,.vgrid figure{opacity:1!important;transform:none!important} .thread i{transform:scaleX(1)!important} } /* ════════════════════════════════════════════════════════════ TABLET 760–1023px ════════════════════════════════════════════════════════════ */ @media(min-width:760px) and (max-width:1023px){ .hero{padding-top:110px} .hero .prose{max-width:46ch} } /* ════════════════════════════════════════════════════════════ GALLERI SOM SNAP-RAIL under 1024px Tre fuldbredde-kort i træk er 2.500px lodret scroll på en tablet. Som vandret rail bliver de browsbare, og det halve fjerde kort ude i højre kant viser at der er mere. ════════════════════════════════════════════════════════════ */ @media(max-width:1023px){ .stories{ display:flex;column-gap:10px;row-gap:0; overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x proximity;scroll-padding-inline:var(--pad); -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-inline:calc(var(--pad) * -1); padding:0 var(--pad) 4px; } .stories::-webkit-scrollbar{display:none} .stories:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .story{flex:0 0 80%;scroll-snap-align:start} .story:last-child{scroll-snap-align:end} } @media(min-width:620px) and (max-width:1023px){ .story{flex-basis:44%} } /* Kortene i en rail fader kun ind — ingen transform. Et snap-barns snap-position regnes ud fra dets transformerede kasse, så en translate under reveal-animationen flyttede alle snap-punkter og fik browseren til at snappe igen midt i swipet. Selve railen fader som helhed, og den er ikke selv et snap-barn. */ @media(max-width:1023px){ .story.rv,.review.rv{ opacity:1!important;transform:none!important;transition:none!important} .stories,.reviews-grid{opacity:1} } /* ════════════════════════════════════════════════════════════ MOBIL under 760px ════════════════════════════════════════════════════════════ */ @media(max-width:759px){ .hero{padding-top:96px} .hero .prose{margin-bottom:32px} /* Lightbox på mobil: én spalte i fuld bredde, læst oppefra og ned. */ .vgrid{gap:8px} .vgrid::after{display:none} .vgrid figure{flex-basis:100%} .viewer-scroll{padding-bottom:64px} .price-figure{font-size:clamp(34px,11vw,48px)} .manifest .lines{max-width:none} /* Den faste bookknap dækkede de nederste footerlinks */ .foot{padding-bottom:104px} /* 30 reveal-elementer med stagger gør scroll på mobil til én lang animation. Forsinkelserne slås fra, bevægelsen halveres, og varigheden kortes, så siden føles hurtig frem for koreograferet. */ .rv{transform:translateY(11px)} .rv.in{transition-duration:.45s} .rv.d1.in,.rv.d2.in{transition-delay:0s} body.ready .stage{transition-duration:.55s} body.ready .s6{transition-delay:.48s} } /* Meget smalle skærme, 320–360px */ @media(max-width:360px){ .story{flex-basis:86%} .opt > span{font-size:11px;padding:10px 13px} } /* ════════ COOKIE-SAMTYKKE (.cc) — genereres af js/consent.js ════════ Følger systemet: kortflade + hairline, guld på betjening, radius 2px, Instrument Sans til knapper, ingen skygger. z-index 45: over drawer (40), under lightbox (50). */ .cc{position:fixed;inset:auto 0 0 0;z-index:45;padding:0 var(--pad) calc(16px + env(safe-area-inset-bottom)); display:flex;justify-content:flex-start;pointer-events:none; opacity:0;transform:translateY(14px);transition:opacity .55s var(--slow),transform .55s var(--slow)} .cc.in{opacity:1;transform:none} /* Blokerende (0.53.0): mørk baggrund over hele siden, og siden bagved kan hverken rulles eller bruges (inert, sat i consent.js), før der er taget stilling. Lovligt, så længe "Afvis alle" er lige så let som "Accepter alle"; det er en cookievæg, der kun lukker op ved et ja, der ikke er. Kortet står nederst på mobil og i midten fra 760px. */ .cc.cc-modal{inset:0;padding:16px var(--pad) calc(16px + env(safe-area-inset-bottom)); align-items:flex-end;pointer-events:auto;background:rgba(26,30,23,.5);transform:none} .cc.cc-modal .cc-card{transform:translateY(14px);transition:transform .55s var(--slow)} .cc.cc-modal.in .cc-card{transform:none} .cc-card:focus{outline:none} @media(min-width:760px){.cc.cc-modal{align-items:center;justify-content:center}} html.cc-lock{overflow:hidden} .cc-card{pointer-events:auto;max-width:440px;width:100%;background:var(--card); border:1px solid var(--hair);border-radius:2px;padding:clamp(20px,3vw,28px); /* Højere end skærmen på lave telefoner, når kategorierne er foldet ud: kortet ruller selv, så overskriften aldrig skubbes op over kanten. */ max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px - env(safe-area-inset-bottom)); overflow-y:auto;overscroll-behavior:contain} .cc-title{font-family:var(--display);font-weight:500;font-size:21px;line-height:1.18; letter-spacing:-.01em;margin:0 0 8px;color:var(--bone)} .cc-text{font-family:var(--body);font-weight:300;font-size:15px;line-height:1.6; color:var(--bone);margin:0 0 16px} .cc-cats{margin:0 0 16px;border-top:1px solid var(--hair)} .cc-cat{padding:13px 0;border-bottom:1px solid var(--hair)} .cc-cat-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:5px} .cc-cat-name{font-family:var(--util);font-size:11px;font-weight:500;text-transform:uppercase; letter-spacing:var(--ls-label);color:var(--bone)} .cc-always{font-family:var(--util);font-size:11px;letter-spacing:var(--ls-label);text-transform:uppercase; color:var(--gold)} .cc-cat-desc{font-family:var(--body);font-weight:300;font-size:14px;line-height:1.55; color:var(--bone-dim);margin:0} .cc-switch{display:flex;align-items:center;gap:11px;cursor:pointer;min-height:44px} .cc-switch input{position:absolute;opacity:0;width:1px;height:1px} .cc-slider{flex:none;width:42px;height:24px;border:1px solid var(--line-ctrl);border-radius:2px; position:relative;transition:border-color .4s var(--slow),background .4s var(--slow)} .cc-slider::before{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px; background:var(--bone-dim);transition:translate .4s var(--slow),background .4s var(--slow)} /* Slået til (0.49.0): fyldt med brandguldet og en lys knap, som de fyldte knapper. Før en tynd bronzetone, der var svær at skelne fra "fra". */ .cc-switch input:checked + .cc-slider{border-color:var(--gold-fill);background:var(--gold-fill)} .cc-switch input:checked + .cc-slider::before{translate:18px 0;background:var(--card)} .cc-switch input:focus-visible + .cc-slider{outline:2px solid var(--gold);outline-offset:3px} .cc-actions{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 12px} /* Knapperne (0.49.0) er .btn.cc-btn: samme omrids og skrå guldfyld som headerens knap. "Afvis alle" og "Accepter alle" ser ens ud med vilje; vejledningen kræver, at nej er lige så synligt som ja (samme størrelse, farve og kontrast). Fra 0.51.0 står de under hinanden i fuld bredde med "Accepter alle" øverst. "Gem mit valg" vises, når gæsten har valgt "Tilpas", og er fra 0.52.0 også en omridsknap: tre knapper under hinanden skal se ens ud. */ .cc-actions{flex-direction:column} .cc-btn{width:100%;padding:13px 12px;cursor:pointer} /* hidden skal vinde over .btn{display:inline-flex}. Uden den stod "Gem mit valg" synlig fra start (0.49.0-0.52.0), før gæsten havde valgt "Tilpas". */ .cc [hidden]{display:none!important} .cc-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .cc-links{display:flex;gap:18px;align-items:center;flex-wrap:wrap} .cc-link{background:none;border:0;padding:11px 0;cursor:pointer;min-height:44px; font-family:var(--util);font-size:12px;letter-spacing:var(--ls-btn);text-transform:uppercase; color:var(--bone-dim);text-decoration:underline;text-underline-offset:4px; text-decoration-color:var(--hair);transition:color .4s var(--slow)} .cc-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px} @media(hover:hover) and (pointer:fine){ .cc-link:hover{color:var(--gold)} } @media(prefers-reduced-motion:reduce){ .cc,.cc.cc-modal .cc-card{transition:none;transform:none} .cc-slider,.cc-slider::before,.cc-link{transition:none} } /* ════════ STEDER-SIDER (/steder/) ════════ Samme system: sektionsrytme i fladetoner, display-overskrifter, kort på --card. Undersidens h1 bruger --d2 — --d1 er forbeholdt forsidens hero. */ .local-hero{padding-top:calc(72px + clamp(48px,7vw,96px))} .local-eyebrow{font-family:var(--util);font-size:12px;font-weight:500;text-transform:uppercase; letter-spacing:var(--ls-label);color:var(--gold);margin:0 0 18px} .local-eyebrow a{color:inherit;text-decoration:none} @media(hover:hover) and (pointer:fine){.local-eyebrow a:hover{text-decoration:underline;text-underline-offset:4px}} .local-hero h1{font-family:var(--display);font-weight:500;font-size:var(--d2);line-height:1.1; letter-spacing:-.02em;margin:0 0 22px;max-width:16ch} .local-hero h1 em{font-style:italic;font-weight:400} .local-hero .prose{max-width:56ch} .local-cta{margin-top:34px} .spots-grid{display:grid;gap:14px;margin-top:clamp(30px,4vw,48px)} @media(min-width:620px){.spots-grid{grid-template-columns:1fr 1fr;gap:18px}} .spot{background:var(--card);border:1px solid var(--hair);border-radius:2px; padding:clamp(22px,3vw,32px)} .spot h3{font-family:var(--display);font-weight:500;font-size:19px;line-height:1.25; letter-spacing:-.01em;margin:0 0 9px;color:var(--bone)} .spot p{font-family:var(--body);font-weight:300;font-size:15px;line-height:1.65; color:var(--bone-dim);margin:0} .local-band .sec-head{margin-bottom:0} .local-band .btn{margin-top:30px} /* Faktablokken. En
    , ikke et afsnit: de tre-fire oplysninger, et par faktisk skal bruge (kommer du herop? koster transporten? hvor hurtigt svarer du?) står som label/værdi-par, så de kan læses af et menneske i ét blik og hentes ud af en søgemaskine eller sprogmodel uden at skulle pilles ud af en sætning. Tal i tabular-nums, så kolonnen flugter. */ .facts{margin-top:clamp(30px,4vw,44px);padding-top:26px;border-top:1px solid var(--hair); display:grid;gap:0} @media(min-width:620px){.facts{grid-template-columns:repeat(2,1fr);column-gap:clamp(24px,4vw,56px)}} @media(min-width:1024px){.facts{grid-template-columns:repeat(4,1fr)}} .facts > div{padding:14px 0;border-bottom:1px solid var(--hair); display:flex;flex-direction:column;gap:5px} @media(min-width:1024px){.facts > div{border-bottom:0;padding-bottom:0}} .facts dt{font-family:var(--util);font-size:11px;text-transform:uppercase; letter-spacing:var(--ls-label);color:var(--gold);line-height:1.4} .facts dd{font-family:var(--body);font-weight:300;font-size:15px;line-height:1.55; color:var(--bone);font-variant-numeric:lining-nums tabular-nums} /* Nabolinks. Rigtig intern linkning mellem lokalsiderne, ikke kun via footeren — søgemaskiner læser et link i brødteksten tungere end et link i en footer, der står ens på hver side. */ .nearby{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px} .nearby a{display:inline-flex;align-items:center;min-height:44px;padding:11px 16px; border:1px solid var(--line-ctrl);border-radius:2px; font-family:var(--util);font-size:12px;color:var(--bone-dim);line-height:1.4; transition:border-color .4s var(--slow),color .4s var(--slow)} @media(hover:hover) and (pointer:fine){.nearby a:hover{border-color:var(--gold);color:var(--gold)}} .local-back{margin-top:34px} .local-back a{font-family:var(--util);font-size:12px;letter-spacing:var(--ls-btn);text-transform:uppercase; color:var(--bone-dim);text-decoration:underline;text-underline-offset:4px; text-decoration-color:var(--hair);transition:color .4s var(--slow)} @media(hover:hover) and (pointer:fine){.local-back a:hover{color:var(--gold)}} .local-back a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px} /* ════════ JURIDISKE SIDER (/gdpr/) ════════ Ren prosaside i systemet. Overskrifter i display, tabeller med hairlines — ingen bokse. */ .legal{max-width:720px} .legal h2{font-family:var(--display);font-weight:500;font-size:var(--d3);line-height:1.2; letter-spacing:-.01em;margin:clamp(44px,6vw,64px) 0 14px} /* Første overskrift (0.49.0): sektionens egen polstring giver luften. Med margin oveni stod der knap 190px tomt mellem toppen og første overskrift. */ .legal h2:first-of-type{margin-top:0} .legal p,.legal li{font-family:var(--body);font-weight:300;font-size:var(--fs-body); line-height:1.78;color:var(--bone)} /* Den globale nulstilling fjerner al margin, så afsnittene stod klistret sammen. Listen får sine prikker tilbage (ul har list-style:none globalt). */ .legal p{margin:0 0 1em} .legal ul{padding-left:1.2em;margin:0 0 1em;list-style:disc} .legal li{margin-bottom:.45em} .legal li::marker{color:var(--gold-deep)} .legal a{color:var(--gold);text-decoration:underline;text-underline-offset:3px; text-decoration-color:var(--hair)} @media(hover:hover) and (pointer:fine){.legal a:hover{text-decoration-color:var(--gold)}} .legal .note-line{color:var(--bone-dim);font-size:15px} /* table-layout:fixed + ombrydning: cookienavnene (_clck, ANONCHK, MUID …) er lange sammenhængende strenge, og auto-layout ville lade dem sætte tabellens min-bredde og skubbe siden bredere end skærmen ved 320px. */ .legal table{width:100%;table-layout:fixed;border-collapse:collapse; margin:18px 0 28px;font-size:15px} .legal th{font-family:var(--util);font-size:11px;font-weight:500;text-transform:uppercase; letter-spacing:var(--ls-label);color:var(--bone-dim);text-align:left;padding:0 14px 9px 0; overflow-wrap:anywhere} .legal td{font-family:var(--body);font-weight:300;line-height:1.55;color:var(--bone); padding:11px 14px 11px 0;border-top:1px solid var(--hair);vertical-align:top; overflow-wrap:anywhere} .legal code{font-family:var(--util);font-size:.85em;color:var(--gold); overflow-wrap:anywhere} .legal .btn{margin-top:6px} /* Under 560px har tre kolonner ikke plads: 2-3 ord pr. linje er ikke en tabel, det er en søjle af stumper. Rækkerne stables i stedet som kort, hvor hver celle får sin kolonneoverskrift foran sig (tosproget via data-attributter, så begge sprog bevares). */ @media(max-width:559px){ .legal table,.legal tbody,.legal tr,.legal td{display:block;width:100%} .legal thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} .legal tr{border-top:1px solid var(--hair);padding:14px 0 4px} .legal td{border:0;padding:0 0 11px} .legal td::before{display:block;margin-bottom:3px; font-family:var(--util);font-size:10px;font-weight:500;letter-spacing:var(--ls-label); text-transform:uppercase;color:var(--bone-dim)} [data-lang="da"] .legal td::before{content:attr(data-da)} [data-lang="en"] .legal td::before{content:attr(data-en)} }