/* ===== THEME (explicit) ===== We always set data-theme="light" or "dark" on . Default variables = dark. ================================================== */ /* Default (DARK) */ :root{ /* UI */ --bg: #0b0f1a; --card: rgba(18, 24, 38, 0.72); /* glass */ --elev: rgba(26, 34, 51, 0.72); /* inputs glass */ --text: #e8eef6; --muted:#98a4b2; --border: #253045; --accent:#58a6ff; --accent2:#8b5cf6; --ok:#22c55e; --err:#ef4444; --shadow: 0 12px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03); /* Glass */ --glass-blur: 16px; --glass-bright: 1.05; --glass-border: 1px solid rgba(255,255,255,.06); /* Animated background palette (DARK) */ --bg-base-a: #0b0f1a; --bg-base-b: #11182a; --g1: rgba(255, 60, 200, 0.30); --g2: rgba( 80, 140, 255, 0.28); --g3: rgba( 0, 210, 170, 0.22); --vignette-1: rgba(0,0,0,.18); --vignette-2: rgba(0,0,0,.20); --noise-opacity: .65; /* Background animation knobs */ --bg-anim-duration: 28s; /* pan speed (lower=faster) */ --bg-anim-sat: 1.08; /* saturation */ --bg-anim-ctr: 1.04; /* contrast */ --hue-range: 12deg; /* hue rotate amount */ --hue-duration: 70s; /* hue cycle time */ } /* LIGHT */ :root[data-theme="light"]{ /* UI */ --bg:#f6f7fb; --card: rgba(255,255,255,0.78); --elev: rgba(248,250,255,0.78); --text:#0f172a; --muted:#64748b; --border:#e2e8f0; --accent:#0ea5e9; --accent2:#7c3aed; --shadow: 0 16px 36px rgba(2,6,23,.10); --glass-blur: 14px; --glass-bright: 1.02; --glass-border: 1px solid rgba(15,23,42,.06); /* Animated background palette (LIGHT) — stronger & more vivid */ --bg-base-a: #f2f6ff; --bg-base-b: #ffffff; --g1: rgba(255, 120, 180, 0.42); /* ↑ alpha */ --g2: rgba( 90, 160, 255, 0.38); /* ↑ alpha */ --g3: rgba( 0, 200, 170, 0.32); /* ↑ alpha */ --vignette-1: rgba(0,0,0,.04); /* lighter vignette */ --vignette-2: rgba(0,0,0,.06); --noise-opacity: .14; /* Livelier animation in light */ --bg-anim-duration: 32s; --bg-anim-sat: 1.28; --bg-anim-ctr: 1.06; --hue-range: 28deg; --hue-duration: 48s; } *{ box-sizing:border-box; } html, body { height: 100%; } body{ margin:0; color:var(--text); font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; line-height:1.55; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; /* Layering context for animated background */ position:relative; overflow-x:hidden; background: var(--bg); /* fallback */ } /* ===== Animated RGB background (under everything) ===== 3 layers: - ::before: moving multi-stop gradient (pan + hue cycle) - ::after : vignette + subtle noise - Content sits above (z-index: 1) ======================================================== */ body::before, body::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0; } /* pan */ @keyframes rgbPan { 0% { transform: translate3d(0, 0, 0) scale(1.1); } 50% { transform: translate3d(-6%, -4%, 0) scale(1.1); } 100% { transform: translate3d(0, 0, 0) scale(1.1); } } /* hue cycle */ @keyframes hue { 0% { filter: saturate(var(--bg-anim-sat)) contrast(var(--bg-anim-ctr)) hue-rotate(0deg); } 100% { filter: saturate(var(--bg-anim-sat)) contrast(var(--bg-anim-ctr)) hue-rotate(var(--hue-range)); } } @keyframes logoPulse { 0%, 100% { box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 15px color-mix(in oklab, var(--accent) 50%, transparent); } 50% { box-shadow: 0 0 20px color-mix(in oklab, var(--accent2) 60%, transparent); } } body::before{ background: radial-gradient(40% 35% at 20% 25%, var(--g1), transparent 60%), radial-gradient(45% 40% at 80% 30%, var(--g2), transparent 60%), radial-gradient(60% 55% at 70% 80%, var(--g3), transparent 60%), linear-gradient(135deg, var(--bg-base-a) 0%, var(--bg-base-b) 100%); animation: rgbPan var(--bg-anim-duration) ease-in-out infinite alternate, hue var(--hue-duration) linear infinite; will-change: transform, filter; } /* Make light-mode pan a bit quicker and more obvious */ html[data-theme="light"] body::before{ animation: rgbPan 24s ease-in-out infinite alternate, hue var(--hue-duration) linear infinite; } body::after{ background: radial-gradient(1200px 500px at 50% 20%, var(--vignette-1), transparent 60%), radial-gradient(1400px 900px at 60% 80%, var(--vignette-2), transparent 70%), url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNgYAAAAAMAASsJTYQAAAAASUVORK5CYII=") repeat; opacity: var(--noise-opacity); mix-blend-mode: soft-light; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce){ body::before{ animation: none; } } .page, .container, .header, .footer { position:relative; z-index:1; } /* ===== Top bar ===== */ .topbar{ position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: clamp(10px, 2vw, 16px) clamp(14px, 3vw, 24px); backdrop-filter: blur(calc(var(--glass-blur) - 6px)) brightness(1.02); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)); border-bottom: 1px solid rgba(255,255,255,.06); } .brand{ display:flex; align-items:center; gap:12px; } .logo{ width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background: linear-gradient(135deg, var(--accent), var(--accent2)); color:#000; font-weight:800; letter-spacing:.3px; box-shadow: 0 12px 24px rgba(0,0,0,.25); animation: logoPulse 6s ease-in-out infinite; } .titles h1{ margin:0; font-size: clamp(18px, 2.4vw, 24px); } .subtitle{ margin:2px 0 0; color:var(--muted); font-size:.95rem; } .actions{ display:flex; align-items:center; gap:8px; } .icon-btn{ border: var(--glass-border); background: color-mix(in oklab, var(--card) 80%, transparent); color:var(--text); border-radius:12px; padding:8px 10px; cursor:pointer; text-decoration:none; backdrop-filter: blur(calc(var(--glass-blur) - 8px)) brightness(var(--glass-bright)); } .icon-btn:hover{ border-color: color-mix(in oklab, var(--accent) 60%, var(--border)); } /* ===== Layout ===== */ .container{ width:100%; max-width:980px; margin:0 auto; padding: 10px 16px 24px; } .card{ background: var(--card); border: var(--glass-border); border-radius:18px; box-shadow: var(--shadow); padding:16px; margin:12px 0; backdrop-filter: blur(var(--glass-blur)) brightness(var(--glass-bright)); } .input-card .field + .quick-chips{ margin-top:10px; } .field{ display:grid; gap:6px; } .field.mini{ max-width:160px; } .label{ font-weight:600; } .hint{ color:var(--muted); font-weight:400; font-size:.92rem; } /* Glass inputs */ textarea, input[type="number"]{ width:100%; background: var(--elev); border: var(--glass-border); color:var(--text); border-radius:12px; padding:12px 14px; font-size:15px; outline:none; transition: border .2s, box-shadow .2s; backdrop-filter: blur(calc(var(--glass-blur) - 6px)) brightness(1.01); } textarea{ resize:vertical; min-height:96px; } textarea:focus, input[type="number"]:focus{ border-color: color-mix(in oklab, var(--accent) 70%, var(--border)); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent); } .quick-chips{ display:flex; flex-wrap:wrap; gap:8px; } .chip{ border: var(--glass-border); background: color-mix(in oklab, var(--elev) 85%, transparent); color:var(--text); padding:8px 12px; border-radius:999px; cursor:pointer; backdrop-filter: blur(calc(var(--glass-blur) - 8px)); } .chip:hover{ border-color: color-mix(in oklab, var(--accent) 60%, var(--border)); } .row{ display:flex; gap:12px; align-items:center; margin-top:12px; } .wrap{ flex-wrap:wrap; } .grow{ flex:1; } .buttons{ display:flex; gap:8px; flex-wrap:wrap; } .btn{ appearance:none; border: var(--glass-border); background: color-mix(in oklab, var(--elev) 80%, transparent); color:var(--text); padding:10px 14px; border-radius:12px; font-weight:700; cursor:pointer; transition: transform .05s ease, box-shadow .2s, border .2s, opacity .2s; backdrop-filter: blur(calc(var(--glass-blur) - 6px)) brightness(1.02); } .btn:hover{ border-color: color-mix(in oklab, var(--accent) 60%, var(--border)); } .btn:active{ transform: translateY(1px); } .btn.primary{ background: linear-gradient(135deg, var(--accent), var(--accent2)); border:none; color:#0b0e12; box-shadow: 0 10px 22px color-mix(in oklab, var(--accent) 25%, transparent); } .btn.ghost{ background: transparent; } .errors{ min-height:1.2em; color:var(--err); font-size:.95rem; margin-top:6px; white-space:pre-wrap; } .results-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; } .kpi .kicker{ color:var(--muted); font-size:.9rem; margin-bottom:6px; } .kpi .value{ font-size: clamp(20px, 3vw, 28px); font-weight:800; } .kpi .sub{ margin-top:6px; color:var(--muted); font-weight:600; } .unit{ opacity:.8; } .details .summary{ cursor:pointer; font-weight:700; } .table-wrap{ overflow:auto; margin-top:10px; border: var(--glass-border); border-radius:12px; background: color-mix(in oklab, var(--elev) 90%, transparent); backdrop-filter: blur(calc(var(--glass-blur) - 8px)); } .table{ width:100%; border-collapse:collapse; min-width:520px; } .table th,.table td{ padding:10px 12px; border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent); text-align:left; font-size:.96rem; } .table tbody tr:hover{ background: color-mix(in oklab, var(--elev) 85%, white 15%); } /* Toast */ .toast{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%); background: color-mix(in oklab, var(--elev) 92%, transparent); color:var(--text); border: var(--glass-border); border-radius:12px; padding:10px 14px; box-shadow: var(--shadow); backdrop-filter: blur(calc(var(--glass-blur) - 6px)); opacity:0; pointer-events:none; transition: opacity .25s ease, transform .25s ease; } .toast.show{ opacity:1; transform:translateX(-50%) translateY(-4px); } /* Footer */ .footer{ max-width:980px; margin:12px auto 26px; padding:0 16px; color:var(--muted); font-size:.95rem; text-align:center; } /* Mobile */ @media (max-width: 640px){ .results-grid{ grid-template-columns:1fr; } .titles h1{ font-size:18px; } textarea{ font-size:16px; } /* iOS zoom fix */ .btn{ font-size:.95rem; } }