/* 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; } } /* ---- Mobile / small screens (≤720px) ------------------------------------ * One global pass (theme.css loads on every page) to stop the cramped / * overlapping layout on phones: tighten chrome, wrap action & filter rows, * stack 2-column grids, and make wide data tables scroll horizontally instead * of squishing columns over each other. Desktop is untouched (inside @media). */ @media (max-width: 720px) { * { box-sizing: border-box; } main { padding: 14px !important; } header { padding: 10px 14px !important; flex-wrap: wrap; gap: 8px; } header .brand img { height: 24px; } h1 { font-size: 20px; } /* Button / filter / tab rows wrap instead of overflowing off-screen. */ .actions, .filters, .tabs { flex-wrap: wrap !important; } .filters input, .filters select { flex: 1 1 44%; min-width: 0; } .actions .btn, .filters .btn { flex: 0 0 auto; } /* Multi-column grids collapse so text stops overlapping. */ .row { grid-template-columns: 1fr !important; } .grid { grid-template-columns: 1fr !important; } .info-grid { grid-template-columns: 1fr !important; } .stats { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } .stat .v, .stat .value { font-size: 20px !important; } /* Wide data tables become horizontally scrollable (clean rows you swipe). */ table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } /* Modals fill the small screen. */ .modal > div, .modal-content, #trModal > div { max-width: 100% !important; margin: 12px auto !important; } }