/* Optima light theme — white background, dark text, orange accent + rainbow * motion (nod to the optimacall.ro logo). Loaded LAST in on every page, * so it overrides each page's inline :root palette. Pages keep using their * var(--bg)/var(--text)/var(--accent) etc., which now resolve to light values. */ :root { --bg: #ffffff; --panel: #ffffff; --panel-2: #f4f6f9; --panel-3: #ecf0f6; --text: #16202e; --text-dim: #586577; --text-fade: #93a0b2; --accent: #f39200; --accent-soft: #f392001a; --accent-hairline:#f3920055; --green: #16a34a; --red: #dc2626; --yellow:#d97706; --blue: #2563eb; --border: #e3e8ef; --hairline:#eef1f6; } /* Light theme needs soft shadows for depth instead of dark fills. */ html, body { background: var(--bg); color: var(--text); } .panel, .card, .tile, .table-shell, table { box-shadow: 0 1px 2px rgba(16,32,46,.04), 0 2px 8px rgba(16,32,46,.05); } /* ---- Motion -------------------------------------------------------------- */ @keyframes optimaFadeUp { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } } @keyframes optimaShimmer { to { background-position: 200% 0; } } @keyframes optimaSpinSoft { to { transform: rotate(360deg); } } /* Panels/cards gently rise in on load. */ .panel, .card, .tile, .stat, .table-shell { animation: optimaFadeUp .45s cubic-bezier(.2,.7,.3,1) both; } main > *:nth-child(2) { animation-delay:.04s; } main > *:nth-child(3) { animation-delay:.08s; } main > *:nth-child(4) { animation-delay:.12s; } /* Animated rainbow accent line under every header. */ header { position: relative; } header::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background: linear-gradient(90deg,#f39200,#e23744,#7c3aed,#2563eb,#16a34a,#f39200); background-size:200% 100%; animation: optimaShimmer 7s linear infinite; } /* Smooth, lively interactions. */ .btn { transition: transform .1s ease, filter .12s ease, box-shadow .12s ease; } .btn:hover { transform: translateY(-1px); } .card, .tile { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .card:hover, .tile:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(16,32,46,.10); } a, .chip, .tab, select, input, .pill { transition: color .12s, background .12s, border-color .12s; } tr.clickable:hover td, table tbody tr:hover td { transition: background .12s; } /* Spinner reads better on white. */ .spinner { border-color:#e3e8ef; border-top-color: var(--accent); } @media (prefers-reduced-motion: reduce) { *, *::after { animation: none !important; } }