/* Standard: mörkt. Ingenting behöver sättas på för att få electric. */ :root { color-scheme: dark; /* --- Ytnivåer ---------------------------------------------------------- */ --yta-0: #090909; --yta-1: #0F0F0F; --yta-2: #141414; --yta-3: #1C1C1C; /* --- Linjer ------------------------------------------------------------ */ --linje: #222222; --linje-stark: #2E2E2E; --linje-fokus: #3A3A3A; /* --- Text -------------------------------------------------------------- */ --text: #EDEDED; --text-2: #A0A0A0; /* * text-3 var #6E6E6E fram till liquid glass-prototypens andra omgång. Den * klarade 3,9:1 mot rent svart och under 3,4:1 mot glaset — under AA för * den text den faktiskt bär (tabellrubriker, metarader, brödsmulor). */ --text-3: #8A8F99; /* --- Accent — och bara där den hör hemma -------------------------------- */ --accent: #2E7DFF; --accent-hover: #4A8FFF; --accent-svag: rgba(46, 125, 255, 0.12); --accent-text: #FFFFFF; /* --- Status ------------------------------------------------------------ */ --ok: #3FB950; --varning: #D29922; --fel: #F85149; --ok-yta: rgba(63, 185, 80, 0.12); --varning-yta: rgba(210, 153, 34, 0.12); --fel-yta: rgba(248, 81, 73, 0.12); /* --- Djup: TVÅ nivåer, inte sex ---------------------------------------- */ --djup-1: 0 1px 2px rgba(0, 0, 0, 0.30); --djup-2: 0 4px 10px rgba(0, 0, 0, 0.28); /* --- Radier: samma mjuka trappa som frost ------------------------------ */ --r-s: 8px; --r-m: 12px; --r-l: 16px; /* --- Glaset: mörkt glas ------------------------------------------------- * * * Sidan ligger på en blåsvart toning med ett svagt blått ljus i ena hörnet. * Glasytorna är mörkt, blåtonat glas med alfa; kanten är vitt på åtta * procent och överkanten bär en svag inre ljuslinje. Skuggan är svart och * tät — i mörker är det skuggan som lyfter ett kort, inte ljuset. * * KONTRAST mot den LJUSASTE punkten i toningen (det blå hörnet), och mot * glasytan där: text 13,7:1 · text-2 6,1:1 · text-3 4,9:1 · ok 6,3:1 · * varning 6,3:1 · fel 4,8:1. På hover-ytan: text-2 5,6:1 · text-3 4,5:1 · * fel 4,4:1 (enda värdet under AA, bara under muspekaren). */ --sidtoning: radial-gradient(70% 55% at 100% 0%, rgba(46, 125, 255, 0.16) 0%, transparent 65%), radial-gradient(60% 50% at 0% 100%, rgba(46, 125, 255, 0.05) 0%, transparent 70%), linear-gradient(160deg, #0B0F1A 0%, #0A0C12 45%, #090909 100%); --glasyta: rgba(20, 24, 34, 0.55); --glasyta-upphojd: rgba(24, 29, 41, 0.65); --glasyta-tat: rgba(18, 22, 31, 0.90); --glasyta-hover: rgba(36, 42, 56, 0.80); /* Genomskinligt glas: korten överst på kundkortet, som bär oskärpa och * låter färgfälten skina igenom. */ --glasyta-klar: rgba(20, 24, 34, 0.55); /* --- Färgfälten bakom glaset: djupblått, cyan, svag violett --------------- */ --fond-1: rgba(30, 70, 200, 0.28); --fond-2: rgba(0, 190, 255, 0.08); --fond-3: rgba(120, 60, 200, 0.22); /* --- Glasklotet på Översikten -------------------------------------------- */ --klot-yta: radial-gradient(circle at 32% 28%, rgba(200, 225, 255, 0.55) 0%, rgba(46, 125, 255, 0.30) 38%, rgba(16, 24, 48, 0.75) 100%); --klot-glans: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 40%); --klot-kant: rgba(255, 255, 255, 0.18); --klot-glod: 0 0 90px rgba(46, 125, 255, 0.35), 0 30px 80px rgba(0, 0, 0, 0.55); --linje-dekor: rgba(120, 170, 255, 0.22); /* Hjärnbilden i mörkt: dämpad och blåtonad, så texten runt om håller AA. */ --klotbild-filter: brightness(0.62) saturate(0.85); --klotbild-opacitet: 0.78; /* 3D-hjärnan på Översikt (canvas): molnet, pulserna blått · cyan · violett, * och linjerna från korten. Läses av skriptet i src/views/hjarna.js. */ --hjarna-punkt: rgba(150, 185, 255, 0.90); --hjarna-puls-1: #2E7DFF; --hjarna-puls-2: #22D3EE; --hjarna-puls-3: #9B6BFF; --hjarna-linje: rgba(120, 170, 255, 0.30); --hjarna-linje-aktiv: rgba(120, 200, 255, 0.95); --klot-under-hjarna: 0.35; --glasglans: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 55%); --glaskant: rgba(255, 255, 255, 0.08); --glaskant-stark: rgba(255, 255, 255, 0.12); --glaskant-delare: rgba(255, 255, 255, 0.06); --glasskugga: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.40), 0 14px 36px rgba(0, 0, 0, 0.45); --glasskugga-liten: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 3px rgba(0, 0, 0, 0.40); --glasskugga-flytande: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 28px 72px rgba(0, 0, 0, 0.60); --glaspill: rgba(255, 255, 255, 0.08); --faltyta: rgba(10, 12, 18, 0.60); --faltkant: rgba(255, 255, 255, 0.12); --glasoskarpa: 18px; --glasfilter: blur(var(--glasoskarpa)) saturate(140%); /* --- Luft: glaset andas i båda temana ------------------------------------ */ --luft-kort: var(--rum-5); --luft-rutnat: var(--rum-4); --luft-sida-y: var(--rum-6); --luft-sida-x: var(--rum-7); /* --- Instagram-previewn: appens EGNA färger, mörkt läge ----------------- * * * Inuti ramen är det INTE Lesters designsystem — det är Instagram. Den ska * se ut som Instagram, inte som Lester: det är en simulering, inte en del av * produktens gränssnitt. */ --ig-yta: #000000; --ig-text: #F5F5F5; --ig-text-svag: #A8A8A8; --ig-linje: #262626; --ig-lank: #E0F1FF; --ig-accent: #0095F6; --ig-ram-skugga: 0 4px 12px rgba(0, 0, 0, 0.35); --ig-tom: #1A1A1A; --ig-tom-text: #6E6E6E; /* Bildlabbets panel (2026-10-29): ramen, knapparna och spelaren — samma Instagram i båda temana. */ --ig-ram: #2C2C2E; --ig-knapp: #363636; --ig-knapp-text: #F5F5F5; --ig-markering: #F5F5F5; /* --- Nanobot-Lester: metallen (entrén, behålls — se §2.1) --------------- */ --nano-fyll: rgba(148, 163, 189, 0.58); --nano-fyll-ljus: rgba(190, 204, 226, 0.78); /* --- Rum: 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 -------------------------- * * * TÄTARE SEDAN `v0.94`. De fyra första stegen är oförändrade — 4, 8, 12 och * 16 px är det som bygger en komponent inifrån — och de fyra största kortades * en gång till. De styr avståndet MELLAN saker, och Linears arbetsyta får * plats med mycket mer på en skärm just för att den luften är liten. */ --rum-1: 0.25rem; --rum-2: 0.5rem; --rum-3: 0.75rem; --rum-4: 1rem; --rum-5: 1.25rem; --rum-6: 1.5rem; --rum-7: 2rem; --rum-8: 2.5rem; /* --- Radier: formerna här, stegen i temablocken ------------------------- * * * Trappan --r-s / --r-m / --r-l bor sedan liquid glass-prototypen i MORK och * LJUS. Båda temana är 8 / 12 / 16 sedan den andra omgången, för glas * läser sig som mjukt rundat; trappan står kvar per tema så att de kan * skiljas åt igen utan att flytta den. Cirkeln och pillret är FORMER, inte * steg, och är desamma i båda temana. */ --r-rund: 50%; --r-pill: 999px; /* --- Typsnitt ---------------------------------------------------------- * * * Inter där den finns, systemets grotesk annars. Ingen fontfil bundlas och * ingen hämtas — modulen har sex produktionsberoenden och lägger inte till * ett nätverksanrop för en typografisk nyans. `v0.94` la till de moderna * systemstackarnas egna namn före fallbacken, så en maskin utan Inter ändå * får något som ligger nära. */ --typsnitt: Inter, "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* --- Bildlabb v2 ------------------------------------------------------- * * * iPhonens mått, glöden och betygspillrets färg i /provbank/labb/v2. Inget * skript rör ramen; under 860 px krymper vyn måtten så att den får plats. */ --v2-tel-b: 340px; --v2-tel-h: 712px; --v2-kant: 11px; --v2-glod: var(--ig-accent); --v2-mjuk: cubic-bezier(.2, .8, .2, 1); --v2-piller: var(--ok); /* --- Typografi: rå skala ----------------------------------------------- * * * `v0.94`: sidtitel 22 · sektion 17 · kortrubrik 15 · body 13 · sekundär 12 · * metadata 11. Varje steg utom det minsta kortades mot `v0.72`s skala, och * BRÖDTEXTEN är den som betyder mest: 13 px är Linears, och det är därifrån * intrycket av ett verktyg snarare än en webbplats kommer. */ --text-xs: 0.6875rem; --text-s: 0.75rem; --text-m: 0.8125rem; --text-l: 0.9375rem; --text-xl: 1.0625rem; --text-2xl: 1.375rem; --text-display: 2rem; --vikt-normal: 400; --vikt-medel: 500; --vikt-fet: 600; --radavstand: 1.45; --sparr: 0.01em; /* --- Typografi: sex roller, inga fria storlekar ------------------------- * * * Varje text i modulen är en av rollerna. Behövs en till är det ett * designbeslut att fatta här, inte en font-size att skriva i en komponent. * Shorthanden bär vikt, storlek och radavstånd; sparren står bredvid * eftersom "font" inte kan bära letter-spacing. * * `v0.94`: RUBRIKERNA BÄR MEDELVIKT, INTE FET. En rubrik ska skilja sig från * brödtexten genom STORLEK och FÄRG, inte genom tyngd — en fet rubrik i ett * verktyg läser sig som en rubrik i en artikel. Bara den stora * display-rollen, som bara portalen använder, är kvar i fet. */ --typ-display: var(--vikt-fet) var(--text-display)/1.1 var(--typsnitt); --typ-titel: var(--vikt-medel) var(--text-2xl)/1.25 var(--typsnitt); --typ-sektion: var(--vikt-medel) var(--text-xl)/1.3 var(--typsnitt); --typ-kapsel: var(--vikt-medel) var(--text-l)/1.35 var(--typsnitt); --typ-brod: var(--vikt-normal) var(--text-m)/var(--radavstand) var(--typsnitt); --typ-sekundar: var(--vikt-normal) var(--text-s)/1.4 var(--typsnitt); --typ-mikro: var(--vikt-medel) var(--text-xs)/1.35 var(--typsnitt); /* * HERO — liquid glass-prototypen. Kundkortets namn: en lugn, stor rubrik * som hälsningen i en översikt, inte en sektionsrubrik. Samma medelvikt som * de andra rubrikerna; bara storleken är ny. */ --text-hero: 2rem; --typ-hero: var(--vikt-medel) var(--text-hero)/1.15 var(--typsnitt); --sparr-hero: -0.025em; --sparr-display: -0.02em; --sparr-titel: -0.015em; --sparr-sektion: -0.01em; --sparr-kapsel: -0.005em; --sparr-brod: 0; --sparr-mikro: 0.01em; /* --- Ikoner: Lucide, inline SVG, currentColor --------------------------- * * * EN uppsättning, tre storlekar, ingen emoji. En emoji är en bild som ritas * av systemet och ser olika ut på varje maskin — den kan varken ärva en färg * eller en vikt, och två emoji ur olika familjer blandar två stilar. * * `v0.94`: 14 / 16 / 18. En ikon ska vara ungefär lika hög som texten * bredvid sig, och texten kortades. */ --ikon-s: 14px; --ikon-m: 16px; --ikon-l: 18px; /* --- Kontrollmått: kompakt är regeln ------------------------------------ * * * `v0.94`: knapparna 28/32, fälten 28, tabellraden 34, sidebaren 13.5rem. * En rad man ska kunna läsa hundra av är 34 px hög, inte 44. */ --knapp-hojd: 28px; --knapp-hojd-l: 32px; --falt-hojd: 28px; --rad-hojd: 34px; --bricka: 22px; --bricka-stor: 40px; --bricka-hero: 64px; --sidebar-bredd: 13.5rem; --sidebar-smal: 3rem; /* --- Fokus: en ring, samma överallt ------------------------------------- */ --fokusring: 0 0 0 2px var(--yta-0), 0 0 0 4px var(--accent); /* --- Färgfältens drift: tre takter, långsamma och osynkade ---------------- * * * Bara transform och opacity animeras, så rörelsen går på kompositorn. * prefers-reduced-motion stänger av den helt (se färgfältslagret i ui.js). */ --fond-storlek: 70vmax; --klot-takt: 6s; /* Flyttbara sektioner: reserverad vänsterluft för handtaget. */ --flytt-luft: 1.25rem; --fond-tid-1: 46s; --fond-tid-2: 58s; --fond-tid-3: 70s; /* --- Rörelse: kurvor och varaktigheter ---------------------------------- * * * Allt som rör sig hämtar BÅDE kurva och tid härifrån. En komponent som * skriver sin egen millisekund har lämnat systemet. * * De nya komponenterna använder --fjader-skarp och --tid-2/--tid-3. Resten * står kvar för de vyer som ännu inte migrerat och städas i etapp 8. * * FÖRBJUDET: "transition: all". Räkna upp egenskaperna. */ --fjader-mjuk: cubic-bezier(0.22, 0.61, 0.36, 1); --fjader-studs: cubic-bezier(0.34, 1.56, 0.64, 1); --fjader-skarp: cubic-bezier(0.4, 0, 0.2, 1); --fjader-ut: cubic-bezier(0.4, 0, 1, 1); --tid-2: 150ms; --tid-3: 200ms; --overgang: var(--tid-3) var(--fjader-skarp); --overgang-snabb: var(--tid-2) var(--fjader-skarp); --sidovergang: var(--tid-3); /* --- Ytor: gamla namn -------------------------------------------------- */ --yta-botten: var(--yta-0); --bakgrund: none; --yta-sidebar: var(--glasyta); --yta-upphojd: var(--glasyta-upphojd); --yta-hover: var(--yta-3); /* --- Glaset är avväpnat ------------------------------------------------ * * * Fyllnaderna blir ytnivåer, kantgradienterna platta linjer, highlights och * glöd försvinner, och blurren är noll. Reglerna i komponentlagret står kvar * ord för ord — de ritar bara ett kort i stället för ett glasblock. * * Fyllnaderna, kanten och skuggan pekar sedan liquid glass-prototypen på * basens GLASTOKENS, inte direkt på ytnivåerna: de gamla vyernas kort blir * samma glas som komponentbibliotekets, i båda temana. Oskärpan här är * fortfarande noll — de gamla klasserna är kort, inte skalets krom. */ --glas-solid: var(--glasyta-tat); --glas-kant: var(--glaskant); --glas-specular: transparent; --glas-skugga: var(--glasskugga); --glas-yta: var(--glasyta-upphojd); --glas-yta-stark: var(--glasyta-tat); --glas-subtil-fyll: var(--glasyta); --glas-standard-fyll: var(--glasyta-upphojd); --glas-upphojd-fyll: var(--glasyta-upphojd); --glas-interaktiv-fyll: var(--glasyta-upphojd); --glas-subtil-kant: linear-gradient(var(--linje), var(--linje)); --glas-standard-kant: linear-gradient(var(--linje), var(--linje)); --glas-upphojd-kant: linear-gradient(var(--linje-stark), var(--linje-stark)); --glas-interaktiv-kant: linear-gradient(var(--linje), var(--linje)); --glas-highlight-svag: transparent; --glas-highlight: transparent; --glas-highlight-stark: transparent; --glas-spill: none; --glas-spill-stark: none; --glas-blur: 0px; --glas-mattnad: 1; --glas-standard-blur: 0px; --glas-standard-mattnad: 1; --glas-upphojd-blur: 0px; --glas-upphojd-mattnad: 1; /* --- Djup: sex nivåer blir två ----------------------------------------- */ --djup-3: var(--djup-2); /* --- Text: gamla namn -------------------------------------------------- */ --text-dampad: var(--text-2); --text-svag: var(--text-3); /* --- Accent: glöden är borta ------------------------------------------- */ --accent-glod: none; --kantglod: linear-gradient(var(--accent), var(--accent)); /* --- Glas/Framed: två lager blir en ram -------------------------------- */ --ram-fyll-yttre: var(--yta-1); --ram-kant-yttre: linear-gradient(var(--linje), var(--linje)); --ram-fyll-inre: var(--yta-2); --ram-kant-inre: linear-gradient(var(--linje), var(--linje)); /* --- Status och fara: gamla namn --------------------------------------- */ --status-aktiv: var(--ok); --status-aktiv-yta: var(--ok-yta); --status-pausad: var(--varning); --status-pausad-yta: var(--varning-yta); --fara: var(--fel); --fara-yta: var(--fel-yta); --fara-linje: var(--fel); /* --- Radier: allt landar i 6–10 ---------------------------------------- */ --radie-s: var(--r-s); --radie-m: var(--r-m); --radie-l: var(--r-l); --radie-glas: var(--r-l); --radie-rund: var(--r-rund); --radie-pill: var(--r-pill); --radie-kontroll: var(--r-m); --radie-komponent: var(--r-m); --radie-panel: var(--r-l); --radie-flytande: var(--r-l); --ram-radie-yttre: var(--r-l); --ram-radie-inre: var(--r-m); --ram-gap: 4px; /* ====================================================================== * * NEDAN: entréns egen värld — INTE Lesters designsystem * * Skrivmaskinen, portalerna och nanobot-svärmen lever bara på "/", och * PORTALEN BEHÅLLS OFÖRÄNDRAD — produktbeslut 2026-09-11, se * spec/redesign-fas0.md §2.1. Tokensen här är därför INTE oanvända och * ska aldrig städas bort som sådana. * * (v0.81.1: namnet ur den här kommentaren är borttaget med flit — det här är * en CSS-kommentar och skickas därför till VARJE besökares webbläsare. Vem * som fattade beslutet står i CLAUDE.md, där det hör hemma.) * * De bär egna färglitteraler med flit: en portal som visar vilket TEMA man * väljer måste rita det temat, inte det man redan har. Värdena står i det * gemensamma blocket just därför — de får inte skifta med temat. * ====================================================================== */ --skriv-steg: 35ms; --skriv-tid: 520ms; --dyk-tid: 900ms; --dyk-sorti: 200ms; --nano-klunga: 22vmin; --nano-spridning: calc(var(--nano-klunga) / 100); --nano-vaggning: calc(var(--nano-klunga) / 55); --nano-form-tid: 900ms; --nano-fard: 75s; --nano-vanster-max: calc(50vw - var(--entre-max) / 2 - var(--nano-klunga) - 2vw); --nano-hoger-min: calc(50vw + var(--entre-max) / 2 + 2vw); --nano-hoger-max: calc(100vw - var(--nano-klunga) - 2vw); --nano-topp: 2vh; --oga-karna: #5CC2FF; --oga-glod: 0 0 10px rgba(92, 194, 255, 0.85), 0 0 22px rgba(92, 194, 255, 0.45); --oga-dis: rgba(92, 194, 255, 0.55); --oga-puls: 2.6s; /* Electric: djup charcoal med elektriskt blå och cyan ambient. */ --varld-electric: radial-gradient(78% 62% at 22% 8%, rgba(10, 132, 255, 0.42) 0%, transparent 64%), radial-gradient(66% 58% at 88% 92%, rgba(100, 210, 255, 0.30) 0%, transparent 62%), linear-gradient(152deg, #171A24 0%, #0E1017 48%, #090A0F 100%); --varld-electric-brytning: radial-gradient(70% 120% at 30% 10%, rgba(120, 205, 255, 0.55) 0%, transparent 70%), linear-gradient(152deg, rgba(10, 132, 255, 0.42) 0%, rgba(100, 210, 255, 0.26) 100%); --varld-electric-text: rgba(255, 255, 255, 0.96); --varld-electric-fyll: rgba(255, 255, 255, 0.10); --varld-electric-kant: rgba(126, 205, 255, 0.60); --varld-electric-highlight: rgba(255, 255, 255, 0.60); --varld-electric-glod: 0 0 28px rgba(10, 132, 255, 0.50), 0 0 60px rgba(100, 210, 255, 0.22); --varld-electric-svep: linear-gradient(104deg, transparent 20%, rgba(255, 255, 255, 0.34) 50%, transparent 80%); --varld-electric-ring: rgba(126, 205, 255, 0.85); /* Frost: nästan vit med kalla, ljusblå reflexer. */ --varld-frost: radial-gradient(78% 62% at 20% 6%, rgba(255, 255, 255, 0.95) 0%, transparent 62%), radial-gradient(70% 60% at 90% 94%, rgba(160, 205, 250, 0.40) 0%, transparent 64%), linear-gradient(152deg, #FBFDFF 0%, #EEF4FC 46%, #DFE9F7 100%); --varld-frost-brytning: radial-gradient(70% 120% at 30% 10%, rgba(255, 255, 255, 0.92) 0%, transparent 72%), linear-gradient(152deg, rgba(170, 210, 250, 0.42) 0%, rgba(255, 255, 255, 0.30) 100%); --varld-frost-text: rgba(8, 14, 24, 0.88); --varld-frost-fyll: rgba(255, 255, 255, 0.58); --varld-frost-kant: rgba(255, 255, 255, 0.92); --varld-frost-highlight: rgba(255, 255, 255, 0.98); --varld-frost-glod: 0 6px 20px rgba(14, 30, 56, 0.12), inset 0 -1px 2px rgba(14, 30, 56, 0.08); --varld-frost-svep: linear-gradient(104deg, transparent 20%, rgba(255, 255, 255, 0.85) 50%, transparent 80%); --varld-frost-ring: rgba(0, 122, 255, 0.80); /* --- Entréns och previewns mått ---------------------------------------- */ --entre-max: 56rem; --portal-hojd: 15rem; --kapsel-bredd: 6rem; --kapsel-hojd: 2.125rem; --svav-lyft: 5px; --svav-takt: 6s; --svav-takt-portal: 7.4s; --svep-takt: 700ms; /* --- Instagram-previewns mått ------------------------------------------ * * * Instagrams egna proportioner, inte Lesters: rutnätet har tre kolumner med * ett par pixlars mellanrum, avataren är rund och stor, highlights mindre. */ --ig-mobil: 26rem; --ig-gap: 2px; --ig-avatar: 5.5rem; --ig-avatar-lit: 3rem; --ig-highlight: 4rem; --ig-radie: 12px; --ig-radie-ram: 28px; /* Bildlabbets panel: det som är lika i båda temana — storyspelaren är alltid svart, ringen alltid Instagrams. */ --ig-ram-bredd: 10px; --ig-story-ring: linear-gradient(45deg, #F9CE34, #EE2A7B, #6228D7); --ig-spelare: #000000; --ig-spelare-text: #FFFFFF; --ig-spelare-stapel: rgba(255, 255, 255, 0.35); --ig-overlay: rgba(0, 0, 0, 0.6); --ig-overlay-text: #FFFFFF; --ig-ikonskugga: drop-shadow(0 0 2px rgba(0, 0, 0, 0.65)); --ig-typsnitt: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Kod och promptar i labbet. */ --typsnitt-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Menyernas skugga (bildlabbets Mer-meny). */ --meny-skugga: 0 6px 20px rgba(0, 0, 0, 0.12); /* --- Mått som de icke-migrerade vyerna ännu läser ----------------------- */ --fokus-bredd: 40rem; --innehall-max: 68.75rem; --helfigur-min-bredd: 8rem; /* BETYGSSKALAN (order "Betygsrutan", 2026-10-31): 1–10 rött → gult → grönt, blandat ur husets signalfärger. */ --betyg-1: var(--fel); --betyg-2: color-mix(in srgb, var(--fel) 80%, var(--varning)); --betyg-3: color-mix(in srgb, var(--fel) 55%, var(--varning)); --betyg-4: color-mix(in srgb, var(--fel) 30%, var(--varning)); --betyg-5: var(--varning); --betyg-6: color-mix(in srgb, var(--varning) 75%, var(--ok)); --betyg-7: color-mix(in srgb, var(--varning) 50%, var(--ok)); --betyg-8: color-mix(in srgb, var(--varning) 25%, var(--ok)); --betyg-9: var(--ok); --betyg-10: color-mix(in srgb, var(--ok) 85%, var(--text)); /* Ett enskilt betygs färg — sätts per knapp till en av --betyg-N. */ --betygsfarg: var(--accent); } /* * Systemets ljusläge ger frost — men bara när inte redan bett om * electric. Ett uttryckligt val vinner alltid över systemets. * * Bara BASEN byts. Arvet står kvar i :root och löses upp mot den bas som * gäller — en alias-definition, inte två. */ @media (prefers-color-scheme: light) { :root:not([data-theme="electric"]) { color-scheme: light; /* --- Ytnivåer ---------------------------------------------------------- */ --yta-0: #EEF3FA; --yta-1: #FFFFFF; --yta-2: #FFFFFF; --yta-3: rgba(30, 64, 120, 0.07); /* --- Linjer: tunna och kalla, lika synliga på glas som på vitt --------- */ --linje: rgba(20, 44, 90, 0.09); --linje-stark: rgba(20, 44, 90, 0.15); --linje-fokus: rgba(20, 44, 90, 0.24); /* --- Text -------------------------------------------------------------- */ --text: #16181D; --text-2: #4B5263; --text-3: #575E6D; /* --- Accent ------------------------------------------------------------ */ --accent: #1257C4; --accent-hover: #0D47A6; --accent-svag: rgba(18, 87, 196, 0.10); --accent-text: #FFFFFF; /* --- Status ------------------------------------------------------------ */ --ok: #177233; --varning: #845700; --fel: #BA1E2A; --ok-yta: rgba(23, 114, 51, 0.10); --varning-yta: rgba(132, 87, 0, 0.10); --fel-yta: rgba(186, 30, 42, 0.10); /* --- Djup -------------------------------------------------------------- */ --djup-1: 0 1px 2px rgba(16, 24, 40, 0.05); --djup-2: 0 4px 10px rgba(16, 24, 40, 0.07); /* --- Radier: mjukare än electric — glas är rundat ----------------------- */ --r-s: 8px; --r-m: 12px; --r-l: 16px; /* --- Glaset ------------------------------------------------------------ * * * TRE FYLLNADER, och tätheten följer vad ytan bär: * glasyta sidomeny, sidopanel, kort — mest genomskinlig * glasyta-upphojd rutor, listor, tabeller, sekundärknappar * glasyta-tat modaler och menyer — ytor som ligger ÖVER innehåll * * OSKÄRPAN (glasfilter) används bara på sidomenyn, sidopanelen, toppbandet, * sökfältet, Fråga Lester och modalerna. Kort, tabeller och rutor får glas- * yta, kant och skugga men ingen oskärpa: många paneler med backdrop-filter * blir sega på en svagare dator, och ett kort på en stilla toning har inget * bakom sig att sudda ut. */ --sidtoning: radial-gradient(85% 65% at 0% 0%, rgba(255, 255, 255, 0.90) 0%, transparent 60%), radial-gradient(55% 45% at 100% 0%, rgba(150, 196, 255, 0.28) 0%, transparent 70%), radial-gradient(75% 65% at 100% 100%, rgba(196, 218, 248, 0.40) 0%, transparent 70%), linear-gradient(160deg, #F7FAFE 0%, #EAF1FB 50%, #DDE8F8 100%); --glasyta: rgba(255, 255, 255, 0.58); --glasyta-upphojd: rgba(255, 255, 255, 0.68); --glasyta-tat: rgba(255, 255, 255, 0.86); --glasyta-hover: rgba(255, 255, 255, 0.92); --glasyta-klar: rgba(255, 255, 255, 0.50); /* --- Färgfälten bakom glaset: ljusblått, isvitt, svag lavendel ------------ */ --fond-1: rgba(120, 170, 255, 0.50); --fond-2: rgba(255, 255, 255, 0.90); --fond-3: rgba(190, 170, 240, 0.40); /* --- Glasklotet på Översikten -------------------------------------------- */ --klot-yta: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.98) 0%, rgba(205, 225, 255, 0.85) 40%, rgba(120, 170, 255, 0.55) 100%); --klot-glans: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 42%); --klot-kant: rgba(255, 255, 255, 0.90); --klot-glod: 0 0 90px rgba(120, 170, 255, 0.45), 0 30px 70px rgba(30, 64, 120, 0.18); --linje-dekor: rgba(30, 64, 120, 0.16); --klotbild-filter: none; --klotbild-opacitet: 0.92; /* 3D-hjärnan i frost: mörkblått moln, pulserna accent · cyan · lavendel. */ --hjarna-punkt: rgba(30, 64, 140, 0.75); --hjarna-puls-1: #1257C4; --hjarna-puls-2: #0891B2; --hjarna-puls-3: #8B7BE0; --hjarna-linje: rgba(30, 64, 120, 0.22); --hjarna-linje-aktiv: rgba(18, 87, 196, 0.85); --klot-under-hjarna: 0.55; --glasglans: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 60%); --glaskant: rgba(255, 255, 255, 0.70); --glaskant-stark: rgba(255, 255, 255, 0.90); --glaskant-delare: transparent; --glasskugga: inset 0 1px 0 rgba(255, 255, 255, 0.60), 0 1px 2px rgba(30, 64, 120, 0.04), 0 16px 44px rgba(30, 64, 120, 0.10); --glasskugga-liten: inset 0 1px 0 rgba(255, 255, 255, 0.60), 0 1px 3px rgba(30, 64, 120, 0.08); --glasskugga-flytande: inset 0 1px 0 rgba(255, 255, 255, 0.80), 0 2px 8px rgba(30, 64, 120, 0.06), 0 32px 80px rgba(30, 64, 120, 0.22); --glaspill: rgba(255, 255, 255, 0.85); --faltyta: rgba(255, 255, 255, 0.80); --faltkant: var(--linje-stark); --glasoskarpa: 18px; --glasfilter: blur(var(--glasoskarpa)) saturate(160%); /* --- Luft: frost andas mer --------------------------------------------- */ --luft-kort: var(--rum-5); --luft-rutnat: var(--rum-4); --luft-sida-y: var(--rum-6); --luft-sida-x: var(--rum-7); /* --- Instagram-previewn: appens EGNA färger, ljust läge ----------------- */ --ig-yta: #FFFFFF; --ig-text: #262626; --ig-text-svag: #737373; --ig-linje: #DBDBDB; --ig-lank: #00376B; --ig-accent: #0095F6; --ig-ram-skugga: 0 4px 12px rgba(16, 24, 40, 0.10); --ig-tom: #EFEFEF; --ig-tom-text: #8E8E8E; /* Bildlabbets panel (2026-10-29): ramen, knapparna och spelaren — samma Instagram i båda temana. */ --ig-ram: #111111; --ig-knapp: #EFEFEF; --ig-knapp-text: #000000; --ig-markering: #FFFFFF; /* --- Nanobot-Lester: metallen ------------------------------------------ */ --nano-fyll: rgba(118, 146, 180, 0.92); --nano-fyll-ljus: rgba(158, 186, 216, 0.85); } } /* Uttryckligt val på . Det här är brytpunkten temaväxlaren sätter. */ :root[data-theme="frost"] { color-scheme: light; /* --- Ytnivåer ---------------------------------------------------------- */ --yta-0: #EEF3FA; --yta-1: #FFFFFF; --yta-2: #FFFFFF; --yta-3: rgba(30, 64, 120, 0.07); /* --- Linjer: tunna och kalla, lika synliga på glas som på vitt --------- */ --linje: rgba(20, 44, 90, 0.09); --linje-stark: rgba(20, 44, 90, 0.15); --linje-fokus: rgba(20, 44, 90, 0.24); /* --- Text -------------------------------------------------------------- */ --text: #16181D; --text-2: #4B5263; --text-3: #575E6D; /* --- Accent ------------------------------------------------------------ */ --accent: #1257C4; --accent-hover: #0D47A6; --accent-svag: rgba(18, 87, 196, 0.10); --accent-text: #FFFFFF; /* --- Status ------------------------------------------------------------ */ --ok: #177233; --varning: #845700; --fel: #BA1E2A; --ok-yta: rgba(23, 114, 51, 0.10); --varning-yta: rgba(132, 87, 0, 0.10); --fel-yta: rgba(186, 30, 42, 0.10); /* --- Djup -------------------------------------------------------------- */ --djup-1: 0 1px 2px rgba(16, 24, 40, 0.05); --djup-2: 0 4px 10px rgba(16, 24, 40, 0.07); /* --- Radier: mjukare än electric — glas är rundat ----------------------- */ --r-s: 8px; --r-m: 12px; --r-l: 16px; /* --- Glaset ------------------------------------------------------------ * * * TRE FYLLNADER, och tätheten följer vad ytan bär: * glasyta sidomeny, sidopanel, kort — mest genomskinlig * glasyta-upphojd rutor, listor, tabeller, sekundärknappar * glasyta-tat modaler och menyer — ytor som ligger ÖVER innehåll * * OSKÄRPAN (glasfilter) används bara på sidomenyn, sidopanelen, toppbandet, * sökfältet, Fråga Lester och modalerna. Kort, tabeller och rutor får glas- * yta, kant och skugga men ingen oskärpa: många paneler med backdrop-filter * blir sega på en svagare dator, och ett kort på en stilla toning har inget * bakom sig att sudda ut. */ --sidtoning: radial-gradient(85% 65% at 0% 0%, rgba(255, 255, 255, 0.90) 0%, transparent 60%), radial-gradient(55% 45% at 100% 0%, rgba(150, 196, 255, 0.28) 0%, transparent 70%), radial-gradient(75% 65% at 100% 100%, rgba(196, 218, 248, 0.40) 0%, transparent 70%), linear-gradient(160deg, #F7FAFE 0%, #EAF1FB 50%, #DDE8F8 100%); --glasyta: rgba(255, 255, 255, 0.58); --glasyta-upphojd: rgba(255, 255, 255, 0.68); --glasyta-tat: rgba(255, 255, 255, 0.86); --glasyta-hover: rgba(255, 255, 255, 0.92); --glasyta-klar: rgba(255, 255, 255, 0.50); /* --- Färgfälten bakom glaset: ljusblått, isvitt, svag lavendel ------------ */ --fond-1: rgba(120, 170, 255, 0.50); --fond-2: rgba(255, 255, 255, 0.90); --fond-3: rgba(190, 170, 240, 0.40); /* --- Glasklotet på Översikten -------------------------------------------- */ --klot-yta: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.98) 0%, rgba(205, 225, 255, 0.85) 40%, rgba(120, 170, 255, 0.55) 100%); --klot-glans: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 42%); --klot-kant: rgba(255, 255, 255, 0.90); --klot-glod: 0 0 90px rgba(120, 170, 255, 0.45), 0 30px 70px rgba(30, 64, 120, 0.18); --linje-dekor: rgba(30, 64, 120, 0.16); --klotbild-filter: none; --klotbild-opacitet: 0.92; /* 3D-hjärnan i frost: mörkblått moln, pulserna accent · cyan · lavendel. */ --hjarna-punkt: rgba(30, 64, 140, 0.75); --hjarna-puls-1: #1257C4; --hjarna-puls-2: #0891B2; --hjarna-puls-3: #8B7BE0; --hjarna-linje: rgba(30, 64, 120, 0.22); --hjarna-linje-aktiv: rgba(18, 87, 196, 0.85); --klot-under-hjarna: 0.55; --glasglans: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 60%); --glaskant: rgba(255, 255, 255, 0.70); --glaskant-stark: rgba(255, 255, 255, 0.90); --glaskant-delare: transparent; --glasskugga: inset 0 1px 0 rgba(255, 255, 255, 0.60), 0 1px 2px rgba(30, 64, 120, 0.04), 0 16px 44px rgba(30, 64, 120, 0.10); --glasskugga-liten: inset 0 1px 0 rgba(255, 255, 255, 0.60), 0 1px 3px rgba(30, 64, 120, 0.08); --glasskugga-flytande: inset 0 1px 0 rgba(255, 255, 255, 0.80), 0 2px 8px rgba(30, 64, 120, 0.06), 0 32px 80px rgba(30, 64, 120, 0.22); --glaspill: rgba(255, 255, 255, 0.85); --faltyta: rgba(255, 255, 255, 0.80); --faltkant: var(--linje-stark); --glasoskarpa: 18px; --glasfilter: blur(var(--glasoskarpa)) saturate(160%); /* --- Luft: frost andas mer --------------------------------------------- */ --luft-kort: var(--rum-5); --luft-rutnat: var(--rum-4); --luft-sida-y: var(--rum-6); --luft-sida-x: var(--rum-7); /* --- Instagram-previewn: appens EGNA färger, ljust läge ----------------- */ --ig-yta: #FFFFFF; --ig-text: #262626; --ig-text-svag: #737373; --ig-linje: #DBDBDB; --ig-lank: #00376B; --ig-accent: #0095F6; --ig-ram-skugga: 0 4px 12px rgba(16, 24, 40, 0.10); --ig-tom: #EFEFEF; --ig-tom-text: #8E8E8E; /* Bildlabbets panel (2026-10-29): ramen, knapparna och spelaren — samma Instagram i båda temana. */ --ig-ram: #111111; --ig-knapp: #EFEFEF; --ig-knapp-text: #000000; --ig-markering: #FFFFFF; /* --- Nanobot-Lester: metallen ------------------------------------------ */ --nano-fyll: rgba(118, 146, 180, 0.92); --nano-fyll-ljus: rgba(158, 186, 216, 0.85); } :root[data-theme="electric"] { color-scheme: dark; /* --- Ytnivåer ---------------------------------------------------------- */ --yta-0: #090909; --yta-1: #0F0F0F; --yta-2: #141414; --yta-3: #1C1C1C; /* --- Linjer ------------------------------------------------------------ */ --linje: #222222; --linje-stark: #2E2E2E; --linje-fokus: #3A3A3A; /* --- Text -------------------------------------------------------------- */ --text: #EDEDED; --text-2: #A0A0A0; /* * text-3 var #6E6E6E fram till liquid glass-prototypens andra omgång. Den * klarade 3,9:1 mot rent svart och under 3,4:1 mot glaset — under AA för * den text den faktiskt bär (tabellrubriker, metarader, brödsmulor). */ --text-3: #8A8F99; /* --- Accent — och bara där den hör hemma -------------------------------- */ --accent: #2E7DFF; --accent-hover: #4A8FFF; --accent-svag: rgba(46, 125, 255, 0.12); --accent-text: #FFFFFF; /* --- Status ------------------------------------------------------------ */ --ok: #3FB950; --varning: #D29922; --fel: #F85149; --ok-yta: rgba(63, 185, 80, 0.12); --varning-yta: rgba(210, 153, 34, 0.12); --fel-yta: rgba(248, 81, 73, 0.12); /* --- Djup: TVÅ nivåer, inte sex ---------------------------------------- */ --djup-1: 0 1px 2px rgba(0, 0, 0, 0.30); --djup-2: 0 4px 10px rgba(0, 0, 0, 0.28); /* --- Radier: samma mjuka trappa som frost ------------------------------ */ --r-s: 8px; --r-m: 12px; --r-l: 16px; /* --- Glaset: mörkt glas ------------------------------------------------- * * * Sidan ligger på en blåsvart toning med ett svagt blått ljus i ena hörnet. * Glasytorna är mörkt, blåtonat glas med alfa; kanten är vitt på åtta * procent och överkanten bär en svag inre ljuslinje. Skuggan är svart och * tät — i mörker är det skuggan som lyfter ett kort, inte ljuset. * * KONTRAST mot den LJUSASTE punkten i toningen (det blå hörnet), och mot * glasytan där: text 13,7:1 · text-2 6,1:1 · text-3 4,9:1 · ok 6,3:1 · * varning 6,3:1 · fel 4,8:1. På hover-ytan: text-2 5,6:1 · text-3 4,5:1 · * fel 4,4:1 (enda värdet under AA, bara under muspekaren). */ --sidtoning: radial-gradient(70% 55% at 100% 0%, rgba(46, 125, 255, 0.16) 0%, transparent 65%), radial-gradient(60% 50% at 0% 100%, rgba(46, 125, 255, 0.05) 0%, transparent 70%), linear-gradient(160deg, #0B0F1A 0%, #0A0C12 45%, #090909 100%); --glasyta: rgba(20, 24, 34, 0.55); --glasyta-upphojd: rgba(24, 29, 41, 0.65); --glasyta-tat: rgba(18, 22, 31, 0.90); --glasyta-hover: rgba(36, 42, 56, 0.80); /* Genomskinligt glas: korten överst på kundkortet, som bär oskärpa och * låter färgfälten skina igenom. */ --glasyta-klar: rgba(20, 24, 34, 0.55); /* --- Färgfälten bakom glaset: djupblått, cyan, svag violett --------------- */ --fond-1: rgba(30, 70, 200, 0.28); --fond-2: rgba(0, 190, 255, 0.08); --fond-3: rgba(120, 60, 200, 0.22); /* --- Glasklotet på Översikten -------------------------------------------- */ --klot-yta: radial-gradient(circle at 32% 28%, rgba(200, 225, 255, 0.55) 0%, rgba(46, 125, 255, 0.30) 38%, rgba(16, 24, 48, 0.75) 100%); --klot-glans: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 40%); --klot-kant: rgba(255, 255, 255, 0.18); --klot-glod: 0 0 90px rgba(46, 125, 255, 0.35), 0 30px 80px rgba(0, 0, 0, 0.55); --linje-dekor: rgba(120, 170, 255, 0.22); /* Hjärnbilden i mörkt: dämpad och blåtonad, så texten runt om håller AA. */ --klotbild-filter: brightness(0.62) saturate(0.85); --klotbild-opacitet: 0.78; /* 3D-hjärnan på Översikt (canvas): molnet, pulserna blått · cyan · violett, * och linjerna från korten. Läses av skriptet i src/views/hjarna.js. */ --hjarna-punkt: rgba(150, 185, 255, 0.90); --hjarna-puls-1: #2E7DFF; --hjarna-puls-2: #22D3EE; --hjarna-puls-3: #9B6BFF; --hjarna-linje: rgba(120, 170, 255, 0.30); --hjarna-linje-aktiv: rgba(120, 200, 255, 0.95); --klot-under-hjarna: 0.35; --glasglans: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 55%); --glaskant: rgba(255, 255, 255, 0.08); --glaskant-stark: rgba(255, 255, 255, 0.12); --glaskant-delare: rgba(255, 255, 255, 0.06); --glasskugga: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.40), 0 14px 36px rgba(0, 0, 0, 0.45); --glasskugga-liten: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 3px rgba(0, 0, 0, 0.40); --glasskugga-flytande: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 28px 72px rgba(0, 0, 0, 0.60); --glaspill: rgba(255, 255, 255, 0.08); --faltyta: rgba(10, 12, 18, 0.60); --faltkant: rgba(255, 255, 255, 0.12); --glasoskarpa: 18px; --glasfilter: blur(var(--glasoskarpa)) saturate(140%); /* --- Luft: glaset andas i båda temana ------------------------------------ */ --luft-kort: var(--rum-5); --luft-rutnat: var(--rum-4); --luft-sida-y: var(--rum-6); --luft-sida-x: var(--rum-7); /* --- Instagram-previewn: appens EGNA färger, mörkt läge ----------------- * * * Inuti ramen är det INTE Lesters designsystem — det är Instagram. Den ska * se ut som Instagram, inte som Lester: det är en simulering, inte en del av * produktens gränssnitt. */ --ig-yta: #000000; --ig-text: #F5F5F5; --ig-text-svag: #A8A8A8; --ig-linje: #262626; --ig-lank: #E0F1FF; --ig-accent: #0095F6; --ig-ram-skugga: 0 4px 12px rgba(0, 0, 0, 0.35); --ig-tom: #1A1A1A; --ig-tom-text: #6E6E6E; /* Bildlabbets panel (2026-10-29): ramen, knapparna och spelaren — samma Instagram i båda temana. */ --ig-ram: #2C2C2E; --ig-knapp: #363636; --ig-knapp-text: #F5F5F5; --ig-markering: #F5F5F5; /* --- Nanobot-Lester: metallen (entrén, behålls — se §2.1) --------------- */ --nano-fyll: rgba(148, 163, 189, 0.58); --nano-fyll-ljus: rgba(190, 204, 226, 0.78); } /* Respektera användarens val: ingen rörelse om systemet ber om det. */ @media (prefers-reduced-motion: reduce) { :root { --overgang: 0ms; --overgang-snabb: 0ms; --sidovergang: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { background: var(--sidtoning); background-attachment: fixed; } /* --- FÄRGFÄLTEN: lagret bakom allt ---------------------------------------- * * * Fast, under allt, och rör aldrig muspekaren. Tre fält som driver långsamt * fram och tillbaka. BARA transform och opacity animeras — aldrig storlek, * bakgrund eller filter — så rörelsen går på grafikkortet. Mjukheten kommer * ur radial-gradienten, inte ur ett filter. */ .u-fond { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .u-fond-falt { position: absolute; width: var(--fond-storlek); height: var(--fond-storlek); border-radius: var(--r-rund); will-change: transform, opacity; animation: u-fond-driva ease-in-out infinite alternate; } .u-fond-falt-1 { top: -30%; left: -20%; background: radial-gradient(circle, var(--fond-1) 0%, transparent 65%); animation-duration: var(--fond-tid-1); } .u-fond-falt-2 { top: 10%; right: -30%; background: radial-gradient(circle, var(--fond-2) 0%, transparent 65%); animation-duration: var(--fond-tid-2); animation-direction: alternate-reverse; } .u-fond-falt-3 { bottom: -35%; left: 20%; background: radial-gradient(circle, var(--fond-3) 0%, transparent 65%); animation-duration: var(--fond-tid-3); } @keyframes u-fond-driva { 0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; } 50% { transform: translate3d(12vw, 8vh, 0) scale(1.08); opacity: 1; } 100% { transform: translate3d(-8vw, 14vh, 0) scale(0.96); opacity: 0.9; } } @media (prefers-reduced-motion: reduce) { .u-fond-falt { animation: none; will-change: auto; } }