/* ========================================================================== First Seafood — Design tokens ========================================================================== Enda källan till sanning för färg, typografi, spacing, radie och skugga. Härlett ur den godkända v3-mockupen (mockup/styles-v3.css). TVÅ LAGER, EN SANNING PER VÄRDE ------------------------------- Värden som CoTheme redan äger (färg, typsnitt, rubrikstorlek, container) hämtas med var(--cotheme-*) och styrs alltså från Customizern. Fallback- värdet efter kommatecknet är samma värde som mockupen använder, så filen fungerar även fristående — t.ex. i HTML-prototypen på Vercel där CoTheme inte finns. Skriv ALDRIG om ett fallback-värde utan att samtidigt ändra Customizern. Då uppstår två sanningar och det är precis det systemet ska förhindra. Tokens med prefixet --fs- är projektspecifika och ägs av den här filen. ========================================================================== */ :root { /* ---------------------------------------------------------------------- FÄRG — varumärke Navy är ankaret (PMS 289). Accenten är kontrollerad och sparsam. ---------------------------------------------------------------------- */ --fs-navy: var(--cotheme-primary, #16243D); --fs-navy-deep: var(--cotheme-brand-2, #0E1A2E); /* mörka sektioner */ --fs-accent: var(--cotheme-secondary, #009BE1); /* ---------------------------------------------------------------------- FÄRG — accentens tre roller Signaturaccenten #009BE1 når bara 3.10:1 mot vitt och 2.89:1 mot mist. Den klarar alltså INTE WCAG AA för text (4.5:1). Därför är accenten uppdelad i tre tokens med varsin tydlig uppgift. Välj efter roll, inte efter smak: --fs-accent Ytor, ifyllda knappar, dekorlinjer, ikoner ≥24px och rubriker ≥24px. Aldrig brödtext, aldrig versal-etiketter. --fs-accent-ink All accentfärgad TEXT på ljus botten — eyebrows, länkar, hovertillstånd, små ikoner. 4.89:1 mot vitt, 4.56:1 mot mist. --fs-accent-light All accentfärgad text på navy botten. 10.07:1 mot navy-deep. ---------------------------------------------------------------------- */ --fs-accent-ink: var(--cotheme-brand-4, #0078AE); /* text-säker accent, ljus botten */ --fs-accent-light: var(--cotheme-brand-10, #6FD0FF); /* text-säker accent, mörk botten */ /* Profilens tredje färg (PMS 2905). Låg nog i kontrast för att bara användas som YTA — navy text mot den ger 8.48:1, vit text bara 1.61:1. */ --fs-lightblue: #8DC7E9; /* Accenttoner — bakgrunder och markeringar. Aldrig som textfärg. */ --fs-accent-tint-50: #F5F9FC; --fs-accent-tint-100: #E9F5FC; --fs-accent-tint-200: #D6EDFA; --fs-accent-tint-300: #C8E8F8; /* ---------------------------------------------------------------------- FÄRG — yta och linje ---------------------------------------------------------------------- */ --fs-paper: var(--cotheme-bg, #FFFFFF); --fs-mist: var(--cotheme-brand-5, #F5F7F9); /* lugn sektionsbakgrund */ --fs-mist-deep: #E7EDF2; /* mist ett steg ned */ --fs-line: var(--cotheme-border, #E4E8ED); --fs-line-strong: #CBD4DD; /* tabellhuvud, aktiv kant */ --fs-line-dark: rgba(255, 255, 255, 0.12); /* linje på navy */ --fs-line-dark-hover: rgba(255, 255, 255, 0.26); /* ---------------------------------------------------------------------- FÄRG — text ---------------------------------------------------------------------- */ --fs-heading: var(--cotheme-heading, #16243D); --fs-text: var(--cotheme-text, #2B3645); /* 12.24:1 mot vitt */ --fs-muted: var(--cotheme-text-light, #66717F); /* 4.96:1 mot vitt */ /* Text på navy botten */ --fs-text-on-navy: #FFFFFF; --fs-muted-on-navy: #9AA8BB; /* 6.42:1 mot navy */ --fs-focus: var(--cotheme-focus, #0078AE); /* ---------------------------------------------------------------------- TYPOGRAFI — familj och vikt Rubrikstorlekarna (h1–h6) ägs av CoThemes Customizer och ligger medvetet INTE här. Se docs/customizer.md för exakta värden. ---------------------------------------------------------------------- */ --fs-font: var(--cotheme-font-body, 'Schibsted Grotesk', system-ui, sans-serif); --fs-font-heading: var(--cotheme-font-heading, 'Schibsted Grotesk', system-ui, sans-serif); --fs-weight-normal: 400; --fs-weight-medium: 500; --fs-weight-semi: 600; /* v3:s arbetshäst — rubriker och etiketter */ /* ---------------------------------------------------------------------- TYPOGRAFI — UI-skala Steg utanför rubrikhierarkin. Ersätter mockupens 30+ lösa font-size. ---------------------------------------------------------------------- */ --fs-text-3xs: 11px; /* versal etikett i megameny */ --fs-text-2xs: 12px; /* utility-rad, fotnot */ --fs-text-xs: 13px; /* eyebrow, meta, bildtext */ --fs-text-sm: 14px; /* knapp, tabellcell */ --fs-text-base: 15px; /* navigation, UI-text */ --fs-text-lg: var(--cotheme-body-size, 17px); /* brödtext */ --fs-text-xl: 19px; /* ingress */ --fs-text-2xl: 22px; /* underrubrik, stor siffra */ /* ---------------------------------------------------------------------- TYPOGRAFI — spärr och radavstånd ---------------------------------------------------------------------- */ --fs-ls-label: 0.16em; /* versal etikett */ --fs-ls-eyebrow: 0.14em; /* eyebrow */ --fs-ls-wide: 0.06em; /* bildtext */ --fs-ls-ui: 0.04em; /* knapp, utility */ --fs-ls-tight: -0.025em; /* rubriker */ --fs-lh-display: 1.04; /* h1 */ --fs-lh-heading: 1.06; /* h2–h4 */ --fs-lh-body: var(--cotheme-body-line-height, 1.6); --fs-lh-relaxed: 1.7; /* smal spalt, citat */ /* ---------------------------------------------------------------------- SPACING — 4px-bas Talet efter --fs-space- är multipeln: 6 × 4px = 24px. Använd alltid ett steg ur skalan. Behövs ett mellanting är det nästan alltid layouten som är fel, inte skalan. ---------------------------------------------------------------------- */ --fs-space-1: 4px; --fs-space-2: 8px; --fs-space-3: 12px; --fs-space-4: 16px; --fs-space-5: 20px; --fs-space-6: 24px; --fs-space-8: 32px; --fs-space-10: 40px; --fs-space-14: 56px; --fs-space-18: 72px; --fs-space-24: 96px; --fs-space-30: 120px; /* Sidrytm — semantiska alias ovanpå skalan */ --fs-section-y: var(--fs-space-30); /* 120px — sektionens luft */ --fs-section-y-sm: var(--fs-space-18); /* 72px — tät sektion */ --fs-sec-head-gap: var(--fs-space-18); /* 72px — under sektionsrubrik */ --fs-gutter: var(--fs-space-10); /* 40px — .wrap sidopadding */ --fs-max: var(--cotheme-container-width, 1320px); /* ---------------------------------------------------------------------- RADIE v3 är medvetet nästan skarp — 2px är signaturen, inte en slump. ---------------------------------------------------------------------- */ --fs-radius: 2px; --fs-radius-pill: 999px; --fs-radius-circle: 50%; /* ---------------------------------------------------------------------- SKUGGA Fyra skuggor med varsin uppgift. Alla är navytonade — aldrig neutral svart, det gör ytan grådaskig mot den kalla paletten. ---------------------------------------------------------------------- */ --fs-shadow-card: 0 24px 48px -32px rgba(22, 36, 61, 0.25); --fs-shadow-menu: 0 30px 60px -28px rgba(22, 36, 61, 0.30); --fs-shadow-modal: 0 30px 80px rgba(9, 25, 45, 0.30); --fs-shadow-up: 0 -8px 24px -16px rgba(14, 26, 46, 0.50); /* sticky underkant */ /* ---------------------------------------------------------------------- RÖRELSE ---------------------------------------------------------------------- */ --fs-dur-fast: 0.18s; --fs-dur: 0.2s; --fs-ease: ease; /* Reveal — innehåll som träder fram när det scrollas in. Mekaniken bor i plugin:et first-seafood-reveal och sätts på per modul med klasserna fs-reveal, fs-reveal-mask och fs-reveal-barn. Värdena ägs däremot här: plugin:et har samma tal som fallback så det fungerar utan temat, men ändra dosen i det här blocket. Maskkanten ska ligga på EN sak per sektion — rubriken. Värdena är avvägda: mer avstånd eller längre trappa och rörelsen börjar konkurrera med innehållet i stället för att stötta det. */ --fs-reveal-dur: 0.62s; /* grunddosens längd */ --fs-reveal-dist: 8px; /* lyftets höjd */ --fs-reveal-stagger: 50ms; /* fördröjning mellan syskon */ --fs-reveal-mask-dur: 0.9s; /* maskkanten på rubriken */ /* Maskkantens mjukhet: hur brett kanten tonar, mätt i andel av maskbilden (som är 3x rubrikens bredd). 12% ger en fjäder på drygt en tredjedel av rubriken. Högre värde = mjukare, men över 33% slutar rubriken vara helt dold i startläget. Lägre närmar sig en rakbladskant igen. */ --fs-reveal-mask-fjader: 12%; /* Samma kurva som tidvattnet i knappmodulen (--fsk-tidvann-tid). Sajten har redan ett rörelsespråk — dyk och tidvatten — som är valt för att läsas som vatten och inte som animation. Reveal ska tala samma språk, inte introducera en andra kurvfamilj. Längdtrappan går efter vad rörelsen gör, inte efter var den bor: svar på något användaren gjort ska vara snabbt, innehåll som träder fram ska vara långsamt. dyk 0.34s hover, direkt svar tidvatten 0.5s hover, medvetet trögare reveal 0.62s grunddos vid inscrollning maskkant 0.9s sektionsrubriken Kurvan används bara på förflyttningen. Intoningen ligger på plain ease och löper något längre, så rörelsen inte har någon skarp ankomst. */ --fs-reveal-ease: cubic-bezier(0.32, 0.72, 0.28, 1); /* ---------------------------------------------------------------------- LAGER ---------------------------------------------------------------------- */ --fs-z-header: 50; --fs-z-menu: 60; } /* ========================================================================== KOMPATIBILITETSLAGER ========================================================================== Mockupen och produkt-plugin:et skrevs innan systemet fanns och använder korta namn (--navy, --accent, --mist ...). Aliasen nedan låter den koden köra oförändrad mot systemet. Detta är en brygga, inte en permanent lösning. Ny kod ska använda --fs-*. Se docs/kanda-avvikelser.md för avvecklingsplanen. ========================================================================== */ :root { --navy: var(--fs-navy); --navy-deep: var(--fs-navy-deep); --accent: var(--fs-accent); --paper: var(--fs-paper); --mist: var(--fs-mist); --line: var(--fs-line); --line-dark: var(--fs-line-dark); --text: var(--fs-text); --muted: var(--fs-muted); --max: var(--fs-max); --font: var(--fs-font); } /* ========================================================================== RUBRIKRAMP — korrigering av h5 och h6 ========================================================================== CoTheme skalar ALLA rubriker med en och samma procentsats per breakpoint (85% tablet, 75% mobil som standard). Det fungerar för h1–h4, som är display-typografi och ska krympa. h5 och h6 är i v3 inte display-typografi utan UI-text — 22px respektive 17px. Krymps de med samma procentsats hamnar de på 14px och 11px i mobil, vilket är för smått för att läsa bekvämt och bryter mot rytmen i UI-skalan (--fs-text-*). Därför låses de här. Deras desktopvärden sätts fortfarande i Customizern — det är bara skalningen som kopplas bort. ========================================================================== */ @media (max-width: 1024px) { h5, .h5 { font-size: var(--fs-text-2xl); } /* 22px */ h6, .h6 { font-size: var(--fs-text-lg); } /* 17px */ } /* ========================================================================== TILLGÄNGLIGHET — fokusmarkering ========================================================================== WCAG 2.1 AA 2.4.7. CoTheme sätter ingen synlig fokusring på alla element, så systemet gör det här. Aldrig outline: none utan ersättning. ========================================================================== */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--fs-focus); outline-offset: 2px; border-radius: var(--fs-radius); } /* ========================================================================== RÖRELSEKÄNSLIGHET ========================================================================== WCAG 2.1 AA 2.3.3. ========================================================================== */ @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; } }