/* Battleground 2026 — delt design-system for alle sider. Retning: "Dark Ops" — mørk, håndlavet/collage-agtig, grundet i de rigtige feltfotos og olivenknap-farven fra det nuværende site. Se designudkastet: https://claude.ai/code/artifact/2d52f94f-456b-40f1-96ce-2b91ecef0309 */ :root { --bg: oklch(14% 0.012 255); --bg-2: oklch(19% 0.013 255); --bg-3: oklch(24% 0.014 255); --ink: oklch(97% 0.004 90); --ink-soft: oklch(80% 0.008 90 / 0.72); --line: oklch(97% 0.004 90 / 0.14); --airsoft: oklch(60% 0.10 135); /* Lysere end den oprindelige oklch(48% …), som kun gav 3,0:1 mod den mørke baggrund og dermed faldt under WCAG AA. Samme varme læder/træ-tone. */ --bue: oklch(68% 0.095 62); --gel: oklch(66% 0.19 36); --signal: rgb(126, 152, 154); --sector: var(--airsoft); /* overskrives pr. sektion, se .sector-* nedenfor */ } /* Sat på , ikke — så en tidlig side-specifik script (se /book/) kan skifte sektor-farve FØR body overhovedet males, uden blink. */ :root.sector-airsoft { --sector: var(--airsoft); } :root.sector-bue { --sector: var(--bue); } :root.sector-gel { --sector: var(--gel); } /* Forsiden og de fælles sider hører ikke til én sektor — der ER signalfarven sektorfarven. Det gør, at "Book tid"-knappen og alt andet sektorfarvet kan bruge én og samme regel og skifte med, i stedet for at være blå overalt. */ :root.sector-root { --sector: var(--signal); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Barlow', sans-serif; } /* Alle billeder har width/height-attributter (så siden ikke hopper mens de loader). Uden height:auto bruger browseren så HØJDE-attributten som en fast højde, mens CSS styrer bredden — og så bliver billedet klemt sammen. Det er præcis dét, der skete med Hank. Den her ene linje forhindrer det overalt. */ img { height: auto; } a { color: var(--signal); text-decoration: none; } /* Synlig tastaturfokus overalt. :focus-visible rammer kun tastatur/hjælpemidler, så et museklik ikke efterlader en ring på knappen. */ :focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; } /* Kun for skærmlæsere — bruges til at give links som "Køb billet →" en fuld, forståelig kontekst uden at ændre det visuelle. */ .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Spring til indhold — første tabstop på siden, synligt når den får fokus. */ .skip-link { position: absolute; left: 12px; top: -80px; z-index: 200; background: var(--signal); color: var(--bg); font-family: 'Space Mono', monospace; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 12px 18px; transition: top 0.15s ease; } .skip-link:focus { top: 12px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } h1, h2, h3 { font-family: 'Anton', sans-serif; letter-spacing: 0.01em; line-height: 0.92; margin: 0; text-transform: uppercase; } .eyebrow { font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sector); display: flex; align-items: center; gap: 9px; } .eyebrow.eyebrow--signal { color: var(--signal); } .eyebrow::before { content: ""; width: 7px; height: 7px; background: currentColor; display: inline-block; } .wrap { max-width: 1300px; margin: 0 auto; padding: 0 40px; } /* 40px i hver side æder over en femtedel af en telefonskærm — giv teksten plads. */ @media (max-width: 600px) { .wrap { padding: 0 22px; } } .btn { display: inline-flex; align-items: center; gap: 10px; font-family: 'Space Mono', monospace; font-weight: 700; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; padding: 16px 28px; border: none; cursor: pointer; } .btn-signal { background: var(--signal); color: var(--bg); box-shadow: 0 0 0 2px var(--bg); } .btn-sector { background: var(--sector); color: var(--bg); box-shadow: 0 0 0 2px var(--bg); } .btn-outline { background: transparent; color: var(--ink); border: 2px solid var(--line); } /* ---- Navigation ---- */ nav.site-nav { position: sticky; top: 0; z-index: 60; background: oklch(14% 0.012 255 / 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } nav.site-nav .inner { display: flex; align-items: center; justify-content: space-between; height: 82px; gap: 24px; position: relative; } .brand { display: flex; align-items: center; gap: 13px; } .patch { display: flex; align-items: center; flex-shrink: 0; } .patch img { height: 46px; width: auto; object-fit: contain; filter: drop-shadow(2px 3px 0 var(--bg)); } .word { font-family: 'Anton', sans-serif; font-size: 21px; letter-spacing: 0.02em; } .word span { color: var(--signal); } .word em { font-style: normal; font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sector); display: block; margin-top: 2px; } @media (max-width: 500px) { .word em { display: none; } } .navlinks { display: flex; align-items: center; gap: 4px; font-family: 'Space Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; } .navlinks a { padding: 10px 15px; color: var(--ink-soft); border-bottom: 2px solid transparent; } .navlinks a.active { color: var(--sector); border-color: var(--sector); font-weight: 700; } .navlinks-book, .nav-toggle { display: none; } @media (max-width: 860px) { .nav-toggle { display: flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--line); color: var(--ink); width: 42px; height: 42px; cursor: pointer; flex-shrink: 0; } .nav-cta { display: none; } .navlinks { display: none; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-2); border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px oklch(14% 0.012 255 / 0.5); } .navlinks.open { display: flex; } .navlinks a { padding: 16px 24px; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; } .navlinks a.active { border-left-color: var(--sector); border-bottom-color: var(--line); } .navlinks-book { display: block; color: var(--signal); font-weight: 700; } } /* Undermenuen scroller vandret på mobil. Uden et visuelt hint tror folk, at det de kan se, er alt der er — derfor en blød udtoning i højre kant, og en skjult scrollbar så den ikke æder de 50px højde. */ .subnav { background: var(--bg-2); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; position: relative; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 38px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 38px), transparent); } .subnav::-webkit-scrollbar { display: none; } /* På store skærme er der plads til det hele — så skal der ikke tones ud. */ @media (min-width: 1000px) { .subnav { -webkit-mask-image: none; mask-image: none; } } .subnav .inner { display: flex; gap: 2px; height: 50px; align-items: center; } .subnav a { font-family: 'Space Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; padding: 9px 14px; color: var(--ink-soft); white-space: nowrap; border-bottom: 2px solid transparent; } .subnav a.active { color: var(--ink); border-color: var(--sector); font-weight: 700; } /* FAQ — foldbare spørgsmål/svar, godt til SEO og reelt nyttigt indhold */ .faq-list { display: grid; gap: 2px; background: var(--line); border: 1px solid var(--line); } .faq-item { background: var(--bg-2); } .faq-item summary { padding: 20px 24px; cursor: pointer; font-family: 'Anton', sans-serif; font-size: 17px; letter-spacing: 0.01em; text-transform: uppercase; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-family: 'Space Mono', monospace; font-size: 20px; color: var(--sector); flex-shrink: 0; } .faq-item[open] summary::after { content: "–"; } .faq-item p { margin: 0; padding: 0 24px 22px; font-size: 14px; line-height: 1.65; color: var(--ink-soft); max-width: 68ch; } /* Countdown-bar: næste åbne spil, altid synlig under nav */ .countdown-bar { background: var(--bg-2); border-bottom: 1px solid var(--line); } /* padding-block, ikke padding — ellers nulstiller vi .wrap's vandrette luft, og baren klistrer sig til skærmkanten. */ .countdown-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px; flex-wrap: wrap; } .countdown-text { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-family: 'Space Mono', monospace; font-size: 12px; color: var(--ink-soft); } .countdown-text .eyebrow { font-size: 11px; } .countdown-eyebrow { display: inline-flex; } #countdown-label { color: var(--ink); } .countdown-days { color: var(--signal); font-weight: 700; } .countdown-cta { font-family: 'Space Mono', monospace; font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--signal); white-space: nowrap; } .countdown-cta:hover { color: var(--ink); } /* På mobil må baren ikke æde toppen af skærmen: alt på én linje, "Næste åbne spil"-labelen ryger ud (datoen siger det allerede), og CTA'en bliver en pil. */ @media (max-width: 700px) { .countdown-inner { flex-wrap: nowrap; justify-content: space-between; gap: 16px; padding-block: 8px; } .countdown-text { flex-wrap: nowrap; gap: 8px; font-size: 11.5px; min-width: 0; } .countdown-eyebrow { display: none; } /* min-width:0 er det, der tillader et flex-element at blive smallere end sit indhold — uden den vokser baren ud over skærmkanten i stedet for at afkorte. */ #countdown-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .countdown-days { flex-shrink: 0; } .countdown-cta { font-size: 11px; flex-shrink: 0; } } /* ---- Hero ---- */ header.hero { position: relative; padding: 88px 0 60px; overflow: visible; background-size: cover; background-position: center 30%; border-bottom: 2px solid var(--sector); } /* Billedet skal kunne SES. Før lå et lag fra 50 % til 94 % sort over hele billedet, så det næsten forsvandt. Nu er det kun mørkt, hvor teksten står (venstre side), og klart til højre — plus en blød overgang i bunden. */ header.hero.hero--photo { background-color: var(--bg); background-image: linear-gradient(180deg, transparent 55%, oklch(14% 0.012 255 / 0.85) 100%), linear-gradient(90deg, oklch(14% 0.012 255 / 0.9) 0%, oklch(14% 0.012 255 / 0.72) 34%, oklch(14% 0.012 255 / 0.25) 62%, oklch(14% 0.012 255 / 0.05) 100%), var(--hero-photo); } header.hero.hero--photo .sub { color: oklch(92% 0.006 90); text-shadow: 0 2px 14px oklch(14% 0.012 255 / 0.9); } header.hero.hero--photo .crumb, header.hero.hero--photo .eyebrow { text-shadow: 0 1px 8px oklch(14% 0.012 255 / 0.9); } /* På smalle skærme ligger teksten hen over hele billedet — så skal laget være jævnt. */ @media (max-width: 760px) { header.hero.hero--photo { background-image: linear-gradient(180deg, oklch(14% 0.012 255 / 0.55), oklch(14% 0.012 255 / 0.8) 100%), var(--hero-photo); } } header.hero.hero--dark { background-image: none; } /* Gelblast har endnu ingen billeder. I stedet for en flad, mørk flade får undersiderne sektionens orange lysskær — samme som Gelblast-forsiden. */ header.hero.hero--gel { background-image: radial-gradient(620px 440px at 84% 18%, oklch(66% 0.19 36 / 0.28), transparent 65%), radial-gradient(420px 320px at 10% 110%, oklch(66% 0.19 36 / 0.12), transparent 70%); background-color: var(--bg); } header.hero.hero--bue { background-image: radial-gradient(620px 440px at 84% 18%, oklch(68% 0.095 62 / 0.26), transparent 65%); background-color: var(--bg); } .hero-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 40px; align-items: center; } .hero-grid.hero-grid--3 { grid-template-columns: 1.15fr 0.6fr 0.5fr; gap: 32px; } .crumb { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--ink-soft); margin-bottom: 10px; } .hero h1 { font-size: clamp(40px, 10.5vw, 64px); margin-top: 14px; overflow-wrap: break-word; text-shadow: 0 4px 26px oklch(14% 0.012 255 / 0.8); } .hero .sub { font-size: 15.5px; max-width: 58ch; margin-top: 18px; line-height: 1.65; color: var(--ink-soft); } .hero .ctas { display: flex; gap: 16px; margin-top: 36px; flex-wrap: wrap; } .factstrip { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; } .chip { font-family: 'Space Mono', monospace; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--sector); color: var(--ink); padding: 9px 15px; display: inline-flex; align-items: center; gap: 8px; background: oklch(14% 0.012 255 / 0.5); box-shadow: 3px 4px 0 oklch(14% 0.012 255 / 0.4); } .chip:nth-child(2n) { transform: rotate(-1.2deg); } .chip:nth-child(2n+1) { transform: rotate(1deg); } /* ---- Handmade collage accents ---- */ .collage { position: relative; height: 300px; } .collage--tall { height: 380px; } .mascot-pop { position: absolute; width: 210px; filter: drop-shadow(8px 10px 0 var(--bg)); z-index: 3; } /* Hank som en RIGTIG kolonne i heroen, ikke svævende ovenpå. Den absolutte udgave ovenfor har ingen positioneret forælder i 3-kolonne-heroen og landede derfor oven i priskortet. */ .mascot-pop--inline { position: static; width: 100%; max-width: 190px; justify-self: center; align-self: end; transform: rotate(5deg); } .hand-tag { position: absolute; background: oklch(97% 0.004 90); color: var(--bg); font-family: 'Caveat', cursive; font-weight: 700; font-size: 21px; line-height: 1.15; padding: 9px 18px 11px; box-shadow: 4px 5px 0 oklch(14% 0.012 255 / 0.5); z-index: 4; text-align: center; } .polaroid { position: absolute; top: 6px; left: 6px; width: 228px; background: oklch(97% 0.004 90); padding: 14px 14px 44px; box-shadow: 8px 10px 0 oklch(14% 0.012 255 / 0.55); transform: rotate(-5deg); } .polaroid .photo { width: 100%; aspect-ratio: 4/3; background-size: cover; background-position: center 35%; } .polaroid .cap { font-family: 'Caveat', cursive; font-weight: 700; font-size: 19px; color: var(--bg); position: absolute; bottom: 8px; left: 16px; right: 16px; } @media (max-width: 900px) { .hero-grid, .hero-grid.hero-grid--3 { grid-template-columns: 1fr; } .collage { display: none; } } /* ---- Layout sections ---- */ /* 76 px top og bund gav 152 px tomrum mellem to almindelige sektioner. Nu 56 px, og to almindelige sektioner i træk deler luften i stedet for at lægge den sammen. Sektioner med egen baggrund (cta-banner, proof) beholder deres fulde luft. */ main section { padding: 56px 0; } main > section:not([class]) + section:not([class]) { padding-top: 8px; } figure { margin: 0; } /* ---- Tekst og billede side om side ---- Afløser sider, hvor teksten stod alene i venstre halvdel og resten var tomt. */ .split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: center; } .split--vendt .split-foto { order: -1; } .split-tekst .section-title { margin-bottom: 18px; } .split-tekst p { font-size: 15px; line-height: 1.75; color: var(--ink-soft); margin: 0 0 14px; } .split-tekst p:last-child { margin-bottom: 0; } .split-tekst .btn { margin-top: 12px; } .split-foto { position: relative; } .split-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); box-shadow: 10px 12px 0 oklch(14% 0.012 255 / 0.55); } /* Billeder der kun findes i lav opløsning, må ikke strækkes ud over deres egen bredde. */ .split-foto--lille img { width: auto; max-width: 100%; aspect-ratio: auto; margin-inline: auto; } .split-foto figcaption { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.03em; color: var(--ink-soft); margin-top: 14px; } /* Når der ikke findes et billede (fx Gelblast), står et fremhævet fakta-felt i stedet. */ .split-panel { background: var(--bg-2); border: 1px solid var(--line); border-top: 3px solid var(--sector); padding: 28px 30px; } .split-panel .eyebrow { margin-bottom: 14px; } .split-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .split-panel li { font-size: 14.5px; line-height: 1.55; color: var(--ink); padding-left: 22px; position: relative; } .split-panel li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 9px; height: 9px; background: var(--sector); } @media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 30px; } .split--vendt .split-foto { order: 0; } } .section-title { font-size: 36px; margin-bottom: 30px; } .section-kick { font-family: 'Space Mono', monospace; font-size: 12px; color: var(--ink-soft); letter-spacing: 0.06em; margin-bottom: 36px; } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; } .two-col p { font-size: 14.5px; line-height: 1.72; color: var(--ink-soft); margin: 12px 0 0; } .two-col h3 { font-size: 24px; color: var(--sector); } .text-block p { font-size: 14.5px; line-height: 1.72; color: var(--ink-soft); max-width: 70ch; margin: 0; } .text-block p + p { margin-top: 14px; } /* Tekstblokke med flere afsnit og intet billede stod i venstre halvdel med tomt til højre. På brede skærme flyder de nu i to spalter over hele bredden. Overskrifter spænder over begge spalter. */ @media (min-width: 980px) { .wrap.text-block:has(> p + p) { columns: 2; column-gap: 64px; } .wrap.text-block:has(> p + p) > p { max-width: none; break-inside: avoid; } .wrap.text-block:has(> p + p) > p + p { margin-top: 0; padding-top: 14px; } .wrap.text-block:has(> p + p) > p:first-of-type { padding-top: 0; } .wrap.text-block:has(> p + p) > .section-title { column-span: all; } } @media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } } /* Card grids: 2 or 3 across */ .cards { display: grid; gap: 2px; background: var(--line); border: 1px solid var(--line); } .cards--2 { grid-template-columns: repeat(2, 1fr); } .cards--3 { grid-template-columns: repeat(3, 1fr); } .cards .c { background: var(--bg-2); padding: 28px; } .cards .c h3 { font-family: 'Anton', sans-serif; font-size: 23px; margin: 0 0 10px; text-transform: uppercase; } /* "Læs mere →" i kortene skal følge sektorfarven som alt andet, ikke stå blå. */ .cards .c a { color: var(--sector); font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; display: inline-block; margin-top: 12px; } .cards .c a:hover { color: var(--ink); } .cards .c p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; margin: 0; } @media (max-width: 820px) { .cards--2, .cards--3 { grid-template-columns: 1fr; } } /* Homepage sector cards (three sectors, colour bar + ribbon) */ .sector-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line); border: 1px solid var(--line); } .sc { background: var(--bg-2); position: relative; display: flex; flex-direction: column; } .sc .bar { height: 6px; } .sc-airsoft .bar { background: var(--airsoft); } .sc-bue .bar { background: var(--bue); } .sc-gel .bar { background: var(--gel); } .sc-body { padding: 34px 30px 30px; display: flex; flex-direction: column; gap: 16px; flex-grow: 1; } .tag { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 10px; display: inline-flex; align-items: center; gap: 7px; width: fit-content; border: 1px solid; } .sc h3 { font-size: 32px; } .sc p { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); margin: 0; flex-grow: 1; } .sc .go { font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .sc-airsoft .go, .sc-airsoft .tag { color: var(--airsoft); border-color: var(--airsoft); } .sc-bue .go, .sc-bue .tag { color: var(--bue); border-color: var(--bue); } .sc-gel .go, .sc-gel .tag { color: var(--gel); border-color: var(--gel); } .ribbon { position: absolute; top: 16px; right: 16px; background: var(--gel); color: var(--bg); font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; padding: 5px 10px; } @media (max-width: 820px) { .sector-grid { grid-template-columns: 1fr; } } /* Stat cluster (scattered stamped cards) */ .statband { padding: 50px 0 54px; } .statband .wrap { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; } .stat { background: var(--bg-2); border: 1px solid var(--line); padding: 22px 28px; text-align: center; box-shadow: 5px 6px 0 oklch(14% 0.012 255 / 0.4); } .stat:nth-child(1) { transform: rotate(-2deg); } .stat:nth-child(2) { transform: rotate(1.5deg); } .stat:nth-child(3) { transform: rotate(-1deg); } .stat:nth-child(4) { transform: rotate(2deg); } .stat .num { font-family: 'Anton', sans-serif; font-size: 36px; color: var(--signal); line-height: 1; } .stat .lbl { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-top: 6px; } /* Price cards */ .price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--line); margin-top: 6px; } .price-card { background: var(--bg-2); padding: 26px; border-top: 4px solid var(--sector); } .price-card .eyebrow { color: var(--sector); } .price-big { font-family: 'Anton', sans-serif; font-size: 38px; line-height: 0.9; margin: 12px 0 2px; } .price-big sub { font-family: 'Barlow'; font-size: 12px; font-weight: 600; color: var(--ink-soft); } .price-card p { font-size: 12px; color: var(--ink-soft); margin-top: 12px; line-height: 1.55; } @media (max-width: 820px) { .price-grid { grid-template-columns: repeat(2, 1fr); } } .price-grid.price-grid--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 640px) { .price-grid.price-grid--3 { grid-template-columns: 1fr; } } .price-card .price-enhed { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sector); margin-top: 14px; } /* Stamped feature price (Gelblast) */ .price-hero { background: var(--sector); color: var(--bg); padding: 32px 30px; box-shadow: 6px 8px 0 oklch(14% 0.012 255 / 0.5); transform: rotate(-1.5deg); } .price-hero .eyebrow { color: var(--bg); opacity: 0.85; } .price-hero .big { font-family: 'Anton', sans-serif; font-size: 52px; line-height: 0.85; margin: 12px 0 2px; } .price-hero .big sub { font-family: 'Barlow'; font-size: 13px; font-weight: 700; } .price-hero .note { font-size: 12px; margin-top: 14px; line-height: 1.5; opacity: 0.92; } /* Timeline (Gelblast "sådan foregår det") */ .timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; background: var(--line); border: 1px solid var(--line); } .timeline .t { background: var(--bg-2); padding: 24px 18px; } .timeline .t .time { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--sector); font-weight: 700; } .timeline .t .label { font-family: 'Anton', sans-serif; font-size: 19px; margin-top: 10px; text-transform: uppercase; } @media (max-width: 820px) { .timeline { grid-template-columns: repeat(2, 1fr); } } /* Rental / two-col feature block */ .feature-block { display: grid; grid-template-columns: 1fr 0.8fr; gap: 44px; background: var(--bg-2); border: 1px solid var(--line); padding: 46px; align-items: center; } .feature-block h3 { font-size: 32px; } .feature-block ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; } .feature-block li { font-size: 13.5px; display: flex; gap: 9px; align-items: flex-start; color: var(--ink-soft); } .feature-block li::before { content: "—"; color: var(--sector); flex-shrink: 0; } @media (max-width: 860px) { .feature-block { grid-template-columns: 1fr; } } /* Timetable list (open days rules) */ .rule-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .rule-list li { display: flex; gap: 10px; font-size: 14px; line-height: 1.6; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--ink-soft); } .rule-list li::before { content: "—"; color: var(--sector); flex-shrink: 0; } /* Ticket dates (Åbne spil × Shopify) */ .ticket-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 10px; } .ticket-card { background: var(--bg-2); border: 1px solid var(--line); border-top: 4px solid var(--airsoft); padding: 22px; display: flex; flex-direction: column; gap: 10px; } .ticket-card .date { font-family: 'Anton', sans-serif; font-size: 22px; } .ticket-card .avail { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--ink-soft); letter-spacing: 0.04em; } .ticket-empty { font-size: 15px; color: var(--ink-soft); line-height: 1.7; border: 1px dashed var(--line); padding: 22px 24px; } .ticket-card .price { font-family: 'Space Mono', monospace; font-size: 13px; color: var(--signal); font-weight: 700; } .ticket-card .btn { justify-content: center; margin-top: 4px; } .ticket-note { font-size: 12.5px; color: var(--ink-soft); margin-top: 18px; } /* Video-facade: klik-for-at-afspille, ingen YouTube-cookies før man selv beder om det */ .video-embed { position: relative; aspect-ratio: 16/9; max-width: 640px; background-size: cover; background-position: center; border: 1px solid var(--line); cursor: pointer; } .video-embed--hd { max-width: 960px; } /* Videosektionen centreres — før stod videoen i venstre halvdel med tomt til højre. */ .video-sektion { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .video-sektion .section-title { text-align: center; } .video-sektion .video-embed { margin-inline: auto; box-shadow: 12px 14px 0 oklch(14% 0.012 255 / 0.55); } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } .video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; background: oklch(14% 0.012 255 / 0.65); border: 1px solid var(--ink); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; } .video-embed:hover .video-play { background: var(--signal); color: var(--bg); } .video-caption { position: absolute; left: 14px; bottom: 12px; margin: 0; font-family: 'Space Mono', monospace; font-size: 11px; color: var(--ink); background: oklch(14% 0.012 255 / 0.7); padding: 6px 10px; } /* Simpel foto-blok med billedtekst — rigtige billeder fra banen */ /* Billederne her findes kun i 400 px — hverken på det gamle site eller i mediebiblioteket er der større originaler. Vist i 640 px blev de blot udtværet, så feltet følger nu billedets egen størrelse. */ .photo-block { max-width: 400px; } /* Til billeder i høj opløsning — de må gerne fylde, fordi de rent faktisk er store nok til det. */ .photo-block--bred { max-width: 1100px; margin: 36px 0 0; } .photo-block img { width: 100%; display: block; border: 1px solid var(--line); } .photo-block figcaption { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--ink-soft); margin-top: 10px; } /* Testimonials */ .proof { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; } .proof::before { content: ""; position: absolute; inset: 0; background-image: url('/assets/img/camo-texture.jpg'); background-size: cover; opacity: 0.08; pointer-events: none; } .quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line); position: relative; } .quote-grid blockquote { margin: 0; background: var(--bg-2); padding: 30px 28px; font-size: 14.5px; line-height: 1.68; font-style: italic; color: oklch(90% 0.006 90); } .quote-grid cite { font-family: 'Space Mono', monospace; font-size: 11px; display: flex; align-items: center; gap: 10px; margin-top: 16px; font-style: normal; color: var(--signal); } .quote-grid cite img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; filter: grayscale(20%); } @media (max-width: 860px) { .quote-grid { grid-template-columns: 1fr; } } /* CTA banner */ /* Indholdet lægges i en lodret stak med fast afstand. Før fik knappen kun luft fra et

