/* ---------- SNAPPANDE SEKTIONER ---------- */ /* Snappningen slås på av att sidan faktiskt innehåller en sektion, inte av vilken sida det är. :has() låter webbläsaren själv avgöra det, vilket gör att stilen fungerar överallt där du använder den – i sidinnehåll, i mallar, i mönster och i återanvändbara block – utan att PHP behöver leta efter den. Villkoret måste sitta på , som är skroll-containern. Saknar en gammal webbläsare :has() uteblir snappningen helt, och sidan skrollar som vanligt. Det är rätt sätt att falla tillbaka: hellre ingen snappning än snappning på en sida utan sektioner, som hade dragit besökaren till sidfoten. */ html:has(.is-style-urskap-section){ /* "mandatory", inte "proximity": skrollytan måste alltid vila på en snapp-punkt. Med proximity snappade den bara om man råkade släppa nära en sektion – tröskeln bestäms av webbläsaren och går inte att ställa in – och stannade man utanför den blev man liggande mitt emellan två sektioner. Sektioner som är högre än skärmen låser inte: när snapp-området är större än vyporten räknar webbläsaren varje läge inom det som giltigt, så man kan skrolla fritt igenom en lång sektion. */ scroll-snap-type:y mandatory; /* Medvetet INGEN scroll-padding-top här. Sektionerna är minst en skärmhöga och snappar mot sin överkant – en scroll-padding hade tryckt ner dem och lämnat en glipa där föregående sektion syns. Headern hanteras i stället med paddingen inuti sektionen nedan. */ } /* Sidfoten måste vara en egen snapp-punkt. Med mandatory måste skrollytan alltid vila på en sådan, och saknar sidfoten en egen finns inget giltigt läge längst ned – då drar webbläsaren tillbaka upp till sista sektionen och sidfoten går inte att nå. Med proximity uppstod aldrig det problemet, eftersom lägen utan snapp-punkt då var tillåtna. */ html:has(.is-style-urskap-section) footer{ scroll-snap-align:start; } /* Klassen sätts av blockstilen "Urskap – sektion" på ett Grupp-block. */ .is-style-urskap-section{ /* Överkanten, inte mitten. För en sektion som är exakt en skärm hög ger center och start samma resultat, men för en högre sektion är start det enda som fungerar: då syns toppen först och resten skrollas igenom innan nästa sektion snappar in. Center hade gjort snappningen odefinierad så snart sektionen blev högre än skärmen. */ scroll-snap-align:start; /* svh = den lilla vyporten, alltså höjden när mobilens adressfält syns. Med 100vh hade sektionen blivit högre än den synliga ytan på telefon, och med 100dvh hade höjden ändrat sig mitt under skrollningen och stört snappningen. svh står stilla. Raden med vh ovanför är reserv för webbläsare som saknar enheten. */ min-height:var(--urskap-section-min-h, 100vh); min-height:var(--urskap-section-min-h, 100svh); /* Centrerar innehållet lodrätt UTAN att göra sektionen till en flexbox. Flex hade brutit två saker: temats is-layout-constrained, som styr blockens bredd med automatiska marginaler, och blockavståndet, som bygger på att intilliggande marginaler slås ihop – vilket de inte gör i flex. align-content på ett vanligt blockelement rör ingetdera. Saknas stöd hamnar innehållet högst upp i stället, inget går sönder. */ align-content:center; /* Headern är fixed och täcker toppen av skärmen. Sektionens överkant ligger kant i kant med skärmens, så innehållet behöver hållas undan minst headerns höjd – samma uträkning som .urskap-header-spacer i menu.css. max() gör att den vanliga luften används när den ändå är större. */ padding-top:max( var(--urskap-section-pad, clamp(3rem, 10vh, 7rem)), calc(var(--urskap-header-pad) * 2 + var(--urskap-header-btn)) ); padding-bottom:var(--urskap-section-pad, clamp(3rem, 10vh, 7rem)); } /* ---------- NAVIGERINGSPILAR ---------- */ .urskap-section-arrow{ position:fixed; /* Centreringen görs med automatiska marginaler i stället för translateX. Knappens transform behöver vara ledig: hovernudgen ligger på knappen och den vilande rörelsen på ikonen, och delar centreringen plats med någon av dem skriver de över varandra. */ left:0; right:0; margin-inline:auto; /* Under menyoverlayn (150) och varukorgen (290): pilarna ska täckas när något av dem öppnas, utan att JS behöver hålla reda på det. */ z-index:140; display:flex; align-items:center; justify-content:center; width:44px;height:44px; padding:0; /* Pilen låg förut som ett ensamt streck rakt mot sidan och tappade formen så fort den hamnade över en bild eller en orolig bakgrund. Plattan ger den alltid en egen yta att läsas mot – samma genomskinliga papper och blur som headern får när man skrollat, så den hör ihop med resten. */ background:rgba(var(--urskap-paper-rgb),.72); backdrop-filter:blur(6px); border:1px solid rgba(var(--urskap-ink-rgb),.14); border-radius:50%; box-shadow:0 2px 10px rgba(var(--urskap-ink-rgb),.10); cursor:pointer; color:var(--urskap-ink); /* Diskret i viloläge, tydlig när man siktar på den. Tidigare .38, vilket var så svagt att pilen inte lästes som något klickbart. */ opacity:.72; transition:opacity .4s ease, color .3s ease, visibility .4s ease, transform .35s cubic-bezier(.65,0,.35,1), background .3s ease, border-color .3s ease; } .urskap-section-arrow:hover{ opacity:1; color:var(--urskap-accent); background:rgba(var(--urskap-paper-rgb),.95); border-color:rgba(var(--urskap-ink-rgb),.28); } .urskap-section-arrow:focus-visible{ opacity:1; outline:2px solid var(--urskap-accent); outline-offset:4px; } /* Nudgen åt det håll knappen leder. Ligger på knappen, inte på ikonen – ikonen bär den vilande rörelsen nedan. */ .urskap-section-arrow--down:hover{transform:translateY(3px);} .urskap-section-arrow--up:hover{transform:translateY(-3px);} .urskap-section-arrow svg{ display:block; } /* Vilande rörelse: två små stötar och sedan lugnt resten av varvet. Rörelsen ligger i de första dryga 30 procenten och de sista två tredjedelarna står stilla – en jämn, ständig guppning hade blivit ett blinkande element i utkanten av synfältet, medan en stöt då och då drar blicken dit och sedan släpper taget. Riktningen följer knappen: nedåtpilen sjunker, uppåtpilen lyfter. */ @keyframes urskap-arrow-bob-down{ 0% {transform:translateY(0);} 8% {transform:translateY(5px);} 20% {transform:translateY(0);} 27% {transform:translateY(3px);} 36% {transform:translateY(0);} 100% {transform:translateY(0);} } @keyframes urskap-arrow-bob-up{ 0% {transform:translateY(0);} 8% {transform:translateY(-5px);} 20% {transform:translateY(0);} 27% {transform:translateY(-3px);} 36% {transform:translateY(0);} 100% {transform:translateY(0);} } .urskap-section-arrow--down svg{ animation:urskap-arrow-bob-down 3.4s ease-in-out infinite; } .urskap-section-arrow--up svg{ animation:urskap-arrow-bob-up 3.4s ease-in-out infinite; } /* När man siktar på pilen tar knappens nudge över och guppningen fryser där den är. Två rörelser samtidigt läser som ett fel, och animationen vinner alltid över en transition – därför pausas den i stället för att skrivas över. */ .urskap-section-arrow:hover svg, .urskap-section-arrow:focus-visible svg{ animation-play-state:paused; } .urskap-section-arrow--down{ bottom:clamp(14px, 3vh, 30px); } /* Under headern, inte bakom den. Samma uträkning som sektionens padding-top. */ .urskap-section-arrow--up{ top:calc( var(--urskap-header-pad) * 2 + var(--urskap-header-btn) + 8px ); } /* is-hidden = det finns ingen sektion åt det hållet. is-idle = JS har inte tagit över än, och utan JS gör pilarna ingen nytta. */ .urskap-section-arrow.is-hidden, .urskap-section-arrow.is-idle{ opacity:0; visibility:hidden; pointer-events:none; } /* En dold pil ska inte gunga vidare i bakgrunden. Det gäller framför allt sidor helt utan sektioner: där avbryter sections.js tidigt och lämnar båda knapparna i is-idle, och utan den här raden hade varenda sidvisning på sajten haft en oändlig animation igång på ett osynligt element. */ .urskap-section-arrow.is-hidden svg, .urskap-section-arrow.is-idle svg{ animation:none; } /* ---------- TILLGÄNGLIGHET ---------- */ @media (prefers-reduced-motion: reduce){ /* Snappning är en rörelseeffekt och ska vara helt av här, inte dämpad. Sektionshöjden får vara kvar – den är layout, inte rörelse. */ html:has(.is-style-urskap-section){ scroll-snap-type:none; } /* Pilarna får vara kvar – de är navigering, inte effekt. Bara rörelsen tas bort; sections.js skrollar dessutom utan mjuk animering här. */ .urskap-section-arrow, .urskap-section-arrow svg{ transition-duration:.01ms !important; } /* Guppningen är ren effekt och tas bort helt, inte bara dämpas. Plattan och den högre opaciteten är kvar – tydligheten är inte rörelse, och det är den som gör pilen läsbar. */ .urskap-section-arrow svg{ animation:none !important; } }