/* ============================================================================ Stilen är skriven i tio block och ska förbli tio block. Varje regel hör hemma i exakt ett av dem. Blir en sida lite fel: laga i sitt block, lägg inte ett undantag längst ned. Det är så en stilmall dör. 1 Grund och tokens 6 Hjälten 2 Typografi 7 Komponenter 3 Layout och rytm 8 Formulär 4 Navigation 9 Sidfot 5 Knappar och länkar 10 Rörelse och responsivt RIKTNINGEN: sajten går mellan två rum, inte ett. Natten bär pjäserna — fotona är mörka och metallen är det enda som lyser i dem. Pappret bär orden. En sida som ligger i ett enda ljust register är platt oavsett hur fina marginalerna är, och det var felet i förra omgången. Tre regler som håller ihop det: · Två textregister, aldrig ett mellanregister. Antingen är något stort eller så är det litet. Fyra närliggande storlekar = broschyr. · Bilder ligger inte i rutor lika stora som varandra. Antingen går de ut till kanten, eller så är de olika stora. · Rytmen ska vara ojämn. --sek-tyst, --sek och --sek-tat finns för att användas växelvis, inte för att en av dem ska vinna. ========================================================================= */ /* ---------------------------------------------------------- 1 Grund */ *,*::before,*::after{box-sizing:border-box} /* clip, inte hidden: klipper det där 100vw-utfallet sticker ut med rullningslistens bredd, utan att göra html till en scrollcontainer. */ html{-webkit-text-size-adjust:100%;overflow-x:clip} body,h1,h2,h3,h4,p,figure,dl,dd,ol,ul{margin:0} ol,ul{list-style:none;padding:0} img,svg,video{display:block;max-width:100%} button,input,select,textarea{font:inherit;color:inherit} :where(a){color:inherit} :root{ /* KALL PLATINA, inte varm gräddvit. Pappret är kylt från kräm mot ett svalt silver: nästan neutralt i högdagern, en gnutta blågrått i skuggan. Inte RGB-blått — sval och dyr, som en galleriväg hos Celine eller The Row. Filip: en kall gradient som ramar in hela känslan. */ --papper:#EEF0F1; --papper-2:#E5E7EA; /* Ljuskällan i pappret. Fyra steg, inte två — se LJUSMODELLEN nedan. */ --papper-hi:#FCFCFC; --papper-h2:#F4F5F5; /* Pappret får ett synligt fall i botten. Ljuset ligger fast på kroppen, och med en djupare låg ton läser ytan som svalt trycksakspapper med struktur i stället för som skärmvitt. Botten går en aning mot blått, inte mot brunt. */ --papper-l2:#DEE2E7; --papper-lo:#D1D6DE; --yta:#FFFFFF; /* Hårstrecken kylda till samma silver: en varm sandlinje på kallt papper läser gult. Fortfarande långt från svart — trycksaksspråk vill ha linjer man ser. */ --linje:#CFD2D4; --linje-svag:#E1E3E4; /* ATMOSFÄREN. Den kalla, levande inramningen ligger som två fasta skikt över hela sajten (se .atmos och .rama längre ner), inte per sektion. Färgerna bor här så båda rummen och båda intensiteterna delar samma kanal. --kyla-ljus : det svala ljuset som driver över pappret --kyla-djup : den kalla skuggan som ramar in kanterna, blågrå kol Alfat sätts där skikten byggs, inte här. */ --kyla-ljus:216,225,235; --kyla-djup:24,33,48; /* Natten. Djupare än fotona så att en bild aldrig blir det mörkaste på sidan — då ser den ut som ett hål i stället för som ett föremål. Disciplinerad: djupare hörn, kallare botten, tätare glimt än den bruna dis som låg här förut och läste som en kaffefläck. */ --natt:#080706; --natt-2:#131110; --natt-linje:#26221B; /* LJUSMODELLEN. ------------------------------------------------------------------------ Tre saker skiljer ett ljus från en gradient, och de första två försöken hade ingen av dem. 1. SPANN. Första försöket lade djupet mellan --natt och --natt-2, alltså elva steg, och mätte platt där innehållet står: 13,1 vid vänsterkanten och 13,2 vid högerkanten. Ett djup som inte går att se är inget djup. Spannet här är 36 ner till 6, alltså trettio steg. 2. KURVA. Ljus faller av med kvadraten på avståndet: snabbt nära källan och sedan långsamt i en lång svans. En radial med två stopp faller av linjärt, och linjär avtoning är precis vad ögat läser som "målad gradient" i stället för som ljus. Därför fyra steg per fält, tätt packade nära källan och glest ut mot botten. 3. FÄRGTEMPERATUR. Ljuset är varmt och skuggan är kall. Det är den enda av de tre som gör att ytan får volym i stället för bara riktning — en ren gråskala från ljust till mörkt läser som dimma. Varmt går mot brons, botten går en aning mot blått. Skillnaden är några enheter och ska aldrig gå att peka ut som färg. Kornet gör dessutom nytta här utöver ytan: fyra stopp över åttahundra bildpunkter av nästan svart bandar, och bruset ditherar bort ränderna. */ --natt-hi:#20201C; /* svalt metallglimt, kylt för variant B */ --natt-h2:#161209; --natt-l2:#0A0807; --natt-lo:#04050A; /* kall botten, tydligare mot blått */ /* Aurans kulör, som RGB-kanaler eftersom den ska kunna få olika alfa på olika ställen. Huset lyser i brons. Droppets rum pekar om den till kall vitmetall — där finns inget guld, och en varm bloom hade lovat fel rum. */ --aura-rgb:150,142,120; /* Sidhuvudet i klartext: det ska vara IDENTISKT på varje sida, och droppsidan pekar om --papper till formolja. */ --ljus-nav:radial-gradient(134% 112% at 10% -5%, #FCFCFC 0%,#F4F5F5 22%,#F1F2F1 44%,#E7E9EB 70%,#DDE0E4 100%); /* Kanten. En mörkare remsa i över- och underkant gör att ett mörkt fält verkar ligga BAKOM pappret i stället för bredvid det. Det är den enda djupeffekt som får finnas vid en skarv — en skugga utåt hade gjort sektionen till ett kort, och ett kort är en annons. */ --kant-topp:linear-gradient(180deg,rgba(0,0,0,.52) 0,rgba(0,0,0,.14) 46px, rgba(0,0,0,0) 108px); --kant-bott:linear-gradient(0deg,rgba(0,0,0,.44) 0,rgba(0,0,0,.1) 34px, rgba(0,0,0,0) 82px); --black:#16140F; --ink:#1E1B16; --ink-2:#5A5348; /* MIKROINKEN, och den är MÖRKARE än löptextens ink-2 med flit. Den låg på #8B8377 och mätte 2,29–2,90 mot pappret där måtten, ledtiderna och formulärets noter står — alltså under halva AA-kravet, på just de rader som bär uppgifterna. Pappret har ett fall och dess mörkaste parti mätte #C4C9D0 där innehåll faktiskt ligger; en tredje LJUSARE ton kan inte bära text mot den ytan, hur gärna man än vill ha tre steg. Att den blev mörkare än ink-2 är inte en tabbe utan optisk kompensation: tio bildpunkter versaler på .22em spärrning läser LJUSARE än sexton bildpunkters löptext i samma färg. Ska den vara lika tyst måste den sättas mörkare. Det tysta kommer nu ur grad, versalgemener och spärrning — inte ur att texten är svag. Uppmätt 4,79–6,97 mot pappret. */ --ink-3:#575044; /* Text på natt. Egna tokens — att låta --ink-2 gälla på svart botten var precis den buggen som gjorde produktraderna och specvärdena osynliga. */ --ljus:#F5F2EB; --ljus-2:#A79E8E; --ljus-3:#7B7365; /* En accent i metall, i två styrkor. Brons på papper, guld på natt — samma brons mot svart läser som smuts, samma guld mot papper som klotter. --brons är YTA: fokusring, understryk, knappens hovfyllning, hovfärg på en rubrik i 68 px. Där bär den. --brons-hi är brons som TEXT på papper, alltså etiketterna på elva bildpunkter. Samma kulör i samma grad mätte 3,09–3,94 mot pappret, och det är inte en nyansfråga: en versaletikett är det som säger vad raden är. Djupare umbra i stället, uppmätt 4,81–5,21. Metallen är kvar, ljuset är borta — vilket är precis vad brons gör i skugga. */ --brons:#8A6A3C; --brons-hi:#674E2C; --guld:#C9A55F; --pa-brons:#FBFAF7; /* Newsreader är husets display- och registersnitt. Ett textsnitt buret stort, inte en didone: det bär sina egna streck på skärm och sätter samma text i 104 px display och 20 px register. Georgia är fallbacken med rätt proportion. Optisk storlek är pinnad i snittet; vikten är en axel, så 400 och 700 kommer ur samma fil utan faux-fetstil. */ --serif:'Newsreader',Georgia,'Times New Roman',serif; /* Monon. Allt som är en AVLÄSNING sätts som en avläsning: mått, antal, charge, datum, veckor. Det är den enskilt största anledningen till att droppsidan läser som trovärdig i stället för som marknadsföring, och huset ska ha samma grammatik. Den används aldrig till brödtext. */ --mono:'Data',ui-monospace,'JetBrains Mono','SF Mono',monospace; --wrap:1320px; --smal:700px; /* SATSYTANS SIDOLUFT, som ETT tal. Låg tidigare på fem ställen: .wrap, .wrap.smal, pjäshjältens textspalt och den delade hjältens innerfall, med 44 px på dator och 30 på telefon. Följden var att telefonens luft inte gick att ändra på ett ställe, och att den var 15 px per sida — 3,8 % av en 390 px skärm. Det är en app-siffra. Ett hus vars sidor är trycksaker ska ha en marginal man ser, och telefonen är den skärm där en text som går ända ut i kanten läser billigast. Talet är hela luften, alltså hälften per sida. Mobilvärdet sätts i mediefrågan längst ned. */ --kant:44px; /* SIDHUVUDETS HÖJD, som ett tal och inte som en gissning. Menyn är sticky och ligger alltså I flödet: en hjälte på 100svh börjar på 77 och slutar på 977 vid ett fönster på 900. Uppmätt låg startsidans enda knapp med underkant på 914 vid 900, 862 vid 844 och 784 vid 760 — alltid utanför. Ett hus som säljer mot förfrågan får inte ha sin enda dörr under vecket. Måttet är nav-in (76) plus hårstrecket (1); ändras det ena ändras det här. Allt som ska mäta "en skärm" räknar mot den här, aldrig mot svh rakt av. */ --navh:77px; /* Samtyckesremsans höjd, satt av samtycke.js medan remsan står kvar och nollad så fort den är besvarad. Den är ett fast lager över samma skärm som hjälten mäter sig mot, alltså måste hjälten känna till den — annars är räkningen rätt och knappen ändå bakom en remsa. Grundvärdet är noll: utan skript finns ingen remsa och ingenting ska dras av. */ --samtycke-h:0px; /* Rytmen. Tre mått, avsedda att växlas. En sida som använder --sek hela vägen ner kommer i samma takt som en katalog. */ --sek:clamp(88px,10vw,152px); --sek-tyst:clamp(120px,15vw,230px); --sek-tat:clamp(52px,5.5vw,84px); --kurva:cubic-bezier(.16,.84,.36,1); /* Märkets form som mask. Samma monogram logga.py räknar fram (img/26b.svg, viewBox 150.5×75). Märkeshjälten skär en metallyta och härdningsljuset till just den här konturen, så ljuset ligger PÅ märket och inte i en ruta runt det. En fil, inte inbäddad markering: masken behöver bara formen, och samma fil bär redan tryckoriginalet. */ --m-mask:url("/img/26b.svg"); color-scheme:light; } /* LJUSRECEPTEN. ========================================================================== Deklarerade på BÅDA rummen i samma regel, och det är inte en dubblering utan hela poängen. En egenskap som innehåller var() löser ut sina hänvisningar när den DEKLARERAS, inte när den används, och ärver sedan ner som färdig text. Recepten låg först bara på :root, och då bar droppsidan med sig husets bronsljus i stället för sitt eget betongljus — mätt +14,8 i rödöverskott där det skulle ha varit kallt. En regel, två element, varsin upplösning mot sina egna tokens. Auran är närfältet: en tät bloom precis där rubriken står, ovanpå den långa avtoningen. Utan den har fältet bara en riktning; med den har det en källa. Den tonar ut mot samma kulör med noll i alfa och inte mot transparent, för transparent är svart i vissa motorer och ger en grå ring runt bloomen. */ :root,.sida-dropp{ --ljus-natt:radial-gradient(142% 120% at 6% -8%, var(--natt-hi) 0%,var(--natt-h2) 17%,var(--natt) 40%, var(--natt-l2) 66%,var(--natt-lo) 100%); /* Glimten: mindre yta, lägre alfa. En källa, inte en dis. */ --aura-natt:radial-gradient(38% 42% at 11% 15%, rgba(var(--aura-rgb),.095) 0%,rgba(var(--aura-rgb),.032) 46%, rgba(var(--aura-rgb),0) 72%); --ljus-papper:radial-gradient(138% 116% at 8% -6%, var(--papper-hi) 0%,var(--papper-h2) 20%,var(--papper) 42%, var(--papper-l2) 68%,var(--papper-lo) 100%); } body{ /* Pappret är också en yta, inte en färgruta. Ljuset ligger på KROPPEN och inte på varje sektion, av två skäl: två ljusa sektioner i rad hade fått var sin gradient och mötts i en synlig vågrät remsa, och ett ljus som följer med skärmen (fixed) läser som en lampa över bordet i stället för som en tonad bild. Spannet är litet — tolv steg på ett papper som ligger på 250 — eftersom ljusa ytor visar bandning långt före mörka. */ background:var(--ljus-papper) fixed; color:var(--ink); font-family:'Familjen Grotesk',system-ui,-apple-system,sans-serif; font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; /* clip, INTE hidden. overflow-x:hidden gör body till en rullningskontainer, och då slutar position:sticky fungera för allt inuti den — sidhuvudet rullade bort helt i stället för att ligga kvar. clip klipper utfallet utan att skapa någon kontainer. Samma skäl som står vid html längst upp. */ overflow-x:clip; } /* ------------------------------------------------ Atmosfären (kall inramning) Filip bad om en KALL gradient som LEVER och RAMAR IN hela känslan på sidan, inte en platt papperston. Svaret är två fasta skikt som ligger mot skärmen och sveper över allt innehåll när man rullar. Samma ljus över hela sajten, inte en gradient per sektion. Det är just förankringen mot skärmen som gör att skikten binder ihop papper- och natt-sektionerna till EN stämning. .atmos ligger BAKOM innehållet (z-index -1: över kroppens papper, under sektionerna). Där pappret är genomskinligt driver en sval ljuspöl långsamt över ytan. Rörelsen är det som gör att pappret aldrig känns som en fryst fyllning. .rama ligger ÖVER innehållet (z-index 100, under sidhuvudet på 120). Det är den kalla vinjetten som ramar in skärmens kanter. Den MÖRKAR bara, aldrig ljusar, och bara i hörnen. Texten står i mitten och rörs aldrig. Båda står färdiga utan skript: pölen och vinjetten har ett viloläge som håller stilla och snyggt. Skriptet lägger bara till driften, och prefers-reduced-motion får viloläget. */ .atmos,.rama{position:fixed;inset:0;pointer-events:none;overflow:hidden; contain:layout paint size} .atmos{z-index:-1} .rama{z-index:100} /* Den svala ljuspölen. Större än skärmen så kanten aldrig kan synas medan skriptet drar den. Viloläget uppe till vänster, samma hörn som husets ljuskälla. transform, inte bakgrundsbyte: ett kompositskikt ritar aldrig om. */ .atmos-ljus{ position:absolute;width:155vmax;height:155vmax;left:-38vmax;top:-48vmax; background:radial-gradient(closest-side, rgba(var(--kyla-ljus),.52) 0%,rgba(var(--kyla-ljus),.20) 42%, rgba(var(--kyla-ljus),0) 72%); will-change:transform; } /* En kallare, tyngre pöl i motsatt hörn ger pappret riktning: svalt och ljust uppe, en aning djupare och blåare nere. */ .atmos-djup{ position:absolute;width:140vmax;height:140vmax;right:-42vmax;bottom:-52vmax; background:radial-gradient(closest-side, rgba(var(--kyla-djup),.075) 0%,rgba(var(--kyla-djup),.028) 46%, rgba(var(--kyla-djup),0) 72%); will-change:transform; } /* Vinjetten. En kall ram runt hela skärmen i två lager: en mjuk allmän kylning av alla fyra hörn, och en riktad kall skugga vars centrum skriptet flyttar så att ljuskällan tycks vandra medan man rullar. Alfat är litet. */ .rama::before{ content:"";position:absolute;inset:0; background:radial-gradient(128% 118% at 50% 45%, rgba(var(--kyla-djup),0) 52%,rgba(var(--kyla-djup),.06) 80%, rgba(var(--kyla-djup),.15) 100%); } .rama::after{ content:"";position:absolute;inset:-25%; background:radial-gradient(58% 58% at var(--rx,16%) var(--ry,122%), rgba(var(--kyla-djup),.10) 0%,rgba(var(--kyla-djup),0) 62%); } ::selection{background:var(--black);color:var(--papper)} :focus-visible{outline:2px solid var(--brons);outline-offset:3px} .sek-mork :focus-visible,.hjalte :focus-visible{outline-color:var(--guld)} .hoppa{ position:fixed;top:-100px;left:16px;z-index:200; background:var(--black);color:var(--papper); padding:12px 20px;font-weight:600;transition:top .2s; } .hoppa:focus{top:16px} /* ------------------------------------------------------ 2 Typografi */ /* Två register. .jatte och .d.stor är stora. Allt annat är litet. Det som låg däremellan (.d.mellan, 26–42 px) är borttaget — mellanrubrikerna i marginalspalterna sätts i etikettstil i stället. */ .d{ font-family:var(--serif);font-weight:400; /* Newsreader är bredare och rundare än husets tidigare didone och tål mindre spärr: den gamla -.022/-.028 var satt för en smal, hög bokstav. */ letter-spacing:-.018em;line-height:.98;text-wrap:balance; } /* Nedskruvat från 10.5vw/178 och 5.8vw/92. Vid 151 px åt rubriken halva skärmen på varje undersida och ingenting var längre stort i förhållande till något annat — stort är bara stort om det är sällsynt. Kontrasten mot 11 px-etiketterna är fortfarande tiofaldig. */ .jatte{font-size:clamp(50px,11.4vw,104px);line-height:.94;letter-spacing:-.021em} .d.stor{font-size:clamp(33px,7vw,64px);line-height:1.0;letter-spacing:-.017em} h3.d{font-size:clamp(19px,1.5vw,23px);line-height:1.16;letter-spacing:-.008em} /* Etiketten är accentfärgens ENDA statiska jobb. Ligger guldet också på priser, streck och siffror är det inte längre en accent utan en andra textfärg — det var det som gjorde sidan rörig. Den är också marginal- spalternas rubriknivå: marginalen viskar, innehållet bär serifregistret. SJÄTTE PASSET: metallen lyfts av papperssektionerna. Guld på gräddvitt läser som "vill se dyr ut" — det var en av tre rotorsaker Filip pekade ut. På papper är etiketten nu dämpad bläck, stram och tryckt som hos Aesop och The Row. Guldet överlever bara mot natt, där en liten etikett läser som ett glimt ljus på metall och inte som en prydnad på duk. En not, på rätt botten. */ .etikett{ font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase; color:var(--ink-2);margin-bottom:26px; } .sek-mork .etikett,.hjalte .etikett,.band .etikett{color:var(--guld)} .lede{ font-size:clamp(17px,1.3vw,19px);line-height:1.6; color:var(--ink-2);max-width:58ch;margin-top:26px; } .lede.stor{font-size:clamp(19px,1.7vw,24px);line-height:1.48;color:var(--ink)} .lede.smal-txt{max-width:52ch} .lede a{color:var(--ink);text-decoration:underline;text-underline-offset:4px; text-decoration-color:var(--brons);text-decoration-thickness:1px} /* Paret: två spalter som BÅDA börjar vid satsytans vänsterkant. Skillnaden mot .marginal är hela poängen — .marginal lägger en etikett i vänstermarginalen och skjuter innehållet en tredjedel in, och används den på fyra sektioner i rad börjar varenda textblock på sidan på samma x-koordinat. Då är det inte asymmetri, det är ett indrag som upprepas, och sidan har bara en gest kvar. */ .par{display:grid;gap:clamp(26px,4vw,64px);align-items:start} /* Spalternas första stycke får inte bära sin egen toppmarginal. .lede har 26 px och ett vanligt stycke har noll, så två spalter bredvid varandra började på olika höjd — vilket syns direkt eftersom det enda ögat har att jämföra med är den andra spalten. Det låg redan lappat med style="margin-top:0" på ett av de två ställen där .par används, och var glömt på det andra. En lapp som måste upprepas för hand är ingen lösning; regeln hör hemma i klassen. */ .par>*,.par>*>:first-child{margin-top:0} @media (min-width:900px){.par{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}} /* Tal i priser och mått sätts med tabulära siffror. Annars hoppar kolumnen i en lista där 16 000 står över 78 000. */ .tal{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1} .brodtext h2{margin:56px 0 14px;font-size:clamp(19px,1.5vw,23px); font-family:var(--serif);letter-spacing:-.01em} .brodtext h2:first-child{margin-top:0} .brodtext p{color:var(--ink-2);margin-bottom:16px;max-width:64ch} .brodtext a{color:var(--ink);text-decoration:underline;text-underline-offset:3px; text-decoration-color:var(--brons)} /* --------------------------------------------- 3 Layout och rytm */ .wrap{width:min(100% - var(--kant),var(--wrap));margin-inline:auto} .wrap.smal{width:min(100% - var(--kant),var(--smal))} .sek{padding-block:var(--sek);position:relative} .sek.tyst{padding-block:var(--sek-tyst)} .sek.tat{padding-block:var(--sek-tat)} .sek.ingen-topp{padding-top:0} /* DJUPET. De mörka fälten var plan färg, och en plan färg har ingen ljuskälla. Utan ljuskälla finns ingenting för metall och sten att lysa emot — det var därför sidan läste torr trots att typografin satt. Åtgärden är inte skuggor och kort (ett kort med skugga är en annons, se DATAGRAMMATIKEN) utan ljus i själva ytan: en svag radial som lägger ljuset uppe till vänster, där etiketten och rubriken står, och låter det falla av mot höger och nedåt. Skillnaden mellan --natt och --natt-2 är elva värden. Det är avsiktligt under gränsen för vad man ser som en gradient; det man ska se är att fältet har en riktning, inte att det är målat i två färger. Ligger på tokens, alltså följer det med in i droppets rum utan en rad till: .sida-dropp pekar om --natt/--natt-2 till formolja och gjuten betong. Kornet läggs som ett eget bakgrundslager ovanpå radialen och blandas med screen, alltså additivt. Husets korn ligger som ett overlay-lager över hela sidan, men overlay är multiplikativ och gör mätbart ingenting mot nästan svart — se korn.py. De mörka fälten är alltså de enda som skulle blivit utan det korn som fanns just för deras skull. */ /* Ordningen är lagren ovanifrån: korn, kanter, aura, ljus. Kornet blandas med screen eftersom overlay är multiplikativ och inte gör något mot nästan svart; resten ligger normalt. Förankringen är det som gör det till EN belysning i stället för fem. Ljuset och auran ligger fixed, alltså mot skärmen och inte mot sektionen, precis som pappret. Då är det samma lampa som lyser på hela sajten och den sveper över fältet när man rullar, i stället för att varje mörkt fält tänder en egen lampa i sitt eget övre vänstra hörn. Kanterna och kornet måste däremot sitta i sektionen — en kant som ligger stilla mot skärmen är inte en kant. iOS Safari stöder inte fixed förankring och behandlar den som scroll. Det är ett acceptabelt fall tillbaka och inget att bygga runt: ljuset hamnar då i sektionens eget hörn i stället för skärmens, alltså exakt så som det såg ut innan förankringen lades till. Ingenting går sönder, det blir bara fem lampor i stället för en. */ .sek-mork{ background-image:var(--korn-mork),var(--kant-topp),var(--kant-bott), var(--aura-natt),var(--ljus-natt); background-size:var(--korn-ruta),auto,auto,auto,auto; background-attachment:scroll,scroll,scroll,fixed,fixed; background-blend-mode:screen,normal,normal,normal,normal; color:var(--ljus); } /* Fotoytorna kan inte ta kornet som ett bakgrundslager: brickan är ogenomskinlig och skulle täcka fotot. Den läggs i stället som ett eget skikt mellan slöjan och texten. z-index 1 och först i dokumentet, alltså under .hjalte-in och .band-in som har samma z-index men kommer senare — kornet ska ligga på ytan, inte på bokstäverna. */ .hjalte::before,.band::before,.dropp-in::before{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background-image:var(--korn-mork);background-size:var(--korn-ruta); mix-blend-mode:screen; } @media print{.hjalte::before,.band::before,.dropp-in::before{display:none}} .sek-mork .lede,.sek-mork p{color:var(--ljus-2)} /* Luft mellan två stycken i rad. Regeln låg bara på natt och på remsan, så i en ljus sektion klistrades andra stycket direkt mot det första: .lede bär sin marginal uppåt och ett vanligt stycke har ingen alls. Selektorn går på stycken som står direkt i satsytan, inte på varje p i dokumentet — spalter och tabeller sätter sina egna avstånd. */ .sek-mork p+p,.band p+p,.sek>.wrap>p+p{margin-top:16px} .sek-mork .lede.stor{color:var(--ljus)} .sek-mork .tal{color:var(--ljus)} .sid-topp{padding-top:clamp(96px,11vw,150px);padding-bottom:clamp(44px,5vw,80px)} /* En displayrubrik som får hela satsytan blir en banderoll. Två rader är rubrikens naturliga form; utan måttet gick /om/ ut på 1230 px i en enda rad. */ .sid-topp h1{max-width:19ch} /* Marginalspalten. Etiketten står i vänstermarginalen och texten i en smal spalt till höger — trycksaksuppställning, inte centrerad broschyr. 4/8 är avsiktligt ojämnt; 6/6 ser ut som en tabell. */ .marginal{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(28px,5vw,90px);align-items:start} .marginal>.marginal-sido{position:sticky;top:120px} .marginal .etikett{margin-bottom:0} .sek-topp{ display:flex;align-items:flex-end;justify-content:space-between; gap:32px;flex-wrap:wrap;margin-bottom:clamp(40px,4.5vw,76px); } .smulor{border-bottom:1px solid var(--linje-svag);font-size:13px;color:var(--ink-3)} /* Luften flyttad från raden in i länkarna. Radens höjd är exakt densamma som förr — 13 px text plus 28 px luft — men luften ligger nu innanför i stället för utanför, så att träffytan blir 45 px i stället för 21. En brödsmula är den vanligaste vägen tillbaka på telefon och den var för liten att träffa med tummen. */ .smulor .wrap{display:flex;gap:10px;align-items:center;padding-block:0;flex-wrap:wrap} /* Även vågrätt: "Start" är fem tecken och 27 px brett. Padding ut, marginal in — snedstrecket står kvar på samma pixel och ytan blir 45×45. */ .smulor a{color:var(--ink-3);text-decoration:none; padding-block:14px;padding-inline:9px;margin-inline:-9px} @media (hover:hover){.smulor a:hover{color:var(--brons)}} .smulor i{font-style:normal;opacity:.4} /* Sidan man står på sätts i värdenas ink. Den låg på --ink-2 och skildes då från länkarna av att de var ljusare — och när mikroinken mörknade tog den skillnaden slut. En brödsmula som inte visar var man står mäter ingenting. */ .smulor span{color:var(--ink)} /* ----------------------------------------------------- 4 Navigation */ .nav{ /* sticky, inte fixed. Fixed lyfter menyn ur flödet och lägger den ovanpå brödsmulorna på varje undersida. */ position:sticky;top:0;z-index:120; /* Solitt och ljust, ocksa over hjalten. Halvgenomskinligt vitt over ett helsvart foto blir gratt, inte ljust, och sudd ritar en synlig rektangel med skarp kant dar bakgrunden slutar. */ /* Samma ljus som kroppen, och samma förankring: fixed räknas alltid mot skärmen, aldrig mot elementet, så remsan ligger exakt i linje med pappret bakom den och skarven försvinner. Värdena står i klartext och inte i tokens. Sidhuvudet ska vara IDENTISKT på varje sida, och droppsidan pekar om --papper till formolja — med tokens hade menyn bytt färg när man bytte rum. */ background:var(--ljus-nav) fixed; border-bottom:1px solid var(--linje-svag); transition:border-color .3s,background .4s,color .4s; } .nav.rullad{border-bottom-color:var(--linje)} .nav-in{display:flex;align-items:center;gap:28px;height:76px} /* Menyn vänder INTE färg över hjälten längre. Den var transparent med ljus text där, och en meny som byter färg mitt i en rullning är en meny man tittar på i stället för använder. Sidhuvudet är nu en egen ljus remsa hela vägen, och hjälten börjar under den i stället för bakom den. */ /* Märket ligger inbäddat som SVG och inte som , så att fill:currentColor ärver textfärgen. Samma märke följer därför med när sidan växlar från papper till natt, i stället för att finnas i två filer som kan glida ifrån varandra. Se logga.py. Höjden sätts här och bredden räknas ut av viewBox — märket har inget eget mått som kan hamna i konflikt med rutan det ligger i. */ /* Märket i sidhuvudet är 26 px högt, alltså en träffyta på 26 px för sidans väg tillbaka till startsidan. Utfyllnaden tas tillbaka med negativ marginal: monogrammet står kvar exakt där det stod, fingret får fyrtiofyra. */ .mark{display:inline-block;text-decoration:none;line-height:0;color:inherit; padding-block:11px;margin-block:-11px} .mark svg{display:block;width:auto;fill:currentColor} /* Bara monogrammet i sidhuvudet. Hela låset (26B + 26BESPOKE) är sex gånger bredare än högt och tog en fjärdedel av menyraden; namnet står i sidfoten, i titeln och i adressfältet ändå. */ .mark .marke-26b{height:26px} .mark .marke-stapel{height:66px} .mark.stor{display:inline-block;margin-bottom:22px} @media (max-width:560px){ /* Låset är sex gånger bredare än högt. På en smal skärm ska det krympa i stället för att tränga ut hamburgaren — det var precis den buggen som gjorde menyn oöppningsbar på staywild. */ .mark .marke-26b{height:22px} } .nav-lankar{display:flex;gap:32px;margin-left:auto} .nav-lankar a{ position:relative;text-decoration:none;font-size:15px;color:var(--ink-2); padding-block:6px;transition:color .25s; } .nav-lankar a::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:var(--black);transform:scaleX(0);transform-origin:100% 50%; transition:transform .45s var(--kurva); } @media (hover:hover){ .nav-lankar a:hover{color:var(--ink)} .nav-lankar a:hover::after{transform:scaleX(1);transform-origin:0 50%} } .nav-lankar a[aria-current]{color:var(--ink)} /* Språkväxeln sist i menyn är ett vanligt menyord ("English"/"Svenska") och får ingen egen dräkt. Den stod som koden EN, spärrad och dämpad, mellan Verifiera och knappen: tre saker i tre drakter på en rad. Ett helt ord säger vad det är utan hjälp. Går till samma sida på det andra språket. */ .nav-lankar a[aria-current]::after{transform:scaleX(1)} .burger{display:none;background:none;border:0;padding:12px;margin-right:-12px; cursor:pointer;width:46px;height:46px} .burger span{display:block;height:1px;background:var(--ink); transition:transform .35s var(--kurva),background .4s} .burger span+span{margin-top:7px} .burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)} .burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)} .mobilmeny{ position:fixed;inset:76px 0 auto;z-index:110;background:var(--natt); color:var(--ljus);padding:20px;display:none; flex-direction:column;gap:4px;max-height:calc(100dvh - 76px);overflow-y:auto; /* Panelen glider ner och tonar in i stället för att poppa. display animeras med allow-discrete så den fälls in och ut mjukt; utan stöd faller den tillbaka på samma hårda växling som förr, vilket är ofarligt. */ opacity:0;transform:translateY(-8px); transition:opacity .3s var(--kurva),transform .4s var(--kurva), display .4s allow-discrete; } .mobilmeny.uppe{display:flex;opacity:1;transform:none} @starting-style{.mobilmeny.uppe{opacity:0;transform:translateY(-8px)}} @media (prefers-reduced-motion:reduce){ .mobilmeny{transition:none;transform:none} } /* Spalten måste sättas på