/* css/ny.css — det nya skalet (2026-09-14), handskrivet som css/karta.css. * * Portering av designpaketet "Landningssidan redesign" (design/_ds/…/tokens/* * + de tio .dc.html-prototyperna). Laddas EFTER sidans .min.css på de * tio omgjorda sidorna (body.mm-ny): min.css behåller bara det shared.js * fortfarande ritar (sajtsöket, Sparat-popupen, cookie-banderollen) plus * globalerna; allt synligt här är .ny-*. Kartvyn rör den aldrig. * * Regler ur handoffen: hårdkoda aldrig hex i markup, läs allt via var(--token). Mörkt läge är default, ljust sätts med [data-theme="light"] på * (samma attribut sajten redan använder). Hover = ett steg ljusare * alfalager, aktivt = accentalfa + accenttext. Bara background/color/opacity/ * width/height animeras; prefers-reduced-motion nollar allt. * * Avvikelser från prototypen står i TODO-flyttat.md §Diff. */ /* ===================================================================== 1. TOKENS — ordagrant ur design/_ds/tokens/{colors,typography,glass,shape}.css ===================================================================== */ :root { --font-display: Fraunces, Georgia, 'Times New Roman', serif; --font-ui: Inter, system-ui, -apple-system, sans-serif; --type-display-lg: 600 26px/1.1 var(--font-display); --type-display: 600 20px/1.15 var(--font-display); --type-title: 600 17px/1.15 var(--font-display); --type-panel-title: 600 15px/1.2 var(--font-display); --display-tracking: -0.01em; --type-kicker: 500 10.5px/1 var(--font-ui); --type-kicker-sm: 500 8.5px/1 var(--font-ui); --kicker-tracking: 0.09em; --kicker-tracking-wide: 0.16em; --type-body: 400 13px/1.4 var(--font-ui); --type-body-sm: 400 12px/1.45 var(--font-ui); --type-meta: 400 11.5px/1.35 var(--font-ui); --type-label: 500 13px/1.25 var(--font-ui); --type-chip: 500 11.5px/1 var(--font-ui); --type-button: 500 12.5px/1 var(--font-ui); --numeric: tabular-nums; /* Ytor */ --s-deep: #0e0c09; --s-map: #2b2418; --s-seg: rgba(255,255,255,0.06); /* Förgrund, ljusast → dämpad */ --fg-1: #fdfaf4; --fg-1b: #f7f2e8; --fg-1c: #f5efe4; --fg-2: #f2ebdf; --fg-2b: #f0e9dd; --fg-3: #e7dfd2; --fg-4: #cdc4b6; --fg-4b: #cec5b7; --fg-4c: #cbc2b4; --fg-5: #c6bdae; --fg-5b: #b8afa0; --fg-5c: #b6ad9d; --fg-6: #aaa196; --fg-6b: #a59c90; --fg-7: #9d9488; --fg-8: #8f8779; --fg-9: #7d766a; /* Accent — varm terrakotta. Systemet har EN accent. */ --a-1: #f5d9c4; --a-2: #f0bd99; --a-2b: #f0b48f; --a-2c: #efb28c; --a-3: #e9b28c; --a-4: #e5a077; --a-5: #c98a63; --a-6: #d6c0ad; --a-7: #c6a891; --a-8: #bfa48f; --a-9: #a1927f; --on-accent: #1c1813; /* Neutrala alfalager */ --w-045: rgba(255,255,255,0.045); --w-05: rgba(255,255,255,0.05); --w-055: rgba(255,255,255,0.055); --w-06: rgba(255,255,255,0.06); --w-065: rgba(255,255,255,0.065); --w-07: rgba(255,255,255,0.07); --w-08: rgba(255,255,255,0.08); --w-09: rgba(255,255,255,0.09); --w-10: rgba(255,255,255,0.1); --w-11: rgba(255,255,255,0.11); --w-12: rgba(255,255,255,0.12); --w-13: rgba(255,255,255,0.13); --w-14: rgba(255,255,255,0.14); --w-15: rgba(255,255,255,0.15); /* Accentalfalager */ --aw-10: rgba(229,160,119,0.1); --aw-12: rgba(229,160,119,0.12); --aw-13: rgba(229,160,119,0.13); --aw-14: rgba(229,160,119,0.14); --aw-16: rgba(229,160,119,0.16); --aw-18: rgba(229,160,119,0.18); --aw-20: rgba(229,160,119,0.2); --aw-22: rgba(229,160,119,0.22); --aw-24: rgba(229,160,119,0.24); --aw-32: rgba(229,160,119,0.32); --aw-42: rgba(229,160,119,0.42); /* Skuggor */ --sh-20: rgba(0,0,0,0.2); --sh-40: rgba(0,0,0,0.4); --sh-42: rgba(0,0,0,0.12); --sh-45: rgba(0,0,0,0.45); --sh-50: rgba(0,0,0,0.5); --sh-55: rgba(0,0,0,0.55); /* Kartnålar och markörer */ --n-14: rgba(241,235,224,0.14); --n-18: rgba(253,250,244,0.18); --n-32: rgba(241,235,224,0.32); --n-50: rgba(241,235,224,0.5); /* Glas */ --glass-tint: 20,17,14; --glass-blur: 18px; --header-blur: 18px; --g-50: rgba(20,17,14,0.24); --g-58: rgba(20,17,14,0.30); --g-66: rgba(20,17,14,0.40); --g-70: rgba(20,17,14,0.44); --g-74: rgba(20,17,14,0.54); --s-panel: rgba(20,17,14,0.30); --header-bg: rgba(20,17,14,0.70); --edge-hi: rgba(255,255,255,0.2); --edge-lo: rgba(0,0,0,0.1); --glass-panel-shadow: 0 18px 44px var(--sh-45); --glass-pop-shadow: 0 14px 34px var(--sh-40); --tile-filter: saturate(1.05) brightness(1.01); /* Form och rytm */ --r-row: 10px; --r-btn: 11px; --r-ctl: 12px; --r-panel: 18px; --r-frame: 22px; --r-pill: 999px; --r-icon: 11px; --icon-btn-size: 34px; --icon-stroke: 1.6; --sp-1: 4px; --sp-2: 6px; --sp-3: 8px; --sp-4: 10px; --sp-5: 14px; --sp-6: 16px; --sp-7: 22px; --panel-pad: 16px; --row-pad: 8px; --gap-tight: 6px; --gap: 10px; --gap-loose: 14px; --ease: cubic-bezier(0.22, 0.8, 0.28, 1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms; /* Tempot i bakgrunden och scenen (0.2–2.5, 1 = normal). */ --mm-h: 1; } [data-theme="light"] { --s-deep: #ffffff; --s-map: #e8e0d2; --s-seg: #ffffff; --on-accent: #ffffff; --fg-1: #0b1f3a; --fg-1b: #0b1f3a; --fg-1c: #0b1f3a; --fg-2: #17253f; --fg-2b: #17253f; --fg-3: #22304a; --fg-4: #3d4759; --fg-4b: #454e60; --fg-4c: #4a5364; --fg-5: #4f5768; --fg-5b: #565e6c; --fg-5c: #585f6d; --fg-6: #6b6a63; --fg-6b: #6f6d64; --fg-7: #7a776c; --fg-8: #8a8578; --fg-9: #a9a294; --a-1: #8f4527; --a-2: #9c4b2c; --a-2b: #9c4b2c; --a-2c: #a44f2e; --a-3: #b65c3a; --a-4: #b65c3a; --a-5: #c06842; --a-6: #8a6a55; --a-7: #8f6c54; --a-8: #94705a; --a-9: #8a7460; --w-045: rgba(11,31,58,0.035); --w-05: rgba(11,31,58,0.04); --w-055: rgba(11,31,58,0.045); --w-06: rgba(11,31,58,0.05); --w-065: rgba(11,31,58,0.055); --w-07: rgba(11,31,58,0.08); --w-08: rgba(11,31,58,0.06); --w-09: rgba(255,255,255,0.72); --w-10: rgba(255,255,255,0.78); --w-11: rgba(11,31,58,0.08); --w-12: rgba(11,31,58,0.13); --w-13: rgba(11,31,58,0.1); --w-14: rgba(11,31,58,0.15); --w-15: rgba(11,31,58,0.12); --aw-10: rgba(182,92,58,0.08); --aw-12: rgba(182,92,58,0.1); --aw-13: rgba(182,92,58,0.11); --aw-14: rgba(182,92,58,0.12); --aw-16: rgba(182,92,58,0.13); --aw-18: rgba(182,92,58,0.14); --aw-20: rgba(182,92,58,0.15); --aw-22: rgba(182,92,58,0.17); --aw-24: rgba(182,92,58,0.18); --aw-32: rgba(182,92,58,0.3); --aw-42: rgba(182,92,58,0.42); --sh-20: rgba(11,31,58,0.07); --sh-40: rgba(11,31,58,0.11); --sh-42: rgba(11,31,58,0.12); --sh-45: rgba(11,31,58,0.13); --sh-50: rgba(11,31,58,0.14); --sh-55: rgba(251,248,243,0.75); --n-50: rgba(11,31,58,0.45); --n-32: rgba(120,160,190,0.5); --n-14: rgba(11,31,58,0.12); --n-18: rgba(11,31,58,0.1); --glass-tint: 255,255,255; --g-50: rgba(255,255,255,0.55); --g-58: rgba(255,255,255,0.62); --g-66: rgba(255,255,255,0.70); --g-70: rgba(255,255,255,0.76); --g-74: rgba(255,255,255,0.82); --s-panel: rgba(255,255,255,0.62); --header-bg: rgba(255,255,255,0.7); --edge-hi: rgba(255,255,255,0.85); --edge-lo: rgba(11,31,58,0.07); } /* ===================================================================== 2. SIDRAM — body, bakgrundslagren, scrollbar, fokus ===================================================================== */ body.mm-ny { margin: 0; background: var(--s-deep); color: var(--fg-2); font-family: var(--font-ui); line-height: 1.4; transition: none; } /* :where() = specificitet 0, så .ny-*-klasserna alltid vinner över elementresetten. */ :where(body.mm-ny *) { box-sizing: border-box; } :where(body.mm-ny input, body.mm-ny button) { font-family: var(--font-ui); } :where(body.mm-ny a) { color: var(--a-4); text-decoration: none; } :where(body.mm-ny a:hover) { color: var(--a-2); } :where(body.mm-ny svg) { stroke-width: 1.6; } :where(body.mm-ny h1, body.mm-ny h2, body.mm-ny h3, body.mm-ny p) { margin: 0; } :where(body.mm-ny button) { border: 0; background: none; color: inherit; cursor: pointer; font: inherit; } body.mm-ny a:focus-visible, body.mm-ny input:focus-visible, body.mm-ny button:focus-visible, body.mm-ny [tabindex]:focus-visible { outline: 2px solid var(--a-4); outline-offset: 3px; } :root:has(body.mm-ny) { scrollbar-color: var(--w-15) transparent; scrollbar-width: thin; scroll-behavior: smooth; } :root:has(body.mm-ny)::-webkit-scrollbar { width: 12px; height: 12px; background: transparent; } :root:has(body.mm-ny)::-webkit-scrollbar-track { background: transparent; } :root:has(body.mm-ny)::-webkit-scrollbar-thumb { border: 4px solid transparent; border-radius: 999px; background-clip: content-box; background-color: var(--w-15); transition: background-color var(--dur-fast) var(--ease); } :root:has(body.mm-ny)::-webkit-scrollbar-thumb:hover { background-color: var(--aw-42); } :root:has(body.mm-ny)::-webkit-scrollbar-corner { background: transparent; } .ny-rot { position: relative; /* Ingen container-type: den gör roten till containing block för position: fixed (statistikens fokusläge, kommunsidans flytande karta, Spotlight) — de hamnade relativt sidan i stället för fönstret. vw ⇒ vw. */ min-height: 100dvh; padding: 12px clamp(12px, 1.4vw, 56px) 0; background: var(--s-deep); /* clip, inte hidden: hidden gör roten till scroll-container och dödar position: sticky i allt under den (kommunsidans kapitelnav, #492-provet). */ overflow: clip; } @media (max-width: 480px) { .ny-rot { padding: 8px 8px 0; } } .ny-topp-ankare { position: absolute; top: 0; left: 0; width: 1px; height: 1px; } .ny-topo { position: fixed; inset: 0; z-index: -2; width: 100%; height: 100vh; pointer-events: none; background: var(--s-deep); } .ny-glasskiva { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: rgba(var(--glass-tint), 0.46); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); box-shadow: inset 0 1px 0 var(--edge-hi); } [data-theme="light"] .ny-glasskiva { background: rgba(255,255,255,0.3); } .ny-main { position: relative; z-index: 1; } .ny-tab { font-variant-numeric: tabular-nums; } .ny-dold { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* Lucide-ikoner (js/ny-skal.js ritar dem ur data-lucide): 1.6 streck, currentColor. */ .ny-i { display: inline-block; width: 16px; height: 16px; flex: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none; vertical-align: middle; } /* ===================================================================== 3. HEADER (role="banner") ===================================================================== */ .ny-hdr { position: relative; z-index: 60; display: flex; align-items: center; gap: clamp(10px, 1.6vw, 24px); max-width: min(100%, 2584px); margin: 0 auto; padding: 10px 12px 10px 16px; border-radius: var(--r-panel); background: rgba(var(--glass-tint), 0.62); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-top: 1px solid var(--edge-hi); border-bottom: 1px solid var(--edge-lo); box-shadow: var(--glass-panel-shadow); } /* Startsidans header ligger absolut i toppen av heroramen, tunnare glas. */ .ny-hdr--hero { position: absolute; left: 0; right: 0; top: 0; z-index: 6; max-width: none; margin: 0; background: rgba(var(--glass-tint), 0.4); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-top: 0; box-shadow: none; } .ny-hdr__brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; } .ny-hdr__brand:hover { color: inherit; } .ny-hdr__logo { width: 30px; height: 20px; flex: none; object-fit: contain; } .ny-logo--ljus { display: none; } [data-theme="light"] .ny-logo--ljus { display: block; } [data-theme="light"] .ny-logo--mork { display: none; } .ny-hdr__lockup { display: flex; flex-direction: column; gap: 3px; } .ny-hdr__namn { font: 600 17px/1 var(--font-display); letter-spacing: -0.01em; color: var(--fg-1b); } .ny-hdr__kicker { font: var(--type-kicker-sm); letter-spacing: var(--kicker-tracking-wide); text-transform: uppercase; white-space: nowrap; color: var(--fg-8); } .ny-hdr__meny { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; margin-left: auto; flex: none; border-radius: var(--r-icon); background: var(--w-06); color: var(--fg-4); } .ny-hdr__meny[aria-expanded="true"] { background: var(--aw-18); color: var(--a-2b); } .ny-hdr__meny .ny-i { width: 17px; height: 17px; } .ny-nav { display: flex; align-items: center; justify-content: flex-start; flex: 1 1 auto; gap: 2px; min-width: 0; } .ny-nav__a { flex: none; padding: 9px 12px; border-radius: 999px; font: var(--type-label); white-space: nowrap; color: var(--fg-5); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .ny-nav__a:hover { background: var(--w-06); color: var(--fg-2); } .ny-nav__a.is-aktiv { color: var(--fg-1); background: var(--w-06); } .ny-nav__a.is-aktiv:hover { background: var(--w-12); } .ny-hdr__hoger { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; flex: 0 0 auto; } .ny-ikon { width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--w-06); color: var(--fg-4); cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .ny-ikon:hover { background: var(--w-12); color: var(--fg-1c); } .ny-ikon .ny-i { width: 16px; height: 16px; } .ny-ikon--tema { background: var(--aw-12); color: var(--a-4); } .ny-ikon--tema:hover { background: var(--aw-24); color: var(--a-4); } .ny-hdr .kk2-saved-btn { order: 0; width: 34px; height: 34px; min-width: 0; padding: 0; margin: 0; border: 0; gap: 0; border-radius: 999px; box-shadow: none; font: inherit; } .ny-ikon--spara.kk2-saved-btn--has { background: var(--aw-24); color: var(--a-4); } /* Sparat-räknaren: shared.js skriver antalet i #saved-btn-count; designen visar bara ikonen. */ .ny-ikon--spara .kk2-saved-btn__count, .ny-ikon--spara .kk2-saved-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .ny-sprak { min-width: 34px; height: 34px; padding: 0 10px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--w-06); font: 500 11.5px/1 var(--font-ui); letter-spacing: 0.08em; color: var(--fg-4); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .ny-sprak:hover { background: var(--w-12); color: var(--fg-1c); } @media (max-width: 1024px) { .ny-hdr { flex-wrap: nowrap; } .ny-nav { flex: 1 1 0; min-width: 0; overflow-x: auto; scrollbar-width: none; } .ny-nav::-webkit-scrollbar { display: none; } } @media (max-width: 700px) { .ny-hdr { flex-wrap: wrap; row-gap: 0; gap: 8px; padding-inline: 10px; } .ny-hdr__meny { display: inline-flex; } .ny-nav { display: none; } .ny-nav.is-oppen { display: flex; position: static; flex: 1 1 100%; order: 3; flex-direction: column; align-items: stretch; gap: 2px; margin-top: 8px; padding: 6px; max-height: 58dvh; overflow-y: auto; border-radius: var(--r-panel); background: var(--w-06); border-top: 1px solid var(--edge-hi); } .ny-nav.is-oppen .ny-nav__a { display: flex; align-items: center; min-height: 44px; padding: 11px 14px; } } @media (max-width: 480px) { /* 390 px: brand + hamburgare + fyra ikonknappar får inte plats på en rad med kickern kvar. */ .ny-hdr__kicker { display: none; } .ny-hdr__brand { gap: 8px; } .ny-hdr__namn { font-size: 15px; } .ny-hdr__hoger { gap: 6px; } } /* ===================================================================== 4. FÄST SEKTIONSNAV ===================================================================== */ .ny-navhallare { position: relative; z-index: 30; max-width: min(100%, 2584px); height: 50px; margin: clamp(24px, 3vw, 40px) auto 0; } .ny-navhallare--tat { margin-top: clamp(14px, 2vw, 22px); } .ny-snav { position: absolute; top: 0; left: 12px; right: 12px; z-index: 40; padding: 7px; border-radius: 999px; background: rgba(var(--glass-tint), 0.62); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-top: 1px solid var(--edge-hi); box-shadow: var(--glass-panel-shadow); } .ny-snav.is-fast { position: fixed; top: 12px; left: 50%; right: auto; width: min(2560px, calc(100% - 24px)); transform: translateX(-50%); } .ny-snav__rad { display: flex; align-items: center; gap: 3px; overflow-x: auto; scrollbar-width: none; } .ny-snav__rad::-webkit-scrollbar { display: none; } .ny-snav__a { flex: none; padding: 9px 15px; border-radius: 999px; font: 500 12.5px/1.2 var(--font-ui); white-space: nowrap; color: var(--fg-6); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .ny-snav__a:hover { background: var(--w-06); color: var(--fg-2); } .ny-snav__a.is-aktiv { background: var(--aw-14); color: var(--a-4); } /* ===================================================================== 5. PRIMITIV — panel, rubrikblock, kicker, kort, rad, stapel, knappar, chips ===================================================================== */ .ny-panel { position: relative; z-index: 1; max-width: min(100%, 2560px); margin: clamp(56px, 6vw, 96px) auto 0; } .ny-panel--forst { margin-top: clamp(20px, 2.6vw, 34px); } .ny-block { margin-top: clamp(40px, 5vw, 76px); } @media (max-width: 699px) { .ny-block { margin-top: 40px; } } @media (min-width: 700px) and (max-width: 1099px) { .ny-block { margin-top: 42px; } } .ny-kicker { display: block; font: var(--type-kicker); letter-spacing: var(--kicker-tracking); text-transform: uppercase; color: var(--fg-8); } .ny-kicker--bred { letter-spacing: var(--kicker-tracking-wide); } .ny-kicker--accent { color: var(--a-4); } .ny-kicker--liten { font: var(--type-kicker-sm); white-space: nowrap; } .ny-kicker--ikon { display: flex; align-items: center; gap: 9px; } .ny-kicker--ikon .ny-i { width: 16px; height: 16px; } .ny-h2 { margin: 20px 0 0; font-family: var(--font-ui); font-weight: 500; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.07; letter-spacing: -0.034em; color: var(--fg-1b); text-wrap: pretty; } .ny-h2--serif { margin: clamp(16px, 2vw, 26px) 0 0; max-width: 640px; font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3.2vw, 44px); letter-spacing: -0.012em; } .ny-h2--under { margin-top: 18px; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -0.03em; } .ny-topp { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(20px, 4vw, 64px); flex-wrap: wrap; } .ny-topp__v { flex: 1 1 460px; min-width: 0; } .ny-topp__v--440 { flex-basis: 440px; } .ny-topp__v--420 { flex-basis: 420px; } .ny-innehall { margin-top: clamp(24px, 3vw, 40px); } .ny-innehall--tat { margin-top: clamp(26px, 3vw, 40px); } .ny-kort-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; } .ny-kort-grid--200 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); } .ny-kort-grid--260 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .ny-kort-grid--268 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr)); } .ny-kort-grid--280 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } .ny-kort-grid--300 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; } .ny-kort-grid--320 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; } .ny-kort-grid--fyll { grid-auto-flow: row; } .ny-kort-grid--fyll-300 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } .ny-kort-grid--fyll-320 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); } .ny-kort-grid--fyll-280 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); } .ny-kort-grid--190 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); } .ny-kort { display: block; padding: 22px; border-radius: var(--r-panel); background: var(--w-045); border-top: 1px solid var(--edge-hi); color: var(--fg-4); transition: background var(--dur) var(--ease); } a.ny-kort:hover, .ny-kort--hover:hover { background: var(--w-08); color: var(--fg-4); } .ny-kort--kolumn { display: flex; flex-direction: column; } .ny-kort--p20 { padding: 20px; } .ny-kort--p18 { padding: 18px; } .ny-kort--tint { background: var(--aw-10); } a.ny-kort--tint:hover { background: var(--aw-24); } .ny-kort__ikon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--r-btn); background: var(--aw-14); color: var(--a-4); } .ny-kort__ikon .ny-i { width: 16px; height: 16px; } .ny-kort__ikon--rund { border-radius: 999px; } .ny-kort__ikon--38 { width: 38px; height: 38px; } .ny-kort__ikon--38 .ny-i { width: 17px; height: 17px; } .ny-kort__ikon--40 { width: 40px; height: 40px; } .ny-kort__ikon--40 .ny-i { width: 18px; height: 18px; } .ny-kort__ikon--46 { width: 46px; height: 46px; } .ny-kort__ikon--46 .ny-i { width: 20px; height: 20px; } .ny-kort__ikon--30 { width: 30px; height: 30px; } .ny-kort__ikon--30 .ny-i { width: 15px; height: 15px; } .ny-kort__titel { display: block; margin-top: 16px; font: 600 16px/1.25 var(--font-display); letter-spacing: -0.01em; color: var(--fg-1b); text-wrap: pretty; } .ny-kort__text { margin: 9px 0 16px; font: 400 13px/1.6 var(--font-ui); color: var(--fg-6); text-wrap: pretty; } .ny-kort__fot { display: block; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--w-07); font: var(--type-kicker-sm); letter-spacing: var(--kicker-tracking); text-transform: uppercase; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--fg-8); } .ny-kort__huvud { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ny-kort__pil { display: flex; opacity: 0.4; } .ny-kort__pil .ny-i { width: 15px; height: 15px; } .ny-rad { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 13px 8px; margin: 0 -8px; border-top: 1px solid var(--w-07); border-radius: var(--r-row); color: inherit; transition: background var(--dur-fast) var(--ease); } .ny-rad:hover { background: var(--w-06); color: inherit; } .ny-rad--15 { padding: 15px 8px; } .ny-rad--14 { padding: 14px 8px; align-items: center; } .ny-rad--12 { padding: 12px 8px; gap: 12px; } .ny-rad--vanster { justify-content: flex-start; } .ny-rad--vanster .ny-rad__meta { white-space: normal; } .ny-rad--grid { display: grid; grid-template-columns: minmax(0,1fr) auto auto; } .ny-rad__namn { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: var(--fg-1b); } .ny-rad__namn--klipp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ny-rad__namn--sans { font: 400 13px/1.4 var(--font-ui); color: var(--fg-6); } .ny-rad__meta { font: 400 12.5px/1.2 var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--fg-7); } .ny-rad__meta--liten { font-size: 11.5px; color: var(--fg-8); } .ny-rad__varde { font: 500 13px/1.2 var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--fg-1b); } .ny-rad__varde--accent { color: var(--a-2b); } @media (max-width: 880px) { .ny-rad--grid { grid-template-columns: minmax(0,1fr) auto; } .ny-rad__meta[data-mm="rad-meta"] { display: none; } } .ny-stapel { height: 6px; border-radius: 999px; background: var(--w-07); overflow: hidden; } .ny-stapel__fyll { height: 100%; border-radius: 999px; background: var(--aw-42); } .ny-stapel__fyll--neutral { background: var(--w-15); } .ny-btn { display: inline-flex; align-items: center; gap: 7px; padding: 13px 19px; border-radius: 999px; background: var(--a-4); font: var(--type-button); white-space: nowrap; color: var(--on-accent); cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); } .ny-btn:hover { background: var(--a-3); color: var(--on-accent); } .ny-btn .ny-i { width: 14px; height: 14px; } .ny-btn--20 { padding: 13px 20px; gap: 8px; } .ny-btn--sek { background: var(--w-06); color: var(--fg-4); } .ny-btn--sek:hover { background: var(--w-12); color: var(--fg-4); } .ny-btn--sek.ny-btn--ljusnar:hover { color: var(--fg-2); } .ny-btn--liten { padding: 12px 17px; } .ny-btn--ctl { padding: 10px 14px; border-radius: var(--r-ctl); gap: 6px; } .ny-btn--ctl-h { padding: 12px 18px; border-radius: var(--r-ctl); gap: 6px; } .ny-btn--ctl-b { padding: 13px 18px; border-radius: var(--r-ctl); gap: 6px; } .ny-btn--ctl-s { padding: 11px 16px; border-radius: var(--r-ctl); gap: 6px; } .ny-btn--tint { padding: 11px 18px; border-radius: var(--r-btn); background: var(--aw-12); color: var(--a-4); gap: 8px; } .ny-btn--tint:hover { background: var(--aw-24); color: var(--a-4); } .ny-btn--rutig { padding: 12px 20px; border-radius: var(--r-btn); font-size: 13px; gap: 9px; } .ny-btn--rutig .ny-i { width: 15px; height: 15px; } .ny-btn--rutig:not(.ny-btn--sek):hover { background: var(--a-4); opacity: 0.88; } .ny-btn--rutig.ny-btn--sek { padding: 12px 18px; gap: 8px; } .ny-btn--rutig.ny-btn--sek:hover { color: var(--fg-2); } /* [data-mm="cta"] i prototypen: i ljust läge blir accentknappen halvtransparent. */ [data-theme="light"] .ny-btn--cta { background: color-mix(in oklab, var(--a-4) 68%, transparent); color: var(--fg-1b); } [data-theme="light"] .ny-btn--cta:hover { background: color-mix(in oklab, var(--a-4) 82%, transparent); } @media (max-width: 700px) { .ny-btn--cta { min-height: 44px; justify-content: center; } } .ny-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; white-space: nowrap; font: var(--type-chip); background: var(--w-06); color: var(--fg-5); cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .ny-chip:hover { background: var(--w-12); color: var(--fg-5); } .ny-chip.is-vald { background: var(--aw-18); color: var(--a-2b); } .ny-chip .ny-i { width: 13px; height: 13px; } .ny-chip--stum { cursor: default; padding: 6px 10px; color: var(--fg-6); } .ny-chip--stum:hover { background: var(--w-06); color: var(--fg-6); } .ny-chip--accent { padding: 6px 11px; background: var(--aw-10); color: var(--a-2b); cursor: default; } .ny-chip--accent:hover { background: var(--aw-10); color: var(--a-2b); } .ny-chip--glas { padding: 7px 12px; gap: 7px; background: rgba(var(--glass-tint), 0.4); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-top: 1px solid var(--edge-hi); color: var(--fg-3); pointer-events: none; } .ny-chiprad { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ny-chiprad__nollstall { margin-left: 4px; font: var(--type-meta); color: var(--fg-8); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .ny-seg { display: flex; align-items: center; gap: 3px; padding: 3px; border-radius: 999px; background: var(--w-06); } .ny-seg__a { padding: 8px 13px; border-radius: 999px; white-space: nowrap; font: var(--type-chip); color: var(--fg-6); cursor: pointer; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .ny-seg__a:hover { color: var(--fg-3); } .ny-seg__a.is-vald { background: var(--a-4); color: var(--on-accent); } .ny-falt { flex: 1; min-width: 240px; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: var(--r-ctl); background: var(--w-06); border-top: 1px solid var(--edge-hi); color: var(--fg-7); } .ny-falt input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font: 400 13.5px/1 var(--font-ui); color: var(--fg-2); } .ny-falt input::placeholder { color: var(--fg-7); } .ny-falt input:focus-visible { outline: none; } .ny-falt:focus-within { outline: 2px solid var(--a-4); outline-offset: 3px; } .ny-glas { border-radius: var(--r-panel); background: var(--s-panel); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-top: 1px solid var(--edge-hi); border-bottom: 1px solid var(--edge-lo); padding: 16px; } .ny-glas--skugga { box-shadow: var(--glass-panel-shadow); } .ny-glas--p20 { padding: 20px 22px 22px; } .ny-glas--p18 { padding: 18px; } .ny-glas--lista { padding: 8px 16px 12px; } .ny-glas__titel { display: block; font: var(--type-panel-title); letter-spacing: -0.01em; color: var(--fg-1b); } .ny-glas__topp { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; } .ny-meta { font: var(--type-meta); color: var(--fg-8); } .ny-meta--tab { font-variant-numeric: tabular-nums; } .ny-fotnot { margin: 22px 0 0; max-width: 84ch; font: var(--type-meta); color: var(--fg-8); } .ny-sektionsrad { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 40px; flex-wrap: wrap; } .ny-sektionsrad + * { margin-top: 16px; } .ny-listfot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 16px; border-top: 1px solid var(--w-07); margin-top: 6px; flex-wrap: wrap; } .ny-brod { font: 400 13.5px/1.7 var(--font-ui); color: var(--fg-5); text-wrap: pretty; } .ny-siffra { font: 500 21px/1 var(--font-ui); letter-spacing: -0.012em; font-variant-numeric: tabular-nums; color: var(--fg-1b); } .ny-siffra--accent { color: var(--a-2b); } .ny-matvarde { display: flex; flex-direction: column; gap: 6px; } .ny-matvarde .ny-kicker--liten { margin-top: 0; } /* Övrigt innehåll (handoffens regel 3): det som inte fick plats i designen ligger längst ner under kickern "övrigt innehåll", aldrig raderat. */ .ny-ovrigt { } .ny-ovrigt__inre { margin-top: clamp(24px, 3vw, 40px); } /* ===================================================================== 6. NYHETSBREVSBLOCK ===================================================================== */ .ny-brev { display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 4vw, 56px); padding: clamp(26px, 3vw, 36px); border-radius: var(--r-panel); background: var(--w-045); border-top: 1px solid var(--edge-hi); flex-wrap: wrap; } .ny-brev__v { flex: 1 1 320px; min-width: 0; } .ny-brev__v--300 { flex-basis: 300px; } .ny-brev__titel { display: block; margin-top: 14px; font: 600 24px/1.15 var(--font-display); letter-spacing: -0.01em; color: var(--fg-1b); } .ny-brev__text { margin: 10px 0 0; max-width: 46ch; font: 400 13px/1.6 var(--font-ui); color: var(--fg-6); } .ny-brev__text--44 { max-width: 44ch; } .ny-brev__falt { flex: 1 1 340px; min-width: 280px; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 18px; border-radius: 999px; background: var(--g-70); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-top: 1px solid var(--edge-hi); color: var(--fg-7); } .ny-brev__falt .ny-i { width: 16px; height: 16px; } .ny-brev__falt input { flex: 1; min-width: 0; height: 38px; border: none; background: transparent; outline: none; font: 400 14px/1 var(--font-ui); color: var(--fg-2); } .ny-brev__falt input::placeholder { color: var(--fg-7); } .ny-brev__falt .ny-btn { padding: 13px 18px; } .ny-brev__falt:focus-within { outline: 2px solid var(--a-4); outline-offset: 3px; } .ny-brev__falt input:focus-visible { outline: none; } /* shared.initNewsletter() skriver tack-raden som .footer-newsletter__msg */ .ny-brev .footer-newsletter__msg { flex: 1 1 100%; margin-top: 8px; font: var(--type-meta); color: var(--a-4); opacity: 0; transition: opacity var(--dur) var(--ease); } .ny-brev .footer-newsletter__msg.is-visible { opacity: 1; } /* ===================================================================== 7. SIDFOT (role="contentinfo") ===================================================================== */ .ny-fot { position: relative; z-index: 1; overflow: hidden; margin: clamp(56px, 6vw, 96px) 0 12px; padding: clamp(30px, 4vw, 44px) clamp(24px, 3.5vw, 40px) clamp(24px, 3vw, 32px); border-radius: var(--r-frame); background: rgba(var(--glass-tint), 0.18); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-top: 1px solid var(--edge-hi); border-bottom: 1px solid var(--edge-lo); } .ny-fot__inre { position: relative; z-index: 1; max-width: min(100%, 2560px); margin: 0 auto; } .ny-fot__topp { display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(30px, 5vw, 90px); flex-wrap: wrap; } .ny-fot__brand { flex: 1 1 300px; min-width: 0; } .ny-fot__lockup { display: flex; align-items: center; gap: 12px; } .ny-fot__logo { width: 40px; height: 27px; flex: none; object-fit: contain; } .ny-fot__namn { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.015em; color: var(--fg-1b); } .ny-fot__kicker { display: block; margin-top: 14px; font: var(--type-kicker); letter-spacing: var(--kicker-tracking-wide); text-transform: uppercase; color: var(--fg-8); } .ny-fot__text { margin: 18px 0 0; max-width: 34ch; font: 400 13px/1.65 var(--font-ui); color: var(--fg-6); } .ny-fot__kolumner { display: flex; gap: clamp(28px, 4vw, 64px); flex-wrap: wrap; } .ny-fot__kol { display: flex; flex-direction: column; gap: 13px; list-style: none; margin: 0; padding: 0; } .ny-fot__kol a { font: 400 13px/1.2 var(--font-ui); color: var(--fg-5); } .ny-fot__kol a:hover { color: var(--fg-1c); } .ny-fot__botten { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: clamp(30px, 4vw, 44px); padding-top: 20px; border-top: 1px solid var(--w-07); flex-wrap: wrap; } .ny-fot__forbehall { font: var(--type-meta); color: var(--fg-8); max-width: 72ch; } .ny-fot__hoger { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .ny-fot__copy { font: var(--type-meta); white-space: nowrap; color: var(--fg-8); } .ny-fot__juridik { display: flex; align-items: center; gap: 14px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; } .ny-fot__juridik a { font: var(--type-meta); white-space: nowrap; color: var(--fg-8); } .ny-fot__juridik a:hover { color: var(--fg-1c); } .ny-fot__lage { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 12px 18px; border-radius: 999px; background: var(--w-06); font: var(--type-chip); white-space: nowrap; color: var(--fg-5); cursor: pointer; transition: background var(--dur-fast) var(--ease); } .ny-fot__lage:hover { background: var(--w-12); } .ny-fot__lage .ny-i { width: 13px; height: 13px; } /* ===================================================================== 8. RÖRELSE — reduce nollar allt ===================================================================== */ @media (prefers-reduced-motion: reduce) { body.mm-ny *, body.mm-ny *::before, body.mm-ny *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } :root:has(body.mm-ny) { scroll-behavior: auto; } } /* ===================================================================== 9. STARTSIDAN (index.html) — design/Landningssida v2.dc.html ===================================================================== */ .ny-hero { position: relative; z-index: 1; margin-top: 0; border-radius: var(--r-frame); overflow: hidden; height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; background: var(--s-map); } /* Dygnscenen är ersatt av en statisk glasyta: prototypens himmelsgradienter, utan rörelse. */ .ny-hero__scen { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .ny-hero__sky-bas { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,12,9,0.86) 0%, rgba(14,12,9,0.42) 46%, rgba(14,12,9,0.72) 100%); } .ny-hero__sky-dag { position: absolute; inset: 0; background: radial-gradient(120% 80% at 72% 8%, rgba(229,160,119,0.2) 0%, rgba(229,160,119,0.07) 42%, rgba(229,160,119,0) 76%); } [data-theme="light"] .ny-hero__sky-bas { background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.9) 44%, rgba(255,255,255,0.82) 100%); } [data-theme="light"] .ny-hero__sky-dag { background: radial-gradient(120% 80% at 72% 8%, rgba(182,92,58,0.07) 0%, rgba(182,92,58,0.025) 42%, rgba(182,92,58,0) 76%); } .ny-hero__innehall { position: relative; z-index: 2; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: clamp(72px, 8vw, 120px) clamp(18px, 4vw, 64px) clamp(215px, 34vh, 300px); } .ny-hero__h1 { margin: 0; max-width: 24ch; font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 5.2vw, 76px); line-height: 1.07; letter-spacing: -0.012em; color: var(--fg-1b); text-wrap: pretty; text-shadow: 0 2px 26px rgba(14,12,9,0.92); } .ny-hero__lede { margin: clamp(16px, 2vw, 28px) 0 0; max-width: 46ch; font-size: clamp(14px, 1.15vw, 16.5px); line-height: 1.65; color: var(--fg-4); text-shadow: 0 1px 20px rgba(14,12,9,0.95); } .ny-hero__integritet { margin: clamp(10px, 1.2vw, 16px) 0 0; max-width: 46ch; font: var(--type-meta); color: var(--fg-7); text-shadow: 0 1px 20px rgba(14,12,9,0.95); } [data-theme="light"] .ny-hero__h1 { text-shadow: 0 1px 24px rgba(255,255,255,0.94); } [data-theme="light"] .ny-hero__lede, [data-theme="light"] .ny-hero__integritet { text-shadow: 0 1px 16px rgba(255,255,255,0.96); } .ny-sokrad { position: relative; display: flex; align-items: center; gap: 8px; margin: clamp(20px, 2.4vw, 32px) 0 0; max-width: 560px; padding: 8px 8px 8px 16px; border-radius: 999px; background: rgba(var(--glass-tint), 0.66); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-top: 1px solid var(--edge-hi); border-bottom: 1px solid var(--edge-lo); box-shadow: var(--glass-panel-shadow); color: var(--fg-7); } .ny-sokrad > .ny-i { flex: none; } .ny-sokrad__input { flex: 1 1 auto; min-width: 0; padding: 10px 0; border: none; background: transparent; font-size: 14.5px; color: var(--fg-2); outline: none; } .ny-sokrad__input::placeholder { color: var(--fg-7); } .ny-sokrad__input::-webkit-search-cancel-button { display: none; } .ny-sokrad__input:focus-visible { outline: none; } .ny-sokrad:focus-within { outline: 2px solid var(--a-4); outline-offset: 3px; } .ny-sokrad__cta { padding: 12px 20px; gap: 8px; font: var(--type-label); } .ny-sokrad__cta:hover { background: var(--a-2); } .ny-sokrad__resultat { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20; max-height: 320px; overflow-y: auto; padding: 6px; border-radius: var(--r-panel); background: var(--g-74); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-top: 1px solid var(--edge-hi); box-shadow: var(--glass-pop-shadow); } .ny-sokrad__traff { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: var(--r-row); color: var(--fg-2); font: var(--type-label); } .ny-sokrad__traff:hover, .ny-sokrad__traff.is-active { background: var(--w-06); color: var(--fg-1b); } .ny-sokrad__traff-typ { font: var(--type-meta); color: var(--fg-8); white-space: nowrap; } .ny-sokrad__tomt { margin: 0; padding: 10px 12px; font: var(--type-meta); color: var(--fg-8); } @media (max-width: 760px) { .ny-sokrad { flex-wrap: wrap; } .ny-sokrad__input { flex: 1 1 140px; } .ny-sokrad__cta { flex: 1 1 100%; justify-content: center; min-height: 44px; } } @media (max-width: 700px) { .ny-hero__innehall { padding-top: 92px; padding-bottom: 116px; justify-content: flex-start; } .ny-sokrad { position: absolute; left: 14px; right: 14px; bottom: 16px; margin-top: 0; max-width: none; border-radius: var(--r-panel); padding: 12px; } .ny-sokrad__resultat { top: auto; bottom: calc(100% + 8px); } } /* Datakällekarusellen */ .ny-karusell { position: relative; z-index: 2; margin: 12px 0; overflow: hidden; } .ny-karusell__mask { position: relative; overflow: hidden; padding: 0 22px; mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%); } .ny-karusell__band { display: flex; gap: 12px; padding-right: 12px; width: max-content; animation: ny-karusell calc(70s / var(--mm-h)) linear infinite; } .ny-karusell__band:hover { animation-play-state: paused; } @keyframes ny-karusell { from { transform: translateX(0); } to { transform: translateX(-50%); } } .ny-kallkort { flex: 0 0 auto; width: 320px; display: flex; flex-direction: column; gap: 4px; padding: 12px 20px 13px; border-radius: var(--r-panel); background: var(--w-045); border-top: 1px solid var(--w-12); } .ny-kallkort__huvud { display: flex; align-items: center; gap: 8px; color: var(--a-4); } .ny-kallkort__huvud .ny-kicker { color: inherit; } .ny-kallkort__namn { font: 600 17px/1.15 var(--font-display); letter-spacing: -0.01em; color: var(--fg-1c); } .ny-kallkort__vad { font: 400 12.5px/1.5 var(--font-ui); color: var(--fg-5); } .ny-kallkort__volym { margin-top: 2px; font: 500 12.5px/1.4 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--fg-3); } .ny-kallkort__takt { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--w-07); font: var(--type-meta); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--fg-8); } /* Varför vi finns */ .ny-uppdrag { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(24px, 3vw, 44px); margin-top: clamp(30px, 4vw, 48px); } .ny-uppdrag__kort { display: flex; flex-direction: column; padding-top: clamp(20px, 2.5vw, 28px); border-top: 1px solid var(--w-07); } .ny-uppdrag__huvud { display: flex; align-items: center; gap: 10px; } .ny-uppdrag__h3 { margin: 16px 0 0; max-width: 30ch; font: 600 clamp(19px, 1.7vw, 23px)/1.2 var(--font-display); letter-spacing: -0.015em; color: var(--fg-1b); text-wrap: pretty; } .ny-uppdrag__p { margin: 12px 0 0; max-width: 58ch; font: 400 13.5px/1.7 var(--font-ui); color: var(--fg-5); text-wrap: pretty; } .ny-uppdrag__cta { align-self: flex-start; margin-top: auto; } .ny-uppdrag__p + .ny-uppdrag__cta { margin-top: 32px; } /* Kartans funktioner */ .ny-funk { padding: clamp(24px, 2.6vw, 30px); } .ny-funk__huvud { display: flex; align-items: center; gap: 11px; } .ny-funk__titel { display: block; margin-top: 20px; font: 600 clamp(19px, 1.7vw, 22px)/1.2 var(--font-display); letter-spacing: -0.015em; color: var(--fg-1b); text-wrap: pretty; } .ny-funk__p { margin: 11px 0 0; font: 400 14px/1.65 var(--font-ui); color: var(--fg-6); text-wrap: pretty; } .ny-knapprad { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ny-knapprad--34 { margin-top: clamp(24px, 3vw, 34px); } .ny-knapprad--24 { margin-top: 24px; gap: 8px; } .ny-knapprad--22 { margin-top: 22px; } .ny-topp--vanster { justify-content: flex-start; gap: clamp(24px, 5vw, 80px); } .ny-topp--24 { gap: 24px; } /* Lagren */ .ny-lagerrad { display: flex; align-items: flex-end; gap: clamp(20px, 3vw, 44px); margin-top: clamp(34px, 5vh, 56px); flex-wrap: wrap; } .ny-lagerrad__tal { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; } .ny-lagerrad__siffra { font-family: var(--font-ui); font-weight: 500; font-size: clamp(42px, 4.6vw, 64px); line-height: 1.07; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; color: var(--fg-1b); } .ny-lagerrad__text { flex: 1 1 300px; min-width: 0; max-width: 420px; margin: 0; font: var(--type-meta); color: var(--fg-8); } .ny-lagerrad__lank { margin-left: auto; } .ny-lagerband { display: flex; flex-direction: column; gap: 10px; margin-top: clamp(24px, 3vw, 36px); contain: content; } .ny-lagerband__rad { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .ny-lagerband__spar { display: flex; width: max-content; gap: 10px; will-change: transform; contain: layout paint; animation: ny-lager-v 480s linear infinite; } .ny-lagerband__spar:hover { animation-play-state: paused; } @keyframes ny-lager-v { from { transform: translateX(0); } to { transform: translateX(-50%); } } .ny-lagerband__grupp { display: flex; gap: 10px; } .ny-lagerpill { display: inline-flex; align-items: center; padding: 13px 22px; border-radius: 999px; background: var(--w-06); font: 500 15px/1 var(--font-ui); white-space: nowrap; color: var(--fg-4); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } a.ny-lagerpill:hover { background: var(--w-12); color: var(--fg-2); } /* Filmen */ .ny-film { position: relative; min-height: min(760px, 88vh); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: var(--s-map); max-width: none; border-radius: var(--r-frame); } .ny-film__skugga { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(14,12,9,0.72) 0%, rgba(14,12,9,0.22) 34%, rgba(14,12,9,0.78) 100%); pointer-events: none; } [data-theme="light"] .ny-film__skugga { background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.1) 34%, rgba(255,255,255,0.6) 100%); } .ny-film__topp { position: relative; z-index: 3; display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(20px, 4vw, 64px); padding: clamp(24px, 3.5vw, 56px) clamp(20px, 4vw, 72px) 0; flex-wrap: wrap; } .ny-film__ram { position: relative; z-index: 3; margin: clamp(16px, 2.2vw, 30px) clamp(20px, 4vw, 72px) 0; aspect-ratio: 21 / 9; border-radius: var(--r-panel); overflow: hidden; background: var(--s-map); filter: var(--tile-filter); } .ny-film__ram video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .ny-film__botten { position: relative; z-index: 3; display: flex; align-items: flex-end; gap: clamp(24px, 5vw, 90px); padding: clamp(32px, 4.5vw, 70px) clamp(20px, 4vw, 72px) clamp(28px, 5vh, 56px); flex-wrap: wrap; } .ny-film__v { flex: 1 1 520px; min-width: 0; } .ny-film__h2 { margin: 0; font-family: var(--font-ui); font-weight: 500; font-size: clamp(34px, 5vw, 74px); line-height: 1.07; letter-spacing: -0.012em; color: var(--fg-1b); text-wrap: pretty; } .ny-film__p { margin: clamp(16px, 2vw, 28px) 0 0; max-width: 46ch; font-family: var(--font-ui); font-size: clamp(14px, 1.1vw, 16px); line-height: 1.68; color: var(--fg-4); } .ny-film__h { flex: 0 1 340px; display: flex; flex-direction: column; gap: 12px; } .ny-film__h .ny-kicker { color: var(--fg-7); } .ny-film__not { margin-top: 4px; color: var(--fg-7); } .ny-chiprad--7 { gap: 7px; } .ny-chip.is-vald.ny-chip--stum { padding: 8px 14px; background: var(--aw-24); color: var(--a-4); gap: 8px; } .ny-film__h .ny-chip--stum { padding: 8px 14px; color: var(--fg-5); } .ny-prick { width: 5px; height: 5px; border-radius: 999px; background: currentColor; } /* Våra källor — tabellen */ .ny-kallor { display: grid; grid-template-columns: 1.1fr 1.9fr 0.9fr 0.8fr; align-items: center; gap: 16px; } .ny-kallor--huvud { padding: 0 8px 12px; margin: 0 -8px; font: var(--type-kicker); letter-spacing: var(--kicker-tracking); text-transform: uppercase; color: var(--fg-8); } .ny-kallor__hoger { text-align: right; } .ny-kallor__namn { font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; color: var(--fg-1b); } .ny-kallor__vad { font: 400 13px/1.5 var(--font-ui); color: var(--fg-6); } .ny-kallor__takt { font: var(--type-chip); white-space: nowrap; color: var(--fg-5); } .ny-kallor__senast { text-align: right; font: 500 12.5px/1.2 var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--a-2b); } .ny-listfot--18 { padding-top: 18px; } @media (max-width: 699px) { .ny-kallor { grid-template-columns: 1fr auto; } .ny-kallor [data-mm="kallor-detalj"], .ny-kallor--huvud [data-mm="kallor-detalj"] { display: none; } .ny-kallor__senast { white-space: normal; } } /* Kommunen i veckan */ .ny-vecka { display: flex; gap: clamp(20px, 3vw, 44px); flex-wrap: wrap; } .ny-vecka__foto { flex: 1 1 420px; min-width: 280px; position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-panel); overflow: hidden; background: var(--s-map); box-shadow: var(--glass-panel-shadow); } .ny-vecka__bild { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity var(--dur-slow) var(--ease); } .ny-vecka__bild.is-on { opacity: 1; } .ny-vecka__kredit { position: absolute; left: 12px; top: 12px; z-index: 2; max-width: calc(100% - 24px); white-space: normal; } .ny-vecka__foto:not(.is-live) .ny-vecka__kredit { display: none; } .ny-vecka__text { flex: 1 1 400px; min-width: 280px; display: flex; flex-direction: column; justify-content: center; } .ny-vecka__huvud { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .ny-vecka__h2 { margin: 16px 0 0; font-family: var(--font-ui); font-weight: 500; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.07; letter-spacing: -0.034em; color: var(--fg-1b); } .ny-vecka__meta { display: block; margin-top: 10px; font: 400 13px/1.5 var(--font-ui); color: var(--fg-7); } .ny-vecka__citat { margin: 16px 0 0; max-width: 44ch; font: 400 13.5px/1.65 var(--font-ui); color: var(--fg-5); } .ny-vecka__tal { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); gap: 14px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--w-07); } /* Kom igång */ .ny-h2--680 { max-width: 680px; } .ny-h2--620 { max-width: 620px; } .ny-kom { display: flex; gap: clamp(22px, 3.5vw, 52px); margin-top: clamp(26px, 3vw, 40px); padding: clamp(22px, 3vw, 34px); border-radius: var(--r-panel); background: var(--aw-10); border-top: 1px solid var(--edge-hi); flex-wrap: wrap; } .ny-kom__v { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; } .ny-kom__h { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; } .ny-kom__titel { display: block; margin-top: 14px; font: 600 clamp(22px, 2.2vw, 30px)/1.1 var(--font-display); letter-spacing: -0.015em; color: var(--fg-1b); } .ny-kom__p { margin: 10px 0 0; max-width: 420px; font: 400 13.5px/1.65 var(--font-ui); color: var(--fg-5); } .ny-kom__sok { display: flex; align-items: center; gap: 9px; margin-top: 20px; padding: 12px 14px; border-radius: var(--r-btn); background: var(--w-06); color: var(--fg-8); font: 400 12.5px/1 var(--font-ui); white-space: nowrap; text-align: left; transition: background var(--dur-fast) var(--ease); } .ny-kom__sok:hover { background: var(--w-12); } .ny-kom__chips { margin-top: 10px; } .ny-kom__chips .ny-chip { padding: 7px 13px; } .ny-kom__chips .ny-chip:hover { color: var(--fg-2); } .ny-steg { margin-top: 12px; } .ny-steg__rad { display: flex; align-items: flex-start; gap: 13px; padding: 13px 0; border-top: 1px solid var(--w-07); } .ny-steg__nr { display: flex; flex: none; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background: var(--aw-14); font: 500 11px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--a-4); } .ny-steg__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .ny-steg__t { font: 500 13.5px/1.3 var(--font-ui); color: var(--fg-2); } .ny-steg__p { font: 400 12.5px/1.55 var(--font-ui); color: var(--fg-6); } .ny-andra { margin-top: clamp(32px, 4vw, 52px); padding-top: clamp(24px, 3vw, 34px); border-top: 1px solid var(--w-07); } .ny-andra__grid { margin-top: 16px; } .ny-kort--vag { padding: 22px 22px 18px; } .ny-kort__titel--17 { margin-top: 18px; font-size: 17px; line-height: 1.15; color: var(--fg-1c); } .ny-btn--135 { font-size: 13.5px; padding: 13px 22px; } /* Quizet */ .ny-quiz { padding: clamp(34px, 4vw, 54px) clamp(22px, 3vw, 48px); border-radius: var(--r-frame); background: var(--aw-10); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-top: 1px solid var(--edge-hi); border-bottom: 1px solid rgba(0,0,0,0.04); } .ny-quiz__inre { display: flex; gap: clamp(24px, 4vw, 64px); flex-wrap: wrap; } .ny-quiz__v { flex: 1 1 420px; min-width: 0; } .ny-quiz__h2 { margin: 16px 0 0; max-width: 620px; font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 3vw, 40px); line-height: 1.07; letter-spacing: -0.012em; color: var(--fg-1b); text-wrap: pretty; } .ny-quiz__p { margin: 14px 0 0; max-width: 52ch; font: 400 13.5px/1.65 var(--font-ui); color: var(--fg-5); } .ny-quiz__kort { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-panel); background: var(--w-06); border-top: 1px solid var(--edge-hi); } .ny-quiz__kort-huvud { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ny-quiz__prickar { display: flex; align-items: center; gap: 5px; } .ny-quiz__prick { width: 6px; height: 6px; border-radius: 999px; background: var(--w-12); transition: width var(--dur) var(--ease), background var(--dur) var(--ease); } .ny-quiz__prick.is-aktiv { width: 22px; background: var(--a-4); } .ny-quiz__fraga { display: block; margin-top: 18px; font: 600 clamp(19px, 1.8vw, 23px)/1.25 var(--font-display); letter-spacing: -0.015em; color: var(--fg-1b); text-wrap: pretty; } .ny-quiz__svar { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; } .ny-quiz__alt { display: inline-flex; align-items: center; padding: 13px 20px; border-radius: 999px; background: var(--w-08); font: 500 14px/1 var(--font-ui); white-space: normal; color: var(--fg-3); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .ny-quiz__alt:hover { background: var(--aw-24); color: var(--fg-1b); } .ny-quiz__not { display: block; margin-top: auto; padding-top: 20px; font: var(--type-meta); color: var(--fg-8); } /* Sidorna */ .ny-sida { padding: clamp(26px, 3vw, 34px); } .ny-kort__pil--45 { opacity: 0.45; } .ny-sida__titel { display: block; margin-top: 22px; font: 600 clamp(21px, 1.9vw, 26px)/1.15 var(--font-display); letter-spacing: -0.015em; color: var(--fg-1b); text-wrap: pretty; } .ny-sida__p { margin: 12px 0 24px; font: 400 14px/1.65 var(--font-ui); color: var(--fg-6); text-wrap: pretty; } .ny-sida__rader { margin-top: auto; } .ny-sida__rad { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--w-07); font: 400 13.5px/1.4 var(--font-ui); white-space: nowrap; color: var(--fg-5); } .ny-sida__rad .ny-tab { font-weight: 500; color: var(--fg-3); } .ny-kort__fot--20 { margin-top: 20px; padding-top: 16px; } /* Nytt om datan */ .ny-nyhetsrader { display: flex; flex-direction: column; gap: 2px; } .ny-nyhetsrad { display: flex; align-items: baseline; gap: clamp(14px, 2.4vw, 34px); padding: 20px 8px; margin: 0 -8px; border-top: 1px solid var(--w-07); border-radius: var(--r-row); flex-wrap: wrap; color: inherit; transition: background var(--dur-fast) var(--ease); } .ny-nyhetsrad:hover { background: var(--w-06); color: inherit; } .ny-nyhetsrad__v { flex: 0 0 132px; display: flex; flex-direction: column; gap: 7px; } .ny-nyhetsrad__h { flex: 1 1 340px; min-width: 0; } .ny-nyhetsrad__titel { display: block; font: 600 20px/1.15 var(--font-display); letter-spacing: -0.01em; color: var(--fg-1b); text-wrap: pretty; } .ny-nyhetsrad__text { display: block; margin-top: 9px; max-width: 62ch; font: 400 13px/1.6 var(--font-ui); color: var(--fg-6); text-wrap: pretty; } /* Övrigt innehåll: kartförhandsvisningen */ .ny-karta-prov__ram { margin-top: 12px; } .ny-karta-prov .hm2-mapframe { border-radius: var(--r-panel); background: var(--w-045); border: 0; border-top: 1px solid var(--edge-hi); box-shadow: none; } .ny-karta-prov .hm2-mapframe__stage { position: relative; cursor: pointer; padding: 16px; } .ny-karta-prov .hm2-swe { display: block; width: 100%; max-height: 520px; } .ny-karta-prov .hm2-swe path { fill: var(--a-4); stroke: var(--w-15); stroke-width: 0.3; } .ny-karta-prov .hm2-maplabel { display: flex; align-items: center; gap: 8px; font: var(--type-label); color: var(--fg-3); } .ny-karta-prov .hm2-maplabel__dot { width: 8px; height: 8px; border-radius: 999px; } .ny-karta-prov .hm2-maplegend__range { font: var(--type-meta); color: var(--fg-8); font-variant-numeric: tabular-nums; margin-top: 6px; } .ny-karta-prov .hm2-maplegend__bar { height: 6px; border-radius: 999px; max-width: 220px; } .ny-karta-prov .hm2-mapframe__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-top: 1px solid var(--w-07); } .ny-karta-prov .hm2-slidedots { display: flex; align-items: center; gap: 5px; } /* ===================================================================== 10. ORT- OCH KOMMUNSIDAN (ort.html + scripts/build_ort_static.py) — design/Ort Stockholm.dc.html ===================================================================== */ .ny-crumbs { display: flex; align-items: center; gap: 8px; font: var(--type-meta); line-height: 1.4; color: var(--fg-8); flex-wrap: wrap; } .ny-crumbs a { color: var(--fg-6); } .ny-crumbs a:hover { color: var(--fg-2); } .ny-crumbs__nu { color: var(--fg-4); } .ny-panel--hero { margin-top: clamp(18px, 2.4vw, 30px); } .ny-orthero { display: flex; gap: clamp(22px, 3.4vw, 52px); flex-wrap: wrap; } .ny-orthero__foto { flex: 1 1 420px; min-width: 280px; position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-panel); overflow: hidden; background: var(--s-map); box-shadow: var(--glass-panel-shadow); } .ny-orthero__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .ny-orthero__kredit { position: absolute; left: 12px; top: 12px; max-width: calc(100% - 24px); white-space: normal; pointer-events: auto; } .ny-orthero__kredit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .ny-orthero__text { flex: 1 1 420px; min-width: 280px; display: flex; flex-direction: column; justify-content: center; } .ny-orthero__h1 { margin: 18px 0 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(40px, 5.4vw, 76px); line-height: 1.04; letter-spacing: -0.015em; color: var(--fg-1b); } .ny-orthero__meta { display: block; margin-top: 12px; font: 400 13px/1.5 var(--font-ui); color: var(--fg-7); } .ny-orthero__wiki { margin: 20px 0 0; max-width: 48ch; font: 400 14px/1.7 var(--font-ui); color: var(--fg-5); text-wrap: pretty; } .ny-orthero__kalla { display: block; margin-top: 10px; font: var(--type-meta); line-height: 1.5; color: var(--fg-8); } .ny-bildremsa { display: flex; gap: 10px; margin: 14px 0 0; } .ny-bildremsa__ruta { margin: 0; flex: 1 1 0; min-width: 0; max-width: 320px; } .ny-bildremsa__ruta img { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: var(--r-row); } .ny-bildremsa__ruta figcaption { margin-top: 4px; font-size: 10px; } .ny-fakta { padding: 22px; } .ny-fakta__varde { display: block; margin-top: 14px; font: 500 24px/1.1 var(--font-ui); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--fg-1b); } .ny-profil__tal { display: flex; align-items: baseline; gap: 10px; } .ny-profil__siffra { font: 500 44px/1 var(--font-ui); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--a-4); } .ny-profil__taltext { font: 400 13px/1.4 var(--font-ui); color: var(--fg-7); } .ny-index-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px 40px; margin-top: clamp(24px, 3vw, 40px); } .ny-index__rad { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .ny-index__namn { font: 500 13.5px/1.3 var(--font-ui); color: var(--fg-3); } .ny-index__varde { font: 500 12.5px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--fg-6); } .ny-index .ny-stapel { margin-top: 9px; } .ny-kolumner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(24px, 3vw, 44px); margin-top: clamp(34px, 4vw, 56px); } .ny-kolumn__kicker { display: block; padding-bottom: 12px; } .ny-rad--13 { padding: 13px 8px; } .ny-befolkning { display: flex; gap: clamp(24px, 3.4vw, 56px); margin-top: clamp(24px, 3vw, 40px); flex-wrap: wrap; } .ny-befolkning__totaler { display: flex; gap: 28px; } .ny-befolkning__pyramid { flex: 1 1 460px; min-width: 280px; } .ny-befolkning__civil { flex: 1 1 300px; min-width: 260px; } .ny-alder { display: grid; grid-template-columns: minmax(0,1fr) 82px minmax(0,1fr); align-items: center; gap: 10px; padding: 3px 6px; margin: 0 -6px; border-radius: var(--r-row); transition: background var(--dur-fast) var(--ease); } .ny-alder:hover { background: var(--w-06); } .ny-alder--huvud { padding-bottom: 12px; font: var(--type-kicker-sm); letter-spacing: var(--kicker-tracking); text-transform: uppercase; color: var(--fg-8); } .ny-alder--huvud:hover { background: transparent; } .ny-alder__h--hoger { text-align: right; } .ny-alder__h--mitt { text-align: center; } .ny-alder__man { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .ny-alder__kvinna { display: flex; align-items: center; gap: 8px; } .ny-alder__n { font: 400 11px/1 var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--fg-7); } .ny-alder__bar { height: 11px; border-radius: 999px; } .ny-alder__bar--man { background: var(--w-15); } .ny-alder__bar--kvinna { background: var(--aw-42); } .ny-alder__grupp { text-align: center; font: 500 11.5px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--fg-5); } @media (max-width: 880px) { .ny-alder { grid-template-columns: minmax(0,1fr) 70px minmax(0,1fr); gap: 6px; } } .ny-civil { padding: 15px 8px; margin: 0 -8px; border-top: 1px solid var(--w-07); } .ny-civil__rad { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .ny-civil__namn { font: 500 13.5px/1.3 var(--font-ui); color: var(--fg-3); } .ny-civil__stapel { display: flex; align-items: center; gap: 10px; margin-top: 9px; } .ny-civil__stapel .ny-stapel { flex: 1 1 auto; } .ny-civil__andel { font: 400 11.5px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--fg-7); } .ny-tvaspalt { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(24px, 3vw, 44px); } .ny-under__rader { margin-top: 20px; } .ny-fotnot--18 { margin-top: 18px; } .ny-fotnot--0 { margin-top: 0; } .ny-ort__namn { display: block; font: 600 17px/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--fg-1b); } .ny-ort__inv { display: block; margin-top: 10px; font: 400 12.5px/1.4 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--fg-7); } .ny-ort__avstand { display: block; margin-top: 14px; font: 500 13px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--a-2b); } .ny-omgivning { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(22px, 2.6vw, 40px); margin-top: clamp(24px, 3vw, 40px); } .ny-omgivning .ny-rad__varde { color: var(--fg-1b); } .ny-kommunkort__knapp { margin-top: 20px; } .ny-kommunkort__tal { flex: 1 1 320px; min-width: 260px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: 16px; } .ny-kommunkort__tal .ny-matvarde { gap: 7px; } /* ===================================================================== 11. BRYGGA — sajtens gamla tokens läser designens Allt shared.js/lista.js/statistik.js/event.js m.fl. ritar med de gamla variablerna (--color-*, --lc-*, --kk2-*, --accent). Här pekas de om, på body-nivå, så JS-byggt innehåll landar i samma palett utan att varje renderare skrivs om. ⚠ Aliasen deklareras på SAMMA selektor som --accent (css/CLAUDE.md #178: en alias som substituerats på :root följer inte med). ===================================================================== */ body.mm-ny, body.mm-ny.mm-warm-shell, body.mm-ny.mm-home-body { --accent: var(--a-4); --accent-hover: var(--a-3); --accent-soft: var(--aw-16); --accent-on-tint: var(--a-2b); --color-accent-warm: var(--a-4); --color-primary: var(--a-4); --color-primary-hover: var(--a-3); --color-primary-dim: var(--aw-16); --color-accent: var(--a-4); --color-accent-dim: var(--aw-16); --kk2-accent: var(--a-4); --kk2-accent-soft: var(--aw-18); --kk2-paper: var(--on-accent); --kk2-ink: var(--fg-2); --kk2-muted: var(--fg-7); --kk2-rule: var(--w-12); --kk2-rule-soft: var(--w-07); --color-ink: var(--fg-2); --color-ink-soft: var(--fg-3); --color-paper: var(--s-deep); --color-paper-alt: rgb(var(--glass-tint)); --color-soft: var(--w-06); --color-chip: var(--w-06); --color-muted: var(--fg-7); --color-rule: var(--w-07); --color-bg: var(--s-deep); --color-surface: rgb(var(--glass-tint)); --color-surface-hover: var(--w-08); --color-border: var(--w-07); --color-text: var(--fg-2); --color-text-muted: var(--fg-7); --color-subtle-overlay: var(--w-06); --color-subtle-overlay-hover: var(--w-09); --color-subtle-border: var(--w-08); --scrollbar-thumb: var(--w-15); --font-sans: var(--font-ui); --font-display: Fraunces, Georgia, 'Times New Roman', serif; --lc-elev: var(--w-06); --lc-sunk: var(--w-045); --lc-tint: var(--w-06); --lc-border: var(--w-07); --lc-border-strong: var(--w-15); --lc-muted: var(--fg-4); --lc-soft: var(--fg-7); --lc-faint: var(--fg-8); --hm-accent: var(--a-4); --hm-accent-soft: var(--aw-14); --hm-border-strong: var(--w-15); --hm-ease: var(--ease); --header-height: 0px; } [data-theme="light"] body.mm-ny { --color-surface: #ffffff; --color-paper-alt: #ffffff; } /* Sajtsöket (Spotlight) och Sparat-popupen i glas */ body.mm-ny .mm-spotlight__box, body.mm-ny .kk2-saved-popup, body.mm-ny .mm-ddmenu { background: rgba(var(--glass-tint), 0.86); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 0; border-top: 1px solid var(--edge-hi); border-radius: var(--r-panel); box-shadow: var(--glass-pop-shadow); } /* ===================================================================== 12. LISTA (lista.html + js/lista.js) — design/Lista.dc.html ===================================================================== */ .ny-listlayout { display: flex; gap: 22px; align-items: flex-start; } .ny-listmain { flex: 1 1 auto; min-width: 0; } .ny-verktyg { display: flex; align-items: center; gap: 10px; margin-top: 34px; flex-wrap: wrap; } .ny-verktyg .list-search { position: relative; flex: 1; min-width: 260px; } .ny-verktyg .list-search > svg:first-child { position: static; left: auto; } .ny-verktyg .list-search input { width: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .ny-verktyg .list-search input:focus { box-shadow: none; border: 0; } .ny-verktyg .list-search__clear { position: static; color: var(--fg-7); } .ny-verktyg .list-count { font: var(--type-meta); color: var(--fg-8); white-space: nowrap; } .ny-verktyg .list-count b { font: 500 13px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--fg-3); } .ny-verktyg .list-kpi-wrap, .ny-verktyg .list-sort-wrap { position: relative; } .ny-verktyg .list-sort-chevron { display: none; } .ny-verktyg .ny-verktyg__filter { display: inline-flex; height: 44px; padding: 0 14px; } .ny-verktyg .list-filter-toggle__n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--aw-24); color: var(--a-4); font: var(--type-chip); font-variant-numeric: tabular-nums; } .ny-verktyg .list-filter-toggle__n[hidden] { display: none; } .ny-verktyg .ny-seg { height: 44px; } .ny-verktyg .ny-seg__a { display: inline-flex; align-items: center; justify-content: center; height: 38px; width: 38px; padding: 0; border: 0; } .ny-verktyg .ny-seg__a[aria-pressed="true"] { background: var(--a-4); color: var(--on-accent); } .ny-verktyg .ny-seg__a svg { width: 17px; height: 17px; } /* mm-dropdown: knappen som ersätter