.html) — sid 1 (shop.html) visar bara bilden +
köpknappen. En radiogrupp per sida: tre tryckbara
storleksknappar, vald storlek fylls svart. Ingen JavaScript (sajtens
regel) — själva radioknappen är osynlig men fokuserbar, etiketten är den
tryckbara ytan (minst 48px hög, pekdonstryckbar på mobil) och fokusringen
läggs på etiketten. Typografin följer kortets textfält: namnet som
konstnärsnamnet (15px/600), måttet som formatraden (12px/400). */
.storleksval {
margin: 12px 0 0;
padding: 0;
border: 0;
min-width: 0;
}
.storleksval__rubrik {
padding: 0;
font-size: 12px;
font-weight: 400;
line-height: 1.6;
color: var(--text);
}
.storleksval__alternativ {
position: relative;
display: flex;
gap: 8px;
margin: 8px 0 0;
}
/* Den verkliga radioknappen: osynlig men kvar i tabbordningen och
fokuserbar (skärmläsare läser gruppnamn och val). */
.storleksval__knapp {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* Knappen kunden trycker på: lika bred i raden, minst 48px hög. */
.storleksval__etikett {
flex: 1 1 0;
min-width: 0;
min-height: 48px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 6px 4px;
border: 1px solid var(--text);
border-radius: 2px;
background-color: var(--vit);
color: var(--text);
text-align: center;
cursor: pointer;
user-select: none;
}
.storleksval__namn {
font-size: 15px;
font-weight: 600;
line-height: 1.2;
}
.storleksval__matt {
font-size: 12px;
font-weight: 400;
line-height: 1.2;
}
.storleksval__forklaring {
margin: 8px 0 0;
font-size: 12px;
font-weight: 400;
line-height: 1.6;
color: var(--text);
}
.storleksval__etikett:hover {
opacity: 0.8;
}
/* Vald storlek: svart fyllning med vit text — syns direkt på mobil. */
.storleksval__knapp:checked + .storleksval__etikett {
background-color: var(--text);
color: var(--vit);
}
.storleksval__knapp:checked + .storleksval__etikett:hover {
opacity: 1;
}
/* Fokusringen på etiketten eftersom själva radioknappen är osynlig
(samma ring som sajten: 3px --fokusring, :focus som reserv). */
.storleksval__knapp:focus-visible + .storleksval__etikett,
.storleksval__knapp:focus + .storleksval__etikett {
outline: 3px solid var(--fokusring);
outline-offset: 2px;
}
/* Raden under storleksväljaren följer den valda storleken (kundens order
2026-10-18: "Man måste ju kunna välja en av storlekarna"). DENNA
REGELGRUPP ÄR INTE LÄNGRE I ANVÄNDNING sedan 2026-10-19: shop.html visar
bara bilden + köpknappen och köpsidorna använder sina egna regler
(.kopsida__pris och .kopsida__kop-alternativ längre ned). Reglerna är
kvar oförändrade i stället för att tas bort (kundens regel: rör inte
onödigt). Mönstret är detsamma som köpsidorna använder: grundläget visar
stora storleken och med :has() visas raden för den valda storleken. */
.verkkort__kop-valj {
display: none;
}
.verkkort__kop-alternativ {
display: none;
}
.verkkort__kop-alternativ[data-storlek="large"] {
display: inline;
}
@supports selector(:has(*)) {
.verkkort__kop-valj {
display: inline;
}
.verkkort__kop-alternativ[data-storlek="large"] {
display: none;
}
.verkkort:has(.storleksval__knapp:checked) .verkkort__kop-valj {
display: none;
}
.verkkort:has(.storleksval__knapp[value="small"]:checked) .verkkort__kop-alternativ[data-storlek="small"] {
display: inline;
}
.verkkort:has(.storleksval__knapp[value="medium"]:checked) .verkkort__kop-alternativ[data-storlek="medium"] {
display: inline;
}
.verkkort:has(.storleksval__knapp[value="large"]:checked) .verkkort__kop-alternativ[data-storlek="large"] {
display: inline;
}
}
/* Bildspel på grafisk-form.html (kundens order 2026-10-16: "Gör ett bildspel,
ingen text, två spalter", "Nytt bildspel, ingen text, två spalter"). Helt
utan JavaScript: bilderna ligger ovanpå varandra i en ruta med bildernas
egen proportion (alla 648x500) och tonas in och ut i sin tur med
@keyframes — ingen synlig text, bara bilder (alt-texterna finns för
skärmläsare). Blocket ligger i kortrutnätet som ett
galleri__kolumn--span-2, alltså två spalter brett enligt samma regler som
Quizbok och Pressjärn. Cykeln är 28s (7 bilder × 4s) och varje bild får
4s mer animation-delay än föregående via nth-child-reglerna. Byt eller
lägg till bilder i på grafisk-form.html och lägg
till motsvarande nth-child-regel här (samt ändra 28s till antal bilder ×
4s) — se README.md. */
.bildspel {
position: relative;
width: 100%;
aspect-ratio: 648 / 500;
}
.bildspel img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: contain;
opacity: 0;
animation: bildspel-cykel 28s infinite;
}
.bildspel img:nth-child(2) { animation-delay: 4s; }
.bildspel img:nth-child(3) { animation-delay: 8s; }
.bildspel img:nth-child(4) { animation-delay: 12s; }
.bildspel img:nth-child(5) { animation-delay: 16s; }
.bildspel img:nth-child(6) { animation-delay: 20s; }
.bildspel img:nth-child(7) { animation-delay: 24s; }
/* Rättelse 2026-10-20 kväll (kundens rapport samma dag, ordagrant: "det blev
fel" och "bildspelen"): vid varje bildbyte tonade den utgående bilden ner
till opacity 0 PRECIS när den inkommande började tona in från 0 —
övergångarna överlappade inte och kortets vita bakgrund lyste igenom i
ca 1–1,6 s vid varje byte. Nu är varje byte en riktig övertoning
(crossfade): uttoningen slutar F sekunder IN i nästa bilds lucka, vid
(S+F)/T i stället för S/T, medan nästa bild tonar 0→1 under exakt samma
F sekunder (här F = 0,8 s) — summan av bildernas opacity är 1 genom
hela bytet och kortbakgrunden syns aldrig. Här: T = 28 s, S = 4 s,
F = 0,8 s → in 0–2,9 %, hel 2,9–14,3 %, ut 14,3–17,2 % (17,2 % = 4,8 s).
Endast uttoningens slutstopp (14,3 % → 17,2 %) och hålfasens slutstopp,
som flyttas till uttoningens start (11,4 % → 14,3 % = S/T), ändras —
intoningens stopp, 100 %-stoppet, tempo och fasförskjutningar är
oförändrade. */
@keyframes bildspel-cykel {
0% { opacity: 0; }
2.9% { opacity: 1; }
14.3% { opacity: 1; }
17.2% { opacity: 0; }
100% { opacity: 0; }
}
/* Tillgänglighet (prefers-reduced-motion): reglerna ligger samlade i EN
media query längre ner i filen, efter samtliga modifierarblock — se
kommentaren "Tillgänglighet: visa första bilden stilla" där. De låg
tidigare här men skrevs över av modifierarnas egna regler, som kommer
senare med samma specificitet (fel upptäckt 2026-10-20: .bildspel--uppslag
animerade ändå vid reduce; åtgärdat på Heads order samma dag). */
/* Bildspel med uppslag ur boken Fulltank på grafisk-form.html (kundens order
2026-10-19: "gör uppslagen från Fulltank till ett självspelande bildspel
utan texter eller pilar"). Rättelse 2026-10-19: "Bildspelet Fulltank
ligger fel. Ska ligga under Grafisk form" — blocket är flyttat från
fotografi.html till grafisk-form.html. Samma sorts bildspel som
Mästarna-bildspelet på samma sida — helt utan JavaScript, utan synlig
text och utan knappar eller pilar: bilderna byts av sig själva. Två
saker skiljer: uppslagen är 1024x723, så rutan får deras egen proportion,
och varje uppslag visas i 5 s (30 s per varv = 6 bilder × 5 s, samma
tempo som kundens tidigare uppslagsbildspel). Egna nyckelbilder, eftersom
andelarna i bildspel-cykel är räknade för 4 s per bild. Reglerna ovan
för .bildspel gäller alltjämt — detta block ändrar bara proportion,
tempo och fasförskjutningar. */
.bildspel.bildspel--uppslag {
aspect-ratio: 1024 / 723;
}
.bildspel.bildspel--uppslag img {
animation-name: bildspel-uppslag-cykel;
animation-duration: 30s;
}
.bildspel.bildspel--uppslag img:nth-child(2) { animation-delay: 5s; }
.bildspel.bildspel--uppslag img:nth-child(3) { animation-delay: 10s; }
.bildspel.bildspel--uppslag img:nth-child(4) { animation-delay: 15s; }
.bildspel.bildspel--uppslag img:nth-child(5) { animation-delay: 20s; }
.bildspel.bildspel--uppslag img:nth-child(6) { animation-delay: 25s; }
/* Samma övertoning som bildspel-cykel (se rättelsen 2026-10-20 kväll där:
kundens rapport "det blev fel" och "bildspelen" — bytena blinkade vita),
omräknad för 5 s per uppslag (16,7 % av varvet = 5 s av 30 s) och toning
F = 1 s: in 0–3,4 %, hel 3,4–16,7 %, ut 16,7–20 % (20 % = 6 s = S+F).
uttoningen slutar 1 s in i nästa uppslags lucka, samtidigt som nästa
tonar 0→1 under samma 1 s — summan av opacity är 1 genom bytet. */
@keyframes bildspel-uppslag-cykel {
0% { opacity: 0; }
3.4% { opacity: 1; }
16.7% { opacity: 1; }
20% { opacity: 0; }
100% { opacity: 0; }
}
/* Bildspel med tre färjebilder på fotografi.html (kundens order 2026-10-19:
"gör ett bildspel med dessa tre bilder ingen text två spalter, under
Fotografi, publiceras under översta bilden Istanbul"). Samma sorts
bildspel som Fulltank-uppslagen ovan — helt utan JavaScript, utan synlig
text och utan knappar eller pilar: bilderna byts av sig själva. Blocket
ligger direkt under Istanbul-bilden på fotografi.html, per "publiceras
under översta bilden Istanbul", i en galleri__kolumn--span-2 (två spalter
enligt samma regler som Quizbok och Fulltank). Bilderna är kundens filer
färja.jpg, färja1.jpg och färja2.jpg, kopierade till farja-1.jpg,
farja-2.jpg och farja-3.jpg (1000x640; sha256-verifierade kopior, uploads
orörda), så rutan får deras egen proportion. Varje bild visas i 5 s
(15 s per varv = 3 bilder × 5 s, samma tempo som Fulltank-uppslagen).
Egna nyckelbilder, eftersom andelarna i bildspel-cykel är räknade för 4 s
per bild. Reglerna ovan för .bildspel gäller alltjämt — detta block
ändrar bara proportion, tempo och fasförskjutningar. */
.bildspel.bildspel--farja {
aspect-ratio: 1000 / 640;
}
.bildspel.bildspel--farja img {
animation-name: bildspel-farja-cykel;
animation-duration: 15s;
}
.bildspel.bildspel--farja img:nth-child(2) { animation-delay: 5s; }
.bildspel.bildspel--farja img:nth-child(3) { animation-delay: 10s; }
/* Samma övertoning som bildspel-cykel (se rättelsen 2026-10-20 kväll där),
omräknad för 5 s per bild (33,3 % av varvet = 5 s av 15 s) och toning
F = 1 s: in 0–6,7 %, hel 6,7–33,3 %, ut 33,3–40 % (40 % = 6 s = S+F).
uttoningen slutar 1 s in i nästa bilds lucka, samtidigt som nästa tonar
0→1 under samma 1 s — summan av opacity är 1 genom bytet. */
@keyframes bildspel-farja-cykel {
0% { opacity: 0; }
6.7% { opacity: 1; }
33.3% { opacity: 1; }
40% { opacity: 0; }
100% { opacity: 0; }
}
/* Bildspel med två textilbilder i en spalt på fotografi.html (kundens order
2026-10-20: "Fotografi, bildspel en spalt" + 2 bilder (tygknapp, vit
klänning)). Kunden svarade 2026-10-20 i Heads frågeformulär att det ska
vara TVÅ SEPARATA bildspel — ett smalt (en spalt) med knapp/klänning och
ett brett (två spalter) med naturbilderna (se .bildspel--natur nedan).
Samma sorts bildspel som färjabildspelet ovan — helt utan JavaScript,
utan synlig text och utan knappar eller pilar: bilderna byts av sig själva.
Bilderna är kundens filer _DSC6563.jpg och _DSC6556_1000.jpg, kopierade
till dsc-6563.jpg och dsc-6556.jpg (1424x938 och 1000x667; sha256-
verifierade kopior, uploads orörda), så rutan får deras gemensamma
proportion ca 3/2. Varje bild visas i 5 s (10 s per varv = 2 bilder × 5 s,
samma tempo som färjan och Fulltank-uppslagen). Egna nyckelbilder, eftersom
andelarna i bildspel-cykel är räknade för 4 s per bild. Reglerna ovan för
.bildspel gäller alltjämt — detta block ändrar bara proportion, tempo och
fasförskjutningar. */
.bildspel.bildspel--tyg {
aspect-ratio: 3 / 2;
}
.bildspel.bildspel--tyg img {
animation-name: bildspel-tyg-cykel;
animation-duration: 10s;
}
/* Fasförskjutning (kundens order 2026-10-20, ordagrant: "lat bildspelen
bladdra i otakt"): bildspelen på fotografi.html får INTE byta bild
samtidigt. Lösningen är olika FAS, inte olika tempo — alla behåller 5 s
per bild. Färjabildspelet är oförändrat (fas 0: byten vid 0/5/10/15 … s
efter laddning) och fasförskjutningen är bakad i animation-delay-talen
för de två nya spelen:
- .bildspel--tyg: bild 1 = -3,7 s, bild 2 = 1,3 s → byten vid
1,3/6,3/11,3/16,3 … s (fas 1,3 s mod 5). Negativ delay startar cykeln
mitt i första bildens slot (3,7 s av 10 s = 37 %, mitt i "opacity 1"),
så första bilden syns direkt vid laddning — ingen tom ruta.
- .bildspel--natur: -2,5/2,5/7,5/12,5 s → byten vid
2,5/7,5/12,5/17,5 … s (fas 2,5 s mod 5). Bild 1 startar 2,5 s in i sin
20 s-cykel (12,5 %, mitt i "opacity 1") och syns också direkt.
Bytena sammanfaller aldrig: faserna 0 / 1,3 / 2,5 är distinkta mod 5
(0, 5, 10 … mot 1,3, 6,3, 11,3 … mot 2,5, 7,5, 12,5 …). prefers-reduced-
motion-läget är oförändrat — första bilden stilla (se samlad media query
sist i bildspelssektionen). */
.bildspel.bildspel--tyg img:nth-child(1) { animation-delay: -3.7s; }
.bildspel.bildspel--tyg img:nth-child(2) { animation-delay: 1.3s; }
/* Nyckelbilder för 50 % av varvet = 5 s av 10 s (in 0–10 %, hel 10–50 %,
ut 50–60 %) — övertoning enligt rättelsen 2026-10-20 kväll (kundens
rapport "det blev fel" och "bildspelen"): uttoningen slutar 1 s in i
nästa bilds lucka (60 % = 6 s = S+F), samtidigt som nästa tonar 0→1
under samma 1 s, så summan av opacity är 1 genom bytet och kortets vita
bakgrund syns aldrig. */
@keyframes bildspel-tyg-cykel {
0% { opacity: 0; }
10% { opacity: 1; }
50% { opacity: 1; }
60% { opacity: 0; }
100% { opacity: 0; }
}
/* Bildspel med fyra naturbilder i två spalter på fotografi.html (kundens
order 2026-10-20: "Fotografi, bildspel tvåspalt, lägg ovanför färja" +
4 bilder (Stammar, mossa, Svamp_6, Svamp_10)). Kunden svarade 2026-10-20
i Heads frågeformulär att naturbildspelet ska ligga "direkt ovanför
farjabildspelet i hogra kolumnen (potatis kvar till vanster)" — kundens
egna ord, citerade utan svenska tecken. Samma sorts bildspel som
färjabildspelet ovan — helt utan JavaScript, utan synlig text och utan
knappar eller pilar: bilderna byts av sig själva. Bilderna är kundens
filer Stammar_1_2_1000.jpg, mossa.jpg, Svamp_6.jpg och Svamp_10.jpg,
kopierade till stammar-1-2.jpg, mossa.jpg, svamp-6.jpg och svamp-10.jpg
(1000x665, 664x441, 1000x667 och 1000x664; sha256-verifierade kopior,
uploads orörda), så rutan får deras gemensamma proportion ca 3/2. Varje
bild visas i 5 s (20 s per varv = 4 bilder × 5 s, samma tempo som färjan
och Fulltank-uppslagen). Egna nyckelbilder, eftersom andelarna i
bildspel-cykel är räknade för 4 s per bild. Reglerna ovan för .bildspel
gäller alltjämt — detta block ändrar bara proportion, tempo och
fasförskjutningar. */
.bildspel.bildspel--natur {
aspect-ratio: 3 / 2;
}
.bildspel.bildspel--natur img {
animation-name: bildspel-natur-cykel;
animation-duration: 20s;
}
/* Fasförskjutning enligt kundens order "lat bildspelen bladdra i otakt" —
se kommentaren vid .bildspel--tyg ovan för hela uträkningen. */
.bildspel.bildspel--natur img:nth-child(1) { animation-delay: -2.5s; }
.bildspel.bildspel--natur img:nth-child(2) { animation-delay: 2.5s; }
.bildspel.bildspel--natur img:nth-child(3) { animation-delay: 7.5s; }
.bildspel.bildspel--natur img:nth-child(4) { animation-delay: 12.5s; }
/* Nyckelbilder för 25 % av varvet = 5 s av 20 s (in 0–5 %, hel 5–25 %,
ut 25–30 %) — övertoning enligt rättelsen 2026-10-20 kväll (kundens
rapport "det blev fel" och "bildspelen"): uttoningen slutar 1 s in i
nästa bilds lucka (30 % = 6 s = S+F), samtidigt som nästa tonar 0→1
under samma 1 s, så summan av opacity är 1 genom bytet och kortets vita
bakgrund syns aldrig. */
@keyframes bildspel-natur-cykel {
0% { opacity: 0; }
5% { opacity: 1; }
25% { opacity: 1; }
30% { opacity: 0; }
100% { opacity: 0; }
}
/* Bildspel med uppslag ur kokboken Första Kökshandboken på grafisk-form.html
(kundens order 2026-10-20, ordagrant: "Bildspel til grafisk form"). Samma
sorts bildspel som Fulltank-uppslagen ovan — helt utan JavaScript, utan
synlig text och utan knappar eller pilar: uppslagen byts av sig själva.
Sju uppslag ur boken (2802x2102), så rutan får deras egen proportion, och
varje uppslag visas i 5 s (35 s per varv = 7 bilder × 5 s). Egna
nyckelbilder, eftersom andelarna i bildspel-cykel är räknade för 4 s per
bild — här omräknade för 5 s per uppslag (14,3 % av varvet = 5 s av 35 s;
samma in- och uttoning som bildspel-cykel, och procentandelarna blir
identiska eftersom båda cyklerna har sju bilder). Reglerna ovan för
.bildspel gäller alltjämt — detta block ändrar bara proportion, tempo och
fasförskjutningar. */
.bildspel.bildspel--koksbok {
aspect-ratio: 2802 / 2102;
}
.bildspel.bildspel--koksbok img {
animation-name: bildspel-koksbok-cykel;
animation-duration: 35s;
}
.bildspel.bildspel--koksbok img:nth-child(2) { animation-delay: 5s; }
.bildspel.bildspel--koksbok img:nth-child(3) { animation-delay: 10s; }
.bildspel.bildspel--koksbok img:nth-child(4) { animation-delay: 15s; }
.bildspel.bildspel--koksbok img:nth-child(5) { animation-delay: 20s; }
.bildspel.bildspel--koksbok img:nth-child(6) { animation-delay: 25s; }
.bildspel.bildspel--koksbok img:nth-child(7) { animation-delay: 30s; }
/* Samma övertoning som bildspel-cykel (se rättelsen 2026-10-20 kväll där),
omräknad för 5 s per uppslag (14,3 % av varvet = 5 s av 35 s) och toning
F = 1 s: in 0–2,9 %, hel 2,9–14,3 %, ut 14,3–17,2 % (17,2 % = 6 s = S+F).
uttoningen slutar 1 s in i nästa uppslags lucka, samtidigt som nästa
tonar 0→1 under samma 1 s — summan av opacity är 1 genom bytet. */
@keyframes bildspel-koksbok-cykel {
0% { opacity: 0; }
2.9% { opacity: 1; }
14.3% { opacity: 1; }
17.2% { opacity: 0; }
100% { opacity: 0; }
}
/* Bildspel med uppslag ur projektet "Gård och torp i stan" på grafisk-form.html
(kundens orderer 2026-10-21, ordagrant: "gör ett bildspel av dessa" med fem
bilagor, "under grafisk design" och "Istan, bildspel, två bilder" med två nya
uppslag). Samma sorts bildspel som Fulltank- och kokboksuppslagen ovan —
helt utan JavaScript, utan synlig text och utan knappar eller pilar:
uppslagen byts av sig själva. UPDATERAT 2026-10-21: spelet hade sju bilder
och 35 s-cykel; kunden drog ut istan-franzen-92-95-1.jpg ("Nio råd", eget
kort) och de två porten-uppslagen (eget bildspel .bildspel--porten) — nu
FYRA bilder och 20 s-cykel. Rutan har bildernas ungefärliga proportion
3/2 (samma val som .bildspel--tyg och .bildspel--natur — bilderna varierar
några pixlar i höjd och object-fit: contain i grundregeln gör att ingen
beskärs), och varje uppslag visas i 5 s (20 s per varv = 4 bilder × 5 s).
Nyckelbilderna enligt rättelsen 2026-10-20 kväll (verklig övertoning):
in 0–5 %, hel 5–25 %, ut 25–30 % (F = 1 s). FAS: bild 1 har -2,5 s
animation-delay och övriga är förskjutna lika mycket — kundens order
2026-10-20 "lat bildspelen bladdra i otakt". Första bilden syns direkt
vid laddning. Reglerna ovan för .bildspel gäller alltjämt — detta block
ändrar bara proportion, tempo och fasförskjutningar. */
.bildspel.bildspel--istan {
aspect-ratio: 3 / 2;
}
.bildspel.bildspel--istan img {
animation-name: bildspel-istan-cykel;
animation-duration: 20s;
}
.bildspel.bildspel--istan img:nth-child(1) { animation-delay: -2.5s; }
.bildspel.bildspel--istan img:nth-child(2) { animation-delay: 2.5s; }
.bildspel.bildspel--istan img:nth-child(3) { animation-delay: 7.5s; }
.bildspel.bildspel--istan img:nth-child(4) { animation-delay: 12.5s; }
/* Övertoning enligt rättelsen 2026-10-20 kväll (F = 1 s av 20 s = 5 %,
hålfasen slutar vid S/T = 25 %, uttoningen vid (S+F)/T = 30 %). */
@keyframes bildspel-istan-cykel {
0% { opacity: 0; }
5% { opacity: 1; }
25% { opacity: 1; }
30% { opacity: 0; }
100% { opacity: 0; }
}
/* Bildspel med portens två uppslag på grafisk-form.html (kundens order
2026-10-21, ordagrant: "ta ur portens två uppslag och publicera i ett
separat bildspel"). Uppslagen togs ur Istan-bildspelet ovan:
istan-uppslag.jpg ("Porten är husets ansikte") och
ny-istan-portar-64-72-3.jpg ("portar", 1910–1950-tal). Samma sorts
bildspel som övriga på sidan — helt utan JavaScript, utan synlig text
och utan knappar eller pilar. Två uppslag, 5 s var (10 s per varv),
proportion 3/2 som i Istan-spelet. Nyckelbilder enligt rättelsen
2026-10-20 kväll: in 0–10 %, hel 10–50 %, ut 50–60 % (F = 1 s av 10 s).
FAS: bild 1 har -1,2 s animation-delay — tredje fasläget på sidan
(koksbok/uppslag/mastarna 0 s, Istan -2,5 s, porten -1,2 s), så inga
spel byter bild samtidigt (kundens order 2026-10-20 "lat bildspelen
bladdra i otakt"). Reglerna ovan för .bildspel gäller alltjämt. */
.bildspel.bildspel--porten {
aspect-ratio: 3 / 2;
}
.bildspel.bildspel--porten img {
animation-name: bildspel-porten-cykel;
animation-duration: 10s;
}
.bildspel.bildspel--porten img:nth-child(1) { animation-delay: -1.2s; }
.bildspel.bildspel--porten img:nth-child(2) { animation-delay: 3.8s; }
@keyframes bildspel-porten-cykel {
0% { opacity: 0; }
10% { opacity: 1; }
50% { opacity: 1; }
60% { opacity: 0; }
100% { opacity: 0; }
}
/* Tillgänglighet: visa första bilden stilla om webbläsaren avvisar automatisk
rörelse (prefers-reduced-motion) — gäller ALLA bildspel: grundregeln och
varje modifierare (.bildspel--uppslag, .bildspel--farja, .bildspel--tyg,
.bildspel--natur, .bildspel--koksbok, .bildspel--istan,
.bildspel--porten). Ett enda block, lagt sist efter samtliga
modifierarblock, så att animation: none vinner över deras animation-name
och animation-duration (samma specificitet, men senare i källan). Detta
ersätter de tre tidigare spridda media queries — den vid rad 935 skrevs
över av modifierarnas egna regler, vilket gjorde att .bildspel--uppslag
animerade ändå (fel upptäckt 2026-10-20, åtgärdat på Heads order).
Ingen förändring i normalt läge — bara när webbläsaren avvisar rörelse. */
@media (prefers-reduced-motion: reduce) {
.bildspel img,
.bildspel.bildspel--uppslag img,
.bildspel.bildspel--farja img,
.bildspel.bildspel--tyg img,
.bildspel.bildspel--natur img,
.bildspel.bildspel--istan img,
.bildspel.bildspel--porten img,
.bildspel.bildspel--koksbok img {
animation: none;
opacity: 0;
}
.bildspel img:first-child,
.bildspel.bildspel--uppslag img:first-child,
.bildspel.bildspel--farja img:first-child,
.bildspel.bildspel--tyg img:first-child,
.bildspel.bildspel--natur img:first-child,
.bildspel.bildspel--koksbok img:first-child {
opacity: 1;
}
}
/* Smala skärmar: två spalter vid ≤1024px, en spalt vid ≤768px */
@media (max-width: 64rem) {
/* Hävandet av rubrikstorleken (2,8rem) togs bort 2026-11-03 — rubriken är
nu liten (1,25rem) på alla skärmar (kundens order). */
.galleri__rutnat {
column-count: 2;
}
/* 2-spaltersläget: span-2- och span-3-korten (Quizbok, Istanbul_1)
blir hela bredden */
.galleri__kolumn--span-2 > .verk {
width: 100%;
}
}
/* Par-rad: två verk-kort sida vid sida på samma rad med 30px mellanrum
(kundens order 2026-10-17: "Lägg streetsmart_2 till höger om streetsmart_1"
och "Glöm inte 30 px space på sidan med illustrationer"). Raden bryter ut
ur murverket (column-span: all) och tar hela bredden. Kolumnbredderna
styrs av kundens order 2026-10-17 "Streetsmart_2, lägg på en spalt"
(se reglerna nedan): vänster 2 spalter (750px), höger 1 spalt (360px). */
.galleri__par {
column-span: all;
display: flex;
gap: 30px;
margin: 0 0 30px;
}
.galleri__par > .galleri__kolumn {
flex: 0 0 auto;
min-width: 0;
padding-bottom: 0;
}
/* Par-radens kolumner (kundens order 2026-10-17: "Streetsmart_2, lägg på
en spalt" = 1 spalt/360px till höger, Streetsmart 2 spalter/750px till
vänster). Samma formel som rutnätets spaltbredder ovan
((100% - 60px)/3 per spalt med 30px mellanrum), så raden blir
750px + 30px + 360px = 1140px (hela behållarbredden) och förhållandet
2:1 följer spaltbredderna även på mellanbredder utan att krocka. */
.galleri__par > .galleri__kolumn:first-child {
width: calc((100% - 60px)/3*2 + 30px); /* 2 spalter + mellanrum = 750px */
}
.galleri__par > .galleri__kolumn:last-child {
width: calc((100% - 60px)/3); /* 1 spalt = 360px */
}
/* Omvänd par-rad på fotografi.html: potatis-kortet till vänster om
färjabildspelet (kundens order 2026-10-19: "Potatisarna placeras till
vänster om färjan"). Denna order ersätter kundens order 2026-10-19
"lägg potatisarna till höger om färja" (äldre order, står kvar som
historik). Modifikatorn galleri__par--smal-forst speglar standardraden:
första kolumnen 1 spalt/360px, sista 2 spalter/750px, 30px mellanrum.
Reglerna har samma selektorspecificitet som grundreglerna ovan men ligger
efter dem, så de vinner på breda skärmar; mediafrågan för <=48rem längre
ned ligger ännu senare med samma specificitet och vinner på smala skärmar,
så staplingen (30px mellanrum) blir oförändrad. Illustrationssidans
par-rad (Streetsmart/Kaffesump) använder inte modifikatorn och är
oförändrad: vänster 2 spalter/750px, höger 1 spalt/360px. */
.galleri__par--smal-forst > .galleri__kolumn:first-child {
width: calc((100% - 60px)/3); /* 1 spalt = 360px */
}
.galleri__par--smal-forst > .galleri__kolumn:last-child {
width: calc((100% - 60px)/3*2 + 30px); /* 2 spalter + mellanrum = 750px */
}
/* Smala skärmar: raden staplas med 30px mellanrum och korten får samma
maxbredd som övriga kort (360px centrerat vid <=768px). */
@media (max-width: 48rem) {
.galleri__par {
flex-direction: column;
align-items: center;
gap: 30px;
}
.galleri__par > .galleri__kolumn,
.galleri__par > .galleri__kolumn:first-child,
.galleri__par > .galleri__kolumn:last-child {
width: 100%;
flex: 0 0 auto;
}
.galleri__par > .galleri__kolumn > .verk {
max-width: 360px;
margin-inline: auto;
width: 100%;
}
}
@media (max-width: 48rem) {
.galleri__rutnat {
column-count: 1;
}
/* Enspaltsläget: alla kort, även span-2 och span-3, tillbaka till 1 spalt
med kortet max 360px centrerat */
.galleri__kolumn > .verk,
.galleri__kolumn--span-2 > .verk {
max-width: 360px;
margin-inline: auto;
width: 100%;
}
/* Mindre sidhuvudspadding även på smala skärmar (kundens order 2026-11-03:
liten, vänsterställd rubrik — inte onödigt luftig yta). */
.sidhuvud {
padding: 1rem;
}
.innehall {
padding: 30px 30px 45px;
}
}
/* ------------------------------------------------------------------
Butiken 2026-10-19: köpknappen och köpsidan (sid 2,
kopsida-.html) enligt kundens order 2026-10-19. Sid 1
(shop.html) visar per produkt bara bilden + köpknappen; knappen
länkar till köpsidan där kunden väljer storlek, ser priset för den
storleken och går vidare till kassan. Allt är ren CSS —
radioknapparna styr pris och köpknapp via :has() (samma mönster som
.verkkort__kop använder på shop.html). Ingen JavaScript. */
/* Köpknappen: 10 % svart yta med svart text, rektangulär (kundens order
2026-10-19 "Köpknappen 10% svart med svart text" — ersätter den svarta
ytan med vit text från mockupen). Typografin är oförändrad: Poppins
15px/300 — se design/typografi-spec.md, tabellen för browse-korten.
Används både på shop.html (sid 1) och på köpsidorna (sid 2). Länk
aldrig fet (kundens order 2026-10-15 "Länkar ska aldrig vara feta") —
vikten 300 följer referensens knapp. Ingen understrykning; hover
markerar klickbarheten med lätt opacitet. Fokusringen (3 px) kommer
från den globala :focus-visible-regeln. */
.kopknapp {
display: block;
width: 100%;
padding: 13px 24px;
border-radius: 2px;
background-color: rgba(0, 0, 0, 0.1);
color: var(--text);
font-family: "Poppins", sans-serif;
font-size: 15px;
font-weight: 300;
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.kopknapp:hover {
opacity: 0.85;
}
/* Mallknappen på shop.html (imageholderns kort) är en span med samma
utseende — ingen länk, produkten finns inte ännu. Pekaren blir
standard (ingen klickbar yta). */
span.kopknapp {
cursor: default;
}
/* Raden med köpknappen på shop.html-korten (sid 1). Egen klass i
stället för .verkkort__kop, så länkstilen där (40% svart textfärg
sedan kundens order 2026-10-20) inte smittar
av sig på den svarta knappen. */
.verkkort__koprad {
margin: 16px 0 0;
}
/* Köpsidan: två kolumner — bilden till vänster (2 delar) och
köppanelen till höger (1 del), 30px mellanrum (sajtens fasta rytm).
Staplas på smala skärmar (≤1024px, samma brytpunkt som
layout-specens rutnät): då kommer bilden först. */
.kopsida__layout {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: 30px;
align-items: start;
}
/* Produktbilden: originalfilen, obruten (ingen beskärning),
object-fit: contain så bilden aldrig sträcks. */
.kopsida__bild {
display: block;
width: 100%;
height: auto;
object-fit: contain;
background-color: var(--platshallare-yta);
}
/* Verkstiteln: sidans h1, serif enligt sajtens typografi (Playfair
Display 3rem/700/1.4, 2.2rem ≤1024px — samma värden som
sidhuvudstiteln och typografi-specens mätta verkstitel h1). */
.kopsida__verkstitel {
margin: 0 0 24px;
font-family: "Playfair Display", serif;
font-size: 3rem;
font-weight: 700;
line-height: 1.4;
letter-spacing: normal;
text-transform: none;
color: var(--text);
}
.kopsida__koppanel {
min-width: 0;
}
/* Priset i mockupens prisplats: Poppins 18px/600 (typografi-specens
prisetikett .textprice). Innan en storlek är vald visas
.kopsida__pris-valj ("Välj en storlek.") i sajtens brödtextstil
(Poppins 16px/300) och inget pris. */
.kopsida__prisblock {
margin: 16px 0 0;
}
.kopsida__pris-valj {
margin: 0;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 1.6;
color: var(--text);
}
.kopsida__pris {
margin: 0;
font-family: "Poppins", sans-serif;
font-size: 18px;
font-weight: 600;
line-height: 1.6;
color: var(--text);
}
/* Köpknappens rad på köpsidan (en knapp per storlek — href måste peka
på rätt storlek utan JavaScript). */
.kopsida__kop {
margin: 16px 0 0;
}
/* Horisontell avdelare mellan köpknappen och specblocket (mockupens
ordning). */
.kopsida__avdelare {
margin: 24px 0;
border: 0;
border-top: 1px solid #d9d9d9;
}
/* Specblocket: etiketter och värden i Poppins 16px/300 (typografi-
specen: referensens specetiketter och specvärden har identiska
typografivärden). dd har webbläsarens vänstermarginal som default —
nollställd här. */
.kopsida__spec {
margin: 0;
}
.kopsida__spec-etikett,
.kopsida__spec-varde {
margin: 0;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 1.6;
color: var(--text);
}
.kopsida__spec-varde {
margin: 0 0 12px;
}
.kopsida__spec-varde:last-child {
margin-bottom: 0;
}
/* Priset och köpknappen följer den valda storleken (kundens order
2026-10-19: "Pris måste anges när en storlek är vald"). Grundläget
(även webbläsare utan :has()) visar stora storleken, liksom
köp-/nedladdningsraden gjorde på shop.html före :has()-stödet — då
går köpet alltid att göra. Med :has() (alla aktuella webbläsare)
visas "Välj en storlek." tills något är valt, och därefter priset
och köpknappen för just den valda storleken (spannens data-storlek
matchar radioknapparnas value). */
.kopsida__pris-valj {
display: none;
}
.kopsida__pris,
.kopsida__kop-alternativ {
display: none;
}
.kopsida__pris[data-storlek="large"],
.kopsida__kop-alternativ[data-storlek="large"] {
display: block;
}
@supports selector(:has(*)) {
.kopsida__pris-valj {
display: block;
}
.kopsida__pris[data-storlek="large"],
.kopsida__kop-alternativ[data-storlek="large"] {
display: none;
}
.kopsida__koppanel:has(.storleksval__knapp:checked) .kopsida__pris-valj {
display: none;
}
.kopsida__koppanel:has(.storleksval__knapp[value="small"]:checked) .kopsida__pris[data-storlek="small"],
.kopsida__koppanel:has(.storleksval__knapp[value="small"]:checked) .kopsida__kop-alternativ[data-storlek="small"] {
display: block;
}
.kopsida__koppanel:has(.storleksval__knapp[value="medium"]:checked) .kopsida__pris[data-storlek="medium"],
.kopsida__koppanel:has(.storleksval__knapp[value="medium"]:checked) .kopsida__kop-alternativ[data-storlek="medium"] {
display: block;
}
.kopsida__koppanel:has(.storleksval__knapp[value="large"]:checked) .kopsida__pris[data-storlek="large"],
.kopsida__koppanel:has(.storleksval__knapp[value="large"]:checked) .kopsida__kop-alternativ[data-storlek="large"] {
display: block;
}
}
/* Köpsidan: smala skärmar (≤1024px) staplar kolumnerna — bilden överst
och köppanelen under (kundens order 2026-10-19: "Staplas på smala
skärmar"). Rubriken följer typografi-specens brytpunkt (2.2rem). */
@media (max-width: 64rem) {
.kopsida__layout {
grid-template-columns: 1fr;
}
.kopsida__verkstitel {
font-size: 2.2rem;
}
}