/* ============================================================ Semper Progression – design token overrides for Metronic v9 Forces permanent dark theme with the Semper palette. ============================================================ */ /* Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Manrope:wght@400;500;600&family=Work+Sans:wght@400;500;600&display=swap'); /* ── Semper palette tokens ─────────────────────────────────── */ :root, :root.dark, .dark { /* Base surfaces */ --background: #1F2436; --foreground: #F3F3F5; --card: rgba(42, 48, 72, 0.9); --card-foreground: #F3F3F5; --popover: rgba(42, 48, 72, 0.9); --popover-foreground: #F3F3F5; --border: #2e3450; --input: #2e3450; --ring: #793CB8; /* Brand – primary = Magenta (CTA, negative trend) */ --primary: #B2316E; --primary-foreground: #F3F3F5; /* Secondary = Purple */ --secondary: #793CB8; --secondary-foreground: #F3F3F5; /* Muted surfaces */ --muted: #2A3048; --muted-foreground: rgba(243,243,245,0.45); /* Accent surface (subtle hover / active) */ --accent: #2e3450; --accent-foreground: #F3F3F5; /* Destructive */ --destructive: #B2316E; --destructive-foreground: #F3F3F5; /* Mono */ --mono: #F3F3F5; --mono-foreground: #1F2436; /* Radius */ --radius: 0.5rem; /* Semper semantic palette – available as CSS vars throughout */ --sp-magenta: #B2316E; --sp-pink: #A02B93; --sp-dpurple: #5C2C91; --sp-purple: #793CB8; --sp-lpurple: #A779D9; --sp-blue: #0F9ED5; --sp-green-hi: #12D68E; --sp-green: #1DB87A; --sp-green-lo: #2D7A5A; } /* ── Force dark mode on immediately ─────────────────── */ html { color-scheme: dark; } /* ── Typography ─────────────────────────────────────────────── */ :root { --font-display: 'Funnel Display', sans-serif; --font-body: 'Manrope', sans-serif; --font-nav: 'Work Sans', sans-serif; --font-mono: 'Geist Mono', monospace; } body { font-family: var(--font-body) !important; background-color: var(--background) !important; color: var(--foreground) !important; } /* Page/section headings */ h1, h2, h3, h4, h5, h6, .kt-menu-heading { font-family: var(--font-display) !important; } /* Navigation items, buttons, badges, tabs */ .kt-menu-title, .kt-btn, button, .badge, [class*="kt-badge"] { font-family: var(--font-nav) !important; } /* All numeric stat values */ .stat-value, .kpi-val, [data-stat-value], .font-mono, code, pre { font-family: var(--font-mono) !important; } /* ── Sidebar ─────────────────────────────────────────────────── */ .kt-sidebar { background-color: var(--card) !important; border-right-color: var(--border) !important; } .kt-sidebar-header { border-bottom: 1px solid var(--border); } /* Sidebar active menu item — use purple accent */ .kt-menu-item-active > .kt-menu-link .kt-menu-title, .kt-menu-link:hover .kt-menu-title { color: var(--sp-lpurple) !important; } .kt-menu-item-active > .kt-menu-link .kt-menu-bullet::before { background-color: var(--sp-purple) !important; } /* ── Cards / panels ──────────────────────────────────────────── */ .kt-card, [class*="bg-card"], [class*="bg-popover"] { background-color: var(--card) !important; border-color: var(--border) !important; } /* ── Buttons ─────────────────────────────────────────────────── */ /* Primary button = Magenta */ .kt-btn-primary, [class*="kt-btn"][class*="primary"] { background-color: var(--sp-magenta) !important; border-color: var(--sp-magenta) !important; color: #fff !important; } .kt-btn-primary:hover { background-color: #9a2860 !important; } /* Secondary button = Purple */ .kt-btn-secondary, [class*="kt-btn"][class*="secondary"] { background-color: var(--sp-purple) !important; border-color: var(--sp-purple) !important; color: #fff !important; } /* ── Status / KPI colour helpers ─────────────────────────────── */ .sp-exceeded { color: var(--sp-green-hi); } .sp-goal { color: var(--sp-green); } .sp-good { color: var(--sp-blue); } .sp-progress { color: var(--sp-green-lo); } .sp-pending { color: var(--sp-lpurple); } .sp-behind { color: var(--sp-magenta); } .sp-badge-exceeded { background: rgba(18,214,142,.15); color: var(--sp-green-hi); } .sp-badge-goal { background: rgba(29,184,122,.15); color: var(--sp-green); } .sp-badge-good { background: rgba(15,158,213,.15); color: var(--sp-blue); } .sp-badge-progress { background: rgba(45,122,90,.25); color: var(--sp-green-lo); } .sp-badge-pending { background: rgba(167,121,217,.15); color: var(--sp-lpurple); } .sp-badge-behind { background: rgba(178,49,110,.15); color: var(--sp-magenta); } /* ── Demo status badges ──────────────────────────────────────── */ .demo-status-queued { background: rgba(167,121,217,.15); color: var(--sp-lpurple); } .demo-status-processing { background: rgba(15,158,213,.15); color: var(--sp-blue); } .demo-status-completed { background: rgba(29,184,122,.15); color: var(--sp-green); } .demo-status-failed { background: rgba(178,49,110,.15); color: var(--sp-magenta); } /* Match type badges */ .match-official { background: rgba(15,158,213,.15); color: var(--sp-blue); } .match-faceit { background: rgba(167,121,217,.15); color: var(--sp-lpurple); } .match-pracc { background: rgba(92,44,145,.25); color: var(--sp-lpurple); } /* ── DataTables ───────────────────────────────────────────────── */ table.dataTable { border-color: var(--border) !important; } table.dataTable thead th, table.dataTable tbody td { border-color: var(--border) !important; color: var(--foreground) !important; } table.dataTable tbody tr:hover { background-color: var(--accent) !important; } /* ── ApexCharts dark defaults ────────────────────────────────── */ .apexcharts-canvas, .apexcharts-tooltip { background: var(--card) !important; color: var(--foreground) !important; } .apexcharts-text, .apexcharts-xaxis-label, .apexcharts-yaxis-label { fill: var(--foreground) !important; font-family: var(--font-mono) !important; font-size: 11px !important; } .apexcharts-gridline { stroke: var(--border) !important; } .apexcharts-tooltip { border: 1px solid var(--border) !important; } /* ── Upload progress steps ───────────────────────────────────── */ .upload-step-done { color: var(--sp-green); } .upload-step-active { color: var(--sp-blue); } .upload-step-pending { color: var(--muted-foreground); } /* ── Scrollbar (webkit) ──────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--background); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--sp-purple); } /* ── Section padding (35px) ──────────────────────────────────── */ .sp-section { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 35px; } /* ── Layout offsets — compiled here so Vite/JIT is not required ─ */ /* Sidebar is 205px wide; header is 60px tall */ @media (min-width: 1024px) { .lg\:ps-\[260px\] { padding-inline-start: 205px; } .lg\:start-\[260px\] { inset-inline-start: 205px; } } .pt-\[60px\] { padding-top: 60px; } @media (min-width: 768px) { .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* ── Breeze / form component base styles ─────────────────────── */ /* These replace Tailwind @forms-plugin defaults with Semper dark */ .sp-form-input { width: 100%; background: var(--background); border: 1px solid var(--border); border-radius: 8px; color: var(--foreground); font-family: 'Manrope', sans-serif; font-size: 14px; padding: 8px 12px; outline: none; transition: border-color .15s; } .sp-form-input:focus { border-color: var(--sp-purple); } .sp-form-input::placeholder { color: rgba(243,243,245,0.35); } .sp-form-input:disabled { opacity: .5; cursor: not-allowed; } .sp-form-label { display: block; font-family: 'Work Sans', sans-serif; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: rgba(243,243,245,0.6); margin-bottom: 6px; } /* ── Button interaction states (hover / active / focus) ─────────── */ .sp-btn-primary:hover { opacity: 1; background: #c93a7e; box-shadow: 0 0 0 3px rgba(178,49,110,.3); } .sp-btn-primary:active { transform: scale(.97); background: #9e2b60; box-shadow: none; } .sp-btn-primary:focus-visible{ outline: 2px solid var(--sp-magenta); outline-offset: 2px; } .sp-btn-secondary:hover { border-color: var(--sp-lpurple); color: var(--sp-lpurple); background: rgba(155,127,212,.08); } .sp-btn-secondary:active { transform: scale(.97); background: rgba(155,127,212,.15); } .sp-btn-secondary:focus-visible{ outline: 2px solid var(--sp-lpurple); outline-offset: 2px; } .sp-btn-danger:hover { background: rgba(178,49,110,.3); border-color: var(--sp-magenta); box-shadow: 0 0 0 3px rgba(178,49,110,.2); } .sp-btn-danger:active { transform: scale(.97); box-shadow: none; } .sp-btn-danger:focus-visible{ outline: 2px solid var(--sp-magenta); outline-offset: 2px; } /* Shared transition for all sp-btn-* */ .sp-btn-primary, .sp-btn-secondary, .sp-btn-danger { transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s, opacity .15s; } .sp-btn-primary { display: inline-flex; align-items: center; padding: 8px 20px; border-radius: 8px; border: none; background: var(--sp-magenta); color: #fff; font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity .15s; } .sp-btn-primary:hover { opacity: .88; } .sp-btn-primary:disabled { opacity: .4; cursor: not-allowed; } .sp-btn-secondary { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: rgba(243,243,245,0.7); font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color .15s, color .15s; } .sp-btn-secondary:hover { border-color: var(--foreground); color: var(--foreground); } .sp-btn-danger { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 8px; border: 1px solid rgba(178,49,110,.4); background: rgba(178,49,110,.15); color: var(--sp-magenta); font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; } .sp-btn-danger:hover { background: rgba(178,49,110,.25); border-color: var(--sp-magenta); } .sp-form-error { font-family: 'Manrope', sans-serif; font-size: 12px; color: var(--sp-magenta); margin-top: 4px; } /* ── Delete-account confirm overlay (profile page) ─────────────── */ #delete-confirm-overlay { display: none; position: fixed; inset: 0; z-index: 50; background: rgba(15,17,26,.8); backdrop-filter: blur(4px); align-items: center; justify-content: center; } #delete-confirm-overlay.open { display: flex; } /* ── KPI star indicator ──────────────────────────────────────────── */ @keyframes sp-star-twinkle { 0% { transform: scale(1) rotate(0deg); filter: brightness(1); } 20% { transform: scale(1.35) rotate(20deg); filter: brightness(1.3); } 40% { transform: scale(0.9) rotate(-10deg);filter: brightness(0.9); } 60% { transform: scale(1.2) rotate(15deg); filter: brightness(1.2); } 80% { transform: scale(0.95) rotate(-5deg); filter: brightness(1); } 100% { transform: scale(1) rotate(0deg); filter: brightness(1); } } .sp-star-anim { display: inline-block; animation: sp-star-twinkle 2.4s ease-in-out infinite; color: #D63384 !important; }