/* ========================================================= KiKK — Midnight theme (shared by every page) Appearance only. No page logic depends on this file. ========================================================= */ :root { color-scheme: dark; /* Colours (taken from the KiKK logo) */ --k-bg: #0C1420; /* deep navy page background */ --k-bg-2: #0F1A28; /* slightly raised background */ --k-surface: #142030; /* cards */ --k-surface-2: #1A2838; /* inputs, hover */ --k-line: rgba(230, 236, 242, 0.08); --k-line-strong: rgba(230, 236, 242, 0.16); --k-text: #E6ECF2; /* soft off-white, not pure white */ --k-muted: #9AA8B8; --k-faint: #7C8A9C; --k-emerald: #3DBE7E; /* main action colour */ --k-emerald-hover: #52CC8F; --k-on-emerald: #06210F; /* text on emerald buttons */ --k-forest: #143826; /* logo's deep green */ --k-gold: #D9AE4A; /* logo's antique gold */ --k-on-gold: #2A1E05; --k-danger: #F08A7E; /* Shape */ --k-radius-s: 12px; --k-radius: 18px; --k-radius-l: 24px; --k-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.65); /* Type */ --k-font: 'Plus Jakarta Sans', 'Noto Sans Oriya', 'Noto Sans Devanagari', system-ui, -apple-system, sans-serif; } /* ---------- Base ---------- */ html { -webkit-text-size-adjust: 100%; } body.k-body { margin: 0; background: var(--k-bg); color: var(--k-text); font-family: var(--k-font); line-height: 1.5; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overflow-x: hidden; } /* No double-tap zoom delay on buttons */ .k-body button, .k-body a { touch-action: manipulation; } /* Visible focus for keyboard users */ .k-body :focus-visible { outline: 2px solid var(--k-gold); outline-offset: 3px; border-radius: 10px; } /* ---------- Brand ---------- */ .k-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--k-text); text-decoration: none; font-weight: 800; font-size: 1.375rem; letter-spacing: 0.02em; min-height: 44px; } .k-brand img { width: 40px; height: 40px; object-fit: contain; } .k-brand__word { white-space: nowrap; } .k-brand b { color: var(--k-gold); font-weight: inherit; } /* ---------- Text ---------- */ .k-title { margin: 0; font-size: clamp(1.75rem, 6vw, 2.75rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; color: var(--k-text); } .k-subtitle { margin: 0; font-size: clamp(0.95rem, 3.6vw, 1.125rem); color: var(--k-muted); max-width: 42ch; } /* ---------- Cards ---------- */ .k-card { background: var(--k-surface); border: 1px solid var(--k-line); border-radius: var(--k-radius-l); box-shadow: var(--k-shadow); } /* ---------- Buttons ---------- */ .k-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 14px; border: 1px solid transparent; font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1; cursor: pointer; text-decoration: none; transition: background-color .2s ease, border-color .2s ease, transform .1s ease; } .k-btn:active { transform: scale(0.98); } .k-btn svg { width: 20px; height: 20px; } .k-btn-primary { background: var(--k-emerald); color: var(--k-on-emerald); } .k-btn-primary:hover { background: var(--k-emerald-hover); } .k-btn-ghost { background: transparent; color: var(--k-text); border-color: var(--k-line-strong); } .k-btn-ghost:hover { background: var(--k-surface-2); } .k-btn-danger-ghost { background: transparent; color: var(--k-muted); border-color: var(--k-line-strong); } .k-btn-danger-ghost:hover { color: var(--k-danger); border-color: rgba(240, 138, 126, .4); } .k-btn-block { width: 100%; } .k-btn-lg { min-height: 58px; font-size: 1.0625rem; } .k-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--k-line); background: var(--k-bg-2); color: var(--k-muted); cursor: pointer; transition: color .2s ease, background-color .2s ease; } .k-icon-btn:hover { color: var(--k-text); background: var(--k-surface-2); } .k-icon-btn svg { width: 20px; height: 20px; } /* ---------- Forms ---------- */ .k-label { display: block; margin: 0 0 8px 2px; font-size: 0.9rem; font-weight: 600; color: var(--k-muted); } .k-input, .premium-input { width: 100%; box-sizing: border-box; min-height: 54px; padding: 14px 16px; background: var(--k-bg-2); border: 1.5px solid var(--k-line-strong); border-radius: 14px; color: var(--k-text); font-family: inherit; font-size: 1rem; /* 16px stops phones zooming in on tap */ outline: none; transition: border-color .2s ease, background-color .2s ease; } .k-input::placeholder, .premium-input::placeholder { color: var(--k-faint); } .k-input:focus, .premium-input:focus { border-color: var(--k-emerald); background: var(--k-surface); } .k-input--pin { text-align: center; font-size: 1.5rem; letter-spacing: 0.5em; font-variant-numeric: tabular-nums; } select.k-input option, select.premium-input option { background: var(--k-surface); color: var(--k-text); } .k-body input[type="checkbox"] { accent-color: var(--k-emerald); } /* ---------- Overlays / sheets ---------- */ .k-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(6, 10, 16, 0.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .k-overlay.hidden { display: none; } .k-sheet { width: 100%; max-width: 420px; max-height: calc(100dvh - 32px); overflow-y: auto; background: var(--k-surface); border: 1px solid var(--k-line); border-radius: var(--k-radius-l); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); } .k-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px 18px 22px; border-bottom: 1px solid var(--k-line); } .k-sheet__title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.2rem; font-weight: 800; color: var(--k-text); } .k-sheet__title svg { width: 20px; height: 20px; color: var(--k-gold); } .k-sheet__body { padding: 22px; } /* ---------- Divider ---------- */ .k-divider { display: flex; align-items: center; gap: 14px; color: var(--k-faint); font-size: 0.85rem; } .k-divider::before, .k-divider::after { content: ""; flex: 1; height: 1px; background: var(--k-line); } /* ========================================================= LIQUID BUTTONS Glossy, jelly-like buttons with a light sheen and a springy press. Add k-btn-liquid next to k-btn k-btn-primary. ========================================================= */ .k-btn { position: relative; isolation: isolate; overflow: hidden; } .k-btn-liquid { background: linear-gradient(180deg, #6BDDA4 0%, #3DBE7E 48%, #2A9A63 100%); color: var(--k-on-emerald); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), /* top highlight */ inset 0 -3px 6px rgba(0, 60, 30, 0.35), /* bottom depth */ 0 10px 24px -8px rgba(61, 190, 126, 0.55); /* soft glow below */ transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease, filter .3s ease; } /* glossy "bubble" reflection on the top half */ .k-btn-liquid::before { content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; top: 3px; height: 46%; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0)); pointer-events: none; } /* light sweep that glides across every few seconds */ .k-btn-liquid::after { content: ""; position: absolute; z-index: -1; top: -20%; bottom: -20%; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: skewX(-18deg); animation: k-sheen 4.5s ease-in-out infinite; pointer-events: none; } @keyframes k-sheen { 0%, 60% { left: -60%; } 100% { left: 130%; } } .k-btn-liquid:hover { background: linear-gradient(180deg, #6BDDA4 0%, #3DBE7E 48%, #2A9A63 100%); filter: brightness(1.07); } .k-btn-liquid:active { transform: scale(0.95, 0.92); /* jelly squish */ transition-duration: .12s; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 4px rgba(0, 60, 30, 0.4), 0 4px 12px -6px rgba(61, 190, 126, 0.5); } /* Glass version of the ghost button */ .k-btn-ghost, .k-btn-danger-ghost { background: rgba(230, 236, 242, 0.04); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), background-color .2s ease, border-color .2s ease, color .2s ease; } .k-btn-ghost:active, .k-btn-danger-ghost:active { transform: scale(0.96, 0.94); transition-duration: .12s; } /* ========================================================= GRADIENT EDGES A thin emerald-to-gold border that slowly travels around a card. Add k-edge (or k-edge k-edge--gold) to a card. ========================================================= */ @property --k-angle { syntax: ""; initial-value: 0deg; inherits: false; } .k-edge { position: relative; } .k-edge::before { content: ""; position: absolute; inset: 0; padding: 1.5px; /* edge thickness */ border-radius: inherit; background: conic-gradient(from var(--k-angle), rgba(61, 190, 126, 0.0) 0deg, rgba(61, 190, 126, 0.85) 70deg, rgba(217, 174, 74, 0.9) 140deg, rgba(217, 174, 74, 0.0) 210deg, rgba(61, 190, 126, 0.0) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: k-edge-spin 7s linear infinite; pointer-events: none; z-index: 1; } .k-edge--gold::before { background: conic-gradient(from var(--k-angle), rgba(217, 174, 74, 0.0) 0deg, rgba(217, 174, 74, 0.9) 70deg, rgba(61, 190, 126, 0.8) 140deg, rgba(61, 190, 126, 0.0) 210deg, rgba(217, 174, 74, 0.0) 360deg); animation-delay: -3.5s; } @keyframes k-edge-spin { to { --k-angle: 360deg; } } /* ========================================================= 3D TRANSITIONS ========================================================= */ /* Content rising up and tilting into place */ @keyframes k-rise-3d { from { opacity: 0; transform: perspective(900px) translateY(40px) rotateX(28deg) scale(.96); } to { opacity: 1; transform: perspective(900px) translateY(0) rotateX(0) scale(1); } } /* Pop-up boxes (login, registration) swing open in 3D */ .k-overlay:not(.hidden) { animation: k-fade-in .3s ease-out both; } .k-overlay:not(.hidden) > .k-sheet { transform-origin: 50% 0%; animation: k-sheet-in .6s cubic-bezier(.2, .9, .25, 1.05) both; } @keyframes k-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes k-sheet-in { from { opacity: 0; transform: perspective(1200px) translateY(40px) rotateX(-22deg) scale(.94); } to { opacity: 1; transform: perspective(1200px) translateY(0) rotateX(0) scale(1); } } /* Cards tilt toward your finger / mouse (handled by kikk-effects.js) */ [data-tilt] { transform: perspective(900px) rotateX(var(--k-tilt-x, 0deg)) rotateY(var(--k-tilt-y, 0deg)) scale(var(--k-tilt-s, 1)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); will-change: transform; } [data-tilt].is-tilting { transition-duration: .12s; } /* Moving between KiKK pages: the old page turns away, the new one turns in. (Works in Chrome / Android when both pages use this stylesheet.) */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: k-page-out .45s cubic-bezier(.5, 0, .75, 0) both; } ::view-transition-new(root) { animation: k-page-in .55s cubic-bezier(.2, .8, .2, 1) .1s both; } @keyframes k-page-out { to { opacity: 0; transform: perspective(1400px) translateZ(-180px) rotateY(-14deg); } } @keyframes k-page-in { from { opacity: 0; transform: perspective(1400px) translateZ(-180px) rotateY(14deg); } } /* ========================================================= PAGE BRIDGE The other KiKK pages are built with Tailwind colour classes (slate / teal / indigo). These rules repaint those classes in the Midnight palette, so every page matches without rewriting it. They are skipped when a student picks the "Light" theme. ========================================================= */ body.k-body:not(.theme-light) .bg-slate-950, body.k-body:not(.theme-light) .hover\:bg-slate-950:hover { background-color: #0C1420; } body.k-body:not(.theme-light) .bg-slate-950\/5, body.k-body:not(.theme-light) .hover\:bg-slate-950\/5:hover { background-color: rgba(12, 20, 32, 0.05); } body.k-body:not(.theme-light) .bg-slate-950\/10, body.k-body:not(.theme-light) .hover\:bg-slate-950\/10:hover { background-color: rgba(12, 20, 32, 0.1); } body.k-body:not(.theme-light) .bg-slate-950\/20, body.k-body:not(.theme-light) .hover\:bg-slate-950\/20:hover { background-color: rgba(12, 20, 32, 0.2); } body.k-body:not(.theme-light) .bg-slate-950\/30, body.k-body:not(.theme-light) .hover\:bg-slate-950\/30:hover { background-color: rgba(12, 20, 32, 0.3); } body.k-body:not(.theme-light) .bg-slate-950\/40, body.k-body:not(.theme-light) .hover\:bg-slate-950\/40:hover { background-color: rgba(12, 20, 32, 0.4); } body.k-body:not(.theme-light) .bg-slate-950\/50, body.k-body:not(.theme-light) .hover\:bg-slate-950\/50:hover { background-color: rgba(12, 20, 32, 0.5); } body.k-body:not(.theme-light) .bg-slate-950\/60, body.k-body:not(.theme-light) .hover\:bg-slate-950\/60:hover { background-color: rgba(12, 20, 32, 0.6); } body.k-body:not(.theme-light) .bg-slate-950\/70, body.k-body:not(.theme-light) .hover\:bg-slate-950\/70:hover { background-color: rgba(12, 20, 32, 0.7); } body.k-body:not(.theme-light) .bg-slate-950\/80, body.k-body:not(.theme-light) .hover\:bg-slate-950\/80:hover { background-color: rgba(12, 20, 32, 0.8); } body.k-body:not(.theme-light) .bg-slate-950\/90, body.k-body:not(.theme-light) .hover\:bg-slate-950\/90:hover { background-color: rgba(12, 20, 32, 0.9); } body.k-body:not(.theme-light) .bg-slate-950\/95, body.k-body:not(.theme-light) .hover\:bg-slate-950\/95:hover { background-color: rgba(12, 20, 32, 0.95); } body.k-body:not(.theme-light) .bg-slate-900, body.k-body:not(.theme-light) .hover\:bg-slate-900:hover { background-color: #142030; } body.k-body:not(.theme-light) .bg-slate-900\/5, body.k-body:not(.theme-light) .hover\:bg-slate-900\/5:hover { background-color: rgba(20, 32, 48, 0.05); } body.k-body:not(.theme-light) .bg-slate-900\/10, body.k-body:not(.theme-light) .hover\:bg-slate-900\/10:hover { background-color: rgba(20, 32, 48, 0.1); } body.k-body:not(.theme-light) .bg-slate-900\/20, body.k-body:not(.theme-light) .hover\:bg-slate-900\/20:hover { background-color: rgba(20, 32, 48, 0.2); } body.k-body:not(.theme-light) .bg-slate-900\/30, body.k-body:not(.theme-light) .hover\:bg-slate-900\/30:hover { background-color: rgba(20, 32, 48, 0.3); } body.k-body:not(.theme-light) .bg-slate-900\/40, body.k-body:not(.theme-light) .hover\:bg-slate-900\/40:hover { background-color: rgba(20, 32, 48, 0.4); } body.k-body:not(.theme-light) .bg-slate-900\/50, body.k-body:not(.theme-light) .hover\:bg-slate-900\/50:hover { background-color: rgba(20, 32, 48, 0.5); } body.k-body:not(.theme-light) .bg-slate-900\/60, body.k-body:not(.theme-light) .hover\:bg-slate-900\/60:hover { background-color: rgba(20, 32, 48, 0.6); } body.k-body:not(.theme-light) .bg-slate-900\/70, body.k-body:not(.theme-light) .hover\:bg-slate-900\/70:hover { background-color: rgba(20, 32, 48, 0.7); } body.k-body:not(.theme-light) .bg-slate-900\/80, body.k-body:not(.theme-light) .hover\:bg-slate-900\/80:hover { background-color: rgba(20, 32, 48, 0.8); } body.k-body:not(.theme-light) .bg-slate-900\/90, body.k-body:not(.theme-light) .hover\:bg-slate-900\/90:hover { background-color: rgba(20, 32, 48, 0.9); } body.k-body:not(.theme-light) .bg-slate-900\/95, body.k-body:not(.theme-light) .hover\:bg-slate-900\/95:hover { background-color: rgba(20, 32, 48, 0.95); } body.k-body:not(.theme-light) .bg-slate-800, body.k-body:not(.theme-light) .hover\:bg-slate-800:hover { background-color: #1A2838; } body.k-body:not(.theme-light) .bg-slate-800\/5, body.k-body:not(.theme-light) .hover\:bg-slate-800\/5:hover { background-color: rgba(26, 40, 56, 0.05); } body.k-body:not(.theme-light) .bg-slate-800\/10, body.k-body:not(.theme-light) .hover\:bg-slate-800\/10:hover { background-color: rgba(26, 40, 56, 0.1); } body.k-body:not(.theme-light) .bg-slate-800\/20, body.k-body:not(.theme-light) .hover\:bg-slate-800\/20:hover { background-color: rgba(26, 40, 56, 0.2); } body.k-body:not(.theme-light) .bg-slate-800\/30, body.k-body:not(.theme-light) .hover\:bg-slate-800\/30:hover { background-color: rgba(26, 40, 56, 0.3); } body.k-body:not(.theme-light) .bg-slate-800\/40, body.k-body:not(.theme-light) .hover\:bg-slate-800\/40:hover { background-color: rgba(26, 40, 56, 0.4); } body.k-body:not(.theme-light) .bg-slate-800\/50, body.k-body:not(.theme-light) .hover\:bg-slate-800\/50:hover { background-color: rgba(26, 40, 56, 0.5); } body.k-body:not(.theme-light) .bg-slate-800\/60, body.k-body:not(.theme-light) .hover\:bg-slate-800\/60:hover { background-color: rgba(26, 40, 56, 0.6); } body.k-body:not(.theme-light) .bg-slate-800\/70, body.k-body:not(.theme-light) .hover\:bg-slate-800\/70:hover { background-color: rgba(26, 40, 56, 0.7); } body.k-body:not(.theme-light) .bg-slate-800\/80, body.k-body:not(.theme-light) .hover\:bg-slate-800\/80:hover { background-color: rgba(26, 40, 56, 0.8); } body.k-body:not(.theme-light) .bg-slate-800\/90, body.k-body:not(.theme-light) .hover\:bg-slate-800\/90:hover { background-color: rgba(26, 40, 56, 0.9); } body.k-body:not(.theme-light) .bg-slate-800\/95, body.k-body:not(.theme-light) .hover\:bg-slate-800\/95:hover { background-color: rgba(26, 40, 56, 0.95); } body.k-body:not(.theme-light) .bg-slate-700, body.k-body:not(.theme-light) .hover\:bg-slate-700:hover { background-color: #24344A; } body.k-body:not(.theme-light) .bg-slate-700\/5, body.k-body:not(.theme-light) .hover\:bg-slate-700\/5:hover { background-color: rgba(36, 52, 74, 0.05); } body.k-body:not(.theme-light) .bg-slate-700\/10, body.k-body:not(.theme-light) .hover\:bg-slate-700\/10:hover { background-color: rgba(36, 52, 74, 0.1); } body.k-body:not(.theme-light) .bg-slate-700\/20, body.k-body:not(.theme-light) .hover\:bg-slate-700\/20:hover { background-color: rgba(36, 52, 74, 0.2); } body.k-body:not(.theme-light) .bg-slate-700\/30, body.k-body:not(.theme-light) .hover\:bg-slate-700\/30:hover { background-color: rgba(36, 52, 74, 0.3); } body.k-body:not(.theme-light) .bg-slate-700\/40, body.k-body:not(.theme-light) .hover\:bg-slate-700\/40:hover { background-color: rgba(36, 52, 74, 0.4); } body.k-body:not(.theme-light) .bg-slate-700\/50, body.k-body:not(.theme-light) .hover\:bg-slate-700\/50:hover { background-color: rgba(36, 52, 74, 0.5); } body.k-body:not(.theme-light) .bg-slate-700\/60, body.k-body:not(.theme-light) .hover\:bg-slate-700\/60:hover { background-color: rgba(36, 52, 74, 0.6); } body.k-body:not(.theme-light) .bg-slate-700\/70, body.k-body:not(.theme-light) .hover\:bg-slate-700\/70:hover { background-color: rgba(36, 52, 74, 0.7); } body.k-body:not(.theme-light) .bg-slate-700\/80, body.k-body:not(.theme-light) .hover\:bg-slate-700\/80:hover { background-color: rgba(36, 52, 74, 0.8); } body.k-body:not(.theme-light) .bg-slate-700\/90, body.k-body:not(.theme-light) .hover\:bg-slate-700\/90:hover { background-color: rgba(36, 52, 74, 0.9); } body.k-body:not(.theme-light) .bg-slate-700\/95, body.k-body:not(.theme-light) .hover\:bg-slate-700\/95:hover { background-color: rgba(36, 52, 74, 0.95); } body.k-body:not(.theme-light) .bg-slate-600, body.k-body:not(.theme-light) .hover\:bg-slate-600:hover { background-color: #33455E; } body.k-body:not(.theme-light) .bg-slate-600\/5, body.k-body:not(.theme-light) .hover\:bg-slate-600\/5:hover { background-color: rgba(51, 69, 94, 0.05); } body.k-body:not(.theme-light) .bg-slate-600\/10, body.k-body:not(.theme-light) .hover\:bg-slate-600\/10:hover { background-color: rgba(51, 69, 94, 0.1); } body.k-body:not(.theme-light) .bg-slate-600\/20, body.k-body:not(.theme-light) .hover\:bg-slate-600\/20:hover { background-color: rgba(51, 69, 94, 0.2); } body.k-body:not(.theme-light) .bg-slate-600\/30, body.k-body:not(.theme-light) .hover\:bg-slate-600\/30:hover { background-color: rgba(51, 69, 94, 0.3); } body.k-body:not(.theme-light) .bg-slate-600\/40, body.k-body:not(.theme-light) .hover\:bg-slate-600\/40:hover { background-color: rgba(51, 69, 94, 0.4); } body.k-body:not(.theme-light) .bg-slate-600\/50, body.k-body:not(.theme-light) .hover\:bg-slate-600\/50:hover { background-color: rgba(51, 69, 94, 0.5); } body.k-body:not(.theme-light) .bg-slate-600\/60, body.k-body:not(.theme-light) .hover\:bg-slate-600\/60:hover { background-color: rgba(51, 69, 94, 0.6); } body.k-body:not(.theme-light) .bg-slate-600\/70, body.k-body:not(.theme-light) .hover\:bg-slate-600\/70:hover { background-color: rgba(51, 69, 94, 0.7); } body.k-body:not(.theme-light) .bg-slate-600\/80, body.k-body:not(.theme-light) .hover\:bg-slate-600\/80:hover { background-color: rgba(51, 69, 94, 0.8); } body.k-body:not(.theme-light) .bg-slate-600\/90, body.k-body:not(.theme-light) .hover\:bg-slate-600\/90:hover { background-color: rgba(51, 69, 94, 0.9); } body.k-body:not(.theme-light) .bg-slate-600\/95, body.k-body:not(.theme-light) .hover\:bg-slate-600\/95:hover { background-color: rgba(51, 69, 94, 0.95); } body.k-body:not(.theme-light) .bg-teal-400, body.k-body:not(.theme-light) .hover\:bg-teal-400:hover { background-color: #3DBE7E; } body.k-body:not(.theme-light) .bg-teal-400\/5, body.k-body:not(.theme-light) .hover\:bg-teal-400\/5:hover { background-color: rgba(61, 190, 126, 0.05); } body.k-body:not(.theme-light) .bg-teal-400\/10, body.k-body:not(.theme-light) .hover\:bg-teal-400\/10:hover { background-color: rgba(61, 190, 126, 0.1); } body.k-body:not(.theme-light) .bg-teal-400\/20, body.k-body:not(.theme-light) .hover\:bg-teal-400\/20:hover { background-color: rgba(61, 190, 126, 0.2); } body.k-body:not(.theme-light) .bg-teal-400\/30, body.k-body:not(.theme-light) .hover\:bg-teal-400\/30:hover { background-color: rgba(61, 190, 126, 0.3); } body.k-body:not(.theme-light) .bg-teal-400\/40, body.k-body:not(.theme-light) .hover\:bg-teal-400\/40:hover { background-color: rgba(61, 190, 126, 0.4); } body.k-body:not(.theme-light) .bg-teal-400\/50, body.k-body:not(.theme-light) .hover\:bg-teal-400\/50:hover { background-color: rgba(61, 190, 126, 0.5); } body.k-body:not(.theme-light) .bg-teal-400\/60, body.k-body:not(.theme-light) .hover\:bg-teal-400\/60:hover { background-color: rgba(61, 190, 126, 0.6); } body.k-body:not(.theme-light) .bg-teal-400\/70, body.k-body:not(.theme-light) .hover\:bg-teal-400\/70:hover { background-color: rgba(61, 190, 126, 0.7); } body.k-body:not(.theme-light) .bg-teal-400\/80, body.k-body:not(.theme-light) .hover\:bg-teal-400\/80:hover { background-color: rgba(61, 190, 126, 0.8); } body.k-body:not(.theme-light) .bg-teal-400\/90, body.k-body:not(.theme-light) .hover\:bg-teal-400\/90:hover { background-color: rgba(61, 190, 126, 0.9); } body.k-body:not(.theme-light) .bg-teal-400\/95, body.k-body:not(.theme-light) .hover\:bg-teal-400\/95:hover { background-color: rgba(61, 190, 126, 0.95); } body.k-body:not(.theme-light) .bg-teal-500, body.k-body:not(.theme-light) .hover\:bg-teal-500:hover { background-color: #279160; } body.k-body:not(.theme-light) .bg-teal-500\/5, body.k-body:not(.theme-light) .hover\:bg-teal-500\/5:hover { background-color: rgba(39, 145, 96, 0.05); } body.k-body:not(.theme-light) .bg-teal-500\/10, body.k-body:not(.theme-light) .hover\:bg-teal-500\/10:hover { background-color: rgba(39, 145, 96, 0.1); } body.k-body:not(.theme-light) .bg-teal-500\/20, body.k-body:not(.theme-light) .hover\:bg-teal-500\/20:hover { background-color: rgba(39, 145, 96, 0.2); } body.k-body:not(.theme-light) .bg-teal-500\/30, body.k-body:not(.theme-light) .hover\:bg-teal-500\/30:hover { background-color: rgba(39, 145, 96, 0.3); } body.k-body:not(.theme-light) .bg-teal-500\/40, body.k-body:not(.theme-light) .hover\:bg-teal-500\/40:hover { background-color: rgba(39, 145, 96, 0.4); } body.k-body:not(.theme-light) .bg-teal-500\/50, body.k-body:not(.theme-light) .hover\:bg-teal-500\/50:hover { background-color: rgba(39, 145, 96, 0.5); } body.k-body:not(.theme-light) .bg-teal-500\/60, body.k-body:not(.theme-light) .hover\:bg-teal-500\/60:hover { background-color: rgba(39, 145, 96, 0.6); } body.k-body:not(.theme-light) .bg-teal-500\/70, body.k-body:not(.theme-light) .hover\:bg-teal-500\/70:hover { background-color: rgba(39, 145, 96, 0.7); } body.k-body:not(.theme-light) .bg-teal-500\/80, body.k-body:not(.theme-light) .hover\:bg-teal-500\/80:hover { background-color: rgba(39, 145, 96, 0.8); } body.k-body:not(.theme-light) .bg-teal-500\/90, body.k-body:not(.theme-light) .hover\:bg-teal-500\/90:hover { background-color: rgba(39, 145, 96, 0.9); } body.k-body:not(.theme-light) .bg-teal-500\/95, body.k-body:not(.theme-light) .hover\:bg-teal-500\/95:hover { background-color: rgba(39, 145, 96, 0.95); } body.k-body:not(.theme-light) .bg-teal-600, body.k-body:not(.theme-light) .hover\:bg-teal-600:hover { background-color: #20784F; } body.k-body:not(.theme-light) .bg-teal-600\/5, body.k-body:not(.theme-light) .hover\:bg-teal-600\/5:hover { background-color: rgba(32, 120, 79, 0.05); } body.k-body:not(.theme-light) .bg-teal-600\/10, body.k-body:not(.theme-light) .hover\:bg-teal-600\/10:hover { background-color: rgba(32, 120, 79, 0.1); } body.k-body:not(.theme-light) .bg-teal-600\/20, body.k-body:not(.theme-light) .hover\:bg-teal-600\/20:hover { background-color: rgba(32, 120, 79, 0.2); } body.k-body:not(.theme-light) .bg-teal-600\/30, body.k-body:not(.theme-light) .hover\:bg-teal-600\/30:hover { background-color: rgba(32, 120, 79, 0.3); } body.k-body:not(.theme-light) .bg-teal-600\/40, body.k-body:not(.theme-light) .hover\:bg-teal-600\/40:hover { background-color: rgba(32, 120, 79, 0.4); } body.k-body:not(.theme-light) .bg-teal-600\/50, body.k-body:not(.theme-light) .hover\:bg-teal-600\/50:hover { background-color: rgba(32, 120, 79, 0.5); } body.k-body:not(.theme-light) .bg-teal-600\/60, body.k-body:not(.theme-light) .hover\:bg-teal-600\/60:hover { background-color: rgba(32, 120, 79, 0.6); } body.k-body:not(.theme-light) .bg-teal-600\/70, body.k-body:not(.theme-light) .hover\:bg-teal-600\/70:hover { background-color: rgba(32, 120, 79, 0.7); } body.k-body:not(.theme-light) .bg-teal-600\/80, body.k-body:not(.theme-light) .hover\:bg-teal-600\/80:hover { background-color: rgba(32, 120, 79, 0.8); } body.k-body:not(.theme-light) .bg-teal-600\/90, body.k-body:not(.theme-light) .hover\:bg-teal-600\/90:hover { background-color: rgba(32, 120, 79, 0.9); } body.k-body:not(.theme-light) .bg-teal-600\/95, body.k-body:not(.theme-light) .hover\:bg-teal-600\/95:hover { background-color: rgba(32, 120, 79, 0.95); } body.k-body:not(.theme-light) .bg-indigo-500, body.k-body:not(.theme-light) .hover\:bg-indigo-500:hover { background-color: #8A6A22; } body.k-body:not(.theme-light) .bg-indigo-500\/5, body.k-body:not(.theme-light) .hover\:bg-indigo-500\/5:hover { background-color: rgba(138, 106, 34, 0.05); } body.k-body:not(.theme-light) .bg-indigo-500\/10, body.k-body:not(.theme-light) .hover\:bg-indigo-500\/10:hover { background-color: rgba(138, 106, 34, 0.1); } body.k-body:not(.theme-light) .bg-indigo-500\/20, body.k-body:not(.theme-light) .hover\:bg-indigo-500\/20:hover { background-color: rgba(138, 106, 34, 0.2); } body.k-body:not(.theme-light) .bg-indigo-500\/30, body.k-body:not(.theme-light) .hover\:bg-indigo-500\/30:hover { background-color: rgba(138, 106, 34, 0.3); } body.k-body:not(.theme-light) .bg-indigo-500\/40, body.k-body:not(.theme-light) .hover\:bg-indigo-500\/40:hover { background-color: rgba(138, 106, 34, 0.4); } body.k-body:not(.theme-light) .bg-indigo-500\/50, body.k-body:not(.theme-light) .hover\:bg-indigo-500\/50:hover { background-color: rgba(138, 106, 34, 0.5); } body.k-body:not(.theme-light) .bg-indigo-500\/60, body.k-body:not(.theme-light) .hover\:bg-indigo-500\/60:hover { background-color: rgba(138, 106, 34, 0.6); } body.k-body:not(.theme-light) .bg-indigo-500\/70, body.k-body:not(.theme-light) .hover\:bg-indigo-500\/70:hover { background-color: rgba(138, 106, 34, 0.7); } body.k-body:not(.theme-light) .bg-indigo-500\/80, body.k-body:not(.theme-light) .hover\:bg-indigo-500\/80:hover { background-color: rgba(138, 106, 34, 0.8); } body.k-body:not(.theme-light) .bg-indigo-500\/90, body.k-body:not(.theme-light) .hover\:bg-indigo-500\/90:hover { background-color: rgba(138, 106, 34, 0.9); } body.k-body:not(.theme-light) .bg-indigo-500\/95, body.k-body:not(.theme-light) .hover\:bg-indigo-500\/95:hover { background-color: rgba(138, 106, 34, 0.95); } body.k-body:not(.theme-light) .bg-indigo-600, body.k-body:not(.theme-light) .hover\:bg-indigo-600:hover { background-color: #74591C; } body.k-body:not(.theme-light) .bg-indigo-600\/5, body.k-body:not(.theme-light) .hover\:bg-indigo-600\/5:hover { background-color: rgba(116, 89, 28, 0.05); } body.k-body:not(.theme-light) .bg-indigo-600\/10, body.k-body:not(.theme-light) .hover\:bg-indigo-600\/10:hover { background-color: rgba(116, 89, 28, 0.1); } body.k-body:not(.theme-light) .bg-indigo-600\/20, body.k-body:not(.theme-light) .hover\:bg-indigo-600\/20:hover { background-color: rgba(116, 89, 28, 0.2); } body.k-body:not(.theme-light) .bg-indigo-600\/30, body.k-body:not(.theme-light) .hover\:bg-indigo-600\/30:hover { background-color: rgba(116, 89, 28, 0.3); } body.k-body:not(.theme-light) .bg-indigo-600\/40, body.k-body:not(.theme-light) .hover\:bg-indigo-600\/40:hover { background-color: rgba(116, 89, 28, 0.4); } body.k-body:not(.theme-light) .bg-indigo-600\/50, body.k-body:not(.theme-light) .hover\:bg-indigo-600\/50:hover { background-color: rgba(116, 89, 28, 0.5); } body.k-body:not(.theme-light) .bg-indigo-600\/60, body.k-body:not(.theme-light) .hover\:bg-indigo-600\/60:hover { background-color: rgba(116, 89, 28, 0.6); } body.k-body:not(.theme-light) .bg-indigo-600\/70, body.k-body:not(.theme-light) .hover\:bg-indigo-600\/70:hover { background-color: rgba(116, 89, 28, 0.7); } body.k-body:not(.theme-light) .bg-indigo-600\/80, body.k-body:not(.theme-light) .hover\:bg-indigo-600\/80:hover { background-color: rgba(116, 89, 28, 0.8); } body.k-body:not(.theme-light) .bg-indigo-600\/90, body.k-body:not(.theme-light) .hover\:bg-indigo-600\/90:hover { background-color: rgba(116, 89, 28, 0.9); } body.k-body:not(.theme-light) .bg-indigo-600\/95, body.k-body:not(.theme-light) .hover\:bg-indigo-600\/95:hover { background-color: rgba(116, 89, 28, 0.95); } body.k-body:not(.theme-light) .bg-indigo-400, body.k-body:not(.theme-light) .hover\:bg-indigo-400:hover { background-color: #B88A2E; } body.k-body:not(.theme-light) .bg-indigo-400\/5, body.k-body:not(.theme-light) .hover\:bg-indigo-400\/5:hover { background-color: rgba(184, 138, 46, 0.05); } body.k-body:not(.theme-light) .bg-indigo-400\/10, body.k-body:not(.theme-light) .hover\:bg-indigo-400\/10:hover { background-color: rgba(184, 138, 46, 0.1); } body.k-body:not(.theme-light) .bg-indigo-400\/20, body.k-body:not(.theme-light) .hover\:bg-indigo-400\/20:hover { background-color: rgba(184, 138, 46, 0.2); } body.k-body:not(.theme-light) .bg-indigo-400\/30, body.k-body:not(.theme-light) .hover\:bg-indigo-400\/30:hover { background-color: rgba(184, 138, 46, 0.3); } body.k-body:not(.theme-light) .bg-indigo-400\/40, body.k-body:not(.theme-light) .hover\:bg-indigo-400\/40:hover { background-color: rgba(184, 138, 46, 0.4); } body.k-body:not(.theme-light) .bg-indigo-400\/50, body.k-body:not(.theme-light) .hover\:bg-indigo-400\/50:hover { background-color: rgba(184, 138, 46, 0.5); } body.k-body:not(.theme-light) .bg-indigo-400\/60, body.k-body:not(.theme-light) .hover\:bg-indigo-400\/60:hover { background-color: rgba(184, 138, 46, 0.6); } body.k-body:not(.theme-light) .bg-indigo-400\/70, body.k-body:not(.theme-light) .hover\:bg-indigo-400\/70:hover { background-color: rgba(184, 138, 46, 0.7); } body.k-body:not(.theme-light) .bg-indigo-400\/80, body.k-body:not(.theme-light) .hover\:bg-indigo-400\/80:hover { background-color: rgba(184, 138, 46, 0.8); } body.k-body:not(.theme-light) .bg-indigo-400\/90, body.k-body:not(.theme-light) .hover\:bg-indigo-400\/90:hover { background-color: rgba(184, 138, 46, 0.9); } body.k-body:not(.theme-light) .bg-indigo-400\/95, body.k-body:not(.theme-light) .hover\:bg-indigo-400\/95:hover { background-color: rgba(184, 138, 46, 0.95); } body.k-body:not(.theme-light) .bg-yellow-400, body.k-body:not(.theme-light) .hover\:bg-yellow-400:hover { background-color: #D9AE4A; } body.k-body:not(.theme-light) .bg-yellow-400\/5, body.k-body:not(.theme-light) .hover\:bg-yellow-400\/5:hover { background-color: rgba(217, 174, 74, 0.05); } body.k-body:not(.theme-light) .bg-yellow-400\/10, body.k-body:not(.theme-light) .hover\:bg-yellow-400\/10:hover { background-color: rgba(217, 174, 74, 0.1); } body.k-body:not(.theme-light) .bg-yellow-400\/20, body.k-body:not(.theme-light) .hover\:bg-yellow-400\/20:hover { background-color: rgba(217, 174, 74, 0.2); } body.k-body:not(.theme-light) .bg-yellow-400\/30, body.k-body:not(.theme-light) .hover\:bg-yellow-400\/30:hover { background-color: rgba(217, 174, 74, 0.3); } body.k-body:not(.theme-light) .bg-yellow-400\/40, body.k-body:not(.theme-light) .hover\:bg-yellow-400\/40:hover { background-color: rgba(217, 174, 74, 0.4); } body.k-body:not(.theme-light) .bg-yellow-400\/50, body.k-body:not(.theme-light) .hover\:bg-yellow-400\/50:hover { background-color: rgba(217, 174, 74, 0.5); } body.k-body:not(.theme-light) .bg-yellow-400\/60, body.k-body:not(.theme-light) .hover\:bg-yellow-400\/60:hover { background-color: rgba(217, 174, 74, 0.6); } body.k-body:not(.theme-light) .bg-yellow-400\/70, body.k-body:not(.theme-light) .hover\:bg-yellow-400\/70:hover { background-color: rgba(217, 174, 74, 0.7); } body.k-body:not(.theme-light) .bg-yellow-400\/80, body.k-body:not(.theme-light) .hover\:bg-yellow-400\/80:hover { background-color: rgba(217, 174, 74, 0.8); } body.k-body:not(.theme-light) .bg-yellow-400\/90, body.k-body:not(.theme-light) .hover\:bg-yellow-400\/90:hover { background-color: rgba(217, 174, 74, 0.9); } body.k-body:not(.theme-light) .bg-yellow-400\/95, body.k-body:not(.theme-light) .hover\:bg-yellow-400\/95:hover { background-color: rgba(217, 174, 74, 0.95); } body.k-body:not(.theme-light) .bg-indigo-900\/5, body.k-body:not(.theme-light) .hover\:bg-indigo-900\/5:hover { background-color: rgba(90, 70, 20, 0.05); } body.k-body:not(.theme-light) .bg-indigo-900\/10, body.k-body:not(.theme-light) .hover\:bg-indigo-900\/10:hover { background-color: rgba(90, 70, 20, 0.1); } body.k-body:not(.theme-light) .bg-indigo-900\/20, body.k-body:not(.theme-light) .hover\:bg-indigo-900\/20:hover { background-color: rgba(90, 70, 20, 0.2); } body.k-body:not(.theme-light) .bg-indigo-900\/30, body.k-body:not(.theme-light) .hover\:bg-indigo-900\/30:hover { background-color: rgba(90, 70, 20, 0.3); } body.k-body:not(.theme-light) .bg-indigo-900\/40, body.k-body:not(.theme-light) .hover\:bg-indigo-900\/40:hover { background-color: rgba(90, 70, 20, 0.4); } body.k-body:not(.theme-light) .bg-indigo-900\/50, body.k-body:not(.theme-light) .hover\:bg-indigo-900\/50:hover { background-color: rgba(90, 70, 20, 0.5); } body.k-body:not(.theme-light) .bg-indigo-900\/60, body.k-body:not(.theme-light) .hover\:bg-indigo-900\/60:hover { background-color: rgba(90, 70, 20, 0.6); } body.k-body:not(.theme-light) .bg-indigo-900\/70, body.k-body:not(.theme-light) .hover\:bg-indigo-900\/70:hover { background-color: rgba(90, 70, 20, 0.7); } body.k-body:not(.theme-light) .bg-indigo-900\/80, body.k-body:not(.theme-light) .hover\:bg-indigo-900\/80:hover { background-color: rgba(90, 70, 20, 0.8); } body.k-body:not(.theme-light) .bg-indigo-900\/90, body.k-body:not(.theme-light) .hover\:bg-indigo-900\/90:hover { background-color: rgba(90, 70, 20, 0.9); } body.k-body:not(.theme-light) .bg-indigo-900\/95, body.k-body:not(.theme-light) .hover\:bg-indigo-900\/95:hover { background-color: rgba(90, 70, 20, 0.95); } body.k-body:not(.theme-light) .text-white, body.k-body:not(.theme-light) .hover\:text-white:hover { color: #E6ECF2; } body.k-body:not(.theme-light) .text-slate-100, body.k-body:not(.theme-light) .hover\:text-slate-100:hover { color: #EEF2F6; } body.k-body:not(.theme-light) .text-slate-200, body.k-body:not(.theme-light) .hover\:text-slate-200:hover { color: #DCE3EA; } body.k-body:not(.theme-light) .text-slate-300, body.k-body:not(.theme-light) .hover\:text-slate-300:hover { color: #C3CDD8; } body.k-body:not(.theme-light) .text-slate-400, body.k-body:not(.theme-light) .hover\:text-slate-400:hover { color: #9AA8B8; } body.k-body:not(.theme-light) .text-slate-500, body.k-body:not(.theme-light) .hover\:text-slate-500:hover { color: #8796A8; } body.k-body:not(.theme-light) .text-slate-600, body.k-body:not(.theme-light) .hover\:text-slate-600:hover { color: #6B7A8F; } body.k-body:not(.theme-light) .text-teal-300, body.k-body:not(.theme-light) .hover\:text-teal-300:hover { color: #6BDDA4; } body.k-body:not(.theme-light) .text-teal-400, body.k-body:not(.theme-light) .hover\:text-teal-400:hover { color: #4FCB8C; } body.k-body:not(.theme-light) .text-teal-500, body.k-body:not(.theme-light) .hover\:text-teal-500:hover { color: #3DBE7E; } body.k-body:not(.theme-light) .text-teal-600, body.k-body:not(.theme-light) .hover\:text-teal-600:hover { color: #2A9A63; } body.k-body:not(.theme-light) .text-indigo-100, body.k-body:not(.theme-light) .hover\:text-indigo-100:hover { color: #F3E5C0; } body.k-body:not(.theme-light) .text-indigo-200, body.k-body:not(.theme-light) .hover\:text-indigo-200:hover { color: #EBD39A; } body.k-body:not(.theme-light) .text-indigo-300, body.k-body:not(.theme-light) .hover\:text-indigo-300:hover { color: #E4C27A; } body.k-body:not(.theme-light) .text-indigo-400, body.k-body:not(.theme-light) .hover\:text-indigo-400:hover { color: #D9AE4A; } body.k-body:not(.theme-light) .text-indigo-500, body.k-body:not(.theme-light) .hover\:text-indigo-500:hover { color: #C99E3C; } body.k-body:not(.theme-light) .text-yellow-400, body.k-body:not(.theme-light) .hover\:text-yellow-400:hover { color: #D9AE4A; } body.k-body:not(.theme-light) .border-slate-800, body.k-body:not(.theme-light) .hover\:border-slate-800:hover { border-color: rgba(230, 236, 242, 0.08); } body.k-body:not(.theme-light) .border-slate-700, body.k-body:not(.theme-light) .hover\:border-slate-700:hover { border-color: rgba(230, 236, 242, 0.12); } body.k-body:not(.theme-light) .border-slate-600, body.k-body:not(.theme-light) .hover\:border-slate-600:hover { border-color: rgba(230, 236, 242, 0.18); } body.k-body:not(.theme-light) .border-slate-500, body.k-body:not(.theme-light) .hover\:border-slate-500:hover { border-color: rgba(230, 236, 242, 0.22); } body.k-body:not(.theme-light) .border-teal-400, body.k-body:not(.theme-light) .hover\:border-teal-400:hover { border-color: #3DBE7E; } body.k-body:not(.theme-light) .border-teal-500, body.k-body:not(.theme-light) .hover\:border-teal-500:hover { border-color: #3DBE7E; } body.k-body:not(.theme-light) .border-indigo-500, body.k-body:not(.theme-light) .hover\:border-indigo-500:hover { border-color: #B88A2E; } body.k-body:not(.theme-light) .border-indigo-400, body.k-body:not(.theme-light) .hover\:border-indigo-400:hover { border-color: #D9AE4A; } body.k-body:not(.theme-light) .border-slate-700\/5, body.k-body:not(.theme-light) .hover\:border-slate-700\/5:hover { border-color: rgba(230, 236, 242, 0.025); } body.k-body:not(.theme-light) .border-slate-700\/10, body.k-body:not(.theme-light) .hover\:border-slate-700\/10:hover { border-color: rgba(230, 236, 242, 0.05); } body.k-body:not(.theme-light) .border-slate-700\/20, body.k-body:not(.theme-light) .hover\:border-slate-700\/20:hover { border-color: rgba(230, 236, 242, 0.1); } body.k-body:not(.theme-light) .border-slate-700\/30, body.k-body:not(.theme-light) .hover\:border-slate-700\/30:hover { border-color: rgba(230, 236, 242, 0.15); } body.k-body:not(.theme-light) .border-slate-700\/40, body.k-body:not(.theme-light) .hover\:border-slate-700\/40:hover { border-color: rgba(230, 236, 242, 0.2); } body.k-body:not(.theme-light) .border-slate-700\/50, body.k-body:not(.theme-light) .hover\:border-slate-700\/50:hover { border-color: rgba(230, 236, 242, 0.25); } body.k-body:not(.theme-light) .border-slate-700\/60, body.k-body:not(.theme-light) .hover\:border-slate-700\/60:hover { border-color: rgba(230, 236, 242, 0.3); } body.k-body:not(.theme-light) .border-slate-700\/70, body.k-body:not(.theme-light) .hover\:border-slate-700\/70:hover { border-color: rgba(230, 236, 242, 0.35); } body.k-body:not(.theme-light) .border-slate-700\/80, body.k-body:not(.theme-light) .hover\:border-slate-700\/80:hover { border-color: rgba(230, 236, 242, 0.4); } body.k-body:not(.theme-light) .border-slate-700\/90, body.k-body:not(.theme-light) .hover\:border-slate-700\/90:hover { border-color: rgba(230, 236, 242, 0.45); } body.k-body:not(.theme-light) .border-slate-700\/95, body.k-body:not(.theme-light) .hover\:border-slate-700\/95:hover { border-color: rgba(230, 236, 242, 0.475); } body.k-body:not(.theme-light) .border-slate-500\/5, body.k-body:not(.theme-light) .hover\:border-slate-500\/5:hover { border-color: rgba(230, 236, 242, 0.025); } body.k-body:not(.theme-light) .border-slate-500\/10, body.k-body:not(.theme-light) .hover\:border-slate-500\/10:hover { border-color: rgba(230, 236, 242, 0.05); } body.k-body:not(.theme-light) .border-slate-500\/20, body.k-body:not(.theme-light) .hover\:border-slate-500\/20:hover { border-color: rgba(230, 236, 242, 0.1); } body.k-body:not(.theme-light) .border-slate-500\/30, body.k-body:not(.theme-light) .hover\:border-slate-500\/30:hover { border-color: rgba(230, 236, 242, 0.15); } body.k-body:not(.theme-light) .border-slate-500\/40, body.k-body:not(.theme-light) .hover\:border-slate-500\/40:hover { border-color: rgba(230, 236, 242, 0.2); } body.k-body:not(.theme-light) .border-slate-500\/50, body.k-body:not(.theme-light) .hover\:border-slate-500\/50:hover { border-color: rgba(230, 236, 242, 0.25); } body.k-body:not(.theme-light) .border-slate-500\/60, body.k-body:not(.theme-light) .hover\:border-slate-500\/60:hover { border-color: rgba(230, 236, 242, 0.3); } body.k-body:not(.theme-light) .border-slate-500\/70, body.k-body:not(.theme-light) .hover\:border-slate-500\/70:hover { border-color: rgba(230, 236, 242, 0.35); } body.k-body:not(.theme-light) .border-slate-500\/80, body.k-body:not(.theme-light) .hover\:border-slate-500\/80:hover { border-color: rgba(230, 236, 242, 0.4); } body.k-body:not(.theme-light) .border-slate-500\/90, body.k-body:not(.theme-light) .hover\:border-slate-500\/90:hover { border-color: rgba(230, 236, 242, 0.45); } body.k-body:not(.theme-light) .border-slate-500\/95, body.k-body:not(.theme-light) .hover\:border-slate-500\/95:hover { border-color: rgba(230, 236, 242, 0.475); } body.k-body:not(.theme-light) .border-teal-400\/5, body.k-body:not(.theme-light) .hover\:border-teal-400\/5:hover { border-color: rgba(61, 190, 126, 0.05); } body.k-body:not(.theme-light) .border-teal-400\/10, body.k-body:not(.theme-light) .hover\:border-teal-400\/10:hover { border-color: rgba(61, 190, 126, 0.1); } body.k-body:not(.theme-light) .border-teal-400\/20, body.k-body:not(.theme-light) .hover\:border-teal-400\/20:hover { border-color: rgba(61, 190, 126, 0.2); } body.k-body:not(.theme-light) .border-teal-400\/30, body.k-body:not(.theme-light) .hover\:border-teal-400\/30:hover { border-color: rgba(61, 190, 126, 0.3); } body.k-body:not(.theme-light) .border-teal-400\/40, body.k-body:not(.theme-light) .hover\:border-teal-400\/40:hover { border-color: rgba(61, 190, 126, 0.4); } body.k-body:not(.theme-light) .border-teal-400\/50, body.k-body:not(.theme-light) .hover\:border-teal-400\/50:hover { border-color: rgba(61, 190, 126, 0.5); } body.k-body:not(.theme-light) .border-teal-400\/60, body.k-body:not(.theme-light) .hover\:border-teal-400\/60:hover { border-color: rgba(61, 190, 126, 0.6); } body.k-body:not(.theme-light) .border-teal-400\/70, body.k-body:not(.theme-light) .hover\:border-teal-400\/70:hover { border-color: rgba(61, 190, 126, 0.7); } body.k-body:not(.theme-light) .border-teal-400\/80, body.k-body:not(.theme-light) .hover\:border-teal-400\/80:hover { border-color: rgba(61, 190, 126, 0.8); } body.k-body:not(.theme-light) .border-teal-400\/90, body.k-body:not(.theme-light) .hover\:border-teal-400\/90:hover { border-color: rgba(61, 190, 126, 0.9); } body.k-body:not(.theme-light) .border-teal-400\/95, body.k-body:not(.theme-light) .hover\:border-teal-400\/95:hover { border-color: rgba(61, 190, 126, 0.95); } body.k-body:not(.theme-light) .border-teal-500\/5, body.k-body:not(.theme-light) .hover\:border-teal-500\/5:hover { border-color: rgba(61, 190, 126, 0.05); } body.k-body:not(.theme-light) .border-teal-500\/10, body.k-body:not(.theme-light) .hover\:border-teal-500\/10:hover { border-color: rgba(61, 190, 126, 0.1); } body.k-body:not(.theme-light) .border-teal-500\/20, body.k-body:not(.theme-light) .hover\:border-teal-500\/20:hover { border-color: rgba(61, 190, 126, 0.2); } body.k-body:not(.theme-light) .border-teal-500\/30, body.k-body:not(.theme-light) .hover\:border-teal-500\/30:hover { border-color: rgba(61, 190, 126, 0.3); } body.k-body:not(.theme-light) .border-teal-500\/40, body.k-body:not(.theme-light) .hover\:border-teal-500\/40:hover { border-color: rgba(61, 190, 126, 0.4); } body.k-body:not(.theme-light) .border-teal-500\/50, body.k-body:not(.theme-light) .hover\:border-teal-500\/50:hover { border-color: rgba(61, 190, 126, 0.5); } body.k-body:not(.theme-light) .border-teal-500\/60, body.k-body:not(.theme-light) .hover\:border-teal-500\/60:hover { border-color: rgba(61, 190, 126, 0.6); } body.k-body:not(.theme-light) .border-teal-500\/70, body.k-body:not(.theme-light) .hover\:border-teal-500\/70:hover { border-color: rgba(61, 190, 126, 0.7); } body.k-body:not(.theme-light) .border-teal-500\/80, body.k-body:not(.theme-light) .hover\:border-teal-500\/80:hover { border-color: rgba(61, 190, 126, 0.8); } body.k-body:not(.theme-light) .border-teal-500\/90, body.k-body:not(.theme-light) .hover\:border-teal-500\/90:hover { border-color: rgba(61, 190, 126, 0.9); } body.k-body:not(.theme-light) .border-teal-500\/95, body.k-body:not(.theme-light) .hover\:border-teal-500\/95:hover { border-color: rgba(61, 190, 126, 0.95); } body.k-body:not(.theme-light) .border-indigo-500\/5, body.k-body:not(.theme-light) .hover\:border-indigo-500\/5:hover { border-color: rgba(217, 174, 74, 0.05); } body.k-body:not(.theme-light) .border-indigo-500\/10, body.k-body:not(.theme-light) .hover\:border-indigo-500\/10:hover { border-color: rgba(217, 174, 74, 0.1); } body.k-body:not(.theme-light) .border-indigo-500\/20, body.k-body:not(.theme-light) .hover\:border-indigo-500\/20:hover { border-color: rgba(217, 174, 74, 0.2); } body.k-body:not(.theme-light) .border-indigo-500\/30, body.k-body:not(.theme-light) .hover\:border-indigo-500\/30:hover { border-color: rgba(217, 174, 74, 0.3); } body.k-body:not(.theme-light) .border-indigo-500\/40, body.k-body:not(.theme-light) .hover\:border-indigo-500\/40:hover { border-color: rgba(217, 174, 74, 0.4); } body.k-body:not(.theme-light) .border-indigo-500\/50, body.k-body:not(.theme-light) .hover\:border-indigo-500\/50:hover { border-color: rgba(217, 174, 74, 0.5); } body.k-body:not(.theme-light) .border-indigo-500\/60, body.k-body:not(.theme-light) .hover\:border-indigo-500\/60:hover { border-color: rgba(217, 174, 74, 0.6); } body.k-body:not(.theme-light) .border-indigo-500\/70, body.k-body:not(.theme-light) .hover\:border-indigo-500\/70:hover { border-color: rgba(217, 174, 74, 0.7); } body.k-body:not(.theme-light) .border-indigo-500\/80, body.k-body:not(.theme-light) .hover\:border-indigo-500\/80:hover { border-color: rgba(217, 174, 74, 0.8); } body.k-body:not(.theme-light) .border-indigo-500\/90, body.k-body:not(.theme-light) .hover\:border-indigo-500\/90:hover { border-color: rgba(217, 174, 74, 0.9); } body.k-body:not(.theme-light) .border-indigo-500\/95, body.k-body:not(.theme-light) .hover\:border-indigo-500\/95:hover { border-color: rgba(217, 174, 74, 0.95); } body.k-body:not(.theme-light) .focus\:border-teal-500:focus, body.k-body:not(.theme-light) .focus\:border-teal-400:focus, body.k-body:not(.theme-light) .focus\:border-indigo-500:focus { border-color: var(--k-emerald); } body.k-body:not(.theme-light) .from-teal-400 { --tw-gradient-from: #3DBE7E var(--tw-gradient-from-position); --tw-gradient-to: rgba(61, 190, 126, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } body.k-body:not(.theme-light) .from-teal-500 { --tw-gradient-from: #2FA96B var(--tw-gradient-from-position); --tw-gradient-to: rgba(47, 169, 107, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } body.k-body:not(.theme-light) .from-teal-300 { --tw-gradient-from: #6BDDA4 var(--tw-gradient-from-position); --tw-gradient-to: rgba(107, 221, 164, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } body.k-body:not(.theme-light) .to-teal-500 { --tw-gradient-to: #2A9A63 var(--tw-gradient-to-position); } body.k-body:not(.theme-light) .to-teal-400 { --tw-gradient-to: #3DBE7E var(--tw-gradient-to-position); } body.k-body:not(.theme-light) .to-emerald-500 { --tw-gradient-to: #2A9A63 var(--tw-gradient-to-position); } body.k-body:not(.theme-light) .via-purple-900 { --tw-gradient-to: rgba(20, 56, 38, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #143826 var(--tw-gradient-via-position), var(--tw-gradient-to); } /* cards, headers, bottom bars */ body.k-body:not(.theme-light) .glass-card { background: rgba(20, 32, 48, 0.78); border-color: rgba(230, 236, 242, 0.08); } body.k-body:not(.theme-light) header { background-color: rgba(15, 26, 40, 0.92); border-bottom-color: rgba(230, 236, 242, 0.08); } body.k-body:not(.theme-light) .bottom-nav-ribbon { background-color: rgba(15, 26, 40, 0.96); border-top-color: rgba(230, 236, 242, 0.08); } /* Header wordmark: gold dot that bounces on the i */ .k-body .dancing-i { animation: none; } .k-body .dancing-i > span:first-child { background-color: var(--k-gold); box-shadow: 0 0 6px rgba(217, 174, 74, 0.8); animation: k-dot-bounce 1.1s cubic-bezier(.3, 0, .4, 1) infinite; transform-origin: 50% 100%; } @keyframes k-dot-bounce { 0%, 100% { transform: translateY(0) scale(1.18, 0.82); } 12% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-5px) scale(0.94, 1.06); } 88% { transform: translateY(0) scale(1, 1); } } /* Header back arrow */ .k-back { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; margin-left: -6px; border-radius: 999px; border: 1px solid var(--k-line); background: var(--k-surface); color: var(--k-text); cursor: pointer; transition: background-color .2s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1); } .k-back:hover { background: var(--k-surface-2); } .k-back:active { transform: scale(0.9); } .k-back svg { width: 20px; height: 20px; } body.k-body.theme-light .k-back { background: #ffffff; color: #0f172a; border-color: #e2e8f0; } /* Inner pages on phones: back arrow + page title get the full header width (the centred KiKK badge is hidden there to make room for the title). */ @media (max-width: 639px) { .k-body header:has(.k-back ~ div) > .absolute.left-1\/2 { display: none; } .k-body header:has(.k-back ~ div) > div:first-child { width: auto; flex: 1 1 auto; min-width: 0; } } /* Gentle page glow behind content */ .k-page-glow { position: fixed; inset: 0; z-index: -3; pointer-events: none; background: radial-gradient(90% 45% at 50% 0%, rgba(20, 56, 38, 0.5) 0%, rgba(12, 20, 32, 0) 70%); } body.k-body.theme-light .k-page-glow { display: none; } /* Faint background logo: keep it very quiet so the real logo stays special */ body.k-body .kikk-bg { opacity: 0.05; } body.k-body.theme-light .kikk-bg { opacity: 0.06; } /* ========================================================= DARK UI CONVERSION (teacher & admin portals) These pages were built light (white cards, dark text). Add k-dark-ui to to repaint them in Midnight. ========================================================= */ body.k-body.k-dark-ui:not(.theme-light) .bg-white, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-white:hover { background-color: #142030; } body.k-body.k-dark-ui:not(.theme-light) .bg-slate-50, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-slate-50:hover { background-color: #0F1A28; } body.k-body.k-dark-ui:not(.theme-light) .bg-slate-100, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-slate-100:hover { background-color: #1A2838; } body.k-body.k-dark-ui:not(.theme-light) .bg-slate-200, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-slate-200:hover { background-color: #24344A; } body.k-body.k-dark-ui:not(.theme-light) .bg-slate-300, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-slate-300:hover { background-color: #33455E; } body.k-body.k-dark-ui:not(.theme-light) .bg-indigo-50, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-indigo-50:hover { background-color: rgba(217, 174, 74, 0.08); } body.k-body.k-dark-ui:not(.theme-light) .bg-indigo-100, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-indigo-100:hover { background-color: rgba(217, 174, 74, 0.14); } body.k-body.k-dark-ui:not(.theme-light) .bg-indigo-200, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-indigo-200:hover { background-color: rgba(217, 174, 74, 0.22); } body.k-body.k-dark-ui:not(.theme-light) .bg-indigo-700, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-indigo-700:hover { background-color: #5f4816; } body.k-body.k-dark-ui:not(.theme-light) .bg-emerald-50, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-emerald-50:hover { background-color: rgba(61, 190, 126, 0.10); } body.k-body.k-dark-ui:not(.theme-light) .bg-emerald-100, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-emerald-100:hover { background-color: rgba(61, 190, 126, 0.16); } body.k-body.k-dark-ui:not(.theme-light) .bg-red-50, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-red-50:hover { background-color: rgba(240, 138, 126, 0.10); } body.k-body.k-dark-ui:not(.theme-light) .bg-red-100, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-red-100:hover { background-color: rgba(240, 138, 126, 0.16); } body.k-body.k-dark-ui:not(.theme-light) .bg-amber-50, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-amber-50:hover { background-color: rgba(217, 174, 74, 0.10); } body.k-body.k-dark-ui:not(.theme-light) .bg-amber-100, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-amber-100:hover { background-color: rgba(217, 174, 74, 0.16); } body.k-body.k-dark-ui:not(.theme-light) .bg-blue-50, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-blue-50:hover { background-color: rgba(96, 165, 250, 0.10); } body.k-body.k-dark-ui:not(.theme-light) .bg-teal-100, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-teal-100:hover { background-color: rgba(61, 190, 126, 0.16); } body.k-body.k-dark-ui:not(.theme-light) .bg-sky-50, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-sky-50:hover { background-color: rgba(125, 211, 252, 0.10); } body.k-body.k-dark-ui:not(.theme-light) .bg-white\/5, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-white\/5:hover { background-color: rgba(20, 32, 48, 0.05); } body.k-body.k-dark-ui:not(.theme-light) .bg-slate-50\/5, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-slate-50\/5:hover { background-color: rgba(15, 26, 40, 0.05); } body.k-body.k-dark-ui:not(.theme-light) .bg-white\/10, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-white\/10:hover { background-color: rgba(20, 32, 48, 0.1); } body.k-body.k-dark-ui:not(.theme-light) .bg-slate-50\/10, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-slate-50\/10:hover { background-color: rgba(15, 26, 40, 0.1); } body.k-body.k-dark-ui:not(.theme-light) .bg-white\/20, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-white\/20:hover { background-color: rgba(20, 32, 48, 0.2); } body.k-body.k-dark-ui:not(.theme-light) .bg-slate-50\/20, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-slate-50\/20:hover { background-color: rgba(15, 26, 40, 0.2); } body.k-body.k-dark-ui:not(.theme-light) .bg-white\/30, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-white\/30:hover { background-color: rgba(20, 32, 48, 0.3); } body.k-body.k-dark-ui:not(.theme-light) .bg-slate-50\/30, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-slate-50\/30:hover { background-color: rgba(15, 26, 40, 0.3); } body.k-body.k-dark-ui:not(.theme-light) .bg-white\/40, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-white\/40:hover { background-color: rgba(20, 32, 48, 0.4); } body.k-body.k-dark-ui:not(.theme-light) .bg-slate-50\/40, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-slate-50\/40:hover { background-color: rgba(15, 26, 40, 0.4); } body.k-body.k-dark-ui:not(.theme-light) .bg-white\/50, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-white\/50:hover { background-color: rgba(20, 32, 48, 0.5); } body.k-body.k-dark-ui:not(.theme-light) .bg-slate-50\/50, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-slate-50\/50:hover { background-color: rgba(15, 26, 40, 0.5); } body.k-body.k-dark-ui:not(.theme-light) .bg-white\/60, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-white\/60:hover { background-color: rgba(20, 32, 48, 0.6); } body.k-body.k-dark-ui:not(.theme-light) .bg-slate-50\/60, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-slate-50\/60:hover { background-color: rgba(15, 26, 40, 0.6); } body.k-body.k-dark-ui:not(.theme-light) .bg-white\/70, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-white\/70:hover { background-color: rgba(20, 32, 48, 0.7); } body.k-body.k-dark-ui:not(.theme-light) .bg-slate-50\/70, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-slate-50\/70:hover { background-color: rgba(15, 26, 40, 0.7); } body.k-body.k-dark-ui:not(.theme-light) .bg-white\/80, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-white\/80:hover { background-color: rgba(20, 32, 48, 0.8); } body.k-body.k-dark-ui:not(.theme-light) .bg-slate-50\/80, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-slate-50\/80:hover { background-color: rgba(15, 26, 40, 0.8); } body.k-body.k-dark-ui:not(.theme-light) .bg-white\/90, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-white\/90:hover { background-color: rgba(20, 32, 48, 0.9); } body.k-body.k-dark-ui:not(.theme-light) .bg-slate-50\/90, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-slate-50\/90:hover { background-color: rgba(15, 26, 40, 0.9); } body.k-body.k-dark-ui:not(.theme-light) .bg-white\/95, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-white\/95:hover { background-color: rgba(20, 32, 48, 0.95); } body.k-body.k-dark-ui:not(.theme-light) .bg-slate-50\/95, body.k-body.k-dark-ui:not(.theme-light) .hover\:bg-slate-50\/95:hover { background-color: rgba(15, 26, 40, 0.95); } body.k-body.k-dark-ui:not(.theme-light) .text-slate-900, body.k-body.k-dark-ui:not(.theme-light) .hover\:text-slate-900:hover { color: #E6ECF2; } body.k-body.k-dark-ui:not(.theme-light) .text-slate-800, body.k-body.k-dark-ui:not(.theme-light) .hover\:text-slate-800:hover { color: #E6ECF2; } body.k-body.k-dark-ui:not(.theme-light) .text-slate-700, body.k-body.k-dark-ui:not(.theme-light) .hover\:text-slate-700:hover { color: #DCE3EA; } body.k-body.k-dark-ui:not(.theme-light) .text-slate-600, body.k-body.k-dark-ui:not(.theme-light) .hover\:text-slate-600:hover { color: #C3CDD8; } body.k-body.k-dark-ui:not(.theme-light) .text-indigo-900, body.k-body.k-dark-ui:not(.theme-light) .hover\:text-indigo-900:hover { color: #F3E5C0; } body.k-body.k-dark-ui:not(.theme-light) .text-indigo-800, body.k-body.k-dark-ui:not(.theme-light) .hover\:text-indigo-800:hover { color: #EBD39A; } body.k-body.k-dark-ui:not(.theme-light) .text-indigo-700, body.k-body.k-dark-ui:not(.theme-light) .hover\:text-indigo-700:hover { color: #E4C27A; } body.k-body.k-dark-ui:not(.theme-light) .text-indigo-600, body.k-body.k-dark-ui:not(.theme-light) .hover\:text-indigo-600:hover { color: #D9AE4A; } body.k-body.k-dark-ui:not(.theme-light) .text-emerald-800, body.k-body.k-dark-ui:not(.theme-light) .hover\:text-emerald-800:hover { color: #9BE7C1; } body.k-body.k-dark-ui:not(.theme-light) .text-emerald-700, body.k-body.k-dark-ui:not(.theme-light) .hover\:text-emerald-700:hover { color: #6BDDA4; } body.k-body.k-dark-ui:not(.theme-light) .text-emerald-600, body.k-body.k-dark-ui:not(.theme-light) .hover\:text-emerald-600:hover { color: #4FCB8C; } body.k-body.k-dark-ui:not(.theme-light) .text-red-700, body.k-body.k-dark-ui:not(.theme-light) .hover\:text-red-700:hover { color: #F7B4AB; } body.k-body.k-dark-ui:not(.theme-light) .text-red-600, body.k-body.k-dark-ui:not(.theme-light) .hover\:text-red-600:hover { color: #F5A399; } body.k-body.k-dark-ui:not(.theme-light) .text-amber-700, body.k-body.k-dark-ui:not(.theme-light) .hover\:text-amber-700:hover { color: #EBD39A; } body.k-body.k-dark-ui:not(.theme-light) .text-amber-600, body.k-body.k-dark-ui:not(.theme-light) .hover\:text-amber-600:hover { color: #E4C27A; } body.k-body.k-dark-ui:not(.theme-light) .text-blue-800, body.k-body.k-dark-ui:not(.theme-light) .hover\:text-blue-800:hover { color: #93C5FD; } body.k-body.k-dark-ui:not(.theme-light) .text-sky-600, body.k-body.k-dark-ui:not(.theme-light) .hover\:text-sky-600:hover { color: #7DD3FC; } body.k-body.k-dark-ui:not(.theme-light) .text-teal-600, body.k-body.k-dark-ui:not(.theme-light) .hover\:text-teal-600:hover { color: #4FCB8C; } body.k-body.k-dark-ui:not(.theme-light) .border-slate-100, body.k-body.k-dark-ui:not(.theme-light) .hover\:border-slate-100:hover { border-color: rgba(230, 236, 242, 0.06); } body.k-body.k-dark-ui:not(.theme-light) .border-slate-200, body.k-body.k-dark-ui:not(.theme-light) .hover\:border-slate-200:hover { border-color: rgba(230, 236, 242, 0.10); } body.k-body.k-dark-ui:not(.theme-light) .border-slate-300, body.k-body.k-dark-ui:not(.theme-light) .hover\:border-slate-300:hover { border-color: rgba(230, 236, 242, 0.16); } body.k-body.k-dark-ui:not(.theme-light) .border-indigo-100, body.k-body.k-dark-ui:not(.theme-light) .hover\:border-indigo-100:hover { border-color: rgba(217, 174, 74, 0.20); } body.k-body.k-dark-ui:not(.theme-light) .border-indigo-200, body.k-body.k-dark-ui:not(.theme-light) .hover\:border-indigo-200:hover { border-color: rgba(217, 174, 74, 0.30); } body.k-body.k-dark-ui:not(.theme-light) .border-indigo-300, body.k-body.k-dark-ui:not(.theme-light) .hover\:border-indigo-300:hover { border-color: rgba(217, 174, 74, 0.40); } body.k-body.k-dark-ui:not(.theme-light) .border-emerald-200, body.k-body.k-dark-ui:not(.theme-light) .hover\:border-emerald-200:hover { border-color: rgba(61, 190, 126, 0.30); } body.k-body.k-dark-ui:not(.theme-light) .border-red-200, body.k-body.k-dark-ui:not(.theme-light) .hover\:border-red-200:hover { border-color: rgba(240, 138, 126, 0.30); } body.k-body.k-dark-ui:not(.theme-light) .border-amber-200, body.k-body.k-dark-ui:not(.theme-light) .hover\:border-amber-200:hover { border-color: rgba(217, 174, 74, 0.30); } body.k-body.k-dark-ui:not(.theme-light) .border-blue-200, body.k-body.k-dark-ui:not(.theme-light) .hover\:border-blue-200:hover { border-color: rgba(96, 165, 250, 0.30); } body.k-body.k-dark-ui:not(.theme-light) .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(230, 236, 242, 0.06); } body.k-body.k-dark-ui:not(.theme-light) .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(230, 236, 242, 0.10); } body.k-body.k-dark-ui:not(.theme-light) .shadow-sm, body.k-body.k-dark-ui:not(.theme-light) .shadow-md { --tw-shadow-color: rgba(0,0,0,.4); } body.k-body.k-dark-ui:not(.theme-light) input:not([type="checkbox"]):not([type="radio"]):not([class*="bg-"]), body.k-body.k-dark-ui:not(.theme-light) select:not([class*="bg-"]), body.k-body.k-dark-ui:not(.theme-light) textarea:not([class*="bg-"]) { background-color: #0F1A28; color: #E6ECF2; } body.k-body.k-dark-ui:not(.theme-light) ::placeholder { color: #7C8A9C; } body.k-body.k-dark-ui:not(.theme-light) ::-webkit-scrollbar { width: 8px; height: 8px; } body.k-body.k-dark-ui:not(.theme-light) ::-webkit-scrollbar-track { background: #0F1A28; } body.k-body.k-dark-ui:not(.theme-light) ::-webkit-scrollbar-thumb { background: #33455E; border-radius: 4px; } /* Hidden pop-up messages must be fully off-screen (an edge used to peek in at the top right) */ body.k-body #toast.translate-x-full { transform: translateX(calc(100% + 3rem)); } /* ---------- Motion preferences ---------- If a phone/computer is set to "reduce animations", keep the brand touches (logo turn, bouncing dot, button shine) but switch off the big 3D swings, which can make some people feel motion-sick. */ @media (prefers-reduced-motion: reduce) { .k-overlay:not(.hidden) > .k-sheet, .k-rise, #splash-screen[style*="opacity: 0"] ~ .k-main .k-rise { animation: k-fade-in .3s ease-out both !important; } ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } [data-tilt] { transform: none !important; } }