/* The food carousel under the hero: a stack of polaroids that deals itself. Chosen by Dennis 2026-08-07 out of three autoplaying versions; the other two (the row on the table, the line) stay as previews in tools/bygg_polaroid.py. The frame is the site's own polaroid from the menu page (`.polaroid` in pages.css): paper with the picture inset, the caption written by hand, a tilt. This is the same object at carousel size, so nothing new was invented. No controls are drawn. Dennis asked for the arrows, the pause button, the count and the progress line to go, and for one "Se menyn" button instead. The stop moved into the pile itself: hover, keyboard focus and a tap all hold it, so every input still has a way to stop the motion. prefers-reduced-motion gets no motion at all -- the six photographs are simply laid out. */ /* HEIGHT IS FOUR NUMBERS, AND ALL OF THEM WERE GENEROUS. Dennis, 2026-08-10: the food section takes far too much height. Measured at 1440x900 it stood 927 px, which is 1.03 screens, and the whole of it is arithmetic rather than taste: the card width sets the picture (400 -> 500), plus the chin (90), plus the pile's stagger (33), plus the slack around the rotation (112), plus the section's own padding (192). So each number is cut against what it is actually for, not by a flat scale. The card goes to 20rem, which takes the picture with it. The slack was sized for a 600px card turning 5 degrees, about 27px of swing per side; a 320px card swings roughly half that, so 2.5rem covers it with room for the shadow. The padding drops a step. The chin is the one number left alone: the caption measured 86 px against a 90 px chin, so there is nothing there to give, and cutting it would clip a dish name rather than save space. */ .matkar { --kb: min(20rem, 76vw); /* card width */ --bild-h: calc(var(--kb) * 1.25); /* the picture is 4:5 */ --haka: 5.6rem; /* the chin: handwriting plus one line */ --lyft: 2.5rem; --steg-x: 13px; /* how far each card behind peeks out */ --steg-y: 9px; padding-block: clamp(2.5rem, 5vw, 4rem); } /* minmax(0, 1fr), not the implicit 1fr: the pile's declared width is wider than a 375px column, and an auto track takes its intrinsic width -- which grew the grid past .inre and pushed every child in it, headline included, out of the viewport. */ .matkar__rutnat { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; grid-template-columns: minmax(0, 1fr); /* Tre rutnätsbarn, inte två: ord, bunt och knappen var för sig. Namngivna i stället för att luta sig på källkodsordning, för ordningen SKA skilja sig mellan lägena -- se kommentaren under 58rem. */ grid-template-areas: "ord" "bunt" "cta"; } .matkar__ord { grid-area: ord; } .matkar__scen { grid-area: bunt; } .matkar__cta { grid-area: cta; } /* Dennis 2026-08-19: "på ur köket blocket så kan se menyn knappen vara under polaroid bilderna". Knappen låg i .matkar__ord, alltså före bunten i källkodsordning -- rätt på skrivbordet, där den ändå läses i sin egen kolumn, men FÖRE fotografierna i mobilens enda kolumn. grid-template-areas byter bara ORDNINGEN, inte markupen eller tabbordningen: DOM:en är oförändrad, en skärmläsare möter fortfarande text före bilder. */ @media (min-width: 58rem) { .matkar__rutnat { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ord bunt" "cta bunt"; } } @media (max-width: 57.999rem) { .matkar { --kb: min(17rem, 62vw); --steg-x: 9px; --steg-y: 7px; --lyft: 1.75rem; } } /* INGEN DRAGNING NÅGONSTANS LÄNGRE, Dennis 2026-08-19: "gör så att man inte kan interagera med dom" -- alla bunter, alla brytpunkter (matkarusell.js). cursor: auto och touch-action: auto rakt av; grab/grabbing/pan-y hade varit ett löfte om en dragning som inte finns. Hover-paus och tangentbord är opåverkade. */ .matkar__scen { position: relative; width: calc(var(--kb) + 3 * var(--steg-x) + 2 * var(--lyft)); height: calc(var(--bild-h) + var(--haka) + 3 * var(--steg-y) + 2 * var(--lyft)); max-width: 100%; touch-action: auto; justify-self: center; cursor: auto; /* KORTET SOM LÄMNAR FICK RYMD LÅDAN ALDRIG BUDGETERAT FÖR. Dennis 2026-08-19: "på oktoberfest, när bilderna bläddras så stretchas höger sida ... som att bilden bredar ut sig". Inget kort stretchar -- .ar-flygande FLYTTAR det lämnande kortet translate(124%, 5%), och lådans bredd ovan räknar bara med bunten i VILA (kb + 3*steg-x + 2*lyft). Så länge korten var 16,5rem kostade 124 % av dem mindre än marginalen i den 30rem-kolumn bunten står i; sedan dagens 23rem (20 % större, samma ändring) svischar kortet i stället ut ~285 px till höger -- längre än kolumnen har kvar -- och synen av ett papper som glider förbi sin egen ram läses som att fotot breder ut sig. overflow: clip håller lämningen INOM lådan i stället för att ta bort den: kortet glider och tonas bort bakom kanten, det klipps aldrig av en rörelse som redan var på väg att sluta. Vilofansen (basbunten på startsidan, steg-x/-steg-y > 0) berörs inte -- lådans mått ovan är räknade för att RYMMA just den fanen, så clip skär aldrig i den. */ overflow: clip; } .matkar__scen:focus-visible { outline: 2px solid var(--valnot); outline-offset: 6px; } /* ETT STILLA KORT FYLLER LÅDAN, LÅDAN ÄR OFÖRÄNDRAD. Dennis 2026-08-18: kontaktheron ska vara "samma storlek som de andra två heroerna" -- prövat av matt_heroer.mjs, som INTE rörs här. Dennis 2026-08-19: "känns pluttigt med en bild och sen massa empty space". Lådans mått (.matkar__scen ovan) är formeln för en HEL BUNT: --kb plus 3 * --steg-x/--steg-y åt sidorna dit fanade kort bakom skulle peka ut. Ett ensamt, stillastående kort (matkar__scen--stilla) har ingen sådan bunt att peka ut ur -- den luften stod bara tom. Så i stället för en mindre låda (som bryter likheten Dennis bad om) blir kortet SJÄLVT så stort lådan tillåter. Räknat mot BÅDA lådans gränser -- vilket villkor som binder beror på formen: med 4:5 (till 2026-08-19) tog höjden slut FÖRE bredden; med 3:2 är bilden grundare och det är BREDDEN som tar slut först (323 av 359 px vid skrivbordets mått, mot höjdvillkorets 334,5). min() håller det sanningen oavsett vilket som binder, utan att någon rad behöver veta vilket. --stilla-marginal är den enda handvalda konstanten: den täcker det fasta rotate(-2deg) (inget svep, kortet ligger stilla) plus skuggans synliga räckvidd (0 14px 24px -14px ≈ 10px netto). Bredden räknas mot --haka (5,6rem, två rader) -- ett medvetet konservativt tak, för kontaktkortets bildtext är bara EN rad ("Bergsunds Strand 33"), uppmätt 60px mot --hakas 89,6. Skulle en rad till läggas till händer inget: bredden är redan räknad för att rymma den. CENTRERAD MED FLEX, INTE ETT RÄKNAT top. Ett top som antar --hakas fulla höjd centrerar fel när innehållet är kortare -- uppmätt: kortet hamnade 13px från taket men 62px från golvet, för resten av lådan var till för en rad text som aldrig skrevs. Flexboxen centrerar mot kortets FAKTISKA höjd i stället, oavsett hur många rader hakan råkar ha. */ .matkar__scen--stilla { --stilla-marginal: 1.125rem; } .matkar__scen--stilla .matkar__bunt { display: flex; align-items: center; justify-content: center; height: 100%; } .matkar__scen--stilla .matkar__kort { position: static; /* Höjdvillkorets faktor är 1,5 (talet i /2*3), inte 1,25 -- LIGGANDE 2026-08-19. Härledd ur samma ekvation som förut, bara med kortets höjd = bredd * 2/3 i stället för bredd * 1,25: Hbox - 2m = Wc*(2/3) + haka ger Wc = kb + (3*steg-y + 2*lyft - 2m) * 1,5. */ width: min( calc(var(--kb) + 3 * var(--steg-x) + 2 * var(--lyft) - 2 * var(--stilla-marginal)), calc(var(--kb) + (3 * var(--steg-y) + 2 * var(--lyft) - 2 * var(--stilla-marginal)) * 1.5) ); } .matkar__bunt { list-style: none; margin: 0; padding: 0; } /* One card. --d is its depth in the pile, written by the script: 0 is the one in your hand. */ .matkar__kort { position: absolute; left: var(--lyft); top: calc(var(--lyft) + 3 * var(--steg-y)); width: var(--kb); margin: 0; background: var(--papper); padding: var(--s-2) var(--s-2) 0; box-shadow: 0 1px 2px rgb(43 26 14 / 0.34), 0 14px 24px -14px rgb(43 26 14 / 0.7); /* NO scale in the depth transform: with the origin near the thumb a 2 % shrink pulls the top edge down about as far as the offset pushes it out, and the pile cancels itself into a single photograph. Translation and rotation only. The drag tilt has its own UNITLESS variable, because px inside a deg calc is invalid -- and an invalid calc drops the whole declaration, which rendered every card at transform:none while the CSS looked perfectly reasonable. */ /* --d FALLER TILLBAKA PÅ --i, OCH DET ÄR INTE KOSMETIK. --d skrivs av skriptet; --i står i markupen. Utan JS var --d alltså osatt, och calc() med en osatt variabel är ogiltig -- vilket släpper HELA deklarationen. Följden: transformen försvann (alla kort på samma plats, orörda) och z-index blev auto, så DOM- ordningen bestämde och det SISTA kortet låg överst. Grinden på oktoberfestsidan fällde det 2026-08-17 på att första kortet inte låg överst utan JS; det gällde startsidan lika länge, osett. Med fallbacken renderar bunten sitt utgångsläge utan skript, och det är samma läge skriptet börjar i. Samma fälla som kommentaren ovan beskriver för px-i-deg, en rad ifrån. */ transform: translate(calc(var(--d, var(--i)) * var(--steg-x) + var(--dx, 0px)), calc(var(--d, var(--i)) * var(--steg-y) * -1)) rotate(calc(var(--d, var(--i)) * 2.4deg - 2deg + var(--dr, 0) * 1deg)); transform-origin: 50% 92%; /* it pivots near the thumb, not at its centre */ z-index: calc(20 - var(--d, var(--i))); transition: transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 320ms ease; } /* The two nobody sees park exactly UNDER the top card, hidden by OCCLUSION rather than opacity. Two measured reasons: an opacity-0 box still counts in overflow (out in the fan they pushed a 375px viewport to 412px), and fading a card fades its caption -- those captions measured 1.05:1, because text at opacity 0 is text nobody can read. Covered by the card above, they need no fade at all. */ .matkar__kort[data-d="4"], .matkar__kort[data-d="5"] { pointer-events: none; transform: translate(0, 0) rotate(-2deg); } /* Leaving. A flick STARTS fast: with an ease-in curve the card was still lying over the new one at 150ms, two handwritten captions in each other, which reads as a smudge rather than a hand. And z-index above the pile, because the order advances at the START of the flight, so without this the card inherits the depth it is travelling TO and slides out behind everything. */ .matkar__kort.ar-flygande { z-index: 30; transform: translate(124%, 5%) rotate(11deg); opacity: 0; transition: transform 420ms cubic-bezier(0.2, 0.8, 0.3, 1), opacity 360ms ease-out; } .matkar__kort.ar-ater { transition: none; } /* overflow: clip SEDAN BESKÄRNINGEN FICK EN ZOOM 2026-08-18. Rutan är kortets bildyta, och en zoom är scale på bilden inuti den -- utan klippning växer fotografiet ut över pappersramen och kortets vita kant försvinner på den sida zoomen råkar dra åt. Vid zoom 1 gör raden ingenting, alltså kostar den inget för de bilder som inte har någon beskärning. */ .matkar__bild { display: block; position: relative; background: var(--valnot); overflow: clip; } .matkar__bild img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; } /* LIGGANDE PÅ DE TRE HEROSIDORNA, Dennis 2026-08-19: "jag vill ha horisontella polaroid bilder" på Oktoberfest, Större sällskap och Kontakt. .matkar--fri är redan den klass som är unik för just dessa tre (index-bunten bär den inte), så formen ändras HÄR och index-sidans "Ur köket" är opåverkad. Samma tal (2/3 = 3:2) måste stå på båda raderna: --bild-h styr scenens/lådans mått, aspect-ratio styr själva bildelementet -- en ändrad utan den andra ger en ruta av en form och en bild av en annan. */ .matkar--fri .matkar__bild img { aspect-ratio: 3 / 2; } /* EN BUNT SOM INTE ÄR ETT EGET BAND. På startsidan ÄR .matkar sektionen och bär bandets padding; i oktoberfestsidans hero ligger bunten i ett rutnät inuti ett band som redan har sin. Måtten (--kb och de andra) bor på .matkar, alltså måste klassen med -- bara padding ska bort. */ .matkar--fri { padding-block: 0; /* MINDRE SLACK RUNT ROTATIONEN, Dennis 2026-08-18 (sidheroerna ska bli kortare). --lyft är luften som ett roterat kort svänger ut i, och den räknas ur kortets svaj: 2,5rem sattes för ett 600 px kort som vrider 5 grader, alltså omkring 27 px per sida. Buntens kort är 264 px i heroerna -- de svajar 11 px -- och skuggan sticker ut 10 px. 1,75rem = 28 px täcker det med marginal, och det är samma tal mobilregeln nedan redan valt av samma skäl. Vinsten är 2 * 12 px av scenens höjd, och scenen ÄR heroens innehåll. Startsidans bunt rör detta inte: den har inget tak att rymmas under. */ --lyft: 1.75rem; /* LIGGANDE, Dennis 2026-08-19: bilden är 3:2 i stället för 4:5. --kb (kortets bredd) RÖRS INTE -- se räkningen nedan om varför det inte behövs -- bara höjdformeln byts, så bredden och därmed sidled-mätningen i matt_heroer.mjs (påstående 3, "herobuntarna är lika stora") är exakt oförändrad. */ --bild-h: calc(var(--kb) * 2 / 3); } /* BÅDA HEROBUNTARNA ÄR LIKA STORA, Dennis 2026-08-18: "bild blocket på oktoberfest och större sällskap kan vi göra dom lika stora, anpassa ifrån oktoberfest och applicera på stora sällskap". De stod 20rem (sällskapssidan) mot 16,5rem (Oktoberfest) i en dag, och det var inte en smaksak: talet är räknat ur Oktoberfests hero, som är den trängre av de två. RÄKNINGEN GÄLLDE 4:5 OCH STÅR ORÖRD, för --kb byts inte när formen blir liggande 2026-08-19 -- scenen bara blir kortare (se --bild-h ovan), och en oförändrad bredd är varför likhets-påståendet (matt_heroer.mjs, 3) förblir grönt utan att räknas om. 16,5rem = 264 px kom ur: scenens höjd är --kb * 1,25 + --haka 5,6rem + 3 * --steg-y + 2 * --lyft; Oktoberfests hero (640 px tak, 100 px padding-top med vimpelraden, 32 i botten) gav 508 px kvar åt bunten, alltså kb = (508-172,6)/1,25 = 268 px. 16,5rem är 264, med två px marginal -- och med 2/3 i stället för 1,25 finns numera ~150 px marginal kvar i stället, se notisen vid --bild-h. SÄLLSKAPSSIDAN HAR RÅD MED MER och tar det ändå inte, av samma skäl som då: två buntar av samma sort i två heroer av samma höjd ska vara samma objekt. BARA I TVÅSPALTSFORMEN. Under 58rem staplas heroerna och --kb sätts av mobilregeln ovan (17rem/62vw), som har lägre specificitet än en klass med två selektorer -- utan media-frågan hade telefonen fått 16,5rem av misstag. */ @media (min-width: 58rem) { .matkar--fri { --kb: 16.5rem; } } /* KONTAKTKORTET ÄR MÅTTET, Dennis 2026-08-19 (första omgången): "kontaktsidan är lite större ... gör oktoberfest/sällskap lika stora" -- BARA desktop. Andra omgången samma dag: "gör polaroid bilderna 20 % större, som referens börja med kontakt hero bilden". Kontaktkortets bild (stilla, fyller lådan själv) var 308x205 px; 20 % större är 370x246. RÄKNAT BAKLÄNGES FRÅN DEN BILDEN, för stilla-kortets bredd är bunden av bredd-villkoret (se notisen vid .matkar__scen--stilla): Wc = kb + 2*lyft - 2*marginal (steg-x är noll sedan förra omgången). Bilden är kortet minus paddingen (2 * --s-2 = 16px), så 370 + 16 = 386 = kb + 56 - 36 ⇒ kb ≈ 366. 23rem = 368 räknat mot samma tal, ger 372x248 -- en handfull promille över målet, avrundningen tar hand om resten. FANADE KORT (Oktoberfest/Sällskap) VÄXER MED, MEN INTE PIXELLIKT: de saknar stilla-formelns marginal-bonus (2*lyft - 2*marginal), så deras bild blir kb - 16 = 352 mot kontaktkortets 372 -- samma gap som redan fanns förra omgången. Lådan (nu 424x391 px vid 1440x900, upp från 360x348) ryms med marginal under spaltens 480 px-tak och herons 640 px-tak. */ @media (min-width: 58rem) { .matkar--fri { --kb: 23rem; --steg-x: 0px; --steg-y: 0px; } } /* THE DEVELOP. A real polaroid comes up out of a milky, almost empty frame. Filters only: no second copy of the picture, nothing to preload, and it runs on the compositor. Bound to the attribute that marks "this one is in your hand", so it replays by itself whenever a new card takes that place. */ @keyframes matkar-framkalla { 0% { opacity: 0.10; filter: blur(7px) contrast(0.35) saturate(0.15) brightness(1.4); } 35% { opacity: 0.55; filter: blur(3px) contrast(0.7) saturate(0.55) brightness(1.16); } 70% { opacity: 0.88; filter: blur(0.7px) contrast(0.92) saturate(0.88) brightness(1.04); } 100% { opacity: 1; filter: none; } } @keyframes matkar-hinna { 0% { opacity: 0.9; } 60% { opacity: 0.25; } 100% { opacity: 0; } } .matkar__bild::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgb(235 227 211 / 0.85), rgb(205 196 176 / 0.85)); } /* THE QUEUE IS UNDEVELOPED, and this is what makes the change seamless as well as more polaroid: a photograph still in the pile has not come up yet, so the card arriving in your hand CONTINUES from the state it was already in. Before this it waited fully developed and then flashed back to milky to develop again -- one visible step backwards in the middle of the gesture, which is what read as clumsy. */ .matkar__kort:not([data-frammast]) .matkar__bild img { filter: blur(2.5px) contrast(0.62) saturate(0.4) brightness(1.18); transition: filter 520ms ease; } .matkar__kort:not([data-frammast]) .matkar__bild::after { opacity: 0.55; transition: opacity 520ms ease; } .matkar__kort[data-frammast] .matkar__bild img { animation: matkar-framkalla 950ms ease-out both; } .matkar__kort[data-frammast] .matkar__bild::after { animation: matkar-hinna 950ms ease-out both; } /* The chin. Handwriting for the name, exactly as the menu page does it, and one printed line under it. Measured pair on paper: 13.8:1. */ .matkar__text { margin: 0; padding: var(--s-3) var(--s-1) var(--s-4); display: grid; gap: 0.1rem; } .matkar__namn { display: block; font-family: var(--f-hand); font-size: 1.45rem; line-height: 1.05; color: var(--valnot); } .matkar__rad { display: block; font-family: var(--f-bok); font-size: var(--t-sm); line-height: 1.35; color: var(--valnot-mjuk); } @media (prefers-reduced-motion: reduce) { /* No pile, no flick, no develop: the six photographs are laid out. All of the content and none of the movement. */ .matkar__scen { position: static; width: auto; height: auto; cursor: auto; } .matkar__bunt { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); } .matkar__kort { position: static; width: auto; transition: none; transform: rotate(calc((var(--i) - 2.5) * 0.8deg)); } .matkar__kort:not([data-frammast]) .matkar__bild img { filter: none; } .matkar__kort:not([data-frammast]) .matkar__bild::after { opacity: 0; } .matkar__kort[data-frammast] .matkar__bild img, .matkar__kort[data-frammast] .matkar__bild::after { animation: none; } /* SAMMA UTLÄGGNING, MINDRE KORT, NÄR BUNTEN LIGGER I EN SPALT. Oktoberfestsidans hero ger bunten 30rem = 480 px, och 15rem-golvet ovan ryms då bara en gång: auto-fit föll till EN kolumn med 480 px breda kort. Uppmätt blev heron 4 400 px hög, och 2x-kravet steg till 960 px medan de två minsta filerna har 909 och 899 -- alltså uppskalade bilder för precis de användare som valt bort rörelse. Med 11rem-golvet blir det två kolumner i heron och en på telefon, och det BREDASTE kort som kan uppstå är 384 px (en kolumn kräver ett spår under 2 * 11rem + gap), alltså 768 px fil, vilket varje bild i bunten har. Startsidans matblock rör detta inte: dess bunt har hela bandbredden. */ .matkar--fri .matkar__bunt { grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); } }