/* Staby Anbefalinger — frontend. Farverne er butikkens egne, samme som søgeoverlayet: #1f4fd8 knapfarven #2a3f9e accenttekst #6a7176 sekundær tekst (4,67:1 mod kortets #f8f8f8, 4,96:1 mod hvid) #868e93 kanter (3,33:1, kravet for UI-elementer er 3:1) Fast række, ingen karrusel. Undersøgelser viser at de fleste kun ser første side af en karrusel, så otte af tolv varer aldrig bliver set — og så skal vi hellere stå inde for fire end lade som om vi har tolv. */ /* Målene er Clerks egen `.clerk-wrapper`, som blokkene erstatter: max-width: calc(1170px + 5.2325em) padding: 2.617924em (1em under 992px) Det giver 1170px indhold. Vores gav 1200px, og 15px forskel på venstrekanten er tydelig når to blokke står oven på hinanden. */ .sr-blok { max-width: calc(1170px + 5.2325em); margin: 40px auto; padding-left: 2.617924em; padding-right: 2.617924em; font-family: inherit; color: #14181b; } @media (max-width: 992px) { .sr-blok { padding-left: 1em; padding-right: 1em; } } .sr-blok[hidden] { display: none; } /* Blokken må aldrig blive klemt sammen af den container den lander i. På kurven landede den i en to-kolonne-flex og brækkede teksten ét bogstav pr. linje. */ .sr-blok { grid-column: 1 / -1; width: 100%; min-width: 0; flex-basis: 100%; } /* Kategorisiden: blokken ligger inde i
og skal fylde dens fulde bredde — ikke centreres i sin egen spalte oven i temaets. */ .sr-blok--pop { max-width: none; margin: 0 0 34px; padding: 0; } /* Rækken brød ud med -16px, men blokken har ingen sidepolstring at bryde ud AF — det gav 1px vandret sideoverløb på mobil. */ @media (max-width: 900px) { .sr-blok--pop .sr-raekke { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } } .sr-blok--pop .sr-raekke { gap: 20px; } /* Større kort her: blokken er en genvej på en kategori med mange varer, og så skal billedet kunne bære valget. */ .sr-blok--pop .sr-navn { font-size: 15px; } .sr-blok--pop .sr-pris { font-size: 15px; } /* --- forsidens to blokke --------------------------------------------- De skal se ud som om de altid har stået der, side om side med sidens øvrige sektioner. Målene er taget fra Clerks egen `.clerk-wrapper`, som blokkene erstatter: max-width: calc(1170px + 5.2325em) padding: 2.617924em (1em under 992px) Det giver 1170px indhold — vores egen `.sr-blok` giver 1200px, og 15px forskel på venstrekanten er tydelig når to blokke står oven på hinanden. Overskriften arver med vilje. `.clerk-headline-wrapper` sætter KUN `margin: 2rem 0` og ingen skriftstørrelse — Clerks overskrifter ser rigtige ud fordi de ER temaets. Temaet giver `.site h2` clamp(1.375rem, 0.9939rem + 1.2195vw, 1.75rem), altså 22px på smalle skærme og 28px på brede. Vores stod på 20px og var derfor synligt mindre end alt andet på siden. */ .sr-blok--forside, .sr-blok--anbefalet { margin: 0 auto 44px; /* bredden arves fra .sr-blok */ } /* Luft nok til at kortenes ramme ikke rører overskriften. */ /* Samme luft om overskriften som `.clerk-headline-wrapper { margin: 2rem 0 }`. */ .sr-top { margin: 2rem 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; } /* Undertitlen på egen linje under overskrift og antal. */ .sr-top .sr-under { flex-basis: 100%; } /* --- rullende række ------------------------------------------------ Er der flere end fire, ruller rækken i stedet for at blive skåret af. Højden er den samme; kunden driver den selv med pilene. Reglerne er lagt i en min-width-forespørgsel med vilje: mobil har sit eget strøg længere nede, og `.sr-baelte--ruller .sr-raekke` er (0,2,0) mod mobilreglens (0,1,0). Uden scoping ville desktopreglen vinde på en telefon, uanset at den står først i filen. */ .sr-baelte { position: relative; } @media (min-width: 901px) { .sr-baelte--ruller .sr-raekke { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; /* overflow-x klipper også lodret — fokusringen skal have plads. */ padding: 4px 0; max-width: none; } .sr-baelte--ruller .sr-raekke::-webkit-scrollbar { display: none; } /* Fire synlige: 100% minus de tre mellemrum, delt med fire. */ .sr-baelte--ruller .sr-kort { flex: 0 0 calc((100% - 48px) / 4); scroll-snap-align: start; } .sr-pil { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 1px solid #868e93; background: #fff; color: #14181b; font-size: 21px; line-height: 1; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: 0 1px 4px rgba(0,0,0,.10); } .sr-pil:hover { border-color: #14181b; } .sr-pil:focus { outline: 2px solid #1f4fd8; outline-offset: 2px; } .sr-pil--v { left: -16px; } .sr-pil--h { right: -16px; } } /* Pilene hører til musen. På mobil er strøget den naturlige gestus, og en knap dér ville bare dække et kort. */ @media (max-width: 900px) { .sr-pil { display: none; } } /* [hidden] skal slå display fra uanset hvad reglerne ovenfor siger. */ .sr-pil[hidden] { display: none; } /* Overskriften ARVER temaet — det er hele pointen. `.clerk-headline-wrapper` sætter kun `margin: 2rem 0` og ingen skriftstørrelse. Clerks overskrifter ser rigtige ud fordi de ER temaets: `.site h2` giver clamp(1.375rem, 0.9939rem + 1.2195vw, 1.75rem), altså 22px på smalle skærme og 28px på brede. Vores stod fast på 20px og var synligt mindre end alt andet på siden — på forsiden, kategorisiderne og produktsiderne. Størrelsen gælder derfor ALLE blokke, ikke kun forsidens. */ .sr-blok h2 { font-size: clamp(1.375rem, 0.9939rem + 1.2195vw, 1.75rem); margin: 0; letter-spacing: -0.01em; line-height: 1.2; font-weight: 600; } .sr-under { font-size: 13.5px; color: #6a7176; margin: 3px 0 0; } .sr-raekke { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Færre end fire fylder ikke bredden ud — en enlig anbefaling der står alene får mere opmærksomhed end en der er polstret med svagere. */ .sr-raekke--1 { grid-template-columns: minmax(0, 260px); } .sr-raekke--2 { grid-template-columns: repeat(2, minmax(0, 260px)); } .sr-raekke--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 76%; } /* Ingen ramme, ingen skygge. Første udgave gav kortene en 1px ramme der mørknede ved hover, med den begrundelse at de stod kantløse på produktsidens grå baggrund. Men det er ikke sidens sprog: hverken Clerks kort eller butikkens egne produktkort har en ramme, og Clerks CSS har ikke så meget som en :hover-regel. */ .sr-kort { display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: inherit; padding: 12px 12px 14px; } /* Temaets egen hover: billedet skalerer LET INDAD. li.product:hover img { transform: scale(0.98) } Det er en bevidst og lidt usædvanlig detalje i Shoptimizer — de fleste temaer zoomer udad — og netop derfor er den værd at kopiere frem for at opfinde noget eget. Et kort der opfører sig som alle andre kort på siden føles som en del af butikken. */ .sr-kort .sr-bil img { transition: transform .18s ease; } .sr-kort:hover .sr-bil img { transform: scale(0.98); } .sr-kort:hover .sr-navn { text-decoration: underline; } @media (prefers-reduced-motion: reduce) { .sr-kort .sr-bil img { transition: none; } .sr-kort:hover .sr-bil img { transform: none; } } /* :focus-visible kom først i Safari 15.4. På iOS 12-15.3 blev hele reglen kasseret, og kortene havde INGEN synlig fokusmarkering — kortene har hverken understregning eller egen farve at falde tilbage på. */ .sr-kort:focus { outline: 2px solid #1f4fd8; outline-offset: 2px; } @supports selector(:focus-visible) { .sr-kort:focus:not(:focus-visible) { outline: none; } } .sr-bil { aspect-ratio: 1; background: #f5f6f7; border-radius: 2px; display: block; margin-bottom: 10px; overflow: hidden; } .sr-bil img { width: 100%; height: 100%; object-fit: contain; display: block; } /* Navnet bærer kortet. Før stod forskellen stort og accentfarvet OVER navnet. Målt på de byggede anbefalinger stod den etiket allerede i titlen på 95% af målkortene og 67% af farvekortene — kortet sagde altså det samme to gange, med det mindst informative øverst. */ .sr-navn { font-size: 14px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; margin-bottom: 3px; overflow-wrap: anywhere; /* aldrig afkortet */ } /* Forskellen vises kun når den IKKE står i navnet — så er den ny oplysning, og så må den gerne have accentfarven. Den står under navnet og mindre: navnet siger hvad varen er, den her siger hvad der adskiller den. */ .sr-forskel { font-size: 12.5px; font-weight: 600; color: #2a3f9e; margin-bottom: 5px; font-variant-numeric: tabular-nums; } .sr-pris { font-size: 14px; font-weight: 600; margin-top: auto; font-variant-numeric: tabular-nums; } .sr-pris span { font-weight: 400; color: #6a7176; font-size: 12px; } /* Prisen i den anden enhed. Den skal kunne LÆSES, men aldrig konkurrere med salgsprisen: Fecher, Robbert & Roth (2019) finder at et stort referencemål hæver den opfattede pris og sænker købsintentionen — med mindre de to står sammen, og salgsprisen bærer. Derfor står den på egen linje, mindre og dæmpet. #6a7176 giver 4,67:1 mod kortets #f8f8f8, altså over WCAG AA. (Bogomolova et al., Journal of Business Research 2020, eyetrackede at en FREMHÆVET enhedspris pålideligt køber flere fikseringer men ikke ændrer købsbeslutningen — så der er intet at hente ved at gøre den større.) */ .sr-pris .sr-enhedspris { display: block; font-weight: 400; color: #6a7176; font-size: 11.5px; margin-top: 1px; } .sr-lev { font-size: 11.5px; color: #6a7176; margin-top: 4px; line-height: 1.35; } @media (max-width: 900px) { .sr-blok { margin: 32px auto; } /* Én række man kan swipe, ikke to rækker under hinanden. To rækker fylder omkring 500 px lodret på en telefon, og det er for meget til en sekundær blok. Vandret strøg er den naturlige gestus på mobil, så der skal ingen pile til — men det NÆSTE kort skal kigge frem, ellers ved kunden ikke at der er mere. Derfor 44% pr. kort: to hele og en flig af det tredje. */ .sr-raekke, .sr-raekke--1, .sr-raekke--2, .sr-raekke--3 { display: flex; max-width: none; overflow-x: auto; scroll-snap-type: x proximity; gap: 12px; /* overflow-x: auto klipper OGSÅ lodret — det står i specifikationen: sætter man den ene akse til andet end visible, bliver den anden til auto. Rammen er væk nu, men FOKUSRINGEN er der stadig: 2px med 2px offset, og uden polstring klipper overflow den. */ padding-top: 6px; padding-bottom: 6px; /* Strøget må ikke løbe videre til siden bagved når rækken er i bund. */ overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; /* Bryd ud til skærmkanten, så kortene kan rulle helt ud i siden i stedet for at stoppe ved indholdets margen. */ margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; } .sr-raekke::-webkit-scrollbar { display: none; } .sr-raekke > .sr-kort { flex: 0 0 44%; scroll-snap-align: start; /* gap i FLEX kom først i Safari 14.5. Uden den rørte kortene hinanden. margin-right virker overalt; på nyere browsere lægger den sig oveni gap'en, derfor er gap sat til 12 og ikke 16. */ margin-right: 0; } @supports not (gap: 1px) { .sr-raekke > .sr-kort { margin-right: 12px; } } /* Er der kun ét eller to kort, er der intet at rulle — så må de fylde. */ .sr-raekke--1 > .sr-kort { flex-basis: 64%; } .sr-raekke--2 > .sr-kort { flex-basis: 47%; } } /* --- reserveret plads på kategorisiden --------------------------------- «Populære i kategorien» indsættes ØVERST på kategorisiden af JavaScript, altså efter siden er tegnet — og så skubbes hele varegitteret ned. Det er den værst tænkelige position for layout-hop. Målt i Search Console: 32 kategorisider er RØDE på CLS (0,29-0,31), og det er netop trædesten, trappefliser og fuglebad. Clerk gjorde formentlig det samme før os; nu hvor de er slukket, er der en chance for at rydde det helt — hvis vi ikke laver den samme fejl. PHP udskriver derfor beholderen MED højde, før siden tegnes, og kun når kategorien har mindst 12 varer (samme tærskel som JS bruger). Så flytter intet sig når kortene lander. Højden er sat efter kortets faktiske opbygning: kvadratisk billede plus navn, pris og leveringslinje, plus overskriften. Rammer den ved siden af, fjerner JS reservationen når blokken er tegnet, og så koster det højst forskellen i stedet for hele blokken. */ .sr-plads { min-height: 430px; } @media (max-width: 900px) { .sr-plads { min-height: 380px; } } @media (max-width: 560px) { .sr-plads { min-height: 340px; } } /* Tegnet — så bestemmer indholdet højden. */ .sr-plads.sr-plads--fyldt { min-height: 0; }