151 lines
3.1 KiB
CSS
151 lines
3.1 KiB
CSS
/* ============================================
|
|
This OR That — Design System
|
|
Palette: "Abyss Neon"
|
|
============================================ */
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap');
|
|
|
|
/* ---------- Design Tokens ---------- */
|
|
:root {
|
|
/* Background */
|
|
--color-bg: #070711;
|
|
--color-bg-elevated: #0D0C1E;
|
|
|
|
/* Card A — Deep Violet */
|
|
--color-card-a-from: #1D0658;
|
|
--color-card-a-to: #7C3AED;
|
|
|
|
/* Card B — Electric Blue */
|
|
--color-card-b-from: #0F2027;
|
|
--color-card-b-to: #0284C7;
|
|
|
|
/* Text */
|
|
--color-text: #F8FAFC;
|
|
--color-muted: #94A3B8;
|
|
|
|
/* Stats accent per card */
|
|
--color-stat-a: #A78BFA;
|
|
--color-stat-b: #38BDF8;
|
|
|
|
/* Reactions */
|
|
--color-like: #7C3AED;
|
|
--color-dislike: #EF4444;
|
|
|
|
/* Glassmorphism surfaces */
|
|
--glass-bg: rgba(255, 255, 255, 0.07);
|
|
--glass-border: rgba(255, 255, 255, 0.12);
|
|
--glass-blur: 12px;
|
|
|
|
/* Overlay */
|
|
--overlay-bg: rgba(7, 7, 17, 0.75);
|
|
|
|
/* Typography */
|
|
--font-display: 'Unbounded', sans-serif;
|
|
--font-body: 'Inter', sans-serif;
|
|
--font-mono: 'JetBrains Mono', monospace;
|
|
|
|
/* Spacing */
|
|
--space-xs: 4px;
|
|
--space-sm: 8px;
|
|
--space-md: 16px;
|
|
--space-lg: 24px;
|
|
--space-xl: 32px;
|
|
|
|
/* Radius */
|
|
--radius-card: 20px;
|
|
--radius-sm: 10px;
|
|
--radius-full: 9999px;
|
|
|
|
/* Transitions */
|
|
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
|
|
--duration-card: 600ms;
|
|
--duration-fast: 200ms;
|
|
--duration-normal: 300ms;
|
|
|
|
/* Bottom bar height */
|
|
--bar-height: 64px;
|
|
}
|
|
|
|
/* ---------- Global Reset ---------- */
|
|
*, *::before, *::after {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body, #root {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-body);
|
|
font-size: 15px;
|
|
line-height: 1.5;
|
|
color: var(--color-text);
|
|
background: var(--color-bg);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-webkit-tap-highlight-color: transparent;
|
|
user-select: none;
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
button {
|
|
font-family: inherit;
|
|
border: none;
|
|
background: none;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
input, textarea {
|
|
font-family: inherit;
|
|
border: none;
|
|
outline: none;
|
|
background: none;
|
|
color: inherit;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* ---------- Scrollbar (for panels) ---------- */
|
|
.custom-scroll::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
|
|
.custom-scroll::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.custom-scroll::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
border-radius: var(--radius-full);
|
|
}
|
|
|
|
/* ---------- App Shell ---------- */
|
|
.app {
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
max-width: 480px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* ---------- Reduced Motion ---------- */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|