/* Reduceraren — kupongkänsla: mörkblå djup, krita-vit yta, guld för jackpot. Byggd kring matchkortet som återkommande enhet, med rörelse som förstärker handlingar (klick, reducering, jackpot) snarare än dekorerar sidan. */ :root { --navy-950: #0a1830; --navy-900: #0f2140; --navy-800: #16304f; --navy-700: #1e3f66; --blue-500: #2f6fbf; --blue-600: #2a5da3; --blue-700: #24507f; --paper: #f6f5f1; --paper-raised: #ffffff; --paper-line: #e2e1da; --ink: #1a1d24; --ink-soft: #565a63; --ink-faint: #8b8e95; --gold-300: #ffe08a; --gold-400: #ffcf4d; --gold-500: #f2a70b; --gold-900: #3a2600; --green-500: #1f9d5c; --green-700: #12603a; --red-500: #d1453f; /* Headerns ljusa botten (2026-08-21): loggan är mörk och drunknade mot den gamla mörkblå headern. Tonerna är kylig-neutrala (inte varm kräm) så de hör ihop med sidans egen --paper nedanför. */ --header-paper: #eef0ee; --header-paper-deep: #e2e6e4; /* Accenten hämtad ur loggan. Var röd så länge loggan var svart/röd; den nya (13-2.png) är svart/grå, så linjen följer med dit. */ --logo-accent: #606060; --shadow-sm: 0 1px 2px rgba(15, 33, 64, 0.06); --shadow-md: 0 6px 20px rgba(15, 33, 64, 0.10); --shadow-lg: 0 16px 40px rgba(15, 33, 64, 0.16); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } @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; } } * { box-sizing: border-box; } /* Sidans grundton sitter pa , inte pa . Skalet: vattenstampeln nedanfor ar ett body::before med z-index -1, och ett sadant barn ritas bakom sin egen foralders bakgrund. Lag gradienten kvar pa body hade stampeln hamnat under den och blivit osynlig. Pa ritas gradienten i botten och stampeln ovanpa - entydig ordning i alla webblasare. */ html { background: radial-gradient(1200px 600px at 50% -10%, #eef3fb 0%, var(--paper) 45%); } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; /* Genomskinlig sa att html-gradienten och vattenstampeln syns igenom. */ background: transparent; color: var(--ink); min-height: 100vh; display: flex; flex-direction: column; /* Var 4rem for att gora plats at den fasta #summary-bar langst ner. Den ar borttagen (David 2026-08-22, overflodig - samma radantal/pris star redan i kupongoversikten), sa bara lite luft mot sidfoten behovs. */ padding-bottom: 1rem; /* Ger vattenstampeln (body::before) nagot att positionera sig mot utan att paverka nagot annat: statiskt positionerade barn beter sig likadant. */ position: relative; } /* Loggan som mycket ljus vattenstampel bakom hela sidan. Egen pseudo-element i stallet for en extra bakgrundsbild pa body, eftersom opacity da hade slagit pa hela sidans innehall - har kan bilden tonas ner for sig. fixed + inset:0 gor att den star still nar sidan scrollar, som ett tryck i pappret snarare an nagot som aker med innehallet. z-index -1 lagger den bakom allt (lagsta z-index i ovriga stilar ar 1). pointer-events: none sa att den aldrig fangar klick. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: url("assets/logo-r.png"); background-repeat: no-repeat; background-position: center 55%; /* contain + max-bredd: loggan ska fylla ytan utan att beskaras, och inte bli absurt stor pa breda skarmar. */ background-size: min(70vw, 46rem) auto; opacity: 0.07; } /* Pa smala skarmar tar loggan proportionellt mer plats och blir latt stokig bakom text - dra ner den ytterligare. */ @media (max-width: 640px) { body::before { background-size: 85vw auto; opacity: 0.05; } } /* --- Header ------------------------------------------------------------- */ header { position: relative; /* Stram vertikalt: headern ska presentera sidan, inte ta plats från den. clamp gör att den kryper ihop ytterligare på små skärmar, där varje rad räknas. */ /* Ingen bottenpadding: undertexten är sista raden och behöver inget utrymme under sig – linjen får sitta tätt inpå den. */ padding: clamp(0.55rem, 1.8vw, 0.8rem) 1rem clamp(0.5rem, 1.6vw, 0.7rem); text-align: center; /* Ljus i stället för mörkblå djup: den nya loggan är svart och röd och behöver ljus botten för att synas. Ren yta utan mönster – loggan är det enda som ska dra blicken, och den röda linjen nertill räcker för att skilja headern från sidan. */ background: linear-gradient(180deg, var(--header-paper) 0%, var(--header-paper-deep) 100%); color: var(--ink); overflow: hidden; isolation: isolate; /* Hårfin linje nertill i loggans grå – det som skiljer headern från sidan. 1px räcker när färgen är dämpad; 2px läste sig som en dekorativ ram. */ border-bottom: 1px solid var(--logo-accent); } .site-title-row { display: flex; align-items: flex-end; justify-content: center; /* Elementet är en