mirror of
https://github.com/myronblair/kino-app
synced 2026-07-28 13:33:49 -05:00
emergent-agent-e1
106 lines
2.8 KiB
CSS
106 lines
2.8 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,700;9..144,900&family=Geist:wght@300;400;500;600;700&display=swap');
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
--kino-bg: #050505;
|
|
--kino-surface: #0F0F0F;
|
|
--kino-surface-2: #1A1A1A;
|
|
--kino-accent: #D9381E;
|
|
--kino-accent-hover: #ED4B32;
|
|
--kino-text: #F2F2F2;
|
|
--kino-muted: #8A8A8A;
|
|
--kino-border: #222222;
|
|
}
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 0 0% 2%;
|
|
--foreground: 0 0% 95%;
|
|
--card: 0 0% 6%;
|
|
--card-foreground: 0 0% 95%;
|
|
--popover: 0 0% 6%;
|
|
--popover-foreground: 0 0% 95%;
|
|
--primary: 9 75% 48%;
|
|
--primary-foreground: 0 0% 98%;
|
|
--secondary: 0 0% 10%;
|
|
--secondary-foreground: 0 0% 95%;
|
|
--muted: 0 0% 10%;
|
|
--muted-foreground: 0 0% 54%;
|
|
--accent: 0 0% 13%;
|
|
--accent-foreground: 0 0% 95%;
|
|
--destructive: 0 75% 50%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
--border: 0 0% 13%;
|
|
--input: 0 0% 13%;
|
|
--ring: 9 75% 48%;
|
|
--radius: 0.25rem;
|
|
}
|
|
}
|
|
|
|
* {
|
|
border-color: hsl(var(--border));
|
|
}
|
|
|
|
html, body, #root {
|
|
background-color: var(--kino-bg);
|
|
color: var(--kino-text);
|
|
font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
margin: 0;
|
|
}
|
|
|
|
.font-display {
|
|
font-family: 'Fraunces', serif;
|
|
font-feature-settings: "ss01", "ss02";
|
|
}
|
|
|
|
/* Hide scrollbars on row carousels but keep scrolling */
|
|
.no-scrollbar::-webkit-scrollbar { display: none; }
|
|
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
|
|
|
/* Selection */
|
|
::selection {
|
|
background: var(--kino-accent);
|
|
color: white;
|
|
}
|
|
|
|
/* Grain overlay */
|
|
.grain-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
opacity: 0.06;
|
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.9'/></svg>");
|
|
mix-blend-mode: overlay;
|
|
}
|
|
|
|
.glass {
|
|
background-color: rgba(15, 15, 15, 0.6);
|
|
backdrop-filter: blur(24px);
|
|
-webkit-backdrop-filter: blur(24px);
|
|
border-color: rgba(242, 242, 242, 0.08);
|
|
}
|
|
|
|
/* Smooth fade for hero gradient */
|
|
.hero-fade {
|
|
background: linear-gradient(180deg, rgba(5,5,5,0) 0%, rgba(5,5,5,0.4) 50%, rgba(5,5,5,1) 100%);
|
|
}
|
|
.hero-side-fade {
|
|
background: linear-gradient(90deg, rgba(5,5,5,0.95) 0%, rgba(5,5,5,0.6) 40%, rgba(5,5,5,0) 100%);
|
|
}
|
|
|
|
/* Page enter animation */
|
|
@keyframes fade-up {
|
|
from { opacity: 0; transform: translateY(8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.fade-up { animation: fade-up 600ms ease-out both; }
|
|
|
|
/* Custom video controls */
|
|
video::-webkit-media-controls-panel { background-color: rgba(0,0,0,0.7); }
|