/* ═══════════════════════════════════════════════════════════════════════ CykelTjek.dk — MODERNIST (rebrand 21/8) ═══════════════════════════════════════════════════════════════════════ Erstatter den tidligere nordiske hav/hør/frost/rav-palet. Modernist er det designsystem mobilapp-mockuppen ("Cykeltjek App.dc.html") er tegnet i, og skiftet er bevidst sitewide — desktop såvel som mobil — ikke kun den nye mobilvisning. Ét typesnit (Archivo), én rød accentfamilie, og 0px hjørner overalt (se radius-reglerne pr. selektor i resten af filen). Ingen tokens herunder er omdøbt — kun værdierne er ændret. Alt der allerede refererer fx var(--primary) eller var(--felt) virker derfor uændret; det er selve farven bag navnet der har skiftet. */ :root { /* ========================================================================== CykelTjek.dk — DESKTOP REDESIGN TOKENS Varm cream-, rav- og rustpalette. Skrifttype: Archivo. ========================================================================== */ /* BAGGAGRUNDE & OVERFLADER */ --page: hsl(40, 15%, 86%); /* Primær lys indholdsoverflade */ --paper: hsl(42, 60%, 96%); /* Ekstra lys kort- og inputoverflade */ --paper-strong: hsl(42, 57%, 99%); /* LYS TEKST */ --ink: hsl(0, 3%, 12%); --muted-ink: hsl(0, 3%, 37%); /* MØRKE BAGGGRUNDE */ --dark: hsl(0, 2%, 17%); --dark-deep: hsl(12, 4%, 12%); /* MØRK TEKST / PÅ MØRK FLADE */ --light-ink: hsl(0, 2%, 95%); --light-ink-dim: hsla(0, 2%, 95%, 0.72); /* RUST ACCENT (Primær) */ --rust: hsl(18, 40%, 44%); --rust-hover: hsl(13, 44%, 33%); --rust-light: hsl(21, 42%, 57%); --rust-extra-light: hsl(21, 46%, 74%); --rust-tint: hsl(18, 47%, 90%); /* KATEGORI FARVER */ --rose: hsl(17, 60%, 91%); --sage: hsl(100, 23%, 91%); --mauve: hsl(330, 28%, 92%); --mist: hsl(202, 18%, 92%); --apricot: hsl(29, 62%, 92%); --lavender: hsl(262, 26%, 92%); --oat: hsl(36, 42%, 92%); --mint: hsl(152, 20%, 91%); /* BORDERS */ --line: hsla(0, 3%, 12%, 0.12); --line-light: hsla(0, 0%, 100%, 0.14); /* SKYGGER */ --shadow: hsla(18, 18%, 25%, 0.10); /* HJØRNER (Standarder fra guide) */ --radius-sm: 12px; --radius-md: 14px; --radius: 16px; /* Standard */ --radius-lg: 20px; --radius-app: 22px; /* BACKWARDS COMPATIBILITY (L映射到新的 tokens hvis der bruges ældre filer) */ --bg: var(--page); --bg-2: var(--paper); --bg-3: var(--paper-strong); --surface: var(--paper); --surface-alt: var(--paper-strong); --border: var(--line); --text: var(--ink); --muted: var(--muted-ink); --primary: var(--rust); --primary-hover: var(--rust-hover); --primary-soft: var(--rust-tint); --cta: var(--rust); --cta-hover: var(--rust-hover); --paa-farve: var(--light-ink); --felt: var(--dark); --felt-dyb: var(--dark-deep); --paa-felt: var(--light-ink); --paa-felt-dim: var(--light-ink-dim); --felt-linje: var(--line-light); --felt-linje-kraftig: var(--line-light); --primary-paa-felt: var(--rust); /* GLOBALE LAYOUT MÅL */ --maxw: min(100% - 48px, 1376px); --maxw-deals: min(100% - 48px, 1376px); --app-frame-width: min(100% - 48px, 1376px); /* TYPOGRAFI */ --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Archivo', system-ui, sans-serif; --font-data: 'Archivo', system-ui, sans-serif; color-scheme: light; --fejl: #7C1405; } /* ⚠ HER LÅ DET MØRKE TEMA OG TEMASKIFTEREN — begge fjernet 19/8. Sitet har ét udtryk nu: den lyse nordiske palet ovenfor, som er den der er designet imod. Et tema mere ville betyde to sæt beslutninger at holde i sync ved hver eneste ændring, og det andet sæt ville få halvdelen af opmærksomheden. Alt hvad der hørte til er væk i samme omgang: `data-tema`-attributten, temaknappen i header.php, anvendTema()/gemTema() i favorites.js, inline-scriptet i , og `ck_tema` i localStorage. Finder du en rest der stadig nævner dem, er den efterladt — ikke tilsigtet. */ * { box-sizing: border-box; margin: 0; padding: 0 } html { scroll-behavior: smooth } body { font-family: var(--font-body); background: var(--page); color: var(--text); line-height: 1.65; -webkit-font-smoothing: antialiased; font-weight: 400; margin: 0; overflow-x: hidden; } .app-wrapper { background: var(--paper); width: var(--app-frame-width); margin: 24px auto; border-radius: var(--radius-app); box-shadow: 0 20px 80px var(--shadow); min-height: calc(100vh - 48px); overflow: hidden; /* Holder indholdet inde i de afrundede hjørner */ display: flex; flex-direction: column; } /* Fix til at undgå, at indhold vokser over bredden og skubber app-wrapper ud af telefonens skærm på grund af automatisk flexbox min-width */ .app-wrapper>* { min-width: 0; } /* Responsiv specificerering fra guide: "App-ramme: Skærme under 900px" */ @media (max-width: 900px) { .app-wrapper { width: 100%; margin: 0; border-radius: 0; min-height: 100vh; } } a { color: inherit; text-decoration: none } /* ── Tastaturfokus ── Der var ingen focus-styling på links og knapper, så tastaturbrugere kun havde browserens standardring at gå efter på en mørk baggrund. */ :focus-visible { outline: 3px solid var(--cta); outline-offset: 2px; border-radius: 0 } /* Skip-link — første tabstop, synlig når den får fokus */ .skip-link { position: absolute; left: 12px; top: -60px; z-index: 10000; background: var(--cta); color: var(--paa-farve); font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: 0; transition: top .15s } .skip-link:focus { top: 0 } /* ── Reduceret bevægelse ── Respekterer styresystemets indstilling: slår de pulserende urgency-badges, hover-løft og smooth scroll fra. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important } .deal-card:hover, .bento-card:hover, .cat-card:hover { transform: none } } /* ── Visuelt skjult, men til stede for skærmlæsere ── TILFØJET 21/8, første brug: