/* === Font fallback for eksterne fonter (Typekit via settings) === 1) Vi starter alltid med en trygg system-stack → stabil layout. 2) Når Typekit har lastet (Adobe setter .wf-active / .wf-inactive på ) kan vi trygt gå tilbake til den faktiske brand-fonten fra settings. */ html, body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; line-height: 1.5; } /* Når Adobe/Typekit er klar → bruk fonten admin har valgt i settings */ html.wf-active body, html.wf-inactive body { font-family: var(--brand-font-family) !important; } :root{ --brand-primary: #1E63FF; --brand-primary-rgb: 30, 99, 255; --brand-on-primary: #ffffff; --bs-primary: var(--brand-primary); --bs-primary-rgb: var(--brand-primary-rgb); /* Outline-tone: mørkere variant av primærfargen for bedre kontrast */ --brand-primary-outline: color-mix(in oklab, var(--bs-primary) var(--brand-outline-strength, 60%), #000); /* Light mode subtle – MER mettet bakgrunn + mørkere tekst for tydeligere kontrast */ --bs-primary-bg-subtle: color-mix(in oklab, var(--bs-primary) 30%, #fff); --bs-primary-border-subtle: color-mix(in oklab, var(--bs-primary) 52%, #fff); --bs-primary-text-emphasis: color-mix(in oklab, var(--bs-primary) 80%, #000); --brand-soft-bg: linear-gradient( 180deg, rgba(var(--brand-primary-rgb), .06), rgba(var(--brand-primary-rgb), 0) ); --brand-on-primary: #ffffff; --brand-on-secondary: #ffffff; --brand-on-accent: #ffffff; --brand-on-info: #ffffff; --brand-on-success: #ffffff; --brand-on-warning: #0a0a0a; --brand-on-danger: #ffffff; --brand-btn-primary-bg: var(--bs-primary, #0d6efd); --brand-btn-primary-text: var(--brand-on-primary); --brand-btn-secondary-bg: var(--brand-secondary, var(--bs-secondary, #6c757d)); --brand-btn-secondary-text: var(--brand-on-secondary); --brand-btn-info-bg: var(--bs-info, #0dcaf0); --brand-btn-info-text: var(--brand-on-info); --brand-btn-success-bg: var(--bs-success, #198754); --brand-btn-success-text: var(--brand-on-success); --brand-btn-warning-bg: var(--bs-warning, #ffc107); --brand-btn-warning-text: var(--brand-on-warning); --brand-btn-danger-bg: var(--bs-danger, #dc3545); --brand-btn-danger-text: var(--brand-on-danger); --brand-badge-primary-text: var(--brand-on-primary); --brand-badge-secondary-text: var(--brand-on-secondary); --brand-badge-info-text: var(--brand-on-info); --brand-badge-success-text: var(--brand-on-success); --brand-badge-warning-text: var(--brand-on-warning); --brand-badge-danger-text: var(--brand-on-danger); --brand-toast-info-bg: var(--bs-info, #0dcaf0); --brand-toast-info-text: var(--brand-on-info); --brand-toast-info-link: var(--brand-toast-info-text); --brand-toast-info-link-hover: var(--brand-toast-info-link); --brand-toast-primary-bg: var(--brand-primary, var(--bs-primary, #0d6efd)); --brand-toast-primary-text: var(--brand-on-primary); --brand-toast-primary-link: var(--brand-toast-primary-text); --brand-toast-primary-link-hover: var(--brand-toast-primary-link); --brand-toast-primary-close-filter: brightness(0) invert(1); --brand-toast-secondary-close-filter: brightness(0) invert(1); --brand-toast-brand-bg: var(--brand-toast-primary-bg); --brand-toast-brand-text: var(--brand-toast-primary-text); --brand-toast-brand-link: var(--brand-on-primary); --brand-toast-brand-link-hover: var(--brand-toast-brand-link); --brand-toast-secondary-text: var(--brand-on-secondary); --brand-toast-secondary-link: var(--brand-on-secondary); --brand-toast-secondary-link-hover: var(--brand-toast-secondary-link); --brand-toast-success-bg: var(--bs-success, #198754); --brand-toast-success-text: var(--brand-on-success); --brand-toast-success-link: var(--brand-toast-success-text); --brand-toast-success-link-hover: var(--brand-toast-success-link); --brand-toast-success-close-filter: brightness(0) invert(1); --brand-toast-warning-bg: var(--bs-warning, #ffc107); --brand-toast-warning-text: var(--brand-on-warning); --brand-toast-warning-link: var(--brand-toast-warning-text); --brand-toast-warning-link-hover: var(--brand-toast-warning-link); --brand-toast-warning-close-filter: none; --brand-toast-danger-bg: var(--bs-danger, #dc3545); --brand-toast-danger-text: var(--brand-on-danger); --brand-toast-danger-link: var(--brand-toast-danger-text); --brand-toast-danger-link-hover: var(--brand-toast-danger-link); --brand-toast-danger-close-filter: brightness(0) invert(1); --brand-toast-info-close-filter: brightness(0) invert(1); --brand-secondary: #16D4D0; --brand-on-secondary: #ffffff; --bs-secondary: var(--brand-secondary); /* Light mode subtle – lett justert bakgrunn, MEN vesentlig mørkere tekst */ --bs-secondary-bg-subtle: color-mix(in oklab, var(--bs-secondary) 24%, #fff); --bs-secondary-border-subtle: color-mix(in oklab, var(--bs-secondary) 40%, #fff); --bs-secondary-text-emphasis: color-mix(in oklab, var(--bs-secondary) 80%, #000); --brand-radius-base-px: 10px; --brand-radius-button-px: 12px; --brand-radius-card-px: 18px; /* rem-varianter for moderne komponenter / clamp / fluid UI */ --brand-radius-base-rem: 0.625rem; --brand-radius-button-rem: 0.75rem; --brand-radius-card-rem: 1.125rem; --brand-surface: #FFFFFF; --brand-border-color: #D9E1EC; --brand-card-bg: var(--brand-surface); --brand-card-text: var(--brand-body-color, var(--bs-body-color, #212529)); --brand-card-border: var(--brand-border-color); --brand-card-header-bg: color-mix(in oklab, var(--brand-card-text) 4%, var(--brand-card-bg)); --brand-card-header-text: var(--brand-card-text); --brand-surface-hover: color-mix(in oklab, var(--brand-card-text) 6%, var(--brand-surface)); --brand-surface-active: color-mix(in oklab, var(--brand-card-text) 10%, var(--brand-surface)); --brand-modal-bg: var(--brand-surface); --brand-modal-text: var(--brand-card-text); --brand-modal-border: var(--brand-border-color); --brand-tooltip-bg: var(--brand-surface); --brand-tooltip-text: var(--brand-card-text); --brand-tooltip-border: var(--brand-border-color); --brand-popover-bg: var(--brand-surface); --brand-popover-text: var(--brand-card-text); --brand-popover-border: var(--brand-border-color); --brand-search-surface: var(--brand-surface); --brand-search-border: var(--brand-border-color); --brand-table-bg: var(--brand-surface); --brand-table-text: var(--brand-body-color, var(--bs-body-color, #212529)); --brand-table-border: var(--brand-border-color); --brand-table-header-bg: color-mix(in oklab, var(--brand-table-text) 5%, var(--brand-table-bg)); --brand-table-header-text: var(--brand-table-text); --brand-table-striped-bg: color-mix(in oklab, var(--brand-table-text) 3%, var(--brand-table-bg)); --brand-table-striped-text: var(--brand-table-text); --brand-table-hover-bg: color-mix(in oklab, var(--brand-table-text) 6%, var(--brand-table-bg)); --brand-table-hover-text: var(--brand-table-text); --brand-table-active-bg: color-mix(in oklab, var(--brand-primary, var(--bs-primary, #0d6efd)) 12%, var(--brand-table-bg)); --brand-table-active-text: var(--brand-table-text); --brand-table-min-width: 52rem; --brand-form-bg: var(--brand-surface); --brand-form-text: var(--brand-body-color, var(--bs-body-color, #212529)); --brand-form-border: var(--brand-border-color); --brand-form-focus: var(--focus-color, var(--brand-primary, var(--bs-primary, #0d6efd))); --brand-form-placeholder: color-mix(in oklab, var(--brand-form-text) 55%, transparent); --brand-form-disabled-bg: color-mix(in oklab, var(--brand-form-text) 7%, var(--brand-form-bg)); --brand-form-disabled-text: color-mix(in oklab, var(--brand-form-text) 55%, var(--brand-form-bg)); --brand-form-check-bg: var(--brand-form-bg); --brand-form-check-border: var(--brand-form-border); --brand-form-check-checked-bg: var(--brand-primary, var(--bs-primary, #0d6efd)); --brand-form-check-indicator: var(--brand-on-primary, #ffffff); --brand-form-check-focus: var(--brand-form-focus); --brand-form-check-disabled: var(--brand-form-disabled-text); --brand-dropdown-bg: var(--brand-surface); --brand-dropdown-text: var(--brand-body-color, var(--bs-body-color, #212529)); --brand-dropdown-border: var(--brand-border-color); --brand-dropdown-hover-bg: color-mix(in oklab, var(--brand-dropdown-text) 7%, var(--brand-dropdown-bg)); --brand-dropdown-active-bg: var(--brand-primary, var(--bs-primary, #0d6efd)); --brand-nav-bg: var(--brand-navbar-bg, var(--brand-primary, var(--bs-primary, #0d6efd))); --brand-nav-text: var(--brand-navbar-link, var(--brand-on-navbar-bg, #ffffff)); --brand-nav-muted: color-mix(in oklab, var(--brand-nav-text) 70%, var(--brand-nav-bg)); --brand-nav-border: color-mix(in oklab, var(--brand-nav-text) 18%, transparent); --brand-nav-hover-bg: color-mix(in oklab, var(--brand-nav-text) 12%, transparent); --brand-nav-hover-text: var(--brand-navbar-link-hover, var(--brand-nav-text)); --brand-nav-active-bg: color-mix(in oklab, var(--brand-nav-text) 18%, transparent); --brand-nav-active-text: var(--brand-nav-hover-text); --brand-nav-bubble-bg: #232939; --brand-nav-bubble-text: #ffffff; --brand-nav-bubble-border: color-mix(in oklab, var(--brand-nav-text) 22%, transparent); --brand-nav-search-bg: var(--brand-nav-bg); --brand-nav-search-text: var(--brand-nav-text); --brand-nav-search-placeholder: color-mix(in oklab, var(--brand-nav-text) 65%, transparent); --brand-nav-search-border: var(--brand-nav-border); --brand-nav-search-focus: var(--focus-color, var(--brand-primary, var(--bs-primary, #0d6efd))); --brand-sidebar-bg: var(--brand-surface, var(--brand-body-bg, #ffffff)); --brand-sidebar-text: var(--brand-body-color, var(--bs-body-color, #212529)); --brand-sidebar-muted: color-mix(in oklab, var(--brand-sidebar-text) 62%, var(--brand-sidebar-bg)); --brand-sidebar-border: var(--brand-border-color, var(--bs-border-color, rgba(0,0,0,.12))); --brand-sidebar-hover-bg: var(--brand-surface-hover, color-mix(in oklab, var(--brand-sidebar-text) 7%, var(--brand-sidebar-bg))); --brand-sidebar-hover-text: var(--brand-sidebar-text); --brand-sidebar-active-bg: color-mix(in oklab, var(--brand-primary, var(--bs-primary, #0d6efd)) 12%, var(--brand-sidebar-bg)); --brand-sidebar-active-text: var(--brand-sidebar-text); --brand-sidebar-active-border: var(--brand-primary, var(--bs-primary, #0d6efd)); --brand-offcanvas-close-text: #ffffff; --brand-offcanvas-close-filter: brightness(0) invert(1); --bs-border-color: var(--brand-border-color); --bs-card-bg: var(--brand-card-bg); --bs-card-color: var(--brand-card-text); --bs-card-border-color: var(--brand-card-border); --bs-card-cap-bg: var(--brand-card-header-bg); --bs-card-cap-color: var(--brand-card-header-text); --bs-modal-bg: var(--brand-modal-bg); --bs-modal-color: var(--brand-modal-text); --bs-modal-border-color: var(--brand-modal-border); --bs-tooltip-bg: var(--brand-tooltip-bg); --bs-tooltip-color: var(--brand-tooltip-text); --bs-popover-bg: var(--brand-popover-bg); --bs-popover-body-color: var(--brand-popover-text); --bs-popover-border-color: var(--brand-popover-border); --bs-table-bg: var(--brand-table-bg); --bs-table-color: var(--brand-table-text); --bs-table-border-color: var(--brand-table-border); --bs-table-striped-bg: var(--brand-table-striped-bg); --bs-table-striped-color: var(--brand-table-striped-text); --bs-table-hover-bg: var(--brand-table-hover-bg); --bs-table-hover-color: var(--brand-table-hover-text); --bs-table-active-bg: var(--brand-table-active-bg); --bs-table-active-color: var(--brand-table-active-text); /* Pill-utility: full avrunding (capsule) */ --brand-radius-pill: 9999px; /* Bootstrap overrides */ --bs-border-radius: var(--brand-radius-base-px); --bs-btn-border-radius: var(--brand-radius-button-px); --bs-card-border-radius: var(--brand-radius-card-px); --bs-alert-border-radius: var(--brand-radius-card-px); --bs-modal-border-radius: var(--brand-radius-card-px); --bs-toast-border-radius: var(--brand-radius-card-px); --breadcrumb-spacing-top: 1.25rem; /* 20px */ --breadcrumb-spacing-bottom: 1.35rem; /* 28px */ --brand-accent: #3A32F5; --brand-on-accent: #ffffff; --brand-body-bg: #F5F7FB; --bs-body-bg: var(--brand-body-bg); --brand-body-color: #1F2937; --bs-body-color: var(--brand-body-color); --brand-heading-color: #0B1220; --bs-heading-color: var(--brand-heading-color); --brand-link: #1E63FF; --bs-link-color: var(--brand-link); --brand-link-hover: #1550D8; --bs-link-hover-color: var(--brand-link-hover); --brand-link-visited: #4F46E5; --brand-navbar-link: #D8E2F0; --brand-navbar-link-hover: #FFFFFF; --brand-navbar-bg: #0A1020; --brand-on-navbar-bg: #ffffff; --brand-info: #0EA5E9; --brand-on-info: #ffffff; --bs-info: var(--brand-info); --bs-info-bg-subtle: color-mix(in oklab, var(--bs-info) 15%, #fff); --bs-info-border-subtle: color-mix(in oklab, var(--bs-info) 30%, #fff); --bs-info-text-emphasis: color-mix(in oklab, var(--bs-info) 40%, #000); --brand-success: #10B981; --brand-on-success: #ffffff; --bs-success: var(--brand-success); --bs-success-bg-subtle: color-mix(in oklab, var(--bs-success) 15%, #fff); --bs-success-border-subtle: color-mix(in oklab, var(--bs-success) 30%, #fff); --bs-success-text-emphasis: color-mix(in oklab, var(--bs-success) 35%, #0a0a0a); --brand-warning: #F59E0B; --brand-on-warning: #0a0a0a; --bs-warning: var(--brand-warning); --bs-warning-bg-subtle: color-mix(in oklab, var(--bs-warning) 20%, #fff); --bs-warning-border-subtle: color-mix(in oklab, var(--bs-warning) 35%, #fff); --bs-warning-text-emphasis: color-mix(in oklab, var(--bs-warning) 40%, #000); --brand-danger: #EF4444; --brand-on-danger: #ffffff; --bs-danger: var(--brand-danger); --bs-danger-bg-subtle: color-mix(in oklab, var(--bs-danger) 15%, #fff); --bs-danger-border-subtle: color-mix(in oklab, var(--bs-danger) 30%, #fff); --bs-danger-text-emphasis: color-mix(in oklab, var(--bs-danger) 38%, #000); --brand-font-family: "acumin-pro", sans-serif;; --brand-heading-font-family: "Soleil", "Inter", "Segoe UI", sans-serif; --brand-font-size: 16; --brand-font-size-px: 16px; --brand-body-weight: 300; --brand-heading-weight: 500; --brand-h1: 40px; --brand-h2: 30px; --brand-h3: 26px; --brand-h4: 22px; --brand-h5: 20px; --brand-h6: 18px; --brand-radius-base: 10; --brand-radius-btn: 12; --brand-radius-card: 18; --brand-outline-strength: 60%; --brand-h1-color: #0B1220; --brand-h2-color: #111827; --brand-h3to6-color: #1F2937; --brand-footer-bg: #0A1020; --brand-footer-color: #C7D2E3; --brand-footer-link: #E5ECF6; --brand-footer-link-hover: #FFFFFF; /* NY */ --brand-footer-link-visited: #A5B4FC; /* NY */ --brand-footer-focus: #16D4D0; --focus-color: #16D4D0; --brand-focus-rgba: rgba(22, 212, 208, .25); --brand-focus-width: 3px; --brand-focus-outline-offset: 2px; /* Eksplicitte brand-tokens for komponenter som vil “henge seg på” fokus */ --brand-focus-border: var(--focus-color); --brand-focus-ring: var(--brand-focus-rgba); /* Koble til Bootstrap */ --bs-focus-ring-width: var(--brand-focus-width); --bs-focus-ring-color: var(--brand-focus-rgba); --bs-btn-focus-shadow-rgb: 22, 212, 208; } .tooltip { --bs-tooltip-bg: var(--brand-tooltip-bg, var(--brand-surface, var(--bs-body-bg))); --bs-tooltip-color: var(--brand-tooltip-text, var(--brand-card-text, var(--bs-body-color))); } .popover { --bs-popover-bg: var(--brand-popover-bg, var(--brand-surface, var(--bs-body-bg))); --bs-popover-body-color: var(--brand-popover-text, var(--brand-card-text, var(--bs-body-color))); --bs-popover-border-color: var(--brand-popover-border, var(--brand-border-color, var(--bs-border-color))); } :root[data-theme="dark"]{ /* Bakgrunn og tekst */ --brand-secondary: #20E1DC; --brand-on-secondary: #0a0a0a; /* mørkest: dette er selve sida */ --brand-body-bg: #070B14; --bs-body-bg: #070B14; --brand-body-color: #DCE6F5; --bs-body-color: #DCE6F5; --brand-heading-color: #FFFFFF; /* Flater og border i dark – kort skal være lysere enn bakgrunn */ /* admin har eksplisitt valgt kort/flate-farge */ --brand-surface: #111827; --brand-border-color: #253247; /* Primær i dark – fall tilbake til lys primær hvis ikke satt */ --brand-primary: #3B82FF; --brand-primary-rgb: 59, 130, 255; --brand-on-primary: #ffffff; --bs-primary: var(--brand-primary); --bs-primary-rgb: var(--brand-primary-rgb); /* Navbar i dark */ --brand-navbar-bg: #050816; --brand-on-navbar-bg: #ffffff; --brand-nav-bubble-bg: #1E2231; --brand-nav-bubble-text: #ffffff; --brand-offcanvas-close-text: #ffffff; --brand-offcanvas-close-filter: brightness(0) invert(1); --brand-navbar-link: #D7E4F5; --brand-navbar-link-hover: #FFFFFF; /* Lenker i dark */ --brand-link: #5AA2FF; --bs-link-color: #5AA2FF; --brand-link-hover: #8BC4FF; --bs-link-hover-color: #8BC4FF; /* Footer i dark */ --brand-footer-bg: #050816; --brand-footer-color: #C6D4E6; --brand-footer-link: #E5ECF6; --brand-footer-link-hover: #FFFFFF; --brand-footer-link-visited: #A5B4FC; --brand-footer-focus: #20E1DC; /* Tabellpalett for dark */ --brand-table-bg: var(--brand-surface, rgba(255,255,255,.02)); --brand-table-text: var(--brand-body-color, #f5f5f5); --brand-table-border: var(--brand-border-color, rgba(255,255,255,.08)); --brand-table-header-bg: color-mix(in oklab, var(--brand-table-text) 5%, var(--brand-table-bg)); --brand-table-header-text: var(--brand-heading-color, var(--brand-table-text)); --brand-table-striped-bg: color-mix(in oklab, var(--brand-table-text) 3%, var(--brand-table-bg)); --brand-table-striped-text: var(--brand-table-text); --brand-table-hover-bg: color-mix(in oklab, var(--brand-table-text) 6%, var(--brand-table-bg)); --brand-table-hover-text: var(--brand-table-text); --brand-table-active-bg: color-mix(in oklab, var(--brand-primary, var(--bs-primary, #3b82f6)) 18%, var(--brand-table-bg)); --brand-table-active-text: var(--brand-table-text); --bs-table-color: var(--brand-table-text); --bs-table-bg: var(--brand-table-bg); --bs-table-border-color: var(--brand-table-border); --bs-table-striped-bg: var(--brand-table-striped-bg); --bs-table-striped-color: var(--brand-table-striped-text); --bs-table-hover-bg: var(--brand-table-hover-bg); --bs-table-hover-color: var(--brand-table-hover-text); --bs-table-active-bg: var(--brand-table-active-bg); --bs-table-active-color: var(--brand-table-active-text); } /* Auto-dark for brukere som har det i OS, men bare hvis vi IKKE har tvunget light */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* mørk side-bakgrunn */ --brand-body-bg: #070B14; --bs-body-bg: #070B14; /* men kort/flater skal være basert på darkSurface, ikke ta over body */ --brand-surface: #111827; --brand-heading-color: #FFFFFF; --brand-border-color: #253247; --brand-primary: #3B82FF; --brand-primary-rgb: 59, 130, 255; --brand-on-primary: #ffffff; --bs-primary: var(--brand-primary); --bs-primary-rgb: var(--brand-primary-rgb); --brand-navbar-bg: #050816; --brand-on-navbar-bg: #ffffff; --brand-nav-bubble-bg: #1E2231; --brand-nav-bubble-text: #ffffff; --brand-navbar-link: #D7E4F5; --brand-navbar-link-hover: #FFFFFF; /* Lenker i dark */ --brand-link: #5AA2FF; --bs-link-color: #5AA2FF; --brand-link-hover: #8BC4FF; --bs-link-hover-color: #8BC4FF; /* Footer i dark */ --brand-footer-bg: #050816; --brand-footer-color: #C6D4E6; --brand-footer-link: #E5ECF6; --brand-footer-link-hover: #FFFFFF; --brand-footer-link-visited: #A5B4FC; --brand-footer-focus: #20E1DC; /* Tabellpalett for dark */ --brand-table-bg: var(--brand-surface, rgba(255,255,255,.02)); --brand-table-text: var(--brand-body-color, #f5f5f5); --brand-table-border: var(--brand-border-color, rgba(255,255,255,.08)); --brand-table-header-bg: color-mix(in oklab, var(--brand-table-text) 5%, var(--brand-table-bg)); --brand-table-header-text: var(--brand-heading-color, var(--brand-table-text)); --brand-table-striped-bg: color-mix(in oklab, var(--brand-table-text) 3%, var(--brand-table-bg)); --brand-table-striped-text: var(--brand-table-text); --brand-table-hover-bg: color-mix(in oklab, var(--brand-table-text) 6%, var(--brand-table-bg)); --brand-table-hover-text: var(--brand-table-text); --brand-table-active-bg: color-mix(in oklab, var(--brand-primary, var(--bs-primary, #3b82f6)) 18%, var(--brand-table-bg)); --brand-table-active-text: var(--brand-table-text); --bs-table-color: var(--brand-table-text); --bs-table-bg: var(--brand-table-bg); --bs-table-border-color: var(--brand-table-border); --bs-table-striped-bg: var(--brand-table-striped-bg); --bs-table-striped-color: var(--brand-table-striped-text); --bs-table-hover-bg: var(--brand-table-hover-bg); --bs-table-hover-color: var(--brand-table-hover-text); --bs-table-active-bg: var(--brand-table-active-bg); --bs-table-active-color: var(--brand-table-active-text); } } /* ===== Globalt ===== */ body{ font-family: var(--brand-font-family) !important; font-size: var(--brand-font-size-px) !important; color: var(--brand-body-color) !important; background: var(--brand-body-bg) !important;} h1,h2,h3,h4,h5,h6{ font-family: var(--brand-heading-font-family, var(--brand-font-family)) !important; } /* === Heading-nivåfarger (kaskade) === Regler: - Hvis kun H1 satt: bruk H1 på alle nivåer. - Hvis H1+H2 satt men ikke H3: H1→h1, H2→h2, H2 fallback for h3–h6. - Hvis H3 satt: H3 brukes på h3–h6. - Hvis ingen satt: fall tilbake til global --brand-heading-color (om satt) ellers ingen override. */ :root{ --_h1c: #0B1220; --_h2c: #111827; --_h3c: #1F2937; } h1{ color: var(--_h1c) !important; } h2{ color: var(--_h2c) !important; } h3, h4, h5, h6{ color: var(--_h3c) !important; } /* ===== Lenker ===== */ a{ color: var(--brand-link); }a:hover{ color: var(--brand-link-hover); text-decoration: none; }a:visited{ color: var(--brand-link-visited); } /* Toast-lenker må vinne over globale brand-lenker fordi brand.css.php lastes etter custom.css. */ .toast a, .toast a:visited { color: currentColor !important; } .toast a:hover, .toast a:focus { color: currentColor !important; } .toast.bg-success a, .toast.bg-success a:visited { color: var(--brand-toast-success-link, currentColor) !important; } .toast.bg-success a:hover, .toast.bg-success a:focus { color: var(--brand-toast-success-link-hover, var(--brand-toast-success-link, currentColor)) !important; } .toast.bg-danger a, .toast.bg-danger a:visited { color: var(--brand-toast-danger-link, currentColor) !important; } .toast.bg-danger a:hover, .toast.bg-danger a:focus { color: var(--brand-toast-danger-link-hover, var(--brand-toast-danger-link, currentColor)) !important; } .toast.bg-warning a, .toast.bg-warning a:visited { color: var(--brand-toast-warning-link, currentColor) !important; } .toast.bg-warning a:hover, .toast.bg-warning a:focus { color: var(--brand-toast-warning-link-hover, var(--brand-toast-warning-link, currentColor)) !important; } .toast.bg-info a, .toast.bg-info a:visited { color: var(--brand-toast-info-link, currentColor) !important; } .toast.bg-info a:hover, .toast.bg-info a:focus { color: var(--brand-toast-info-link-hover, var(--brand-toast-info-link, currentColor)) !important; } .toast.bg-brand a, .toast.bg-brand a:visited { color: var(--brand-toast-brand-link, currentColor) !important; } .toast.bg-brand a:hover, .toast.bg-brand a:focus { color: var(--brand-toast-brand-link-hover, var(--brand-toast-brand-link, currentColor)) !important; } .toast.bg-primary a, .toast.bg-primary a:visited { color: var(--brand-toast-primary-link, currentColor) !important; } .toast.bg-primary a:hover, .toast.bg-primary a:focus { color: var(--brand-toast-primary-link-hover, var(--brand-toast-primary-link, currentColor)) !important; } .toast.bg-secondary a, .toast.bg-secondary a:visited { color: var(--brand-toast-secondary-link, currentColor) !important; } .toast.bg-secondary a:hover, .toast.bg-secondary a:focus { color: var(--brand-toast-secondary-link-hover, var(--brand-toast-secondary-link, currentColor)) !important; } /* ===== Navbar ===== */ .navbar-toggler-icon{ background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cpath%20stroke%3D%22%23D8E2F0%22%20stroke-linecap%3D%22round%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22%20d%3D%22M4%207h22M4%2015h22M4%2023h22%22%2F%3E%3C%2Fsvg%3E) !important; } /* når vi er i dark → bruk den lyse burgeren */ :root[data-theme="dark"] .navbar-toggler-icon{ background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cpath%20stroke%3D%22%23D7E4F5%22%20stroke-linecap%3D%22round%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22%20d%3D%22M4%207h22M4%2015h22M4%2023h22%22%2F%3E%3C%2Fsvg%3E) !important; } /* og for de som kun har OS-dark uten data-theme=light (du har allerede media-query) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .navbar-toggler-icon{ background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cpath%20stroke%3D%22%23D7E4F5%22%20stroke-linecap%3D%22round%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22%20d%3D%22M4%207h22M4%2015h22M4%2023h22%22%2F%3E%3C%2Fsvg%3E) !important; } } /* Primary */ .btn-primary, a.btn.btn-primary{ --bs-btn-color: var(--brand-on-primary); --bs-btn-bg: var(--bs-primary, #0d6efd); --bs-btn-border-color: var(--bs-primary, #0d6efd); --bs-btn-hover-color: var(--brand-on-primary); --bs-btn-hover-bg: color-mix(in oklab, var(--bs-primary, #0d6efd) 85%, #000); --bs-btn-hover-border-color: color-mix(in oklab, var(--bs-primary, #0d6efd) 80%, #000); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb, 13, 110, 253); --bs-btn-active-color: var(--brand-on-primary); --bs-btn-active-bg: var(--bs-btn-hover-bg); --bs-btn-active-border-color: var(--bs-btn-hover-border-color); --bs-btn-disabled-color: var(--brand-on-primary); --bs-btn-disabled-bg: var(--bs-primary, #0d6efd); --bs-btn-disabled-border-color: var(--bs-primary, #0d6efd); background-color: var(--bs-btn-bg) !important; border-color: var(--bs-btn-border-color) !important; color: var(--bs-btn-color) !important; } .btn-primary:hover, a.btn.btn-primary:hover { background-color: var(--bs-btn-hover-bg) !important; border-color: var(--bs-btn-hover-border-color) !important; color: var(--bs-btn-hover-color) !important; box-shadow: 0 0 0 .25rem color-mix(in oklab, var(--bs-primary, #0d6efd) 35%, transparent) !important; outline: none !important; } .btn-outline-primary:hover, a.btn.btn-outline-primary:hover { background-color: color-mix(in oklab, var(--bs-primary, #0d6efd) 85%, #000) !important; border-color: color-mix(in oklab, var(--bs-primary, #0d6efd) 80%, #000) !important; color: var(--brand-on-primary) !important; box-shadow: 0 0 0 .25rem color-mix(in oklab, var(--bs-primary, #0d6efd) 35%, transparent) !important; outline: none !important; } /* Secondary */ .btn-secondary, a.btn.btn-secondary{ background-color: var(--brand-secondary) !important; border-color: var(--brand-secondary) !important; color: var(--brand-on-secondary) !important; } .btn-outline-secondary, a.btn.btn-outline-secondary{ color: var(--brand-secondary) !important; border-color: var(--brand-secondary) !important; background: transparent !important; } .btn-outline-secondary:hover, .btn-outline-secondary:focus, a.btn.btn-outline-secondary:hover, a.btn.btn-outline-secondary:focus{ background-color: var(--brand-secondary) !important; border-color: var(--brand-secondary) !important; color: var(--brand-on-secondary) !important; } /* Accent */ .btn-accent, a.btn.btn-accent{ color: var(--brand-on-accent) !important; background-color: var(--brand-accent) !important; border-color: var(--brand-accent) !important; } .btn-outline-accent, a.btn.btn-outline-accent{ color: var(--brand-accent) !important; border-color: var(--brand-accent) !important; background: transparent !important; } .btn-outline-accent:hover, .btn-outline-accent:focus, a.btn.btn-outline-accent:hover, a.btn.btn-outline-accent:focus{ color: var(--brand-on-accent) !important; background-color: var(--brand-accent) !important; border-color: var(--brand-accent) !important; } /* Semantic buttons */ .btn-info, a.btn.btn-info{ --bs-btn-color: var(--brand-on-info); --bs-btn-bg: var(--bs-info); --bs-btn-border-color: var(--bs-info); --bs-btn-hover-color: var(--brand-on-info); --bs-btn-hover-bg: color-mix(in oklab, var(--bs-info) 85%, #000); --bs-btn-hover-border-color: color-mix(in oklab, var(--bs-info) 80%, #000); --bs-btn-active-color: var(--brand-on-info); --bs-btn-active-bg: color-mix(in oklab, var(--bs-info) 78%, #000); --bs-btn-active-border-color: color-mix(in oklab, var(--bs-info) 75%, #000); } .btn-success, a.btn.btn-success{ --bs-btn-color: var(--brand-on-success); --bs-btn-bg: var(--bs-success); --bs-btn-border-color: var(--bs-success); --bs-btn-hover-color: var(--brand-on-success); --bs-btn-hover-bg: color-mix(in oklab, var(--bs-success) 85%, #000); --bs-btn-hover-border-color: color-mix(in oklab, var(--bs-success) 80%, #000); --bs-btn-active-color: var(--brand-on-success); --bs-btn-active-bg: color-mix(in oklab, var(--bs-success) 78%, #000); --bs-btn-active-border-color: color-mix(in oklab, var(--bs-success) 75%, #000); } .btn-warning, a.btn.btn-warning{ --bs-btn-color: var(--brand-on-warning); --bs-btn-bg: var(--bs-warning); --bs-btn-border-color: var(--bs-warning); --bs-btn-hover-color: var(--brand-on-warning); --bs-btn-hover-bg: color-mix(in oklab, var(--bs-warning) 90%, #000); --bs-btn-hover-border-color: color-mix(in oklab, var(--bs-warning) 86%, #000); --bs-btn-active-color: var(--brand-on-warning); --bs-btn-active-bg: color-mix(in oklab, var(--bs-warning) 82%, #000); --bs-btn-active-border-color: color-mix(in oklab, var(--bs-warning) 80%, #000); } .btn-danger, a.btn.btn-danger{ --bs-btn-color: var(--brand-on-danger); --bs-btn-bg: var(--bs-danger); --bs-btn-border-color: var(--bs-danger); --bs-btn-hover-color: var(--brand-on-danger); --bs-btn-hover-bg: color-mix(in oklab, var(--bs-danger) 85%, #000); --bs-btn-hover-border-color: color-mix(in oklab, var(--bs-danger) 80%, #000); --bs-btn-active-color: var(--brand-on-danger); --bs-btn-active-bg: color-mix(in oklab, var(--bs-danger) 78%, #000); --bs-btn-active-border-color: color-mix(in oklab, var(--bs-danger) 75%, #000); } /* SECONDARY */ .btn-outline-secondary, a.btn.btn-outline-secondary{ --bs-btn-color: color-mix(in oklab, var(--brand-secondary) var(--brand-outline-strength), #000); --bs-btn-border-color: color-mix(in oklab, var(--brand-secondary) var(--brand-outline-strength), #000); --bs-btn-hover-color: var(--brand-on-secondary, #fff); --bs-btn-hover-bg: var(--brand-secondary); --bs-btn-hover-border-color: var(--brand-secondary); --bs-btn-active-color: var(--brand-on-secondary, #fff); --bs-btn-active-bg: color-mix(in oklab, var(--brand-secondary) 78%, #000); --bs-btn-active-border-color: color-mix(in oklab, var(--brand-secondary) 75%, #000); border-width: var(--bs-btn-border-width, 1px) !important; border-style: solid !important; border-color: var(--bs-btn-border-color) !important; } .btn-outline-secondary:hover, .btn-outline-secondary:focus, a.btn.btn-outline-secondary:hover, a.btn.btn-outline-secondary:focus{ border-color: var(--bs-btn-hover-border-color) !important; } .btn-outline-secondary:active, a.btn.btn-outline-secondary:active{ border-color: var(--bs-btn-active-border-color) !important; } /* INFO */ .btn-outline-info, a.btn.btn-outline-info{ --bs-btn-color: color-mix(in oklab, var(--bs-info) var(--brand-outline-strength), #000); --bs-btn-border-color: color-mix(in oklab, var(--bs-info) var(--brand-outline-strength), #000); --bs-btn-hover-color: var(--brand-on-info); --bs-btn-hover-bg: var(--bs-info); --bs-btn-hover-border-color: var(--bs-info); --bs-btn-active-color: var(--brand-on-info); --bs-btn-active-bg: color-mix(in oklab, var(--bs-info) 78%, #000); --bs-btn-active-border-color: color-mix(in oklab, var(--bs-info) 75%, #000); border-width: var(--bs-btn-border-width, 1px) !important; border-style: solid !important; border-color: var(--bs-btn-border-color) !important; } .btn-outline-info:hover, .btn-outline-info:focus, a.btn.btn-outline-info:hover, a.btn.btn-outline-info:focus{ border-color: var(--bs-btn-hover-border-color) !important; } .btn-outline-info:active, a.btn.btn-outline-info:active{ border-color: var(--bs-btn-active-border-color) !important; } /* SUCCESS */ .btn-outline-success, a.btn.btn-outline-success{ --bs-btn-color: color-mix(in oklab, var(--bs-success) var(--brand-outline-strength), #000); --bs-btn-border-color: color-mix(in oklab, var(--bs-success) var(--brand-outline-strength), #000); --bs-btn-hover-color: var(--brand-on-success); --bs-btn-hover-bg: var(--bs-success); --bs-btn-hover-border-color: var(--bs-success); --bs-btn-active-color: var(--brand-on-success); --bs-btn-active-bg: color-mix(in oklab, var(--bs-success) 78%, #000); --bs-btn-active-border-color: color-mix(in oklab, var(--bs-success) 75%, #000); border-width: var(--bs-btn-border-width, 1px) !important; border-style: solid !important; border-color: var(--bs-btn-border-color) !important; } .btn-outline-success:hover, .btn-outline-success:focus, a.btn.btn-outline-success:hover, a.btn.btn-outline-success:focus{ border-color: var(--bs-btn-hover-border-color) !important; } .btn-outline-success:active, a.btn.btn-outline-success:active{ border-color: var(--bs-btn-active-border-color) !important; } /* WARNING */ .btn-outline-warning, a.btn.btn-outline-warning{ --bs-btn-color: color-mix(in oklab, var(--bs-warning) var(--brand-outline-strength), #000); --bs-btn-border-color: color-mix(in oklab, var(--bs-warning) var(--brand-outline-strength), #000); --bs-btn-hover-color: var(--brand-on-warning); --bs-btn-hover-bg: var(--bs-warning); --bs-btn-hover-border-color: var(--bs-warning); --bs-btn-active-color: var(--brand-on-warning); --bs-btn-active-bg: color-mix(in oklab, var(--bs-warning) 82%, #000); --bs-btn-active-border-color: color-mix(in oklab, var(--bs-warning) 80%, #000); border-width: var(--bs-btn-border-width, 1px) !important; border-style: solid !important; border-color: var(--bs-btn-border-color) !important; } .btn-outline-warning:hover, .btn-outline-warning:focus, a.btn.btn-outline-warning:hover, a.btn.btn-outline-warning:focus{ border-color: var(--bs-btn-hover-border-color) !important; } .btn-outline-warning:active, a.btn.btn-outline-warning:active{ border-color: var(--bs-btn-active-border-color) !important; } /* DANGER */ .btn-outline-danger, a.btn.btn-outline-danger{ --bs-btn-color: color-mix(in oklab, var(--bs-danger) var(--brand-outline-strength), #000); --bs-btn-border-color: color-mix(in oklab, var(--bs-danger) var(--brand-outline-strength), #000); --bs-btn-hover-color: var(--brand-on-danger); --bs-btn-hover-bg: var(--bs-danger); --bs-btn-hover-border-color: var(--bs-danger); --bs-btn-active-color: var(--brand-on-danger); --bs-btn-active-bg: color-mix(in oklab, var(--bs-danger) 78%, #000); --bs-btn-active-border-color: color-mix(in oklab, var(--bs-danger) 75%, #000); border-width: var(--bs-btn-border-width, 1px) !important; border-style: solid !important; border-color: var(--bs-btn-border-color) !important; } .btn-outline-danger:hover, .btn-outline-danger:focus, a.btn.btn-outline-danger:hover, a.btn.btn-outline-danger:focus{ border-color: var(--bs-btn-hover-border-color) !important; } .btn-outline-danger:active, a.btn.btn-outline-danger:active{ border-color: var(--bs-btn-active-border-color) !important; } /* ACCENT (dersom dere bruker egen accent-variant) */ .btn-outline-accent, a.btn.btn-outline-accent{ --bs-btn-color: color-mix(in oklab, var(--brand-accent) var(--brand-outline-strength), #000); --bs-btn-border-color: color-mix(in oklab, var(--brand-accent) var(--brand-outline-strength), #000); --bs-btn-hover-color: var(--brand-on-accent, #fff); --bs-btn-hover-bg: var(--brand-accent); --bs-btn-hover-border-color: var(--brand-accent); --bs-btn-active-color: var(--brand-on-accent, #fff); --bs-btn-active-bg: color-mix(in oklab, var(--brand-accent) 78%, #000); --bs-btn-active-border-color: color-mix(in oklab, var(--brand-accent) 75%, #000); border-width: var(--bs-btn-border-width, 1px) !important; border-style: solid !important; border-color: var(--bs-btn-border-color) !important; } .btn-outline-accent:hover, .btn-outline-accent:focus, a.btn.btn-outline-accent:hover, a.btn.btn-outline-accent:focus{ border-color: var(--bs-btn-hover-border-color) !important; } .btn-outline-accent:active, a.btn.btn-outline-accent:active{ border-color: var(--bs-btn-active-border-color) !important; } /* Alerts */ .alert-primary{ --bs-alert-color: var(--bs-primary-text-emphasis, color-mix(in oklab, var(--bs-primary, #0d6efd) 80%, #000)); --bs-alert-bg: var(--bs-primary-bg-subtle, color-mix(in oklab, var(--bs-primary, #0d6efd) 30%, #fff)); --bs-alert-border-color: var(--bs-primary-border-subtle, color-mix(in oklab, var(--bs-primary, #0d6efd) 52%, #fff)); } .alert-secondary{ --bs-alert-color: var(--bs-secondary-text-emphasis, color-mix(in oklab, var(--bs-secondary, #6c757d) 80%, #000)); --bs-alert-bg: var(--bs-secondary-bg-subtle, color-mix(in oklab, var(--bs-secondary, #6c757d) 24%, #fff)); --bs-alert-border-color: var(--bs-secondary-border-subtle, color-mix(in oklab, var(--bs-secondary, #6c757d) 40%, #fff)); } .alert-info{ --bs-alert-color: var(--bs-info-text-emphasis); --bs-alert-bg: var(--bs-info-bg-subtle); --bs-alert-border-color: color-mix(in oklab, var(--bs-info) 30%, #fff); } .alert-success{ --bs-alert-color: var(--bs-success-text-emphasis); --bs-alert-bg: var(--bs-success-bg-subtle); --bs-alert-border-color: color-mix(in oklab, var(--bs-success) 30%, #fff); } .alert-warning{ --bs-alert-color: var(--bs-warning-text-emphasis); --bs-alert-bg: var(--bs-warning-bg-subtle); --bs-alert-border-color: color-mix(in oklab, var(--bs-warning) 35%, #fff); } .alert-danger{ --bs-alert-color: var(--bs-danger-text-emphasis); --bs-alert-bg: var(--bs-danger-bg-subtle); --bs-alert-border-color: color-mix(in oklab, var(--bs-danger) 30%, #fff); } /* Badges & progress */ .badge.bg-primary, .text-bg-primary{ background-color: var(--bs-primary) !important; color: var(--brand-badge-primary-text) !important; } .badge.bg-secondary, .text-bg-secondary{ background-color: var(--brand-secondary, var(--bs-secondary)) !important; color: var(--brand-badge-secondary-text) !important; } .badge.bg-info, .text-bg-info{ background-color: var(--bs-info) !important; color: var(--brand-badge-info-text) !important; } .badge.bg-success, .text-bg-success{ background-color: var(--bs-success) !important; color: var(--brand-badge-success-text) !important; } .badge.bg-warning, .text-bg-warning{ background-color: var(--bs-warning) !important; color: var(--brand-badge-warning-text) !important; } .badge.bg-danger, .text-bg-danger{ background-color: var(--bs-danger) !important; color: var(--brand-badge-danger-text) !important; } .badge i, .badge svg, .badge .fa{ color: currentColor; fill: currentColor; stroke: currentColor; } .progress-bar{ background-color: var(--bs-primary) !important; } .form-check-input:checked{ background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; } /* Navs */ .nav-pills .nav-link.active, .nav-pills .show > .nav-link{ background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; color: var(--brand-on-primary) !important; } .nav-tabs .nav-link.active{ color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; } /* Pagination */ .pagination .page-item.active .page-link{ background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; color: var(--brand-on-primary) !important; } /* === DARK COMPONENT FIXES ======================================= */ /* 1) Sørg for at body ALLTID følger variabelen vi setter i :root */ body { background: var(--brand-body-bg, var(--bs-body-bg, #ffffff)) !important; color: var(--brand-body-color, var(--bs-body-color, #000000)) !important; } /* 3) Labels og vanlige