/* ========================================================================== NetAccess UI — design system (rework) Light theme = "Aurora", Dark theme = "Eclipse". One layout/type system, two palettes. Default follows prefers-color-scheme; .na-* classes only, so it layers additively over the legacy Bootstrap stylesheet. Theme is forced via . ========================================================================== */ :root{ /* ---- LIGHT · Aurora ---- */ --na-bg:#eef3fb; --na-ink:#1a2330; --na-muted:#5f6b7c; --na-line:#e6ebf2; --na-card:rgba(255,255,255,.80); --na-card-solid:#ffffff; --na-field:rgba(255,255,255,.75); --na-accent:#4f7cff; --na-accent-2:#a98bff; --na-accent-ink:#ffffff; --na-ok:#11b886; --na-warn:#f0683a; --na-warn-soft:rgba(240,104,58,.13); --na-shadow:0 30px 70px -30px rgba(40,60,120,.5); --na-mesh: radial-gradient(50% 45% at 12% 12%, rgba(110,168,255,.45), transparent 60%), radial-gradient(45% 40% at 92% 18%, rgba(169,139,255,.4), transparent 60%), radial-gradient(55% 45% at 78% 92%, rgba(98,224,200,.35), transparent 60%), radial-gradient(40% 35% at 25% 88%, rgba(255,180,210,.3), transparent 60%); --na-blur:20px; --na-r:20px; --na-r-sm:13px; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --na-bg:#100b07; --na-ink:#f7efe6; --na-muted:#a99681; --na-line:rgba(255,255,255,.09); --na-card:#1b140d; --na-card-solid:#1b140d; --na-field:rgba(255,255,255,.04); --na-accent:#ff9d3c; --na-accent-2:#f0851a; --na-accent-ink:#2a1604; --na-ok:#5fcf8e; --na-warn:#ff6b57; --na-warn-soft:rgba(255,107,87,.13); --na-shadow:0 30px 70px -30px rgba(0,0,0,.85); --na-mesh: radial-gradient(60% 50% at 82% 0%, rgba(255,157,60,.16), transparent 60%), radial-gradient(50% 50% at 0% 100%, rgba(255,107,87,.10), transparent 55%); --na-blur:14px; } } :root[data-theme="dark"]{ --na-bg:#100b07; --na-ink:#f7efe6; --na-muted:#a99681; --na-line:rgba(255,255,255,.09); --na-card:#1b140d; --na-card-solid:#1b140d; --na-field:rgba(255,255,255,.04); --na-accent:#ff9d3c; --na-accent-2:#f0851a; --na-accent-ink:#2a1604; --na-ok:#5fcf8e; --na-warn:#ff6b57; --na-warn-soft:rgba(255,107,87,.13); --na-shadow:0 30px 70px -30px rgba(0,0,0,.85); --na-mesh: radial-gradient(60% 50% at 82% 0%, rgba(255,157,60,.16), transparent 60%), radial-gradient(50% 50% at 0% 100%, rgba(255,107,87,.10), transparent 55%); --na-blur:14px; } /* ---- base / shell (scoped under .na so legacy pages are untouched) ---- */ /* always reserve the scrollbar gutter so short vs. long pages don't shift the centered layout sideways (Chrome 94+/Firefox 97+; harmless where unsupported) */ html{scrollbar-gutter:stable} .na, .na *{box-sizing:border-box} body.na{margin:0;min-height:100vh;background:var(--na-bg);background-image:var(--na-mesh);background-attachment:fixed; color:var(--na-ink);font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased; display:flex;flex-direction:column} .na-display{font-family:'Bricolage Grotesque','Hanken Grotesk',sans-serif} .na-mono{font-family:'JetBrains Mono',ui-monospace,monospace} /* header */ .na-header{position:sticky;top:0;z-index:30;backdrop-filter:blur(12px); background:color-mix(in srgb,var(--na-bg) 78%,transparent);border-bottom:1px solid var(--na-line)} .na-header .na-bar{max-width:1040px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:13px 18px} .na-brand{display:flex;align-items:center;text-decoration:none} /* existing white wordmark SVG: show black in light, white in dark */ .na-brand .na-logo{height:25px;width:auto;display:block;filter:brightness(0)} :root[data-theme="dark"] .na-brand .na-logo{filter:none} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .na-brand .na-logo{filter:none}} .na-nav{margin-left:auto;display:flex;align-items:center;gap:4px} .na-nav a{color:var(--na-muted);text-decoration:none;font-weight:600;font-size:13.5px;padding:8px 11px;border-radius:9px} .na-nav a:hover{color:var(--na-ink);background:var(--na-line)} .na-toggle{width:38px;height:38px;border-radius:10px;border:1px solid var(--na-line);background:var(--na-field); color:var(--na-ink);cursor:pointer;display:grid;place-items:center;flex:0 0 auto} .na-toggle:hover{border-color:var(--na-accent)} .na-toggle .sun{display:none}.na-toggle .moon{display:block} :root[data-theme="dark"] .na-toggle .sun{display:block}:root[data-theme="dark"] .na-toggle .moon{display:none} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .na-toggle .sun{display:block}:root:not([data-theme="light"]) .na-toggle .moon{display:none}} /* admin sub-navigation (tabs under the header on admin routes) */ .na-subbar{position:sticky;top:65px;z-index:29;backdrop-filter:blur(12px); background:color-mix(in srgb,var(--na-bg) 78%,transparent);border-bottom:1px solid var(--na-line)} .na-subbar .in{max-width:1040px;margin:0 auto;padding:0 18px;display:flex;gap:2px;overflow-x:auto} .na-subbar a{padding:13px 14px;font-weight:600;font-size:13.5px;color:var(--na-muted);text-decoration:none; border-bottom:2px solid transparent;white-space:nowrap} .na-subbar a:hover{color:var(--na-ink)} .na-subbar a.active{color:var(--na-accent);border-bottom-color:var(--na-accent)} /* banner (MAC changed / status) */ .na-banner{max-width:1040px;margin:14px auto 0;padding:0 18px} .na-banner .in{display:flex;gap:11px;align-items:flex-start;border-radius:13px;padding:13px 15px;font-size:13.5px;line-height:1.45; background:var(--na-warn-soft);border:1px solid color-mix(in srgb,var(--na-warn) 40%,transparent);color:var(--na-ink)} .na-banner.ok .in{background:color-mix(in srgb,var(--na-ok) 14%,transparent);border-color:color-mix(in srgb,var(--na-ok) 40%,transparent)} .na-banner a{color:var(--na-accent);font-weight:700} /* layout main — mobile-first column; widens to ~960 on desktop (1040 = header width) */ .na-main{flex:1 0 auto;width:100%;max-width:960px;margin:0 auto;padding:26px 16px 50px} .na-narrow{max-width:600px} .na-wide{max-width:1040px} /* card */ .na-card{background:var(--na-card);backdrop-filter:blur(var(--na-blur));border:1px solid var(--na-line); border-radius:var(--na-r);box-shadow:var(--na-shadow);overflow:hidden;animation:na-rise .5s cubic-bezier(.2,.8,.2,1)} @keyframes na-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .na-card-h{padding:24px 24px 2px} .na-kick{font-weight:700;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--na-accent)} .na-card h1{font-family:'Bricolage Grotesque','Hanken Grotesk',sans-serif;font-weight:700;font-size:28px;line-height:1.04; letter-spacing:-.02em;margin:9px 0 4px;color:var(--na-ink)} .na-sub{color:var(--na-muted);font-size:14.5px;margin:0 0 12px} .na-card-b{padding:8px 24px 26px} /* fields */ .na-label{display:block;font-size:12.5px;font-weight:600;color:var(--na-muted);margin:15px 2px 7px} .na-input{width:100%;border:1.5px solid var(--na-line);background:var(--na-field);border-radius:var(--na-r-sm); padding:13px 15px;font:500 15px 'Hanken Grotesk';color:var(--na-ink);transition:.16s} .na-input::placeholder{color:var(--na-muted);opacity:.7} .na-input:focus{outline:0;border-color:var(--na-accent);background:var(--na-card-solid); box-shadow:0 0 0 4px color-mix(in srgb,var(--na-accent) 18%,transparent)} .na-input.is-bad,.na-input.is-invalid{border-color:var(--na-warn)} select.na-input{appearance:none;background-repeat:no-repeat;background-position:right 14px center; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23808080' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E")} .na-row2{display:grid;grid-template-columns:1fr 1fr;gap:11px} /* searchable combobox (na-forms.js) */ .na-combo{position:relative} .na-combo-list{position:absolute;z-index:40;top:calc(100% + 4px);left:0;right:0;max-height:288px;overflow-y:auto; margin:0;padding:5px;list-style:none;background:var(--na-card-solid);border:1px solid var(--na-line); border-radius:var(--na-r-sm);box-shadow:var(--na-shadow)} .na-combo-list[hidden]{display:none} .na-combo-list li{padding:9px 11px;border-radius:9px;font-size:14px;color:var(--na-ink);cursor:pointer; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .na-combo-list li.hide{display:none} .na-combo-list li.active,.na-combo-list li:hover{background:color-mix(in srgb,var(--na-accent) 14%,transparent);color:var(--na-accent)} .na-err{display:block;color:var(--na-warn);font-size:12.5px;font-weight:600;margin:6px 2px 0} /* buttons */ .na-btn{display:block;width:100%;text-align:center;border:0;border-radius:14px;cursor:pointer;text-decoration:none; background:linear-gradient(135deg,var(--na-accent),var(--na-accent-2));color:var(--na-accent-ink); font:700 15px 'Hanken Grotesk';padding:15px;margin-top:20px;transition:.15s; box-shadow:0 14px 30px -12px color-mix(in srgb,var(--na-accent) 80%,transparent)} .na-btn:hover{transform:translateY(-1px);filter:brightness(1.04);color:var(--na-accent-ink)} .na-btn.ghost{background:var(--na-field);color:var(--na-accent);box-shadow:none;border:1.5px solid var(--na-line)} .na-link{display:block;text-align:center;margin-top:14px;color:var(--na-muted);font-size:13.5px;text-decoration:none} .na-link b{color:var(--na-accent)} .na-check{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:13px;color:var(--na-muted);line-height:1.45} .na-check input{accent-color:var(--na-accent);width:18px;height:18px;margin-top:1px;flex:0 0 auto} .na-check b{color:var(--na-ink)} /* device card */ .na-device{margin:6px 24px 0;display:flex;align-items:center;gap:13px;padding:15px;border-radius:17px; border:1px solid color-mix(in srgb,var(--na-accent) 28%,var(--na-line)); background:linear-gradient(135deg,color-mix(in srgb,var(--na-accent) 12%,transparent),transparent)} .na-device .g{width:42px;height:42px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center; background:color-mix(in srgb,var(--na-accent) 14%,transparent)} .na-device .g svg{width:20px;height:20px;stroke:var(--na-accent)} .na-device .t{font-weight:700;font-size:14px} .na-device .m{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--na-accent);margin-top:2px;letter-spacing:-.02em} .na-device .m span{color:var(--na-muted)} .na-device .pill{margin-left:auto;font:700 11px 'Hanken Grotesk';color:var(--na-accent-ink);background:var(--na-ok); padding:5px 10px;border-radius:99px;white-space:nowrap} .na-device .pill.off{background:var(--na-warn)} /* status / quarantine */ .na-status{text-align:center} .na-status .ic{width:62px;height:62px;border-radius:18px;margin:6px auto 4px;display:grid;place-items:center; background:var(--na-warn-soft);border:1px solid color-mix(in srgb,var(--na-warn) 30%,transparent)} .na-status .ic svg{width:30px;height:30px;stroke:var(--na-warn)} .na-status ol{counter-reset:s;list-style:none;padding:0;margin:16px 0 0;text-align:left} .na-status li{counter-increment:s;display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--na-line); font-size:13.5px;color:var(--na-ink);line-height:1.45} .na-status li::before{content:counter(s);flex:0 0 auto;width:23px;height:23px;border-radius:7px; background:var(--na-warn-soft);color:var(--na-warn);border:1px solid color-mix(in srgb,var(--na-warn) 35%,transparent); font:700 12px 'JetBrains Mono';display:grid;place-items:center} .na-status b{color:var(--na-accent)} /* footer */ .na-footer{flex-shrink:0;border-top:1px solid var(--na-line);margin-top:30px} .na-footer .in{max-width:1040px;margin:0 auto;padding:18px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap; color:var(--na-muted);font-size:12.5px} .na-footer a{color:var(--na-muted);text-decoration:none} .na-footer a:hover{color:var(--na-accent)} @media (max-width:520px){ .na-nav a:not(.always){display:none} .na-card-h,.na-card-b{padding-left:18px;padding-right:18px} .na-brand .na-logo{height:22px} } /* ========================================================================== Native forms with FormValidation v2 (no Bootstrap, no jQuery) ========================================================================== */ .na-field{margin-top:16px} .na-field .na-label{margin-top:0} .na .fv-plugins-message-container{color:var(--na-warn);font-weight:600;font-size:12.5px;margin-top:6px} .na .fv-plugins-message-container__error{display:block} .na-input.is-bad{border-color:var(--na-warn)} .na-input.is-bad:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--na-warn) 18%,transparent)} /* consent: text + segmented Ja/Nein toggle */ .na-consent{font-size:12.5px;color:var(--na-muted);line-height:1.55;margin:0 0 10px} .na-seg{display:inline-flex;gap:4px;background:var(--na-field);border:1.5px solid var(--na-line);border-radius:12px;padding:4px} .na-seg label{margin:0;cursor:pointer;border-radius:8px;padding:9px 20px;font:700 13px 'Hanken Grotesk';color:var(--na-muted);transition:.12s;position:relative} .na-seg label input{position:absolute;inset:0;opacity:0;cursor:pointer} .na-seg label:has(input:checked){background:var(--na-accent);color:var(--na-accent-ink)} .na-form-error{background:var(--na-warn-soft);border:1px solid color-mix(in srgb,var(--na-warn) 40%,transparent); border-radius:13px;padding:12px 15px;margin:0 0 6px;font-size:13.5px;color:var(--na-ink)} .na-form-error p{margin:2px 0} .na-divider{border:0;border-top:1px solid var(--na-line);margin:22px 0 0} /* link list + prose list (welcome / content) */ .na-links{display:flex;flex-direction:column;margin-top:8px} .na-links a{display:block;text-decoration:none;color:var(--na-ink);font-weight:600;font-size:14.5px;padding:13px 4px;border-top:1px solid var(--na-line)} .na-links a:first-child{border-top:0} .na-links a:hover{color:var(--na-accent)} .na-list{margin:10px 0 0;padding-left:20px;color:var(--na-ink);font-size:14px;line-height:1.7} /* prose (content pages: faq, imprint, privacy, setup, ...) */ .na-prose{color:var(--na-ink);font-size:14.5px;line-height:1.6} .na-prose h1{font-family:'Bricolage Grotesque','Hanken Grotesk',sans-serif;font-weight:700;font-size:26px;letter-spacing:-.02em;margin:0 0 14px} .na-prose h2,.na-prose h3{font-family:'Bricolage Grotesque','Hanken Grotesk',sans-serif;font-weight:700;font-size:17px;letter-spacing:-.01em;margin:22px 0 8px} .na-prose p{margin:0 0 12px;color:var(--na-muted)} .na-prose a{color:var(--na-accent);text-decoration:none}.na-prose a:hover{text-decoration:underline} .na-prose ul,.na-prose ol{margin:0 0 12px;padding-left:20px;color:var(--na-muted)} .na-prose li{margin:4px 0} .na-prose strong,.na-prose b{color:var(--na-ink)} .na-prose hr{border:0;border-top:1px solid var(--na-line);margin:18px 0} .na-prose table{width:100%;border-collapse:collapse;font-size:13.5px;margin:0 0 14px} .na-prose th,.na-prose td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--na-line)} .na-prose th{color:var(--na-ink);font-weight:700} /* ajax loader overlay (vanilla, no jQuery) */ .na #modal-ajax-loader{display:none;position:fixed;inset:0;z-index:50;align-items:center;justify-content:center; background:color-mix(in srgb,var(--na-bg) 70%,transparent);backdrop-filter:blur(3px)} .na #modal-ajax-loader .spinner-border{width:42px;height:42px;border:4px solid var(--na-line);border-top-color:var(--na-accent); border-radius:50%;animation:na-spin .8s linear infinite;display:block} .na #modal-ajax-loader .sr-only{display:none} @keyframes na-spin{to{transform:rotate(360deg)}} /* stats chart */ #chartdiv{width:100%;height:360px} /* admin: na table + toolbar + badges (replaces Bootstrap tables) */ .na-table-wrap{overflow-x:auto;border:1px solid var(--na-line);border-radius:var(--na-r-sm);background:var(--na-card-solid)} .na-table{width:100%;border-collapse:collapse;font-size:13.5px} .na-table th{text-align:left;font:700 11px 'Hanken Grotesk';letter-spacing:.04em;text-transform:uppercase;color:var(--na-muted); padding:12px 14px;border-bottom:1px solid var(--na-line);white-space:nowrap} .na-table td{padding:11px 14px;border-bottom:1px solid var(--na-line);color:var(--na-ink);vertical-align:middle} .na-table tr:last-child td{border-bottom:0} .na-table tbody tr:hover{background:color-mix(in srgb,var(--na-accent) 6%,transparent)} .na-badge{display:inline-block;font:700 11px 'Hanken Grotesk';padding:3px 9px;border-radius:99px; background:var(--na-line);color:var(--na-ink)} .na-badge.ok{background:color-mix(in srgb,var(--na-ok) 16%,transparent);color:var(--na-ok)} .na-badge.warn{background:var(--na-warn-soft);color:var(--na-warn)} .na-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px} .na-btn-sm{display:inline-block;width:auto;margin:0;padding:9px 16px;font-size:13.5px;border-radius:10px;border:0;cursor:pointer; text-decoration:none;background:linear-gradient(135deg,var(--na-accent),var(--na-accent-2));color:var(--na-accent-ink);font-weight:700} .na-btn-sm.ghost{background:var(--na-field);color:var(--na-accent);border:1.5px solid var(--na-line)} .na-btn-sm.danger{background:var(--na-warn-soft);color:var(--na-warn);border:1.5px solid color-mix(in srgb,var(--na-warn) 35%,transparent)} /* admin list rows */ .na-rows{list-style:none;margin:0;padding:0} .na-rows>li{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--na-line);font-size:14px;color:var(--na-ink)} .na-rows>li:last-child{border-bottom:0} .na-rows .grow{flex:1;min-width:0} .na-rows .mono{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--na-muted)} .na-cardfoot{padding:14px 18px;border-top:1px solid var(--na-line);display:flex;justify-content:flex-end;gap:10px} .na-rows details summary{cursor:pointer;color:var(--na-accent);font:600 12.5px 'Hanken Grotesk';list-style:none;margin-top:4px} .na-rows details summary::-webkit-details-marker{display:none} .na-rows details p{color:var(--na-muted);font-size:13px;margin:6px 0 0} /* textarea */ textarea.na-input{min-height:120px;resize:vertical;line-height:1.5} textarea.na-input.mono{font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:1.6} /* form footer (admin edit: back + save) */ .na-formfoot{display:flex;gap:10px;align-items:center;margin-top:22px} .na-formfoot .grow{flex:1}