/* * yrken-felles.css * * Felles CSS-tokens (designvariablar) + globalt skall + felles komponent-klassar. * Endringar her påverkar alle sider som lenkjer til denne fila. * * DEA-66 (visuell redesign, token-først): * - Token-laget støttar mørkt og lyst tema. Tokennamna (--farge-*) er * uendra frå før, så sider som alt brukar dei flippar automatisk. * - Tema styrast av attributtet data-tema på ("mork" | "lys"), * sett av window.YRKEN.tema i yrken-felles.js (Mørk / Lys / System). * - STANDARD er MØRKT (:root), lyst i [data-tema="lys"]. Flippa frå lyst * til mørkt då alle 13 sider var token-migrerte (DEA-66 fullført). * For å byte standard att: :root-verdiane her + STANDARD i yrken-felles.js. * - Inspirert av Intility/Bifrost: token-basert, ekte fargeflipp, * mykje luft, dempa skuggar, reine tabellar. Eigne hex (ikkje kopi). */ /* ============================================================ TOKENS – lyst (standard under migrering) ============================================================ */ :root { /* STANDARD er MØRKT (DEA-66 fullført). Lyst ligg i [data-tema="lys"]. Desse verdiane speglar [data-tema="mork"] og styrer pre-JS-paint + sider utan tema-attributt. */ color-scheme: dark; /* Aksent (teal) */ --farge-primaer: #2dd4bf; /* lenkjer, knappar, aktiv meny */ --farge-primaer-mork: #5fe0d1; /* hover/trykk */ --farge-primaer-paa: #07211d; /* tekst på primaer-flate */ /* Status */ --farge-feil: #ff8079; --farge-suksess: #4ac26b; --farge-aatvaring: #e3a008; --farge-info: #74b6ff; /* "chill"/nøytral utheving */ /* Flater */ --farge-bakgrunn: #15181d; /* side */ --farge-bakgrunn-2: #1b1f26; /* topbar, sidemeny */ --farge-kort: #222831; /* kort, panel, modal */ --farge-kort-hover: #2a313b; /* hover på rad/lenke */ /* Tekst og linjer */ --farge-tekst: #e9edf3; --farge-tekst-dempet: #afb8c5; --farge-kantlinje: #353d49; --farge-tabellrad-alt: #1e242c; /* Form */ --radius: 10px; --radius-sm: 6px; --radius-lg: 14px; --skugge: 0 0 8px rgba(0,0,0,0.45); /* Typografi */ --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif; --fs-700: 1.75rem; --fs-600: 1.375rem; --fs-500: 1.0625rem; --fs-400: 0.9375rem; --fs-300: 0.8125rem; /* Rom (4px-grid) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; /* Skall */ --topbar-hoegd: 56px; --sidemeny-bredde: 240px; } /* Eksplisitt lyst (når data-tema="lys" er sett etter at mørkt har vore på). Same verdiar som :root – held standarden flippbar ved produksjonssetjing. */ [data-tema="lys"] { color-scheme: light; --farge-primaer: #0b6258; --farge-primaer-mork: #084a43; --farge-primaer-paa: #ffffff; --farge-feil: #b42318; --farge-suksess: #15702f; --farge-aatvaring: #7a6000; --farge-info: #0a5cb8; --farge-bakgrunn: #f3f5f8; --farge-bakgrunn-2: #ffffff; --farge-kort: #ffffff; --farge-kort-hover: #eef1f5; --farge-tekst: #1b2129; --farge-tekst-dempet: #424c59; --farge-kantlinje: #d7dde5; --farge-tabellrad-alt: #f7f9fb; --skugge: 0 1px 3px rgba(15,23,42,0.10), 0 0 8px rgba(15,23,42,0.04); } /* ============================================================ TOKENS – mørkt ============================================================ */ [data-tema="mork"] { color-scheme: dark; --farge-primaer: #2dd4bf; --farge-primaer-mork: #5fe0d1; --farge-primaer-paa: #07211d; --farge-feil: #ff8079; --farge-suksess: #4ac26b; --farge-aatvaring: #e3a008; --farge-info: #74b6ff; --farge-bakgrunn: #15181d; --farge-bakgrunn-2: #1b1f26; --farge-kort: #222831; --farge-kort-hover: #2a313b; --farge-tekst: #e9edf3; --farge-tekst-dempet: #afb8c5; --farge-kantlinje: #353d49; --farge-tabellrad-alt: #1e242c; --skugge: 0 0 8px rgba(0,0,0,0.45); } /* ============================================================ Grunnstil ============================================================ */ body { background: var(--farge-bakgrunn); color: var(--farge-tekst); font-family: var(--font-stack); } /* ============================================================ Globalt skall: topbar + sidemeny (DEA-26 / DEA-39 / DEA-66) Bygd og injisert av window.YRKEN.byggSkall() i yrken-felles.js. Reglane er inerte utan skall-markup (QR/login er upåverka). ============================================================ */ .gøymd { display: none; } body.yrken-har-skall { padding-top: var(--topbar-hoegd); } /* Hopp-til-innhald (WCAG 2.4.1) */ .yrken-hopp { position: fixed; left: -9999px; top: 0; z-index: 1200; background: var(--farge-primaer); color: var(--farge-primaer-paa); padding: 0.6rem 1rem; border-radius: 0 0 var(--radius) 0; font-weight: 700; text-decoration: none; } .yrken-hopp:focus { left: 0; outline: 3px solid var(--farge-primaer); outline-offset: 2px; } .yrken-topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-hoegd); background: var(--farge-bakgrunn-2); color: var(--farge-tekst); display: flex; align-items: center; gap: 0.75rem; padding: 0 0.75rem; z-index: 1000; border-bottom: 1px solid var(--farge-kantlinje); } .yrken-hamburger { background: transparent; color: var(--farge-tekst); border: 1px solid var(--farge-kantlinje); font-size: 1.4rem; line-height: 1; width: 44px; height: 44px; border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .yrken-hamburger:hover { background: var(--farge-kort-hover); } .yrken-hamburger:focus-visible { outline: 3px solid var(--farge-primaer); outline-offset: 2px; } a.yrken-brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.05rem; white-space: nowrap; color: var(--farge-tekst); text-decoration: none; } a.yrken-brand:hover { color: var(--farge-primaer); } a.yrken-brand:focus-visible { outline: 3px solid var(--farge-primaer); outline-offset: 2px; border-radius: 4px; } /* Logo: heile Klar bakke-namnetrekket med tagline (DEA-84). Tema-styrt via CSS-variablar i inline-SVG. */ .yrken-logo { height: 46px; width: auto; flex: 0 0 auto; display: block; } @media (max-width: 480px) { .yrken-logo { height: 40px; } } .yrken-sidetittel { margin: 0; font-weight: 600; font-size: 0.95rem; color: var(--farge-tekst-dempet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Tema-veljar (segmentert kontroll) */ .yrken-tema { margin-left: auto; display: inline-flex; background: var(--farge-bakgrunn); border: 1px solid var(--farge-kantlinje); border-radius: var(--radius-sm); padding: 2px; } .yrken-tema button { border: none; background: none; color: var(--farge-tekst-dempet); font: inherit; font-size: var(--fs-300); padding: 6px 10px; min-height: 32px; border-radius: 5px; cursor: pointer; } .yrken-tema button:hover { color: var(--farge-tekst); } .yrken-tema button[aria-pressed="true"] { background: var(--farge-kort); color: var(--farge-tekst); box-shadow: var(--skugge); } .yrken-tema button:focus-visible { outline: 3px solid var(--farge-primaer); outline-offset: 1px; } .yrken-brukar { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; } .yrken-brukar .namn { font-weight: 600; } .yrken-brukar .rolle { background: color-mix(in srgb, var(--farge-primaer) 16%, transparent); color: var(--farge-primaer); padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } .yrken-logg-ut { background: transparent; color: var(--farge-tekst); border: 1px solid var(--farge-kantlinje); padding: 0.35rem 0.8rem; min-height: 40px; font-weight: 600; font-size: 0.9rem; border-radius: var(--radius-sm); cursor: pointer; } .yrken-logg-ut:hover { background: var(--farge-kort-hover); } .yrken-logg-ut:focus-visible { outline: 3px solid var(--farge-primaer); outline-offset: 2px; } .yrken-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1050; border: 0; padding: 0; cursor: pointer; } .yrken-backdrop[hidden] { display: none; } .yrken-sidemeny { position: fixed; top: var(--topbar-hoegd); bottom: 0; left: 0; width: var(--sidemeny-bredde); background: var(--farge-bakgrunn-2); border-right: 1px solid var(--farge-kantlinje); overflow-y: auto; z-index: 1060; padding: 0.5rem 0; transform: translateX(-100%); transition: transform 0.2s ease; } .yrken-sidemeny.open { transform: translateX(0); } .yrken-sidemeny ul { list-style: none; margin: 0; padding: 0; } .yrken-gruppe-tittel { padding: 0.9rem 1.1rem 0.3rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--farge-tekst-dempet); } .yrken-sidemeny a { display: block; padding: 0.7rem 1.1rem; color: var(--farge-tekst-dempet); text-decoration: none; font-size: 0.95rem; border-left: 4px solid transparent; } .yrken-sidemeny a:hover { background: var(--farge-kort-hover); color: var(--farge-tekst); } .yrken-sidemeny a:focus-visible { outline: 3px solid var(--farge-primaer); outline-offset: -3px; } .yrken-sidemeny a[aria-current="page"] { background: color-mix(in srgb, var(--farge-primaer) 14%, transparent); color: var(--farge-tekst); font-weight: 700; border-left-color: var(--farge-primaer); } /* Menypunkt for sider som ikkje er laga enno */ .yrken-meny-kjem { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.7rem 1.1rem; color: var(--farge-tekst-dempet); font-size: 0.95rem; border-left: 4px solid transparent; cursor: not-allowed; } .yrken-kjem-merke { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: var(--farge-kantlinje); color: var(--farge-tekst-dempet); padding: 0.1rem 0.45rem; border-radius: 999px; white-space: nowrap; } @media (min-width: 1024px) { .yrken-hamburger { display: none; } .yrken-sidemeny { transform: translateX(0); } .yrken-backdrop { display: none !important; } body.yrken-har-skall { padding-left: var(--sidemeny-bredde); } } @media (max-width: 560px) { .yrken-sidetittel { display: none; } .yrken-brukar .namn { display: none; } .yrken-tema button { padding: 6px 8px; } } /* ============================================================ Felles komponent-klassar (DEA-66) – additive, brukast ved per-side-migrering. Endrar ikkje sider som ikkje brukar dei. ============================================================ */ .y-kort { background: var(--farge-kort); border: 1px solid var(--farge-kantlinje); border-radius: var(--radius); box-shadow: var(--skugge); padding: var(--sp-5); } .y-kort > h2, .y-kort > h3 { margin-top: 0; } .y-knapp { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 600; min-height: 44px; padding: 0 var(--sp-4); border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; } .y-knapp.primaer { background: var(--farge-primaer); color: var(--farge-primaer-paa); } .y-knapp.primaer:hover { background: var(--farge-primaer-mork); } .y-knapp.sekundaer { background: transparent; color: var(--farge-tekst); border-color: var(--farge-kantlinje); } .y-knapp.sekundaer:hover { background: var(--farge-kort-hover); } .y-knapp.fare { background: transparent; color: var(--farge-feil); border-color: color-mix(in srgb, var(--farge-feil) 50%, var(--farge-kantlinje)); } .y-knapp.fare:hover { background: color-mix(in srgb, var(--farge-feil) 12%, transparent); } .y-knapp.liten { min-height: 34px; padding: 0 var(--sp-3); font-size: var(--fs-300); } .y-knapp:focus-visible { outline: 3px solid var(--farge-primaer); outline-offset: 2px; } .y-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-300); font-weight: 600; padding: 3px 9px; border-radius: 999px; } .y-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .y-badge.suksess { color: var(--farge-suksess); background: color-mix(in srgb, var(--farge-suksess) 14%, transparent); } .y-badge.aatvaring { color: var(--farge-aatvaring); background: color-mix(in srgb, var(--farge-aatvaring) 16%, transparent); } .y-badge.feil { color: var(--farge-feil); background: color-mix(in srgb, var(--farge-feil) 15%, transparent); } .y-badge.info { color: var(--farge-info); background: color-mix(in srgb, var(--farge-info) 15%, transparent); } .y-badge.noytral { color: var(--farge-tekst-dempet); background: color-mix(in srgb, var(--farge-tekst-dempet) 14%, transparent); } .y-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; } .y-status::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent); } .y-status.gron { color: var(--farge-suksess); } .y-status.gul { color: var(--farge-aatvaring); } .y-status.raud { color: var(--farge-feil); } .y-melding { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); border-left: 4px solid; background: var(--farge-kort); margin-bottom: var(--sp-4); } .y-melding.info { border-color: var(--farge-info); background: color-mix(in srgb, var(--farge-info) 9%, var(--farge-kort)); } .y-melding.aatvaring { border-color: var(--farge-aatvaring); background: color-mix(in srgb, var(--farge-aatvaring) 9%, var(--farge-kort)); } .y-melding.suksess { border-color: var(--farge-suksess); background: color-mix(in srgb, var(--farge-suksess) 9%, var(--farge-kort)); } .y-melding.feil { border-color: var(--farge-feil); background: color-mix(in srgb, var(--farge-feil) 9%, var(--farge-kort)); } .y-tabell { width: 100%; border-collapse: collapse; font-size: var(--fs-400); } .y-tabell th { text-align: left; font-size: var(--fs-300); text-transform: uppercase; letter-spacing: 0.04em; color: var(--farge-tekst-dempet); font-weight: 600; padding: var(--sp-3); border-bottom: 1px solid var(--farge-kantlinje); } .y-tabell td { padding: var(--sp-3); border-bottom: 1px solid var(--farge-kantlinje); } .y-tabell tbody tr:hover { background: var(--farge-kort-hover); } .y-felt { display: flex; flex-direction: column; gap: 6px; } .y-felt label { font-size: var(--fs-300); color: var(--farge-tekst-dempet); font-weight: 600; } .y-felt input, .y-felt select, .y-felt textarea { font: inherit; color: var(--farge-tekst); background: var(--farge-bakgrunn); border: 1px solid var(--farge-kantlinje); border-radius: var(--radius-sm); padding: 10px 12px; min-height: 44px; } .y-felt textarea { min-height: 90px; resize: vertical; } .y-felt input:focus, .y-felt select:focus, .y-felt textarea:focus { outline: 3px solid var(--farge-primaer); outline-offset: 1px; border-color: var(--farge-primaer); } .y-felt.feil input, .y-felt.feil textarea, .y-felt.feil select { border-color: var(--farge-feil); } .y-felt .feiltekst { color: var(--farge-feil); font-size: var(--fs-300); } .y-felt .hjelp { color: var(--farge-tekst-dempet); font-size: var(--fs-300); } .y-paakravd { color: var(--farge-feil); } .y-grid { display: grid; gap: var(--sp-5); } .y-grid.kpi { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .y-grid.to { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } /* ============================================================ Felles footer (DEA-75) + tilbakemelding-modal (DEA-74) Injisert av window.YRKEN.byggFooter(). Tema-styrt; verkar både med og utan skall (QR/login/personvern). ============================================================ */ .yrken-footer { margin-top: var(--sp-7); border-top: 1px solid var(--farge-kantlinje); background: var(--farge-bakgrunn-2); color: var(--farge-tekst-dempet); } .yrken-footer-inner { max-width: 1100px; margin: 0 auto; padding: var(--sp-5) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); align-items: center; text-align: center; } .yrken-footer-lenkjer { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; justify-content: center; } .yrken-footer-lenkjer a { color: var(--farge-primaer); text-decoration: none; font-size: var(--fs-400); font-weight: 600; } .yrken-footer-lenkjer a:hover { text-decoration: underline; } .yrken-footer-lenkjer a:focus-visible, .yrken-footer-knapp:focus-visible { outline: 3px solid var(--farge-primaer); outline-offset: 2px; border-radius: 4px; } .yrken-footer-knapp { background: none; border: none; padding: 0; cursor: pointer; color: var(--farge-primaer); font: inherit; font-size: var(--fs-400); font-weight: 600; text-decoration: none; } .yrken-footer-knapp:hover { text-decoration: underline; } .yrken-footer-meta { margin: 0; font-size: var(--fs-300); color: var(--farge-tekst-dempet); } /* Modal-overlay (tilbakemelding) */ .yrken-modal-overlay { position: fixed; inset: 0; z-index: 1300; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; padding: var(--sp-4); } .yrken-modal-overlay[hidden] { display: none; } .yrken-modal { background: var(--farge-kort); color: var(--farge-tekst); border: 1px solid var(--farge-kantlinje); border-radius: var(--radius-lg); box-shadow: 0 8px 40px rgba(0,0,0,0.45); width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; padding: var(--sp-5); } .yrken-modal h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-600); color: var(--farge-primaer); } .yrken-tm-hjelp { margin: 0 0 var(--sp-4); color: var(--farge-tekst-dempet); font-size: var(--fs-400); } .yrken-modal .y-felt { margin-bottom: var(--sp-4); } .yrken-modal-knappar { display: flex; gap: var(--sp-3); justify-content: flex-end; margin-top: var(--sp-5); } .yrken-tm-status { border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-400); margin-bottom: var(--sp-3); } .yrken-tm-status.info { color: var(--farge-info); background: color-mix(in srgb, var(--farge-info) 12%, var(--farge-kort)); } .yrken-tm-status.suksess { color: var(--farge-suksess); background: color-mix(in srgb, var(--farge-suksess) 12%, var(--farge-kort)); } .yrken-tm-status.feil { color: var(--farge-feil); background: color-mix(in srgb, var(--farge-feil) 12%, var(--farge-kort)); } /* DEA-72: tema-styrt objekt-veljar (erstattar native datalist) */ .y-objektvel-wrap { position: relative; } .y-objektvel-popup { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 50; max-height: 240px; overflow-y: auto; margin-top: 2px; background: var(--farge-kort); color: var(--farge-tekst); border: 1px solid var(--farge-kantlinje); border-radius: var(--radius-sm); box-shadow: var(--skugge); } .y-objektvel-popup.open { display: block; } .y-objektvel-rad { padding: 0.5rem 0.7rem; cursor: pointer; font-size: var(--fs-400); } .y-objektvel-rad:hover, .y-objektvel-rad.aktiv { background: color-mix(in srgb, var(--farge-primaer) 16%, var(--farge-kort)); } .y-objektvel-namn { color: var(--farge-tekst-dempet); }