/* CAS1NO design-kit v2 — tokens + komponenter (server-renderad, no-JS) */ :root { /* ── Bastokens: obsidian och cyan (UX-04, kanon Chromatic Atlas §4.1) ── Historik i tre steg. (1) Fram till 2026-09-27 var det här GitHubs mörka tema, värde för värde: #0b0f14, #58a6ff, #3fb950, #d29922, #f85149, #e6edf3, #8b949e — en igenkännbar hyllpalett. (2) En första UX-04-omgång bytte ut den mot en egen, HANDUPPFUNNEN obsidian/violett-palett (#07080f/#b07cff m.fl.) istället för att läsa av kanons egen literal- tabell i docs/design/CHROMATIC_ATLAS.md §4.1 — och behöll dessutom en violett --accent trots kanons uttryckliga spärr mot precis det: docs/production/ATGARDSPLAN_VARLDSKLASS_2026-09-26.sv.md under "UX-04" stavar ut att violet.500 #6C39FF mäter 3.45:1 mot obsidian.900 #080A12 — under 4.5-kravet för länktext. (3) Det här är rättningen: tokens nedan är kanons §4.1-värden ordagrant, inte en tredje egen tolkning. --accent är cyan.400 #37D8FF (samma värde som redan fanns som --chroma-cyan, interpolerat härifrån tokens.ts istället för handskrivet en andra gång) — violett förblir ren brand/dekoration (--chroma-violet/--chroma-violet-hyper, atmosfär, entity-DNA), aldrig bastoken. Kontrasten är RÄKNAD, inte bedömd. WCAG-kvot för varje par som bär text, mot den handuppfunna palett som byttes ut (steg 2 ovan): par steg 2 kanon §4.1 text / bg 16.81 18.62 text / bg-raised — 17.89 text / bg-card 15.12 17.14 text-muted / bg 7.88 10.59 text-muted / bg-raised — 10.17 text-muted / bg-card — 9.75 accent / bg 6.83 11.70 accent / bg-raised — 11.24 accent / bg-card 6.14 10.77 ← steg 2:s sämsta textpar accent-strong / bg-card — 13.18 good / bg-card 13.04 13.20 warn / bg-card 12.99 13.15 bad / bg-card 7.19 7.28 ← kanonpalettens sämsta textpar good / bg — 14.34 warn / bg — 14.28 bad / bg — 7.91 Kanonpalettens sämsta textpar (7.28) är bättre än både steg 2:s (6.14) och GitHub-basens ursprungliga (5.16). src/web/__tests__/ palette-contrast.test.ts räknar om kvoterna ur de här tokens vid varje körning och fäller under 4.5, så en framtida justering inte kan glida under gränsen tyst. */ --bg: #080a12; --bg-raised: #0d101a; --bg-card: #111522; --border: rgba(255, 255, 255, 0.08); --text: #f7f8fc; --text-muted: #b7becc; --accent: #37d8ff; --accent-strong: #8ce9ff; --good: #58f6b2; --warn: #ffd84a; --bad: #ff7a8a; /* Semantiska alias (PROMPT 14/ADR-0022) — samma värden som good/warn/bad idag, en egen namngiven roll för framtida kod som vill skriva "critical"/"warning"/"success" istället för att komma ihåg att bad= critical. focus/selected pekar idag på accent (samma visuella resultat som innan denna ändring) men är nu en egen CSS-egenskap att skifta oberoende av länkfärgen om det någonsin behövs. */ --focus: var(--accent); --selected: var(--accent); --critical: var(--bad); --warning: var(--warn); --success: var(--good); /* UX-43: betyg och rank är inte varningar — egna roller (kanon §4.3/§15.4). */ --rating: var(--chroma-yellow); --rank: var(--chroma-violet-hyper); /* UX-59: kommersiell markering får ALDRIG ärva brandens/signalernas visuella språk (kanon §1.6) — icke-semantisk, icke-spektral grafit utanför chroma/signal/dna. */ --sponsor: #9aa4b8; --sponsor-bg: rgba(154, 164, 184, 0.12); --radius: 10px; /* --space-0 (token-städning): konsoliderar de tidigare ~10 näst-identiska mikro-padding-litteralerna (0.05/0.1/0.15/0.2rem) som badge/chip/ kind-chip/filter-chip/compare-token vardera satte separat för sin vertikala padding — en enda källa till sanning istället för fem. */ --space-0: 0.15rem; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2.5rem; /* UX-42 (kanon §7.1): den fulla 13-stegs spacingskalan. De befintliga namnen (--space-0…-5) står kvar oförändrade som alias (0/4/8/16/24/40px); här läggs hela kanon-skalan (4/8/12/16/20/24/32/40/48/64/80/96/128 px) till under prefixet --sp-* — MEDVETET inte --space-4/8/…, eftersom --space-4 redan finns (1.5rem) och ett återbrukat namn hade skuggat den tyst. Alla som rem (1rem=16px). */ --sp-4: 0.25rem; --sp-8: 0.5rem; --sp-12: 0.75rem; --sp-16: 1rem; --sp-20: 1.25rem; --sp-24: 1.5rem; --sp-32: 2rem; --sp-40: 2.5rem; --sp-48: 3rem; --sp-64: 4rem; --sp-80: 5rem; --sp-96: 6rem; --sp-128: 8rem; /* UX-42 (kanon §7.2): basbredd 76rem (1216px); bred behållare 96rem (1536px) för jämförelse- och adminytor via .wrap--wide (appliceras i layout.page()). */ --maxw: 76rem; --maxw-wide: 96rem; /* ── Typografi: tre röster och en tiostegsskala (Chromatic Atlas §6.1-6.2) ── Före det här blocket hade hela plattformen ETT typsnitt ("--font: system-ui"), noll "clamp()", 22 godtyckliga "font-size"-värden vars största var 2rem, och ingen bas-regel för "h1" alls — 63 av 64 "

" ärvde webbläsarens 2em. Kanon kräver 56-80 px för H1 på desktop. Det är inte en smakskillnad, det är skillnaden mellan formgiven och oformgiven. ROSTERNA. Kanon §6.1 säger uttryckligen att "the exact licensed font may be chosen later, but the proportions are mandatory". Ingen licensierad face laddas här: det är ett inköpsbeslut, och en webbfont från tredje part vore dessutom fel för en EU-riktad sajt som annars hostar allt själv. Stackarna nedan väljer systemets EGNA display- respektive text-optiska snitt där de finns (Segoe UI Variable på Windows 11, -apple-system optical sizing på Apple) och faller tillbaka snyggt där de inte gör det. När en face licensieras är det EN rad per röst som ändras; allt annat i filen går redan genom de här tre tokens. SKALAN är flytande mellan 400 px och 1440 px viewport. Varje "clamp()" har en rem-term och inte bara vw — utan den skalar inte texten när besökaren zoomar, vilket bryter WCAG 1.4.4. Räknat så att minvärdet är kanons mobilmål och maxvärdet kanons desktopmål. */ --font-display: "Segoe UI Variable Display", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif; --font-ui: "Segoe UI Variable Text", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --font-data: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace; /* Bakåtkompatibelt alias — "--font" fanns före de tre rösterna och används fortfarande på ställen som bara menar "gränssnittstext". */ --font: var(--font-ui); --type-display-xl: clamp(3.25rem, 0.654rem + 10.385vw, 10rem); /* 52 → 160 */ --type-h1: clamp(2.375rem, 1.365rem + 4.038vw, 5rem); /* 38 → 80 */ /* Sidtitel — ett medvetet avsteg från en bokstavlig läsning av §6.2, och det ska stå skrivet. Kanon anger 56-80 px för H1. På en redaktionell hero är det rätt. På /games, där rubriken är ordet "Spel" ovanför ett filter och en träfflista, blir 80 px en affisch, inte en produkt: titeln tar mer plats än det innehåll besökaren kom för. Bas-"h1" använder därför det här steget, och ".hero h1" använder kanons fulla H1. Ingen mall behöver ändras för det — heron har redan sin egen klass. */ --type-page-title: clamp(1.75rem, 1.35rem + 1.6vw, 2.75rem); /* 28 → 44 */ --type-h2: clamp(1.875rem, 1.25rem + 2.5vw, 3.5rem); /* 30 → 56 */ --type-h3: clamp(1.5rem, 1.211rem + 1.154vw, 2.25rem); /* 24 → 36 */ --type-h4: clamp(1.1875rem, 1.067rem + 0.481vw, 1.5rem); /* 19 → 24 */ --type-body-l: 1.125rem; /* 18 */ --type-body: 1rem; /* 16 */ --type-small: 0.875rem; /* 14 */ --type-micro: 0.8125rem; /* 13 — etiketter, aldrig instruktioner (§6.2) */ --type-data: clamp(0.875rem, 0.779rem + 0.385vw, 1.125rem); /* 14 → 18 */ /* Spårning. Det här är den enskilt största skillnaden mellan stor text som ser formgiven ut och stor text som ser ut som en default: optiska snitt sätts tätare ju större de blir, och utan negativ tracking ser 80 px systemtext uppspädd ut. Värdena är per steg, inte en global regel. */ --track-display: -0.035em; --track-h1: -0.028em; --track-h2: -0.022em; --track-h3: -0.015em; --track-h4: -0.008em; --track-label: 0.07em; /* Radavstånd faller med storleken — 1.6 på brödtext är rätt, 1.6 på en 80-pixelrubrik är tre gånger för luftigt. */ --leading-display: 0.95; --leading-h1: 1.04; --leading-h2: 1.1; --leading-h3: 1.2; --leading-h4: 1.3; --leading-body: 1.6; /* CASIN0 Chromatic Atlas (ADR-0036) — Simon's locked visual direction. Kurerad spektralpalett, aldrig använd i sin helhet i en och samma vy (entity-dna.ts väljer ett stabilt par per entitet/sektion). Noten här sa tidigare att --bg/--text/--text-muted/--border ovan är OFÖRÄNDRADE och att de här tokens därför bara är dekoration. Den meningen är inte längre sann: UX-04 pekade om basen till kanon §4.1 — obsidian för bakgrunderna och cyan.400 som interaktionsaccent, INTE violett (kanon diskvalificerar uttryckligen violet.500 för länktext, se tokentabellens kommentar ovan). Violett lever kvar som ren brand/dekoration här nedan (--chroma-violet/--chroma-violet-hyper, atmosfär, entity-DNA) — chroma-tokens bär fortfarande aldrig brödtext, och kontrastkravet på dem är därför 3:1 för gränser och ikoner, inte 4.5. */ --obsidian: #06070d; --chroma-violet: #6c39ff; --chroma-violet-hyper: #9a4dff; --chroma-pink: #ff2f9d; --chroma-coral: #ff566b; --chroma-orange: #ff8a32; --chroma-yellow: #ffd84a; --chroma-lime: #b8ff45; --chroma-mint: #58f6b2; --chroma-cyan: #37d8ff; --chroma-ice: #80b7ff; } /* Kompakt densitet (PROMPT 14/ADR-0022) — infrastruktur, ingen sida sätter ännu data-density="compact"; standardläget (ingen attribut-närvaro) är identiskt med v1:s spacing, så detta är additivt och kan inte regrediera någon befintlig sida. Halverar den vertikala rytmen för framtida täta ytor (adminlistor, jämförelsetabeller) utan att omdefiniera --space-* globalt. */ [data-density="compact"] { --space-2: 0.35rem; --space-3: 0.65rem; --space-4: 1rem; --space-5: 1.5rem; } /* Per-familj adaptivt tema (ADR-0028) — server-side, zero-JS data-family (games.family, en riktig aldrig-null kolumn, aldrig fabricerad) satt på (spelets detaljsida) och på varje gameCard()-
(listor, liknande-spel). --accent kaskaderar via CSS custom properties till varje var(--accent)-användning i den underträdet (kort-hover, länkar, CTA:er) — ingen JS krävs. Grupperat per genre, inte en unik färg per taggnamn: katalogen är 99.87% slots (43186/43243, verifierad mot data/catalog/full-catalog.json denna session), så bara riktiga, existerande familjer i katalogen får en identitet; standardaccenten (slots, eller ingen [data-family]-matchning) är oförändrad. */ [data-family="live-casino"], [data-family="table-cards"], [data-family="roulette"], [data-family="blackjack"], [data-family="baccarat"], [data-family="poker"], [data-family="video-poker"] { --accent: #2dd4bf; --accent-strong: #5eead4; } [data-family="lottery"], [data-family="bingo"], [data-family="instant"], [data-family="sweepstakes"] { --accent: #e3b341; --accent-strong: #f2c94c; } [data-family="esports"], [data-family="crypto"], [data-family="sports"], [data-family="social"], [data-family="adjacent"], [data-family="venues"] { --accent: #818cf8; --accent-strong: #a5b4fc; } * { box-sizing: border-box; } html { color-scheme: dark; scroll-padding-top: 3.5rem; scroll-padding-bottom: 64px; } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; font-size: var(--type-body); position: relative; isolation: isolate; } /* ── Bas-rubriker ──────────────────────────────────────────────────────────── Fram till nu fanns ingen enda "h1"-regel i den här filen. Varje rubrik som inte råkade ligga i ".hero" fick webbläsarens default: 2em, normal tracking, ärvd line-height 1.6. Det är därför sidorna såg ut som ett omarkerat dokument snarare än en produkt. Reglerna nedan är på elementen, inte på klasser, så de gäller alla 64 "

" utan att någon sida behöver ändras. Komponenter som medvetet vill ha en mindre rubrik (kortrubriker, sektionshuvuden) sätter sin egen storlek efter det här — men går numera genom skalans tokens i stället för egna decimaler. "text-wrap: balance" gör att en tvåradig rubrik delas jämnt i stället för att lämna ett ensamt ord på rad två. Den ignoreras tyst där den inte stöds. "font-optical-sizing: auto" låter variabla systemsnitt välja sin display- variant vid stora grader, vilket är hela poängen med Segoe UI Variable. */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-optical-sizing: auto; text-wrap: balance; color: var(--text); } h1 { font-size: var(--type-page-title); line-height: var(--leading-h2); letter-spacing: var(--track-h2); margin: 0 0 var(--space-3); } h2 { font-size: var(--type-h2); line-height: var(--leading-h2); letter-spacing: var(--track-h2); margin: var(--space-5) 0 var(--space-2); } h3 { font-size: var(--type-h3); line-height: var(--leading-h3); letter-spacing: var(--track-h3); margin: var(--space-4) 0 var(--space-2); } h4 { font-size: var(--type-h4); line-height: var(--leading-h4); letter-spacing: var(--track-h4); margin: var(--space-3) 0 var(--space-1); } /* Datarösten (kanon §6.1, tredje rösten). Siffror som ska JÄMFÖRAS måste stå i kolumn — proportionella siffror gör att 1 är smalare än 8, så två RTP- värden under varandra inte går att läsa av mot varandra utan att läsa dem. "tabular-nums" är den enda raden som behövs för det, och den fungerar i systemsnitten redan i dag, utan någon licensierad face. */ table, .data, .metric, .rtp, .pct, td, th, .compare-table, .stat-value, .nav-live-count strong { font-variant-numeric: tabular-nums; } /* Etiketter i versalgemener behöver luft mellan tecknen — utan tracking blir versaler i små grader en grå klump (kanon §6.3). */ .eyebrow, .nav-eyebrow, .nav-group-heading, .footer-col-heading, .kind-chip, th { letter-spacing: var(--track-label); } /* Chromatic Atlas base atmosphere (ADR-0036 §3 + ADR-0081 våg 1) — the spectral haze fields + fine noise live on a dedicated decorative element (page() renders
right after the skip link) instead of body pseudo-elements: / must stay free of extra attributes because the density-/family-wheel tests pin exact tag prefixes. Fixed behind all content (z-index -2, pointer-events none — pure decoration, never intercepts input or reaches assistive tech). Body isolates these negative layers: its background paints first, the obsidian base at -3 next, then the visible haze at -2 below the content. Deliberately subtle: never competes with foreground legibility. Static — no animation. data-intensity=vivid/calm only shifts the field opacities; prefers-reduced-motion is unaffected because nothing animates. */ body::before { content: ''; position: fixed; inset: 0; z-index: -3; pointer-events: none; background: var(--obsidian); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* UX-25 (2026-09-28): a single --focus ring is not guaranteed 3:1 against every surface it can land on (per-entity --dna-primary card borders/ glows, --chroma-* accented surfaces like .badge.sponsor/.ad-slot) — a light ring can wash out on a light surface, a dark one on a dark one. Two concentric rings instead: an --obsidian inner ring (near-black, flush against the element with no offset) plus a --focus (accent) outer ring 4px out via box-shadow. One of the two always contrasts against whatever sits behind the focused element, so the ring is visible everywhere without inventing new tokens. */ :focus-visible { outline: 2px solid var(--obsidian); outline-offset: 0; box-shadow: 0 0 0 4px var(--focus); } img, svg { max-width: 100%; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* accent (#58a6ff) vs text/text-muted both fall under the 3:1 axe requires for a link inline in a text block with no other distinguishing feature — underline it there. */ .muted { color: var(--text-muted); } .muted a, .prose a { text-decoration: underline; } /* Punktlös lista (t.ex. representant-badgen på /organizations/:id, P35). */ .plain { list-style: none; padding: 0; } /* Tabulära siffror (designkontraktet) — .num är en fristående klass för valfri sifferyta utanför table.data/.rating-val/.compare-table (som redan hade sin egen tabular-nums sedan tidigare) att sätta explicit. */ .num { font-variant-numeric: tabular-nums; } /* Sponsormarkering (PROMPT 14/ADR-0022) — en egen visuell roll, aldrig good/warn/bad, så en sponsrad platsering aldrig kan avläsas som ett kvalitetsomdöme. Ingen sida renderar denna än (annonsslot-rendering är PROMPT 28/39-46, se docs/agent/NEXT.md) — klassen finns redo när den ytan byggs, av samma skäl tokens byggs innan riktningen som använder dem. */ .badge.sponsor { color: var(--sponsor); border-color: var(--sponsor); } .sponsor-tag { display: inline-block; padding: var(--space-0) var(--space-2); border-radius: 999px; font-size: var(--type-micro); background: var(--sponsor-bg); color: var(--sponsor); white-space: nowrap; } .ad-slot { border-color: var(--sponsor); background: var(--sponsor-bg); margin-bottom: var(--space-3); } .ad-slot h2 { margin: var(--space-1) 0 0; font-size: var(--type-body); } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: var(--space-3); top: var(--space-3); background: var(--bg-raised); padding: var(--space-2) var(--space-3); border-radius: var(--radius-xs); z-index: var(--z-skip); } /* Standard screen-reader-only pattern (not display:none, which hides it from AT too). */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-3); } .wrap--wide { max-width: var(--maxw-wide); } /* Header */ .site-header { border-bottom: 1px solid var(--border); background: var(--bg-raised); position: sticky; top: 0; z-index: var(--z-header); } .site-header .wrap { display: flex; align-items: center; gap: var(--space-4); min-height: 3.5rem; flex-wrap: wrap; padding-top: var(--space-1); padding-bottom: var(--space-1); } /* CASIN0 Portal mark (ADR-0036 §2) — the trailing "O" becomes a small chromatic ring/portal glyph instead of plain text. Pure CSS/SVG, no WebGL, no JS: the ring's rotation on hover is a CSS transform on an inner , degrades to a static ring under prefers-reduced-motion (the existing global reduced-motion rule already covers it). */ .logo { display: inline-flex; align-items: center; gap: 0.1rem; font-weight: 700; font-size: var(--type-body-l); letter-spacing: 0.05em; color: var(--text); } .logo span { color: var(--accent); } .logo-portal { flex-shrink: 0; } .logo:hover .logo-portal-ring { transform: rotate(35deg); } .header-search { margin-left: var(--space-3); } .header-search input { background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-xs); padding: 0.35rem 0.7rem; min-width: 12rem; font-size: var(--type-small); } /* Sticky compact entity header (ADR-0056) — game/casino detail pages only. Neither page has a .hero block to anchor on (that class is homepage/ prototype-only, see ADR-0056) — this small bar sits in-flow right after the entity's own h1 and becomes sticky once scrolled past, so the entity's name (and, for casinos, a real compare link) stays visible. Stacked as a *second* sticky layer below the already-sticky .site-header (top:0, header-lagret via --z-header, min-height 3.5rem — line 138 above) rather than at top:0 itself, so the two never overlap: top here equals the header's own real height, and z-index (40) sits below the header (50) and below the nav-overlay (60) so an open nav menu always wins. UX-12 correction (2026-09-28): .entity-sticky-bar and .quick-nav (below) used to each be their OWN independent 'position: sticky' element with a different 'top' offset, on the theory that two sticky siblings would naturally stack one below the other. They don't — two independent sticky elements only stay clear of each other while their shared containing block (the page's content
) is tall enough for both to be simultaneously "stuck" without either running out of room; on a real, data-sparse casino (no licenses, no review, no bonuses) the section is short enough that .quick-nav's sticky range collides with .entity-sticky-bar's, and .quick-nav (z-index 39) renders fully hidden behind .entity-sticky-bar (z-index 40) — confirmed via a real rendered layout check (getBoundingClientRect(), real Chromium): a 37px overlap starting around scrollY 260-300px on a 1280px viewport. Fixed at the root instead of tuning offsets again: .entity-sticky-group (web/pages.ts) wraps both as ONE sticky unit — the bar and the nav are now plain, non-sticky children stacked in normal flow *inside* it, so there is only ever one sticky element in this region and nothing for it to collide with. */ .entity-sticky-group { position: sticky; top: 3.5rem; z-index: var(--z-sticky); } .entity-sticky-bar { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 0.4rem var(--space-3); margin: 0 0 var(--space-2); font-size: var(--type-small); font-weight: 600; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .entity-sticky-bar-meta { font-weight: 400; color: var(--text-muted); font-size: var(--type-small); } .entity-sticky-bar-action { margin-left: auto; font-size: var(--type-small); } /* Primary nav (ADR-0040 §L0/L1) — a stable, always-visible top-level bar for the platform's real entity areas (Games/Casinos/Providers/Bonuses), never reordered by fresh content — dynamism lives inside the existing nav-overlay mega-menu and page content, not here. Hidden below the breakpoint where four links plus search plus the hamburger would crowd a phone-width header; the hamburger overlay (ADR-0035) stays the sole nav entry point there, unchanged. */ .primary-nav { display: none; } @media (min-width: 48rem) { .primary-nav { display: flex; align-items: center; gap: var(--space-3); } .primary-nav a { color: rgba(255,255,255,.65); font-size: var(--type-small); font-weight: 600; padding: 0.3rem 0; border-bottom: 2px solid transparent; transition: color var(--motion-micro) var(--ease-out-spectral), border-color var(--motion-micro) var(--ease-out-spectral); } .primary-nav a:hover { color: var(--text); } .primary-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--dna-primary, var(--accent)); } } /* Section secondary navigation (ADR-0055) — a quieter second-tier row under .primary-nav, shown only on pages inside one of the four real catalog sections (secondaryNavFor() in layout.ts). Sits in normal flow directly under .site-header. Deliberately smaller/muted relative to .primary-nav — a subordinate signal, not a second main bar — and hidden below the same 48rem breakpoint: no new nav surface reaches mobile, the hamburger overlay (ADR-0035) stays the sole entry point there. */ .secondary-nav { display: none; } @media (min-width: 48rem) { .secondary-nav { display: block; border-bottom: 1px solid var(--border); background: var(--bg); } .secondary-nav .wrap { display: flex; align-items: center; gap: var(--space-3); min-height: 2.1rem; padding-top: 0.3rem; padding-bottom: 0.3rem; } .secondary-nav a { color: var(--text-muted); font-size: var(--type-small); font-weight: 500; padding: 0.15rem 0; border-bottom: 2px solid transparent; transition: color var(--motion-micro) var(--ease-out-spectral), border-color var(--motion-micro) var(--ease-out-spectral); } .secondary-nav a:hover { color: var(--text); } .secondary-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--dna-primary, var(--accent)); } } /* Nav overlay (ADR-0035) — zero-JS full-screen menu via
/, modeled on siax.io's own menu (real, native HTML disclosure semantics: keyboard-operable, and screen readers get open/closed state for free — no ARIA or JS needed to announce it). */ .nav-menu { margin-left: auto; position: relative; } .nav-menu-toggle { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; list-style: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-xs); color: var(--text); user-select: none; } .nav-menu-toggle::-webkit-details-marker { display: none; } .nav-menu-toggle::marker { content: ''; } .nav-menu-toggle:hover { background: var(--bg-card); } .nav-menu-icon { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 20px; } .nav-menu-icon span { display: block; height: 2px; background: currentColor; border-radius: 1px; transition: transform var(--motion-micro) var(--ease-out-spectral), opacity var(--motion-micro) var(--ease-out-spectral); } .nav-menu[open] .nav-menu-icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-menu[open] .nav-menu-icon span:nth-child(2) { opacity: 0; } .nav-menu[open] .nav-menu-icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .nav-menu-label-close { display: none; } .nav-menu[open] .nav-menu-label-open { display: none; } .nav-menu[open] .nav-menu-label-close { display: inline; } /* Level 3 Prism Glass (kanon §8.2/§8.7) — see the material & depth token block below for the BEFORE_STATE and rationale. -webkit- prefix kept alongside the unprefixed property for Safari, which still requires it. */ .nav-overlay { position: fixed; inset: 3.5rem 0 0; z-index: var(--z-overlay); background: var(--depth-3-bg); -webkit-backdrop-filter: blur(var(--depth-3-blur)); backdrop-filter: blur(var(--depth-3-blur)); box-shadow: inset 0 1px 0 var(--depth-3-sheen), var(--elev-overlay); overflow-y: auto; border-top: 1px solid var(--depth-3-border); } /* Deliberately NOT the shared .wrap class (real bug found + fixed this pass): .nav-overlay-inner sits inside .site-header in the DOM (position:fixed only changes paint position, not CSS descendant-selector matching), so reusing .wrap here also matched the higher-specificity ".site-header .wrap" flex rule and silently turned every child into a wrapping flex item — the actual cause of a "grid" that rendered as a half-width, offset column no matter what grid-template-columns value was set. Same max-width/centering intent as .wrap, redeclared under its own class name instead. */ .nav-overlay-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-3); padding-top: var(--space-5); padding-bottom: var(--space-5); } .nav-eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--type-micro); color: var(--accent); margin: var(--space-4) 0 var(--space-1); } .nav-eyebrow:first-child { margin-top: 0; } .nav-overlay-heading { font-size: var(--type-h3); margin: 0 0 var(--space-4); } /* Explicit, media-query-driven column counts rather than repeat(auto-fit, minmax(...)) — a deliberate, simple choice for a short, known list (never data-driven), not a workaround for anything broken. */ .nav-areas-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-bottom: var(--space-4); } .nav-area-card { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); transition: border-color var(--motion-card) var(--ease-out-spectral), box-shadow var(--motion-card) var(--ease-out-spectral); } .nav-area-card:hover, .nav-area-card[aria-current="page"] { border-color: var(--dna-primary, var(--accent)); box-shadow: 0 0 28px -10px color-mix(in srgb, var(--dna-primary, var(--accent)) 40%, transparent); text-decoration: none; } .nav-area-num { font-size: var(--type-micro); color: var(--text-muted); font-variant-numeric: tabular-nums; } .nav-area-card strong { font-size: var(--type-body-l); } .nav-area-desc { color: var(--text-muted); font-size: var(--type-small); } /* UX-18/UX-19: browse-zonen är grupperad, inte en platt länklista. Grupperna kommer ur nav-registry.ts, så kolumnerna kan inte hamna i otakt med vad navigationen faktiskt länkar. Varje grupp är sin egen