over sig — på sider med bare overskrift + knap sad knappen klistret op ad overskriften. */ .cta-banner { text-align: center; background: linear-gradient(180deg, var(--bg), var(--bg-2)); padding: 72px 0 80px; } .cta-banner .wrap { display: flex; flex-direction: column; align-items: center; gap: 22px; } .cta-banner .eyebrow { margin: 0; } .cta-banner h2 { font-size: 44px; margin: 0 !important; text-wrap: balance; } .cta-banner p { color: var(--ink-soft); font-size: 15px; margin: 0; max-width: 56ch; } .cta-banner .ctas { margin: 8px 0 0; justify-content: center; } .cta-banner > .wrap > .btn { margin-top: 8px; } /* Booking form */ .booking-form { background: var(--bg-2); border: 1px solid var(--line); padding: 40px; max-width: 640px; margin: 0 auto; } .booking-form .field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; } .booking-form .field[hidden] { display: none; } .booking-form .field-row { display: flex; gap: 16px; } .booking-form .field-row .field { flex: 1; margin-bottom: 20px; } @media (max-width: 560px) { .booking-form .field-row { flex-direction: column; gap: 0; } } .booking-form label { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); } .booking-form input, .booking-form select, .booking-form textarea { background: var(--bg); border: 1px solid var(--line); color: var(--ink); font-family: 'Barlow', sans-serif; font-size: 15px; padding: 13px 14px; } .booking-form textarea { resize: vertical; min-height: 120px; } .booking-form input:focus, .booking-form select:focus, .booking-form textarea:focus { outline: 2px solid var(--sector); outline-offset: 1px; } .booking-form .honeypot { position: absolute; left: -9999px; } .booking-form button { width: 100%; justify-content: center; } /* Statusfeltet er altid i DOM'en og altid i tilgængelighedstræet (det er en role="status"), så en skærmlæser annoncerer svaret. Tom = ingen ramme. */ .form-status { font-family: 'Space Mono', monospace; font-size: 13px; margin-top: 16px; } .form-status.ok, .form-status.error { padding: 12px 14px; } .form-status.ok { color: var(--airsoft); border: 1px solid var(--airsoft); } .form-status.error { color: var(--gel); border: 1px solid var(--gel); } .form-required { color: var(--gel); } .form-legend { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 18px; } /* Facebook-feed */ .follow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } .fb-feed-slot { background: var(--bg-2); border: 1px solid var(--line); padding: 30px; min-height: 200px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; } .fb-feed-slot p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; margin: 0; } .fb-feed-slot iframe { width: 100%; max-width: 500px; border: none; } @media (max-width: 860px) { .follow-grid { grid-template-columns: 1fr; } } /* ---- Interaktivt banekort ---- */ .bk { display: grid; grid-template-columns: 1fr; gap: 2px; background: var(--line); border: 1px solid var(--line); } @media (min-width: 940px) { .bk { grid-template-columns: 1fr 290px; grid-template-rows: auto 1fr; } .bk-toolbar { grid-column: 1 / -1; } } .bk-toolbar { background: var(--bg-2); padding: 14px 18px; display: flex; gap: 22px; flex-wrap: wrap; align-items: center; justify-content: space-between; } .bk-vaelg, .bk-lag { display: flex; gap: 8px; flex-wrap: wrap; } .bk-toggle, .bk-bane-knap { font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 8px 14px; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); cursor: pointer; } .bk-toggle.is-on { background: var(--sector); border-color: var(--sector); color: var(--bg); } .bk-toggle:hover, .bk-bane-knap:hover { border-color: var(--sector); } /* Banevalget er et enten-eller, så det markeres kraftigere end lag-knapperne. */ .bk-bane-knap.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg); } .bk-canvas { background: oklch(17% 0.014 255); padding: 10px; overflow: hidden; position: relative; } .bk-vis-knap { font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 8px 14px; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); cursor: pointer; } .bk-vis-knap.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg); } .bk-vis-knap:hover { border-color: var(--sector); } .bk-vis { display: flex; gap: 8px; flex-wrap: wrap; } /* Det rigtige kort. Facaden ligger ovenpå, indtil nogen beder om kortet. */ .bk-rigtigt { position: relative; } .bk-leaflet { width: 100%; height: min(70vh, 620px); background: oklch(21% 0.014 255); } .bk-facade { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 30px; background: oklch(17% 0.014 255); } .bk-facade p { max-width: 46ch; margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); } .bk-facade-note { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.04em; } /* Leaflets egne flader er lyse — gør kanten og teksten læsbar på vores mørke felt. */ .bk-leaflet .leaflet-container { background: oklch(21% 0.014 255); font-family: 'Barlow', sans-serif; } .bk-leaflet .leaflet-control-attribution { background: oklch(14% 0.012 255 / 0.85); color: var(--ink-soft); font-size: 10px; } .bk-leaflet .leaflet-control-attribution a { color: var(--signal); } .bk-svg { display: block; width: 100%; height: auto; max-height: 78vh; } .bk-svg text { font-family: 'Space Mono', monospace; pointer-events: none; } /* Lag der er slået fra, skal også ud af tilgængelighedstræet — ikke bare skjules. Browserens egen [hidden]-regel gælder kun HTML-elementer, ikke SVG, så den skal stå her eksplicit. */ .bk-svg[hidden], .bk-svg [data-lag][hidden], .bk-rigtigt[hidden] { display: none; } .bk.skjul-navne .bk-nr, .bk.skjul-navne .bk-indgang-navn, .bk.skjul-navne .bk-safe-sub, .bk.skjul-navne .bk-omgiv { display: none; } /* Banerne tegnes i to lag: fyld nederst og kant øverst, så terræn inde i banen (søen) kan ligge imellem — ellers skjuler skovmønstret den. */ .bk-fyld { stroke: none; transition: opacity 0.2s ease; } .bk-fyld--stor { fill: url(#bk-skov); } .bk-fyld--lille { fill: oklch(60% 0.10 135 / 0.16); } .bk-omrids { fill: none; stroke-linejoin: round; transition: opacity 0.2s ease, stroke 0.2s ease; } .bk-omrids--stor { stroke: var(--sector); stroke-width: 3.5; } .bk-omrids--lille { stroke: var(--signal); stroke-width: 3.5; stroke-dasharray: 12 7; } /* Den bane man IKKE har valgt, træder i baggrunden i stedet for at forsvinde — så man hele tiden kan se, at lille bane ligger inde i stor bane. */ .bk[data-bane="lille"] .bk-omrids--stor, .bk[data-bane="lille"] .bk-fyld--stor { opacity: 0.4; } .bk[data-bane="stor"] .bk-omrids--lille, .bk[data-bane="stor"] .bk-fyld--lille { opacity: 0.45; } .bk[data-bane="stor"] .bk-omrids--lille { stroke-width: 2.5; } .bk[data-bane="lille"] .bk-fyld--lille { fill: oklch(60% 0.10 135 / 0.22); } .bk[data-bane="lille"] .bk-omrids--lille { stroke-dasharray: none; } /* Terræn fra OpenStreetMap. Dæmpet, så banen stadig er det man ser først. */ .bk-t { stroke: none; } .bk-t--vand { fill: oklch(50% 0.08 240 / 0.8); } .bk-t--sump { fill: oklch(42% 0.05 195 / 0.7); } .bk-t--mark { fill: oklch(34% 0.03 95 / 0.75); } .bk-sti-skygge { fill: none; stroke: oklch(14% 0.012 255); stroke-width: 11; stroke-linecap: round; } .bk-sti { fill: none; stroke: oklch(62% 0.12 40); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 14 9; } .bk-safe { fill: oklch(24% 0.02 200 / 0.85); stroke: var(--signal); stroke-width: 2.5; stroke-dasharray: 9 6; } .bk-safe-navn { font-size: 17px; font-weight: 700; letter-spacing: 0.1em; fill: var(--signal); text-anchor: middle; } .bk-parkering { fill: oklch(26% 0.012 90 / 0.85); stroke: oklch(60% 0.02 90); stroke-width: 2; stroke-dasharray: 6 5; } .bk-omraade-navn { font-size: 14px; font-weight: 700; letter-spacing: 0.1em; fill: oklch(72% 0.02 90); text-anchor: middle; } .bk-indgang { fill: var(--signal); stroke: var(--bg); stroke-width: 3; } .bk-indgang-navn { font-size: 14px; font-weight: 700; letter-spacing: 0.09em; fill: var(--ink); } /* Punkter der ikke hører til den valgte bane, skjules helt — også for skærmlæsere, så listen og kortet altid fortæller det samme. */ .bk[data-bane="stor"] .bk-punkt:not([data-baner~="stor"]), .bk[data-bane="lille"] .bk-punkt:not([data-baner~="lille"]), .bk[data-bane="stor"] .bk-liste li:not([data-baner~="stor"]), .bk[data-bane="lille"] .bk-liste li:not([data-baner~="lille"]) { display: none; } .bk-punkt { cursor: help; } .bk-punkt .bk-ikon { fill: oklch(26% 0.02 255); stroke: var(--ink); stroke-width: 2.2; transition: fill 0.15s ease; } .bk-punkt--daek .bk-ikon { stroke: var(--signal); } .bk-punkt:hover .bk-ikon, .bk-punkt:focus-visible .bk-ikon { fill: var(--sector); } .bk-nr { font-size: 10px; font-weight: 700; fill: var(--ink); text-anchor: middle; } .bk-noegle { background: var(--bg-2); padding: 22px 20px; } .bk-noegle-titel { font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 14px; } .bk-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); } .bk-legend li { display: grid; grid-template-columns: 20px 1fr; gap: 11px; align-items: start; } .bk-sw { width: 18px; height: 14px; margin-top: 3px; border-radius: 2px; } .bk-sw--hus { background: oklch(26% 0.02 255); border: 2px solid var(--ink); } .bk-sw--daek { background: oklch(26% 0.02 255); border: 2px solid var(--signal); border-radius: 50%; } .bk-sw--sti { background: repeating-linear-gradient(90deg, oklch(62% 0.12 40) 0 7px, transparent 7px 12px); height: 5px; margin-top: 8px; } .bk-sw--stor { background: oklch(21% 0.02 150); border: 2px solid var(--sector); } .bk-sw--lille { background: oklch(60% 0.10 135 / 0.22); border: 2px dashed var(--signal); } .bk-sw--safe { background: oklch(24% 0.02 200 / 0.85); border: 2px dashed var(--signal); } .bk-sw--parkering { background: oklch(26% 0.012 90 / 0.85); border: 2px dashed oklch(60% 0.02 90); } .bk-sw--vand { background: oklch(50% 0.08 240 / 0.8); } .bk-sw--bro { background: oklch(55% 0.05 60); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); border-radius: 0; height: 12px; margin-top: 4px; } .bk-bro { fill: oklch(55% 0.05 60); stroke: oklch(14% 0.012 255); stroke-width: 1.5; } .bk-bro-rail { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; } .bk-sw--sump { background: oklch(42% 0.05 195 / 0.7); } .bk-sw--mark { background: oklch(34% 0.03 95 / 0.75); } .bk-forklar { font-size: 13.5px; line-height: 1.65; color: var(--ink); margin: 0 0 20px; } .bk-mangler { font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); } .bk-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13px; color: var(--ink-soft); counter-reset: none; } .bk-liste li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; } .bk-liste b { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--sector); } /* ---- Pristabel. Brede tabeller får deres egen vandrette scroll, så selve siden aldrig kan scrolle sidelæns på en telefon. ---- */ .table-scroll { overflow-x: auto; } .price-table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 14.5px; } .price-table th { font-family: 'Space Mono', monospace; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; color: var(--ink-soft); padding: 10px 14px 10px 0; border-bottom: 2px solid var(--sector); } .price-table td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-variant-numeric: tabular-nums; } .price-table td:first-child { color: var(--ink); } .price-table td:nth-child(3) { font-family: 'Space Mono', monospace; font-weight: 700; color: var(--ink); } /* ---- "Det får I med" — store, grafiske felter i stedet for en punktopstilling. Bruges hvor indholdet af en pakke skal kunne aflæses på ét blik. ---- */ /* Faste trin frem for auto-fit: alle pakkerne har 6 felter, og med 3 kolonner bliver det to fyldte rækker i stedet for 5 + ét ensomt felt. */ .kit-grid { display: grid; grid-template-columns: 1fr; gap: 2px; background: var(--line); border: 1px solid var(--line); } @media (min-width: 560px) { .kit-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .kit-grid { grid-template-columns: repeat(3, 1fr); } } .kit { background: var(--bg-2); padding: 26px 22px 24px; display: flex; flex-direction: column; gap: 4px; } .kit .qty { font-family: 'Anton', sans-serif; font-size: 40px; line-height: 0.9; color: var(--sector); } .kit .qty sub { font-family: 'Barlow', sans-serif; font-size: 13px; font-weight: 700; vertical-align: baseline; color: var(--ink-soft); margin-left: 4px; } .kit .name { font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin-top: 8px; } .kit .desc { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; } /* Et felt der skal fremhæves — fx det der er "alt inklusive". */ .kit.kit--accent { background: var(--sector); } .kit.kit--accent .qty, .kit.kit--accent .name { color: var(--bg); } .kit.kit--accent .qty sub, .kit.kit--accent .desc { color: oklch(14% 0.012 255 / 0.78); } /* ---- Galleri ---- */ /* Ensartede felter. Tidligere spændte de to første over flere rækker — men et billede med height:100% i en række, hvis højde selv afhænger af billedet, er cirkulært, og felterne kollapsede til 10 px striber over 900 px bredde. Alle billeder er 4:3, så et ensartet grid er både robust og pænere. */ .gallery-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; } .gallery-btn { display: block; position: relative; width: 100%; padding: 0; border: 0; background: var(--bg-2); cursor: zoom-in; overflow: hidden; } .gallery-btn img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 0.35s ease, filter 0.35s ease; filter: saturate(0.92); } .gallery-btn:hover img, .gallery-btn:focus-visible img { transform: scale(1.04); filter: saturate(1.05); } .gallery-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 11px; font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); text-align: left; background: linear-gradient(to top, oklch(14% 0.012 255 / 0.92), transparent); } .lightbox { border: 0; padding: 0; background: transparent; max-width: min(94vw, 1100px); max-height: 94vh; color: var(--ink); overflow: visible; } .lightbox::backdrop { background: oklch(14% 0.012 255 / 0.92); } .lightbox img { display: block; max-width: 100%; max-height: 84vh; width: auto; height: auto; margin: 0 auto; } .lightbox-cap { font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); text-align: center; margin: 14px 0 0; } .lightbox-close { position: absolute; top: -14px; right: -8px; width: 42px; height: 42px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer; } .lightbox-close:hover { background: var(--sector); color: var(--bg); } /* Cookie-samtykke */ #cookie-banner { position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 90; max-width: 560px; background: var(--bg-2); border: 1px solid var(--line); box-shadow: 6px 8px 0 oklch(14% 0.012 255 / 0.5); padding: 22px 24px; } #cookie-banner p { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 16px; } #cookie-banner .cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; } #cookie-banner .btn { padding: 12px 20px; font-size: 12px; } #cookie-banner .cookie-current { color: var(--ink); display: block; margin-top: 8px; font-weight: 400; } /* Footer */ footer.site-footer { background: var(--bg-2); color: var(--ink); padding: 50px 0 26px; border-top: 1px solid var(--line); } .foot-grid { display: grid; grid-template-columns: 1.1fr 1fr 0.8fr 0.7fr; gap: 36px; padding-bottom: 30px; border-bottom: 1px solid var(--line); } .social-link { display: inline-flex; align-items: center; gap: 8px; } .social-link:hover { color: var(--signal); } footer h2 { font-family: 'Space Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin: 0 0 12px; } footer p, footer a { font-size: 13.5px; line-height: 1.75; color: var(--ink); } .foot-bottom { display: flex; justify-content: space-between; padding-top: 16px; font-family: 'Space Mono', monospace; font-size: 10.5px; color: var(--ink-soft); flex-wrap: wrap; gap: 8px; } .foot-legal { display: flex; gap: 16px; flex-wrap: wrap; } .foot-shop { font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sector); display: inline-block; margin-bottom: 10px; } .foot-shop:hover { color: var(--ink); } /* Footerens forklarende afsnit må gerne være lidt roligere end adresselinjerne. */ .foot-grid > div:first-child p:first-of-type { color: var(--ink-soft); font-size: 13px; line-height: 1.7; } /* En knap der ser ud som et link — det ER en handling, ikke en navigation, så den skal være en