/* KOMAS Website — Custom styles on top of Tailwind */ /* ════════════════════════════════════════════════════════════════ THEME TOKENS Solid colors are stored as "R G B" triplets so Tailwind utilities (rgb(var(--token) / )) keep working with /opacity modifiers. Translucent tokens are stored as full color values. Switch themes by setting data-theme on . ════════════════════════════════════════════════════════════════ */ :root, [data-theme="gold-dark"] { color-scheme: dark; --w-bg: 10 10 12; --w-bg2: 21 20 26; --w-bg3: 28 26 34; --w-accent: 212 175 106; --w-green: 95 208 154; --w-red: 240 121 106; --w-yellow: 255 214 10; --w-hint: 140 134 120; --w-link: 122 167 255; --w-text: 245 243 238; --w-border: rgba(212,175,106,.14); --w-accent-d: rgba(212,175,106,.14); --w-overlay: rgba(255,255,255,.04); --w-overlay2: rgba(255,255,255,.08); --w-body-glow: rgba(212,175,106,.10); --w-bg-solid: #0a0a0c; --w-scroll: rgba(212,175,106,.22); --w-scroll-h: rgba(212,175,106,.38); } [data-theme="pearl"] { color-scheme: light; --w-bg: 247 246 243; --w-bg2: 255 255 255; --w-bg3: 240 238 233; --w-accent: 176 132 46; --w-green: 22 158 106; --w-red: 212 74 60; --w-yellow: 197 145 9; --w-hint: 124 116 102; --w-link: 44 105 226; --w-text: 26 24 20; --w-border: rgba(26,24,20,.12); --w-accent-d: rgba(176,132,46,.16); --w-overlay: rgba(26,24,20,.045); --w-overlay2: rgba(26,24,20,.075); --w-body-glow: rgba(176,132,46,.12); --w-bg-solid: #f7f6f3; --w-scroll: rgba(26,24,20,.18); --w-scroll-h: rgba(26,24,20,.30); } [data-theme="midnight"] { color-scheme: dark; --w-bg: 11 18 32; --w-bg2: 17 26 46; --w-bg3: 24 35 60; --w-accent: 76 201 232; --w-green: 64 211 168; --w-red: 240 113 103; --w-yellow: 245 200 70; --w-hint: 132 148 172; --w-link: 130 175 255; --w-text: 230 237 246; --w-border: rgba(120,170,230,.16); --w-accent-d: rgba(76,201,232,.14); --w-overlay: rgba(255,255,255,.04); --w-overlay2: rgba(255,255,255,.08); --w-body-glow: rgba(76,201,232,.14); --w-bg-solid: #0b1220; --w-scroll: rgba(120,170,230,.24); --w-scroll-h: rgba(120,170,230,.40); } [data-theme="carbon"] { color-scheme: dark; --w-bg: 12 14 12; --w-bg2: 20 23 20; --w-bg3: 28 32 28; --w-accent: 57 255 136; --w-green: 57 255 136; --w-red: 255 99 99; --w-yellow: 214 255 120; --w-hint: 128 142 128; --w-link: 120 220 255; --w-text: 232 240 232; --w-border: rgba(57,255,136,.15); --w-accent-d: rgba(57,255,136,.12); --w-overlay: rgba(255,255,255,.035); --w-overlay2: rgba(255,255,255,.07); --w-body-glow: rgba(57,255,136,.10); --w-bg-solid: #0c0e0c; --w-scroll: rgba(57,255,136,.22); --w-scroll-h: rgba(57,255,136,.38); } /* Base surface — themed. html paints first to avoid theme-flash. */ html { background: var(--w-bg-solid); } body { background: radial-gradient(120% 60% at 50% -8%, var(--w-body-glow), transparent 55%), var(--w-bg-solid); background-attachment: fixed; -webkit-font-smoothing: antialiased; transition: background-color .25s ease; } /* Smooth scroll */ html { scroll-behavior: smooth; } /* Safe area for mobile bottom nav */ .safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); } /* Custom scrollbar (themed) */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--w-scroll); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--w-scroll-h); } /* Alpine.js cloak */ [x-cloak] { display: none !important; } /* Public website hero */ .site-hero-grid { background: linear-gradient(rgba(127,127,127,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(127,127,127,.05) 1px, transparent 1px), radial-gradient(circle at 50% 0%, var(--w-body-glow), transparent 42%); background-size: 44px 44px, 44px 44px, auto; } .landing-terminal-panel { background: rgb(var(--w-bg2) / .88); border: 1px solid var(--w-border); border-radius: 12px; box-shadow: 0 22px 60px rgba(0,0,0,.34); overflow: hidden; } .landing-stat { min-height: 78px; border: 1px solid var(--w-border); border-radius: 8px; background: var(--w-overlay); padding: 12px; } .landing-stat span, .landing-signal-row span, .landing-step p { display: block; color: rgb(var(--w-hint)); font-size: 11px; } .landing-stat strong { display: block; margin-top: 8px; font-size: 20px; line-height: 1; } .landing-signal-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; border: 1px solid var(--w-border); border-radius: 8px; background: var(--w-overlay); padding: 11px 12px; font-size: 12px; } .landing-signal-row strong { display: block; font-size: 13px; } .landing-side { border-radius: 6px; padding: 4px 6px; font-size: 10px !important; font-weight: 700; } .landing-side.long { background: rgb(var(--w-green) / .12); color: rgb(var(--w-green)) !important; } .landing-side.short { background: rgb(var(--w-red) / .12); color: rgb(var(--w-red)) !important; } .landing-chart { position: relative; overflow: hidden; } .landing-chart::before { content: ""; position: absolute; inset: 18px 12px; background: repeating-linear-gradient(to right, var(--w-overlay) 0 1px, transparent 1px 46px); } .landing-chart-line, .landing-chart-line.alt { position: absolute; left: 18px; right: 18px; height: 3px; border-radius: 999px; transform-origin: left center; } .landing-chart-line { top: 54%; background: linear-gradient(90deg, transparent, rgb(var(--w-green)), rgb(var(--w-accent))); transform: skewY(-8deg); } .landing-chart-line.alt { top: 36%; background: linear-gradient(90deg, transparent, rgb(var(--w-red) / .8), rgb(var(--w-text) / .45)); transform: skewY(10deg); opacity: .65; } /* Glassmorphism card variant */ .glass-card { background: rgb(var(--w-bg2) / .6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--w-border); } /* P&L colors */ .pnl-positive { color: rgb(var(--w-green)); } .pnl-negative { color: rgb(var(--w-red)); } /* Telegram widget override */ .tgme_widget_login iframe { color-scheme: auto; } /* Fade-in animation */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeInUp 0.4s ease-out both; } /* Line clamp utility */ .line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Loading spinner */ .spinner { width: 20px; height: 20px; border: 2px solid var(--w-accent-d); border-top-color: rgb(var(--w-accent)); border-radius: 50%; animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Scroll reveal animation — starts visible, animates on scroll */ .reveal { opacity: 1; transform: translateY(0); } .reveal.animate-ready { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.animate-ready.visible { opacity: 1; transform: translateY(0); } /* Glow effect for CTA buttons */ .glow-accent { box-shadow: 0 0 20px rgb(var(--w-accent) / .3), 0 0 60px rgb(var(--w-accent) / .1); } .glow-accent:hover { box-shadow: 0 0 30px rgb(var(--w-accent) / .4), 0 0 80px rgb(var(--w-accent) / .15); } /* Gradient text */ .text-gradient { background: linear-gradient(135deg, rgb(var(--w-accent)) 0%, rgb(var(--w-yellow)) 50%, rgb(var(--w-accent)) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Toast notification */ .toast { position: fixed; bottom: 24px; right: 24px; z-index: 9999; padding: 12px 20px; border-radius: 12px; font-size: 14px; color: rgb(var(--w-text)); background: rgb(var(--w-bg2)); border: 1px solid var(--w-border); backdrop-filter: blur(20px); animation: fadeInUp 0.3s ease-out; } .toast-success { background: rgb(var(--w-green) / .15); border-color: rgb(var(--w-green) / .3); } .toast-error { background: rgb(var(--w-red) / .15); border-color: rgb(var(--w-red) / .3); } .toast-info { background: rgb(var(--w-link) / .15); border-color: rgb(var(--w-link) / .3); } /* Modal overlay */ .modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 16px; } .modal-card { background: rgb(var(--w-bg2)); border: 1px solid var(--w-border); border-radius: 16px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; padding: 24px; animation: fadeInUp 0.2s ease-out; } /* Toggle switch */ .toggle-switch { width: 44px; height: 24px; border-radius: 12px; background: var(--w-overlay2); position: relative; cursor: pointer; transition: background 0.2s; } .toggle-switch.active { background: rgb(var(--w-green)); } .toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } .toggle-switch.active::after { transform: translateX(20px); } /* Range slider */ input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: var(--w-overlay2); border-radius: 3px; outline: none; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: rgb(var(--w-accent)); cursor: pointer; box-shadow: 0 0 6px rgb(var(--w-accent) / .4); } /* Form inputs (themed) */ .form-input { background: var(--w-overlay); border: 1px solid rgb(var(--w-accent) / .25); border-radius: 10px; padding: 10px 14px; color: rgb(var(--w-text)); font-size: 14px; width: 100%; outline: none; transition: border-color 0.2s; } .form-input:focus { border-color: rgb(var(--w-accent)); } .form-input::placeholder { color: rgb(var(--w-hint)); } .form-select { background: var(--w-overlay); border: 1px solid rgb(var(--w-accent) / .25); border-radius: 10px; padding: 10px 14px; color: rgb(var(--w-text)); font-size: 14px; width: 100%; outline: none; } .form-select option { background: rgb(var(--w-bg2)); color: rgb(var(--w-text)); } /* Theme switcher swatches */ .theme-swatch { width: 22px; height: 22px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; transition: transform .12s ease, border-color .12s ease; } .theme-swatch:hover { transform: scale(1.12); } .theme-swatch.is-active { border-color: rgb(var(--w-text) / .8); }