/* ========================================================================== IPS-530 demo webapp – theme layer Variables ported from the "IPS-530 Vízhálózati Platform" design (dark first) on top of the Intelliport Design System tokens (intelliport.css). Switch with . ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&display=swap"); :root, :root[data-ips-theme="dark"] { --bg: #131110; --surface: #1B1815; --surface2: #141210; --surface3: #161411; --surface4: #171512; --input: #0F0D0B; --txt: #EDE8DF; --txt2: #D8CFC0; --txt3: #C9C0B0; --mut: #A89E8C; --mut2: #8A8171; --mut3: #7A7261; --faint: #6E6759; --bd: rgba(232, 213, 183, 0.09); --bd2: rgba(232, 213, 183, 0.14); --bd3: rgba(232, 213, 183, 0.17); --bd4: rgba(232, 213, 183, 0.3); --bdf: rgba(232, 213, 183, 0.055); --hov: rgba(232, 213, 183, 0.05); --track: rgba(232, 213, 183, 0.07); --glass: rgba(20, 17, 13, 0.85); --panel: rgba(23, 20, 16, 0.96); --gold: #D8B062; --gold-hover: #C39A47; --gold-soft: rgba(216, 176, 98, 0.16); --gold-line: rgba(216, 176, 98, 0.4); --on-gold: #1A170F; --water: #5FB8DC; --water-soft: rgba(95, 184, 220, 0.16); --ok: #6FBF87; --ok-soft: rgba(111, 191, 135, 0.14); --warn: #E0A12E; --warn-soft: rgba(224, 161, 46, 0.16); --crit: #D96A5B; --crit-soft: rgba(217, 106, 91, 0.16); --info: #7FA6C4; --info-soft: rgba(127, 166, 196, 0.16); --pshadow: 0 18px 50px rgba(0, 0, 0, 0.5); --chart-grid: rgba(232, 213, 183, 0.08); --chart-tick: #8A8171; --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; color-scheme: dark; } :root[data-ips-theme="light"] { --bg: #F6F5F3; --surface: #FFFFFF; --surface2: #F3F1EE; --surface3: #FBFAF8; --surface4: #FAF9F6; --input: #FFFFFF; --txt: #25282A; --txt2: #3E4144; --txt3: #4D4D4D; --mut: #6B6B68; --mut2: #808080; --mut3: #8E8C88; --faint: #A8A6A4; --bd: #E7E5E0; --bd2: #DAD8D2; --bd3: #CFCDCA; --bd4: #B5B3AF; --bdf: #EFEEE9; --hov: rgba(37, 40, 42, 0.045); --track: rgba(37, 40, 42, 0.09); --glass: rgba(255, 255, 255, 0.9); --panel: rgba(255, 255, 255, 0.97); --gold: #A07D33; --gold-hover: #7C5F25; --gold-soft: rgba(160, 125, 51, 0.12); --gold-line: rgba(160, 125, 51, 0.45); --on-gold: #FFFFFF; --water: #2C7FA6; --water-soft: rgba(44, 127, 166, 0.12); --ok: #3F9D5A; --ok-soft: rgba(63, 157, 90, 0.12); --warn: #B07A12; --warn-soft: rgba(224, 161, 46, 0.14); --crit: #C7493B; --crit-soft: rgba(199, 73, 59, 0.12); --info: #3E6E8E; --info-soft: rgba(62, 110, 142, 0.12); --pshadow: 0 18px 50px rgba(37, 40, 42, 0.16); --chart-grid: rgba(37, 40, 42, 0.08); --chart-tick: #808080; color-scheme: light; } /* Dark brand panel that stays dark in both themes (login left side). */ [data-dark-scope] { --bg: #131110; --surface: #1B1815; --txt: #EDE8DF; --mut: #A89E8C; --mut2: #8A8171; --faint: #6E6759; --bd: rgba(232, 213, 183, 0.09); --bd2: rgba(232, 213, 183, 0.14); --gold: #D8B062; --water: #5FB8DC; color-scheme: dark; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--txt); font-family: var(--font); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } * { box-sizing: border-box; } a { color: var(--gold); text-decoration: none; } a:hover { color: var(--gold-hover); } ::selection { background: rgba(216, 176, 98, 0.35); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(150, 140, 120, 0.25); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; } @keyframes ipsdash { to { stroke-dashoffset: -20; } } @keyframes ipspulse { 0% { transform: scale(0.5); opacity: 0.85; } 100% { transform: scale(2.4); opacity: 0; } } @keyframes ipsblink { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @keyframes ipsfade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes ipsspin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01s !important; animation-iteration-count: 1 !important; transition-duration: 0.01s !important; } }