:root{ --urskap-ink:#171412; --urskap-paper:#f4f0ea; --urskap-accent:#a72f1f; --urskap-line:#d8d0c2; /* Samma två färger som RGB-komponenter, för genomskinliga varianter. Utan dem hade varje rgba() nedan behövt skrivas om en gång till i dark.css – nu räcker det att mörkt läge byter de här sex variablerna. */ --urskap-ink-rgb:23,20,18; --urskap-paper-rgb:244,240,234; /* Typsnitten ärvs från temat. inherit och inte en egen stege: pluginets delar ska se ut som resten av sajten utan att någon håller två listor i takt, och en sajt som inte valt något laddar då inte en enda typsnittsfil genom pluginet. Vill man ha ett eget står valet under Urskap-Tools → Typsnitt, och då skrivs variablerna över med wp_add_inline_style() – se Urskap_Fonts::inline_css(). Att sätta dem här i stället för att låta reglerna nedan sakna font-family helt är avsiktligt: så finns det EN plats som styr, och Urskap_Blocks::font_stack() kan peka hit. Att var() kan lämna ifrån sig ett CSS-nyckelord är del av specifikationen: font-family:var(--urskap-display) blir font-family:inherit. */ --urskap-display: inherit; --urskap-sans: inherit; /* Headerns höjd i oskrollat läge = padding uppe + nere + burgaren, som är radens högsta element. Hålls som variabler så spacern nedan alltid följer headern om paddingen ändras. */ --urskap-header-pad:26px; --urskap-header-btn:48px; /* Luften mellan menyraden och sidans första innehåll. */ --urskap-header-gap:36px; /* Loggans höjd. Håll den under --urskap-header-btn (48px), annars är det loggan och inte burgaren som avgör headerns höjd, och spacern nedan räknar fel. */ --urskap-logo-h:34px; --urskap-logo-h-scrolled:28px; } /* ---------- HEADER ---------- */ .urskap-header{ position:fixed; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:var(--urskap-header-pad) 5vw; /* Måste ligga ÖVER overlayn (150) – annars går krysset inte att klicka på. */ z-index:200; transition:padding .4s ease, background .3s ease; } .urskap-header.is-scrolled{ padding:14px 5vw; background:rgba(var(--urskap-paper-rgb),.85); backdrop-filter:blur(6px); border-bottom:1px solid var(--urskap-line); } /* När menyn är öppen ligger headern ovanpå den mörka overlayn: ta bort papper-bakgrunden och vänd färgerna till ljust. */ .urskap-header.is-menu-open, .urskap-header.is-menu-open.is-scrolled{ background:transparent; backdrop-filter:none; border-bottom:none; padding:var(--urskap-header-pad) 5vw; } /* Headern är fixed och tar ingen plats i flödet – utan den här spacern börjar sidans innehåll (t.ex. breadcrumben) i toppen, rakt under loggan. Höjden är avsiktligt statisk: när besökaren skrollar glider innehållet upp under headern och luften försvinner av sig själv, utan att spacern behöver animeras och rycka i layouten. */ .urskap-header-spacer{ height:calc( var(--urskap-header-pad) * 2 + var(--urskap-header-btn) + var(--urskap-header-gap) ); /* Om temat gjort till flex/grid-container ska spacern inte krympa. */ flex:none; pointer-events:none; } /* Startsidan inleds med ett eget parti överst, och där är luften i vägen – men bara när skärmen är bred nog. På mobil tar headern en betydligt större andel av höjden, och innehållet hamnar för nära menyraden utan spacern. Därför döljs den här och inte i PHP: servern vet inte skärmens bredd. Brytpunkten är densamma som mobilblocket längst ned i filen. */ @media (min-width: 641px){ .urskap-header-spacer.is-front{ display:none; } } /* ---------- LOGGA ---------- */ .urskap-logo{ flex-shrink:0; display:flex; align-items:center; text-decoration:none; } /* Selektorerna för loggan börjar avsiktligt på #urskap-header. WooCommerce och temat sätter egna height/max-width-regler på img på butiks- och produktsidor, och de vann över en ren klasselektor – loggan ritades då ut i sin verkliga bredd (2000px) så länge headern låg i toppläge. Ett id vinner över alla klassbaserade regler, oavsett vilken av dem det är. Behåll id:t i alla tre reglerna nedan. */ #urskap-header .urskap-logo-img{ display:block; /* Höjden styr, bredden följer bildens proportioner. Bilden är bredare än den är hög, så en fast höjd håller headern lugn oavsett filens mått. */ height:var(--urskap-logo-h); width:auto; /* WooCommerce sätter även max-width:100% – ofarligt här, men bredden ska aldrig begränsas av något annat än höjden. */ max-width:none; transition:height .4s ease, filter .4s ease; } #urskap-header.is-scrolled:not(.is-menu-open) .urskap-logo-img{ height:var(--urskap-logo-h-scrolled); } /* Loggan behandlas likadant med öppen som med stängd meny. Här stod förut en invertering: overlayn var mörk oavsett vilket färgläge sajten stod i, och loggan hade försvunnit i den. Nu har overlayn sajtens egna färger, och då ska ingenting ovanpå den vändas – i mörkt läge sköter dark.css inverteringen en gång för alla, i ljust behövs den inte. */ /* Reserv när ingen webbplatslogotyp är vald: sajtens namn som text, med samma ristade versaler som loggan. */ .urskap-logo-text{ font-family:var(--urskap-display); font-weight:600; font-size:1.15rem; text-transform:uppercase; letter-spacing:.24em; /* Spärrningen lägger luft även efter sista bokstaven – kompensera. */ margin-right:-.24em; color:var(--urskap-ink); white-space:nowrap; transition:color .4s ease; } .urskap-logo:focus-visible{ outline:2px solid var(--urskap-accent); outline-offset:6px; } /* ---------- MENY I HEADERN (breda skärmar) ---------- */ .urskap-inline-nav{ /* Dold som utgångsläge. JS mäter och sätter .has-inline-nav på headern först när länkarna ryms utan att krocka – se menu.js. Utan JS blir det alltså burgaren, vilket är exakt beteendet vi vill ha vid trängsel. */ display:none; flex:1 1 auto; min-width:0; align-items:center; /* Hellre en sammanhållen, centrerad grupp än space-between: annars trycks ytterlänkarna ända ut mot loggan och burgaren. */ justify-content:center; gap:clamp(1.5rem, 2.4vw, 3rem); /* Luften ut mot logga och burgare. Samma marginal kräver JS-mätningen att det finns plats för, så den kan aldrig ätas upp. */ margin:0 clamp(2rem, 5vw, 5rem); transition:opacity .3s ease, visibility .3s ease; } .urskap-header.has-inline-nav .urskap-inline-nav{ display:flex; } /* Mätläge: nav:en får sin naturliga bredd men syns inte. JS lägger på och tar bort klassen synkront i samma frame, så inget hinner ritas ut. */ .urskap-header.is-measuring .urskap-inline-nav{ display:flex; flex:0 0 auto; visibility:hidden; } /* När overlayn öppnas ligger headern ovanpå den – samma länkar två gånger blir rörigt, så header-menyn tonas bort. visibility tar den ur tab-ordningen. */ .urskap-header.is-menu-open .urskap-inline-nav{ opacity:0; visibility:hidden; pointer-events:none; } .urskap-inline-link{ position:relative; font-family:var(--urskap-display); font-size:.78rem; font-weight:500; text-transform:uppercase; letter-spacing:.16em; text-decoration:none; color:var(--urskap-ink); padding:6px 0; white-space:nowrap; transition:color .3s ease; } .urskap-inline-link:hover, .urskap-inline-link:focus-visible{ color:var(--urskap-accent); } .urskap-inline-link:focus-visible{ outline:2px solid var(--urskap-accent); outline-offset:6px; } .urskap-inline-fill{ position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--urskap-accent); transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.65,0,.35,1); } .urskap-inline-link:hover .urskap-inline-fill, .urskap-inline-link:focus-visible .urskap-inline-fill, .urskap-inline-link.is-current .urskap-inline-fill{ transform:scaleX(1); } .urskap-inline-link.is-current{ color:var(--urskap-accent); } .urskap-burger-wrap{ display:flex; align-items:center; gap:14px; } /* ---------- BURGARE / KRYSS ---------- */ .urskap-burger{ position:relative; width:48px;height:48px; display:flex;flex-direction:column; align-items:flex-end;justify-content:center; gap:7px; cursor:pointer; background:none; border:none; padding:0; flex-shrink:0; border-radius:50%; } .urskap-burger:focus-visible{ outline:2px solid var(--urskap-accent); outline-offset:4px; } /* Ringen som ramar in krysset när menyn är öppen. */ .urskap-burger::before{ content:""; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(var(--urskap-ink-rgb),.35); transform:scale(.6); opacity:0; transition:transform .4s cubic-bezier(.65,0,.35,1), opacity .3s ease, border-color .3s ease; pointer-events:none; } .urskap-burger.is-active::before{ transform:scale(1); opacity:1; } .urskap-burger.is-active:hover::before{ border-color:var(--urskap-accent); } .urskap-burger span{ display:block; height:2px; border-radius:2px; background:var(--urskap-ink); transition:width .35s cubic-bezier(.65,0,.35,1), transform .35s cubic-bezier(.65,0,.35,1), opacity .2s ease, background-color .3s ease; } .urskap-burger span:nth-child(1){width:32px;} .urskap-burger span:nth-child(2){width:24px;} .urskap-burger span:nth-child(3){width:32px;} .urskap-burger:not(.is-active):hover span{width:32px;} /* Kryss: strecken är 2px höga med 7px gap → centrumavstånd 9px. Strecken är högerställda i viloläge; i kryssläge måste de centreras, annars hamnar krysset ur mitten på ringen. */ .urskap-burger.is-active{ align-items:center; } .urskap-burger.is-active span{ /* Ingen färg här: strecken är redan --urskap-ink, och overlayn under dem har sajtens egen bakgrund. */ width:30px; } .urskap-burger.is-active span:nth-child(1){ transform:translateY(9px) rotate(45deg); } .urskap-burger.is-active span:nth-child(2){ opacity:0; transform:scaleX(0); } .urskap-burger.is-active span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); } .urskap-burger.is-active:hover span{ background:var(--urskap-accent); } .urskap-burger-label{ font-family:var(--urskap-sans); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--urskap-ink); opacity:.65; white-space:nowrap; transition:color .4s ease, opacity .3s ease; } /* Bara en aning tydligare när menyn är öppen – ordet byts till "Stäng" och får väga lite mer. Färgen är densamma som annars. */ .urskap-header.is-menu-open .urskap-burger-label{ opacity:.8; } /* ---------- OVERLAY MENU ---------- */ .urskap-menu-overlay{ position:fixed; inset:0; /* Sajtens egna färger, inte omvända. Overlayn var förut alltid mörk med ljus text, vilket i ljust läge var en inversion och i mörkt läge blev en ljus platta mitt i en mörk sajt – tvärtom i båda fallen. Med paper och ink följer den färgläget av sig själv, och dark.css behöver inget undantag. */ background:var(--urskap-paper); color:var(--urskap-ink); z-index:150; display:flex; flex-direction:column; justify-content:center; /* Ingen align-items här: listan ska spänna över hela bredden. Centreringen sker på länkarna inuti. Krymper listan runt sitt bredaste barn får hover (som ökar spärrningen) inget utrymme att växa på – då radbryter länken. */ padding:0 8vw; /* Cirkeln utgår från burgarens mitt: 5vw sidmarginal + halva knappen (24px), och 26px toppmarginal + halva knappen. */ clip-path:circle(0% at calc(100% - 5vw - 24px) 50px); transition:clip-path .7s cubic-bezier(.76,0,.24,1); pointer-events:none; } .urskap-menu-overlay.is-open{ clip-path:circle(150% at calc(100% - 5vw - 24px) 50px); pointer-events:all; } .urskap-menu-list{ display:flex; flex-direction:column; /* Utan detta sträcks länkarna över hela skärmbredden, och understrykningen för hover/aktuell sida blir en linje tvärs över hela overlayn. */ align-items:center; text-align:center; gap:2px; } .urskap-menu-list a{ position:relative; max-width:100%; color:var(--urskap-ink); text-decoration:none; font-family:var(--urskap-display); /* Versaler är bredare än gemener – därav lägre clamp än tidigare. */ font-size:clamp(1.7rem, 5.2vw, 3.7rem); font-weight:400; text-transform:uppercase; letter-spacing:.08em; /* Spärrningen lägger luft efter sista bokstaven, så glyferna hamnar en aning till vänster om boxens mitt. Lika stor padding till vänster väger upp det. Just padding och inte negativ margin-right: marginalen krymper boxens bredd, och då radbryter den bredaste länken. */ padding:10px 0 10px .08em; overflow:hidden; opacity:0; transform:translateY(40px); transition:opacity .5s ease, transform .5s ease, color .3s ease, padding-left .35s cubic-bezier(.65,0,.35,1), letter-spacing .35s cubic-bezier(.65,0,.35,1); } /* --urskap-i sätts per länk i mallen, så trappstegsanimeringen fungerar oavsett hur många punkter WordPress-menyn innehåller. Fördröjningen sitter bara i öppet läge – vid stängning ska allt försvinna samtidigt. */ .urskap-menu-overlay.is-open .urskap-menu-list a{ opacity:1; transform:translateY(0); transition-delay:calc(.12s + var(--urskap-i, 0) * .07s); } .urskap-menu-list a .urskap-fill{ position:absolute; left:0; bottom:8px; width:100%; height:2px; background:var(--urskap-accent); transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.65,0,.35,1); } /* Ingen kursiv i hover: menyn kan skrivas med vilket typsnitt temat än har, och saknar det en kursiv skär fejkar webbläsaren fram en lutning som ser trasig ut. Hover markeras i stället med färg och ökad spärrning, som fungerar i varje typsnitt. Indraget som fanns här förut fungerar inte i centrerat läge – då skevar texten i sidled. */ .urskap-menu-list a:hover, .urskap-menu-list a:focus-visible{ color:var(--urskap-accent); letter-spacing:.13em; padding-left:.13em; } .urskap-menu-list a:focus-visible{ outline:none; } .urskap-menu-list a:hover .urskap-fill, .urskap-menu-list a:focus-visible .urskap-fill{ transform:scaleX(1); } .urskap-menu-list a.is-current{ color:var(--urskap-accent); } .urskap-menu-list a.is-current .urskap-fill{ transform:scaleX(1); } .urskap-menu-list a .urskap-index{ font-family:var(--urskap-sans); font-size:.9rem; vertical-align:super; margin-right:14px; opacity:.5; letter-spacing:.05em; } .urskap-menu-footer{ position:absolute; bottom:6vh; left:8vw; right:8vw; display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; font-family:var(--urskap-sans); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(var(--urskap-ink-rgb),.6); opacity:0; transition:opacity .6s ease .5s; } .urskap-menu-overlay.is-open .urskap-menu-footer{opacity:1;} .urskap-menu-footer a{color:inherit;text-decoration:none;} .urskap-menu-footer a:hover{color:var(--urskap-ink);} /* ---------- SHORTCODE [start-sida-meny] ---------- */ .urskap-start-menu{ display:flex; /* Alltid staplad – aldrig en rad, oavsett hur få punkterna är. */ flex-direction:column; align-items:center; text-align:center; gap:clamp(.15rem, 1.2vh, .7rem); margin:clamp(2.5rem, 7vh, 5rem) auto; } .urskap-start-link{ display:block; font-family:var(--urskap-display); font-size:clamp(1.8rem, 6vw, 4rem); font-weight:400; text-transform:uppercase; letter-spacing:.08em; text-decoration:none; color:var(--urskap-ink); /* Väger upp spärrningens luft efter sista bokstaven, så glyferna hamnar i boxens mitt i stället för en aning till vänster. */ padding-left:.08em; } .urskap-start-link:focus-visible{ outline:2px solid var(--urskap-accent); outline-offset:8px; } /* Fönstret som ordbytet sker i. Ingen padding här: kopian nedan placeras med top:100%, vilket räknas mot den här boxens höjd, medan den flyttas med sin EGEN höjd. Padding hade fått de två värdena att glida isär och ordet att hamna snett. Luften åt svenska versalers prickar (Ä, Å, Ö) tas därför med line-height i stället. */ .urskap-start-swap{ position:relative; display:block; overflow:hidden; line-height:1.25; } .urskap-start-word{ display:block; line-height:1.25; transition:transform .55s cubic-bezier(.76,0,.24,1); } /* Kopian ligger exakt en ordhöjd ned, utanför fönstret. */ .urskap-start-word--alt{ position:absolute; top:100%; left:0; width:100%; color:var(--urskap-accent); } .urskap-start-link:hover .urskap-start-word, .urskap-start-link:focus-visible .urskap-start-word{ transform:translateY(-100%); } /* Aktuell sida står kvar i rött utan att något behöver hovras. */ .urskap-start-link.is-current .urskap-start-word{ color:var(--urskap-accent); } @media (prefers-reduced-motion: reduce){ /* Ordet ska inte glida. Kopian göms helt och originalet byter bara färg, så effekten blir en ren färgövergång. */ .urskap-start-word{transition:none;} .urskap-start-word--alt{display:none;} .urskap-start-link:hover .urskap-start-word, .urskap-start-link:focus-visible .urskap-start-word{ transform:none; color:var(--urskap-accent); } } /* Ingen media query för header-menyn: en fast brytpunkt stämmer inte när antalet menypunkter och deras längd sätts i WordPress. menu.js mäter i stället om länkarna får plats och växlar till burgare när de inte gör det. */ /* ---------- MOBIL ---------- */ @media (max-width: 640px){ /* Lägre header och mindre luft – spacern räknar om sig själv. */ :root{ --urskap-header-pad:16px; --urskap-header-gap:22px; --urskap-logo-h:26px; --urskap-logo-h-scrolled:22px; } .urskap-header, .urskap-header.is-menu-open{ padding:var(--urskap-header-pad) 6vw; } .urskap-header.is-scrolled:not(.is-menu-open){ padding:10px 6vw; } /* Etiketten "Meny/Stäng" tar plats – krysset räcker på liten skärm. */ .urskap-burger-label{display:none;} .urskap-menu-overlay{ padding:0 8vw; clip-path:circle(0% at calc(100% - 6vw - 24px) 40px); } .urskap-menu-overlay.is-open{ clip-path:circle(150% at calc(100% - 6vw - 24px) 40px); } .urskap-menu-footer{ flex-direction:column; gap:10px; bottom:5vh; } } /* ---------- TILLGÄNGLIGHET ---------- */ @media (prefers-reduced-motion: reduce){ .urskap-menu-overlay, .urskap-menu-list a, .urskap-menu-footer, .urskap-burger span, .urskap-burger::before, .urskap-logo-img{ transition-duration:.01ms !important; transition-delay:0ms !important; } }