/* Theme Name: Nordwaystore Description: Child-tema för nordwaystore.se. Innehåller enbart presentation — CSS, egna Bricks-element och rena presentationsfilter. All affärslogik ligger i pluginen nordwaystore-core. Author: Middleout AB Template: bricks Version: 1.0.0 Text Domain: nordwaystore */ /* ========================================================================= Typsnitt: DM Sans (variabel, 100–1000), självhostad i assets/fonts/. Hämtad från Google Fonts 2026-10-30 (latin + latin-ext). Bricks temastil "Nordway Store" pekar på familjen; Bricks egen Google Fonts-laddning är avstängd i inställningarna så inget hämtas utifrån. ========================================================================= */ @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap; src: url("assets/fonts/DMSans-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap; src: url("assets/fonts/DMSans-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "DM Sans"; font-style: italic; font-weight: 100 1000; font-display: swap; src: url("assets/fonts/DMSans-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "DM Sans"; font-style: italic; font-weight: 100 1000; font-display: swap; src: url("assets/fonts/DMSans-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ========================================================================= Nordway Store — bas. Tokens (--nws-*, --space-*, --text-*) definieras som Bricks-globalvariabler. Färger: --nws-green (#BED62F, alltid fyllning med svart text), --nws-black, --nws-grey / -grey-line / -grey-soft / -grey-surface, --nws-white, --nws-red (bara fel och slut i lager), --nws-trustpilot (bara i deras stjärnor). Sajten går kant i kant med fönstret: sektionerna får hela bredden, medan INNEHÅLLET hålls kvar på --nws-content-width av containrarna. Bakgrunder, avgränsningar och det mörka sidfotsfältet spänner alltså över hela fönstret, men texten står kvar på samma måttband som förut. Resten av CSS:en ligger delad per yta i assets/css/ och köas i ordning av functions.php: header → home → cards → product → archive → footer. Allt laddas på alla sidor — uppdelningen är organisering, inte villkorlig laddning; mallarna delar klasser (korten, guiden, brödsmulorna). ========================================================================= */ body { background: var(--nws-white); } /* * Ytterhöljena spärrar inte längre bredden — det gör containrarna, var för * sig (header.css, home.css, footer.css, archive.css). Skillnaden syns på * sektioner med egen bakgrund eller underkant: de går nu ut i kanterna i * stället för att sluta vid kortet. */ #brx-header, main#brx-content, #brx-footer { background: var(--nws-white); width: 100%; } /* Hover på gröna knappar. På vitt blir de svarta, men svart mot svart syns inte — därför bär varje mörk yta sina egna hover-värden (vit knapp, svart text). Ny mörk yta? Lägg till dess klass i listan nedan, inget mer. */ :root { --nws-green-hover-bg: var(--nws-black); --nws-green-hover-fg: var(--nws-white); } .nws-topbar, .nws-footer, .nws-b2b__card, .nws-mega__promo, .nws-pdp-protocol__card, .nws-cart-banner, .nws-ghero__feature, .nws-article__hero, .nws-article__news, .nws-mini__head, .woocommerce-thankyou-order-received { --nws-green-hover-bg: var(--nws-white); --nws-green-hover-fg: var(--nws-black); } /* Samma sak åt andra hållet: svarta knappar blir gröna vid hover, men på en grön yta (kampanjbaren, quizrutan, minivarukorgens notis) blir de vita. */ :root { --nws-black-hover-bg: var(--nws-green); --nws-black-hover-fg: var(--nws-black); } .nws-campaign, .nws-ghero__quiz, .nws-mini__notice { --nws-black-hover-bg: var(--nws-white); --nws-black-hover-fg: var(--nws-black); } /* Synlig fokusmarkering — samma stil överallt. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--nws-black); outline-offset: 2px; border-radius: 2px; } /* Bricks egna fokusramar (filter, sortering, kryssrutor) är blå som standard, #3b82f6. Samma svart som resten av sajten. */ :root { --brx-indicator-focus-color: var(--nws-black); } /* Filterknapparna (sortering, skick, märke) är radioknappar och kryssrutor som ser ut som knappar. Bricks ritar ramen med label:focus-within, som slår till även vid musklick — den ska bara synas med tangentbordet. */ .brxe-filter-radio[data-mode=button] label:focus-within .bricks-button, .brxe-filter-checkbox[data-mode=button] label:focus-within .bricks-button { outline: none; } .brxe-filter-radio[data-mode=button] input:focus-visible + .bricks-button, .brxe-filter-checkbox[data-mode=button] input:focus-visible + .bricks-button { outline: 3px solid var(--nws-black); outline-offset: 2px; } /* På svarta ytor är konturen grön i stället — svart mot svart syns inte. */ .nws-topbar :focus-visible, .nws-footer :focus-visible, .nws-b2b__card :focus-visible, .nws-mega__promo :focus-visible, .nws-pdp-protocol__card :focus-visible, .nws-cart-banner :focus-visible, .nws-article__hero :focus-visible, .nws-article__news :focus-visible { outline-color: var(--nws-green); } /* Respektera minskad rörelse. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Tightare tracking på display-text utanför rubriktaggarna. Härledning: typskalan stramas åt med −0.005em per skalsteg över text-m, samma regel som h1 (−0.025) … h4 (−0.01) i theme stylen. */ .nws-b2b__title { letter-spacing: -0.015em; } .nws-card__price .woocommerce-Price-amount, .nws-mega__promo-title, .nws-b2b__stat-value { letter-spacing: -0.01em; } /* Brödsmulor — delas med arkiv och sök. */ .nws-crumbs > .brxe-container { padding: 2rem var(--nws-gutter) 1.2rem; } /* Mobil: samma 1,6 rem-kant som headerns rader och arkivets innehåll — 56 px-guttern åt annars upp en tredjedel av skärmen. */ @media (max-width: 767px) { .nws-crumbs > .brxe-container { padding: 1.4rem 1.6rem 0.8rem; } } /* Mobil: hela rem-typografin ett snäpp ner. Bricks sätter roten till 62,5 % (1rem = 10px); 59 % ger 1rem = 9,44px, dvs. ~6 % mindre överallt — 17px brödtext blir 16, 21px korttitel blir ~20. html:root behövs för att gå över Bricks theme style-regel med ren specificitet, utan !important. Fluid-skalorna (text- och space-variablerna) är px-baserade och rörs inte. OBS: skriv aldrig "--x-*" följt av snedstreck i CSS-kommentarer — en asterisk+snedstreck stänger kommentaren och käkar nästa regelblock. */ @media (max-width: 767px) { html:root { font-size: 59%; } } .nws-crumbs nav > .navigation { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 1.5rem; color: var(--nws-grey); } .nws-crumbs nav a { color: var(--nws-grey); } .nws-crumbs nav a:hover { color: var(--nws-black); } .nws-crumbs nav .separator::before { content: '/'; color: var(--nws-grey); } /* ========================================================================= Sektionsrytm (2026-09-18) Konventionen: en vanlig sektion bär sin luft NEDÅT (padding-bottom --space-xl på containern) och ingen uppåt — avståndet mellan två vita sektioner blir alltid ett --space-xl. Band med egen bakgrund (hero, USP-raden, Trustpilot-raden, varumärkesbandet) bär luften inuti bandet, så sektionen som följer ett band måste själv sätta luft uppåt. Det görs här på ett ställe, i stället för i varje sektions egen regel. Efter brödsmulorna får första sektionen samma lilla avstånd överallt: produktsida, arkiv, sida, undersida, guider och artikel. ========================================================================= */ .nws-crumbs + .brxe-section > .brxe-container { padding-top: 1.2rem; } :is(.nws-hero, .nws-usps, .nws-trustrow, .nws-brandband) + .brxe-section > .brxe-container { padding-top: var(--space-xl); } /* Cookiebannern (Complianz): sajtens typsnitt. Färger och texter sätts i Complianz → Cookiebanner (svart yta, grön Godkänn-knapp). */ #cmplz-cookiebanner-container .cmplz-cookiebanner, #cmplz-manage-consent .cmplz-manage-consent { font-family: "DM Sans", sans-serif; }