/* ============================================================ home-vault.css — Home/Index redesign based on media-collection.html Scoped to pages that opt in via or the page sets Layout = null. Avoid global selectors that would leak into Bootstrap-based pages. ============================================================ */ .home-vault { --bg: #0a0a0f; --surface: #111118; --surface2: #1a1a24; --border: rgba(255,255,255,0.06); --text: #e8e8f0; --muted: #6b6b80; --accent: #e63946; --accent2: #f4a261; --accent3: #a8dadc; --accent4: #c77dff; --accent5: #06d6a0; --glow: rgba(230,57,70,0.3); background-color: var(--bg); background-image: linear-gradient(180deg, rgba(10,10,15,0.55) 0%, rgba(10,10,15,0.62) 60%, rgba(10,10,15,0.72) 100%), url('/images/SeatBackground.jpg'); background-size: cover; background-position: center top; background-attachment: fixed; background-repeat: no-repeat; color: var(--text); font-family: 'DM Sans', sans-serif; overflow-x: hidden; min-height: 100vh; margin: 0; } .home-vault * { box-sizing: border-box; } .home-vault html { scroll-behavior: smooth; } /* noise overlay */ .home-vault::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events: none; z-index: 1000; opacity: 0.4; } /* ── HERO ── */ .hv-hero { position: relative; height: 88vh; min-height: 560px; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 5vw 60px; overflow: hidden; } .hv-hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 60% 40%, rgba(230,57,70,0.10) 0%, transparent 60%), radial-gradient(ellipse 50% 70% at 85% 20%, rgba(167,120,255,0.06) 0%, transparent 50%), linear-gradient(180deg, transparent 40%, rgba(10,10,15,0.85) 100%); } .hv-hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,0.4) 30%, transparent 80%); } .hv-hero-cards { position: absolute; right: 5vw; top: 50%; transform: translateY(-55%); display: flex; gap: 16px; align-items: flex-end; animation: hvHeroFloat 6s ease-in-out infinite; } @keyframes hvHeroFloat { 0%, 100% { transform: translateY(-55%); } 50% { transform: translateY(-58%); } } .hv-hero-card-preview { border-radius: 10px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.7); border: 1px solid rgba(255,255,255,0.08); transition: transform 0.3s ease; flex-shrink: 0; } .hv-hero-card-preview:nth-child(1) { width: 110px; height: 160px; opacity: 0.5; } .hv-hero-card-preview:nth-child(2) { width: 130px; height: 190px; opacity: 0.75; transform: translateY(-10px); } .hv-hero-card-preview:nth-child(3) { width: 150px; height: 220px; opacity: 1; transform: translateY(-20px); } .hv-hero-card-preview:nth-child(4) { width: 130px; height: 190px; opacity: 0.75; transform: translateY(-10px); } .hv-hero-card-preview:nth-child(5) { width: 110px; height: 160px; opacity: 0.5; } .hcp-inner { width: 100%; height: 100%; display: flex; align-items: flex-end; position: relative; } .hcp-label { font-size: 9px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px; background: linear-gradient(transparent, rgba(0,0,0,0.9)); width: 100%; color: rgba(255,255,255,0.8); } .hcp-1 { background: linear-gradient(135deg, #1a0a2e, #e63946, #ff6b35); } .hcp-2 { background: linear-gradient(135deg, #0d1b2a, #1e3a5f, #4fc3f7); } .hcp-3 { background: linear-gradient(135deg, #1a2510, #2d4a1e, #6bcb77); } .hcp-4 { background: linear-gradient(135deg, #2a1a0a, #8b4513, #f4a261); } .hcp-5 { background: linear-gradient(135deg, #1a0a2e, #4a0e8f, #c77dff); } .hv-hero-shape { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; } .hv-hero-shape-1 { width: 400px; height: 400px; background: rgba(230,57,70,0.08); top: -100px; left: -100px; } .hv-hero-shape-2 { width: 300px; height: 300px; background: rgba(199,125,255,0.06); bottom: 100px; right: 20%; } .hv-hero-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; } .hv-hero-eyebrow::before { content: ''; display: block; width: 30px; height: 1px; background: var(--accent); } .hv-hero-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(72px, 10vw, 140px); line-height: 0.9; letter-spacing: 0.02em; color: var(--text); position: relative; z-index: 2; margin: 0; } .hv-hero-title span { color: var(--accent); display: block; } .hv-hero-sub { font-size: 15px; color: var(--muted); margin-top: 20px; max-width: 380px; line-height: 1.6; position: relative; z-index: 2; } .hv-hero-stats { display: flex; gap: 36px; margin-top: 36px; position: relative; z-index: 2; flex-wrap: wrap; } .hv-stat { display: flex; flex-direction: column; gap: 4px; } .hv-stat-num { font-family: 'Bebas Neue', sans-serif; font-size: 36px; color: var(--text); line-height: 1; } .hv-stat-label { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); } /* ── NAV ── */ .hv-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 500; padding: 20px 5vw; display: flex; align-items: center; justify-content: space-between; background: linear-gradient(180deg, rgba(10,10,15,0.95) 0%, transparent 100%); backdrop-filter: blur(0px); transition: backdrop-filter 0.3s, background 0.3s; } .hv-nav.scrolled { background: rgba(10,10,15,0.96); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); } .hv-nav-logo { font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: 0.1em; color: var(--accent); text-shadow: 0 0 30px var(--glow); } .hv-nav-links { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; } .hv-nav-links a { text-decoration: none; font-size: 13px; font-weight: 500; letter-spacing: 0.05em; color: var(--muted); transition: color 0.2s; position: relative; } .hv-nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--accent); transition: width 0.2s; } .hv-nav-links a:hover { color: var(--text); } .hv-nav-links a:hover::after { width: 100%; } .hv-nav-right { display: flex; align-items: center; gap: 14px; } .hv-search-bar { background: rgba(255,255,255,0.06); border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; font-size: 13px; font-family: 'DM Sans', sans-serif; color: var(--text); width: 200px; outline: none; transition: border-color 0.2s, background 0.2s; } .hv-search-bar::placeholder { color: var(--muted); } .hv-search-bar:focus { border-color: rgba(230,57,70,0.4); background: rgba(255,255,255,0.09); } .hv-nav-icon { width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: color 0.2s, background 0.2s, border-color 0.2s; padding: 0; } .hv-nav-icon svg { width: 16px; height: 16px; stroke: currentColor; } .hv-nav-icon:hover { color: var(--text); background: rgba(255,255,255,0.09); } .hv-nav-icon.listening { color: var(--accent5); border-color: rgba(6,214,160,0.35); } .hv-nav-avatar { width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), #ff6b35); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; letter-spacing: 0.05em; color: #fff; } /* ── MAIN ── */ .hv-main { padding: 110px 5vw 80px; position: relative; z-index: 2; } .hv-category { margin-bottom: 60px; animation: hvFadeUp 0.6s ease both; } @keyframes hvFadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .hv-category:nth-child(1) { animation-delay: 0.1s; } .hv-category:nth-child(2) { animation-delay: 0.2s; } .hv-category:nth-child(3) { animation-delay: 0.3s; } .hv-category:nth-child(4) { animation-delay: 0.4s; } .hv-category:nth-child(5) { animation-delay: 0.5s; } .hv-category-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; } .hv-category-title-wrap { display: flex; align-items: center; gap: 14px; } .hv-category-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .hv-category-title { font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: 0.06em; color: var(--text); } .hv-category-count { font-size: 12px; color: var(--muted); margin-left: 8px; font-weight: 400; letter-spacing: 0.05em; } .hv-category-accent-bar { height: 2px; width: 40px; border-radius: 2px; margin-top: 6px; background: var(--accent); } .hv-view-all { font-size: 12px; color: var(--muted); text-decoration: none; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; transition: color 0.2s; display: flex; align-items: center; gap: 6px; background: transparent; border: none; cursor: pointer; font-family: inherit; } .hv-view-all:hover { color: var(--text); } .hv-view-all::after { content: '→'; } /* ── SCROLL ROW ── */ .hv-scroll-row-wrapper { position: relative; } .hv-scroll-row { display: flex; gap: 14px; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 12px; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; } .hv-scroll-row::-webkit-scrollbar { display: none; } .hv-scroll-row:active { cursor: grabbing; } .hv-scroll-row-wrapper::after { content: ''; position: absolute; right: 0; top: 0; bottom: 12px; width: 80px; background: linear-gradient(90deg, transparent, var(--bg)); pointer-events: none; z-index: 10; } /* ── CARDS ── */ .hv-card { flex-shrink: 0; border-radius: 10px; overflow: hidden; position: relative; cursor: pointer; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; border: 1px solid var(--border); background: var(--surface2); color: inherit; text-align: left; font-family: inherit; padding: 0; } .hv-card-portrait { width: 150px; height: 220px; } .hv-card-landscape { width: 200px; height: 130px; } .hv-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 10; } .hv-card-thumb { width: 100%; height: 100%; position: relative; overflow: hidden; } .hv-card-pattern { position: absolute; inset: 0; opacity: 0.12; background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4) 0%, transparent 50%), radial-gradient(circle at 70% 70%, rgba(255,255,255,0.15) 0%, transparent 40%); } .hv-card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.9) 100%); } .hv-card-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px 12px 12px; } .hv-card-badge { display: none; font-size: 8px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; margin-bottom: 6px; background: rgba(255,255,255,0.15); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.2); color: #fff; } .hv-card-name { font-size: 12px; font-weight: 600; color: #fff; line-height: 1.3; letter-spacing: 0.01em; } .hv-card-meta { font-size: 10px; color: rgba(255,255,255,0.5); margin-top: 4px; font-weight: 400; } .hv-card-hover-info { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; padding: 16px; z-index: 4; } .hv-card-hover-info > *:not(.hv-play-btn) { display: none; } .hv-play-btn { width: 56px; height: 56px; border-radius: 50%; background: rgba(230,57,70,0.85); display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; box-shadow: 0 0 24px rgba(0,0,0,0.4); opacity: 0.3; transition: opacity 0.2s; } .hv-card:hover .hv-play-btn { opacity: 0.9; } .hv-card-hover-title, .hv-card-hover-detail { display: none; } /* progress bar for continue-watching cards */ .hv-progress-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.12); z-index: 3; } .hv-progress-bar > span { display: block; height: 100%; background: var(--accent); box-shadow: 0 0 8px var(--glow); } /* ── Genre art (from media-collection) ── */ .art-action { background: linear-gradient(160deg, #1a0a0a 0%, #8b1a1a 40%, #e63946 70%, #ff6b35 100%); } .art-movies { background: #000 url('/images/movie-slow.gif') center/cover no-repeat; } .art-sci-fi { background: linear-gradient(160deg, #0a0a1a 0%, #1a1a5c 40%, #3d5af1 70%, #4fc3f7 100%); } .art-comedy { background: linear-gradient(160deg, #0a1a0a 0%, #1a5c1a 40%, #4caf50 70%, #8bc34a 100%); } .art-drama { background: linear-gradient(160deg, #0a0a0a 0%, #2c2c2c 40%, #607d8b 70%, #90a4ae 100%); } .art-thriller { background: linear-gradient(160deg, #0d0012 0%, #3d0066 40%, #7b1fa2 70%, #e040fb 100%); } .art-romance { background: linear-gradient(160deg, #1a0a12 0%, #8b1a4a 40%, #e91e63 70%, #f48fb1 100%); } .art-horror { background: linear-gradient(160deg, #050505 0%, #1a0000 50%, #5c0000 100%); } .art-adventure { background: linear-gradient(160deg, #0a0800 0%, #3d2800 40%, #8b6914 70%, #ffd54f 100%); } .art-fantasy { background: linear-gradient(160deg, #0a0015 0%, #2e0052 40%, #6200ea 70%, #aa00ff 100%); } .art-mystery { background: linear-gradient(160deg, #080808 0%, #1a1a1a 40%, #37474f 70%, #546e7a 100%); } .art-shonen { background: linear-gradient(160deg, #1a0500 0%, #8b2500 40%, #f4511e 70%, #ffcc02 100%); } .art-mecha { background: linear-gradient(160deg, #000f1a 0%, #01579b 40%, #29b6f6 70%, #00e5ff 100%); } .art-classical { background: linear-gradient(160deg, #1a1000 0%, #6d4c41 40%, #a1887f 70%, #d7ccc8 100%); } .art-jazz { background: linear-gradient(160deg, #0a0000 0%, #4a0000 40%, #b71c1c 70%, #ffb300 100%); } .art-electronic{ background: linear-gradient(160deg, #000a1a 0%, #006064 40%, #00acc1 70%, #64ffda 100%); } .art-rock { background: linear-gradient(160deg, #0a0000 0%, #1a0a00 40%, #4e342e 70%, #6d4c41 100%); } .art-fiction { background: linear-gradient(160deg, #0a0a1a 0%, #1a3a5c 40%, #2196f3 70%, #80deea 100%); } .art-nonfiction{ background: linear-gradient(160deg, #0a1a0a 0%, #1b5e20 40%, #43a047 70%, #c8e6c9 100%); } /* icon backgrounds */ .icon-movies { background: rgba(230,57,70,0.15); } .icon-tv { background: rgba(76,195,247,0.15); } .icon-audio { background: rgba(244,162,97,0.15); } .icon-music { background: rgba(6,214,160,0.15); } .icon-anime { background: rgba(199,125,255,0.15); } .icon-continue { background: rgba(244,162,97,0.15); } .icon-system { background: rgba(255,255,255,0.06); } /* ── SCROLL BUTTONS ── */ .hv-scroll-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: rgba(10,10,15,0.9); border: 1px solid rgba(255,255,255,0.12); color: var(--text); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 20; transition: background 0.2s, transform 0.2s; backdrop-filter: blur(8px); } .hv-scroll-btn:hover { background: var(--accent); transform: translateY(-50%) scale(1.1); border-color: var(--accent); } .hv-scroll-btn-left { left: -18px; } .hv-scroll-btn-right { right: -18px; } @media (min-width: 768px) { .hv-scroll-btn { display: none; } .hv-scroll-row-wrapper::after { display: none; } } /* ── FOOTER ── */ .hv-footer { border-top: 1px solid var(--border); padding: 30px 5vw; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; gap: 16px; flex-wrap: wrap; } .hv-footer-logo { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 0.1em; color: var(--muted); } .hv-footer-text { font-size: 11px; color: var(--muted); letter-spacing: 0.05em; } .hv-footer-ip { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .hv-footer-ip .hv-ip-label { color: var(--muted); text-transform: uppercase; letter-spacing: 0.15em; font-size: 10px; } .hv-footer-ip .hv-ip-value { color: var(--text); font-family: 'DM Sans', monospace; font-size: 11px; } /* ── NOTIFICATIONS (from original Index) ── */ .hv-notification { position: fixed; top: 90px; right: 24px; min-width: 260px; padding: 12px 16px; border-radius: 10px; background: rgba(26,26,36,0.95); border: 1px solid var(--border); color: var(--text); font-size: 13px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); opacity: 0; transform: translateY(-10px); transition: opacity 0.25s, transform 0.25s; z-index: 2000; backdrop-filter: blur(12px); } .hv-notification.show { opacity: 1; transform: translateY(0); } .hv-notification-success { border-color: rgba(6,214,160,0.35); } .hv-notification-error { border-color: rgba(230,57,70,0.45); } .hv-notification-info { border-color: rgba(76,195,247,0.35); } /* spinner */ .spin-animation { animation: hv-spin 1s linear infinite; } @keyframes hv-spin { to { transform: rotate(360deg); } } /* ── RESPONSIVE ── */ @media (max-width: 768px) { .hv-hero-cards { display: none; } .hv-nav-links { display: none; } .hv-hero-title { font-size: 64px; } .hv-search-bar { width: 140px; } } @media (max-width: 500px) { .hv-search-bar { display: none; } .hv-nav-right { gap: 8px; } }