/* ==========================================================================
JMS6 · GRUNDEN — fas A
Genererad av verktyg/bygg-grund.py. Redigera MALLEN, inte den här filen.
Detta lager är AVSIKTLIGT additivt. Det använder bara nya dataattribut
(data-blad, data-steg, data-serie, data-nod, data-takt, data-rita) och nya
klassnamn (jms6-*), som ingen av de 12 900 raderna i components.css rör.
Därför kan det släppas utan risk för sajten. Typografi och layout ligger
i fas B, eftersom de rör befintliga lager och måste testas mot sajten.
Lärdomen bakom uppdelningen: @layer-haveriet 21 augusti. @layer degraderar
pluginets CSS under tema och kit och är FÖRBJUDET här.
Innehåll:
1. Avslöjningsgrammatiken — varje block bygger upp sin egen story
2. Formspråket — formen säger vilken sorts arbete det är
3. Överstrykningspennan — en penna per område, färgen bär betydelse
4. Tavlan — whiteboard-registret för illustrationer
========================================================================== */
/* ============================================================ 1. GRAMMATIKEN
Ordningen deklareras i markupen, inte här. Motorn räknar ut fördröjningarna,
så ett nytt block ärver grammatiken utan en rad ny CSS.
data-blad ett block. Får .jms6-syns en gång när det kommer i syn.
data-steg blockets berättelsesteg, i läsordning.
data-serie en lista vars poster byggs en och en (även nästlad).
data-nod noder som ska tändas i takt med en lista.
data-takt en lista som går i takt med en ritning.
data-rita ett streck som ska ritas.
========================================================================== */
:root{
--jms6-ease:cubic-bezier(.22,.7,.28,1);
--jms6-kurva:cubic-bezier(.16,1,.3,1);
--jms6-penna-lansera:#C2CFF4;
--jms6-penna-vaxa:#C2EECE;
--jms6-penna-effekt:#FFE98A;
}
/* Skärpa. Blocket kommer in suddigt och obeslutat, och blir skarpt: samma
rörelse som fotot, som blyertsen mot överstrykningen, som sajtens idé.
Oskärpan gäller BARA när jms6-grund.js har märkt sidan (html.jms6-redo).
Utan skript syns allt. Ett block som fastnar i blur är värre än ett utan
rörelse. Kurvan och tiderna är signaturens: cubic-bezier(.16,1,.3,1). */
@media (prefers-reduced-motion: no-preference){
html.jms6-redo [data-steg]{opacity:0;filter:blur(10px);transform:scale(.992);
transition:opacity 900ms var(--jms6-kurva) var(--d,0ms),
filter 1100ms var(--jms6-kurva) var(--d,0ms),
transform 1100ms var(--jms6-kurva) var(--d,0ms)}
html.jms6-redo .jms6-syns [data-steg]{opacity:1;filter:blur(0);transform:none}
html.jms6-redo [data-serie] > *{opacity:0;filter:blur(6px);
transition:opacity 700ms var(--jms6-kurva) var(--d,0ms),
filter 800ms var(--jms6-kurva) var(--d,0ms)}
html.jms6-redo .jms6-syns [data-serie] > *{opacity:1;filter:blur(0)}
html.jms6-redo [data-nod]{opacity:0;transition:opacity 420ms var(--jms6-kurva) var(--d,0ms)}
html.jms6-redo .jms6-syns [data-nod]{opacity:1}
}
/* Hårlinjer RITAS i stället för att tonas. Det är skillnaden mellan att en
lista dyker upp och att den byggs. Kräver att linjen är en pseudorad och
inte en kant — se .jms6-rad nedan. */
@media (prefers-reduced-motion: no-preference){
.jms6-linje::after{transform:scaleX(0);transform-origin:left;
transition:transform 760ms var(--jms6-ease) var(--d,0ms)}
.jms6-syns .jms6-linje::after{transform:scaleX(1)}
}
/* ============================================================= 2. FORMSPRÅKET
Formen säger vilken sorts arbete det är. Det är inte ikoner, det är
information:
tom kryssruta välja — vilken av dessa situationer är din?
bock ingår — det här får du
siffra sekvens — ordningen spelar roll (ren typografi, ingen form)
romb beslut — här ska något avgöras
cirkel pågår — inget slut (ritas per block)
Alla som tunna streck, aldrig som fyllda glyfer.
========================================================================== */
.jms6-form{width:16px;height:16px;flex:none;overflow:visible;margin-top:.24em}
.jms6-form path{fill:none;stroke:currentColor;stroke-width:1.3;
stroke-linecap:round;stroke-linejoin:round}
.jms6-form--val path{stroke-width:1.2;opacity:.55}
.jms6-form--beslut{width:14px;height:14px;display:block;margin:0 0 12px}
.jms6-lista{margin:12px 0 0;padding:0;list-style:none;position:relative}
.jms6-lista::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
background:currentColor;opacity:.14}
/* Egen typografi, inte ärvd: raden är LÄSNING, inte kontroll. Ärvde den
vikten från blocket blev villkoren feta så fort blockroten satte 500 —
det gjorde checklistorna tyngre än brödtexten precis intill dem. */
.jms6-lista > li{display:flex;gap:12px;align-items:flex-start;
padding:10px 0;position:relative;list-style:none;
font:400 16px/1.6 var(--font-sans,inherit);letter-spacing:-0.006em}
.jms6-lista > li::after{content:"";position:absolute;left:0;right:0;bottom:0;
height:1px;background:currentColor;opacity:.14}
.jms6-lista > li > span{flex:1}
@media (prefers-reduced-motion: no-preference){
.jms6-lista::before,.jms6-lista > li::after{
transform:scaleX(0);transform-origin:left;
transition:transform 760ms var(--jms6-ease) var(--d,0ms)}
.jms6-syns .jms6-lista::before,.jms6-syns .jms6-lista > li::after{
transform:scaleX(1)}
.jms6-form path[data-rita]{transition:stroke-dashoffset 460ms var(--jms6-ease)
calc(var(--d,0ms) + 120ms)}
}
/* ======================================================== 3. ÖVERSTRYKNINGEN
Strecket är elementets EGEN bakgrund, inte ett lager ovanpå. Därför ligger
texten alltid överst — det är webbläsarens målningsordning, inte något som
behöver hållas på plats. Tillgängligheten är inbyggd, inte pålagd.
Formen är en riktig pennas: vågiga kanter, avsmalnande ände, litet
överslag. Och varje TEXTRAD får sitt eget streck, precis som när man drar
pennan rad för rad i stället för i ett svep.
========================================================================== */
.jms6-penna{
/* Pennan är ETT STRECK och inget annat. Den ärver ALLT typografiskt av
texten den markerar — annars ändrar markören det den markerar.
Behövde !important så länge components.css satte färg och typsnitt på
varje span. Det lagret är borta sedan 12 sep 2026; jms10 använder bara
:where() för familjen, och :where() väger noll. */
color:inherit;
font:inherit;
letter-spacing:inherit;
background-repeat:no-repeat;
background-position:0 0.28em;
background-size:100% 0.68em;
padding:0 0.13em;margin:0 -0.13em;
-webkit-box-decoration-break:clone;box-decoration-break:clone;
background-image:url("data:image/svg+xml,")}
.jms6-penna--vaxa{background-image:url("data:image/svg+xml,")}
.jms6-penna--effekt{background-image:url("data:image/svg+xml,")}
@media (prefers-reduced-motion: no-preference){
/* Pennan sveper efter att texten står där, som när man går tillbaka och
markerar det som räknas. Bara bredden rör sig. */
.jms6-penna{background-size:0 0.68em;
transition:background-size 560ms cubic-bezier(.16,.84,.3,1)
calc(var(--d,0ms) + 280ms)}
.jms6-syns .jms6-penna{background-size:100% 0.68em}
}
/* ================================================================= 4. TAVLAN
Whiteboard-registret. Skillnaden mot ritningen är verktyget: här är det en
markör, inte en blyertspenna. Tjockare drag, rundade ändar, ingen fyllning.
Text i bilden ENBART som namn på det som ritas — allt förklarande hör till
brödtexten intill.
========================================================================== */
.jms6-tavla{width:100%;height:auto;overflow:visible}
.jms6-tavla .t-drag{fill:none;stroke:currentColor;stroke-width:2.6;
stroke-linecap:round;stroke-linejoin:round}
.jms6-tavla .t-tunn{fill:none;stroke:currentColor;opacity:.62;stroke-width:2.1;
stroke-linecap:round;stroke-linejoin:round}
.jms6-tavla .t-namn{font:500 13.5px/1 var(--font-sans,inherit);
letter-spacing:-0.008em;fill:currentColor}
.jms6-tavla .t-penna{fill:var(--jms6-penna-lansera)}
/* =============================================================== 5. RITNINGEN
Blyertsregistret. Tunnare drag än tavlans markör, hårlinjer för hjälplinjer,
och namn i bilden ENBART som namn — resonemanget hör till listan intill.
Ritningen och listan går i takt: en nod tänds när dess rad byggs.
========================================================================== */
.jms6-ritning{width:100%;height:auto;overflow:visible;
color:var(--jms6-blad-text,currentColor)}
.jms6-ritning .r-linje{fill:none;stroke:currentColor;stroke-width:1.4;
stroke-linecap:round;stroke-linejoin:round}
.jms6-ritning .r-tunn{fill:none;stroke:currentColor;opacity:.62;stroke-width:1.1;
stroke-linecap:round;stroke-linejoin:round}
.jms6-ritning .r-hjalp{fill:none;stroke:currentColor;opacity:.16;stroke-width:1}
.jms6-ritning .r-punkt{fill:currentColor}
.jms6-ritning .r-namn{font:500 13.5px/1 var(--font-sans,inherit);
letter-spacing:-0.012em;fill:currentColor}
.jms6-ritning .r-etikett{font:500 11.5px/1 var(--font-sans,inherit);
letter-spacing:0.14em;text-transform:uppercase;
font-variant-numeric:tabular-nums;fill:currentColor;opacity:.62}
/* Svepet: en kort båge som går ETT varv och slutar där den började. Den visar
var i processen man är, i takt med listan intill. Ett varv, inte en evig
rotation — det senare vore bara rörelse. */
.jms6-svep{fill:none;stroke:var(--jms6-penna-lansera);stroke-width:11;
stroke-linecap:round;stroke-dasharray:86 794;stroke-dashoffset:0;opacity:0}
@media (prefers-reduced-motion: no-preference){
@keyframes jms6-varv{
0%{stroke-dashoffset:0;opacity:0}
7%{opacity:1}
90%{opacity:1}
100%{stroke-dashoffset:-880;opacity:0}
}
.jms6-syns .jms6-svep{animation:jms6-varv 2100ms linear 1200ms 1 both}
.jms6-tavla [data-rita],
.jms6-ritning [data-rita]{transition:stroke-dashoffset 900ms var(--jms6-ease)
calc(var(--d,0ms) + 160ms)}
}
/* ========================================================= 6. EDITORN
En redaktör ska aldrig se ett vitt block. Avslöjningen bygger på att
blockets rot får .jms6-syns — och roten är ett [data-blad]. På frontend
sätter basklassen det attributet på Elementors wrapper, men wrappern
byggs klient-sidan i editorns preview: där finns attributet inte, och
ett block som inte deklarerar sitt eget blad skulle stå kvar på
opacity:0. Motorn adopterar numera föräldralösa steg (jms6-grund.js),
men CSS:en har hängslen: i editorn visas grammatiken färdig, även om
skriptet av någon anledning inte kört.
========================================================================== */
/* Klassnamnet har skiftat mellan Elementor-versioner, så vi lyssnar på
båda. Ett block som inte syns i editorn går varken att klicka på eller
redigera, och då är hela grammatiken värd mindre än innehållet. */
body.elementor-editor-active [data-steg],
body.elementor-editor-preview [data-steg],
body.elementor-editor-active [data-serie] > *,
body.elementor-editor-preview [data-serie] > *,
body.elementor-editor-active [data-nod],
body.elementor-editor-preview [data-nod]{opacity:1;transform:none;filter:none}
body.elementor-editor-active .jms6-linje::after,
body.elementor-editor-preview .jms6-linje::after,
body.elementor-editor-active .jms6-lista::before,
body.elementor-editor-preview .jms6-lista::before,
body.elementor-editor-active .jms6-lista > li::after,
body.elementor-editor-preview .jms6-lista > li::after{transform:scaleX(1)}
body.elementor-editor-active .jms6-penna,
body.elementor-editor-preview .jms6-penna{background-size:100% 0.68em}
/* Strecken i formspråket ritas av JS via stroke-dashoffset. Kör inte JS i
editorn blir de osynliga, så de ritas färdiga där. */
body.elementor-editor-active [data-rita],
body.elementor-editor-preview [data-rita]{stroke-dasharray:none;stroke-dashoffset:0;opacity:1}