00ccf95cae
- Optimized mobile image loading (180px vs 200px desktop) - Fixed Install App navigation not working on desktop - Fixed replaceChild null error in hero rendering - Added PWA icon (512x512) - Fixed back button navigation issues - Added mobile bottom padding for nav bar - Moved Get App FAB higher to avoid nav overlap - Removed unnecessary pushState from video navigation - Made Search/MyList tabs not scroll to top on mobile - Removed duplicate Android TV section from download page
109 lines
No EOL
3.3 KiB
CSS
109 lines
No EOL
3.3 KiB
CSS
/* ============================================
|
|
KV-Stream - CSS Variables
|
|
PIXEL-PERFECT NETFLIX DESIGN TOKENS
|
|
============================================ */
|
|
|
|
:root {
|
|
/* === Netflix Exact Color Palette === */
|
|
--netflix-bg: #141414;
|
|
--netflix-bg-card: #181818;
|
|
--netflix-bg-elevated: #232323;
|
|
--netflix-bg-header: rgba(20, 20, 20, 0);
|
|
--netflix-bg-header-scrolled: rgba(20, 20, 20, 0.95);
|
|
|
|
--netflix-red: #e50914;
|
|
--netflix-red-hover: #f40612;
|
|
--netflix-red-dark: #b20710;
|
|
|
|
--netflix-text: #ffffff;
|
|
--netflix-text-secondary: #b3b3b3;
|
|
--netflix-text-muted: #8c8c8c;
|
|
--netflix-text-dim: #666666;
|
|
|
|
--netflix-green: #46d369;
|
|
--netflix-border: rgba(255, 255, 255, 0.1);
|
|
|
|
/* Legacy compatibility aliases */
|
|
--color-bg-primary: var(--netflix-bg);
|
|
--color-bg-secondary: var(--netflix-bg-card);
|
|
--color-bg-tertiary: var(--netflix-bg-elevated);
|
|
--color-bg-elevated: var(--netflix-bg-elevated);
|
|
--color-bg-card: var(--netflix-bg-card);
|
|
--color-text-primary: var(--netflix-text);
|
|
--color-text-secondary: var(--netflix-text-secondary);
|
|
--color-text-tertiary: var(--netflix-text-muted);
|
|
--color-accent: var(--netflix-red);
|
|
--color-border: var(--netflix-border);
|
|
--apple-bg-primary: var(--netflix-bg);
|
|
--apple-text-primary: var(--netflix-text);
|
|
--apple-accent: var(--netflix-red);
|
|
|
|
/* === Netflix Card Specifications === */
|
|
--card-width-desktop: 200px;
|
|
--card-width-tablet: 160px;
|
|
--card-width-mobile: 110px;
|
|
--card-aspect-ratio: 2 / 3;
|
|
/* Portrait posters */
|
|
--card-gap: 8px;
|
|
--card-radius: 4px;
|
|
--card-hover-scale: 1.3;
|
|
--card-hover-delay: 300ms;
|
|
|
|
/* === Netflix Layout Specifications === */
|
|
--header-height: 68px;
|
|
--header-height-mobile: 48px;
|
|
--row-padding: 4%;
|
|
--row-margin: 3vw;
|
|
--mobile-nav-height: 56px;
|
|
|
|
/* === Netflix Typography (Netflix Sans fallback) === */
|
|
--font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
--font-heading: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
|
|
--font-size-xs: 11px;
|
|
--font-size-sm: 13px;
|
|
--font-size-base: 14px;
|
|
--font-size-lg: 16px;
|
|
--font-size-xl: 18px;
|
|
--font-size-2xl: 20px;
|
|
--font-size-3xl: 24px;
|
|
--font-size-4xl: 32px;
|
|
--font-size-hero: clamp(2rem, 4vw, 3.5rem);
|
|
|
|
--font-weight-regular: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-semibold: 600;
|
|
--font-weight-bold: 700;
|
|
|
|
--line-height-tight: 1.1;
|
|
--line-height-normal: 1.4;
|
|
--line-height-relaxed: 1.6;
|
|
|
|
/* === Netflix Button Specs === */
|
|
--btn-height: 42px;
|
|
--btn-height-sm: 32px;
|
|
--btn-radius: 4px;
|
|
--btn-padding: 0 24px;
|
|
|
|
/* === Netflix Shadows === */
|
|
--shadow-card: 0 4px 16px rgba(0, 0, 0, 0.5);
|
|
--shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.7);
|
|
--shadow-dropdown: 0 2px 10px rgba(0, 0, 0, 0.8);
|
|
--shadow-header: 0 0 10px rgba(0, 0, 0, 0.5);
|
|
|
|
/* === Netflix Transitions === */
|
|
--transition-fast: 150ms ease;
|
|
--transition-base: 250ms ease;
|
|
--transition-card: 300ms cubic-bezier(0.2, 0, 0.2, 1);
|
|
--transition-hover-delay: 300ms;
|
|
|
|
/* === Z-Index Scale === */
|
|
--z-base: 0;
|
|
--z-card: 10;
|
|
--z-card-hover: 50;
|
|
--z-row: 20;
|
|
--z-header: 100;
|
|
--z-dropdown: 150;
|
|
--z-modal: 1000;
|
|
--z-mobile-nav: 200;
|
|
} |