/* ================================ Home Page Multi-View Styles ================================ */ .home-main { width: 100%; max-width: 100vw; background: none; } .home-views { width: 100%; display: flex; flex-direction: column; } /* Common view styling */ .home-view { width: 100%; display: block; } /* List view inherits from list.css, no additional styles needed */ /* ================================ Stacked Covers View (NEW) ================================ */ .stacked-covers { display: flex; flex-direction: column; width: 100%; gap: 0; /* No gap between items */ } .stacked-cover-item { display: block; width: 100%; /* fit into a 16:9 box */ aspect-ratio: 16/9; min-width: 280px; /* Minimum width for small screens */ overflow: hidden; position: relative; cursor: pointer; text-decoration: none; color: inherit; outline: none; } .stacked-cover-item:focus { outline: 2px solid rgba(0, 0, 0, 0.2); outline-offset: -4px; } .stacked-cover-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.3s ease; } .portrait-cover { display: none; } .landscape-cover { display: block; } .stacked-cover-item:hover .stacked-cover-img { transform: scale(1.02); } .stacked-cover-fallback { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16/9; background: linear-gradient(135deg, #f3f3f3 0%, #e8e8e8 100%); color: #555; font-size: 1.2rem; font-weight: 500; text-align: center; padding: 2rem; box-sizing: border-box; } /* ================================ Responsive: Tablet & Down ================================ */ @media (max-width: 768px) { .stacked-cover-item { aspect-ratio: 9/16; } .landscape-cover { display: none; } .portrait-cover { display: block; } .portrait-cover { object-fit: cover; } .stacked-cover-fallback { aspect-ratio: 9/16; font-size: 1rem; } } @media (max-width: 480px) { .stacked-cover-item { aspect-ratio: 9/16; } .stacked-cover-fallback { font-size: 0.95rem; } } /* ================================ Dark Mode ================================ */ @media (prefers-color-scheme: dark) { .stacked-cover-fallback { background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%); color: #ccc; } .stacked-cover-item:focus { outline-color: rgba(255, 255, 255, 0.3); } } /* ================================ HUD Mode Classes for Styling Context ================================ */ /* Optional: Add visual mode indicators or styling per active view as needed */ /* HUD: show only the button that switches to the other view - when hud has .hud-mode--list, hide the list button and show the stack button - when hud has .hud-mode--stack, hide the stack button and show the list button */ .hud.hud-mode--list [data-action="switch"][data-view="list"] { display: none !important; } .hud.hud-mode--list [data-action="switch"][data-view="stack"] { display: inline-block !important; } .hud.hud-mode--stack [data-action="switch"][data-view="stack"] { display: none !important; } .hud.hud-mode--stack [data-action="switch"][data-view="list"] { display: inline-block !important; } /* Project mode: hide both view switch buttons */ .hud.hud-mode--project [data-action="switch"] { display: none !important; } /* Pre-init preference classes (set on very early) to avoid initial flash */ html.pref-home-stack #hud [data-action="switch"][data-view="stack"] { display: none !important; } html.pref-home-stack #hud [data-action="switch"][data-view="list"] { display: inline-block !important; } html.pref-home-list #hud [data-action="switch"][data-view="list"] { display: none !important; } html.pref-home-list #hud [data-action="switch"][data-view="stack"] { display: inline-block !important; } /* Also hide the list container immediately when preference is stack to prevent overlap */ /* Only hide list pre-init if stack was the starting preference AND runtime script hasn't switched yet. */ html.pref-home-stack.pre-init .home-view--list { display: none !important; }