/* * Fru Timian Forhandler - globale regler. * * Grunnlaget er portert fra fru-timian-temaet (assets/css/main.css): reset, global typografi, * container, band-rytmen, den delte knappen, header-parten og footer-parten. Kommentarene er * originalens - de forklarer hvorfor reglene ser ut som de gjor. * * Ikke portert: oppskriftssiden, ukemeny, forsidens band, Pinterest og stjerner. De hoerer til * matbloggen og bygger paa egne blokker som ikke finnes her. * * Designtokens bor i theme.json. Her staar bare det theme.json ikke kan uttrykke. */ /* ───────────────────────────── RESET ───────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } /* * `clip`, ikke `hidden`: `hidden` på én akse gjør den andres `visible` til `auto`, og body blir en * scroll-container. Da løsner hvert `position: sticky` i dokumentet når mega-navs rullelås setter * `overflow: hidden` på ``. */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; /* * Prosamålet fanget der kjernen definerer det: et band overskriver * `--wp--style--global--content-size` for seg og sine, så et prosaband trenger et navn på * målet som ikke leser sitt eget nye tak. */ --ft-prosamaal: var(--wp--style--global--content-size); } img, svg, video { display: block; max-width: 100%; } /* * `hidden` må slå `display` over, ellers vinner regelen over. * * Nettleserens egen stilmal sier `[hidden] { display: none }`, men det er en * ren elementregel og taper mot `img { display: block }` rett over her. Da blir * elementer som skjuler seg med attributtet stående synlige. WooCommerce gjør * nettopp det i handlekurvskuffen: den rendrer to bilder - ett for produkter * som er skjult i katalogen og ett med lenke - og skjuler det ene med `hidden`. * Uten denne regelen viste skuffen samme bilde to ganger. */ [hidden] { display: none !important; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } input, select, textarea { font: inherit; color: inherit; } ul, ol { list-style: none; margin: 0; padding: 0; } details summary { cursor: pointer; list-style: none; } details summary::-webkit-details-marker { display: none; } :where(a, button, input, select, textarea, summary):focus-visible { /* 2px: fokusringens tykkelse og avstand — tilgjengelighet, ikke spacing. */ outline: 2px solid var(--wp--preset--color--gul); outline-offset: 2px; } .sr-only, .screen-reader-text { position: absolute; /* 1px: sr-only-idiomet — flaten må finnes for skjermlesere, men ikke sees. */ width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ────────────────────── TYPOGRAFI, GLOBALT ────────────────────── */ /* Amatic-titler skal alltid brytes logisk, ikke bare i én blokk. */ h1, h2, .wp-block-post-title, .wp-block-query-title { text-wrap: balance; text-transform: none; } /* Arkivet er fullt av lange versaler i løpende tekst, og et ord bredere enn spalta drar sida sidelengs. */ p { text-wrap: pretty; overflow-wrap: break-word; } /* ────────────────────────── CONTAINER ─────────────────────────── */ /* * Layout-wrapperen for markup som ikke er blokker — PHP-malene i fru-timian-shopify. Blokkmarkup * får det samme gratis av kjernens constrained layout. Aldri en query container. */ .ft-container { /* * `+ 2 * sideinnrykk` fordi `bandbredde` er kolonnen og denne wrapperen er `border-box`: * paddingen ligger innenfor max-widthen her, mens et bands rotpadding ligger utenfor den. */ max-width: calc( var(--wp--custom--bandbredde) + 2 * var(--wp--custom--sideinnrykk) ); margin-inline: auto; padding-inline: var(--wp--custom--sideinnrykk); } /* * Samme wrapper ett hakk lenger inn. Bare padding, fordi `border-box` legger den innenfor * max-widthen — et band må i tillegg senke barnas `max-width`, siden bandets padding ligger utenfor * `wideSize`-taket. */ .ft-container--innrykk { padding-inline: calc( var(--wp--custom--sideinnrykk) + var(--wp--custom--bandinnrykk) ); } /* ──────────────────────── BAND OG RYTME ───────────────────────── */ /* * Et band er en full-bredde seksjon med egen bakgrunn og egen vertikal rytme. Blokkene inni eier * ingen av de to. * * Bredden settes som `contentSize` på bandet selv, aldri på barna: da er det kjernens egen * layoutregel som måler, og «Innholdsbredde» på en enkelt gruppe virker fortsatt. Kolonnen er * bandets bredde og ikke prosamålet — et kortgrid skal ikke klemmes til 640px inne i et 1440px * band — og `.alignwide` får `wideSize` av kjernens egen regel. */ .ft-band { container-type: inline-size; container-name: ft-band; padding-block: var(--wp--preset--spacing--xxl); --wp--style--global--content-size: var(--wp--custom--bandbredde); } /* * Et bånd med et bredt barn gir fra seg sidepadding, og hever samtidig sitt eget barnetak. * * Bredden kan ikke ligge på barnet: kjernen skriver `margin-left/right: auto !important` på hvert * constrained barn som ikke er left/right/full — `.alignwide` er *ikke* utelatt — så ingen marg, * heller ikke en inline, bryter ut av bandets innholdsboks. Prototypens slike seksjoner har 24px * sidepadding der resten har `sideinnrykk`, og overskriften står i flukt med sporet, som er hvorfor * taket løftes for alle barna og ikke bare det brede. */ .ft-band.has-global-padding:has( > .alignwide ) { --wp--custom--bandbredde: var(--wp--style--global--wide-size); padding-inline: 1.5rem; } .ft-band--hero { background: var(--wp--preset--color--lys-blaa); padding-block: var(--wp--preset--spacing--xl); } .ft-band--filter { padding-block: var(--wp--preset--spacing--m); } /* Bandene hvor kolonnen *er* prosamålet — løpende tekst, ikke et rutenett. */ .ft-band.is-style-prosa { --wp--style--global--content-size: var(--ft-prosamaal); } /* ─────────────── REDAKSJONELLE SIDER ────────────────── */ /* * Sider som «Tips til smaksprøver» er ren brødtekst fra databasen, lagt inn i prosabandet av * page.html. Markupen er i orden - h2, h3, avsnitt, punktlister - den mangler bare rytme. * * Det som gjør mest her er punktlistene. Hvert punkt åpner med en fet overskrift og fortsetter i * brødtekst under et linjeskift («Dipp til potetgull og grønnsaksstaver» + oppskriften under), og * uten hjelp renner de sammen til én vegg med tekst der ingenting skiller ett tips fra det neste. * * `:has(> strong:first-child)` er med vilje: den treffer bare lister som faktisk er skrevet på den * formen. Vanlige punktlister ellers på sida beholder kulepunktene sine. */ /* * Idélistene blir lyseblå paneler. * * De er sidas eneste virkelig avgrensede innhold - en samling oppskrifter midt i løpende tekst - * og tåler derfor en flate rundt seg. Det er også det ene stedet den lyseblå fargen kan komme inn * på en side som ellers bare er tekst, uten at vi må røre innholdet i databasen. */ /* * Idélistene blir lyseblå paneler. * * De er sidas eneste virkelig avgrensede innhold - en samling oppskrifter midt i løpende tekst - * og tåler derfor en flate rundt seg. Det er også det ene stedet den lyseblå fargen kan komme inn * på en side som ellers bare er tekst, uten at vi må røre innholdet i databasen. * * Panelet følger prosamålet. Et bredere panel (840px) med tipsene i et to-spalters rutenett ble * prøvd 17.09.2026 og forkastet - det ble ikke bedre enn den enkle stabelen. */ :root .ft-band.is-style-prosa .wp-block-list:has(> li > strong:first-child) { margin-block: var(--wp--preset--spacing--l); padding: var(--wp--preset--spacing--m); background: var(--wp--preset--color--lys-blaa); border-radius: var(--wp--custom--radius--kant); list-style: none; } /* Hårstrek mellom tipsene i stedet for en strek langs kanten: på blå flate leser den tydeligere. */ :root .ft-band.is-style-prosa .wp-block-list:has(> li > strong:first-child) > li + li { margin-block-start: var(--wp--preset--spacing--m); padding-block-start: var(--wp--preset--spacing--m); border-block-start: 1px solid rgba(26, 26, 26, 0.12); } /* * Den fete åpningslinja er en overskrift i praksis. Som `block` får den sin egen linje uansett om * forfatteren husket linjeskiftet, og litt luft ned til teksten den hører til. */ :root .ft-band.is-style-prosa .wp-block-list > li > strong:first-child { display: block; margin-block-end: var(--wp--preset--spacing--xxxs); font-size: var(--wp--preset--font-size--brodtekst-l); line-height: 1.35; } /* * Bildene bryter ut av prosakolonnen og legger seg på bandbredden - samme kant som navraden. * * Teksten blir stående på prosamålet, for en linje på 1280px er ikke lesbar. Men da fløt hele sida * midt i vinduet uten å forholde seg til noe, og det er nettopp det som gjorde at den ikke så ut * som resten av nettstedet. Bildene er det som kan bære den kanten. * * `left: 50%` + `translateX(-50%)` sentrerer på kolonnens midtakse, som er den samme som bandets, * så bildet legger seg symmetrisk uansett hvor bred kolonnen er. Bredden regnes som bandets egen: * bandbredden, men aldri bredere enn vinduet minus sideinnrykket. */ :root .ft-band.is-style-prosa .wp-block-image { position: relative; left: 50%; width: min( var(--wp--custom--bandbredde), calc(100vw - 2 * var(--wp--custom--sideinnrykk)) ); max-width: none; margin-block: var(--wp--preset--spacing--xl); transform: translateX(-50%); } :root .ft-band.is-style-prosa .wp-block-image img { width: 100%; height: auto; } /* * Første og siste element skal ikke legge sin egen luft oppå bandets. * * Bandet har `padding-block: xxl` (opptil 64px), og toppbildet har i tillegg `margin-block: xl` * (opptil 48px). De to la seg etter hverandre, og avstanden fra navraden ned til bildet ble over * 110px - et hull som leste som en feil. Bandets padding skal styre kantene; elementenes marger * gjelder avstanden *mellom* dem. * * Står etter bilderegelen med vilje: de veier like mye (0,4,0), så rekkefølgen avgjør. */ :root .ft-band.is-style-prosa .wp-block-post-content > :first-child { margin-block-start: 0; } :root .ft-band.is-style-prosa .wp-block-post-content > :last-child { margin-block-end: 0; } :root .ft-band.is-style-prosa .wp-block-image img { border-radius: var(--wp--custom--radius--kant); } /* * Editoren etterlater gjerne et tomt avsnitt nederst. Det er usynlig, men det tar plass og gir * sida en hale av luft som ser ut som en feil. */ :root .ft-band.is-style-prosa p:empty { display: none; } /* * Det redaksjonelle innrykket. `min()` av to ledd og begge trengs: `100%` smalner med vinduet, * `bandbredde` er taket — uten det forsvinner innrykket på en bred skjerm, fordi et bands padding * ligger utenfor taket. */ .ft-band.is-style-innrykk { --wp--style--global--content-size: min( calc(var(--wp--custom--bandbredde) - 2 * var(--wp--custom--bandinnrykk)), calc(100% - 2 * var(--wp--custom--bandinnrykk)) ); } /* * Hvorfor `:is(.ft-main, .wp-block-post-content)` og ikke bare `.ft-main >`: * naar forsida er en ekte side, ligger baandene i sidas *innhold*, og `core/post-content` legger * sin egen `
` mellom `
` og dem. Alle reglene under som * maaler naboskap mellom baand - nulling av dobbel toppluft, tintede flater, filterstripa - er * direkte-barn-regler, og de ville falt stille ut. * * Andre ledd staar uten `.ft-main >` foran seg med vilje: i sideredigereren *er* post-content * rotbeholderen (`.is-root-container.wp-block-post-content`), og det finnes ingen `
` rundt * den. Samme regel treffer dermed bade forsida og redigereren, og kunden ser baandene slik de * faktisk blir. */ :is(.ft-main, .wp-block-post-content) > .ft-band + .ft-band { padding-block-start: 0; } /* * Et tonet band. * * Flata gjoer bandet til sitt eget felt paa sida, og bryter opp en lang hvit strekning - det var * derfor det kom. To ting foelger av at den har farge: * * Bandet maa ha sin egen toppluft. Regelen rett over nuller den mellom to band, fordi to hvite band * ellers faar dobbel luft i et skille oeyet ikke ser. Her *er* det et skille, og uten padding ville * fargen begynt i kanten av innholdet. * * Og bandet etter maa faa sin tilbake, av samme grunn: det staar ikke lenger inntil noe hvitt. * * Velgeren tar to veier inn, fordi det finnes to maater aa tone et band paa: * * `.ft-band--tint` temaets egen klasse, som moensteret baerer. * `.has-background` klassen kjernen selv setter naar noen velger en bakgrunnsfarge i * «Bakgrunn -> Farge» i redigereren. Det er den doera kunden bruker, og da * skal lufta foelge med uten at noen trenger aa vite om en CSS-klasse. * * En vanlig klasse og ikke en blokkstil: kjernens stilvelger er enkeltvalg, saa «Blaatt band» * ville slaatt ut `is-style-innrykk` - og bandet mistet tekstbredden sin. */ :root :is(.ft-main, .wp-block-post-content) > .ft-band:is(.ft-band--tint, .has-background) { padding-block: var(--wp--preset--spacing--xxxl); } :root :is(.ft-main, .wp-block-post-content) > .ft-band:is(.ft-band--tint, .has-background) + .ft-band { padding-block-start: var(--wp--preset--spacing--xxl); } /* ───────────── BILDE OG TEKST (core/media-text) ───────────────── */ /* * Husets form på `core/media-text`. Her og ikke i et blokkstilark, fordi blokka er kjernens og har * ingen `style.scss` å legge ved seg. Hvert ledd under er ett klasseledd mer enn kjernens egen * regel, og begge bildesider står skrevet ut, fordi kjernens ark laster i motsatt rekkefølge på * fronten og i redigereren. */ /* * Like halvdeler, ikke kjernens `50% 1fr`: med en gate mellom kolonnene blir kjernens 50 % bildets * hele halvdel og teksten resten minus gaten. Drar en redaktør i skillet, vinner kjernens inline * `grid-template-columns` fortsatt over dette. */ :root .wp-block-media-text, :root .wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr 1fr; column-gap: var(--wp--preset--spacing--xl); } /* * Luft mellom to rader under hverandre. Ikke `blockGap`: temaets globale er 0, og en `blockGap` på * bandet ville lagt den samme luften mellom bandoverskriften og raden også. */ :root .wp-block-media-text + .wp-block-media-text { margin-block-start: var(--wp--preset--spacing--xl); } /* * Tekstkolonnen eier luften mellom elementene sine gjennom `gap`, så kjernens `padding: 0 8%` må * bort og elementmargene med den. `flex` og ikke `flow`, fordi `__content` ikke er en * layout-beholder for kjernen og derfor ikke har noen `blockGap` å sette. */ :root .wp-block-media-text > .wp-block-media-text__content { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--xxs); padding: 0; } :root .wp-block-media-text__content > * { margin-block: 0; } /* 27.5rem: tekstbredden i denne raden — halve bandet er for bredt. */ :root .wp-block-media-text__content > p { max-width: 27.5rem; } /* Knappen står litt friere enn avsnittene fra hverandre. */ :root .wp-block-media-text__content > .wp-block-buttons { margin-block-start: var(--wp--preset--spacing--xxs); } /* * En lenke i teksten er gul og understreket. theme.json gir alle lenker `inherit` uten strek, som er * riktig for et kort og en meny og feil midt i et avsnitt. */ :root .wp-block-media-text__content a:not( .wp-block-button__link ) { color: var(--wp--preset--color--gul); text-decoration: underline; text-underline-offset: 0.2em; } /* * Bildeforholdet er temaets valg, fordi blokka ikke har noen kontroll for det: `imageFill` fyller * radens høyde, altså tekstens, så en rad med lite tekst gir et lavt bilde. */ :root .wp-block-media-text > .wp-block-media-text__media { overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--wp--custom--radius--kant); } :root .wp-block-media-text__media img { height: 100%; object-fit: cover; } /* * `portrett`: sitatradens stående bilde. Bildet er en portrettflate og ikke en halv rad, så det står * midtstilt i sin egen kolonne. */ :root .wp-block-media-text.is-style-portrett > .wp-block-media-text__media { aspect-ratio: 3 / 4; max-width: 27.5rem; justify-self: center; } /* * `sitat`: overskriftsstilen med den håndtegnede loddrette streken. Skrift og størrelse står her og * arves ikke fra nivået, fordi nivået er et semantisk valg og stilen skal se lik ut uansett hvilket * redaktøren velger. Streken er et SVG og ikke en `border-left`, fordi den skal skjelve. */ :root .is-style-sitat { position: relative; /* 1.375rem: streken er 8px bred og teksten skal stå fri av den. */ padding-inline-start: 1.375rem; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--display-s); font-weight: 700; line-height: 1.1; /* * 33rem: uten et mål står setningen på én linje, og da blir den håndtegnede streken en kort strek * ved siden av én linje i stedet for den høye streken designet tegner. */ max-width: 33rem; text-wrap: balance; } /* * Sitatet står litt friere fra teksten under seg. Skrevet mot kolonnen og ikke bare mot stilen, * fordi `__content > *` nuller margene med de samme to klassene. */ :root .wp-block-media-text__content > .is-style-sitat { margin-block-end: var(--wp--preset--spacing--xxs); } /* * Fargen står som en literal: en `data:`-URL er en streng, og CSS setter ikke en custom property inn * i den. %23E09900 er `gul`. */ :root .is-style-sitat::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; /* 8px: strekens egen bredde i tegningen. */ width: 8px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 200' preserveAspectRatio='none'%3E%3Cpath d='M3.5 0 Q5 14 4 28 Q3 42 5 56 Q6 70 4 84 Q3 98 5 112 Q6 126 4 140 Q3 154 5 168 Q6 182 4 200' stroke='%23E09900' stroke-width='3' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 100% 100%; } /* * Én kolonne når bandet ikke er bredt nok til to. Bandet spørres og ikke raden: `core/media-text` * erklærer ingen container, og en container kan ikke spørres av elementet som erklærer den. * Rekkefølgen er skrevet ut for begge bildesider, fordi kjernens egne * `has-media-on-the-right`-regler veier (0,3,0). */ @container ft-band (max-width: 48em) { :root .wp-block-media-text, :root .wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr; row-gap: var(--wp--preset--spacing--m); } :root .wp-block-media-text > .wp-block-media-text__media, :root .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media { grid-column: 1; grid-row: 1; } :root .wp-block-media-text > .wp-block-media-text__content, :root .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content { grid-column: 1; grid-row: 2; } /* I én kolonne er portrettet ikke et innrykk lenger, bare et smalere bilde. */ :root .wp-block-media-text.is-style-portrett > .wp-block-media-text__media { max-width: none; } } /* * `enkel`: oppskriftskortets andre tegning, brukt bare på «Populært akkurat nå». Den overstyrer bare * det som er annerledes — kortets standardutseende blir stående i kort.css. Ingen ny markup: * `inc/recipe-card.php` tegner det samme for alle fire variasjonene, så «enkel» skjuler tre av de * fire meta-punktene i stedet for å be om en annen liste. */ :root .is-style-enkel { /* Prototypens `.popular-now__grid` står tettere enn arkivets `.recipes__grid`. */ --ft-mellomrom: var(--wp--preset--spacing--s); } :root .is-style-enkel .ft-kort__bilde { /* 1/1, mot standardkortets 4/3. */ aspect-ratio: 1 / 1; } :root .is-style-enkel .ft-kort__etikett { /* Kroppens `gap` er hele avstanden ned til tittelen. */ position: static; margin: 0; } :root .is-style-enkel .ft-merke { /* * Ren tekst, ikke en pille. `block` og ikke `inline-flex`: en inline-boks arver kroppens * linjehøyde og legger luft over og under en etikett som er mindre enn den. */ display: block; height: auto; padding: 0; border-radius: 0; background: none; color: var(--wp--preset--color--gul); font-size: var(--wp--preset--font-size--kicker-s); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } :root .is-style-enkel .ft-kort .ft-kort__tittel { /* brodtekst-l, ikke kortstandardens egen størrelse. */ font-size: var(--wp--preset--font-size--brodtekst-l); } /* * Bare lagretellingen står igjen i meta-raden. Tiden har ingen modifikatorklasse, så treffet er på * fraværet av `--lagringer` og ikke på en liste av det som skal bort. */ :root .is-style-enkel .ft-kort__meta-punkt:not(.ft-kort__meta-punkt--lagringer) { display: none; } /* * `kant`: ukearkivets paginering, prototypens `.ukemeny-pagination` (ukemeny.html) — firkantede * hvite bokser med kantstrek, mot standardens lyseblå piller fra oppskriftsarkivet. Prototypen * tegner de to arkivenes paginering ulikt, så `archive-ukemeny.html` velger denne stilen. * Hover-beigen er `lys-blaa` av samme grunn som `.ft-merke` i kort.css. */ :root .is-style-kant .ft-paginering__tall, :root .is-style-kant .ft-paginering__pil { min-width: 2.5rem; height: 2.5rem; border-color: rgb(0 0 0 / 12%); border-radius: var(--wp--custom--radius--kant); background: var(--wp--preset--color--hvit); font-weight: 600; } :root .is-style-kant a.ft-paginering__tall:hover, :root .is-style-kant a.ft-paginering__tall:focus-visible, :root .is-style-kant .ft-paginering__pil:hover, :root .is-style-kant .ft-paginering__pil:focus-visible { border-color: rgb(0 0 0 / 20%); background: var(--wp--preset--color--lys-blaa); } :root .is-style-kant .ft-paginering__tall.er-aktiv { border-color: var(--wp--preset--color--tekst); background: var(--wp--preset--color--tekst); color: var(--wp--preset--color--hvit); } :root .is-style-kant .ft-paginering__hopp { height: 2.5rem; } /* ────────────────────────── DELT KNAPP ────────────────────────── */ /* * Temaets ene knapp er kjernens `.wp-element-button`, og formen bor i theme.json * (`styles.elements.button`) slik at redigereren og fronten leser samme kilde. Her står bare det * theme.json ikke kan si: geometrien, løftet på hover og den mørke varianten `.ft-knapp--moerk`. * * Hver velger bærer `:root`. Kjernens egen knappregel er `:root :where(.wp-element-button, * .wp-block-button__link)`, og `:where()` teller null — en bar klasse står uavgjort og avgjøres av * lasterekkefølgen, som snur mellom en blokkmal og butikkens PHP-maler. */ :root .wp-element-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--wp--preset--spacing--xxxs); /* 2.5rem: prototypens 40px høyde — luften alene gir 38. */ min-block-size: 2.5rem; text-decoration: none; cursor: pointer; border: 0; transition: transform var(--wp--custom--overgang--rask) ease, filter var(--wp--custom--overgang--rask) ease; } :root .wp-element-button:hover, :root .wp-element-button:focus-visible { color: var(--wp--preset--color--hvit); /* 1px: optisk løft, ikke spacing — knappen skal så vidt bevege seg. */ transform: translateY(-1px); filter: brightness(1.08); } :root .ft-knapp--moerk { background: var(--wp--preset--color--tekst); } :root .ft-knapp--moerk:hover, :root .ft-knapp--moerk:focus-visible { background: var(--wp--preset--color--tekst-hover); } @media (prefers-reduced-motion: reduce) { :root .wp-element-button:hover, :root .wp-element-button:focus-visible { transform: none; } } /* ───────────────────────── HEADER-PART ────────────────────────── */ .ft-header { container-type: inline-size; container-name: ft-band; position: sticky; /* Negativ topp i toppbarens høyde: baren ruller ut av bildet, og bare headerraden står igjen. */ top: calc(-1 * var(--wp--custom--topbar-hoyde)); z-index: var(--wp--custom--lag--topp); background: color-mix(in srgb, var(--wp--preset--color--hvit) 92%, transparent); } /* * Headeren viker naar du ruller nedover og kommer tilbake naar du ruller opp. * * Det er `top` som flyttes, ikke `transform`. Et `transform` - eller `translate`, eller * `backdrop-filter` - ville gjort headeren til containing block for alt `fixed` under seg, og * mega-nav-skuffen er nettopp det: `position: fixed; inset-block: 0` inne i headeren. Da ville * `inset-block: 0` sluttet aa bety vinduet. Det er samme fella som er beskrevet over. * * Hoeyden kommer fra `header.js`, som maaler den og skriver den hit. Den kan ikke staa som et tall: * headerraden brytes i to paa smal skjerm, og toppstripa kan vaere borte. */ .ft-header { transition: top var(--wp--custom--overgang--myk) ease; } .ft-header.ft-header--skjult { top: calc(-1 * var(--ft-header-hoeyde, 12rem)); } /* Den som har bedt om mindre bevegelse skal ikke faa en header som glir. Den bare er der. */ @media (prefers-reduced-motion: reduce) { .ft-header { transition: none; } .ft-header.ft-header--skjult { top: calc(-1 * var(--wp--custom--topbar-hoyde)); } } /* * Uskarpheten bor på et pseudoelement og ikke på headeren selv: `backdrop-filter` gjør elementet til * containing block for alt `fixed` under seg, og mega-nav-skuffen er `fixed` inne i headeren. Med * filteret på headeren ble skuffens `top: 0` headerens topp og ikke viewportens. */ /* Soekestripa paa smal skjerm er absolutt plassert mot dette bandet. */ .ft-header__bar { position: relative; } .ft-header::before { content: ''; position: absolute; inset: 0; z-index: -1; /* 12px: blur-radius, en optisk effekt uten forhold til spacing-skalaen. */ backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .ft-topbar { font-size: var(--wp--preset--font-size--brodtekst-s); font-weight: 500; background: var(--wp--preset--color--hvit); border-block-end: var(--wp--custom--linje); /* Fast høyde, fordi headerens negative `top` må vite den. */ block-size: var(--wp--custom--topbar-hoyde); padding-block: 0; display: grid; align-content: center; overflow: hidden; } .ft-header__bar { /* * Luft over og under logolinja. * * Var 0 så lenge logoen var liten: `min-height: 5rem` på logoblokka ga rikelig med slark rundt * en 52px logo. Med 62px logo pluss undertittel fyller blokka de 5rem helt, og da sto merket * klint opp mot topplinja. Luften må derfor komme utenfra. */ /* * Bare over. Paa bred visning er navraden den siste linja i bandet, og den har sin egen * `padding-block` - bandets bunnpadding kom paa toppen av den og ga 16 px for mye under menyen, * maalt mot frutimian.no. Paa smal visning er navraden `display: contents` og finnes ikke som * boks; da er det bandet som maa gi lufta, og verdien settes tilbake i container-spoerringa. */ padding-block: var(--wp--preset--spacing--xs) 0; /* * Festet for de to tingene som på smal visning står utenfor radens flexlinje: den absolutt * sentrerte logoen, og søkelinja som felles ut under headeren. Bandet og ikke raden, fordi bandet * er like bredt som viewporten. */ position: relative; } /* * Headerraden er én flex-beholder med to linjer: `.ft-header__navrow` har `flex-basis: 100%` på bred * visning og `display: contents` på smal, som er det ene grepet som får barna opp på radens egen * linje uten å flytte noe i DOM-en. */ /* * Hver regel i headeren bærer `:root`. Rekkefølgen mellom `main.css` og blokkarkene snur mellom en * blokkmal og `fru-timian-shopify`s PHP-maler, så hver uavgjort på én klasse faller ut motsatt vei * på de to. */ :root .ft-header__row { column-gap: var(--wp--preset--spacing--s); /* * Lufta mellom logolinja og haarstreken over menyen. Var 0, med navradens `padding-block` som * eneste pust - men den paddingen ligger *innenfor* streken og gir luft under den, ikke over. * Logoen sto derfor tett paa linja. */ row-gap: var(--wp--preset--spacing--xs); } /* * Logoen er linjas høyeste element og bærer derfor logolinjas høyde. En `min-height` på raden ville * ikke gjort noe: raden er begge linjene. * * Kolonne og ikke rad: merkelogoen står over en liten undertittel som sier hvilken butikk dette er. */ :root .ft-header__logo { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-height: 5rem; text-decoration: none; color: var(--wp--preset--color--tekst); /* * 62px, mot 52px før. Logoen ble målt mot referansen og var for spinkel. * * Halvparten av økningen er gratis: `fru-timian-logo-tett.png` er den samme fila beskåret til * selve motivet. Originalen har 17 % luft bakt inn i pikslene (innholdet ligger i 76,52-1935,714 * av 2048x800), så ved samme boks-høyde tegnes tegningen 21 % større. Originalen ligger igjen * som `fru-timian-logo.png`. * * Taket er undertittelen: logo + undertittel må få plass i navradens 5rem. 62px gjør det så * vidt, og raden står derfor like høy som før. */ --ft-logo-hoyde: 62px; /* * Ordmerket «Fru Timian» starter 20,6 % inn i den beskårne fila - kvisten tar plassen før det. * Undertittelen må rykkes like langt inn for å stå under skriften og ikke under bladverket. * Regnestykket står her i stedet for et pikseltall, så innrykket følger med når logohøyden * endres på smal visning. */ --ft-logo-innrykk: calc(var(--ft-logo-hoyde) * (1860 / 663) * 0.206); } :root .ft-header__logo img { width: auto; height: var(--ft-logo-hoyde); } /* * Undertittelen står i displayskriften, som resten av sida. Amatic SC er en kapitélskrift — * små bokstaver tegnes som kapitéler — så den trenger ingen `text-transform`, og den må settes * et par grader større enn en tilsvarende brødtekstlinje for å bli like lesbar. */ :root .ft-header__undertittel { font-family: var(--wp--preset--font-family--display); /* * Et hakk ned fra tittel-m. Da «Fru Timians forhandlerbutikk» ble kortet til ett ord, ble * linja stående like bred og like tung som selve logoen - to ordmerker over hverandre i stedet * for et merke med en etikett under. Mindre grad og litt mer sperring gjør den underordnet. */ /* * Bundet til logohøyden framfor et fast trinn: undertittelen skal fylle omtrent samme bredde * som ordmerket over seg, og ordmerket skalerer med `--ft-logo-hoyde`. En fast `tittel-s` ville * blitt liggende igjen neste gang logoen endrer størrelse. * * 0.349: målt, ikke gjettet. Et skjermbilde av headeren ga ordmerket 276px og undertittelen * 258px ved samme skala - altså 6 % for kort - og venstrekantene sto allerede likt. Sperringen * er satt i `em`, så den skalerer med graden og hele linja vokser proporsjonalt. */ font-size: calc(var(--ft-logo-hoyde) * 0.349); font-weight: 700; line-height: 1.1; letter-spacing: 0.09em; color: var(--wp--preset--color--tekst-svak); margin-inline-start: var(--ft-logo-innrykk); } /* * `:root` foran velgeren: kjernens margin-nulling for barna av en flex-beholder er * `:root :where(.is-layout-flex) > :is(*, div)` — (0,1,1), fordi `:is()` teller sitt tyngste * argument og en type er med. En bar klasse taper uansett rekkefølge. */ :root .ft-header__actions { gap: var(--wp--preset--spacing--xs); margin-inline-start: auto; } /* * Navigasjonsraden er menyen og kontolenkene ytterst. Plasseringen bor her og ikke i blokkas eget * stilark: blokka emitterer innhold, parten bestemmer hvor det står. `flex-basis: 100%` er * linjeskiftet, og `:root` foran av samme grunn som actions over. */ :root .ft-header__navrow { flex-basis: 100%; gap: var(--wp--preset--spacing--s); padding-block: var(--wp--preset--spacing--xxxs); border-block-start: var(--wp--custom--linje); } /* * En rad uten innhold tar ingen plass. Spørsmålet går til radens barn og ikke til raden: raden er en * `core/group` med lagret markup, så `:empty` ville aldri slått til. */ .ft-header__navrow:not(:has(> *)) { display: none; } /* * Smal visning: prototypens ene rad, med logoen absolutt sentrert over den. Betingelsen gjentar * verdien literalt, fordi en `@container`-betingelse ikke kan lese en custom property. Søkefeltet * blir en ikonknapp, kontolenkene flytter til skuffens fot, og navradens hårstrek går med raden. */ @container ft-band (max-width: 48em) { :root .ft-header__row { flex-wrap: nowrap; /* 56px: logolinjas høyde på smal visning. */ min-height: 3.5rem; /* * 6px: avstanden mellom søkeikonet og vogna, en optisk verdi mellom to knapper. Den store luften * mot hamburgeren er søkeskallets `margin-inline-start: auto`. */ column-gap: 6px; } /* * Logoen sentreres på raden og ikke mellom knappene: en logo som fant midten mellom en hamburger * til venstre og to knapper til høyre ville stått for langt til venstre. */ :root .ft-header__logo { position: absolute; left: 50%; /* * Ett tall styrer midtstillinga. 0 % er geometrisk midte - boksen staar eksakt midt paa * raden. Hever du det, flyttes lockupen mot venstre, slik at oeyet midtstiller *ordmerket* * i stedet for bildet: kvisten opptar de foerste 20,6 % av fila (samme tall som * `--ft-logo-innrykk` bruker), saa full optisk kompensasjon er 10,3 %. Det ble for mye i * praksis - undertittelen trekker allerede tyngdepunktet mot hoeyre - saa vi staar paa 0 * og har tallet her om det skal finjusteres. */ --ft-logo-optisk: 0%; transform: translateX(calc(-50% - var(--ft-logo-optisk))); margin: 0; /* * Raden driver linjehøyden her, ikke logoen. En logoboks som beholdt høyden fra bred visning * ville stått utenfor en rad den er absolutt plassert i. */ min-height: 0; } :root .ft-header__logo { /* * 40px: logoens bildehøyde på smal visning. Forbildet ligger på 36px - målt mot vogna, som * er nøyaktig like stor i begge skjermbildene - men det er en logo uten undertittel. Våre * 40px gir «Forhandlerbutikk» 14px å stå på (0,349 av høyden), og under det begynner den å * bli en strek. Innrykket og undertittelens størrelse regner seg om selv. */ --ft-logo-hoyde: 40px; } /* * Navraden slutter å være en linje og blir sine egne barn. `display: contents` er hele * ombyggingen: hamburgeren står i mega-nav, som står i navraden. Hårstreken og paddingen * forsvinner med boksen, som er riktig — de hørte linja. */ :root .ft-header__navrow { display: contents; } /* Navraden er borte som boks her, saa bandet gir lufta under raden igjen. */ :root .ft-header__bar { padding-block: var(--wp--preset--spacing--xs); } :root .ft-header__actions { order: 3; /* Margen er søkeskallets nå; to auto-marger ville delt luften mellom dem. */ margin-inline-start: 0; } } /* ───────────── PRODUKTRADEN SOM KARUSELL PAA SMAL SKJERM ───────────── */ /* * Rammen og pilene lages av `assets/js/karusell.js`: produktlista er WooCommerce sin egen blokk, * saa vi eier ikke markupen inni - men vi kan legge noe rundt den. * * Paa bred visning er dette ingenting: rammen er en vanlig div, rutenettet er rutenettet, og * skriptet skjuler begge pilene fordi det ikke finnes noe aa rulle. */ .ft-karusell { position: relative; } .ft-karusell__pil { display: none; } @container ft-band (max-width: 48em) { /* * Woo regner sporbredden selv (se kommentaren over rutenettet), saa her overtar vi hele * layouten i stedet for aa pirke i den: raden er flex, og kortene faar sin egen bredde. * `:root .ft-band` maa til for aa veie tyngre enn Woos egen * `.wc-block-product-template__responsive.columns-3`. */ :root .ft-band .ft-karusell .wc-block-product-template { display: flex; gap: var(--wp--preset--spacing--m); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-inline: contain; } :root .ft-band .ft-karusell .wc-block-product-template::-webkit-scrollbar { display: none; } /* 72 %: kortet fyller skjermen, men neste kort titter fram og forteller at raden fortsetter. */ :root .ft-band .ft-karusell .wc-block-product { flex: 0 0 72%; scroll-snap-align: start; } :root .ft-karusell__pil { display: grid; place-items: center; position: absolute; /* 38 %: omtrent midt paa produktbildet, som paa forbildet - ikke midt paa hele kortet. */ top: 38%; z-index: 2; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--wp--custom--radius--rund); background: var(--wp--preset--color--hvit); box-shadow: var(--wp--custom--skygge--heving); color: var(--wp--preset--color--tekst); cursor: pointer; } /* Enden av raden: pila blir staaende, men tonet ned og uten skygge. */ :root .ft-karusell__pil:disabled { opacity: 0.35; box-shadow: none; cursor: default; } /* Halvveis utenfor raden, slik at de ikke spiser av kortet de staar over. */ :root .ft-karusell__pil--forrige { inset-inline-start: -14px; } :root .ft-karusell__pil--neste { inset-inline-end: -14px; } :root .ft-karusell__pil svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } } /* ───────────── TOPPSTRIPA SOM RULLER ───────────── */ /* * Loeftene ruller sidelengs paa smal skjerm, som paa forbildet. Mekanikken er to identiske rader * etter hverandre i ett spor: naar sporet har flyttet seg noeyaktig sin halve bredde, staar kopien * der originalen stod, og animasjonen kan begynne paa nytt uten at noen ser skjoeten. Kopien er * `aria-hidden`, saa en skjermleser leser loeftene én gang. * * Paa bred visning staar linja stille og midtstilt - der er det plass, og en tekst som beveger seg * uten grunn er bare stoey. Kopien skjules da. */ :root .ft-topbar .ft-topbar__spor { /* Bandet ville klemt sporet til bandbredden; stripa er full bredde. */ max-width: none; display: flex; justify-content: center; white-space: nowrap; } .ft-topbar__rad { display: flex; align-items: center; gap: var(--wp--preset--spacing--xs); } .ft-topbar__prikk { color: var(--wp--preset--color--tekst-svak); } .ft-topbar__rad--kopi { display: none; } @container ft-band (max-width: 48em) { :root .ft-topbar .ft-topbar__spor { justify-content: flex-start; width: max-content; animation: ft-topbar-rull 24s linear infinite; } .ft-topbar__rad--kopi { display: flex; } /* Fingeren paa stripa stopper den - samme hoeflighet som `:hover` gir en mus. */ .ft-topbar:hover .ft-topbar__spor, .ft-topbar:active .ft-topbar__spor { animation-play-state: paused; } } @keyframes ft-topbar-rull { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Tekst som beveger seg er nettopp det denne innstillingen finnes for. */ @media (prefers-reduced-motion: reduce) { :root .ft-topbar .ft-topbar__spor { animation: none; justify-content: center; width: auto; } .ft-topbar__rad--kopi { display: none; } } /* * Headeren er heldekkende paa smal skjerm - ingen gjennomsiktighet, ingen uskarphet. * * Grunnen er ikke bare smak: `backdrop-filter` paa en `position: sticky`-header er en kjent * kilde til at elementet ikke blir komponert mens man ruller. Layouten er riktig hele veien - * `elementFromPoint` midt i vinduet gir headerraden, og boksen ligger paa -36px som den skal - * men ingenting males. Forbildet har en heldekkende header, saa vi mister ingenting paa aa * droppe uskarpheten her. */ @media (max-width: 48em) { .ft-header { background: var(--wp--preset--color--hvit); } .ft-header::before { content: none; } } /* * Sida bak skuffa skal ikke kunne rulles. * * Laasen maa staa paa ``, og `` ligger *utenfor* bandet som er container - en * container-query kan bare style det som staar inni. Derfor en media-query paa samme brekkpunkt. * Skuffa selv ruller fortsatt: den er `position: fixed` med sin egen `overflow-y`. * * Brekkpunktet er med vilje: aapner man menyen paa en telefon og snur den til liggende slik at * raden blir bred, forsvinner hamburgeren - og da skal ikke sida bli staaende laast. */ @media (max-width: 48em) { html:has(.ft-menybryter[open]), html:has(.ft-menybryter[open]) body { overflow: hidden; } } /* ───────────── MOBILMENY OG SØKEBRYTER ───────────── */ /* * To brytere i logoraden, begge `
` uten en linje JavaScript. Hele mekanikken er at * nettleseren selv holder av- og på-tilstanden i `open`, og `:has()` lar resten av headeren lese * den: `.ft-header__bar:has(.ft-menybryter[open])` er «skuffen er ute». Det gir tastatur, * skjermleser og bakoverknapp gratis, og det virker om et skript skulle feile. * * På bred visning finnes ingen av dem: menyen er navraden, søket er feltet. */ .ft-menybryter, .ft-sokbryter, .ft-mobilmeny__tittel { display: none; } @container ft-band (max-width: 48em) { .ft-menybryter, .ft-sokbryter { display: block; } /* Trekanten kjernen tegner foran en `` skal bort - knappen er ikonet. */ .ft-menybryter__knapp, .ft-sokbryter__knapp { display: grid; place-items: center; /* 44px: minste trygge trykkflate. */ width: 44px; height: 44px; cursor: pointer; list-style: none; } .ft-menybryter__knapp::-webkit-details-marker, .ft-sokbryter__knapp::-webkit-details-marker { display: none; } /* * Hamburgeren er tre streker av samme element: midtstreken er spanet, de to andre er * `::before`/`::after`. Strekene er *absolutt* plassert, ikke i flyt: i flyt flyttet de seg * naar hoeyden endret seg, og krysset ble staaende en halv piksel fra hverandre - synlig som * en skjev X. Naa maales begge fra samme kant, og `top: 0` i aapen tilstand legger dem * noeyaktig oppaa hverandre. */ .ft-menybryter__ikon { position: relative; display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--wp--preset--color--tekst); transition: background var(--wp--custom--overgang--rask) ease; } .ft-menybryter__ikon::before, .ft-menybryter__ikon::after { content: ""; position: absolute; inset-inline: 0; height: 2px; border-radius: 2px; background: var(--wp--preset--color--tekst); transition: top var(--wp--custom--overgang--rask) ease, transform var(--wp--custom--overgang--myk) ease; } .ft-menybryter__ikon::before { top: -7px; } .ft-menybryter__ikon::after { top: 7px; } /* * Krysset er en egen SVG, ikke hamburgerens streker rotert. * * Roterte streker gir firkantede ender og et kryss som er bredere enn det er hoeyt; forbildet * tegner et ekte kryss paa 18x18 med runde ender, og forskjellen syntes. Prisen er at * hamburgeren ikke lenger folder seg om til et kryss - de to ikonene bytter plass i stedet. */ .ft-menybryter__kryss { display: none; width: 18px; height: 18px; fill: none; stroke: var(--wp--preset--color--tekst); stroke-width: 2; stroke-linecap: round; } .ft-menybryter[open] .ft-menybryter__ikon { display: none; } .ft-menybryter[open] .ft-menybryter__kryss { display: block; } .ft-menybryter { /* Foran logoen i raden. */ order: -1; } /* * Søkeikonet og vogna hører sammen ytterst til høyre. Marginen sitter på søkebryteren, som er * den første av de to: den dytter seg selv og alt etter den mot kanten. Den gamle regelen la * `margin-inline-start: 0` på handlingene fordi søkeskallet eide marginen den gang feltet stod * i raden - nå er feltet en stripe under raden, og skallet er et ikon. */ :root .ft-sokbryter { margin-inline-start: auto; } /* * Åpen skuff: bryteren flytter seg inn i skuffa og blir krysset oppe til høyre, slik forbildet * gjør det. Den er fortsatt det samme elementet - et kryss et annet sted i DOM-en ville krevd * enten JavaScript eller en avkrysningsboks i stedet for `
`. */ .ft-menybryter[open] .ft-menybryter__knapp { position: fixed; z-index: 1002; top: 8px; inset-inline-start: calc(min(82vw, 26rem) - 52px); } .ft-sokbryter__ikon { width: 22px; height: 22px; fill: none; stroke: var(--wp--preset--color--tekst); stroke-width: 2; stroke-linecap: round; } /* ── Søkefeltet ── */ /* * Feltet ligger i raden hele tiden; det er bare synligheten som henger på bryteren. Stripa * legger seg under raden og bryter ut av bandets sidepadding, så den går fra kant til kant som * på forbildet. */ :root .ft-header .ft-search { display: none; } /* * Stripa ligger under raden og gaar fra kant til kant. `inset-inline: 0` og ikke et negativt * innrykk: et absolutt plassert barn maales fra forelderens *padding-kant*, og bandets * padding-kant ligger allerede paa vindusk*anten* - et negativt tall dyttet derfor hele stripa * ut av skjermen, og den gule knappen ble staaende halvveis utenfor. */ :root .ft-header__bar:has(.ft-sokbryter[open]) .ft-search { display: block; position: absolute; top: 100%; inset-inline: 0; z-index: 1001; margin: 0; padding: var(--wp--preset--spacing--xs) var(--wp--custom--sideinnrykk); background: var(--wp--preset--color--lys-blaa); } /* * Inne i stripa er pilla snudd vrangen ut: paa bred visning er skallet den lyseblaa flata med * knappen inni, her *er* flata stripa. Skallet blir gjennomsiktig, knappen en egen sirkel, og * selve feltet den hvite pilla - slik forbildet har det. */ :root .ft-header__bar:has(.ft-sokbryter[open]) .wp-block-search__inside-wrapper { gap: var(--wp--preset--spacing--xs); min-height: 0; padding: 0; background: none; border-radius: 0; } :root .ft-header__bar:has(.ft-sokbryter[open]) .wp-block-search__button { /* 40px: forbildet ligger paa 35, men dette er en trykkflate og ikke en museknapp. */ width: 40px; height: 40px; } :root .ft-header__bar:has(.ft-sokbryter[open]) .wp-block-search__button svg { width: 20px; height: 20px; } :root .ft-header__bar:has(.ft-sokbryter[open]) .wp-block-search__input { min-height: 40px; padding-inline: var(--wp--preset--spacing--s); background: var(--wp--preset--color--hvit); border-radius: var(--wp--custom--radius--pille); font-size: var(--wp--preset--font-size--brodtekst-s); } :root .ft-header__bar:has(.ft-sokbryter[open]) .wp-block-search__input::placeholder { color: var(--wp--preset--color--tekst-svak); opacity: 1; } /* * Fokusringen hoerer til feltet, ikke til hele skallet. Paa bred visning er skallet pilla, og * da er ringen rundt skallet riktig; her er pilla selve feltet, og en ring rundt skallet la seg * som en firkant rundt baade knappen og feltet. `outline` foelger `border-radius`, saa den * runder seg etter pilla av seg selv. */ :root .ft-header__bar:has(.ft-sokbryter[open]) .wp-block-search__inside-wrapper:has(.wp-block-search__input:focus-visible) { outline: none; } :root .ft-header__bar:has(.ft-sokbryter[open]) .wp-block-search__input:focus-visible { outline: 2px solid var(--wp--preset--color--gul); outline-offset: 2px; } /* ── Skuffen ── */ .ft-mobilmeny__tittel { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--display-s); line-height: 1; } /* * Navraden er `display: contents` her fra før, så menypunktene faller rett ned i * headerbandet og ble stående oppå logoen. Fra nå bor de i skuffa: skjult til bryteren * er på. Kontolenkene er allerede skjult lenger oppe, og slås på igjen samme sted. */ :root .ft-header .ft-nav { display: none; } :root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav { display: block; } :root .ft-header__bar:has(.ft-menybryter[open]) .ft-konto { display: flex; } :root .ft-header__bar:has(.ft-menybryter[open]) .ft-header__navrow { display: flex; flex-direction: column; align-items: stretch; /* * Navraden er en flex-gruppe, og kjernen gir flex-oppsett en `gap` som standard. Den la * seg mellom «Meny»-linja og foerste menypunkt, og mellom punktene og kontoknappene - luft * ingen hadde bedt om. Her eier hårstrekene og paddinga avstandene. */ gap: 0; position: fixed; z-index: 1001; /* * Full hoeyde, som paa forbildet: kontoknappene hoerer hjemme nederst paa skjermen, ikke * rett under siste menypunkt. `dvh` og ikke `vh`, saa den foelger vinduet naar * nettleserlinja paa mobil gaar inn og ut. */ inset-block: 0; block-size: 100dvh; inset-inline-start: 0; width: min(82vw, 26rem); overflow-y: auto; padding: 0; background: var(--wp--preset--color--hvit); } /* * Moerklegginga. Den laa foerst som `::before` paa panelet med `z-index: -1`, og da ble hele * skuffa graa: et barn med negativ z-index males over forelderens *bakgrunn*, bare under * innholdet hennes. Teppet hoerer derfor til bandet og males for seg, ett lag under panelet. */ :root .ft-header__bar:has(.ft-menybryter[open])::after { content: ""; position: fixed; inset: 0; z-index: 1000; background: rgb(0 0 0 / 35%); } /* * «Meny»-linja blir staaende naar lista ruller under den. `sticky` og ikke `fixed`: den er et * barn av skuffa som ruller, saa den skal feste seg i *den* boksen - ikke i vinduet. Hvit * bakgrunn og et lag over, ellers skinner punktene gjennom mens de passerer. */ :root .ft-header__bar:has(.ft-menybryter[open]) .ft-mobilmeny__tittel { display: block; position: sticky; top: 0; z-index: 1; padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m); background: var(--wp--preset--color--hvit); border-block-end: var(--wp--custom--linje); } /* Punktene blir en liste med hårstreker mellom seg, ikke en rad. */ :root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__rad { flex-direction: column; align-items: stretch; gap: 0; overflow: visible; } :root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__punkt { display: block; border-block-end: var(--wp--custom--linje); } /* `xs` og ikke `s`: radene laa omtrent 11 % hoeyere enn forbildets, maalt mellom to punkter. */ :root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__lenke { flex: 1; padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--m); font-size: var(--wp--preset--font-size--brodtekst); } /* ── Trekkspillet ── */ /* * Her betyr `
` det den ser ut som: punktet aapner seg. Lenka inni sammendraget skal * *ikke* navigere paa trykk - da ville «Produkter» sendt deg av garde i stedet for aa vise * kategoriene - saa den slaas av for musa og fingeren, mens tastaturet fortsatt naar den. */ :root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__sammendrag { justify-content: space-between; padding-inline-end: var(--wp--preset--spacing--m); } :root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__sammendrag .ft-nav__lenke { pointer-events: none; } :root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__pil { width: 14px; height: 8px; flex-shrink: 0; } :root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__gruppe[open] .ft-nav__pil { transform: rotate(180deg); } /* * I skuffa er det `[open]` som bestemmer - ingenting annet. * * Reglene for bred visning aapner panelet paa `:hover` og `:focus-within`, og et trykk paa * raden etterlater fokus paa sammendraget. Panelet ble derfor staaende aapent etter at * trekkspillet var lukket igjen, absolutt plassert, halvveis utenfor skuffa. Denne regelen * veier tyngre enn begge to og nuller dem her inne; `static` gjoer at det som faktisk vises * skyver punktene under seg i stedet for aa legge seg oppaa dem. */ :root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__panel { display: none; position: static; } /* Panelet slutter aa vaere et panel og blir en liste under punktet. */ :root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__gruppe[open] + .ft-nav__panel { display: block; position: static; padding: 0; } :root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__panel-innhold { display: block; border-radius: 0; box-shadow: none; background: var(--wp--preset--color--lys-blaa); } :root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__celle { padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--m); border-inline-end: 0; } :root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__celle--kolonne { min-inline-size: 0; } /* * Reklamekortet blir liggende, men legger seg ned: bildet til venstre i 72px, teksten ved * siden av. Staaende, slik det er i det brede panelet, ville det tatt en halv telefonskjerm * og dyttet menypunktene ut av syne - og et menypunkt man maa rulle for aa finne er et * menypunkt som ikke finnes. */ :root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__celle--kort { inline-size: auto; padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m); border-block-start: var(--wp--custom--linje); } :root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__kort { display: grid; grid-template-columns: 72px 1fr; column-gap: var(--wp--preset--spacing--s); row-gap: 2px; align-items: center; } :root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__kort-bilde { grid-column: 1; grid-row: 1 / span 3; margin-block-end: 0; } :root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__kort-tittel { font-size: var(--wp--preset--font-size--tittel-m); } :root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__kort-lenke { margin-block-start: 0; } /* * `.ft-konto` har `margin-inline-start: auto` fra navraden, der den dytter lenkene ytterst til * hoeyre. I skuffa er raden en kolonne, og den samme margen gjorde blokka smal og hoeyrestilt - * knappene ble staaende midt i ingenting. Her nulles den, saa de fyller bredden. */ :root .ft-header__bar:has(.ft-menybryter[open]) .ft-header__navrow > .ft-konto { margin-inline-start: 0; } /* Kontolenkene er knapper nederst, som på forbildet. `auto` dytter dem til bunnen. */ :root .ft-header__bar:has(.ft-menybryter[open]) .ft-konto { flex-direction: column; align-items: stretch; gap: var(--wp--preset--spacing--xxs); margin-block-start: auto; padding: var(--wp--preset--spacing--m); border-block-start: var(--wp--custom--linje); } :root .ft-header__bar:has(.ft-menybryter[open]) .ft-konto__skille { display: none; } :root .ft-header__bar:has(.ft-menybryter[open]) .ft-konto__lenke { padding: var(--wp--preset--spacing--xs); border-radius: var(--wp--custom--radius--kant); background: var(--wp--preset--color--lys-blaa); font-weight: 600; text-align: center; } /* Den første er hovedhandlinga: gul, som knappen i forbildet. */ :root .ft-header__bar:has(.ft-menybryter[open]) .ft-konto__lenke:first-child { background: var(--wp--preset--color--gul); color: var(--wp--preset--color--hvit); } } /* ───────────────────────── FOOTER-PART ────────────────────────── */ /* * Bare bandene. Alt som står inne i dem er blokker med sin egen style.scss; reglene under er det * parten selv eier: bakgrunn, hårstrek, padding-block og rutenettet kolonnene står i. */ .ft-footer { background: var(--wp--preset--color--hvit); } .ft-footer__cta { background: var(--wp--preset--color--lys-blaa); padding-block: var(--wp--preset--spacing--xxl); text-align: center; } .ft-footer__trust { border-block: var(--wp--custom--linje); padding-block: var(--wp--preset--spacing--s); } .ft-footer__main { padding-block: var(--wp--preset--spacing--xxl); } .ft-footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--wp--preset--spacing--l); } /* Samme unntak som på oppskriftssiden: rutenettet eier luften, ikke gruppenes `blockGap`. */ .ft-footer__grid.is-layout-flow > * { margin-block-start: 0; } .ft-footer__bottom { border-block-start: var(--wp--custom--linje); padding-block: var(--wp--preset--spacing--xs); color: var(--wp--preset--color--tekst-svak); } /* * Kolonnene stables når footeren er smal. Trygghetsradens eget brekk står i blokkas style.scss. */ @container ft-band (max-width: 48em) { .ft-footer__grid { grid-template-columns: 1fr; } } /* ───────────── PROSASIDENE SLIK DE SER UT I SIDEREDIGEREREN ───────────── */ /* * Redigereren rendrer sidas innhold *uten* malen rundt seg: det finnes ingen * `.ft-band.is-style-prosa` der inne, bare post-content som rotbeholder. Alt som henger paa den * wrapperen - de lyseblaa panelene, den fete aapningslinja, bildene som bryter ut - forsvant * derfor i redigereren, og kunden satt og skrev i noe som ikke lignet sida hun lagde. * * Reglene er med vilje gjentatt her i stedet for aa legges til som et ekstra ledd i * front-reglene: de to lister paa prosasida veier like mye og avgjoeres av rekkefoelge (se * bilderegelen lenger oppe), og aa endre vekten deres for aa spare noen linjer er ikke verdt * risikoen. Endrer du noe her, endre samme sted der oppe. * * `.is-root-container` finnes bare i redigereren, saa ingenting av dette naar fronten. * Listeregelen er dessuten formstyrt (`:has(> li > strong:first-child)`) - den slaar bare inn paa * nettopp de listene som ogsaa blir paneler ute paa sida - og bildet maa vaere et *direkte* barn, * saa bilder inne i baandene paa forsida staar urort. */ .wp-block-post-content.is-root-container .wp-block-list:has(> li > strong:first-child) { margin-block: var(--wp--preset--spacing--l); padding: var(--wp--preset--spacing--m); background: var(--wp--preset--color--lys-blaa); border-radius: var(--wp--custom--radius--kant); list-style: none; } .wp-block-post-content.is-root-container .wp-block-list:has(> li > strong:first-child) > li + li { margin-block-start: var(--wp--preset--spacing--m); padding-block-start: var(--wp--preset--spacing--m); border-block-start: 1px solid rgba(26, 26, 26, 0.12); } .wp-block-post-content.is-root-container .wp-block-list > li > strong:first-child { display: block; margin-block-end: var(--wp--preset--spacing--xxxs); font-size: var(--wp--preset--font-size--brodtekst-l); line-height: 1.35; } /* * Bildet bryter ut til bandbredden, som ute paa sida. `100cqw`/`100vw` er ikke riktig maal her - * lerretet i redigereren er smalere enn vinduet - saa bredden tas av beholderen selv. */ .wp-block-post-content.is-root-container > .wp-block-image { width: min(var(--wp--custom--bandbredde), 100%); max-width: none; margin-block: var(--wp--preset--spacing--xl); margin-inline: auto; } .wp-block-post-content.is-root-container > .wp-block-image img { width: 100%; height: auto; border-radius: var(--wp--custom--radius--kant); } /* ───────────────────────── WOOCOMMERCE ────────────────────────── */ /* * Butikken arver typografien fra tokens. Handlekurv og kasse er fortsatt kortkodene * `[woocommerce_cart]` / `[woocommerce_checkout]`, saa markupen er WooCommerce sin klassiske - * det er den Checkout Field Editor Pro og Side Cart henger paa. */ .woocommerce table.shop_table, .woocommerce-checkout .woocommerce, .woocommerce-cart .woocommerce { font-size: var(--wp--preset--font-size--brodtekst); } /* Priser er tall i en kolonne: detaljskriften med tabulaere siffer holder dem i flukt. */ .woocommerce .price, .woocommerce-Price-amount { font-family: var(--wp--preset--font-family--detalj); font-variant-numeric: tabular-nums; } /* * Woo sin butikkmelding staar i pluginets egen lilla. Den er ikke en merkevarefarge, * saa den byttes her framfor aa vente paa at noen finner innstillingen. */ /* * Butikkmeldinga skal ligge fast nederst i vinduet. * * WooCommerce sier den to steder. `woocommerce.css` (den klassiske) setter * `position: absolute; top: 0`. `woocommerce-blocktheme.css`, som lastes fordi dette er et * blokktema, setter `bottom: 0; position: fixed; top: auto !important`. Bare `top` er viktig- * merket, så `absolute` fra det klassiske arket overlever — og et absolutt plassert element med * `bottom: 0` måles mot den initiale blokken, altså nøyaktig én vindushøyde ned i dokumentet. * Derav en stripe som står midt på sida og ruller med innholdet. * * `:root` foran velgeren for å slå begge uansett lasterekkefølge. */ :root .woocommerce-store-notice, :root p.demo_store { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: 100%; margin: 0; padding-block: var(--wp--preset--spacing--xxs); background: var(--wp--preset--color--gul); color: var(--wp--preset--color--hvit); font-family: var(--wp--preset--font-family--detalj); font-size: var(--wp--preset--font-size--kicker); text-align: center; box-shadow: 0 -1px 1em rgba(0, 0, 0, 0.15); z-index: var(--wp--custom--lag--panel); } :root .woocommerce-store-notice a, :root p.demo_store a { color: var(--wp--preset--color--hvit); text-decoration: underline; } /* Produktrutenettet foelger bandets container, ikke viewporten. */ .woocommerce ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--wp--custom--kort--smal), 1fr)); gap: var(--wp--preset--spacing--l); margin: 0; } .woocommerce ul.products::before, .woocommerce ul.products::after { content: none; } .woocommerce ul.products li.product { width: auto; margin: 0; float: none; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--tittel-m); line-height: 1.3; } /* ────────────────────────── SKIP LINK ─────────────────────────── */ .skip-link:focus { position: fixed; top: var(--wp--preset--spacing--xs); left: var(--wp--preset--spacing--xs); z-index: var(--wp--custom--lag--modal); padding: var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--m); background: var(--wp--preset--color--hvit); color: var(--wp--preset--color--tekst); border-radius: var(--wp--custom--radius--kant); box-shadow: var(--wp--custom--skygge--heving); } /* ───────────────────────── BANDENES GRAMMATIKK ─────────────────── */ /* * Portert fra fru-timian. Hvert band på forsiden følger samme oppbygning: en liten kicker, * en Amatic-tittel, eventuelt en ingress — så innholdet. Det er denne rytmen som gjør at de * to sidene kjennes like, mer enn fargene gjør. */ /* * Seksjonsoverskriften er midtstilt. Klassen og ikke `:first-child` på bandet: den skiller * «en overskrift over et forsideband» fra «en overskrift», og arkivmalenes bandoverskrifter * er ikke midtstilte. */ :root .ft-bandtittel { margin-block: 0 var(--wp--preset--spacing--xl); text-align: center; } /* Egen klasse, siden det er et valg om et band har en linje under overskriften. */ :root .ft-bandtittel:has( + .ft-seksjonsingress ) { margin-block-end: var(--wp--preset--spacing--xs); } :root .ft-seksjonsingress { max-width: 44rem; /* 44rem: målt kolonne for overskrift og ingress. */ margin-block: 0 var(--wp--preset--spacing--xl); margin-inline: auto; font-size: var(--wp--preset--font-size--brodtekst-l); line-height: 1.35; text-align: center; color: var(--wp--preset--color--tekst-svak); } /* Den lille linja over en bandoverskrift: Inter Tight, versaler, gul. */ :root .ft-bandkicker, :root .is-style-kicker { font-family: var(--wp--preset--font-family--detalj); font-size: var(--wp--preset--font-size--kicker); font-weight: 600; line-height: 1.3; color: var(--wp--preset--color--gul); text-transform: uppercase; letter-spacing: 0.1em; } /* * Bandkickeren er den samme linja midtstilt over en bandoverskrift; blokkstilen `kicker` er den * venstrestilt i en bilde-og-tekst-rad. Typografien deles, plasseringen ikke. */ :root .ft-bandkicker { margin-block: 0 var(--wp--preset--spacing--xxs); text-align: center; } /* * Annenhver seksjon står på lys blå. På fru-timian het hver flate sitt eget bandnavn; her er det * én modifikator, fordi bandene på en forhandlerforside ikke er de samme ni. */ .ft-band--tint { background: var(--wp--preset--color--lys-blaa); } /* * Lufta rundt en tintet flate staar i BAND OG RYTME, sammen med nullingen den maa slaa - og den * gjelder ogsaa band som har faatt farge fra «Bakgrunn -> Farge» i redigereren. Her bor bare * fargen. */ /* ──────────────────────────── HERO ─────────────────────────────── */ /* * Portert fra fru-timian/hero-campaign + hero-slide, uten karusellen: ett bilde i full bredde * med en gul boks som ligger oppå. Piltastene og lysbildelogikken hørte blokka til. */ .ft-hero { position: relative; overflow: hidden; background: var(--wp--preset--color--lys-blaa); container-type: inline-size; container-name: ft-media; } /* * `:root`-prefikset her handler om Nettstedredigereren, ikke om forsiden. * * Redigereren legger `position: relative` på hvert blokk-element i lerretet for * å kunne tegne markeringsramme og verktøylinje rundt det. Den regelen har * samme vekt som en naken klasse, og slo derfor ut plasseringen vår: bildet og * den gule boksen falt ut av overlegget og la seg etter hverandre i flyten. * Prefikset gir oss ett hakk mer vekt. På forsiden endrer det ingenting. */ :root .ft-hero__lysbilde { position: relative; aspect-ratio: 21 / 7; min-height: 26rem; } :root .ft-hero__bakgrunn { position: absolute; inset: 0; margin: 0; } .ft-hero__bakgrunn img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } :root .ft-hero__innhold { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; max-width: calc(var(--wp--custom--bandbredde) + var(--wp--custom--sideinnrykk) * 2); margin-inline: auto; padding-inline: var(--wp--custom--sideinnrykk); pointer-events: none; } .ft-hero__boks { display: flex; flex-direction: column; align-items: flex-start; width: min(100%, 27.5rem); padding: var(--wp--preset--spacing--l) var(--wp--preset--spacing--xl); background: var(--wp--preset--color--gul); color: var(--wp--preset--color--hvit); border-radius: var(--wp--custom--radius--kant); box-shadow: var(--wp--custom--skygge--heving); pointer-events: auto; } .ft-hero__boks > * { margin-block: 0; } .ft-hero__boks .ft-hero__kicker, .ft-hero__boks .ft-hero__tittel, .ft-hero__boks .ft-hero__ingress { color: inherit; } .ft-hero__boks .ft-hero__kicker { margin-block-end: var(--wp--preset--spacing--xxs); font-family: var(--wp--preset--font-family--detalj); font-size: var(--wp--preset--font-size--kicker); font-weight: 600; line-height: 1.3; letter-spacing: 0.125em; text-transform: uppercase; } .ft-hero__boks .ft-hero__tittel { margin-block: 0 var(--wp--preset--spacing--xxs); line-height: 0.92; } .ft-hero__boks .ft-hero__ingress { font-size: var(--wp--preset--font-size--brodtekst); line-height: 1.5; } .ft-hero__boks .wp-block-buttons { margin-block: var(--wp--preset--spacing--m) 0; } /* Heroens knapp er hvit, pilleformet og i displayskriften — ikke temaets gule standardknapp. */ :root .ft-hero__boks .ft-hero__cta .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; padding: 0.6em 1.6em; background: var(--wp--preset--color--hvit); color: var(--wp--preset--color--tekst); border-radius: var(--wp--custom--radius--pille); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--tittel-m); font-weight: 700; line-height: 1; letter-spacing: 0.05em; text-transform: uppercase; } :root .ft-hero__boks .ft-hero__cta .wp-block-button__link::after { content: "→"; font-family: var(--wp--preset--font-family--detalj); font-weight: 600; } :root .ft-hero__boks .ft-hero__cta .wp-block-button__link:hover, :root .ft-hero__boks .ft-hero__cta .wp-block-button__link:focus-visible { color: var(--wp--preset--color--tekst); transform: translateX(2px); filter: none; } /* * Merk `:root` foran hver regel her. En container-query gir *ingen* spesifisitet - den avgjoer bare * om regelen gjelder, ikke hvor tungt den veier. Grunnreglene over er skrevet `:root .ft-hero__...` * (0,2,0), og disse stod som `.ft-hero__...` (0,1,0): de tapte, stille, uansett skjermbredde. * * Det var ikke synlig som «feil brekkpunkt», men som et hero som stakk 1248px ut paa en 390px * skjerm - `min-height: 26rem` ganget opp med forholdstallet 21/7 fra bredvisninga, fordi * forholdstallet aldri ble byttet. Derfor nulles ogsaa `min-height` her: den hoeyden hoerer til et * band som er bredere enn det er hoeyt. */ @container ft-media (max-width: 56em) { :root .ft-hero__lysbilde { aspect-ratio: 4 / 5; min-height: 0; } :root .ft-hero__innhold { align-items: flex-start; padding-block-start: var(--wp--preset--spacing--xl); } :root .ft-hero__boks { width: 100%; padding: var(--wp--preset--spacing--m); } } @container ft-media (max-width: 40em) { :root .ft-hero__lysbilde { aspect-ratio: 5 / 6; } } /* ── Produktsida paa smal skjerm ── */ @container ft-band (max-width: 48em) { /* * Produktarkivet staar i to spalter paa telefon, slik forbildet gjoer. Woo regner spaltene * selv og lander paa én; her overtar vi, og `minmax(0, 1fr)` hindrer at et langt produktnavn * gjoer spalta bredere enn halve skjermen. */ :root .ft-band--arkiv .wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--m); } /* * Bildet skal begynne rett under broedsmulene. Bandet arver `padding-block: xxl`, og selv om * naboregelen nuller toppen naar to band foelger hverandre, sitter det igjen luft fra * varselsboksen WooCommerce skriver ut tom. */ :root .ft-produkt { padding-block-start: var(--wp--preset--spacing--m); } } /* En tom varselsboks skal ikke ta hoeyde - den skriver WooCommerce ut paa hver produktside. */ :root .ft-produkt .woocommerce-notices-wrapper:empty { display: none; } :root .ft-produkt .ft-produkt__rad { margin-block-start: 0; } /* ──────────────────── KATEGORIER OG INFO ───────────────────────── */ /* * fru-timian har kategoriene i en JS-drevet scroller. Her er det et rutenett: en forhandler * ser hele sortimentet på én gang framfor å bla. Kortets utseende er det samme. */ .ft-kategorier { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--wp--preset--spacing--s); } .ft-kategori { display: block; text-align: center; text-decoration: none; color: var(--wp--preset--color--tekst); transition: transform var(--wp--custom--overgang--myk) ease; } .ft-kategori:hover, .ft-kategori:focus-visible { transform: translateY(-3px); color: var(--wp--preset--color--tekst); } .ft-kategori__flate { aspect-ratio: 1; overflow: hidden; margin: 0 0 var(--wp--preset--spacing--xxs); background: var(--wp--preset--color--hvit); border-radius: var(--wp--custom--radius--kant); } .ft-kategori__flate img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--wp--custom--overgang--myk) ease; } .ft-kategori:hover .ft-kategori__flate img, .ft-kategori:focus-visible .ft-kategori__flate img { transform: scale(1.06); } .ft-kategori__etikett { display: block; font-size: var(--wp--preset--font-size--brodtekst-s); font-weight: 600; line-height: 1.3; overflow-wrap: break-word; } /* * Infobandet er forhandlersidens svar på kundeanmeldelsene: frakt, betalingsfrist og henting. * Tre kolonner, samme kortform som kategoriene. */ .ft-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--wp--preset--spacing--l); text-align: center; } /* * Samme unntak som footerens rutenett: `.ft-info` er et grid, men gruppa er fortsatt en * `is-layout-flow`-beholder, så kjernen gir hvert barn etter det første en `margin-block-start` * lik gruppas `blockGap`. I en flow-kolonne er det luft mellom avsnitt; i et grid dytter det * kolonne to og tre nedover mens kolonne én blir stående — nøyaktig det som så ut som feil * innretting. Rutenettet eier luften, `gap` er den. * * To klasser, ellers står regelen uavgjort mot kjernens `.wp-container-... > * + *` og avgjøres * av lasterekkefølgen. */ .ft-info.is-layout-flow > * { margin-block-start: 0; } .ft-info__punkt > * { margin-block: 0; } /* * Ikonet over tallet. Samme Feather-sett og samme maske-teknikk som tillitsstripa i footeren, saa * de tre punktene her og de fem der leser som ett spraak - og de tre motivene gaar igjen: bil, * faktura, kartnaal. * * `::before` og ikke et bilde i markupen: da foelger ikonet klassen, og kunden kan flytte eller * duplisere et punkt i editoren uten aa maatte laste opp noe. */ .ft-info__punkt::before { content: ""; display: block; width: 36px; height: 36px; margin-inline: auto; margin-block-end: var(--wp--preset--spacing--xs); background: var(--wp--preset--color--tekst); -webkit-mask: var(--ft-infoikon) center / contain no-repeat; mask: var(--ft-infoikon) center / contain no-repeat; } .ft-info__punkt--frakt { --ft-infoikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E"); } .ft-info__punkt--faktura { --ft-infoikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E"); } .ft-info__punkt--henting { --ft-infoikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); } /* * Bandet er svart tekst, ikke gult. Gul tekst paa den lyse blaaflata er det svakeste * kontrastforholdet paa sida - merkegulen #E09900 lander paa 2,2:1 mot #EAF8FB, under WCAGs 3:1 * selv for stor tekst - og en moerk nok gul (#996700, 4,5:1) ble for mye farge. Tallene, kickeren * og ikonene foelger derfor overskrifta. Merkegulen blir staaende paa fyll og flater. */ .ft-info__tall { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--display-s); font-weight: 700; line-height: 1; color: var(--wp--preset--color--tekst); } /* Kickeren staar i samme band og maa foelge tallene. */ .ft-band:has(.ft-info) .ft-bandkicker { color: var(--wp--preset--color--tekst); } .ft-info__tittel { margin-block: var(--wp--preset--spacing--xxs) 0; font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--tittel-m); font-weight: 700; line-height: 1.3; } .ft-info__tekst { margin-block-start: var(--wp--preset--spacing--xxxs); font-size: var(--wp--preset--font-size--brodtekst-s); color: var(--wp--preset--color--tekst-svak); } /* ─────────────── TILLITSSTRIPA I FOOTEREN ────────────────── */ /* * Raden med fem løfter over footeren, etter mønster fra referansen. * * Innholdet er *ikke* kopiert derfra: forbrukersidas «30 dagers retur» er angrerett, som ikke * gjelder mellom næringsdrivende, og «Gratis frakt over 649,-» er en annen terskel enn vår. Hvert * punkt her er en opplysning butikken allerede oppgir et annet sted. * * `auto-fit` med et minstemål: fem i bredden på skjerm, og den brekker selv når det blir trangt - * ingen egen regel for smal visning. */ /* * Bandet er bare bakgrunn, luft og haarstrek - den skal ligge i hele vindusbredden, som paa * forbrukersida. */ :root .ft-tillit { padding-block: var(--wp--preset--spacing--s); border-block-end: var(--wp--custom--linje); } /* * Raden er en helt vanlig `constrained`-datter, akkurat som `.ft-footer__grid` ett band lenger * ned. Da er det kjernens egen layoutregel som maaler begge to, og de staar i flukt uten at vi * regner bredden ut paa nytt her - et forsoek paa aa gjenskape geometrien med `padding-inline` * traff ikke samme kant. */ :root .ft-tillit__spor { display: flex; } :root .ft-tillit__rad { display: flex; flex: 1 0 100%; flex-wrap: wrap; justify-content: space-between; gap: var(--wp--preset--spacing--s) var(--wp--preset--spacing--xs); } /* * Kopien finnes bare for rullinga paa smal skjerm. * * `:root` maa staa her. Uten den var regelen (0,1,0) mens `:root .ft-tillit__rad` rett over er * (0,2,0) - og kopien treffes av begge. Den tapte, sto som `display: flex`, og footeren viste * alle fem loeftene to ganger paa bred skjerm. */ :root .ft-tillit__rad--kopi { display: none; } /* * Paa smal skjerm ruller stripa sidelengs, som toppstripa og som forbildet. Samme mekanikk: to * like rader i ett spor, sporet flyttes en halv bredde, og kopien lander der originalen begynte. * Punktene slutter aa brekke og faar sin egen bredde, ellers ville raden fortsatt stable seg. */ @container ft-band (max-width: 48em) { /* * Kantene tones ut, som paa forbildet: punktene skal se ut til aa gli inn og ut, ikke bli * kappet av en usynlig kant. En maske er riktig verktoey her og ikke en gradient oppaa - * stripa staar paa hvitt i footeren, men en maske gjoer hele elementet gjennomsiktig mot * kanten og virker uansett hva som ligger bak. * * Toppstripa har det med vilje ikke: den gaar fra kant til kant over hele vinduet, og * forbildet toner ikke den. */ :root .ft-tillit__vindu { overflow: hidden; --ft-tone: var(--wp--preset--spacing--l); -webkit-mask-image: linear-gradient( to right, transparent 0, #000 var(--ft-tone), #000 calc(100% - var(--ft-tone)), transparent 100% ); mask-image: linear-gradient( to right, transparent 0, #000 var(--ft-tone), #000 calc(100% - var(--ft-tone)), transparent 100% ); } :root .ft-tillit__spor { width: max-content; animation: ft-tillit-rull 28s linear infinite; } :root .ft-tillit__rad { flex: 0 0 auto; flex-wrap: nowrap; gap: var(--wp--preset--spacing--l); padding-inline-end: var(--wp--preset--spacing--l); } :root .ft-tillit__rad--kopi { display: flex; } :root .ft-tillit__punkt { flex: 0 0 auto; } .ft-tillit:hover .ft-tillit__spor, .ft-tillit:active .ft-tillit__spor { animation-play-state: paused; } } @keyframes ft-tillit-rull { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { :root .ft-tillit__spor { animation: none; } :root .ft-tillit__rad--kopi { display: none; } } /* Samme unntak som i footer-rutenettet: raden eier luften, ikke gruppenes `blockGap`. */ :root .ft-tillit__rad.is-layout-flow > * { margin-block-start: 0; } /* * Ikonet ligger i venstre kolonne og spenner over begge tekstlinjene, så tittel og undertekst * står i flukt uansett om underteksten brekker til to linjer. */ :root .ft-tillit__punkt { display: grid; grid-template-columns: auto 1fr; column-gap: var(--wp--preset--spacing--xxs); align-items: center; } :root .ft-tillit__punkt::before { content: ""; grid-row: 1 / 3; width: 22px; height: 22px; background: var(--wp--preset--color--gul); -webkit-mask: var(--ft-tillitikon) center / contain no-repeat; mask: var(--ft-tillitikon) center / contain no-repeat; } :root .ft-tillit__tittel { margin: 0; align-self: end; font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--brodtekst-s); font-weight: 700; line-height: 1.3; } :root .ft-tillit__tekst { margin: 0; align-self: start; line-height: 1.3; } /* Feather-settet, samme strektykkelse som vogna og haken ellers i temaet. */ :root .ft-tillit__punkt--frakt { --ft-tillitikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E"); } :root .ft-tillit__punkt--levering { --ft-tillitikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='16.5' y1='9.4' x2='7.5' y2='4.21'/%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'/%3E%3C/svg%3E"); } :root .ft-tillit__punkt--faktura { --ft-tillitikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E"); } :root .ft-tillit__punkt--henting { --ft-tillitikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); } :root .ft-tillit__punkt--svar { --ft-tillitikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); } /* * Merket i footeren er satt, ikke tegnet. * * Navlinja beholder logofila med kvisten; her staar ordmerket i displayskriften slik * frutimian.no har det i sin footer. To ting foelger av det: kvisten er borte, saa innrykket * `--ft-logo-innrykk` - som bare fantes for aa flytte undertittelen forbi bladverket - er * unoedvendig, og ordmerket skalerer nu med skriftgraden i stedet for med en bildehoeyde. * * Amatic SC er en kapitelskrift: «Fru Timian» tegnes med store og kapitelbokstaver av seg selv, * uten `text-transform`. */ :root .ft-footer__logo { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1em; text-decoration: none; color: var(--wp--preset--color--tekst); } :root .ft-footer__ordmerke { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--display-m); font-weight: 700; line-height: 0.95; } /* * Undertittelen er en etikett under merket, ikke et merke til: broedskrift, dempet farge og * mindre grad - samme grep som «- Bare gode smaker» har paa frutimian.no. Navlinja har sin egen * undertittel i displayskriften; de to stedene er bevisst ulike. */ :root .ft-footer__undertittel { font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--brodtekst-s); font-weight: 400; line-height: 1.4; letter-spacing: 0.01em; color: var(--wp--preset--color--tekst-svak); } /* ────────────────── WOOCOMMERCE-PRODUKTKORT ───────────────────── */ /* * Produktkortet låner formen fra fru-timians kategorikort: kvadratisk flate, bildet midtstilt * oppå den, tekst under. * * Midtstilt tekst er hele grepet. Pakkshotene er fotografert lite på stor hvit bakgrunn, så på * en hvit side er bilderammen usynlig og produktet så forskjøvet ut fra en venstrestilt tittel — * rammen er full spaltebredde, men bare motivet synes. Med midtstilt tekst står tittelen under * motivet, og kortet leser likt enten bildet er et pakkshot eller et matbilde som fyller rammen. * Bandet er hvitt: en tint bak de hvite flatene gjorde dem til synlige kort, men det var ikke * problemet som skulle løses. */ .woocommerce ul.products li.product { text-align: center; } .woocommerce ul.products li.product a img { aspect-ratio: 1; width: 100%; object-fit: cover; background: var(--wp--preset--color--hvit); border-radius: var(--wp--custom--radius--kant); margin-block-end: var(--wp--preset--spacing--xs); transition: transform var(--wp--custom--overgang--myk) ease; } .woocommerce ul.products li.product a:hover img { transform: scale(1.03); } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--tittel-m); font-weight: 600; line-height: 1.3; padding: 0; } .woocommerce ul.products li.product a:hover .woocommerce-loop-product__title { color: var(--wp--preset--color--gul); } .woocommerce ul.products li.product .price { display: block; margin-block: var(--wp--preset--spacing--xxxs) var(--wp--preset--spacing--xs); color: var(--wp--preset--color--tekst); font-family: var(--wp--preset--font-family--detalj); font-variant-numeric: tabular-nums; font-weight: 500; } /* Knappen er temaets knapp, ikke Woo sin grå. */ .woocommerce ul.products li.product .button { display: inline-flex; background: var(--wp--preset--color--gul); color: var(--wp--preset--color--hvit); border-radius: var(--wp--custom--radius--kant); font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--brodtekst-s); font-weight: 600; } /* ─────────────────── SØK, VOGN OG KONTO I HEADEREN ─────────────── */ /* * Portert fra fru-timians header-search, cart-button og account-links. De tre var egne blokker * der; her er de `core/search`, `woocommerce/mini-cart` og to vanlige lenker, stylet til å ligne. */ /* * Søkefeltet skal ta plassen mellom logoen og vogna. * * Bredden må ligge på selve blokka (`form.wp-block-search`) og ikke på den indre pilla: blokka er * flexbarnet i headerraden, og et barn som ikke får `flex-grow` er like bredt som innholdet sitt — * da hjelper ingen `max-width` lenger inn. */ :root .ft-header .ft-search { flex: 1 1 auto; /* * 29,75rem = 476px: maalt paa Michaels nye side (`form#ft-search-skjema`, 476 x 42). Hoeyden * laa allerede paa 42px nede i pilla, med 476 skrevet i kommentaren - men taket her sto paa * 40rem/640px, saa feltet ble bredere enn forbildet paa store skjermer. Under taket foelger * det raden som foer. */ max-width: 29.75rem; margin-block: 0; /* * Ekstra luft mot logoen, utover radens egen `column-gap`. Feltet har et tak på bredden og * står i en rad der vogna er dyttet helt ut til høyre av en auto-margin, så det er ledig * plass til høyre for feltet - innrykket flytter feltet inn i den plassen i stedet for å * presse noe sammen. */ margin-inline-start: var(--wp--preset--spacing--m); } /* Lys blå pille med en gul rund knapp. Knappen står først, derfor `row-reverse`. */ :root .ft-header .wp-block-search__inside-wrapper { display: flex; flex-direction: row-reverse; align-items: center; gap: var(--wp--preset--spacing--xxs); /* 42px: feltets hoeyde i designet. Bredden er `.ft-search` sitt tak lenger opp. */ min-height: 42px; width: 100%; padding: 4px; background: var(--wp--preset--color--lys-blaa); border: 0; border-radius: var(--wp--custom--radius--pille); } :root .ft-header .wp-block-search__input { flex: 1; min-width: 0; padding-inline: var(--wp--preset--spacing--xxs); background: none; border: 0; color: var(--wp--preset--color--tekst); font-size: var(--wp--preset--font-size--brodtekst-s); } :root .ft-header .wp-block-search__input:focus { outline: none; } :root .ft-header .wp-block-search__inside-wrapper:has(.wp-block-search__input:focus-visible) { outline: 2px solid var(--wp--preset--color--gul); outline-offset: 2px; } :root .ft-header .wp-block-search__input::placeholder { color: var(--wp--preset--color--tekst); opacity: 0.7; } :root .ft-header .wp-block-search__button { display: flex; align-items: center; justify-content: center; flex-shrink: 0; /* * Kjernen gir alle søkeknapper `margin-left: 10px`, tenkt som luft mellom feltet og en knapp * til høyre. Pilla vår er snudd med `row-reverse`, så de ti pikslene havnet mellom knappen og * venstre kant og la seg oppå pillas egne 4px. Nullstilles, da står knappen like langt fra * kanten på alle fire sider. */ margin: 0; /* 34px: knappens diameter, samme som vogna. */ width: 34px; height: 34px; min-block-size: 0; padding: 0; background: var(--wp--preset--color--gul); color: var(--wp--preset--color--hvit); border: 0; border-radius: var(--wp--custom--radius--rund); } :root .ft-header .wp-block-search__button svg { width: 18px; height: 18px; fill: currentColor; } /* Vogna: svart sirkel, gult antallsmerke. */ :root .ft-header .wc-block-mini-cart__button { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: var(--wp--preset--color--tekst); border-radius: var(--wp--custom--radius--rund); color: var(--wp--preset--color--hvit); transition: transform var(--wp--custom--overgang--rask) ease; } :root .ft-header .wc-block-mini-cart__button:hover, :root .ft-header .wc-block-mini-cart__button:focus-visible { transform: scale(1.08); } :root .ft-header .wc-block-mini-cart__icon { width: 19px; height: 19px; fill: var(--wp--preset--color--hvit); } /* * `!important` er nødvendig her, ikke latskap. WooCommerce skriver merkets farger som *inline* * stil fra Interactivity API-en (`data-wp-style--background-color` og `data-wp-style--color` i * MiniCart.php), og skriver dem på nytt hver gang antallet endrer seg. Inline stil slår enhver * vanlig regel uansett hvor tung velgeren er, så dette er det eneste som holder. * * Uten dette ble merket stående gjennomsiktig med gyllent tall, og «sirkelen» man så var i * virkeligheten hullet WooCommerce maskerer ut av den svarte vognknappen bak. */ :root .ft-header .wc-block-mini-cart__badge { background: var(--wp--preset--color--gul) !important; color: var(--wp--preset--color--hvit) !important; font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--brodtekst-s); font-weight: 500; } /* Kontolenkene står ytterst på navraden. */ /* * `:root` og to klasser foran: kjernens margin-nulling for barna av en flexbeholder er * `:root :where(.is-layout-flex) > :is(*, div)` — (0,1,1), fordi `:is()` teller sitt tyngste * argument og en type er med. En bar `.ft-konto { margin-inline-start: auto }` taper mot den * uansett rekkefølge, og lenkene blir stående inntil menyen i stedet for ytterst. */ :root .ft-header__navrow > .ft-konto { margin-inline-start: auto; } .ft-konto { display: flex; align-items: center; gap: var(--wp--preset--spacing--xs); font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--brodtekst-s); font-weight: 500; white-space: nowrap; } .ft-konto__lenke { color: var(--wp--preset--color--tekst); text-decoration: none; transition: color var(--wp--custom--overgang--rask) ease; } .ft-konto__lenke:hover, .ft-konto__lenke:focus-visible { color: var(--wp--preset--color--gul); } .ft-konto__skille { /* 27px/1px: en hårstrek mellom to lenker, ikke et spacing-steg. */ width: 1px; height: 27px; background: var(--wp--preset--color--tekst-svak); opacity: 0.25; } @container ft-band (max-width: 48em) { :root .ft-konto { display: none; } :root .ft-header .wp-block-search__inside-wrapper { max-width: none; } /* Logoen er absolutt plassert og sentrert her - det er ingen logo ved siden av å vike for. */ :root .ft-header .ft-search { margin-inline-start: 0; } } /* ─────────────── WOOCOMMERCE PRODUCT COLLECTION ────────────────── */ /* * Product Collection er en annen blokk enn `[products]`-rutenettet lenger opp, med helt egen * markup: `.wc-block-product-template` med `li.wc-block-product` i stedet for `ul.products` med * `li.product`. Reglene for det ene traff aldri det andre, som er hvorfor kortene her sto * ustylet mens de over var ferdige. */ /* * Ikke rør rutenettet. Woo regner sporbredden ut fra sin egen luft: * * .wc-block-product-template__responsive.columns-3 { * grid-gap: 1.25em; * grid-template-columns: repeat(auto-fill, minmax(max(150px, calc(33.33333% - .83333em)), 1fr)); * } * * `.83333em` er to tredeler av gapet, fordelt på tre spor. Setter man et annet `gap`, stemmer ikke * regnestykket lenger: tre spor blir bredere enn beholderen, `auto-fill` gir opp og legger seg på * to. Det var akkurat det som skjedde her — bandet gikk fra tre til to kolonner med diger bilder. * * Samme grunn til å la være med `container-type`: Woo har egne `@container`-spørringer, og en ny * beholder nærmere elementet ville flyttet hva de måler. */ .wc-block-product-template { margin: 0; padding: 0; list-style: none; } /* * Kortet er venstrestilt, som på frutimian.no: bilde, tittel, kategori, pris, og en knapp i full * bredde nederst. Midtstilt tekst var et forsøk på å skjule at pakkshotene står midt i sin egen * hvite ramme - men når kortet har en synlig knapp i bunn, holder rutenettet seg selv i flukt. */ .wc-block-product-template .wc-block-product { display: flex; flex-direction: column; text-align: left; transition: transform var(--wp--custom--overgang--myk) ease; } /* * Hele kortet løftes noen piksler ved hover - ikke bare bildet. Det er det som * gjør at knappen i bunn følger med opp, slik referansesiden gjør det, og det * binder kortet sammen til ett element i stedet for et bilde med tekst under. * Løftet ligger på kortet, zoomen på bildet inni; de to lagene jobber sammen. */ .wc-block-product-template .wc-block-product:hover { transform: translateY(-4px); } /* * Bildet er en kvadratisk flate, som kategorikortene. * * Rammen eier avrundingen og klipper innholdet. Det er det som gjør at * hover-effekten blir en innzooming i en fast flate, slik referansesiden gjør * det, i stedet for at hele bildet vokser ut av kortet og dytter naboene. */ .wc-block-product-template .wc-block-components-product-image { position: relative; margin-block-end: var(--wp--preset--spacing--xs); overflow: hidden; border-radius: var(--wp--custom--radius--kant); } .wc-block-product-template .wc-block-components-product-image img { aspect-ratio: 1; width: 100%; object-fit: cover; background: var(--wp--preset--color--hvit); display: block; transition: transform var(--wp--custom--overgang--myk) ease; } .wc-block-product-template .wc-block-product:hover .wc-block-components-product-image img { transform: scale(1.06); } @media (prefers-reduced-motion: reduce) { .wc-block-product-template .wc-block-product:hover, .wc-block-product-template .wc-block-product:hover .wc-block-components-product-image img { transform: none; } } /* * Tilbudsmerket hører til bildet, ikke til strømmen over det. Uten en egen plassering legger * det seg som et vanlig blokkbarn og havner over bildet i stedet for oppå det. */ .wc-block-product-template .wc-block-components-product-sale-badge { position: absolute; top: var(--wp--preset--spacing--xxs); /* * Venstre hjørne, gull flate og mørk tekst - som referansen. Den røde pilla til høyre var * WooCommerce-arv: `roed` finnes i paletten for feilmeldinger, ikke for kampanjer, og et * tilbudsmerke i varselfarge leser som noe galt framfor noe hyggelig. */ left: var(--wp--preset--spacing--xxs); z-index: var(--wp--custom--lag--flate); margin: 0; padding: 0.3em 0.7em; background: var(--wp--preset--color--gul); color: var(--wp--preset--color--tekst); border: 0; border-radius: var(--wp--custom--radius--kant); font-family: var(--wp--preset--font-family--detalj); font-size: var(--wp--preset--font-size--kicker-s); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .wc-block-product-template .wp-block-post-title { font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--tittel-m); font-weight: 600; line-height: 1.3; } /* * Tittelen understrekes når kortet er i fokus, ikke bare når pekeren står * rett på lenka - det er kortet som er klikkflaten. Understreket kommer i * stedet for et fargeskifte: referansesiden holder tittelen svart. */ .wc-block-product-template .wc-block-product:hover .wp-block-post-title a, .wc-block-product-template .wp-block-post-title a:hover, .wc-block-product-template .wp-block-post-title a:focus-visible { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } /* Kategorilinja står mellom tittel og pris, dempet - den er en opplysning, ikke en lenkerad. */ .wc-block-product-template .ft-produkt__kategori { margin-block: 0 var(--wp--preset--spacing--xxxs); color: var(--wp--preset--color--tekst-svak); line-height: 1.3; } .wc-block-product-template .ft-produkt__kategori a { color: inherit; text-decoration: none; } .wc-block-product-template .ft-produkt__kategori a:hover { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } /* * Knappene skal stå i flukt på tvers av raden, uansett om en tittel går over to linjer. * * Kortet er en flexkolonne, og `margin-block-start: auto` på prisen spiser resten av høyden — * men bare hvis den står på et *direkte* barn av kortet. Woo pakker prisen dobbelt: * *
<- flexbarnet *
<- der klassen bor * * Automargen på den indre gjorde derfor ingenting; den må stå på wrapperen. */ .wc-block-product-template .wc-block-product > .wp-block-woocommerce-product-price { margin-block-start: auto; padding-block-start: var(--wp--preset--spacing--xxs); } /* * Prisen er nest etter tittelen i kortet, og ligger derfor på samme trinn i * skalaen (tittel-m). Den sto lenge på brodtekst - da leste den som en * opplysning på linje med kategorilinja, ikke som tallet kunden ser etter. */ .wc-block-product-template .wc-block-components-product-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4em; font-family: var(--wp--preset--font-family--detalj); font-size: var(--wp--preset--font-size--tittel-m); font-variant-numeric: tabular-nums; font-weight: 500; } /* * Tilbudsprisen skal leses først. * * WooCommerce skriver `` før `` i markupen, og det kan vi ikke endre - men i en * flexboks bestemmer `order` rekkefølgen uten å røre DOM-en. Alt annet i prisen (mva-suffikset * «eks.mva», skjulte hjelpetekster) får `order: 3` og blir liggende bakerst der det hører hjemme. * Suffikset er et ekte ``-element, så det lar seg sortere; ren mellomromstekst blir ikke * flexbarn i det hele tatt. */ .wc-block-product-template .wc-block-components-product-price > * { order: 3; } .wc-block-product-template .wc-block-components-product-price ins { order: 1; color: var(--wp--preset--color--gul); font-weight: 600; text-decoration: none; } /* Førprisen er dempet og mindre, ikke bare gjennomstreket. */ .wc-block-product-template .wc-block-components-product-price del { order: 2; font-size: 0.8em; color: var(--wp--preset--color--tekst-svak); opacity: 0.8; } /* * Knappen er temaets knapp. Woo sin egen er et blokk-knappelement, så den arver `.wp-element-button` * fra theme.json — men ikke fargene, fordi Woo setter sine egne lenger ut i arket. */ /* Knappen fyller kortet, med en liten vogn foran teksten. */ .wc-block-product-template .wc-block-product > .wp-block-woocommerce-product-button, .wc-block-product-template .wc-block-components-product-button { margin-block-start: var(--wp--preset--spacing--xs); } .wc-block-product-template .wc-block-components-product-button .wp-block-button__link { display: flex; align-items: center; justify-content: center; gap: 0.5em; width: 100%; background: var(--wp--preset--color--gul); color: var(--wp--preset--color--hvit); border: 0; border-radius: var(--wp--custom--radius--kant); font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--brodtekst-s); font-weight: 600; } /* * Vognikonet er en maske og ikke et bilde, så det arver tekstfargen og trenger ingen egen fil. */ :root .wc-block-components-product-button .wp-block-button__link::before { content: ""; width: 1.1em; height: 1.1em; flex-shrink: 0; background: currentColor; -webkit-mask: var(--ft-vognikon) center / contain no-repeat; mask: var(--ft-vognikon) center / contain no-repeat; } :root { --ft-vognikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E"); } /* ──────────────────── KAMPANJE, SØK OG BANNER ──────────────────── */ /* Kampanjebildet er kvadratisk og skal ikke fylle hele bandet. */ .ft-kampanjebilde img { /* 38rem: bildet er en plakat, ikke en hero - det skal kunne stå ved siden av et rutenett. */ max-width: 38rem; width: 100%; height: auto; border-radius: var(--wp--custom--radius--kant); } .ft-kampanjebilde { margin-block-end: var(--wp--preset--spacing--xxl); } /* * Bildet er en lenke til kategorien. Et flatt bilde sier ikke fra om at det kan klikkes, så * lenka får samme lille løft som resten av temaets klikkflater. `inline-block` fordi en inline * `` rundt et blokk-bilde ikke tar imot hverken radius eller transform. */ .ft-kampanjebilde a { display: inline-block; border-radius: var(--wp--custom--radius--kant); overflow: hidden; transition: transform var(--wp--custom--overgang--myk) ease, box-shadow var(--wp--custom--overgang--myk) ease; } .ft-kampanjebilde a:hover, .ft-kampanjebilde a:focus-visible { transform: translateY(-3px); box-shadow: var(--wp--custom--skygge--heving); } /* Samme for bannerlenka lenger ned. */ .ft-bannerbilde a { display: inline-block; border-radius: var(--wp--custom--radius--kant); overflow: hidden; transition: transform var(--wp--custom--overgang--myk) ease, box-shadow var(--wp--custom--overgang--myk) ease; } .ft-bannerbilde a:hover, .ft-bannerbilde a:focus-visible { transform: translateY(-3px); box-shadow: var(--wp--custom--skygge--heving); } /* * Ingressen og lenka rammer inn feltet: en linje som sier hva som virker, og en utvei for den som * heller vil bla. Begge maalt mot feltet, ikke mot bandet, saa spalten leser som en blokk. */ :root .ft-band--sok .ft-sokband__ingress { max-width: 34rem; margin: 0 auto var(--wp--preset--spacing--s); color: var(--wp--preset--color--tekst-svak); } :root .ft-band--sok .ft-sokband__lenke { margin: var(--wp--preset--spacing--s) 0 0; font-size: var(--wp--preset--font-size--brodtekst-s); font-weight: 600; } :root .ft-band--sok .ft-sokband__lenke a { color: var(--wp--preset--color--tekst); text-decoration: underline; text-underline-offset: 0.25em; } :root .ft-band--sok .ft-sokband__lenke a:hover, :root .ft-band--sok .ft-sokband__lenke a:focus-visible { color: var(--wp--preset--color--gul); } /* -------------------------------------------------------------------------- Levende soek - forslagslista under soekefeltet Lista henger paa skjemaet, ikke paa headeren: samme komponent brukes i navlinja, i mobilsoeket og i hurtigbestillingsbandet, og hvert sted har sin egen bredde. `position: absolute` mot skjemaet gjoer at den legger seg over innholdet uten aa dytte noe. -------------------------------------------------------------------------- */ :root .wp-block-search.ft-sok--levende { position: relative; } :root .ft-forslag { position: absolute; inset-inline: 0; top: calc(100% + 0.5rem); z-index: var(--wp--custom--lag--topp); background: var(--wp--preset--color--hvit); border-radius: var(--wp--custom--radius--kant); box-shadow: var(--wp--custom--skygge--heving); /* * Ingen padding paa boksen: den aktive raden skal faa farge helt ut til kanten, slik referansen * har det. Lufta ligger derfor i radene, og `overflow: hidden` klipper dem mot hjoernene. */ overflow: hidden; } :root .ft-forslag[hidden] { display: none; } /* Merkelappen til venstre, utveien til hoeyre - som paa frutimian.no. */ :root .ft-forslag__hode { display: flex; align-items: baseline; justify-content: space-between; gap: var(--wp--preset--spacing--s); padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s) var(--wp--preset--spacing--xxs); } /* 14px og dempet farge, maalt paa `span.ft-search__etikett` paa den nye sida. */ :root .ft-forslag__merke { margin: 0; color: var(--wp--preset--color--tekst-svak); font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--brodtekst-s); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } :root .ft-forslag__alle { padding: 0; background: transparent; border: 0; border-radius: 0; color: var(--wp--preset--color--tekst); font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--brodtekst-s); font-weight: 500; text-decoration: underline; text-underline-offset: 0.25em; cursor: pointer; } :root .ft-forslag__alle:hover, :root .ft-forslag__alle:focus-visible { color: var(--wp--preset--color--gul); } /* * Lista viser hoegst seks rader, og seks rader er ca. 27rem - saa den trenger ingen egen hoeyde. * Taket som staar igjen er mot *skjermen*, ikke mot antallet: paa en lav skjerm skal lista rulle * i stedet for aa gaa ut av bildet. Da er det bare lista som ruller; hodet og foten staar i ro. */ :root .ft-forslag__liste { max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; } :root .ft-forslag__rad { display: flex; align-items: center; gap: var(--wp--preset--spacing--xxs); padding: var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--s); color: var(--wp--preset--color--tekst); text-decoration: none; } /* * En klasse og ikke `:hover`: tastaturet og musepekeren skal peke paa det samme, og da maa det * vaere skriptet som bestemmer hva som er aktivt. */ :root .ft-forslag__rad--aktiv { background: var(--wp--preset--color--lys-blaa); } :root .ft-forslag__bilde { flex: 0 0 auto; width: 3rem; height: 3rem; object-fit: cover; border-radius: var(--wp--custom--radius--kant); } :root .ft-forslag__tekst { display: flex; flex-direction: column; gap: 0.1em; min-width: 0; } :root .ft-forslag__navn { font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--brodtekst-s); font-weight: 600; line-height: 1.3; } :root .ft-forslag__pris { font-family: var(--wp--preset--font-family--detalj); font-size: var(--wp--preset--font-size--brodtekst-s); color: var(--wp--preset--color--tekst-svak); } :root .ft-forslag__pris .woocommerce-Price-amount { font-weight: 500; } :root .ft-forslag__tomt { margin: 0; padding: var(--wp--preset--spacing--s); color: var(--wp--preset--color--tekst-svak); font-size: var(--wp--preset--font-size--brodtekst-s); text-align: center; } /* Tastaturhintet. */ :root .ft-forslag__fot { display: flex; align-items: center; gap: var(--wp--preset--spacing--s); margin: 0; padding: var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--s); border-block-start: var(--wp--custom--linje); color: var(--wp--preset--color--tekst-svak); font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--kicker-s); } :root .ft-forslag__hint { display: inline-flex; align-items: center; gap: 0.35em; } :root .ft-forslag__tast { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; padding: 0.15em 0.35em; background: var(--wp--preset--color--lys-blaa); border-radius: var(--wp--custom--radius--kant); color: var(--wp--preset--color--tekst); font-family: inherit; font-size: inherit; line-height: 1.4; } /* * Ingen piltaster aa trykke paa en telefon, og ingen Esc heller. Hintet er da bare en linje som tar * plass i en liste som allerede er trang. */ @media (hover: none), (pointer: coarse) { :root .ft-forslag__fot { display: none; } } /* Søkefeltet i bandet er headerens pille, i større format. */ :root .ft-band--sok .ft-sok { max-width: 34rem; margin-inline: auto; } :root .ft-band--sok .wp-block-search__inside-wrapper { display: flex; flex-direction: row-reverse; align-items: center; gap: var(--wp--preset--spacing--xxs); min-height: 52px; padding: 5px; background: var(--wp--preset--color--hvit); border: 0; border-radius: var(--wp--custom--radius--pille); box-shadow: var(--wp--custom--skygge--pille); } :root .ft-band--sok .wp-block-search__input { flex: 1; min-width: 0; padding-inline: var(--wp--preset--spacing--xs); background: none; border: 0; font-size: var(--wp--preset--font-size--brodtekst); } :root .ft-band--sok .wp-block-search__input:focus { outline: none; } :root .ft-band--sok .wp-block-search__button { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 42px; min-block-size: 0; padding: 0; background: var(--wp--preset--color--gul); color: var(--wp--preset--color--hvit); border: 0; border-radius: var(--wp--custom--radius--rund); } :root .ft-band--sok .wp-block-search__button svg { width: 20px; height: 20px; fill: currentColor; } /* Bannerbildet er bredt og lenker videre. */ .ft-bannerbilde img { width: 100%; height: auto; border-radius: var(--wp--custom--radius--kant); } /* * Innledningslinja er en hel setning satt som en bandtittel. Den trenger et mål å brekke * innenfor, ellers strekker den seg over hele bandbredden og blir en plakat i stedet for en * setning. Og litt mindre luft under enn en vanlig bandtittel, siden den peker på det som kommer. */ :root .ft-innledning { max-width: 46rem; margin-inline: auto; line-height: 1.15; } .ft-band--innledning { padding-block-end: var(--wp--preset--spacing--l); } /* * Bolkoverskriftene i sortimentet er venstrestilte, i motsetning til `.ft-bandtittel`. En * bandoverskrift står over en seksjon; disse står inne i én lang liste og er skilletegn i den. * De trenger derfor luft over seg, ikke under. */ :root .ft-gruppetittel { margin-block: var(--wp--preset--spacing--xxl) var(--wp--preset--spacing--l); text-align: left; } /* Den første trenger ikke luft over - den gule innledningslinja står rett over den. */ :root .ft-band--sortiment > .ft-gruppetittel:first-child { margin-block-start: 0; } /* ───────────────────────── MEGAMENYEN ──────────────────────────── */ /* * Portert fra fru-timians mega-nav-blokk. Panelet åpnes av `:hover` og `:focus-within` — ingen * JavaScript. `:focus-within` er hele tastaturstøtten: tabber du inn i en lenke i panelet, står * panelet åpent fordi fokus er inne i punktet. * * Menyen er skrevet rett i `parts/header.html` som markup, ikke som `core/navigation`. Det gir * kolonneoverskrifter og kampanjekortet, som blokken ikke har noen form for. */ .ft-nav { position: relative; } .ft-nav__rad { display: flex; align-items: center; /* 28px: avstanden mellom menypunktene i designet. */ gap: 28px; margin: 0; padding: 0; list-style: none; } .ft-nav__punkt { position: relative; display: flex; align-items: center; gap: 6px; } /* * Menylenka er brødskriften, ikke displayskriften. 0.9375rem/500 er verdiene fra forbildet — * en menylinje skal være rolig, ikke en overskrift. */ .ft-nav__lenke { display: flex; align-items: center; gap: 6px; color: var(--wp--preset--color--tekst); font-family: var(--wp--preset--font-family--brod); font-size: 0.9375rem; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color var(--wp--custom--overgang--rask) ease; } .ft-nav__lenke:hover, .ft-nav__lenke:focus-visible, .ft-nav__punkt--panel:hover .ft-nav__lenke { color: var(--wp--preset--color--gul); } /* * `` er raden man trykker paa. Trekanten nettleseren tegner skal bort - pila vaar staar * allerede der - og lenka inni skal fortsatt kunne klikkes paa bred visning. */ .ft-nav__sammendrag { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; } .ft-nav__sammendrag::-webkit-details-marker { display: none; } .ft-nav__pil { width: 9px; height: 5px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--wp--custom--overgang--myk) ease; } .ft-nav__punkt--panel:hover .ft-nav__pil { transform: rotate(180deg); } .ft-nav__panel { display: none; position: absolute; top: 100%; inset-inline-start: calc(var(--wp--preset--spacing--m) * -1); z-index: var(--wp--custom--lag--panel); /* Luft mellom lenka og panelet, så musa ikke mister det på veien ned. */ padding-block-start: var(--wp--preset--spacing--xxs); } .ft-nav__punkt--panel:hover .ft-nav__panel, .ft-nav__punkt--panel:focus-within .ft-nav__panel { display: block; } .ft-nav__panel-innhold { display: flex; align-items: stretch; overflow: hidden; background: var(--wp--preset--color--hvit); border-radius: var(--wp--custom--radius--kant); box-shadow: var(--wp--custom--skygge--heving); } .ft-nav__celle { /* 28px: cellepadding fra forbildet. */ padding: 28px var(--wp--preset--spacing--m); border-inline-end: var(--wp--custom--linje); } .ft-nav__celle:last-child { border-inline-end: 0; } .ft-nav__celle--kolonne { min-inline-size: 13.75rem; } .ft-nav__kolonne-tittel { margin: 0 0 var(--wp--preset--spacing--xxs); color: var(--wp--preset--color--tekst-svak); font-family: var(--wp--preset--font-family--detalj); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .ft-nav__kolonne-lenker { margin: 0; padding: 0; list-style: none; } .ft-nav__kolonne-lenke { display: block; padding-block: var(--wp--preset--spacing--xxxs); color: var(--wp--preset--color--tekst); font-family: var(--wp--preset--font-family--brod); font-size: 0.9375rem; font-weight: 500; line-height: 1.2; text-decoration: none; transition: color var(--wp--custom--overgang--rask) ease; } .ft-nav__kolonne-lenke:hover, .ft-nav__kolonne-lenke:focus-visible { color: var(--wp--preset--color--gul); } /* Kampanjecella ytterst, med samme kortform som resten av temaet. */ .ft-nav__celle--kort { flex-shrink: 0; inline-size: 16.25rem; padding: var(--wp--preset--spacing--m); background: var(--wp--preset--color--lys-blaa); } .ft-nav__kort { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--xxxs); color: var(--wp--preset--color--tekst); text-decoration: none; } .ft-nav__kort-bilde { width: 100%; /* * `height: auto` maa staa her. Kortet henter naa bildet fra produktkategorien, og * `wp_get_attachment_image()` skriver `width`- og `height`-attributter paa taggen. De teller * som en hoeyde, og da faller `aspect-ratio` bort: et staaende kategoribilde ble rendret i sin * egen 3:4 i stedet for beskaaret kvadratisk. Den hardkodede taggen hadde ingen attributter, * saa dette kunne ikke skje foer. */ height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--wp--custom--radius--kant); margin-block-end: var(--wp--preset--spacing--xxs); } .ft-nav__kort-kicker { color: var(--wp--preset--color--gul); font-family: var(--wp--preset--font-family--detalj); font-size: var(--wp--preset--font-size--kicker-s); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .ft-nav__kort-tittel { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--tittel-m); font-weight: 700; line-height: 1.1; } .ft-nav__kort-lenke { margin-block-start: var(--wp--preset--spacing--xxs); font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--brodtekst-s); font-weight: 600; } .ft-nav__kort:hover .ft-nav__kort-lenke, .ft-nav__kort:focus-visible .ft-nav__kort-lenke { color: var(--wp--preset--color--gul); } /* ──────────────────────── PRODUKTARKIVET ───────────────────────── */ /* * Arkivtoppen er et heroband: tittelen på lys blå, med kategoriens egen beskrivelse under. * Beskrivelsen står tom til noen skriver en — den redigeres per kategori under Produkter → * Kategorier, og er derfor ikke hardkodet her. */ .ft-band--arkivtopp { text-align: center; } .ft-band--arkivtopp .wp-block-term-description { max-width: 44rem; margin-inline: auto; margin-block-start: var(--wp--preset--spacing--xs); color: var(--wp--preset--color--tekst-svak); font-size: var(--wp--preset--font-size--brodtekst-l); line-height: 1.35; } /* * Filterlinja er sin egen stripe mellom toppen og rutenettet: hvit flate, hårstrek under, * lite luft. Den skal lese som en verktøylinje, ikke som et band med innhold. */ :root :is(.ft-main, .wp-block-post-content) > .ft-band.ft-filterbar { padding-block: var(--wp--preset--spacing--xs); background: var(--wp--preset--color--hvit); border-block-end: var(--wp--custom--linje); } /* * Filtrene hoerer sammen til venstre, tellinga staar for seg til hoeyre. * * Blokka er satt til `space-between`, som fordelte alle tre jevnt utover da kategorivelgeren kom * til - og da leste sorteringa som noe annet enn et filter. `flex-start` samler dem, og en * auto-marg paa det siste elementet dytter tellinga ut til kanten. Siste barn og ikke et * klassenavn: Woo pakker tellinga i sin egen blokkwrapper, og navnet der er deres aa endre. */ :root .ft-filterbar__rad { justify-content: flex-start; gap: var(--wp--preset--spacing--s); } :root .ft-filterbar__rad > :last-child { margin-inline-start: auto; } /* * Woo gir sorteringsskjemaet `margin: 0 0 1em` (.woocommerce .woocommerce-ordering). * I en flex-rad med `align-items: center` er det margboksen som sentreres, saa en bunnmarg * loefter pilla en halv marg opp - malt til 6,5 px - og sorteringa laa hoeyere enn kategorivelgeren. * Marga ligger paa skjemaet inne i blokkens egen wrapper, ikke paa flex-barnet selv - og et * flex-element er sin egen formatteringskontekst, saa marga kollapser ikke ut, den gjoer wrapperen * 13 px hoeyere. Derfor nulles den paa alt i raden, ikke bare paa barna, og ikke paa Woos * klassenavn: raden setter selv avstandene med `gap`. */ :root .ft-filterbar .ft-filterbar__rad * { margin-block: 0; } /* Sorteringen er en pille, som filtrene på frutimian.no. */ .ft-filterbar .woocommerce-ordering select, .ft-filterbar select { appearance: none; padding: 0.55em 2.4em 0.55em 1.1em; background-color: var(--wp--preset--color--lys-blaa); background-image: var(--ft-pilikon); background-repeat: no-repeat; background-position: right 1em center; background-size: 10px 6px; border: 0; border-radius: var(--wp--custom--radius--pille); color: var(--wp--preset--color--tekst); font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--brodtekst-s); font-weight: 500; cursor: pointer; } .ft-filterbar .woocommerce-ordering select:focus-visible, .ft-filterbar select:focus-visible { outline: 2px solid var(--wp--preset--color--gul); outline-offset: 2px; } :root { --ft-pilikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%231A1A1A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E"); } /* Antallet er en opplysning, ikke en kontroll. */ /* * Kategorivelgeren staar foerst i raden, og teksten over den som kjernen skriver ut skjules - * pilla sier selv hva den er. Selve `select`-en arver pilleformen fra regelen over. */ .ft-filterbar__kategori label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .ft-filterbar__kategori { margin: 0; } .ft-filterbar .woocommerce-result-count, .ft-filterbar .wc-block-product-results-count { margin: 0; color: var(--wp--preset--color--tekst-svak); font-size: var(--wp--preset--font-size--brodtekst-s); } /* Rutenettet trenger ikke toppluft - filterlinja over har allerede satt avstanden. */ :root :is(.ft-main, .wp-block-post-content) > .ft-band.ft-band--arkiv { padding-block-start: var(--wp--preset--spacing--xxl); } /* Paginering i temaets egen form. */ .ft-band--arkiv .wp-block-query-pagination { gap: var(--wp--preset--spacing--xs); font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--brodtekst-s); font-weight: 500; } .ft-band--arkiv .wp-block-query-pagination a:hover { color: var(--wp--preset--color--gul); } .ft-band--arkiv .wp-block-query-pagination-numbers .current { color: var(--wp--preset--color--gul); font-weight: 700; } /* ========================================================================== Søkeresultater ========================================================================== Produktsøk (header-søket) går til `product-search-results`-malen og arver hele produktkort-designet fra `.wc-block-product-template` lenger oppe. Reglene her gjelder bare den generiske `search`-malen, som nå er en enkel tekstliste - ikke et kortgalleri - siden den bare kan treffe sider og innlegg, aldri produkter. -------------------------------------------------------------------------- */ .ft-sokeliste .ft-sokeliste__rader > li { border-block-end: 1px solid rgba(26, 26, 26, 0.1); padding-block: var(--wp--preset--spacing--m); } .ft-sokeliste .ft-sokeliste__rader > li:first-child { padding-block-start: 0; } .ft-sokeliste .ft-sokekort__tittel { margin-block: 0 0.4rem; line-height: 1.3; } .ft-sokeliste .ft-sokekort__tittel a:hover { color: var(--wp--preset--color--gul); } .ft-sokeliste .ft-sokekort__utdrag { margin-block: 0; max-width: 52rem; color: var(--wp--preset--color--tekst-svak); } /* Tomt produktsøk: knapp og tekst trenger litt luft fra filterstripen. */ .ft-ingen-treff { padding-block: var(--wp--preset--spacing--xl); } .ft-ingen-treff .wp-block-buttons { margin-block-start: var(--wp--preset--spacing--m); } /* * Merk hvem regelen gjelder: bare et *band* skal miste toppmargen. Da `.wp-block-post-content` * kom med som andre ledd, gjaldt den plutselig ogsaa vanlige sider, der post-content er full av * avsnitt som trenger margene sine - den ville flatet ut de redaksjonelle sidene. * *
er nå en ekte gruppeblokk (tagName: main), ikke løs HTML mellom * blokkene. Det er det som gjør at Nettstedredigereren ser wrapperen, og at * `.ft-main > ...`-reglene lenger oppe virker i redigereren og ikke bare på * forsiden. * * Prisen er at kjernen nå legger sin egen flyt-marg mellom barna * (`:where(.is-layout-flow) > * + *`). Båndene eier sin egen vertikale luft * gjennom padding, så marger på toppen av det ville lagt seg som dobbel luft * mellom hvert bånd. Her nulles de. */ :is(.ft-main, .wp-block-post-content) > * + :is(.ft-band, .ft-hero) { margin-block-start: 0; } /* ========================================================================== Handlekurvskuffen (woocommerce/mini-cart) ========================================================================== Skuffen på referansesiden kommer fra en egen Shopify-bro-plugin og kan ikke flyttes hit. Dette er den samme formen bygd på WooCommerce sine egne blokker: tittel med antall, produktliste, delsum og to knapper. Malen ligger i `parts/mini-cart.html`, så vi eier strukturen og kan legge til fraktmåler og betalingsikoner der senere. -------------------------------------------------------------------------- */ :root { /* Samme strek som knappen i headeren, som maske så den arver tekstfargen. */ --ft-vognikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E"); } :root .wc-block-mini-cart__drawer .wc-block-components-drawer { background: var(--wp--preset--color--hvit); } /* * Tittelraden holdes i brødskriften, ikke i display-skriften. * * Skuffen er et verktøy midt i en handel, ikke et bånd på forsiden. Referansen * setter «Handlekurv» rolig i brødskrift med tallet ved siden av, og det er den * tonen som er kopiert her. Vognikonet foran kommer fra CSS fordi WooCommerce * ikke gir oss et sted å legge det i malen. */ :root .wc-block-mini-cart__title { display: flex; align-items: center; gap: 0.55rem; min-height: 2.25rem; width: 100%; flex: 0 0 auto; /* * Her forsvant streken. WooCommerce legger * `mask-image: linear-gradient(#000 calc(100% - 24px), transparent)` på `h2.wc-block-mini-cart__title`, * så de nederste 24 pikslene av tittelboksen tones ut til gjennomsiktig. Det er deres triks for at * varer som scroller opp under tittelen skal fade bort i stedet for å bli kuttet tvert av. * * Streken vår ligger på selve underkanten av den boksen, altså midt i det bortmaskerte feltet, og * ble tegnet med alpha 0. Den var der hele tiden - den var usynlig, ikke borte. Den tomme kurven * viste den fordi den grenen er vår egen markup (`ft-vogn__topp`) og aldri får maska. * * Vi slår av maska og gir tittelen en egen ugjennomsiktig bakgrunn i stedet, så varene fortsatt * skjules bak tittelen når de scroller - bare med en ren strek som kant i stedet for en uttoning. */ mask-image: none; -webkit-mask-image: none; background: var(--wp--preset--color--hvit); /* Plass til lukkeknappen, så en lang tittel aldri legger seg under den. */ padding-inline-end: 2.5rem; margin: 0; padding-block-end: var(--wp--preset--spacing--s); /* * Egen strek her framfor `--linje` (8 % svart): skuffen er hvit og smal, og * den fine streken forsvant. Denne skal faktisk skille tittelen fra varene. */ border-block-end: 1px solid rgba(26, 26, 26, 0.15); font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--brodtekst-l); font-weight: 600; line-height: 1.3; } :root .wc-block-mini-cart__title::before { content: ""; flex: 0 0 auto; width: 1.5em; height: 1.5em; background: currentColor; -webkit-mask: var(--ft-vognikon) center / contain no-repeat; mask: var(--ft-vognikon) center / contain no-repeat; } /* -------------------------------------------------------------------------- Fraktmaalet: hvor langt kurven er fra fri frakt. Ligger rett under tittelen i begge grenene av skuffen, satt inn av `fraktmaal.js`. Boksen er et fast element i kolonna - den skal staa i ro mens varelista under scroller - og henter innrykket sitt fra skuffens egen `padding-inline`, saa stripa faar samme kant som tittelen over. -------------------------------------------------------------------------- */ :root .ft-fraktmaal { flex: 0 0 auto; padding-block: var(--wp--preset--spacing--xs); background: var(--wp--preset--color--hvit); border-block-end: 1px solid rgba(26, 26, 26, 0.15); } :root .ft-fraktmaal__tekst { margin: 0 0 var(--wp--preset--spacing--xxs); color: var(--wp--preset--color--tekst-svak); font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--brodtekst-s); line-height: 1.4; text-align: center; } /* 6 px maalt paa referansen, og sporet er samme lyse blaa som pillene ellers. */ :root .ft-fraktmaal__spor { height: 6px; background: var(--wp--preset--color--lys-blaa); border-radius: var(--wp--custom--radius--pille); overflow: hidden; } :root .ft-fraktmaal__fyll { display: block; width: 0; height: 100%; background: var(--wp--preset--color--gul); border-radius: inherit; transition: width var(--wp--custom--overgang--myk) ease-out; } @media (prefers-reduced-motion: reduce) { :root .ft-fraktmaal__fyll { transition: none; } } /* * Paa kurven og i kassen staar stripa som et eget element i sida, ikke i en skuff: den trenger * egen luft, og den blir ikke bredere enn en linje tekst er verdt aa lese. */ :root .ft-fraktmaal--side { max-width: 34rem; margin-block: 0 var(--wp--preset--spacing--l); padding-block: 0; border-block-end: 0; } /* I ordrespalta foelger den spaltas bredde og staar tettere paa tabellen under. */ :root #order_review .ft-fraktmaal--side { max-width: none; margin-block-end: var(--wp--preset--spacing--s); } /* * Skuffen puster mer enn WooCommerce sin standard. * * Referansen holder god avstand til kanten hele veien ned, og det er den som * gjør at skuffen leser som et rolig panel og ikke som en tett liste. Luften * legges på selve innholdet, slik at tittel, liste og bunn får samme margin * mot kanten uten at hver del må vite om den. */ :root .wp-block-woocommerce-mini-cart-contents { position: relative; /* * Hvor tittellinja faktisk begynner, målt i nettleseren. * * Innholdet vårt starter med `spacing--s`, men WooCommerce legger 1rem til * over tittelen inne i sin egen flex-kolonne - ikke som padding eller marg * på noe vi kan nulle. Lukkeknappen er absolutt plassert mot dette * innholdet, så den må kjenne den samme summen for å havne på linja. * Endrer WooCommerce avstanden sin, er dette den ene knappen å justere. */ --ft-skuff-topp: calc(var(--wp--preset--spacing--s) + 1rem); padding-inline: var(--wp--preset--spacing--m); padding-block: var(--wp--preset--spacing--s); } /* * Én eier av toppluften. * * WooCommerce legger sin egen luft på blokkene inne i skuffen i tillegg til * den vi setter på selve innholdet. Da havnet tittelen 18 px lenger ned enn * lukkeknappen, som er forankret i innholdets egen kant. Her nulles den indre * luften, slik at padding på `.wp-block-woocommerce-mini-cart-contents` er det * eneste som bestemmer hvor toppen begynner - og de to faller på samme linje. */ :root .wp-block-woocommerce-filled-mini-cart-contents-block, :root .wp-block-woocommerce-empty-mini-cart-contents-block, :root .wp-block-woocommerce-mini-cart-title-block { padding-block-start: 0; margin-block-start: 0; } /* * Lukkeknappen skal stå på tittellinja, ikke over den. * * WooCommerce rendrer knappen som første barn i skuffen, før tittelen, så i * vanlig flyt tar den en rad for seg selv. Her løftes den ut av flyten og * forankres i samme toppkant som tittelen. Begge får samme høyde - oppgitt i * rem, ikke em, siden de to arver hver sin skriftstørrelse - og da faller * midtlinjene sammen av seg selv. */ :root .wc-block-components-drawer__close-wrapper { position: absolute; top: var(--ft-skuff-topp); right: var(--wp--preset--spacing--m); z-index: var(--wp--custom--lag--flate); display: flex; align-items: center; height: 2.25rem; margin: 0; } /* * Knappen har WooCommerce sin `contained`-klasse, altså en fylt knapp med hvitt * ikon. Når vi tar bort fyllet blir krysset hvitt på hvitt, så fargen må settes * på nytt - og ikonet må be om `currentColor` for å følge den i det hele tatt. */ /* * Lukkeknappen er en lys blå rute, som på referansesiden - ikke en naken strek. * Fyllet gjør den til et tydelig mål uten å ta oppmerksomhet fra tittelen. */ /* * WooCommerce murer igjen denne knappen med `!important`: * * background: transparent !important; * color: inherit !important; * padding: 1em !important; * position: absolute !important; * opacity: .6; * * Vekt hjelper ikke mot det, så fyllet må settes med samme middel. Padding og * marg røres ikke: de to holder knappen der den står, og plasseringen sitter * nå riktig. `opacity` er ikke låst, og det er den som gjør krysset blekt. */ :root .wc-block-components-button.wc-block-components-drawer__close { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; /* Ingen flate i hvile - ruta er en hover-tilstand, ikke en knappeflate. */ background: transparent !important; color: var(--wp--preset--color--tekst) !important; /* WooCommerce demper krysset til 60 %. Det skal være like svart som tittelen. */ opacity: 1; box-shadow: none; border: 0; border-radius: 3px; min-height: 0; transition: background var(--wp--custom--overgang--rask) ease; } /* * `max-width: none` er ikke pynt: nullstillingen øverst i fila gir alle svg-er * `max-width: 100%`, og prosenten regnes av forelderens innholdsbredde. Med * WooCommerce sin `padding: 1em !important` blir den null - og ikonet null. */ :root .wc-block-components-button.wc-block-components-drawer__close svg { flex: 0 0 auto; width: 0.85rem; height: 0.85rem; max-width: none; fill: currentColor; } /* * Hover henges på omslaget, ikke på knappen. * * WooCommerce gir knappen `margin: -1em` sammen med `padding: 1em`, så dens * egen boks ligger forskjøvet i forhold til ruta vi tegner. Pekeren traff * derfor kanten i stedet for flaten, og fargen blinket først idet man forlot * den. Omslaget er en rolig 2,25rem-boks på riktig sted, og treffer hver gang. */ /* * Hover henges på omslaget, ikke bare på knappen: WooCommerce gir knappen * `margin: -1em` sammen med `padding: 1em`, så dens egen boks ligger litt * forskjøvet i forhold til ruta vi tegner. * * Fargen er ren lys-blaa blandet mørkere. Ren `lys-blaa` er 96 % hvit, og på en * liten rute mot hvit skuff - med musepekeren oppå - ser man den knapt. Den * skal leses som en tilstand, ikke bare måles i et fargeoppslag. */ :root .wc-block-components-drawer__close-wrapper:hover .wc-block-components-drawer__close, :root .wc-block-components-button.wc-block-components-drawer__close:hover { background: color-mix(in srgb, var(--wp--preset--color--lys-blaa) 88%, var(--wp--preset--color--tekst)) !important; opacity: 1; } /* * Antallet står som et eget tall etter tittelen. Den lyse blå pilla skiller det * fra overskriften uten å rope, slik referansen gjør det. */ :root .wc-block-mini-cart__title .wc-block-mini-cart__title-items-counter, :root .wp-block-woocommerce-mini-cart-title-items-counter-block { display: inline-flex; align-items: center; margin-inline-start: 0.5em; padding: 0.1em 0.7em; background: var(--wp--preset--color--lys-blaa); border-radius: var(--wp--custom--radius--pille); color: var(--wp--preset--color--tekst); font-family: var(--wp--preset--font-family--detalj); font-size: var(--wp--preset--font-size--brodtekst-s); font-weight: 600; line-height: 1.6; } /* Tom kurv: dempet og midtstilt, ikke en feilmelding. */ :root .ft-vogn__tom { margin-block: var(--wp--preset--spacing--xxl) var(--wp--preset--spacing--m); color: var(--wp--preset--color--tekst-svak); } /* Bunnen bæres av en hårstrek, slik at totalen løftes fra produktlista. */ :root .wc-block-mini-cart__footer { padding-block-start: var(--wp--preset--spacing--s); border-block-start: var(--wp--custom--linje); } :root .wc-block-mini-cart__footer-subtotal { font-family: var(--wp--preset--font-family--detalj); font-size: var(--wp--preset--font-size--brodtekst-l); font-variant-numeric: tabular-nums; } /* * To knapper under hverandre, ikke ved siden av: «Gå til kassen» er handlingen, * «Vis handlekurv» er omveien. Referansen gir kassen hele bredden. */ :root .wc-block-mini-cart__footer-actions { display: flex; flex-direction: column-reverse; gap: var(--wp--preset--spacing--xs); } :root .wc-block-mini-cart__footer-checkout, :root .wc-block-mini-cart__footer-cart, :root .wc-block-mini-cart__shopping-button a { display: flex; align-items: center; justify-content: center; width: 100%; padding-block: 0.9em; border-radius: var(--wp--custom--radius--kant); font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--brodtekst); font-weight: 600; text-decoration: none; } :root .wc-block-mini-cart__footer-checkout, :root .wc-block-mini-cart__shopping-button a { background: var(--wp--preset--color--gul); color: var(--wp--preset--color--hvit); border: 0; } :root .wc-block-mini-cart__footer-cart { background: transparent; color: var(--wp--preset--color--tekst); border: 1px solid var(--wp--preset--color--tekst); } :root .wc-block-mini-cart__footer-checkout:hover, :root .wc-block-mini-cart__shopping-button a:hover { background: var(--wp--preset--color--tekst-hover); color: var(--wp--preset--color--hvit); } :root .wc-block-mini-cart__footer-cart:hover { background: var(--wp--preset--color--lys-blaa); } /* ========================================================================== Kvittering på «Legg i handlekurv» ========================================================================== Knappen blir mørk med en hake i to sekunder og går så tilbake. Klassen `.ft-lagt` settes og fjernes av assets/js/kurvknapp.js; alt det visuelle ligger her. -------------------------------------------------------------------------- */ :root { --ft-hakeikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } /* * Etiketten på kjøpsknappen skal rulle når man legger i kurven, men ikke når man tar ut igjen. * * WooCommerce animerer teksten ved hver tilstandsendring: den gamle etiketten får * `.wc-block-slide-out` (`translateY(0)` -> `translateY(-100%)`, med `forwards`) og den nye får * `.wc-block-slide-in` (fra `translateY(90%)` og gjennomsiktig). Begge veier, uten å vite hvilken * vei kurven gikk. * * Når man legger i kurven er rullingen fin: den følger vår egen mørke knapp med hake, og de to * leses som én bevegelse. Når man fjerner varen fra skuffen er det bare tekst som ruller - og siden * `reset_product_button_label()` i functions.php gir begge tilstandene samme etikett, ruller * «Legg i handlekurv» ut og en identisk «Legg i handlekurv» inn. Det leses som en feil. * * CSS kan ikke se hvilken retning kurven gikk, men det kan `.ft-lagt`: den settes av * assets/js/kurvknapp.js på klikk og ligger på knappen i to sekunder etterpå - altså nøyaktig når * man legger noe i kurven, og aldri når noe fjernes et annet sted på siden. Så animasjonen får stå * urørt mens den klassen er der, og slås av ellers. * * Animasjonen kan ikke bare slås av, for den er ikke pynt - den er selve maskineriet. Det er én og * samme `span` hele veien (`data-wp-text`, `data-wp-class--wc-block-slide-in/out` og * `data-wp-on--animationend` sitter på samme element i ProductButton.php), og teksten byttes først * når `animationend` fyrer. Ruller etiketten ut, fyrer `animationend`, bytter teksten, ruller inn. * * Å sette `animation-duration: 0s`, som var forrige forsøk, fjernet derfor ikke dansen - den * presset bare hele sekvensen inn i én bildeflate. Det var det som først så ut som «bare raskere» * og siden som et glitch. * * Her byttes i stedet bare *navnet* på animasjonen, til en som ikke flytter noe. Varighet, antall * og `forwards` kommer fortsatt fra WooCommerce, `animationend` fyrer til riktig tid og teksten * byttes som den skal - det eneste som forsvinner, er bevegelsen. * * Velgeren speiler WooCommerces egen (fire klasser og en type); `:root` og `:not()` legger oss over. */ @keyframes ft-ingen-rull { from, to { opacity: 1; transform: none; } } :root .wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button:not(.ft-lagt) span.wc-block-slide-out, :root .wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button:not(.ft-lagt) span.wc-block-slide-in { animation-name: ft-ingen-rull; } :root .wc-block-components-product-button .wp-block-button__link.ft-lagt { background: var(--wp--preset--color--tekst); color: var(--wp--preset--color--hvit); } /* Vognen byttes til en hake - samme plass, samme størrelse. */ :root .wc-block-components-product-button .wp-block-button__link.ft-lagt::before { -webkit-mask-image: var(--ft-hakeikon); mask-image: var(--ft-hakeikon); } /* * Etiketten står i et span som WooCommerce skriver teksten sin inn i. Vi rører * ikke innholdet - det ville blitt overskrevet ved neste oppdatering - men * krymper det bort og legger vår egen tekst i et ::after, som lever i CSS og * derfor overlever at `textContent` byttes ut. */ :root .wc-block-components-product-button .wp-block-button__link.ft-lagt > span { font-size: 0; } :root .wc-block-components-product-button .wp-block-button__link.ft-lagt > span::after { content: "Lagt i handlekurven"; font-size: var(--wp--preset--font-size--brodtekst-s); } /* * «Vis handlekurv» under knappen er overflødig nå som skuffen åpner seg av seg * selv. * * Både lenka og spannet rundt den må bort. WooCommerce pakker lenka i et * `` som vises så snart varen ligger i kurven; skjuler man bare lenka, * blir spannet stående igjen som en tom tekstlinje. Den linja dyttet pris og * knapp omtrent 12 px opp i akkurat det kortet - kortet så «løftet» ut, mens * det egentlig var naboene som sto lavere. */ .wc-block-product-template .wc-block-components-product-button .added_to_cart, .wc-block-product-template .wc-block-components-product-button span:has(> .added_to_cart) { display: none !important; } /* -------------------------------------------------------------------------- Tom handlekurv -------------------------------------------------------------------------- WooCommerce legger både tittel og bunn inne i blokka for en *fylt* kurv, så en tom skuff står igjen med bare meldinga. Referansen beholder rammen: samme tittelrad øverst, samme bunn nederst, bare uten tall å vise. Tittel og bunn under er derfor våre egne - de trenger ingen data, for en tom kurv er alltid null varer og null kroner. -------------------------------------------------------------------------- */ :root .ft-vogn__topp { display: flex; align-items: center; gap: 0.55rem; min-height: 2.25rem; padding-block: 0 var(--wp--preset--spacing--s); padding-inline-end: 2.5rem; margin: 0; border-block-end: var(--wp--custom--linje); font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--brodtekst-l); font-weight: 600; line-height: 1.3; } :root .ft-vogn__topp::before { content: ""; flex: 0 0 auto; width: 1.5em; height: 1.5em; background: currentColor; -webkit-mask: var(--ft-vognikon) center / contain no-repeat; mask: var(--ft-vognikon) center / contain no-repeat; } :root .ft-vogn__antall { display: inline-flex; align-items: center; padding: 0.1em 0.7em; background: var(--wp--preset--color--lys-blaa); border-radius: var(--wp--custom--radius--pille); font-family: var(--wp--preset--font-family--detalj); font-size: var(--wp--preset--font-size--brodtekst-s); font-weight: 600; line-height: 1.6; } /* * Den tomme blokka skal fylle skuffen, ikke sentreres i den. * * WooCommerce sentrerer den som et lite innhold midt i en stor flate. Da * flyter tittel, melding og bunn sammen midt på skjermen. `flex: 1` og * `align-self: stretch` lar den strekke seg i stedet - og `min-height: 100%` * gjør ingenting her, for prosenten har ingen fast høyde å regne av. * Meldinga får resten av plassen, og bunnen havner nederst av seg selv. */ :root .wp-block-woocommerce-empty-mini-cart-contents-block { /* * Fyller skuffen ved å festes til den, ikke ved å be om høyde. * * WooCommerce sentrerer denne blokka som et lite innhold i en stor flate, * og verken `min-height: 100%` eller `flex: 1` kom forbi det. Innholds- * wrapperen har allerede `position: relative` og spenner hele skuffen - det * er den lukkeknappen måles mot - så her forankres blokka i den i stedet. * `100vh` ville vært en gjetning på samme høyde: admin-linja forskyver den, * og på mobil endrer `vh` seg når nettleserlinja gir seg. * * Toppen er den samme `--ft-skuff-topp` som lukkeknappen, så tittelen her * havner på nøyaktig samme linje som i en fylt kurv. */ position: absolute; top: var(--ft-skuff-topp); right: var(--wp--preset--spacing--m); bottom: var(--wp--preset--spacing--s); left: var(--wp--preset--spacing--m); /* * WooCommerce gir blokka `height: 100%`. Sammen med `top` over ville den * rent ut under skuffen; `auto` lar top og bottom bestemme høyden i stedet. */ height: auto; display: flex; flex-direction: column; /* * Og `justify-content: center`, som er den egentlige grunnen til at tittel, * melding og bunn klumpet seg midt på: blokka fylte skuffen hele tiden, men * pakket barna sammen i midten. Her legger de seg fra toppen, og meldinga * tar plassen som blir til overs. */ justify-content: flex-start; } /* * WooCommerce pakker innholdet vårt i sin egen div inne i den tomme blokka. * * Den pakken vokser ikke: blokka var 925 px høy, mens pakken ble stående på * 300 og la seg øverst. Alt vi hadde stylet - kolonnen, den automatiske * margen i bunnen - satt ett nivå for langt ned og hadde ingen plass å virke * i. Her er det pakken som får kolonnen og høyden, og da faller resten på * plass av seg selv. * * Selektoren går på barnet, ikke på klassenavnet: navnet er WooCommerce sitt * indre anliggende og kan skifte, mens «det ene barnet» blir stående. */ :root .wp-block-woocommerce-empty-mini-cart-contents-block > * { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; /* * Pakken har 48 px egen toppluft. Den dyttet tittelen ned til 116 mens * krysset sto på 66, og ødela linja de skal dele. Toppen eies av `top` på * blokka over - her skal det ikke legges noe oppå. */ padding-block-start: 0; } /* Meldinga står like under tittelen, med luft over seg. */ :root .ft-vogn__tom { margin-block: var(--wp--preset--spacing--xl) 0; } /* * `margin-block-start: auto` dytter bunnen ned, i stedet for at meldinga over * må vokse. Samme grep som holder kjøpsknappen i bunnen av produktkortene: * den frie marginen spiser all plassen som blir til overs i en flex-kolonne, * og den bryr seg ikke om hva WooCommerce har bestemt om barna ellers. */ :root .ft-vogn__bunn { margin-block-start: auto; padding-block-start: var(--wp--preset--spacing--s); border-block-start: var(--wp--custom--linje); } :root .ft-vogn__sum { display: flex; align-items: baseline; justify-content: space-between; margin-block: 0 var(--wp--preset--spacing--xs); font-weight: 600; } :root .ft-vogn__sum-tall { font-family: var(--wp--preset--font-family--detalj); font-size: var(--wp--preset--font-size--brodtekst-l); font-variant-numeric: tabular-nums; } /* * «Gå til kassen» er med for formens skyld når kurven er tom - den viser hvor * knappen kommer til å stå. Den er et span, ikke en lenke: en tom kurv har * ingenting å gå til kassen med, og da skal den heller ikke kunne klikkes. */ :root .ft-vogn__kasse-av { display: flex; align-items: center; justify-content: center; width: 100%; padding-block: 0.9em; background: color-mix(in srgb, var(--wp--preset--color--gul) 45%, var(--wp--preset--color--hvit)); color: var(--wp--preset--color--hvit); border-radius: var(--wp--custom--radius--kant); font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--brodtekst); font-weight: 600; cursor: default; } /* ========================================================================== Produktsiden ========================================================================== Malen lå ikke i temaet i det hele tatt - WooCommerce sin egen ble brukt, og den kjenner ingen av reglene våre. `templates/single-product.html` er nå vår, og alt under her kler den opp: brødsmuler på lys stripe, kategori som merkelapp, tittel i display-skriften, pris stort, og kjøpsraden samlet. -------------------------------------------------------------------------- */ /* * Brødsmulestripa er en tynn linje over innholdet, ikke et bånd. * * Teksten inni har sine egne marger fra WooCommerce; de nulles her, ellers * legger de seg til høyden og teksten havner i overkant av en for høy stripe. */ :root .ft-brodsmuler { /* * Stripa er et `.ft-band` som alle andre - det er slik den får nøyaktig * samme tekstbredde som menyen over. Å kopiere bredden inn hit som en * variabel var ikke nok; her arves hele oppsettet i stedet. Bare luften * over og under settes om, siden dette er en strek og ikke et bånd. */ padding-block: var(--wp--preset--spacing--xxs); background: var(--wp--preset--color--lys-blaa); font-size: var(--wp--preset--font-size--brodtekst-s); line-height: 1.5; } /* 8 px paa hver side, som paa frutimian.no - maalt paa deres eget skilletegn. */ :root .ft-brodsmuler__skille { display: inline-block; margin-inline: 0.5rem; color: var(--wp--preset--color--tekst-svak); } :root .ft-brodsmuler > *, :root .ft-brodsmuler .wc-block-breadcrumbs, :root .ft-brodsmuler p, :root .ft-brodsmuler nav { margin-block: 0; } /* * Produktet begynner rett under stripa. Båndet har ellers `xxl` på toppen, * som er riktig mellom to bånd, men blir et tomrom rett under en hårtynn * stripe som allerede markerer starten på siden. */ :root .ft-brodsmuler + .ft-band { padding-block-start: var(--wp--preset--spacing--l); } :root .ft-brodsmuler .wc-block-breadcrumbs { margin: 0; color: var(--wp--preset--color--tekst-svak); } /* * Graden settes paa selve `nav`-en, ikke paa bandet rundt. * * WooCommerce gir `.woocommerce-breadcrumb` `font-size: .92em`, og `em` regner seg ut fra det den * arver: 14 px paa bandet ble 12,88 px her. Derfor et absolutt tall i stedet, paa noden som faktisk * baerer teksten - da har Woos ledd ingenting aa gange med. */ :root .ft-brodsmuler .woocommerce-breadcrumb { font-size: var(--wp--preset--font-size--brodtekst-s); } :root .ft-brodsmuler a { color: inherit; text-decoration: none; } :root .ft-brodsmuler a:hover { text-decoration: underline; text-underline-offset: 0.18em; } /* Bildet og teksten side om side, med luft mellom. */ :root .ft-produkt__rad { gap: var(--wp--preset--spacing--xl); } :root .ft-produkt__galleri img { border-radius: var(--wp--custom--radius--kant); } /* Kategorien står som en liten merkelapp over tittelen, slik referansen gjør. */ :root .ft-produkt__merkelapp { margin-block: 0 var(--wp--preset--spacing--xs); } :root .ft-produkt__merkelapp a { display: inline-block; padding: 0.25em 0.9em; background: var(--wp--preset--color--lys-blaa); border-radius: var(--wp--custom--radius--pille); color: var(--wp--preset--color--tekst); font-family: var(--wp--preset--font-family--detalj); font-size: var(--wp--preset--font-size--brodtekst-s); text-decoration: none; } /* * 3rem/48px, maalt mot forbildet - ikke `display-s` (36px), som var det naermeste trinnet paa * skalaen. Stoerrelsen staar i CSS og ikke som `fontSize` paa blokka, fordi kjernen skriver * forhaandsdefinerte stoerrelser med `!important` (se beslutning 5): attributtet ville vunnet over * enhver temaregel, og da maa tallet uansett bo her. */ :root .ft-produkt__tittel { margin-block: 0 var(--wp--preset--spacing--xs); font-size: 3rem; line-height: 1.05; } /* Broedskrifta paa 1,75rem/28px, som forbildet - ikke detaljskrifta paa 36px. */ :root .ft-produkt__pris { margin-block: 0 var(--wp--preset--spacing--s); font-family: var(--wp--preset--font-family--brod); font-size: 1.75rem; font-variant-numeric: tabular-nums; font-weight: 400; line-height: 1.1; } /* -------------------------------------------------------------------------- Tilbudsprisen paa produktsida Samme grep som i kortene, i stoerre format: tilbudsprisen foerst og stor, foerprisen etter den, mindre og dempet. WooCommerce skriver `` foer `` i markupen og det kan vi ikke endre - men i en flexboks bestemmer `order` rekkefoelgen uten aa roere DOM-en. `:has(> ins)` avgjoer hvor flexboksen havner: blokka pakker prisen i et lag ekstra i noen sammenhenger, og regelen skal treffe det elementet som faktisk har `del` og `ins` som barn - ikke et lag over eller under. -------------------------------------------------------------------------- */ :root :is(.ft-produkt__pris, .ft-produkt__pris .wc-block-components-product-price):has(> ins) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4em; } /* * Alt annet - mva-suffikset, skjulte hjelpetekster - legger seg bakerst. * * Merk at `ins` og `del` under maa skrives i begge dybder, ikke bare den korte. Denne regelen * veier (0,3,0) i den lange varianten, og en `:root .ft-produkt__pris ins` veier (0,2,1) - altsaa * mindre. Da vant `order: 3` over `order: 1`, og prisene sto igjen i DOM-rekkefoelgen med * foerprisen foerst. Samme par i kortene virker fordi begge regler der har like mange klasser. */ :root .ft-produkt__pris > *, :root .ft-produkt__pris .wc-block-components-product-price > * { order: 3; } /* * Fargen er `gul` blandet 20 % mot tekstfargen: maalt til #BA7E27 paa forbildet, og denne * blandinga lander paa #B87F05. Ren `gul` (#E09900) ligger paa 2,4:1 mot hvitt og er for lys til * aa baere et tall; blandinga gir 3,5:1, som holder for stor tekst - og prisen er 28px halvfet. */ :root .ft-produkt__pris ins, :root .ft-produkt__pris .wc-block-components-product-price ins { order: 1; color: color-mix(in srgb, var(--wp--preset--color--gul) 80%, var(--wp--preset--color--tekst)); font-weight: 600; text-decoration: none; } /* Foerprisen er mindre og dempet, ikke bare gjennomstreket. 0,7em er forholdet i forbildet. */ :root .ft-produkt__pris del, :root .ft-produkt__pris .wc-block-components-product-price del { order: 2; font-size: 0.7em; color: var(--wp--preset--color--tekst-svak); opacity: 0.85; } :root .ft-produkt__pris .woocommerce-price-suffix { font-size: 0.6em; color: var(--wp--preset--color--tekst-svak); } :root .ft-produkt__ingress { margin-block: 0 var(--wp--preset--spacing--m); color: var(--wp--preset--color--tekst-svak); max-width: 42rem; } /* * Kjøpsraden kommer fra WooCommerce sitt klassiske skjema, ikke fra blokker. * Antall og knapp legges under hverandre: knappen skal ha hele bredden, som på * referansen, og da blir den også et rolig mål på mobil. */ :root .ft-produkt__info form.cart { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--xs); margin-block: 0 var(--wp--preset--spacing--m); } /* * Antallsvelgeren: «Antall:» ved siden av en lys pille med − og +. * * Knappene settes inn av assets/js/kurvknapp.js. Selve tallfeltet blir stående * - det er det WooCommerce sender inn - men det kles av: ingen ramme, ingen * bakgrunn og ingen av nettleserens egne piler, så pilla leser som én kontroll. */ :root .ft-produkt__info .ft-antall { display: flex; align-items: center; gap: var(--wp--preset--spacing--xs); } :root .ft-produkt__info .ft-antall__etikett { font-size: var(--wp--preset--font-size--brodtekst-s); font-weight: 500; } :root .ft-produkt__info form.cart .quantity { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem; background: var(--wp--preset--color--lys-blaa); border-radius: var(--wp--custom--radius--pille); } :root .ft-produkt__info .ft-antall__knapp { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; background: transparent; color: var(--wp--preset--color--tekst); border: 0; border-radius: 50%; font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--brodtekst-l); line-height: 1; cursor: pointer; transition: background var(--wp--custom--overgang--rask) ease; } :root .ft-produkt__info .ft-antall__knapp:hover { background: color-mix(in srgb, var(--wp--preset--color--lys-blaa) 80%, var(--wp--preset--color--tekst)); } :root .ft-produkt__info form.cart .quantity input.qty { width: 2.5rem; padding: 0; background: transparent; border: 0; font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--brodtekst); font-weight: 600; text-align: center; /* Bort med nettleserens egne opp/ned-piler - knappene våre erstatter dem. */ -moz-appearance: textfield; appearance: textfield; } :root .ft-produkt__info form.cart .quantity input.qty::-webkit-outer-spin-button, :root .ft-produkt__info form.cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } :root .ft-produkt__info form.cart .quantity input.qty:focus-visible { outline: 2px solid var(--wp--preset--color--gul); outline-offset: 2px; } :root .ft-produkt__info form.cart button.single_add_to_cart_button { display: flex; align-items: center; justify-content: center; gap: 0.5em; width: 100%; padding-block: 0.95em; background: var(--wp--preset--color--gul); color: var(--wp--preset--color--hvit); border: 0; border-radius: var(--wp--custom--radius--kant); font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--brodtekst); font-weight: 600; cursor: pointer; transition: background var(--wp--custom--overgang--rask) ease; } :root .ft-produkt__info form.cart button.single_add_to_cart_button::before { content: ""; width: 1.1em; height: 1.1em; flex-shrink: 0; background: currentColor; -webkit-mask: var(--ft-vognikon) center / contain no-repeat; mask: var(--ft-vognikon) center / contain no-repeat; } :root .ft-produkt__info form.cart button.single_add_to_cart_button:hover { background: var(--wp--preset--color--tekst-hover); } /* SKU og kategori er opplysninger, ikke innhold - de kan stå dempet nederst. */ :root .ft-produkt__meta { gap: var(--wp--preset--spacing--s); padding-block-start: var(--wp--preset--spacing--s); border-block-start: var(--wp--custom--linje); color: var(--wp--preset--color--tekst-svak); font-size: var(--wp--preset--font-size--brodtekst-s); } :root .ft-produkt__meta a { color: inherit; } /* * Overskriftene i beskrivelsen står i brødskriften, ikke i display-skriften. * * Display-skriften er til båndtitler - store, få, og satt av oss. Her kommer * overskriftene fra produktteksten, og de kan være lange («Handlenett - * Balkongdamen 34 x 34 x 20,5 cm - à 12 stk»). I Amatic tok de halve kolonnen * og leste som en ny sidetittel i stedet for et avsnitt i en beskrivelse. */ :root .ft-produkt__detaljer h1, :root .ft-produkt__detaljer h2, :root .ft-produkt__detaljer h3, :root .ft-produkt__detaljer h4 { margin-block: var(--wp--preset--spacing--s) var(--wp--preset--spacing--xxs); font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--tittel-m); font-weight: 600; line-height: 1.35; text-transform: none; } /* Fanenavnene er navigasjon, ikke innhold - de holdes små og rolige. */ :root .ft-produkt__detaljer .wc-tabs li a, :root .ft-produkt__detaljer .wp-block-woocommerce-product-details h2:first-child { font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--brodtekst); font-weight: 600; } /* * Broedteksten i detaljene staar i full stoerrelse (16 px), ikke den smaa. * Dette er produktets egen tekst - den skal leses, ikke slaas opp. */ :root .ft-produkt__detaljer p, :root .ft-produkt__detaljer li { font-size: var(--wp--preset--font-size--brodtekst); line-height: 1.6; } /* -------------------------------------------------------------------------- Produktgalleriet -------------------------------------------------------------------------- Galleriet er WooCommerce sitt klassiske flexslider-oppsett, ikke en blokk. Det lener seg på flyt og på bredder satt i JavaScript, og kolliderte med nullstillingen vår - hovedbildet ble stående lite og midtstilt, og miniatyrene la seg oppå hverandre. Her settes bredden og rutenettet i CSS i stedet, så oppsettet ikke er avhengig av hva slideren rekker å regne ut. -------------------------------------------------------------------------- */ /* * `!important` her er mot innebygde stiler, ikke mot andre regler. * * Flexslider skriver bredder rett på elementene når den starter - og en * innebygd stil slår enhver vanlig regel i et stilark. Målingen viste det * tydelig: lista vår ble `display: grid` som den skulle, mens bildene ble * stående på 512 og 29 piksler, altså sin egen naturlige størrelse. Det er * bare `!important` som kommer forbi det. */ /* * Blokkinnpakningen har `max-width: 512px` fra WooCommerce. * * Det er den som har holdt hele galleriet igjen: kolonnen er 807 px, men alt * innenfor regnet sine 100 % av 512. Taket må vekk her, ellers hjelper ingen * bredde lenger inn. */ :root .ft-produkt__galleri .wp-block-woocommerce-product-image-gallery { width: 100%; max-width: none; } /* Woo flyter galleriet til venstre i 48 % - vi vil ha hele kolonnen. */ :root .ft-produkt__galleri div.woocommerce-product-gallery { position: relative; width: 100% !important; margin: 0; float: none; } :root .ft-produkt__galleri .woocommerce-product-gallery__wrapper { margin: 0; padding: 0; } :root .ft-produkt__galleri .woocommerce-product-gallery__image, :root .ft-produkt__galleri .woocommerce-product-gallery__image a { display: block; width: 100%; } :root .ft-produkt__galleri .woocommerce-product-gallery__wrapper, :root .ft-produkt__galleri .woocommerce-product-gallery__image { width: 100% !important; } :root .ft-produkt__galleri .woocommerce-product-gallery__image img { width: 100% !important; height: auto !important; max-width: none !important; border-radius: var(--wp--custom--radius--kant); } /* Forstørrelsesglasset hører til bildet, oppe i hjørnet. */ :root .ft-produkt__galleri .woocommerce-product-gallery__trigger { position: absolute; top: var(--wp--preset--spacing--xs); right: var(--wp--preset--spacing--xs); z-index: var(--wp--custom--lag--flate); display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; background: var(--wp--preset--color--hvit); border-radius: 50%; box-shadow: var(--wp--custom--skygge--heving); text-decoration: none; } /* * Miniatyrene som rutenett, ikke som flytende lister. Det er flyten som gjorde * at de la seg oppå hverandre når bildene har ulike høyder. */ :root .ft-produkt__galleri .flex-control-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--wp--preset--spacing--xs); margin: var(--wp--preset--spacing--xs) 0 0; padding: 0; list-style: none; } :root .ft-produkt__galleri .flex-control-thumbs li { float: none; width: auto; margin: 0; list-style: none; } :root .ft-produkt__galleri .flex-control-thumbs img { width: 100% !important; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--wp--custom--radius--kant); cursor: pointer; opacity: 0.65; transition: opacity var(--wp--custom--overgang--rask) ease; } :root .ft-produkt__galleri .flex-control-thumbs img:hover, :root .ft-produkt__galleri .flex-control-thumbs img.flex-active { opacity: 1; outline: 2px solid var(--wp--preset--color--gul); outline-offset: -2px; } /* Flere kategorier skal stå som merkelapper ved siden av hverandre, uten komma. */ :root .ft-produkt__merkelapp { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--xxs); } /* * Galleriet uten slider: ett stort bilde og en rad små under. * * WooCommerce skriver nå ut alle bildene etter hverandre i wrapperen. Rutenettet * gir det første bildet hele bredden og stiller resten opp under - samme form * som referansen, men uten JavaScript som regner bredder bak ryggen på oss. */ /* * Hovedbildet over, miniatyrene i en stripe under som ruller sidelengs. Stripa lages av * `karusell.js`: WooCommerce skriver alle bildene som soesken, og et rutenett kan ikke rulle - * derfor maa miniatyrene faa en boks rundt seg foer de kan bli en rad. * * Stoerrelsen er fast og ikke en brøkdel av kolonna: en miniatyr som vokser med galleriet ble * en liten utgave av hovedbildet i stedet for en miniatyr. */ :root .ft-produkt__galleri .woocommerce-product-gallery__wrapper { display: block; width: 100% !important; } :root .ft-produkt__galleri .ft-galleri__stripe { display: flex; gap: var(--wp--preset--spacing--xs); margin-block-start: var(--wp--preset--spacing--xs); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-inline: contain; } :root .ft-produkt__galleri .ft-galleri__stripe::-webkit-scrollbar { display: none; } /* * Fire miniatyrer fyller nøyaktig bredden på hovedbildet: bredden regnes ut fra stripa, ikke * settes i piksler, så den følger galleriet i alle vindusbredder - og den femte titter så vidt * fram i kanten og forteller at stripa fortsetter. */ :root .ft-produkt__galleri .ft-galleri__stripe .woocommerce-product-gallery__image { flex: 0 0 calc((100% - 3 * var(--wp--preset--spacing--xs)) / 4); scroll-snap-align: start; } :root .ft-produkt__galleri .woocommerce-product-gallery__image:not(:first-child) img { width: 100% !important; height: auto !important; aspect-ratio: 1; object-fit: cover; } /* * Miniatyrene får en tynn gul ramme med en luftspalte inn til bildet - ved * hover og på det som vises stort, slik referansen gjør det. * * `outline`, ikke `border`: en kantlinje ville lagt seg til bredden på ruta og * fått hele rekka til å hoppe når pekeren passerte. Utlinja tegnes utenfor * boksen og rører ikke oppsettet. */ :root .ft-produkt__galleri .woocommerce-product-gallery__image:not(:first-child) { border-radius: var(--wp--custom--radius--kant); outline: 2px solid transparent; /* Rammen ligger inntil bildet - ingen hvit spalte imellom. */ outline-offset: 0; transition: outline-color var(--wp--custom--overgang--rask) ease; } :root .ft-produkt__galleri .woocommerce-product-gallery__image:not(:first-child):hover, :root .ft-produkt__galleri .woocommerce-product-gallery__image.ft-galleri__valgt { outline-color: var(--wp--preset--color--gul); } /* Det lille bildet skal se ut som noe man kan trykke på. */ :root .ft-produkt__galleri .woocommerce-product-gallery__image:not(:first-child) { cursor: pointer; } /* * Kopien som er hovedbilde spenner hele bredden, slik det første bildet gjorde. * * Den er også låst til et kvadrat. Bildene har ulike høyde/bredde-forhold, og * med fri høyde endret hele kolonnen seg hver gang man byttet motiv - teksten * ved siden av hoppet med. * * `cover` fyller ruta. `contain` ville vist hvert bilde helt, men la en hvit * kant over og under de liggende motivene, og da så produktet mindre ut enn * det er. Prisen er at de bredeste bildene beskjæres litt i sidene. */ :root .ft-produkt__galleri .ft-galleri__hoved { grid-column: 1 / -1; } :root .ft-produkt__galleri .ft-galleri__hoved img { aspect-ratio: 1; object-fit: cover; background: var(--wp--preset--color--hvit); } /* * Relaterte produkter på rad. * * Woo sitt eget rutenett slår ikke inn i dette bandet, og kortene la seg * oppå hverandre. Her settes rutenettet eksplisitt. Det er trygt så lenge det * er avgrenset til `.ft-relaterte`: på forsiden regner WooCommerce * kolonnebredden med sin egen gap innbakt, og der skal vi ikke røre den. */ :root .ft-relaterte .wc-block-product-template { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--preset--spacing--l); margin: 0; padding: 0; list-style: none; } @media (max-width: 60rem) { :root .ft-relaterte .wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* -------------------------------------------------------------------------- Kjøpsraden på produktsiden -------------------------------------------------------------------------- `add-to-cart-with-options` erstatter WooCommerce sitt klassiske skjema. Den legger i kurven uten å laste siden på nytt, så skuffen åpner seg og knappen får den samme mørke kvitteringen som kortene i listene. Antallsvelgeren er Woo sin egen «stepper» - vi kler den bare i vår lyse pille. -------------------------------------------------------------------------- */ :root .ft-produkt__info .wp-block-woocommerce-add-to-cart-with-options { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--xs); margin-block: 0 var(--wp--preset--spacing--m); } /* * «Antall:» kommer fra CSS, ikke fra malen. * * `add-to-cart-with-options` ser bort fra innholdet vi legger inni den og * rendrer sin egen mal per produkttype. Vi eier altså ikke markupen her, men * vi kan sette etiketten foran raden og la knappen få hele bredden under. */ :root .ft-produkt__info .wp-block-woocommerce-add-to-cart-with-options .wp-block-group:has(.wc-block-add-to-cart-with-options__quantity-selector) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--xs); } :root .ft-produkt__info .wp-block-woocommerce-add-to-cart-with-options .wp-block-group:has(.wc-block-add-to-cart-with-options__quantity-selector)::before { content: "Antall:"; font-size: var(--wp--preset--font-size--brodtekst-s); font-weight: 500; } :root .ft-produkt__info .wp-block-woocommerce-add-to-cart-with-options .wc-block-components-product-button { flex: 1 1 100%; } /* * Pilla har ingen egen luft rundt knappene. * * Referansens knapper fyller hver sin ende av pilla: avrundet ytterst, rett inn mot tallet - en * D-form. Vår gamle variant hadde `gap` og `padding` her og `border-radius: 50%` på knappene, så * markeringen ble en sirkel som svevde inne i pilla med en lyseblå kant rundt. Det er den forskjellen * man ser når man trykker. * * `overflow: hidden` er det som gjør at knappehjørnene følger pillas runding i stedet for å stikke * utenfor, og da slipper knappene å kjenne til pillas radius i det hele tatt. */ :root .ft-produkt__info .wc-block-add-to-cart-with-options__quantity-selector { display: inline-flex; align-items: center; gap: 0; padding: 0; overflow: hidden; background: var(--wp--preset--color--lys-blaa); border: 0; border-radius: var(--wp--custom--radius--pille); } :root .ft-produkt__info .wc-block-add-to-cart-with-options__quantity-selector button { display: flex; align-items: center; justify-content: center; /* * 2.5rem høy: samme totalhøyde som før, da pilla hadde 0.25rem padding over og under en * 2rem knapp. Nå bærer knappen hele høyden selv. */ width: 2.25rem; height: 2.5rem; padding: 0; background: transparent; color: var(--wp--preset--color--tekst); border: 0; border-radius: 0; font-size: var(--wp--preset--font-size--brodtekst-l); line-height: 1; cursor: pointer; transition: background var(--wp--custom--overgang--rask) ease; } :root .ft-produkt__info .wc-block-add-to-cart-with-options__quantity-selector button:hover { background: color-mix(in srgb, var(--wp--preset--color--lys-blaa) 80%, var(--wp--preset--color--tekst)); } :root .ft-produkt__info .wc-block-add-to-cart-with-options__quantity-selector button:first-of-type { border-start-start-radius: var(--wp--custom--radius--pille); border-end-start-radius: var(--wp--custom--radius--pille); } :root .ft-produkt__info .wc-block-add-to-cart-with-options__quantity-selector button:last-of-type { border-start-end-radius: var(--wp--custom--radius--pille); border-end-end-radius: var(--wp--custom--radius--pille); } :root .ft-produkt__info .wc-block-add-to-cart-with-options__quantity-selector input { width: 2.5rem; padding: 0; background: transparent; border: 0; font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--brodtekst); font-weight: 600; text-align: center; -moz-appearance: textfield; appearance: textfield; } :root .ft-produkt__info .wc-block-add-to-cart-with-options__quantity-selector input::-webkit-outer-spin-button, :root .ft-produkt__info .wc-block-add-to-cart-with-options__quantity-selector input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Kjøpsknappen er den samme blokka som i produktkortene - full bredde her. */ :root .ft-produkt__info .wc-block-components-product-button .wp-block-button__link { width: 100%; padding-block: 0.95em; font-size: var(--wp--preset--font-size--brodtekst); } /* -------------------------------------------------------------------------- Antallsvelgeren på produktsiden - innsiden -------------------------------------------------------------------------- Woo sin «stepper» kommer med egen hvit flate, ramme og skygge på elementene inni. Oppå vår lyse pille ble det en boks i en boks. Her nulles innsiden, og pilla får være den eneste formen. -------------------------------------------------------------------------- */ :root .ft-produkt__info .wc-block-add-to-cart-with-options__quantity-selector > * { background: transparent; border: 0; box-shadow: none; outline: 0; } :root .ft-produkt__info .wc-block-add-to-cart-with-options__quantity-selector button:hover { background: color-mix(in srgb, var(--wp--preset--color--lys-blaa) 80%, var(--wp--preset--color--tekst)); } :root .ft-produkt__info .wc-block-add-to-cart-with-options__quantity-selector input:focus-visible { outline: 2px solid var(--wp--preset--color--gul); outline-offset: 2px; } /* -------------------------------------------------------------------------- Trekkspill i produktinformasjonen -------------------------------------------------------------------------- Fanene bygges om til `
` av assets/js/kurvknapp.js. Her er formen: en hårstrek mellom hver seksjon, tittelen til venstre og en pil til høyre som snur når seksjonen er åpen. -------------------------------------------------------------------------- */ :root .ft-produkt__detaljer .ft-trekkspill { border-block-start: var(--wp--custom--linje); } :root .ft-produkt__detaljer .ft-trekkspill:last-of-type { border-block-end: var(--wp--custom--linje); } :root .ft-produkt__detaljer .ft-trekkspill__hode { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--s); padding-block: var(--wp--preset--spacing--s); font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--brodtekst); font-weight: 600; cursor: pointer; list-style: none; } /* Safari tegner en egen trekant i `summary` - den skal bort. */ :root .ft-produkt__detaljer .ft-trekkspill__hode::-webkit-details-marker { display: none; } :root .ft-produkt__detaljer .ft-trekkspill__hode::after { content: ""; flex: 0 0 auto; width: 0.85rem; height: 0.85rem; background: currentColor; -webkit-mask: var(--ft-pilikon) center / contain no-repeat; mask: var(--ft-pilikon) center / contain no-repeat; transition: transform var(--wp--custom--overgang--rask) ease; } :root .ft-produkt__detaljer .ft-trekkspill[open] .ft-trekkspill__hode::after { transform: rotate(180deg); } /* * `!important` mot WooCommerce sin innebygde `display: none` på fanepanelene. * En lukket `
` skjuler innholdet sitt uansett, så dette åpner * ingenting som skal være lukket - det opphever bare fanelogikken. */ :root .ft-produkt__detaljer .ft-trekkspill .woocommerce-Tabs-panel { display: block !important; padding-block-end: var(--wp--preset--spacing--s); } /* * Den juridiske linja nederst: firmanavn, adresse, organisasjonsnummer og * e-post. Dempet, men lesbar - den skal kunne slås opp, ikke leses. */ :root .ft-footer__juridisk { margin-block: 0; color: var(--wp--preset--color--tekst-svak); } :root .ft-footer__juridisk a { color: inherit; } /* -------------------------------------------------------------------------- Varelinjene i handlekurvskuffen -------------------------------------------------------------------------- Skuffen er en kvittering, ikke en produktside: navn, antall og pris er det man trenger. Beskrivelsen gjentar det man nettopp leste, og gjør hver linje dobbelt så høy - med fire varer i kurven forsvinner totalsummen under skjermkanten. -------------------------------------------------------------------------- */ :root .wc-block-mini-cart__drawer .wc-block-components-product-metadata__description { display: none; } :root .wc-block-mini-cart__drawer .wc-block-cart-item__prices .wc-block-components-product-price, :root .wc-block-mini-cart__drawer .wc-block-cart-item__total .wc-block-components-product-price { font-family: var(--wp--preset--font-family--detalj); font-size: var(--wp--preset--font-size--brodtekst); font-variant-numeric: tabular-nums; font-weight: 600; } /* -------------------------------------------------------------------------- Varelinja i skuffen - form -------------------------------------------------------------------------- WooCommerce bygger kurven som en tabell med tre celler: bilde, produkt og sum. Antallsvelgeren og enhetsprisen ligger *inne i* produktcella - ikke som egne celler - og det er nøkkelen til oppsettet under. Tabellen settes til rutenett: bilde | produkt | sum. Summen legger seg nederst til høyre, på linje med antallsvelgeren, slik referansen har det. Alt er avgrenset til skuffen; kurvsiden og kassen har bredde nok til tabellen. -------------------------------------------------------------------------- */ :root .wc-block-mini-cart__drawer table.wc-block-cart-items, :root .wc-block-mini-cart__drawer .wc-block-cart-items tbody { display: block; } :root .wc-block-mini-cart__drawer .wc-block-cart-items__row { position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; column-gap: var(--wp--preset--spacing--xs); padding-block: var(--wp--preset--spacing--s); padding-inline-end: 2rem; border-block-end: 1px solid rgba(26, 26, 26, 0.08); } :root .wc-block-mini-cart__drawer .wc-block-cart-item__image { align-self: start; padding: 0; } :root .wc-block-mini-cart__drawer .wc-block-cart-item__image img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--wp--custom--radius--kant); } :root .wc-block-mini-cart__drawer .wc-block-cart-item__product { display: flex; flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--xxs); padding: 0; } /* * Uten `.wc-block-mini-cart__drawer` foran: varelinjene ser like ut i skuffen og på * handlekurvsida, og navnet skal veie like tungt begge steder. * * Velgeren speiler WooCommerces egen, som er * `table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name` * og setter både `font-size: var(--wp--preset--font-size--small, 14px)` og `font-weight: 500`. * Med en type-velger i seg veier den (0,3,1), og vår gamle regel på produktcella veide (0,3,0) - * ett hakk for lite. Derfor ble navnet stående på 13px/500 uansett hva vi skrev her. `:root` i * tillegg til deres struktur gir (0,4,1) og legger oss trygt over. */ :root table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name { font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--brodtekst); /* 700: navnet er det man leser først i lista, og skal bære linja tydeligere enn tallene. */ font-weight: 700; line-height: 1.35; text-decoration: none; } :root .wc-block-mini-cart__drawer .wc-block-components-product-metadata__variation-data { color: var(--wp--preset--color--tekst-svak); font-size: var(--wp--preset--font-size--brodtekst-s); } /* * Enhetsprisen ligger inne i produktcella, summen i sin egen celle. Så lenge antallet er én - og * det er det nesten alltid her - er de to like, og to identiske tall i samme rad leses som en feil. * * Prisen tegnes på to måter i den cella, og begge må med. WooCommerce pakker vanligvis beløpet i * `span.wc-block-components-product-price` (med `del` + `ins` inni når varen er på tilbud), men i * skuffen legger den i tillegg ut et frittstående `…product-price__value` som ikke har den pakka * rundt seg. Vi skjulte bare pakka, så det løse beløpet ble stående igjen under tittelen. * * Begge er avgrenset til `.wc-block-cart-item__product`. Summen til høyre har nøyaktig samme * klasser, men bor i `.wc-block-cart-item__total` - en egen celle - så den er utenfor rekkevidde * her og blir stående. */ :root .wc-block-mini-cart__drawer .wc-block-cart-item__product .wc-block-components-product-price, :root .wc-block-mini-cart__drawer .wc-block-cart-item__product .wc-block-components-product-price__value { display: none; } /* Summen nederst til høyre, på linje med antallsvelgeren. */ :root .wc-block-mini-cart__drawer .wc-block-cart-item__total { align-self: end; justify-self: end; padding: 0; text-align: right; white-space: nowrap; } /* * Antallsvelgeren i skuffen strammes inn. * * WooCommerce gir den en fast bredde på 107px, satt sammen av `min-width` 30px på hver knapp og * 40px på tallfeltet. Det er romslig for en handlekurvside, men i skuffen står den alene på linja * og blir stående og flyte - avstanden fra minus til tallet leses som et mellomrom, ikke som én * kontroll. * * Her settes bredden ned og `min-width` på tallfeltet nullstilles, så feltet krymper til innholdet * i stedet for å holde sine 40px. Høyden røres ikke. * * Alle tre speiler WooCommerces egne velgere med `:root` foran; deres `:where()` teller null, så * breddeegelen deres veier bare (0,1,0) - men de to andre har en type-velger i seg. */ :root .wc-block-mini-cart__drawer .wc-block-components-quantity-selector:where(:has(input:not([type=hidden]))) { /* 84px: 26 + 32 + 26. */ width: 84px; } :root .wc-block-mini-cart__drawer .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input { min-width: 0; } :root .wc-block-mini-cart__drawer .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button { min-width: 26px; } /* * Søppelbøtta plasseres i hjørnet framfor å flyttes i DOM-en: WooCommerce * legger den inne i produktcella, og der hører den ikke hjemme visuelt. * Raden har `padding-inline-end` så den aldri legger seg oppå summen. * * Velgeren er lang med vilje. WooCommerce styrer denne knappen med * `table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link` * - fire klasser og en type - og setter blant annet `background: transparent`. Den forrige regelen * vår var ett hakk lettere og tapte, så maska hadde ingen farge å tegne med og bøtta forsvant helt. * Her speiles deres struktur med `:root` i tillegg, så vi ligger trygt over. * * WooCommerces egen bøtte er en fylt silhuett. Referansen bruker en tegnet kontur, som veier * mindre på siden og passer resten av ikonene våre - handlekurven og haken er samme strektykkelse * fra samme sett. Vi skjuler deres SVG og tegner vår egen som en maske på selve knappen, så ikonet * arver `currentColor` og dermed hover-fargen uten en ekstra regel. */ :root .wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link { /* 20px: bøttas kantlengde. Brukes både til boksen og til utregningen av toppen under. */ --ft-bottikon-storrelse: 20px; --ft-bottikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E"); position: absolute; /* * Midtstilt på tittelens linjeboks, ikke på radens topp. Tittelen starter der radens * `padding-block` slutter og er 1.35rem høy (1rem x line-height 1.35), så halve differansen * mellom linja og ikonet er alt som skal til. Før sto ikonet rett på paddingen og hang et par * piksler under teksten. */ top: calc(var(--wp--preset--spacing--s) + (1.35rem - var(--ft-bottikon-storrelse)) / 2); right: 0; display: block; width: var(--ft-bottikon-storrelse); height: var(--ft-bottikon-storrelse); padding: 0; border: 0; appearance: none; /* 0 på skriftstørrelsen: knappen kan inneholde en skjult tekstetikett i tillegg til ikonet. */ font-size: 0; color: var(--wp--preset--color--tekst-svak); background: currentColor; -webkit-mask: var(--ft-bottikon) center / contain no-repeat; mask: var(--ft-bottikon) center / contain no-repeat; text-decoration: none; cursor: pointer; transition: color var(--wp--custom--overgang--rask) ease; } /* WooCommerces fylte bøtte ligger inni knappen og ville ellers vist gjennom maska. */ :root .wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-item__quantity .wc-block-cart-item__remove-link svg { display: none; } :root .wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover { color: var(--wp--preset--color--tekst); } /* -------------------------------------------------------------------------- KONTOSIDA - innlogging og opprettelse -------------------------------------------------------------------------- Forbildet paa frutimian.no deler sida i to: bilde til venstre, skjema paa en lys blaa flate til hoeyre. Her er det samme, men innenfor bandbredden i stedet for helt ut til vinduskanten - kontosida er en vanlig side og gaar gjennom `page.html`, der innholdet staar i prosabredde. Vil vi ha den helt ut til kanten, trengs en egen mal for sida, og det er en annen jobb. `body.woocommerce-account` foran: bredden loeftes bare her, ikke paa alle sider som bruker prosabaandet. -------------------------------------------------------------------------- */ /* * Bredden settes paa baandet, ikke paa skjemaet. * * Foerste forsoek hevet taket paa `.woocommerce`-diven og gjorde ingenting: det er ikke den som er * smal. Prosabaandet setter `content-size` til prosabredden, og kjernen maaler *sine* barn mot den - * altsaa `post-content` - saa alt inni arver den bredden uansett hva vi sier lenger inn. Her byttes * verdien ut med bandbredden i stedet, paa kontosida alene. */ body.woocommerce-account .ft-band.is-style-prosa { --wp--style--global--content-size: var(--wp--custom--bandbredde); } /* * Utlogget gaar sida helt ut til kanten, som forbildet. * * `:not(.logged-in)` er hele avgrensningen, og den er noedvendig: samme side viser kontopanelet * naar man *er* logget inn - ordrer, adresser, tabeller - og det skal staa i bandbredde med luft * rundt seg, ikke klistret mot vinduskanten. * * Bredden tas ved aa sette baandets `content-size` til 100 % og nulle paddingen, ikke med * `100vw` + negativ marg: `100vw` teller med rullefeltet og gir vannrett overflyt paa Windows. */ body.woocommerce-account:not(.logged-in) .ft-band.is-style-prosa { --wp--style--global--content-size: 100%; padding-block: 0; padding-inline: 0; } /* * WooCommerce kapper selv kontosida til 1000 px: * * .woocommerce-account main .woocommerce { max-width: 1000px } * * staar i deres `assets/css/woocommerce-blocktheme.css`, og veier (0,2,1). En regel med to klasser * taper mot den - det var derfor baandet ble fullbredt uten at kortet fulgte etter. Maalt i * nettleseren: baand og post-content paa 2545 px, kortet paa 1000. * * Taket beholdes naar man er logget inn: da er dette kontopanelet med ordretabeller, og 1000 px er * en fornuftig lesebredde for dem. */ body.woocommerce-account:not(.logged-in) main .woocommerce { max-width: none; } body.woocommerce-account:not(.logged-in) .ft-konto-side { margin-block: 0; border-radius: 0; } /* * Ingen luft mellom headeren og flata. * * Baandets egen padding er allerede nullet over, men tre ting til skyver seksjonen ned: det tomme * avsnittet redigereren etterlater over kortkoden, WooCommerces meldingsboks naar den staar tom, * og kjernens marg paa foerste barn i innholdet. Alle tre nulles her - de kan ikke fjernes i * innholdet uten at kunden maa huske det hver gang sida redigeres. */ body.woocommerce-account .wp-block-post-content > p:empty, body.woocommerce-account .woocommerce-notices-wrapper:empty { display: none; } body.woocommerce-account .wp-block-post-content > *, body.woocommerce-account main .woocommerce { margin-block-start: 0; } /* Med full bredde er det plass til aa gi teksten mer luft, og til aa la den staa midt i flata. */ body.woocommerce-account:not(.logged-in) .ft-konto-side__felt { align-self: center; padding: var(--wp--preset--spacing--xxxl) var(--wp--preset--spacing--xxl); } /* ───────────── KONTOSIDA, INNLOGGET ───────────────── */ /* * Tittel og faner i samme flate, over innholdet. * * WooCommerce setter kontosida som to spalter - meny til venstre, innhold til hoeyre. Forbildet * legger fanene paa en rad under tittelen i stedet, og det passer bedre her: tre faner trenger * ingen egen spalte, og innholdet (ordretabeller) faar hele bredden. */ :root .woocommerce-account .woocommerce { display: block; } /* * Baandet gaar helt ut til kanten, innholdet holder bandbredden. * * Samme grep som utlogget: `content-size` til 100 % og paddingen nullet, ikke `100vw` + negativ * marg - `100vw` teller med rullefeltet og gir vannrett overflyt paa Windows. WooCommerces eget * tak paa 1000 px maa vekk her, ellers stopper flata midt paa sida. */ body.woocommerce-account.logged-in .ft-band.is-style-prosa { --wp--style--global--content-size: 100%; padding-block: 0; padding-inline: 0; } body.woocommerce-account.logged-in main .woocommerce { max-width: none; } /* * Farga gaar fra kant til kant, teksten staar i bandbredde - saa tittelen lander rett under * «Nyheter» i navraden i stedet for aa flyte fritt. */ :root .ft-kontotopp { /* Ingen marg under: lufta mellom baandet og innholdet er innholdets egen padding. */ margin-block: 0; padding-block: var(--wp--preset--spacing--xl); padding-inline: max( var(--wp--custom--sideinnrykk), calc((100% - var(--wp--custom--bandbredde)) / 2) ); background: var(--wp--preset--color--lys-blaa); border-radius: 0; } /* * Innholdet under baandet foelger samme kolonne som tittelen over, med like mye luft over og * under seg. Uten den nederste la adressene seg rett mot fotbaandet. */ :root .woocommerce-account .woocommerce-MyAccount-content { box-sizing: border-box; max-width: calc(var(--wp--custom--bandbredde) + 2 * var(--wp--custom--sideinnrykk)); margin-inline: auto; padding-block: var(--wp--preset--spacing--xxl); padding-inline: var(--wp--custom--sideinnrykk); } :root .ft-kontotopp__tittel { margin-block: 0 var(--wp--preset--spacing--m); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--display-m); font-weight: 700; line-height: 1.05; } /* Fanene: piller paa en rad, den man staar i fylt. */ :root .ft-kontofaner { float: none; width: auto; } :root .ft-kontofaner ul { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--xxs); margin: 0; padding: 0; list-style: none; } :root .ft-kontofaner li { margin: 0; padding: 0; border: 0; } :root .ft-kontofaner li a { display: block; padding: 0.6rem 1.25rem; background: var(--wp--preset--color--hvit); border-radius: var(--wp--custom--radius--pille); color: var(--wp--preset--color--tekst); font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--brodtekst-s); font-weight: 600; text-decoration: none; } /* Fana man staar i tar husets gule, samme farge som knappene ellers paa sida. */ :root .ft-kontofaner li.is-active a, :root .ft-kontofaner li a[aria-current="page"] { background: var(--wp--preset--color--gul); color: var(--wp--preset--color--hvit); text-decoration: none; } /* De andre svarer med farge paa teksten, ikke ved aa se ut som den valgte. */ :root .ft-kontofaner li:not(.is-active) a:hover { color: var(--wp--custom--gulTekst); } /* Innholdet under fanene, i full bredde siden menyen ikke lenger tar en spalte. */ :root .woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; } /* * WooCommerce tegner en ramme med padding rundt innloggingsskjemaet (`form.login`). Flata vaar er * allerede en egen boks; en ramme inni den blir en boks i en boks. * * 24rem: forbildets rader maaler 384 px inne i en innholdsboks paa 432. Skjemaet ligger altsaa * trukket inn en tanke til, og tittelen over staar bredere enn feltene. */ :root .woocommerce .ft-konto-skjema { max-width: 24rem; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; } /* * Stjerna bak etiketten er borte: alle feltene er obligatoriske, saa den skiller ingenting fra noe * annet - den bare roeper at skjemaet er WooCommerce sitt. `required` staar fortsatt paa selve * feltet, saa bade nettleseren og skjermleseren vet det. */ :root .ft-konto-skjema .required { display: none; } :root .ft-konto-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; margin-block: var(--wp--preset--spacing--l); /* Ingen bakgrunn: flata skal staa rett paa sidebakgrunnen. `overflow: hidden` blir staaende fordi bildet fortsatt skal klippes av radiusen. */ border-radius: var(--wp--custom--radius--kant); overflow: hidden; } /* Uten utvalgt bilde paa sida staar skjemaet alene, midtstilt. */ :root .ft-konto-side--uten-bilde { grid-template-columns: minmax(0, 34rem); justify-content: center; } :root .ft-konto-side__bilde { min-height: 24rem; } :root .ft-konto-side__bilde img { display: block; width: 100%; height: 100%; /* `width`/`height`-attributtene staar for aa unngaa hopp ved lasting - hoeyden maa nulles her. */ min-height: 100%; /* `wp_get_attachment_image` skriver `width` og `height` som attributter - uten dette fyller bildet ikke spalten. */ object-fit: cover; } /* * 34rem og ikke 26: taket gjelder boksen, og paddingen ligger *inni* den. Da luftet ble oekt paa * full bredde, krympet feltene tilsvarende - de maalte 285px mot forbildets bredere felt. Nu blir * det igjen ca. 416px til selve feltene naar paddingen er trukket fra. */ :root .ft-konto-side__felt { /* * Maalt paa forbildets egen boks (`div.fts-login` i DevTools): 576 px bred, 72 px padding hele * veien rundt, 432 px innhold. Ikke gjettet fra et skjermbilde - det var slik jeg foerst kom * til 384 px, som var tekstbredden og ikke boksen. * * Paddingen er fluid saa den krymper paa smale skjermer, men taket er forbildets 72 px. */ max-width: 36rem; padding: clamp(2rem, 1rem + 5vw, 4.5rem); } /* 80px og 20px under, maalt paa `h1.fts-account__title` paa den nye sida. `display-l` er 5rem. */ :root .ft-konto-side__tittel { margin-block: 0 var(--wp--preset--spacing--s); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--display-l); font-weight: 700; line-height: 1.05; } /* 17,6px paa forbildet = 1,1rem, som er `brodtekst-l`. */ :root .ft-konto-side__ingress { margin-block: 0 var(--wp--preset--spacing--xs); color: var(--wp--preset--color--tekst); font-size: var(--wp--preset--font-size--brodtekst-l); } /* * Feltene: etiketten over, ruta under, luft mellom radene. * * `padding: 0` er ikke pynt. WooCommerces `.form-row` har egen padding, og raden maalte 104,8 px * mot 82,8 for innholdet - 22 px vi ikke eide. Den paddingen la seg over hver eneste etikett og * var hele grunnen til at radene sto for langt fra hverandre mot forbildet. */ :root .woocommerce .ft-konto-skjema .ft-felt, :root .woocommerce .ft-konto-skjema .afreg_extra_fields .form-row { display: flex; flex-direction: column; /* 0,6rem gir rad = 18,2 + 9,6 + 46,8 = 74,6 px. Forbildets rad maaler 75. */ gap: 0.6rem; /* 16 px, maalt paa forbildets egen rad i DevTools. Vi hadde 20. */ margin-block: 0 var(--wp--preset--spacing--xs); padding: 0; } /* * Raden skal vaere summen av barna sine og ingenting mer. Noe ga et av dem ~12,8 px marg som * hverken `padding: 0` paa raden eller `margin: 0` paa etiketten fanget - raden maalte 94 px der * barna til sammen var 81. Her nulles margen paa alt som ligger i raden, saa hoeyden foelger av * etikett + gap + felt, som hos forbildet. */ :root .woocommerce .ft-konto-skjema .ft-felt > *, :root .woocommerce .ft-konto-skjema .afreg_extra_fields .form-row > * { margin: 0; } /* * WooCommerce gir etiketten sin egen `margin-bottom`, og den la seg *paa toppen av* raden sin * `gap` - derfor for mye luft mellom etiketten og feltet. Raden eier avstanden her. */ :root .ft-konto-skjema .ft-felt label, :root .ft-konto-skjema .afreg_extra_fields .form-row label { margin: 0; } /* * Hjelpeteksten under et felt fra B2B-tillegget - «9 siffer», forklaringa til organisasjonsnummeret. * * Tillegget skriver den som et `span` inne i raden, og uten `display: block` legger den seg paa * linje med feltet naar det er plass til det. Den skal dessuten lese som hjelp og ikke som innhold: * samme stoerrelse som etiketten, men svak farge og vanlig vekt, saa den ikke konkurrerer med * etiketten til neste felt. */ :root .woocommerce .ft-konto-skjema .afreg_extra_fields .fmessage { display: block; color: var(--wp--preset--color--tekst-svak); font-size: var(--wp--preset--font-size--brodtekst-s); font-weight: 400; line-height: 1.4; } /* * B2B-tillegget spikrer hoeyden paa feltene sine: * * .afreg_extra_fields .input-text,.input-select{ * min-height: 40px !important; max-height: 40px !important; height: 40px !important; } * * Maalt ga det 40 px mot 46,8 for vaare egne felter - samme skrift, samme padding, men boksen var * klemt, saa innholdet satt igjen med 9,2 px der vaare har 16. Tre `!important` betyr at vi maa * svare med `!important` selv; her er det ikke pynt, men eneste vei forbi. * * `auto` og ikke et tall: da foelger hoeyden av skrift og padding, akkurat som paa E-post-feltet, * og endrer vi den ene siden senere foelger den andre etter av seg selv. */ :root .woocommerce .ft-konto-skjema .afreg_extra_fields .input-text { min-height: 0 !important; max-height: none !important; height: auto !important; } /* * Merk `.woocommerce` i selektoren. WooCommerce har `.form-row label { line-height: 2 }`, og en * etikett paa 14 px ble derfor 28 px hoey. Uten dette leddet taper regelen, og halve slarken * legger seg over teksten og ser ut som luft vi ikke har bedt om. */ :root .woocommerce .ft-konto-skjema label { font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--brodtekst-s); font-weight: 600; line-height: 1.3; } :root .ft-konto-skjema input[type="text"], :root .ft-konto-skjema input[type="email"], :root .ft-konto-skjema input[type="password"] { width: 100%; padding: 0.7em 0.9em; background: var(--wp--preset--color--hvit); border: 1px solid rgba(26, 26, 26, 0.15); border-radius: var(--wp--custom--radius--kant); color: var(--wp--preset--color--tekst); font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--brodtekst); } :root .ft-konto-skjema input:focus-visible { outline: 2px solid var(--wp--preset--color--gul); outline-offset: 2px; } :root .ft-konto-skjema__husk { margin-block: 0 var(--wp--preset--spacing--s); } :root .ft-konto-skjema__husk label { display: flex; align-items: center; gap: 0.5em; font-weight: 400; line-height: 1.3; } :root .ft-konto-skjema__husk input[type="checkbox"] { margin: 0; } /* Knappen tar plassen teksten trenger, ikke hele spalten - som i forbildet. */ :root .ft-konto-skjema__knapp { margin-block: 0 var(--wp--preset--spacing--s); } /* * Knappen er bredere enn teksten trenger. Maalt som forhold, ikke piksler - vinduene er ulike: * paa forbildet er knappen ca. 0,65 av feltbredden, hos oss var den 0,41. 16rem mot felter paa * 26rem lander paa omtrent det samme forholdet. */ :root .ft-konto-skjema__knapp button, :root .ft-konto-side__handling .button { width: auto; min-width: 15rem; /* 52 px hoey som forbildet: 1,2rem over og under pluss 14 px linje. */ padding-block: 1.2rem; padding-inline: var(--wp--preset--spacing--l); } /* * «Opprett konto» uten skjema: e-postknappen staar der innloggingsknappen staar, og faar samme * bredde, saa de to visningene har samme tyngdepunkt naar man bytter mellom dem. */ :root .ft-konto-side__handling { margin-block: var(--wp--preset--spacing--m) var(--wp--preset--spacing--s); } :root .ft-konto-side__handling .button { display: inline-block; min-width: 16rem; padding-inline: var(--wp--preset--spacing--l); text-align: center; text-decoration: none; } :root .ft-konto-side__hjelp { margin-block: 0 var(--wp--preset--spacing--m); max-width: 26rem; color: var(--wp--preset--color--tekst-svak); font-size: var(--wp--preset--font-size--brodtekst-s); } /* * Luft over «Glemt passordet?»: forbildet har 30 px ned fra knappen, vi hadde 15. Verdien maa * staa i samme `margin-block` som bunnen - en egen `margin-block-start` foer denne regelen ville * blitt nullet av forkortelsen her. */ :root .ft-konto-side__glemt { margin-block: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--xxxs); } :root .ft-konto-side__bytte { margin-block: 0 var(--wp--preset--spacing--xxxs); } :root .ft-konto-side__glemt, :root .ft-konto-side__bytte { font-size: var(--wp--preset--font-size--brodtekst-s); } :root .ft-konto-side__bytte { color: var(--wp--preset--color--tekst-svak); } :root .ft-konto-side__glemt a, :root .ft-konto-side__bytte a { color: var(--wp--preset--color--tekst); text-decoration: underline; text-underline-offset: 0.2em; } :root .ft-konto-side__glemt a:hover, :root .ft-konto-side__bytte a:hover { color: var(--wp--preset--color--gul); } /* Smal visning: bildet legger seg over skjemaet og blir en stripe. */ @media (max-width: 48em) { :root .ft-konto-side { grid-template-columns: minmax(0, 1fr); } :root .ft-konto-side__bilde { min-height: 12rem; } :root .ft-konto-side__felt { max-width: none; padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--m); } } /* -------------------------------------------------------------------------- KASSEN -------------------------------------------------------------------------- To spalter: skjemaet til venstre, ordren til hoeyre med en haarstrek mellom. Ingen maloverstyring her, bare CSS. WooCommerce sin klassiske kasse deler seg allerede i `#customer_details` og `#order_review`, og betaling og «Bekreft ordre» ligger *inne i* ordrespalten - altsaa akkurat den formen vi vil ha. Det er ogsaa grunnen til aa la malen vaere: Checkout Field Editor Pro henger paa denne markupen, og feltene den legger til skal fortsette aa virke uten at vi vet hva de heter. -------------------------------------------------------------------------- */ :root .woocommerce-checkout .woocommerce { max-width: var(--wp--custom--bandbredde); margin-inline: auto; } @media (min-width: 62em) { :root form.woocommerce-checkout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: "skjema ordretittel" "skjema ordre"; align-items: start; column-gap: var(--wp--preset--spacing--xxl); } :root form.woocommerce-checkout #customer_details { grid-area: skjema; } :root form.woocommerce-checkout #order_review_heading { grid-area: ordretittel; margin-block-start: 0; } :root form.woocommerce-checkout #order_review { grid-area: ordre; /* * Streken er spaltas venstrekant, ikke et eget element: en `border` foelger hoeyden av * seg selv, og en tom div ville maattet faa hoeyden sin fra noe. */ padding-inline-start: var(--wp--preset--spacing--xxl); border-inline-start: var(--wp--custom--linje); /* * Skjemaet er langt, ordren er kort. Uten dette staar summen og knappen oeverst mens * kunden fyller ut nederst. `top` maa klarere den faste headeren. */ position: sticky; top: var(--wp--preset--spacing--l); } } /* * Skjemaspalta er *en* spalte. * * WooCommerce deler `#customer_details` i `.col-1` og `.col-2` og setter dem ved siden av * hverandre. Inne i vaar venstre spalte ble det tre spalter paa sida, og adressefeltene fikk * halvparten av halvparten. Tilleggsinformasjon er dessuten det siste man fyller ut - den hoerer * under skjemaet, ikke ved siden av det. */ :root form.woocommerce-checkout #customer_details { display: block; } :root form.woocommerce-checkout #customer_details :is(.col-1, .col-2) { float: none; width: 100%; max-width: none; } :root form.woocommerce-checkout #customer_details .col-2 { margin-block-start: var(--wp--preset--spacing--xl); } /* Feltene er de samme som paa innloggingssida - kassen skal ikke vaere en annen butikk. */ :root .woocommerce-checkout .woocommerce-billing-fields label, :root .woocommerce-checkout .woocommerce-shipping-fields label, :root .woocommerce-checkout .woocommerce-additional-fields label { display: block; margin-block-end: 0.5rem; font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--brodtekst-s); font-weight: 600; } :root .woocommerce-checkout .form-row { margin-block: 0 var(--wp--preset--spacing--s); padding: 0; } :root .woocommerce-checkout .input-text, :root .woocommerce-checkout select, :root .woocommerce-checkout textarea { width: 100%; padding: 0.7em 0.9em; background: var(--wp--preset--color--hvit); border: 1px solid rgba(26, 26, 26, 0.15); border-radius: var(--wp--custom--radius--kant); color: var(--wp--preset--color--tekst); font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--brodtekst); } :root .woocommerce-checkout :is(.input-text, select, textarea):focus-visible { outline: 2px solid var(--wp--preset--color--gul); outline-offset: 2px; } /* Stjerna sier ingenting naar naesten alt er obligatorisk. */ :root .woocommerce-checkout .required { display: none; } :root .woocommerce-checkout h3, :root .woocommerce-checkout #order_review_heading { margin-block: 0 var(--wp--preset--spacing--s); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--display-s); font-weight: 700; line-height: 1.1; } /* Ordren er en kvittering: haarstreker mellom linjene, ingen ramme rundt. */ :root .woocommerce-checkout table.shop_table { width: 100%; margin: 0; background: transparent; border: 0; border-radius: 0; border-collapse: collapse; } :root .woocommerce-checkout table.shop_table :is(th, td) { padding: var(--wp--preset--spacing--xxs) 0; background: transparent; border: 0; border-block-end: var(--wp--custom--linje); font-size: var(--wp--preset--font-size--brodtekst-s); vertical-align: top; } :root .woocommerce-checkout table.shop_table td:last-child, :root .woocommerce-checkout table.shop_table th:last-child { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; } :root .woocommerce-checkout table.shop_table tfoot .order-total :is(th, td) { padding-block: var(--wp--preset--spacing--xs); border-block-end: 0; font-size: var(--wp--preset--font-size--brodtekst-l); font-weight: 600; } /* * Varelinja: bilde, navn og antall paa en linje. * * Uten bildet sto navnet i en smal kolonne og brakk over fem linjer («Runde bivoksark (15 + 20 * cm) - 10 pk»). Cella er en flexrad naa, saa navnet faar bredden det trenger og tallet staar * til hoeyre der det hoerer hjemme. */ :root .woocommerce-checkout .shop_table .product-name { display: flex; align-items: center; gap: var(--wp--preset--spacing--xxs); padding-block: var(--wp--preset--spacing--xs); } :root .woocommerce-checkout .ft-kasse__bilde { flex: 0 0 auto; width: 3rem; height: 3rem; /* `get_image()` skriver width/height som attributter; uten dette blir bildet staaende hoeyt. */ object-fit: cover; border-radius: var(--wp--custom--radius--kant); } :root .woocommerce-checkout .ft-kasse__navn { flex: 1 1 auto; min-width: 0; font-weight: 500; line-height: 1.3; } /* * Antallet er sin egen lille kolonne inne i produktcella: fast bredde og hoeyrestilt, saa «× 1» og * «× 5» staar under hverandre uansett hvor lange navnene er. Navnet tar resten av plassen. */ :root .woocommerce-checkout .shop_table .product-quantity { flex: 0 0 auto; min-width: 3rem; color: var(--wp--preset--color--tekst-svak); font-weight: 600; text-align: end; white-space: nowrap; } /* * Fraktraden legges ut som en blokk, ikke som to celler. * * Den er grunnen til at varenavnene brakk over fem linjer: «Hente i vaare lokaler i Rakkestad * mandag - fredag 07:30 -15:00» staar i *andre* kolonne, og en tabell med automatisk * kolonnebredde gir den plassen den trenger - paa bekostning av foerste kolonne, der produktene * staar. Naar raden blir en blokk, teller den ikke lenger med i kolonnebreddene, og etiketten * faar staa over valgene i full bredde. */ :root .woocommerce-checkout .shop_table tr.shipping { display: block; padding-block: var(--wp--preset--spacing--xxs); border-block-end: var(--wp--custom--linje); } :root .woocommerce-checkout .shop_table tr.shipping :is(th, td) { display: block; width: auto; padding: 0; border: 0; text-align: start; } :root .woocommerce-checkout .shop_table tr.shipping th { margin-block-end: var(--wp--preset--spacing--xxs); } /* Fraktvalgene er valg, ikke en punktliste: hele raden er klikkbar og markerer seg. */ :root .woocommerce-checkout #shipping_method { margin: 0; padding: 0; list-style: none; } :root .woocommerce-checkout #shipping_method li { display: flex; align-items: baseline; gap: 0.6em; margin: 0 0 0.35rem; padding: var(--wp--preset--spacing--xxs); border-radius: var(--wp--custom--radius--kant); } :root .woocommerce-checkout #shipping_method li:hover, :root .woocommerce-checkout #shipping_method li:has(input:checked) { background: var(--wp--preset--color--lys-blaa); } :root .woocommerce-checkout #shipping_method label { margin: 0; font-weight: 500; } /* Betalingsboksen er hvit med haarstrek, ikke WooCommerce sin graa flate. */ :root .woocommerce-checkout #payment, :root .woocommerce-checkout #payment .payment_box { background: var(--wp--preset--color--hvit); border-radius: var(--wp--custom--radius--kant); } :root .woocommerce-checkout #payment { padding: 0; border: 0; } :root .woocommerce-checkout #payment ul.payment_methods { margin: 0; padding: 0; border: 0; } :root .woocommerce-checkout #payment .payment_box { margin: var(--wp--preset--spacing--xxs) 0 0; padding: var(--wp--preset--spacing--s); background: var(--wp--preset--color--lys-blaa); font-size: var(--wp--preset--font-size--brodtekst-s); } :root .woocommerce-checkout #payment .payment_box::before { display: none; } :root .woocommerce-checkout #place_order { width: 100%; margin-block-start: var(--wp--preset--spacing--s); padding-block: 0.95em; font-size: var(--wp--preset--font-size--brodtekst); } /* * Smal visning: en spalte, og ordren under skjemaet. Streken hoerer til to spalter og gaar med * dem; stripa over ordren skiller i stedet. */ @media (max-width: 61.99em) { :root .woocommerce-checkout #order_review_heading { margin-block-start: var(--wp--preset--spacing--xl); padding-block-start: var(--wp--preset--spacing--xl); border-block-start: var(--wp--custom--linje); } } /* * Smal skjerm: fortsatt en tabell. * * Et forsoek paa aa gjoere radene om til flexlinjer ble forkastet: det tok bort hodet * («Produkt»/«Delsum») og den gjennomgaaende streken, og da hadde antallet ingen kolonne aa staa * i flukt med. Tabellen faar vaere en tabell - det som maatte fikses var bare at prisen ikke kunne * krympe. */ @media (max-width: 48em) { /* * `nowrap` paa beloepet er riktig paa bred skjerm, der «10 080,00 kr» ikke skal brekke midt i * tallet. Paa en telefon er det nettopp det leddet som gjoer tabellen bredere enn skjermen, og * da forsvinner kolonna til hoeyre ut av bildet. Her faar beloepet brekke. */ :root .woocommerce-checkout table.shop_table :is(th, td):last-child { white-space: normal; } :root .woocommerce-checkout .ft-kasse__bilde { width: 2.5rem; height: 2.5rem; } :root .woocommerce-checkout .ft-kasse__navn { overflow-wrap: anywhere; } } /* ───────────── KASSEHODET ───────────────── */ /* * Kassa har sitt eget hode: logo og en vei tilbake til kurven, ingenting annet. * * Menyen, soekefeltet og handlekurv-ikonet er hver sin vei ut av en ordre som ikke er fullfoert. * Toppstripa staar igjen fordi den svarer paa det man lurer paa nettopp her - fri frakt over * 9 000, 14 dagers betalingsfrist, henting i Rakkestad - og fordi den ikke er en lenke bort. * * Selve fjerninga ligger i `parts/header-kasse.html`, ikke i `display: none` her: en meny som er * tegnet og skjult er fortsatt i dokumentet, og en skjermleser leser den. */ /* * Samme form som paa mobil, i alle bredder: pil ytterst til venstre, logoen midt paa, ingenting * til hoeyre. Symmetrien er halve poenget - et hode med bare to ting i seg skal se tomt ut med * vilje, ikke se ut som en meny der resten ikke rakk aa laste. */ :root .ft-header__bar--kasse { /* * Baandets egen `padding-block` er 16px over og 0 under - riktig i det vanlige hodet, der * navraden under leverer den nedre halvparten. Her finnes ingen navrad, saa summen ble 40 over * og 24 under. Raden eier lufta i dette hodet; baandet legger ingenting til. */ padding-block: 0; border-block-end: var(--wp--custom--linje); } /* * Tre spalter og ikke absolutt plassering. * * Foerst sto logoen `position: absolute; left: 50%`, som det vanlige hodet gjoer paa mobil. Da * bidrar den ikke til hoeyden, saa raden maatte faa den av en `min-height` - og den gjetningen var * kortere enn logoen faktisk er. Logoen rant ut i paddingen og la seg mot haarstreken uansett hvor * mye luft jeg la paa. * * Med `1fr auto 1fr` staar logoen midt paa fordi de to sidespaltene er like brede, den er med i * flyten, og hoeyden foelger av innholdet. Da betyr `padding-block` det den ser ut som. */ :root .ft-header__bar--kasse .ft-header__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 0; padding-block: var(--wp--preset--spacing--m); } /* Alt annet enn logoen hoerer hjemme i foerste spalte, uansett hva kortkoden pakker det i. */ :root .ft-header__bar--kasse .ft-header__row > * { grid-row: 1; grid-column: 1; justify-self: start; margin: 0; } :root .ft-header__bar--kasse .ft-header__row > .ft-header__logo { grid-column: 2; justify-self: center; min-height: 0; } /* * Bare pila, ogsaa paa bred skjerm. * * Ordene ville stukket inn mot logoen og brutt midtstillinga, og en pil ytterst til venstre er * den samme handlinga folk kjenner fra enhver annen kasse. Teksten blir staaende for skjermlesere * - den er skjult, ikke fjernet - og `title` gir den tilbake som musepeker-tekst. */ :root .ft-kassetilbake span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } :root .ft-kassetilbake__pil { width: 1.5em; height: 1.5em; } /* Lenka skal se ut som en vei tilbake, ikke som en knapp som konkurrerer med «Fullfoer ordre». */ :root .ft-kassetilbake { display: inline-flex; align-items: center; gap: 0.4em; color: var(--wp--preset--color--tekst-svak); font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--brodtekst-s); font-weight: 600; text-decoration: none; } :root .ft-kassetilbake:hover { color: var(--wp--custom--gulTekst); } :root .ft-kassetilbake__pil { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* * Smal visning: pila alene, og logoen beholder midtstillinga si. * * Under 48em er logoen `position: absolute; left: 50%` - laget for det vanlige hodet, der en * hamburger staar til venstre og to knapper til hoeyre. Her er det bare tilbakelenka, saa logoen * la seg rett oppaa teksten. Teksten viker i stedet for logoen: en pil ytterst til venstre er den * samme handlinga alle kjenner fra kassa ellers, og skjermleseren faar ordene uansett. * * `@container` og ikke `@media`, med samme 48em som resten av headeren: baandet er beholderen, saa * hodet brekker paa sin egen bredde og ikke paa vinduets. */ /* ───────────── HANDLEKURVEN ───────────────── */ /* * Samme form som kassa: varene til venstre, summen i en fast spalte til hoeyre. * * WooCommerce flyter `.cart-collaterals` til hoeyre paa 48 % bredde og lar tabellen ta resten. * Flyt gir ingen felles overkant og ingen `sticky`, og paa vaar bandbredde ble resultatet en * tabell midt paa sida med summen under seg. Grid i stedet, med samme spaltedeling og samme * strek som kassa - da er kurv og kasse to bilder av samme side. */ :root .woocommerce-cart .woocommerce { max-width: var(--wp--custom--bandbredde); margin-inline: auto; } @media (min-width: 62em) { :root .woocommerce-cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: "meldinger meldinger" "varer frakt" "varer sum"; align-items: start; column-gap: var(--wp--preset--spacing--xxl); } /* * Meldinger og fraktmaalet hoerer til hele sida, ikke til varelista. Uten dette havner de i * foerste spalte og dytter tabellen ned under summen. */ :root .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-area: meldinger; } /* * Fraktmaalet staar oeverst i summespalta, rett over «Totalt i handlekurven». * * Der hoerer det hjemme: det handler om summen, ikke om varelista. Streken og innrykket * gjentas fra `.cart-collaterals` saa spalta leser som én flate - uten dem ville stripa hengt * utenfor linja med summen under. * * `max-width` maa vekk: `.ft-fraktmaal--side` har 34rem for aa ikke bli bredere enn en linje * tekst er verdt aa lese, og spalta er allerede smalere enn det. */ :root .woocommerce-cart .woocommerce > .ft-fraktmaal { grid-area: frakt; max-width: none; margin-block-end: var(--wp--preset--spacing--m); padding-inline-start: var(--wp--preset--spacing--xxl); border-inline-start: var(--wp--custom--linje); } :root .woocommerce-cart form.woocommerce-cart-form { grid-area: varer; margin-block: 0; } :root .woocommerce-cart .cart-collaterals { grid-area: sum; /* WooCommerce flyter denne paa 48 %. I grid eier spalta bredden. */ float: none; width: auto; padding-inline-start: var(--wp--preset--spacing--xxl); border-inline-start: var(--wp--custom--linje); /* Lista er lang, summen er kort - den skal staa naar man endrer antall lenger ned. */ position: sticky; top: var(--wp--preset--spacing--l); } :root .woocommerce-cart .cart_totals { float: none; width: auto; } } /* Tabellen: samme ramme og luft som ordretabellen i kassa. */ :root .woocommerce-cart table.shop_table { width: 100%; margin-block: 0; border: var(--wp--custom--linje); border-radius: var(--wp--custom--radius--kant); border-collapse: collapse; overflow: hidden; } :root .woocommerce-cart table.shop_table :is(th, td) { padding: var(--wp--preset--spacing--xs); border: 0; border-block-end: var(--wp--custom--linje); vertical-align: middle; } :root .woocommerce-cart table.shop_table thead th { font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--brodtekst-s); font-weight: 600; text-align: start; } :root .woocommerce-cart table.shop_table tbody tr:last-child :is(th, td) { border-block-end: 0; } /* Tall til hoeyre, tekst til venstre - en kolonne med priser leses nedover. */ :root .woocommerce-cart table.shop_table :is(th, td).product-price, :root .woocommerce-cart table.shop_table :is(th, td).product-subtotal { text-align: end; white-space: nowrap; } /* Bildet: fast rute, saa radene faar lik hoeyde uansett motiv. */ :root .woocommerce-cart td.product-thumbnail img { display: block; width: 4rem; height: 4rem; border-radius: var(--wp--custom--radius--kant); object-fit: cover; } :root .woocommerce-cart td.product-name a { color: var(--wp--preset--color--tekst); font-weight: 600; text-decoration: none; } :root .woocommerce-cart td.product-name a:hover { color: var(--wp--custom--gulTekst); } /* * Kryssene: WooCommerce tegner dem roede. Roedt er farlig-farge og hoerer til noe som ikke kan * angres - her fjerner man en vare fra en kurv. Grått som blir roedt naar man peker paa det sier * det samme uten aa rope det over hele lista. */ :root .woocommerce-cart td.product-remove a.remove { color: var(--wp--preset--color--tekst-svak) !important; font-size: 1.25rem; line-height: 1; } :root .woocommerce-cart td.product-remove a.remove:hover { background: transparent; color: var(--wp--preset--color--roed) !important; } :root .woocommerce-cart td.product-quantity .quantity input { width: 4rem; padding: 0.4rem; text-align: center; } /* * «Oppdater handlekurv» staar avslaatt til man endrer et antall - det er WooCommerces egen * oppfoersel og den er riktig. Men den skal se avslaatt ut med vilje, ikke se oedelagt ut: en * sekundaerknapp med ramme, ikke en blek utgave av hovedknappen. */ :root .woocommerce-cart td.actions { text-align: end; } :root .woocommerce-cart td.actions button[name="update_cart"] { background: transparent; border: var(--wp--custom--linje); color: var(--wp--preset--color--tekst); } :root .woocommerce-cart td.actions button[name="update_cart"]:disabled { opacity: 0.45; cursor: default; } :root .woocommerce-cart td.actions button[name="update_cart"]:not(:disabled):hover { background: var(--wp--preset--color--tekst); color: var(--wp--preset--color--hvit); } /* Summen: tittelen over tabellen, ikke inni den. */ :root .woocommerce-cart .cart_totals h2 { margin-block: 0 var(--wp--preset--spacing--s); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--display-s); font-weight: 700; } :root .woocommerce-cart .cart_totals table.shop_table :is(th, td) { padding-inline: 0; } :root .woocommerce-cart .cart_totals .order-total :is(th, td) { font-weight: 700; } /* Til kassa: hovedhandlinga, full bredde i spalta si. */ :root .woocommerce-cart .wc-proceed-to-checkout { margin-block-start: var(--wp--preset--spacing--m); padding: 0; } :root .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: block; width: 100%; text-align: center; } /* ───────────── ORDREBEKREFTELSEN ───────────────── */ /* * «Ordre mottatt» tegnes ikke av `thankyou.php` lenger. WooCommerce 10 har en blokkbasert * kvitteringsside - `templates/templates/order-confirmation.html` og blokkene under * `OrderConfirmation/` - saa klassene heter `wc-block-order-confirmation-*`, og `.woocommerce-order` * finnes ikke i det hele tatt. (Foerste forsoek her traff den klassen, og traff dermed ingenting.) * * `templates/order-confirmation.html` i temaet fortrenger pluginets mal, paa samme maate som for * kurv og kasse, saa sida faar vaar header, vaart band og vaar bredde. */ :root .ft-ordrekvittering { max-width: none; } :root .ft-ordrekvittering > * { max-width: 48rem; margin-inline: 0; } :root .wc-block-order-confirmation-status { margin-block: 0 var(--wp--preset--spacing--l); font-size: var(--wp--preset--font-size--brodtekst-l); } /* * Kvitteringslinja: etiketten over verdien, ikke ved siden av. Da staar verdiene i flukt nedover, * og raden taaler at «stian@screenpartner.no» er fire ganger saa lang som «Faktura». */ :root .wc-block-order-confirmation-summary { margin-block: 0 var(--wp--preset--spacing--xl); padding: var(--wp--preset--spacing--l); background: var(--wp--preset--color--lys-blaa); border: 0; border-radius: var(--wp--custom--radius--kant); } :root .wc-block-order-confirmation-summary-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--wp--preset--spacing--m); margin: 0; padding: 0; list-style: none; } :root .wc-block-order-confirmation-summary-list-item { display: flex; flex-direction: column; gap: 0.15rem; margin: 0; padding: 0; border: 0; } :root .wc-block-order-confirmation-summary-list-item__key { color: var(--wp--preset--color--tekst-svak); font-size: var(--wp--preset--font-size--brodtekst-s); font-weight: 600; } :root .wc-block-order-confirmation-summary-list-item__value { color: var(--wp--preset--color--tekst); overflow-wrap: anywhere; } /* Overskriftene over tabellen og adressene: samme stoerrelse, samme luft. */ :root .ft-ordrekvittering h2, :root .ft-ordrekvittering h3 { margin-block: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--s); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--display-s); font-weight: 700; } /* Tabellen: samme ramme og luft som kurven og kassa, saa de tre leser likt. */ :root .wc-block-order-confirmation-totals table { width: 100%; margin-block: 0; border: var(--wp--custom--linje); border-radius: var(--wp--custom--radius--kant); border-collapse: collapse; overflow: hidden; } :root .wc-block-order-confirmation-totals table :is(th, td) { padding: var(--wp--preset--spacing--xs); border: 0; border-block-end: var(--wp--custom--linje); vertical-align: top; } :root .wc-block-order-confirmation-totals table thead th { font-family: var(--wp--preset--font-family--brod); font-size: var(--wp--preset--font-size--brodtekst-s); font-weight: 600; text-align: start; } :root .wc-block-order-confirmation-totals table :is(th, td):last-child { text-align: end; white-space: nowrap; } :root .wc-block-order-confirmation-totals table tfoot tr:last-child :is(th, td) { border-block-end: 0; font-weight: 700; } /* Adressene: samme kort som resten, og adresser skal ikke staa i kursiv. */ :root .wc-block-order-confirmation-billing-address, :root .wc-block-order-confirmation-shipping-address { padding: var(--wp--preset--spacing--m); border: var(--wp--custom--linje); border-radius: var(--wp--custom--radius--kant); font-style: normal; line-height: 1.6; } /* Kundens egen beskjed staar som tekst, ikke som enda en boks. */ :root .wc-block-order-confirmation-order-note { margin-block: var(--wp--preset--spacing--m) 0; } /* ========================================================================== VARSLER Fem bokser sier det samme til kunden: to fra B2B-tillegget og tre fra WooCommerce. De kom med hver sin bakgrunn, sin padding og sitt ikon, og ingen av dem visste hva et baand er. `.enu_warning` og `.enu_error` er tilleggets egne. De skrives rett ut paa `woocommerce_before_customer_login_form` fra `class-afreg-fields-front.php`, med `background: #ff9966`, hvit tekst og `padding: 20px` hardkodet i `afreg_front.css`. Fargen finnes ikke i paletten vaar, og 20 px leser som ingenting naar stripa gaar tvers over vinduet og alt annet paa sida staar langt lenger inn. ========================================================================== */ :root .enu_warning, :root .enu_error, :root .woocommerce-message, :root .woocommerce-info, :root .woocommerce-error { display: block; width: auto; margin: 0 0 var(--wp--preset--spacing--m); /* * Samme formel som `.ft-kontotopp`: fargen gaar helt ut til kanten, teksten * starter der resten av sida starter. * * `max()` er det som gjoer regelen brukbar overalt. Er flata bredere enn * baandet, deles overskuddet i to og teksten legger seg paa baandlinja. Er * den smalere - som spalta i handlekurvens rutenett - blir det leddet * negativt, og da velges sideinnrykket i stedet. Én regel, begge tilfeller. */ padding-block: var(--wp--preset--spacing--m); padding-inline: max( var(--wp--custom--sideinnrykk), calc((100% - var(--wp--custom--bandbredde)) / 2) ); background: var(--wp--preset--color--lys-blaa); border: 0; border-radius: 0; color: var(--wp--preset--color--tekst); font-size: var(--wp--preset--font-size--brodtekst); line-height: 1.5; list-style: none; } /* * Avvisning og feil skal skille seg fra en beskjed uten aa rope. Temaet bruker * roedt om det man ikke kan angre - krysset i handlekurven er graatt til man * holder musa over det - saa en heldekkende roed stripe ville sagt noe langt * sterkere enn «vi kan dessverre ikke opprette en forhandlerkonto for deg naa». * En tynn tone av det samme roede holder. */ :root .enu_error, :root .woocommerce-error { background: color-mix(in srgb, var(--wp--preset--color--roed) 12%, #fff); } /* * WooCommerce setter et ikon fra sin egen skriftfamilie i et `::before` som staar * absolutt plassert 1,5em fra venstre kant. Med innrykket vaart ville det havnet * ute i margen, langt fra teksten det hoerer til. `::after` beholdes: den er * clearfix for knappen som flyter til hoeyre. */ :root .woocommerce-message::before, :root .woocommerce-info::before, :root .woocommerce-error::before { content: none; } /* Feilmeldinger er en `ul`. Punktene skal lese som linjer, ikke som en liste. */ :root .woocommerce-error li { margin: 0; padding: 0; list-style: none; } /* * Utlogget gaar kontosida helt ut til kanten, og stripa skal legge seg rett paa * fotografiet. * * Begge ble proevd side om side: med luft under leser varselet som noe lagt * *over* sida, uten luft som toppen av den. Her er det det siste vi vil ha - * resten av den utloggede sida gaar ogsaa kant i kant, og en hvit stripe midt * i ville vaert det eneste stedet flata slapp taket. * * Vil man ha lufta tilbake er det dette ene tallet. */ body.woocommerce-account:not(.logged-in) .enu_warning, body.woocommerce-account:not(.logged-in) .enu_error, body.woocommerce-account:not(.logged-in) .wc-block-components-notice-banner { margin-block-end: 0; } /* * WooCommerce har to varselsystemer i drift samtidig. Det gamle - `.woocommerce-error` og * foelgesvennene - er stelt med over. Blokkene har sitt eget: `.wc-block-components-notice-banner`, * en flexboks med ikonet i en sirkel til venstre og teksten ved siden av. Innloggingsskjemaet * bruker dette, saa reglene over rakk det aldri. * * Samme innrykk som resten: fargen ut til kanten, teksten paa baandlinja. */ :root .wc-block-components-notice-banner { margin: 0 0 var(--wp--preset--spacing--m); /* WooCommerce setter sin padding med `!important`, saa vaar maa svare i samme mynt. */ padding-block: var(--wp--preset--spacing--m) !important; padding-inline: max( var(--wp--custom--sideinnrykk), calc((100% - var(--wp--custom--bandbredde)) / 2) ) !important; max-width: none; background: var(--wp--preset--color--lys-blaa); border: 0; border-radius: 0; box-shadow: none; color: var(--wp--preset--color--tekst); font-size: var(--wp--preset--font-size--brodtekst); } :root .wc-block-components-notice-banner.is-error { background: color-mix(in srgb, var(--wp--preset--color--roed) 12%, #fff); } /* * Ikonet er et `svg` som flex-barn og ikke et `::before`, saa det foelger innrykket av seg selv - * det var derfor det sto klistret i kanten foer. Sirkelen bak er svart hos WooCommerce; her tar * den fargen fra tonen. */ :root .wc-block-components-notice-banner > svg { background: var(--wp--preset--color--tekst-svak); } :root .wc-block-components-notice-banner.is-error > svg { background: var(--wp--preset--color--roed); } /* * De to blaa strekene over og under banneret var ingen ramme: det er Gutenbergs fokusring. * WooCommerce setter fokus paa banneret slik at skjermlesere leser det opp - det er riktig gjort - * men en boks som er like bred som vinduet har ingen kant aa ramme inn, saa ringen leser som to * streker paa villspor. * * Merk at det staar `:focus` og ikke `:focus-visible`. Det var forsoekt: tanken var aa la ringen * staa for den som bruker tastatur. Men sender du skjemaet med Enter, armerer Chrome heuristikken * sin, og fokuset WooCommerce setter paa neste side *teller* da som tastaturfokus - mens det samme * fokuset satt fra konsollet ikke gjoer det. Samme element, to svar, avhengig av hvordan du kom dit. * * Banneret har `tabindex="-1"` og kan ikke naas med Tab i det hele tatt, saa unntaket beskyttet en * tastaturbruker som ikke finnes. Ringen tas bort uansett hvordan fokuset kom; `role="alert"` og * fokuset er uroert, saa skjermlesere leser fortsatt opp meldinga. */ :root .wc-block-components-notice-banner:focus { outline: none; }