297 lines
7.2 KiB
CSS
297 lines
7.2 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
color-scheme: dark;
|
|
--primary: #9acbff;
|
|
--primary-container: #3096e5;
|
|
--on-primary: #003355;
|
|
--on-primary-container: #e0f2ff;
|
|
|
|
--secondary: #c7c6ca;
|
|
--secondary-container: #48494c;
|
|
--on-secondary: #2f3033;
|
|
--on-secondary-container: #e3e2e6;
|
|
|
|
--tertiary: #53e16f;
|
|
--tertiary-container: #006e25;
|
|
--on-tertiary: #00390a;
|
|
--on-tertiary-container: #affca0;
|
|
|
|
--error: #ffb4ab;
|
|
--error-container: #93000a;
|
|
--on-error: #690005;
|
|
--on-error-container: #ffdad6;
|
|
|
|
--surface: #131313;
|
|
--surface-container-lowest: #0b0b0b;
|
|
--surface-container-low: #1b1b1b;
|
|
--surface-container: #201f1f;
|
|
--surface-container-high: #2a2a2a;
|
|
--surface-container-highest: #353535;
|
|
|
|
--on-surface: #f5f5fa;
|
|
--on-surface-variant: #b4b4c3;
|
|
--outline: #3c3c4b;
|
|
--outline-variant: #2d2d37;
|
|
|
|
--ease-ice: cubic-bezier(0.4, 0, 0.2, 1);
|
|
--shadow-ambient: 0 40px 80px -20px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
@theme {
|
|
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
|
|
--font-headline: 'Inter', sans-serif;
|
|
--font-body: 'Inter', sans-serif;
|
|
|
|
--color-primary: var(--primary);
|
|
--color-primary-container: var(--primary-container);
|
|
--color-on-primary: var(--on-primary);
|
|
--color-on-primary-container: var(--on-primary-container);
|
|
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-container: var(--secondary-container);
|
|
--color-on-secondary: var(--on-secondary);
|
|
--color-on-secondary-container: var(--on-secondary-container);
|
|
|
|
--color-tertiary: var(--tertiary);
|
|
--color-tertiary-container: var(--tertiary-container);
|
|
--color-on-tertiary: var(--on-tertiary);
|
|
--color-on-tertiary-container: var(--on-tertiary-container);
|
|
|
|
--color-error: var(--error);
|
|
--color-error-container: var(--error-container);
|
|
--color-on-error: var(--on-error);
|
|
--color-on-error-container: var(--on-error-container);
|
|
|
|
--color-surface: var(--surface);
|
|
--color-surface-container-lowest: var(--surface-container-lowest);
|
|
--color-surface-container-low: var(--surface-container-low);
|
|
--color-surface-container: var(--surface-container);
|
|
--color-surface-container-high: var(--surface-container-high);
|
|
--color-surface-container-highest: var(--surface-container-highest);
|
|
|
|
--color-on-surface: var(--on-surface);
|
|
--color-on-surface-variant: var(--on-surface-variant);
|
|
--color-outline: var(--outline);
|
|
--color-outline-variant: var(--outline-variant);
|
|
|
|
--animate-kinetic-in: slideInUp 0.6s var(--ease-ice) forwards;
|
|
}
|
|
|
|
/* Global resets and base styles */
|
|
html,
|
|
body,
|
|
#root {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
background-color: #131313 !important;
|
|
/* Force to Obsidian surface */
|
|
color: #f5f5fa !important;
|
|
/* Force to high-contrast white */
|
|
font-family: var(--font-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* Base style for all elements if they inherit color incorrectly */
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Kinetic Core Components */
|
|
.knot-card {
|
|
background-color: var(--surface-container-low) !important;
|
|
border-radius: 2rem;
|
|
/* 32px */
|
|
transition: all 0.4s var(--ease-ice);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.knot-card-active {
|
|
background-color: var(--surface-container) !important;
|
|
}
|
|
|
|
.knot-input-group {
|
|
background-color: rgba(53, 53, 53, 0.4) !important;
|
|
border-radius: 1.75rem;
|
|
padding: 1.25rem 1.6rem;
|
|
border: 1px solid rgba(154, 203, 255, 0.1);
|
|
transition: all 0.4s var(--ease-ice);
|
|
display: flex;
|
|
flex-direction: column;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.knot-input-group:focus-within {
|
|
background-color: rgba(53, 53, 53, 0.6) !important;
|
|
border-color: #9acbff !important;
|
|
box-shadow: 0 0 0 1px #9acbff, 0 0 40px rgba(154, 203, 255, 0.1);
|
|
}
|
|
|
|
.knot-input-group input {
|
|
background: transparent !important;
|
|
border: none !important;
|
|
outline: none !important;
|
|
width: 100%;
|
|
color: #f5f5fa !important;
|
|
}
|
|
|
|
.knot-button-primary {
|
|
background: linear-gradient(135deg, #9acbff, #3096e5) !important;
|
|
color: #e0f2ff !important;
|
|
border-radius: 1.5rem;
|
|
font-weight: 900;
|
|
letter-spacing: 0.05em;
|
|
transition: all 0.4s var(--ease-ice);
|
|
}
|
|
|
|
.knot-button-primary:hover {
|
|
transform: translateY(-2px);
|
|
filter: brightness(1.1);
|
|
box-shadow: 0 24px 32px -12px rgba(48, 150, 229, 0.4);
|
|
}
|
|
|
|
/* Utilities */
|
|
.glass-effect {
|
|
backdrop-filter: blur(20px);
|
|
background: rgba(19, 19, 19, 0.6);
|
|
}
|
|
|
|
.slide-on-ice {
|
|
transition: all 0.4s var(--ease-ice);
|
|
}
|
|
|
|
.animate-kinetic {
|
|
animation: var(--animate-kinetic-in);
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: var(--outline-variant);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/* Overrides for legacy code */
|
|
.bg-surface {
|
|
background-color: var(--surface) !important;
|
|
}
|
|
|
|
.bg-surface-container-low {
|
|
background-color: var(--surface-container-low) !important;
|
|
}
|
|
|
|
.bg-surface-container-lowest {
|
|
background-color: var(--surface-container-lowest) !important;
|
|
}
|
|
|
|
.bg-surface-container-high {
|
|
background-color: var(--surface-container-high) !important;
|
|
}
|
|
|
|
.text-on-surface {
|
|
color: var(--on-surface) !important;
|
|
}
|
|
|
|
.text-on-surface-variant {
|
|
color: var(--on-surface-variant) !important;
|
|
}
|
|
|
|
.text-primary {
|
|
color: var(--primary) !important;
|
|
}
|
|
|
|
.text-accent {
|
|
color: #9acbff !important;
|
|
}
|
|
|
|
/* Bubble overrides */
|
|
.bubble-sent {
|
|
background: linear-gradient(135deg, #9acbff, #3096e5) !important;
|
|
color: #e0f2ff !important;
|
|
border-radius: 1.5rem;
|
|
border-bottom-right-radius: 0.25rem;
|
|
}
|
|
|
|
.bubble-received {
|
|
background: var(--surface-container-highest) !important;
|
|
color: var(--on-surface) !important;
|
|
border-radius: 1.5rem;
|
|
border-bottom-left-radius: 0.25rem;
|
|
}
|
|
|
|
/* Autofill fix - prevent browser blue background on dark theme */
|
|
input:-webkit-autofill,
|
|
input:-webkit-autofill:hover,
|
|
input:-webkit-autofill:focus,
|
|
input:-webkit-autofill:active {
|
|
-webkit-box-shadow: 0 0 0 1000px #0b0b0b inset !important;
|
|
-webkit-text-fill-color: #f5f5fa !important;
|
|
transition: background-color 5000s ease-in-out 0s;
|
|
}
|
|
|
|
@keyframes highlightFlash {
|
|
0% { background-color: rgba(0, 163, 255, 0.3); }
|
|
100% { background-color: transparent; }
|
|
}
|
|
|
|
@keyframes callWave {
|
|
0% { transform: scale(1); opacity: 0.5; }
|
|
100% { transform: scale(1.5); opacity: 0; }
|
|
}
|
|
|
|
@keyframes wiggle {
|
|
0%, 100% { transform: rotate(0); }
|
|
25% { transform: rotate(-10deg); }
|
|
75% { transform: rotate(10deg); }
|
|
}
|
|
|
|
.animate-call-wave {
|
|
animation: callWave 2s cubic-bezier(0, 0, 0.2, 1) infinite;
|
|
}
|
|
|
|
.animate-call-wave-delayed {
|
|
animation: callWave 2s cubic-bezier(0, 0, 0.2, 1) infinite;
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
.animate-wiggle {
|
|
animation: wiggle 0.5s ease-in-out infinite;
|
|
}
|
|
|
|
.highlight-message {
|
|
animation: highlightFlash 2s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
|
|
border-radius: 12px;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* Mobile & Safe Area Utilities */
|
|
.safe-area-bottom {
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
.safe-area-top {
|
|
padding-top: env(safe-area-inset-top);
|
|
}
|
|
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
|
|
@supports (padding: env(safe-area-inset-top)) {
|
|
body {
|
|
padding-top: env(safe-area-inset-top);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
padding-left: env(safe-area-inset-left);
|
|
padding-right: env(safe-area-inset-right);
|
|
}
|
|
} |