/* ══════════════════════════════════════════════════════════════════════════ VærgeGuiden — brand-overrides Kun aktiv når (sat af brand_detect.js). Tokens kommer fra vg_tokens.css (skal også indlæses). Filen indeholder: 1. Globale overrides (typografi, farve-variabler hvis siden bruger --gold/--ink fra NordBon-paletten) 2. Login-side specifikke overrides (panel-left, panel-right, knap, mm.) Værgemål-skærmenes overrides kommer i en senere fase (Fase 5). ══════════════════════════════════════════════════════════════════════════ */ /* ── Google Fonts: Lora + Inter (kun for VG-brand) ─────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Lora:ital,wght@0,400;0,600;0,700;1,400&display=swap'); /* ────────────────────────────────────────────────────────────────────────── 1. Globale overrides — gælder ALLE sider når brand=vg ────────────────────────────────────────────────────────────────────────── */ html[data-brand="vaergeguiden"], body[data-brand="vaergeguiden"] { /* Override NordBons farve-variabler (login.html bruger --ink, --gold osv.) så eksisterende selectors automatisk får skovgrøn-paletten. */ --ink: #1F3A2E; /* skovgrøn — autoritet */ --ink-light: #6B6258; /* varm grå metadata */ --paper: #FAF8F5; /* varm offwhite */ --paper-dark: #EFE9DC; /* blød beige */ --gold: #B8593A; /* brændt terracotta — CTAs */ --gold-light: #C97554; /* hover */ --red: #B53A2C; --white: #FFFFFF; --border: #D9D2C0; /* Skygger lidt varmere */ --shadow-sm: 0 1px 2px rgba(45, 42, 38, 0.06); --shadow-md: 0 4px 12px rgba(45, 42, 38, 0.08); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--vg-color-bg, #FAF8F5); color: var(--vg-color-text, #2D2A26); } /* Større brødtekst (målgruppen er ofte ældre, jf. design-system) */ body[data-brand="vaergeguiden"] { font-size: 1.0625rem; /* 17px — lidt over default 16 */ } /* ────────────────────────────────────────────────────────────────────────── 2. Værgemål-modul shell-overrides (shell.css variabler) shell.css definerer disse på :root — vi overskriver dem KUN når brand=vg. Hele værgemåls-modulet (8 sider) farves om automatisk. ────────────────────────────────────────────────────────────────────────── */ html[data-brand="vaergeguiden"], body[data-brand="vaergeguiden"] { /* Tokens shell.css forventer */ --ink: #1F3A2E; /* skovgrøn primary */ --ink-light: #6B6258; /* varm grå metadata */ --paper: #FAF8F5; /* varm offwhite baggrund */ --white: #FFFFFF; --gold: #B8593A; /* terracotta CTA */ --gold-light: #C97554; --gold-pale: rgba(184, 89, 58, 0.10); --border: #D9D2C0; --border-dark: #B8AE94; --green: #3D6650; /* dæmpet skovgrøn (fra vg-color-primary-soft) */ --green-pale: #DDE7DE; --red: #B53A2C; --red-pale: #FBEDE7; --amber: #B87333; /* mere terracotta-toned amber */ --amber-pale: #FBEFE3; /* Fonte — Lora (serif) til overskrifter, Inter (sans) til UI */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-serif: 'Lora', Georgia, 'Times New Roman', serif; } /* Hardcoded hex i shell.css som ikke bruger variabler — override per selector */ body[data-brand="vaergeguiden"] .vm-btn-primary:hover { background: #2A4D3E; /* mørkere skovgrøn */ } body[data-brand="vaergeguiden"] .vm-btn-gold:hover { background: #9E4830; /* mørkere terracotta */ } body[data-brand="vaergeguiden"] .vm-badge-grey { background: #EFE9DC; /* blød beige (samme som --paper-dark) */ } /* Sidebar-mørke-tilstand: shell.css bruger #cfcfe0 til disabled tekst. På VG er sidebar lys, så vi behøver ikke override — disabled fortsætter med den lysere variant via opacity i shell.css's egne regler. */ /* Lidt mere luft i overskrifter når serif er Lora (Lora er bredere end Libre Bask.) */ body[data-brand="vaergeguiden"] h1, body[data-brand="vaergeguiden"] h2, body[data-brand="vaergeguiden"] h3 { letter-spacing: -0.2px; } /* Topbar — tilfør lidt blødhed med varm border-toning */ body[data-brand="vaergeguiden"] .vm-topbar { border-bottom-color: #D9D2C0; } /* Sidebar (desktop) — lys salviegrøn baggrund med skovgrøn tekst. shell.css bygger sidebaren til en MØRK baggrund (hardcoded lyse tekst- farver), så vi skal override hele tekst-paletten her. */ body[data-brand="vaergeguiden"] .vm-sidebar { background: #DDE7DE; /* --green-pale */ border-right: 1px solid #C4D2C5; color: #1F3A2E; /* skovgrøn fallback */ } /* Brand-titel og undertekst */ body[data-brand="vaergeguiden"] .vm-sidebar-brand { color: #1F3A2E; border-bottom: 1px solid rgba(31, 58, 46, 0.15); } body[data-brand="vaergeguiden"] .vm-sidebar-brand small { color: #3D6650; /* dæmpet skovgrøn */ } /* Nav-links — skovgrøn tekst, terracotta-tinge på hover/aktiv */ body[data-brand="vaergeguiden"] .vm-sidebar-nav a { color: #1F3A2E; font-weight: 500; } body[data-brand="vaergeguiden"] .vm-sidebar-nav a:hover { background: rgba(31, 58, 46, 0.06); } body[data-brand="vaergeguiden"] .vm-sidebar-nav a.active { background: rgba(184, 89, 58, 0.10); color: #1F3A2E; border-left-color: #B8593A; /* terracotta accent-streg */ } /* År-vælger nederst */ body[data-brand="vaergeguiden"] .vm-sidebar-aar { border-top: 1px solid rgba(31, 58, 46, 0.15); } body[data-brand="vaergeguiden"] .vm-sidebar-aar-label { color: #3D6650; } body[data-brand="vaergeguiden"] .vm-sidebar-aar-select { background: #FFFFFF; border: 1px solid #C4D2C5; color: #1F3A2E; } /* Bundmenu (mobil) — samme varme tone */ body[data-brand="vaergeguiden"] .vm-bottommenu { background: #FFFFFF; border-top-color: #D9D2C0; } /* Aktivt menupunkt — terracotta accent-streg */ body[data-brand="vaergeguiden"] .vm-nav-item.aktiv { background: rgba(184, 89, 58, 0.08); color: #1F3A2E; } body[data-brand="vaergeguiden"] .vm-nav-item.aktiv svg { stroke: #B8593A; } /* Toast (notifikationer) holder skovgrøn ramme */ body[data-brand="vaergeguiden"] .vm-toast { border-left: 4px solid #1F3A2E; } body[data-brand="vaergeguiden"] .vm-toast.fejl { border-left-color: #B53A2C; } /* PWA scan-knap (scan.html) — terracotta baggrund, hvid font + ikon for bedre kontrast end skovgrøn. Sekundær-knap ("Upload fra galleri") rører vi ikke — den har hvid baggrund og skal beholde skovgrøn tekst. */ body[data-brand="vaergeguiden"] .pwa-scan-btn:not(.secondary) { color: #FFFFFF; box-shadow: 0 2px 6px rgba(184, 89, 58, 0.30); } /* Konto-type-badges (konti.html) — bruger varm paletten i stedet for de stærke materialdesign-farver så de matcher resten af brandet */ body[data-brand="vaergeguiden"] .konto-type-badge.indtaegtskonto { background: #DDE7DE; /* lys salviegrøn */ color: #1F3A2E; } body[data-brand="vaergeguiden"] .konto-type-badge.formuekonto { background: #FBEFE3; /* varm sand */ color: #B87333; } body[data-brand="vaergeguiden"] .konto-type-badge.forvaltningsdepot { background: #FBEDE7; /* lys terracotta */ color: #9E4830; } /* ────────────────────────────────────────────────────────────────────────── 3. Login-side specifikke overrides ────────────────────────────────────────────────────────────────────────── */ /* Venstre panel — skovgrøn med terracotta accent-cirkler */ body[data-brand="vaergeguiden"] .panel-left { background: #1F3A2E; } body[data-brand="vaergeguiden"] .panel-left::before { background: radial-gradient(circle, rgba(184, 89, 58, 0.18) 0%, transparent 70%); } body[data-brand="vaergeguiden"] .panel-left::after { background: radial-gradient(circle, rgba(221, 231, 222, 0.10) 0%, transparent 70%); } /* Brand-logo (Lora, varm offwhite) */ body[data-brand="vaergeguiden"] .brand-logo { font-family: 'Lora', Georgia, serif; color: #F5F1E8; letter-spacing: -0.5px; } body[data-brand="vaergeguiden"] .brand-logo span { color: #B8593A; /* terracotta accent på 'Guiden' */ font-style: italic; } body[data-brand="vaergeguiden"] .brand-tagline { color: rgba(245, 241, 232, 0.55); } /* Hero-tekst (Lora, terracotta accent på em) */ body[data-brand="vaergeguiden"] .hero-text h1 { font-family: 'Lora', Georgia, serif; color: #F5F1E8; font-weight: 400; } body[data-brand="vaergeguiden"] .hero-text h1 em { color: #C97554; /* lysere terracotta */ font-style: italic; } body[data-brand="vaergeguiden"] .hero-text p { color: rgba(245, 241, 232, 0.65); font-family: 'Inter', sans-serif; } /* Feature-prikker — terracotta */ body[data-brand="vaergeguiden"] .feature-dot { background: #B8593A; } body[data-brand="vaergeguiden"] .feature-item { color: rgba(245, 241, 232, 0.70); } body[data-brand="vaergeguiden"] .panel-left footer { color: rgba(245, 241, 232, 0.30); } /* Højre panel — varm offwhite */ body[data-brand="vaergeguiden"] .panel-right { background: #FAF8F5; border-left: 1px solid #D9D2C0; } body[data-brand="vaergeguiden"] .login-header h2 { font-family: 'Lora', Georgia, serif; color: #1F3A2E; font-weight: 600; } body[data-brand="vaergeguiden"] .login-header p { color: #6B6258; } /* Labels og inputs */ body[data-brand="vaergeguiden"] label { color: #6B6258; } body[data-brand="vaergeguiden"] input[type="email"], body[data-brand="vaergeguiden"] input[type="password"] { background: #FFFFFF; border: 1.5px solid #D9D2C0; color: #2D2A26; font-family: 'Inter', sans-serif; } body[data-brand="vaergeguiden"] input[type="email"]:focus, body[data-brand="vaergeguiden"] input[type="password"]:focus { border-color: #B8593A; box-shadow: 0 0 0 3px rgba(184, 89, 58, 0.15); background: #FFFFFF; } body[data-brand="vaergeguiden"] .password-toggle { color: #6B6258; } body[data-brand="vaergeguiden"] .password-toggle:hover { color: #1F3A2E; } body[data-brand="vaergeguiden"] .forgot-link { color: #6B6258; } body[data-brand="vaergeguiden"] .forgot-link:hover { color: #B8593A; } /* Login-knap — skovgrøn med varm offwhite tekst */ body[data-brand="vaergeguiden"] .btn-login { background: #1F3A2E; color: #F5F1E8; font-family: 'Inter', sans-serif; font-weight: 500; } body[data-brand="vaergeguiden"] .btn-login:hover { background: #2A4D3E; } /* Spinneren skal være lys på den mørke knap */ body[data-brand="vaergeguiden"] .btn-login.loading::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' stroke='%23F5F1E8' stroke-width='2.5' fill='none' stroke-dasharray='40' stroke-dashoffset='40'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") center / 24px no-repeat; } /* Fejlbesked — terracotta tone */ body[data-brand="vaergeguiden"] .error-box { background: #FBEDE7; border-color: #E8C0B0; color: #9E4830; } body[data-brand="vaergeguiden"] .divider { border-top: 1px solid #D9D2C0; } body[data-brand="vaergeguiden"] .login-footer { color: #6B6258; } body[data-brand="vaergeguiden"] .login-footer a { color: #B8593A !important; }