/* ═══════════════════════════════════════════════════════════════════════════ STEGDEMON — steg 2 (kartan) och steg 3 (leveransen) i "Från första mötet till ett system i drift" VARFÖR FILEN FINNS. Steg 2 och 3 bar tidigare behovsdemot och plandemot: produktskärmar ritade mot en fast yta på 1440x900 och nedskalade mot scenens bredd. Skalan blev 0,41 på skrivbordet och 0,24 på telefon, alltså text i fyra respektive tre pixlar. Korten här ritas i sin egen storlek i stället och behöver ingen skalning alls. Samma byte gjordes på solutra.se den 13 augusti 2026, och geometrin nedan är hämtad därifrån. INGET VÄRDE HÄR ÄR PÅHITTAT. Varje färg, storlek, radie och avstånd är hämtat ur något som redan står i mallorca/index.html, och varje sådant lån är noterat i sin regel med källan. Facit är formulärdemot i steg 1 (.formdemo/.fdm-* i index.html): de tre demona sitter i samma medieyta och ska vara omöjliga att tidsbestämma mot varandra. TVÅ LÅNEKÄLLOR, I DEN HÄR ORDNINGEN: 1. Sajtens tokens (:root i index.html) färg, linje, yta 2. .formdemo/.fdm-* (index.html) kortet, typskalan, radierna EN KULÖR. Statusbrickan och slutraden i steg 3 är BLÅ, inte gröna. Förlagan på solutra.se målar dem i #15803d, och det bryter mot regeln att gränssnitten håller sig i den blå familjen. var(--g2) ger 6,50:1 mot vitt, alltså bättre kontrast än grönet den ersätter (5,02:1), så bytet kostar ingen läsbarhet. Skillnaden mellan "byggs" och "i drift" bärs av opaciteten och av att brickan tänds, inte av en andra kulör. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Det gemensamma kortet ───────────────────────────────────────────────── Samma yta som .formdemo (index.html): #fff, 1px var(--line), radie 12px, padding 1rem 1.1rem, skuggan 0 14px 40px -18px rgba(42,85,200,.28). .fscen ger redan insetet på 10px, alltså samma marginal som .formdemo har via margin:10px. Kortet fyller scenen och behöver ingen egen marginal. */ /* KORTET HAR VARKEN RAM ELLER SKUGGA. Det hade båda, kopierade från .formdemo, och det var rätt så länge scenen var en tom ljus ruta. Sedan .fvideo blev ett fönster med topplist och sidoribba är ramen redan ritad, och en skuggad panel innanför den blev en andra inramning av samma sak. Nested kort är dessutom precis det som får en produktbild att läsa som en presentationsbild: riktiga program lägger inte sitt innehåll i ett svävande kort som fyller hela arbetsytan. Kvar är innehållet direkt på fönstrets arbetsyta, och de 10 px .fscen sköt in med behövs inte längre heller: paddingen nedan är kortets enda marginal och kan därför vara den paddning en riktig vy har. */ .stegkort { position: absolute; inset: 0; display: flex; flex-direction: column; padding: .9rem 1.15rem 1rem; text-align: left; overflow: hidden; } /* .fscen centrerar sitt innehåll och skjuter in 10 px. Korten fyller i stället arbetsytan helt, av samma skäl som de tappade ramen. */ .fscen--kort { display: block; inset: 0; } /* Rubrikraden: nummerbrickan plus vad man tittar på. Den bar tidigare en versal monoetikett med byrånamnet och "exempeldata" inbakade. Båda står nu i fönstrets topplist, alltså en gång i vyn i stället för två, och kvar är det som är olika mellan scenerna: vilket steg det är och vad kortet visar. Sidans egen rubriktyp och inte monoversaler, för raden är numera en RUBRIK och inte en systemetikett. */ .sd-top { display: flex; align-items: center; gap: .45rem; margin-bottom: .75rem; } .sd-t { font-size: .74rem; font-weight: 700; letter-spacing: .01em; color: var(--text); } /* Reveal-grundformen. Samma greppning som .fdm-bekr i formulärdemot: opacity + translateY(8px), --d-base/--ease-solutra ur css/motion.css. Bara opacity och transform, alltså inget som tvingar omlayout. */ .sd-in { opacity: 0; transform: translateY(8px); /* .fdm-bekr */ transition: opacity var(--d-base) var(--ease-solutra), transform var(--d-base) var(--ease-solutra); } .sd-in.syns { opacity: 1; transform: none; } /* ══ STEG 2 — KARTAN ═══════════════════════════════════════════════════════ Ställena där tid går förlorad landar ett i taget, summeras, och blir en plan. Ordningen ÄR argumentet: det här är byråns egna siffror, inte en prislista. */ /* Mottagaren. Storlekarna är .fdm-tack b/small, som har samma roll i formulärdemots bokningsvy: ett namn med en underrad. */ .kd-mott { margin-bottom: .6rem; } .kd-mott b { display: block; font-size: .8rem; /* .fdm-tack b */ color: var(--text); /* .fdm-tack b */ line-height: 1.3; /* .fdm-tack b */ } .kd-mott small { display: block; font-size: .64rem; /* .fdm-tack small */ color: var(--muted); /* .fdm-tack small */ } /* Fyndraderna. Ytan och ramen är .fdm-in:s (fältet i formulärdemot), radien 8px likaså. Höjden får komma ur innehållet i stället för .fdm-in:s fasta 30px: raderna ska tåla en längre översättning utan att texten klipps. Spanskan och tyskan är båda längre än engelskan här. Centrerat och inte space-evenly: sedan .fungerar bytte till align-items:start är kortet bara så högt som .fvideo, alltså knappt högre än raderna behöver. Det finns ingen slack kvar att fördela, och space-evenly hade då bara gett ett par pixlar hit och dit. Växer kortet igen är center rätt svar också då: raderna hör ihop och ska läsas som ett block. */ .kd-fynd { display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; gap: .4rem; } .kd-rad { display: flex; align-items: center; gap: .5rem; /* .fdm-kal */ padding: .36rem .55rem; /* .fdm-tid .36rem, .fdm-in .55rem */ background: rgba(42, 85, 200, .04); /* .fdm-in */ border: 1px solid var(--line); /* .fdm-in */ border-radius: 8px; /* .fdm-in */ } .kd-rad-t { flex: 1 1 auto; min-width: 0; font-size: .68rem; /* .fdm-in */ color: var(--text); /* .fdm-in */ overflow-wrap: anywhere; } .kd-rad-h { flex: 0 0 auto; font-family: 'JetBrains Mono', monospace; /* .fdm-tid */ font-size: .64rem; /* .fdm-tid */ color: var(--muted); } /* Summan. Den enda ytan i kortet som får accentfärg, precis som .fdm-tid.vald är det enda färgfyllda i formulärdemot. */ .kd-sum { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .42rem; margin-top: .55rem; /* .fdm/.fdm-rad gap */ padding-top: .55rem; border-top: 1px solid rgba(42, 85, 200, .08); /* .fdm-bekr */ } .kd-sum-e { flex: 1 1 100%; font-size: .6rem; /* .fdm-falt label */ font-weight: 600; /* .fdm-falt label */ color: var(--muted); /* .fdm-falt label */ margin-bottom: .1rem; } /* Talet i sajtens displaytypsnitt, 1,15rem = 18,4 px. Samma optiska storlek som talen bär i resten av sajten, uttryckt i rotenheten. */ .kd-sum-v { font-family: 'Montserrat', system-ui, sans-serif; font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; color: var(--g2); /* :root, 6,50:1 */ font-variant-numeric: tabular-nums; /* talet räknas upp */ } .kd-sum-en { font-size: .68rem; font-weight: 600; color: var(--text); } .kd-sum-f { flex: 1 1 100%; font-size: .62rem; /* .fdm-bekr small */ color: var(--muted); } /* HÄR LÅG AVSTÄMNINGARNA (.kd-plan/.kd-steg): tre chips med månad 1, 3 och 6 plus en rad om fast pris. Borta med innehållet de bar. Steg 2 handlar om vad kartläggningen visar, och en leveransplan hörde inte hemma där: den står i steg 3, som ÄR leveransen. Kortet blev dessutom 90 px kortare. */ .kd-fot { margin-top: .5rem; font-size: .62rem; /* .fdm-bekr small */ color: var(--muted); } /* ══ STEG 3 — LEVERANSEN ═══════════════════════════════════════════════════ Fyra veckor fyller en mätare, och systemets delar går från "byggs" till "i drift" i takt med den. Tidsaxeln och föremålet är samma animation. */ /* Mätaren är .fsteg-mät ur index.html, samma som ligger under stegknapparna: 3 px hög, rgba(42,85,200,.06) i botten, var(--grad) i fyllningen. Den fylls med scaleX från vänster, alltså exakt samma grepp som originalet. */ .ld-matare { position: relative; height: 3px; /* .fsteg-mät */ background: rgba(42, 85, 200, .06); /* .fsteg-mät */ overflow: hidden; margin-bottom: .28rem; /* .fdm-falt label */ } .ld-matare i { display: block; height: 100%; background: var(--grad); /* .fsteg-mät i */ transform: scaleX(0); transform-origin: left center; /* .fsteg-mät i */ transition: transform var(--d-slow) var(--ease-solutra); } /* Mätaren bar tidigare veckoremsan under sig och behövde inget eget avstånd. Nu står raderna direkt under den. */ .ld-matare { margin-bottom: .75rem; } /* HÄR LÅG .ld-v, veckoetiketten längst till vänster i varje modulrad, satt i spärrade monoversaler. Borttagen den 6 september 2026 tillsammans med resten av etiketterna i den stilen. Förloppet syns ändå: mätaren överst fylls en fjärdedel per modul, slutraden säger fyra veckor och steg 3:s egen beskrivning gör det också. Tidsaxeln i stegdemon.js räknar numera .ld-rad, så inget hänger på att etiketterna finns. */ /* Modulraderna. Ikonbrickan är .fdm-tack-ic:s 26px med .fdm-tid:s radie, och färgerna är sajtens egen accent i stället för en ny. */ /* Samma sak som .kd-fynd: listan äter överskottshöjden i stället för att lämna ett hål ovanför slutraden. gap är golvet, space-evenly fördelar resten, och på en trång mobil faller den tillbaka på just gapet. */ .ld-lista { display: flex; flex-direction: column; justify-content: space-evenly; flex: 1 1 auto; gap: .28rem; } .ld-rad { display: flex; align-items: center; gap: .5rem; padding: .28rem 0; /* .fdm-falt label */ } .ld-ik { flex: 0 0 auto; width: 26px; height: 26px; /* .fdm-tack-ic */ display: grid; place-items: center; border-radius: 7px; /* .fdm-tid */ border: 1px solid rgba(58, 109, 240, .28); /* --g3 */ background: rgba(58, 109, 240, .12); /* --g3 */ color: var(--g2); /* :root */ opacity: .45; transition: opacity var(--d-base) var(--ease-solutra); } .ld-ik svg { width: 13px; height: 13px; } /* .fdm-bock 13px */ .ld-rad.klar .ld-ik { opacity: 1; } .ld-rad-t { flex: 1 1 auto; min-width: 0; } .ld-rad-t b { display: block; font-size: .68rem; /* .fdm-in */ font-weight: 600; color: var(--text); overflow-wrap: anywhere; } .ld-rad-t small { display: block; font-size: .62rem; /* .fdm-bekr small */ color: var(--muted); } /* Statusbrickan: punkt plus text i sajtens blå. Se noten om en kulör högst upp i filen. */ /* STATUSEN STÅR HÖGERSTÄLLD I EN EGEN KOLUMN, och det är rätt NU men var fel förut. På den 750 px breda scenen stod "Done" sjuhundra pixlar från raden den gällde och läste som en kolumn i en tabell som inte fanns. Två saker har ändrats sedan dess: scenen är 621 px, och raden börjar med en veckoetikett. Raden ÄR en tabellrad nu, alltså hör statusen hemma i en egen kolumn. Ett försök med margin-right:auto, som la brickan tätt efter texten, gav i stället fyra brickor på fyra olika x-lägen, och det såg slumpmässigt ut. */ .ld-status { flex: 0 0 auto; display: flex; align-items: center; gap: .35rem; font-size: .62rem; /* .fdm-bekr small */ color: var(--g2); /* :root, 6,50:1 */ /* Brickan ligger på plats hela tiden och bara tonar fram: bytte den text eller bredd hade de fyra raderna hoppat i sidled när modulen blev klar. */ opacity: 0; transition: opacity var(--d-base) var(--ease-solutra); } .ld-status i { width: .42em; height: .42em; border-radius: 50%; background: currentColor; } .ld-rad.klar .ld-status { opacity: 1; } /* Slutraden: samma avslutsyta som .fdm-bekr i formulärdemot. */ .ld-fot { margin-top: auto; padding-top: .6rem; /* .fdm-bekr */ border-top: 1px solid rgba(42, 85, 200, .08); /* .fdm-bekr */ } .ld-fot b { display: block; font-size: .72rem; /* .fdm-bekr b */ color: var(--g2); /* :root, 6,50:1 */ } .ld-fot small { display: block; font-size: .62rem; /* .fdm-bekr small */ color: var(--muted); margin-top: .15rem; /* .fdm-bekr small */ } /* Här låg en telefonregel som släckte veckospalten under 560 px: etiketten var 6em bred, alltså en sjättedel av kortet vid 360 px, och texten bröt sig ner i sex rader per modul. Spalten finns inte på någon bredd längre, så regeln har inget att göra. */ /* ── Mobil ──────────────────────────────────────────────────────────────── Samma brytpunkt som stegsektionen, 960 px. Åtgärden är inte mindre text: .fdm-* håller sin storlek på mobil och korten här gör det också. Det som behövs är plats. */ @media (max-width: 960px) { /* MEDIEYTAN RESERVERAR PLATS FÖR SIN HÖGSTA SCEN, INTE FÖR SIN FÖRSTA. Under 960 px går .fvideo > div ur sitt absoluta läge, och då är det formulärdemot i steg 1, den enda scenen som ligger i flödet, som bestämmer ytans höjd. Scenerna 2 och 3 är absoluta och kan inte trycka tillbaka, alltså klipps de om de behöver mer. Reservationen sitter på SCENYTAN (.fv-scener), inte på .fvideo: scenerna är absoluta och mäter mot närmaste positionerade förfader, och det är wrappern med position:relative. En min-height på .fvideo växer bara ytterlådan medan wrappern står kvar på sitt innehåll, alltså exakt lika klippta scener som förut. SIFFRAN ÄR UPPMÄTT MOT DET LÄNGSTA SPRÅKET, inte gissad. Mät genom att nollställa regeln nedan och läsa scenytans höjd när kortet ligger i flödet; kontrollera sedan med scrollHeight mot clientHeight på .stegkort i dess riktiga absoluta läge. Att mäta med position:static UTAN att nollställa golvet ger fel svar: raderna fördelar sig med space-evenly i det ena fallet och inte i det andra, och skillnaden var 70 px. Bandets värsta bredd är 360 px, och där behöver leveranskortet 474 px på tyskan. 496 lämnar marginal, för fem pixlar är ingen marginal och nästa omformulering hade klippts tyst. Mät om på en, es, de OCH sv när innehållet i något kort ändras. Se samma regel i website/css/stegdemon.css, där korten är svenska och kortare och siffran därför lägre. .fungerar-prefixet är specificiteten, inte en avgränsning: sidans inbäddade