/* ===================================================================== theme.css — Darkeye "Have I Been Ransomed?" redesign --------------------------------------------------------------------- Cyberpunk dark/light design tokens + a token-level re-skin of the legacy synthwave-* classes so the heavy functional pages adopt the new look WITHOUT touching their markup or JS. Load order (set in nav.html): tailwind -> style.css -> styledash.css -> theme.css (this file, LAST so it wins). Theme is controlled by (set before paint by the inline script in nav.html). Persisted in localStorage under the key hibr-theme . Default: dark. ===================================================================== */ /* ---------- 1. New design tokens ---------------------------------- */ :root { --bg:#0a0f1a; --bg-2:rgba(10,16,30,0.72); --panel:rgba(255,255,255,0.04); --panel-2:rgba(255,255,255,0.025); --input-bg:rgba(3,7,15,0.55); --border:rgba(120,160,210,0.14); --border-2:rgba(120,160,210,0.24); --ring:rgba(45,212,191,0.32); --text:#e7edf7; --dim:#93a4bf; --faint:#5b6b85; --accent:#2dd4bf; --accent-bright:#5eead4; --accent-ink:#04201d; --coral:#fb7185; --coral-glow:rgba(251,113,133,0.14); --amber:#fbbf24; --green:#34d399; --red:#f87171; --purple:#a78bfa; --code:#5eead4; --glow:rgba(45,212,191,0.20); } :root[data-theme="light"] { --bg:#eceff5; --bg-2:rgba(255,255,255,0.82); --panel:#ffffff; --panel-2:#f6f8fc; --input-bg:#f6f8fc; --border:rgba(20,40,80,0.10); --border-2:rgba(20,40,80,0.18); --ring:rgba(13,148,136,0.22); --text:#0f1b2e; --dim:#51607a; --faint:#8b98ad; --accent:#0d9488; --accent-bright:#0f766e; --accent-ink:#ffffff; --coral:#b40000; --coral-glow:rgba(190,18,60,0.08); --amber:#b45309; --green:#059669; --red:#b91c1c; --purple:#7c3aed; --code:#0f766e; --glow:rgba(13,148,136,0.12); } /* ---------- 2. Base typography & page chrome --------------------- */ * { box-sizing:border-box; } html, body { margin:0; padding:0; } html { -webkit-text-size-adjust:100%; } body { font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color:var(--text); background-color:var(--bg); background-image: radial-gradient(900px 460px at 50% -8%, var(--glow), transparent 62%), radial-gradient(620px 400px at 100% 110%, var(--coral-glow), transparent 60%); background-attachment:fixed; background-repeat:no-repeat; min-height:100vh; transition:background-color .25s ease, color .25s ease; } /* JetBrains Mono everywhere a monospace face is requested */ .font-mono, code, pre, kbd, samp { font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } ::selection { background:color-mix(in srgb, var(--accent) 32%, transparent); color:var(--text); } /* ---------- 3. Re-skin the legacy synthwave token system --------- * * The heavy pages style themselves through these variables/classes. * Re-point them at the new palette and every legacy page re-themes. */ :root { --bg-gradient-start:var(--bg); --bg-gradient-via:var(--bg); --bg-gradient-end:var(--bg); --navbar-bg:var(--bg-2); --container-bg:var(--panel); --text-color:var(--text); --nav-text-color:var(--dim); --accent-pink:var(--coral); --accent-cyan:var(--accent); --accent-orange:var(--amber); --border-accent:var(--accent); --border-subtle:var(--border-2); --shadow-accent:0 0 16px var(--coral-glow); --shadow-cyan:0 0 16px var(--glow); --hover-bg:var(--panel); --nav-hover-text:var(--accent); --field-selected-bg:color-mix(in srgb, var(--accent) 18%, transparent); --field-selected-text:var(--accent-bright); } /* legacy class overrides (theme.css loads after style.css so these win) */ .synthwave-bg { background-color:var(--bg); background-image: radial-gradient(900px 460px at 50% -8%, var(--glow), transparent 62%), radial-gradient(620px 400px at 100% 110%, var(--coral-glow), transparent 60%); } .synthwave-text { color:var(--text); } .synthwave-navbar-bg { background-color:var(--bg-2); } .synthwave-container-bg { background-color:var(--panel); border:1px solid var(--border); } .synthwave-nav-text { color:var(--dim); } .synthwave-accent { color:var(--accent); } .synthwave-accent-pink { color:var(--coral); } .synthwave-accent-cyan { color:var(--accent); } .synthwave-accent-orange { color:var(--amber); } .synthwave-accent-magenta{ color:var(--coral); } .synthwave-accent-yellow { color:var(--amber); } .synthwave-border-accent { border-color:var(--accent); } .synthwave-border-subtle { border-color:var(--border); } .synthwave-shadow-cyan { box-shadow:0 0 16px var(--glow); } .synthwave-shadow-accent { box-shadow:0 0 18px var(--coral-glow); } .synthwave-hover-bg:hover { background-color:var(--panel); } .synthwave-nav-hover-text:hover { color:var(--accent); } .synthwave-button-glow { background:linear-gradient(135deg, var(--accent), var(--accent-bright)); color:var(--accent-ink); box-shadow:0 8px 24px var(--glow); } /* field toggle buttons (search page) re-skin */ .field-button { border-color:var(--border-2); color:var(--dim); } .field-button:hover { border-color:var(--accent); color:var(--text); box-shadow:0 0 14px var(--glow); } .field-button.selected { border-color:var(--accent); color:var(--accent-bright); background-color:color-mix(in srgb, var(--accent) 16%, transparent); box-shadow:0 0 16px var(--glow); opacity:1; } /* ---------- 4. Re-usable components for the ported pages ---------- */ .dc-shell { min-height:100vh; display:flex; flex-direction:column; } .dc-card { border:1px solid var(--border-2); border-radius:20px; background:var(--panel); backdrop-filter:blur(14px); box-shadow:0 0 0 1px var(--ring), 0 24px 60px rgba(0,0,0,.30); } [data-theme="light"] .dc-card { box-shadow:0 0 0 1px var(--ring), 0 24px 60px rgba(20,40,80,.12); } .dc-badge { display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:999px; border:1px solid var(--ring); background:color-mix(in srgb, var(--accent) 8%, transparent); font:600 11px 'JetBrains Mono', monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); } .dc-label { display:block; font:600 11px 'JetBrains Mono', monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-bottom:7px; } .dc-field { display:flex; align-items:center; gap:9px; border:1px solid var(--border-2); border-radius:11px; background:var(--input-bg); padding:0 13px; transition:border-color .15s ease, box-shadow .15s ease; } .dc-field:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); } .dc-field > i { color:var(--accent); font-size:13px; } .dc-input { flex:1; min-width:0; border:none; outline:none; background:transparent; padding:13px 0; font:500 14px 'Inter', sans-serif; color:var(--text); } .dc-input::placeholder { color:var(--faint); } .dc-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:13px; border:none; border-radius:12px; cursor:pointer; text-decoration:none; font:700 14px 'Inter', sans-serif; color:var(--accent-ink); background:linear-gradient(135deg, var(--accent), var(--accent-bright)); box-shadow:0 8px 24px var(--glow); transition:filter .15s ease, transform .05s ease; } .dc-btn:hover { filter:brightness(1.06); } .dc-btn:active { transform:translateY(1px); } .dc-btn-ghost { background:var(--panel); color:var(--text); border:1px solid var(--border-2); box-shadow:none; } .dc-btn-ghost:hover { border-color:var(--accent); color:var(--accent); filter:none; } .dc-btn-coral { background:linear-gradient(135deg, var(--coral), #f43f5e); color:#fff; box-shadow:0 8px 24px var(--coral-glow); } .dc-link { color:var(--accent); text-decoration:none; font-weight:600; } .dc-link:hover { text-decoration:underline; } .dc-link-coral { color:var(--coral); text-decoration:none; font-weight:600; } /* flash messages */ .dc-alert { display:flex; gap:10px; align-items:flex-start; padding:11px 14px; border-radius:11px; font:500 13px 'Inter', sans-serif; line-height:1.5; margin-bottom:14px; border:1px solid; } .dc-alert i { font-size:14px; margin-top:1px; } .dc-alert-error { color:var(--coral); border-color:color-mix(in srgb, var(--coral) 40%, transparent); background:color-mix(in srgb, var(--coral) 10%, transparent); } .dc-alert-success { color:var(--green); border-color:color-mix(in srgb, var(--green) 40%, transparent); background:color-mix(in srgb, var(--green) 10%, transparent); } .dc-alert-info { color:var(--accent); border-color:var(--ring); background:color-mix(in srgb, var(--accent) 8%, transparent); } .dc-alert-warning { color:var(--amber); border-color:color-mix(in srgb, var(--amber) 40%, transparent); background:color-mix(in srgb, var(--amber) 10%, transparent); } /* ---------- 5. New navigation chrome ----------------------------- */ .dc-nav { position:sticky; top:0; z-index:40; display:flex; justify-content:center; padding:12px 22px; border-bottom:1px solid var(--border); background:var(--bg-2); backdrop-filter:blur(12px); } .dc-nav-inner { width:100%; max-width:1240px; display:flex; align-items:center; justify-content:space-between; gap:14px; } .dc-brand { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; } .dc-brand img { height:30px; width:auto; display:block; } .dc-brand-txt { font:700 15px 'Inter', sans-serif; color:var(--text); white-space:nowrap; } .dc-brand-txt b { color:var(--coral); font-weight:700; } .dc-navlinks { display:flex; align-items:center; gap:1px; flex-wrap:wrap; justify-content:center; } .dc-navlink { padding:7px 10px; border-radius:8px; text-decoration:none; font:500 13px 'Inter', sans-serif; color:var(--dim); white-space:nowrap; transition:color .15s ease, background-color .15s ease; } .dc-navlink:hover { color:var(--text); background:var(--panel); } .dc-navlink.active { color:var(--coral); font-weight:600; } .dc-navlink i { opacity:.8; margin-right:5px; } .dc-nav-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; } .dc-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px; cursor:pointer; border:1px solid var(--border-2); background:var(--panel); color:var(--accent); text-decoration:none; font-size:14px; transition:border-color .15s ease, color .15s ease; } .dc-icon-btn:hover { border-color:var(--accent); } /* legal-style dropdown */ .dc-dd { position:relative; } .dc-dd-menu { display:none; position:absolute; top:100%; right:0; margin-top:6px; min-width:190px; border:1px solid var(--border-2); border-radius:12px; background:var(--bg-2); backdrop-filter:blur(14px); box-shadow:0 18px 40px rgba(0,0,0,.35); padding:6px; z-index:50; } .dc-dd:hover .dc-dd-menu, .dc-dd-menu:hover, .dc-dd.open .dc-dd-menu { display:block; } .dc-dd-item { display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:8px; text-decoration:none; font:500 13px 'Inter', sans-serif; color:var(--dim); } .dc-dd-item:hover { background:var(--panel); color:var(--text); } .dc-dd-item.active { color:var(--coral); } /* mobile menu */ .dc-burger { display:none; } .dc-mobile { display:none; } .dc-mobile.open { display:block; } .dc-mobile { border-bottom:1px solid var(--border); background:var(--bg-2); backdrop-filter:blur(12px); padding:8px 16px 14px; } .dc-mobile a { display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:9px; text-decoration:none; font:500 14px 'Inter', sans-serif; color:var(--dim); } .dc-mobile a:hover { background:var(--panel); color:var(--text); } .dc-mobile a.active { color:var(--coral); font-weight:600; } .dc-mobile a i { width:18px; text-align:center; opacity:.85; } @media (max-width: 1024px) { .dc-navlinks { display:none; } .dc-burger { display:inline-flex; } } /* ---------- 6. Footer -------------------------------------------- */ .dc-footer { margin-top:auto; text-align:center; padding:26px 22px; font:500 12px 'Inter', sans-serif; color:var(--faint); border-top:1px solid var(--border); } .dc-footer a { color:var(--dim); text-decoration:none; } .dc-footer a:hover { color:var(--accent); } /* main content wrapper */ .dc-main { flex:1; width:100%; } /* ---------- 7. Global responsive safety ------------------------- */ /* media never overflows its container (safe; does NOT touch sticky nav/sidebars) */ img, svg, video, canvas { max-width:100%; height:auto; } /* nav fits small screens (brand text can be long + nowrap) */ @media (max-width: 480px) { .dc-nav { padding:10px 14px; } .dc-nav-inner { gap:8px; } .dc-brand img { height:26px; } .dc-brand-txt { font-size:13px; } .dc-nav-actions { gap:6px; } } @media (max-width: 380px) { .dc-brand-txt { display:none; } /* keep just the logo on very narrow phones */ }