/* ── HVIDS lyst tema (off-white) for de offentlige sider ── Aktiveres når . Overstyrer variabler OG de hyppigste hardcodede mørke flader, så siden vender til en lys udgave. Brand-default er fortsat mørk; dette er et opt-in lyst alternativ. */ :root[data-theme="light"] { --navy: #F4F6F9; /* off-white: primær baggrund */ --blue: #1B4FFF; --elec: #1B4FFF; /* electric → blå for kontrast på lyst */ --silver: #5A6B82; /* dæmpet tekst */ --white: #0A0E1A; /* "white" = mørk tekst på lys flade */ --border: #D5DCE6; /* lyse kanter */ --human: #B97D3C; --human-deep: #9A5F22; --surface: #FFFFFF; --surface-2: #ECEFF4; --text-strong: #0A0E1A; --text-mid: #2E3A4D; --text-muted: #5A6B82; --hairline: #D5DCE6; } /* ── Grundflade og tekst ── */ :root[data-theme="light"] body { background: #F4F6F9; color: var(--text-strong); } /* Baggrundslag/gradients → lyse */ :root[data-theme="light"] .bg-canvas::before { background: radial-gradient(ellipse 70% 55% at 72% 30%, rgba(27,79,255,.06) 0%, transparent 65%), radial-gradient(ellipse 45% 40% at 15% 75%, rgba(27,79,255,.04) 0%, transparent 60%), linear-gradient(170deg, #F4F6F9 0%, #ECEFF4 50%, #F4F6F9 100%) !important; } :root[data-theme="light"] .bg-canvas::after { background-image: linear-gradient(rgba(27,79,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(27,79,255,.05) 1px, transparent 1px) !important; } :root[data-theme="light"] .glow-orb { opacity: .30 !important; } :root[data-theme="light"] .glow-orb.a { background: rgba(27,79,255,.10) !important; } :root[data-theme="light"] .glow-orb.b { background: rgba(95,168,255,.08) !important; } /* ── Navigation ── */ :root[data-theme="light"] nav { background: rgba(244,246,249,.85) !important; border-bottom: 1px solid var(--hairline) !important; } :root[data-theme="light"] .nav-links li a { color: #4A5A72; } :root[data-theme="light"] .nav-links li a:hover, :root[data-theme="light"] .nav-links li a.active { color: #0A0E1A; } :root[data-theme="light"] .nav-login { color: var(--blue); border-color: rgba(27,79,255,.35); } :root[data-theme="light"] .nav-login:hover { color: #0A0E1A; background: rgba(27,79,255,.07); border-color: rgba(27,79,255,.55); } :root[data-theme="light"] .nav-divider { background: var(--hairline); } :root[data-theme="light"] .nav-back { color: var(--blue) !important; } :root[data-theme="light"] .burger span { background: #4A5A72; } /* ── Mobil-drawer ── */ :root[data-theme="light"] .mobile-menu { background: #FFFFFF !important; border-top: 1px solid var(--hairline); } :root[data-theme="light"] .mobile-menu ul li a { color: #0A0E1A; border-bottom: 1px solid var(--hairline); } :root[data-theme="light"] .mobile-menu ul li a:hover, :root[data-theme="light"] .mobile-menu ul li a.active { color: var(--blue); } :root[data-theme="light"] .mobile-menu .mobile-login { color: #0A0E1A; border-color: rgba(27,79,255,.3); background: rgba(27,79,255,.08); } :root[data-theme="light"] .mobile-menu .mobile-sub { color: #7A879B; } /* ── KORT & PANELER (alle de mørke rgba-flader på tværs af siderne) ── */ :root[data-theme="light"] .card, :root[data-theme="light"] .cards-layout, :root[data-theme="light"] .card-human, :root[data-theme="light"] .card-digital, :root[data-theme="light"] .card-in, :root[data-theme="light"] .sol-card, :root[data-theme="light"] .step, :root[data-theme="light"] .tool-card, :root[data-theme="light"] .how-step, :root[data-theme="light"] .principle, :root[data-theme="light"] .case-card, :root[data-theme="light"] .info-card, :root[data-theme="light"] .contact-card, :root[data-theme="light"] .contact-info, :root[data-theme="light"] .form-card { background: #FFFFFF !important; border-color: var(--hairline) !important; } /* Hover-tilstande for kortene */ :root[data-theme="light"] .card-human:hover, :root[data-theme="light"] .card-digital:hover, :root[data-theme="light"] .card:hover, :root[data-theme="light"] .sol-card:hover, :root[data-theme="light"] .case-card:hover, :root[data-theme="light"] .tool-card:hover { background: #FFFFFF !important; border-color: var(--blue) !important; box-shadow: 0 6px 24px rgba(27,79,255,.10) !important; } /* .steps-gitteret bruger --border som "fuge" mellem felter */ :root[data-theme="light"] .steps { background: var(--hairline) !important; border-color: var(--hairline) !important; } :root[data-theme="light"] .how-step { border-bottom-color: var(--hairline) !important; } /* Forsidens 3-kort-layout: giv kortene synlig adskillelse på lys flade */ :root[data-theme="light"] .cards-layout { background: #ECEFF4 !important; border: 1px solid var(--hairline) !important; } :root[data-theme="light"] .card, :root[data-theme="light"] .card-human, :root[data-theme="light"] .card-digital, :root[data-theme="light"] .card-in { border: 1px solid var(--hairline) !important; } /* Kort-tekster der var lyse/lav-opacity → mørke og læsbare */ :root[data-theme="light"] .card-title, :root[data-theme="light"] .card-human .card-title, :root[data-theme="light"] .card-digital .card-title, :root[data-theme="light"] .sol-card h3, :root[data-theme="light"] .tool-card h3, :root[data-theme="light"] .case-title { color: #0A0E1A !important; } :root[data-theme="light"] .card-body, :root[data-theme="light"] .card-human .card-body, :root[data-theme="light"] .card-digital .card-body, :root[data-theme="light"] .sol-card p, :root[data-theme="light"] .tool-card p, :root[data-theme="light"] .step-text { color: #2E3A4D !important; } :root[data-theme="light"] .card-label, :root[data-theme="light"] .card-human .card-label, :root[data-theme="light"] .card-digital .card-label, :root[data-theme="light"] .step-num { color: #6B7A92 !important; } /* Cases: "kommer snart"-kort skal se ud som de andre (ikke næsten usynligt) */ :root[data-theme="light"] .case-card.coming-soon { opacity: 1 !important; } :root[data-theme="light"] .case-card.coming-soon .card-visual { background: #ECEFF4 !important; } :root[data-theme="light"] .case-card.coming-soon .card-tag { color: #6B7A92 !important; } :root[data-theme="light"] .case-card.coming-soon .card-title { color: #3A465A !important; } /* About: profil-bokse — gør labels/værdier læsbare */ :root[data-theme="light"] .info-card-header { color: var(--blue) !important; background: rgba(27,79,255,.06) !important; } :root[data-theme="light"] .info-key { color: #5A6B82 !important; } :root[data-theme="light"] .info-val { color: #0A0E1A !important; } :root[data-theme="light"] .info-val.accent { color: var(--blue) !important; } :root[data-theme="light"] .info-row { border-bottom-color: var(--hairline) !important; } /* Forsidens "I/bro"-felt: gradient-bogstav gøres mørkt så det ses på lyst */ :root[data-theme="light"] .card-in-body { background: linear-gradient(180deg, #2E3A4D 0%, #43536B 55%, #5A6B82 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; } /* ── Knapper ── */ /* Ghost-knap (fx "Kontakt" på forsiden) var næsten usynlig på lyst */ :root[data-theme="light"] .btn-ghost { color: var(--blue) !important; border-color: rgba(27,79,255,.35) !important; } :root[data-theme="light"] .btn-ghost:hover { color: #0A0E1A !important; border-color: rgba(27,79,255,.6) !important; background: rgba(27,79,255,.06) !important; } /* ── Footer ── */ :root[data-theme="light"] footer { background: #ECEFF4 !important; border-top: 1px solid var(--hairline) !important; } :root[data-theme="light"] .footer-right, :root[data-theme="light"] .footer-left, :root[data-theme="light"] footer a, :root[data-theme="light"] footer p { color: #3A465A !important; } /* Brand-taglinen "Human Vision In Digital Solutions" må gerne være blå i lys udgave */ :root[data-theme="light"] .footer-tagline-text { color: #1B4FFF !important; } /* ── Logo på lys flade ── Kun det GRÅ wordmark (04) farves mørkt, så det er læsbart på off-white. H-symbolet (vises i header på mobil) er allerede det ORIGINALE BLÅ logo og må ALDRIG filtreres — i lys udgave skal det se ud præcis som i mørk udgave. */ :root[data-theme="light"] .nav-logo-wordmark, :root[data-theme="light"] .topbar-logo img { filter: brightness(0) saturate(100%) invert(8%) sepia(18%) saturate(1800%) hue-rotate(202deg) brightness(95%); } /* H-symbol: aldrig filtreret — bevar originalt blåt logo i begge temaer/skærmstørrelser */ :root[data-theme="light"] .nav-logo-symbol { filter: none !important; } /* ── Generelle overskrifter/brødtekst-fallbacks ── */ :root[data-theme="light"] .page-title, :root[data-theme="light"] .page-label, :root[data-theme="light"] h1, :root[data-theme="light"] h2, :root[data-theme="light"] h3 { color: #0A0E1A; } :root[data-theme="light"] .page-subtitle, :root[data-theme="light"] p, :root[data-theme="light"] li { color: #2E3A4D; } /* Behold blå accent hvor brand-farver bruges direkte via inline-style */ :root[data-theme="light"] [style*="color: var(--elec)"], :root[data-theme="light"] [style*="color:var(--elec)"] { color: var(--blue) !important; } /* ── Rettelser v2: tal, kommer-snart, contact-bokse ── */ /* Technology: tal 1-4 ("Fra prompt til færdigt redskab") var næsten usynlige */ :root[data-theme="light"] .how-num, :root[data-theme="light"] .principle-num, :root[data-theme="light"] .step-num { color: #1B4FFF !important; } /* Technology: how-step / principle mørke bokse → lyse */ :root[data-theme="light"] .how-step, :root[data-theme="light"] .principle { background: #FFFFFF !important; } :root[data-theme="light"] .how-step { border-bottom-color: var(--hairline) !important; } :root[data-theme="light"] .how-step:hover { background: rgba(27,79,255,.05) !important; } /* Cases: "kommer snart"-kort — gør tekst tydelig som de andre kort */ :root[data-theme="light"] .case-card.coming-soon { opacity: 1 !important; } :root[data-theme="light"] .case-card.coming-soon .card-visual { background: #ECEFF4 !important; } :root[data-theme="light"] .case-card.coming-soon .card-tag { color: #1B4FFF !important; } :root[data-theme="light"] .case-card.coming-soon .card-title { color: #0A0E1A !important; } :root[data-theme="light"] .case-card.coming-soon .card-desc, :root[data-theme="light"] .case-card.coming-soon p { color: #2E3A4D !important; } /* Contact: form-felter + sidebar-blokke var mørke. Indtastet tekst er en blød mørkegrå (#2E3A4D) — tydelig men ikke hård sort. */ :root[data-theme="light"] .form-input, :root[data-theme="light"] .form-textarea { background: #FFFFFF !important; border-color: var(--hairline) !important; color: #2E3A4D !important; } :root[data-theme="light"] .form-input::placeholder, :root[data-theme="light"] .form-textarea::placeholder { color: #8A97AB !important; } :root[data-theme="light"] .form-label { color: #5A6B82 !important; } :root[data-theme="light"] .sidebar-block { background: #FFFFFF !important; border-color: var(--hairline) !important; } :root[data-theme="light"] .sidebar-header { color: var(--blue) !important; background: rgba(27,79,255,.05) !important; } :root[data-theme="light"] .form-success { background: rgba(27,79,255,.05) !important; border-color: rgba(27,79,255,.2) !important; } :root[data-theme="light"] .form-success h3 { color: #0A0E1A !important; } :root[data-theme="light"] .form-success p { color: #2E3A4D !important; } /* Solutions: eksempel-tags ("pills") var mørke og grimme på lys flade */ :root[data-theme="light"] .card-examples p { color: #5A6B82 !important; } :root[data-theme="light"] .example-tag { color: #1B4FFF !important; background: rgba(27,79,255,.06) !important; border: 1px solid rgba(27,79,255,.18) !important; } :root[data-theme="light"] .sol-card .card-icon-wrap { background: rgba(27,79,255,.08) !important; border-color: rgba(27,79,255,.20) !important; color: #1B4FFF !important; } :root[data-theme="light"] .sol-card:hover .card-icon-wrap { background: rgba(27,79,255,.14) !important; border-color: rgba(27,79,255,.40) !important; } /* ── Nav-robusthed (begge temaer): undgå at "Log ind" og toggle klemmes/brækker ── */ nav .nav-login { white-space: nowrap; } nav .nav-right { flex-wrap: nowrap; } /* ══ TEMA-TOGGLE-KNAP (gælder begge temaer) ══ */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; flex-shrink: 0; background: transparent; border: 1px solid rgba(95,168,255,.22); border-radius: 4px; cursor: pointer; padding: 0; margin-left: 8px; color: #B7C2D0; transition: color .18s, border-color .18s, background .18s; vertical-align: middle; } .theme-toggle:hover { color: #5FA8FF; border-color: rgba(95,168,255,.5); background: rgba(95,168,255,.06); } .theme-toggle svg { width: 16px; height: 16px; display: block; } .theme-toggle .icon-sun { display: block; } .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle { color: #4A5A72; border-color: rgba(27,79,255,.25); } :root[data-theme="light"] .theme-toggle:hover { color: #1B4FFF; border-color: rgba(27,79,255,.5); background: rgba(27,79,255,.06); } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } /* Toggle i mobil-drawer */ .mobile-theme-toggle { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 16px; padding: 14px; width: 100%; background: rgba(95,168,255,.06); border: 1px solid rgba(95,168,255,.2); border-radius: 8px; cursor: pointer; color: inherit; font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; } .mobile-theme-toggle svg { width: 16px; height: 16px; } .mobile-theme-toggle .mlabel-light { display: inline; } .mobile-theme-toggle .mlabel-dark { display: none; } :root[data-theme="light"] .mobile-theme-toggle { background: rgba(27,79,255,.07); border-color: rgba(27,79,255,.22); color: #0A0E1A; } :root[data-theme="light"] .mobile-theme-toggle .mlabel-light { display: none; } :root[data-theme="light"] .mobile-theme-toggle .mlabel-dark { display: inline; } /* ── Touch-targets: min. 44×44px på touch-enheder (WCAG/Apple/Google) ── På mus/desktop bevares det kompakte look; kun coarse pointers forstørres. */ @media (pointer: coarse) { .theme-toggle { width: 44px; height: 44px; } .theme-toggle svg { width: 18px; height: 18px; } .burger { width: 44px; height: 44px; } nav .nav-login { padding-top: 12px; padding-bottom: 12px; } }