/** * BF Design Tokens * Bibliotekarforbundet – Visuell identitet 2026 * * Kilde: Profilhåndbok april 2026 * Bruk alltid disse variablene, aldri hardkodede verdier. */ :root { /* ───────────────────────────────────────────── * FARGER – Hovedpalett «Energi og synlighet» * ───────────────────────────────────────────── */ --bf-energi: #FFF162; /* Gul – primær CTA, hero-bakgrunn */ --bf-aerlig: #F3A3C7; /* Rosa – tillitsvalgt-materiell */ --bf-levende: #00A580; /* Teal – aktive states, Levende-elementer */ --bf-drommende: #93D5F6; /* Lyseblå – kurs-seksjon */ --bf-drommende-lys: #DEF2FC; /* Lysere blå – dempet variant for fremhevede kurs */ --bf-pulserende: #E83C42; /* Rød – varsler, fremhevinger */ --bf-leken: #FFF7AB; /* Lys gul – sekundær bakgrunn */ --bf-flyt: #FFFDE8; /* Krem – sidefarge, bakgrunn (~13 % Energi i hvit) */ --bf-harmoni: #D3E8D4; /* Lys grønn – aktuelt/nyheter */ --bf-likevekt: #F4C4CC; /* Lys rosa – dekor */ /* ───────────────────────────────────────────── * FARGER – Tilleggspalett «Tyngde og profesjonalitet» * ───────────────────────────────────────────── */ --bf-serios: #3A7CBF; /* Mørk blå – profesjonell kontekst */ --bf-tyngde: #2F502C; /* Mørk grønn */ --bf-ro: #611F17; /* Mørk rød/burgunder */ --bf-balanse: #F2F2F1; /* Lys grå – nøytral bakgrunnsflate (~95 % lys, harmonisert med Flyt) */ --bf-sort: #000000; /* Sort – tekst på lys bakgrunn */ --bf-hvit: #FFFFFF; /* Hvit – tekst på mørk bakgrunn */ /* ───────────────────────────────────────────── * SEKSJONSFARGE-MAPPING (Profilhåndbok april 2026) * * Hver navigasjonsseksjon har en primærfarge fra merkevarepaletten, * og de fire hurtigboksene på forsiden bruker samme farge som sin * korresponderende seksjon for visuell kobling. * * Medlemskap – Energi (gul) * Arbeidsliv – Ærlig (rosa) * Kurs – Drømmende (lyseblå) * Aktuelt – Levende (teal) – Harmoni er dempet partner i backdrop * Om BF – Balanse (grå) * * Tillitsvalgt-materiell kombinerer Energi + Ærlig (ikke en egen * seksjon, men et gjennomgående visuelt tema i tillitsvalgt- * relaterte komponenter og dokumenter). * ───────────────────────────────────────────── */ --bf-color-medlemskap: var(--bf-energi); /* Gul */ --bf-color-arbeidsliv: var(--bf-aerlig); /* Rosa */ --bf-color-kurs: var(--bf-drommende); /* Blå */ --bf-color-aktuelt: var(--bf-levende); /* Teal */ --bf-color-om-bf: var(--bf-balanse); /* Grå */ /* ───────────────────────────────────────────── * TYPOGRAFI * * To fontfamilier, klart adskilt ansvar: * Gopher → H1, H2 (varm, inviterende inngang) * Akzidenz-Grotesk → Alt annet (direkte, profesjonell kropp) * * Aldri bruk text-transform: uppercase. * Uttrykket skal være moderne, direkte, vennlig og folkelig. * ───────────────────────────────────────────── */ /* Gopher – kun H1 og H2 (Adobe Fonts / Typekit) */ --bf-font-display: 'gopher', Georgia, serif; /* Akzidenz-Grotesk Next Pro – brødtekst, knapper, ingress, * faktabokser, H3–H6, navigasjon, etiketter (Adobe Fonts / Typekit) * Tilgjengelige vekter: 300 (light), 400 (regular), 500 (medium), 700 (bold) * Fallback til Arial hvis Adobe-kitet ikke er lastet */ --bf-font-body: 'akzidenz-grotesk-next-pro', Arial, 'Helvetica Neue', sans-serif; /* Typografiskala – hoved-stegene (xs → 6xl) følger standard skala. * Mellomstegene (22/26/28/32) finnes fordi enkelte komponenter i * Figma-designet har eksakte kort-/heading-størrelser som ikke * passer i standard-skalaen. Bruk alltid tokens – aldri hardkode px. * * RESPONSIV TYPOGRAFI (Sprint 4): * De største tokenene (xl, 28, 32, 40, 56) bruker clamp() for flytende * skalering mellom mobil og desktop. Ingen brytpunkt-hopp. Min-verdien * gjelder ved smalest viewport (~360 px), maks-verdien fra ca. 1280 px. * Komponenter trenger derfor IKKE lenger overstyre disse i media query. * Brødtekst (16) og mindre tokens forblir konstante. */ --bf-text-xs: 0.75rem; /* 12 px */ --bf-text-sm: 0.875rem; /* 14 px */ --bf-text-base: 1rem; /* 16 px */ --bf-text-lg: 1.125rem; /* 18 px */ --bf-text-xl: clamp(1.125rem, 0.4vw + 1rem, 1.25rem); /* 18 → 20 px – ingress */ --bf-text-22: 1.375rem; /* 22 px – kort-/nyhetstittel */ --bf-text-2xl: 1.5rem; /* 24 px */ --bf-text-26: 1.625rem; /* 26 px – portal heading (mobil) */ --bf-text-28: clamp(1.5rem, 0.8vw + 1.3rem, 1.75rem); /* 24 → 28 px – kurs feat-tittel */ --bf-text-3xl: 1.875rem; /* 30 px */ --bf-text-32: clamp(1.625rem, 1.2vw + 1.25rem, 2rem); /* 26 → 32 px – portal heading */ --bf-text-4xl: 2.25rem; /* 36 px */ --bf-text-40: clamp(1.875rem, 2vw + 1.25rem, 2.5rem); /* 30 → 40 px – H2 seksjon */ --bf-text-5xl: 3rem; /* 48 px */ --bf-text-56: clamp(2.25rem, 3.5vw + 1.25rem, 3.5rem); /* 36 → 56 px – H1 default */ --bf-text-6xl: 3.75rem; /* 60 px */ /* Fontvekter */ --bf-weight-light: 300; --bf-weight-regular: 400; --bf-weight-medium: 500; --bf-weight-bold: 700; /* Linjeavstand */ --bf-leading-tight: 1.2; --bf-leading-snug: 1.35; --bf-leading-normal: 1.5; --bf-leading-relaxed:1.625; --bf-leading-loose: 1.75; /* ───────────────────────────────────────────── * SPACING * ───────────────────────────────────────────── */ --bf-space-1: 0.25rem; /* 4px */ --bf-space-2: 0.5rem; /* 8px */ --bf-space-3: 0.75rem; /* 12px */ --bf-space-4: 1rem; /* 16px */ --bf-space-5: 1.25rem; /* 20px */ --bf-space-6: 1.5rem; /* 24px */ --bf-space-8: 2rem; /* 32px */ --bf-space-10: 2.5rem; /* 40px */ --bf-space-12: 3rem; /* 48px */ --bf-space-16: 4rem; /* 64px */ --bf-space-20: 5rem; /* 80px */ --bf-space-24: 6rem; /* 96px */ /* ───────────────────────────────────────────── * BORDER RADIUS * ───────────────────────────────────────────── */ --bf-radius-sm: 4px; --bf-radius-md: 8px; --bf-radius-lg: 12px; --bf-radius-xl: 16px; --bf-radius-2xl: 24px; --bf-radius-full: 9999px; /* Piller/rundede knapper */ /* ───────────────────────────────────────────── * HJØRNE-KUTT * 45° diagonalt kutt – samme vinkel som i BF-logoens «F» * (logoens kutt er 9.85 × 9.85 enheter = eksakt 45°). * * Konsekvent 3-tier system: * STANDARD (10 px) – små elementer: * knapper, pills, sjekkbokser, dato-chip, søkefelt, * små kort (f.eks. .bf-kurs__card). * MEDIUM (20 px) – mellomstore containere: * kontakt-kort, klikkbare info-bokser, stat-chips, * faktabokser med egen vekt. * STOR (40 px) – store bokser og paneler: * hurtigbokser på hover, nyhetskort på hover, kurs-featured, * portal-blokker, dropdown/megameny. * ───────────────────────────────────────────── */ --bf-corner-cut: 10px; --bf-corner-cut-md: 20px; --bf-corner-cut-lg: 40px; /* ───────────────────────────────────────────── * LAYOUT * ───────────────────────────────────────────── */ --bf-max-width: 1280px; --bf-content-width: 720px; /* Artikler og lang tekst */ --bf-header-height: 68px; /* Desktop header */ --bf-header-height-m: 52px; /* Mobil header */ /* ───────────────────────────────────────────── * MOTION * ───────────────────────────────────────────── * Eldre --bf-transition-* er kompositt (duration + easing) og er * fortsatt i bruk på hover/micro. Nye komponenter (megameny-fade, * drawer slide, hero stagger osv.) bruker --bf-duration-* og * --bf-ease-* hver for seg slik at animasjoner kan ha ulike * varigheter på forskjellige properties. * * Brukere som har 'prefers-reduced-motion: reduce' får alle * varigheter satt til 0.01 ms i base.css – animasjoner skrus * effektivt av uten å miste end-state. */ --bf-transition-fast: 150ms ease; --bf-transition-normal: 250ms ease; --bf-transition-slow: 400ms ease; /* Kompositt-frie motion-tokens. */ --bf-duration-fast: 150ms; /* hover, mikro-state */ --bf-duration-base: 220ms; /* dropdowns, drawer, panel-bytte */ --bf-duration-slow: 400ms; /* reveal, fade-in på sideinnhold */ /* Easing-kurver. Default er ease-out – bevegelser starter raskt * og lander rolig. Ikke bouncy. */ --bf-ease-out: cubic-bezier(0.2, 0, 0, 1); --bf-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ───────────────────────────────────────────── * Z-INDEX * ───────────────────────────────────────────── */ --bf-z-header: 100; --bf-z-dropdown: 200; --bf-z-mobile: 300; --bf-z-modal: 400; --bf-z-toast: 500; }