/* ============================================================ Dark mode – aktiveres via data-theme="dark" på Følger automatisk systemindstilling, men kan overrides med toggle-knappen i headeren. ============================================================ */ /* ---- Automatisk: følg OS-indstilling ---- */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { color-scheme: dark; } html:not([data-theme="light"]) body { background: var(--dk-bg); color: var(--dk-text); } } /* ---- Manuelt: data-theme="dark" ---- */ html[data-theme="dark"] { color-scheme: dark; } :root { /* Dark palette */ --dk-bg: #0f0d1a; --dk-surface: #1a1726; --dk-surface2: #221e30; --dk-border: #2e2945; --dk-text: #e8e6f0; --dk-soft: #9b97b0; } /* ---- Overrides for dark (manual toggle) ---- */ html[data-theme="dark"] body { background: var(--dk-bg); color: var(--dk-text); } /* ---- Auto dark via OS (no manual override) ---- */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]):not([data-theme="dark"]) body { background: var(--dk-bg); color: var(--dk-text); } /* Auto-set attribute via JS for remaining selectors */ } /* Bruger nested selectors via komma for PHP 7 kompatibilitet (ingen nesting) */ html[data-theme="dark"] .site-header, html[data-theme="dark"] .site-header .wrap { background: rgba(15,13,26,0.94); border-color: var(--dk-border); } html[data-theme="dark"] .brand { color: #fff; } html[data-theme="dark"] .brand small { color: var(--dk-soft); } html[data-theme="dark"] .nav-toggle { border-color: var(--dk-border); color: #fff; } /* Dropdowns */ html[data-theme="dark"] .main-nav ul ul { background: var(--dk-surface); border-color: var(--dk-border); box-shadow: 0 14px 40px rgba(0,0,0,0.5); } html[data-theme="dark"] .main-nav ul ul li a { color: var(--dk-text); } html[data-theme="dark"] .main-nav ul ul li a:hover { background: var(--dk-surface2); } html[data-theme="dark"] .main-nav ul ul .menu-item-has-children > a { color: #fff; border-color: var(--dk-border); } html[data-theme="dark"] .main-nav > ul > li > a:hover { color: #9d94ff; } /* Mobilmenu */ @media (max-width: 920px) { html[data-theme="dark"] .main-nav { background: var(--dk-bg); border-color: var(--dk-border); box-shadow: 0 16px 40px rgba(0,0,0,0.5); } html[data-theme="dark"] .main-nav > ul > li > a:hover { background: var(--dk-surface); } html[data-theme="dark"] .main-nav ul ul { border-color: var(--dk-border); } } /* Hero */ html[data-theme="dark"] .hero h1 { color: #fff; } html[data-theme="dark"] .hero h1 .u { text-decoration-color: var(--c-laser); } html[data-theme="dark"] .hero .lede { color: var(--dk-soft); } html[data-theme="dark"] .hero .meta .live { color: var(--open); } /* Buttons */ html[data-theme="dark"] .btn-navy { background: #fff; color: var(--navy); } html[data-theme="dark"] .btn-navy:hover { background: var(--dk-text); } html[data-theme="dark"] .btn-line { border-color: var(--dk-border); color: var(--dk-text); } html[data-theme="dark"] .btn-line:hover { background: #fff; color: var(--navy); } /* Facility index */ html[data-theme="dark"] .findex { border-color: var(--dk-border); } html[data-theme="dark"] .frow { border-color: var(--dk-border); } html[data-theme="dark"] .frow:hover { background: var(--dk-surface); box-shadow: calc(var(--g) * -1) 0 0 var(--dk-surface), var(--g) 0 0 var(--dk-surface); } html[data-theme="dark"] .frow h3 { color: #fff; } html[data-theme="dark"] .frow .go { color: #fff; } html[data-theme="dark"] .frow p { color: var(--dk-soft); } /* Status strip */ html[data-theme="dark"] .strip { background: var(--dk-surface2); } html[data-theme="dark"] .chip { background: rgba(255,255,255,0.08); } /* Sections */ html[data-theme="dark"] .section h2 { color: #fff; } html[data-theme="dark"] .section .sub { color: var(--dk-soft); } html[data-theme="dark"] .kick { color: #9d94ff; } /* Guide list */ html[data-theme="dark"] .guide-list a { border-color: var(--dk-border); color: var(--dk-text); } html[data-theme="dark"] .guide-list a:hover { border-color: #9d94ff; } /* News cards – beholder gradient-baggrund, ser godt ud i dark */ /* Info band */ html[data-theme="dark"] .info-band { background: var(--dk-surface); } html[data-theme="dark"] .info-band h3 { color: #fff; } html[data-theme="dark"] .hours-row { border-color: var(--dk-border); } html[data-theme="dark"] .hours-row strong { color: #fff; } html[data-theme="dark"] .contact-list a { color: #9d94ff; } /* Post cards (archive) */ html[data-theme="dark"] .post-card { background: var(--dk-surface); border-color: var(--dk-border); } html[data-theme="dark"] .post-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.4); } html[data-theme="dark"] .post-card-body h2 { color: #fff; } html[data-theme="dark"] .post-card-body h2 a:hover { color: #9d94ff; } /* Article / entry content */ html[data-theme="dark"] .page-head h1 { color: #fff; } html[data-theme="dark"] .entry-content h2 { color: #fff; border-color: var(--dk-border); } html[data-theme="dark"] .entry-content h3 { color: #fff; } html[data-theme="dark"] .entry-content strong { color: #fff; } html[data-theme="dark"] .entry-content a { color: #9d94ff; } html[data-theme="dark"] .entry-content a:hover { color: #fff; } html[data-theme="dark"] .entry-content blockquote { background: var(--dk-surface); border-color: var(--c-laser); } html[data-theme="dark"] .entry-content code { background: var(--dk-surface); color: #9d94ff; } html[data-theme="dark"] .entry-content th { border-color: var(--dk-border); color: var(--dk-soft); } html[data-theme="dark"] .entry-content td { border-color: var(--dk-border); } /* Footer */ html[data-theme="dark"] .site-footer { border-color: var(--dk-border); color: var(--dk-soft); } html[data-theme="dark"] .site-footer b { color: #fff; } /* Pagination */ html[data-theme="dark"] .pagination a, html[data-theme="dark"] .pagination span { border-color: var(--dk-border); color: var(--dk-text); } html[data-theme="dark"] .pagination .current { background: #fff; color: var(--navy); border-color: #fff; } /* ---- Toggle-knap ---- */ .theme-toggle { background: none; border: 2px solid var(--line); border-radius: 999px; width: 40px; height: 40px; cursor: pointer; display: grid; place-items: center; color: var(--navy); transition: border-color 0.15s; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--navy); } html[data-theme="dark"] .theme-toggle { border-color: var(--dk-border); color: var(--dk-text); } html[data-theme="dark"] .theme-toggle:hover { border-color: #fff; } .theme-toggle .icon-sun, .theme-toggle .icon-moon { width: 18px; height: 18px; } /* Vis sol i dark, måne i light */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } html[data-theme="dark"] .theme-toggle .icon-sun { display: block; } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }