/* ========================================================================== THEME — shared design system (dark default + light variant) Reuse this file as-is in any new project to match the portal's look. Usage: - Default (no attribute) = dark mode - Add data-theme="light" to to switch to light mode - Toggle with JS: document.documentElement.setAttribute('data-theme', 'light' | 'dark') - Persist choice in localStorage (this is a UI preference, not sensitive data, so localStorage is fine here — unlike auth tokens) ========================================================================== */ :root{ /* --- DARK MODE (default) --- */ --bg:#171b23; /* page background */ --surface:#212732; /* cards, top bars, panels */ --surface2:#2a313e; /* nested/inset panels, inputs */ --border:#3b4456; --border-strong:#47526a; --text:#f3f6fb; /* primary text */ --muted:#a8b1c3; /* secondary text */ --faint:#7e8a9e; /* tertiary / disabled text */ --in:#34d399; --inbg:#15301f; --inbd:#2c6b4d; /* success / "in" state */ --out:#f87171; --outbg:#331a1a; --outbd:#5b1d1d; /* danger / "out" state */ --amber:#fbbf24; --amberbg:#2a2010; --amber-text:#0b0d11; /* highlight / admin accent, text-on-amber */ --shadow-card:0 2px 10px rgba(0,0,0,.2); --shadow-toast:0 12px 40px rgba(0,0,0,.5); /* --- fonts --- Load these from Google Fonts (see snippet at bottom of this file) */ --font:'DM Sans', system-ui, -apple-system, sans-serif; /* body text */ --mono:'DM Mono', ui-monospace, monospace; /* labels, meta, data */ --disp:'Bebas Neue', Impact, sans-serif; /* big display headings */ color-scheme:dark; } /* --- LIGHT MODE VARIANT --- */ :root[data-theme="light"]{ --bg:#f4f2ee; --surface:#ffffff; --surface2:#ece9e2; --border:#d8d3c8; --border-strong:#c3bcac; --text:#1d2027; --muted:#5c6270; --faint:#8a8f9a; --in:#0f6e56; --inbg:#d9f0e6; --inbd:#8fd4bb; --out:#a32d2d; --outbg:#f9dede; --outbd:#e3a8a8; --amber:#b3720a; --amberbg:#faeeda; --amber-text:#ffffff; --shadow-card:0 1px 3px rgba(0,0,0,.06); --shadow-toast:0 8px 28px rgba(0,0,0,.18); color-scheme:light; } /* --- resets --- */ *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;} html,body{margin:0;padding:0;} body{ background:var(--bg); color:var(--text); font-family:var(--font); min-height:100vh; transition:background .15s, color .15s; } button,input,select{font-family:var(--font);} a{color:inherit;text-decoration:none;} /* ========================================================================== TYPE ========================================================================== */ .h-display{ font-family:var(--disp); letter-spacing:.05em; line-height:1.05; } /* Example sizes — adjust per use: hero: font-size: clamp(4rem, 12vw, 9rem); section: font-size: 1.9rem; card: font-size: 1.7rem; */ .label{ font-family:var(--mono); font-size:.74rem; letter-spacing:.05em; color:var(--muted); text-transform:uppercase; } /* ========================================================================== LAYOUT ========================================================================== */ .pad{padding:30px 22px 50px;max-width:1100px;margin:0 auto;} .topbar{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:15px 26px; border-bottom:1px solid var(--border); background:var(--surface); } /* ========================================================================== THEME TOGGLE ========================================================================== */ .theme-toggle{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.74rem; color:var(--muted); background:transparent; border:1px solid var(--border); border-radius:8px; padding:6px 10px; cursor:pointer; } .theme-toggle:hover{border-color:var(--border-strong);color:var(--text);} /* ========================================================================== BUTTONS & FORM CONTROLS ========================================================================== */ .btn{padding:12px 18px;border-radius:9px;font-size:.92rem;font-weight:700;cursor:pointer;border:none;} .btn.amber{background:var(--amber);color:var(--amber-text);} .btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--border);} .btn.danger{background:transparent;color:var(--out);border:1px solid var(--outbd);} .input{ width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:9px; padding:12px 13px; color:var(--text); font-size:.95rem; outline:none; } .input:focus{border-color:var(--border-strong);} label.field{display:block;margin-bottom:14px;} label.field .lab{font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;color:var(--muted);display:block;margin-bottom:6px;} input[type="checkbox"]{accent-color:var(--in);} /* calm green tick, not browser-default red */ /* ========================================================================== CARDS ========================================================================== */ .card{ background:var(--surface2); border:1.5px solid var(--border-strong); border-radius:14px; padding:20px 18px; cursor:pointer; display:flex; flex-direction:column; justify-content:center; min-height:108px; transition:transform .1s, border-color .15s, background .15s; box-shadow:var(--shadow-card); } .card:hover{border-color:var(--border-strong);filter:brightness(1.05);} .card:active{transform:scale(.98);} .card .cardname{font-family:var(--disp);font-size:1.7rem;letter-spacing:.05em;line-height:1.05;margin-bottom:6px;color:var(--text);} .card .cardsub{font-family:var(--mono);font-size:.76rem;color:var(--muted);letter-spacing:.03em;line-height:1.35;} .grid{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:14px;} /* ========================================================================== PANELS (grouped settings/content blocks) ========================================================================== */ .panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px;margin-bottom:22px;box-shadow:var(--shadow-card);} .panel h2{font-family:var(--disp);font-size:1.6rem;letter-spacing:.05em;margin:0 0 4px;font-weight:400;color:var(--text);} /* ========================================================================== TAGS & STATUS PILLS ========================================================================== */ .tag{ font-family:var(--mono);font-size:.66rem;color:var(--amber-text);background:var(--amber); padding:3px 7px 2px;border-radius:5px;letter-spacing:.04em;font-weight:600; line-height:1;display:inline-flex;align-items:center; } .pill{font-family:var(--mono);font-size:.82rem;padding:3px 7px;border-radius:4px;} .pill.in{color:var(--in);background:var(--inbg);} .pill.out{color:var(--out);background:var(--outbg);} /* ========================================================================== FEEDBACK ========================================================================== */ .flash{background:var(--inbg);border:1px solid var(--inbd);color:var(--in);border-radius:10px;padding:11px 16px;font-size:.88rem;margin-bottom:18px;} .flash.err{background:var(--outbg);border-color:var(--outbd);color:var(--out);} .toast{ position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:200; padding:12px 22px;border-radius:10px;font-size:.9rem;font-weight:600;letter-spacing:.02em; box-shadow:var(--shadow-toast);border:1px solid var(--border);background:var(--surface2);color:var(--text); } .toast.in{background:var(--inbg);border-color:var(--inbd);color:var(--in);} .toast.out,.toast.err{background:var(--outbg);border-color:var(--outbd);color:var(--out);} .empty{color:var(--muted);font-size:.92rem;text-align:center;padding:50px 18px;line-height:1.6;} /* ========================================================================== FONTS — add this to your HTML : THEME TOGGLE — minimal JS to add to every page: ========================================================================== */