/** * View Modes CSS * * Provides "comfy" (spacious) and "compact" (tight) view options * for main site pages. Apply classes to body or specific containers. * * Usage: * - Spacious, comfortable layout * - Tight, efficient layout *
- Apply to specific container *
- Apply to specific container */ /* ============================================ COMFY VIEW - Spacious & Comfortable ============================================ */ .view-comfy .container, .view-comfy .games-library-container, .view-comfy .arcane-library, .view-comfy .wizards-college-landing { padding: 60px 40px; } .view-comfy .section { padding: 60px 30px; } .view-comfy .hero { padding: 80px 30px; min-height: 45vh; } .view-comfy .hero .container { padding: 0 50px; } .view-comfy .hero h1 { font-size: 3.5em; margin-bottom: 25px; } .view-comfy .hero p { font-size: 1.4em; margin-bottom: 35px; } /* Comfy Grids - More spacing between items */ .view-comfy .scrolls-shelf, .view-comfy .games-grid, .view-comfy .chapters-grid, .view-comfy .characters-grid, .view-comfy .objects-grid, .view-comfy .stories-grid, .view-comfy .songs-grid, .view-comfy .featured-grid, .view-comfy .features { gap: 45px; margin-top: 60px; } .view-comfy .features { padding: 50px 30px; } /* Comfy Cards - More padding inside */ .view-comfy .scroll-card, .view-comfy .game-card, .view-comfy .chapter-card, .view-comfy .character-card, .view-comfy .object-card, .view-comfy .story-card, .view-comfy .song-card, .view-comfy .featured-item, .view-comfy .feature { padding: 35px; border-radius: 20px; } .view-comfy .scroll-content { padding: 35px; } .view-comfy .game-content { padding: 35px; } /* Comfy Headers - More breathing room */ .view-comfy .library-header, .view-comfy .page-header, .view-comfy .welcome-header, .view-comfy .season-title { margin-bottom: 70px; padding-top: 20px; } .view-comfy .library-header h1, .view-comfy .page-header h1, .view-comfy .welcome-header h1, .view-comfy .season-title h2 { font-size: 4rem; margin-bottom: 30px; } .view-comfy .library-header p, .view-comfy .page-header p, .view-comfy .welcome-header p, .view-comfy .season-description { font-size: 1.4rem; margin-top: 20px; line-height: 1.9; } .view-comfy .season-title { padding: 0 30px; } /* Comfy Filters */ .view-comfy .library-filters { margin-bottom: 60px; padding: 30px; gap: 20px; } .view-comfy .filter-button { padding: 14px 28px; font-size: 1.05rem; } /* Comfy Typography - Larger line heights */ .view-comfy p, .view-comfy .scroll-description, .view-comfy .game-description { line-height: 1.8; margin-bottom: 20px; } .view-comfy h2 { margin-bottom: 50px; font-size: 2.8em; } .view-comfy h3 { font-size: 1.6em; margin-bottom: 15px; } /* Comfy Buttons */ .view-comfy .btn, .view-comfy .play-button, .view-comfy .btn-visit { padding: 20px 45px; font-size: 1.15em; border-radius: 30px; } /* ============================================ COMPACT VIEW - Tight & Efficient ============================================ */ .view-compact .container, .view-compact .games-library-container, .view-compact .arcane-library, .view-compact .wizards-college-landing { padding: 20px 15px; } .view-compact .section { padding: 25px 15px; } .view-compact .hero { padding: 30px 20px; min-height: 25vh; } .view-compact .hero .container { padding: 0 20px; } .view-compact .hero h1 { font-size: 2.2em; margin-bottom: 10px; } .view-compact .hero p { font-size: 1.05em; margin-bottom: 20px; } /* Compact Grids - Tighter spacing */ .view-compact .scrolls-shelf, .view-compact .games-grid, .view-compact .chapters-grid, .view-compact .characters-grid, .view-compact .objects-grid, .view-compact .stories-grid, .view-compact .songs-grid, .view-compact .featured-grid, .view-compact .features { gap: 18px; margin-top: 25px; } .view-compact .features { padding: 20px 15px; } /* Compact Cards - Less padding */ .view-compact .scroll-card, .view-compact .game-card, .view-compact .chapter-card, .view-compact .character-card, .view-compact .object-card, .view-compact .story-card, .view-compact .song-card, .view-compact .featured-item, .view-compact .feature { padding: 16px; border-radius: 10px; } .view-compact .scroll-content { padding: 16px; } .view-compact .game-content { padding: 16px; } /* Compact Headers - Less spacing */ .view-compact .library-header, .view-compact .page-header, .view-compact .welcome-header, .view-compact .season-title { margin-bottom: 30px; padding-top: 10px; } .view-compact .library-header h1, .view-compact .page-header h1, .view-compact .welcome-header h1, .view-compact .season-title h2 { font-size: 2.5rem; margin-bottom: 15px; } .view-compact .library-header p, .view-compact .page-header p, .view-compact .welcome-header p, .view-compact .season-description { font-size: 1.05rem; margin-top: 10px; line-height: 1.5; } .view-compact .season-title { padding: 0 15px; margin-bottom: 25px; } /* Compact Filters */ .view-compact .library-filters { margin-bottom: 25px; padding: 15px; gap: 10px; } .view-compact .filter-button { padding: 8px 16px; font-size: 0.9rem; } /* Compact Typography - Tighter line heights */ .view-compact p, .view-compact .scroll-description, .view-compact .game-description { line-height: 1.5; margin-bottom: 12px; font-size: 0.9em; } .view-compact h2 { margin-bottom: 25px; font-size: 2em; } .view-compact h3 { font-size: 1.2em; margin-bottom: 8px; } .view-compact .scroll-title { font-size: 1.2em; } .view-compact .game-title { font-size: 1.2em; } /* Compact Buttons */ .view-compact .btn, .view-compact .play-button, .view-compact .btn-visit { padding: 10px 20px; font-size: 0.95em; border-radius: 20px; } /* Compact Images */ .view-compact .scroll-image, .view-compact .game-thumbnail, .view-compact .chapter-image, .view-compact .character-image, .view-compact .object-image, .view-compact .story-image, .view-compact .song-image { height: 150px; } /* Compact Meta Information */ .view-compact .scroll-meta, .view-compact .game-meta { margin-top: 10px; padding-top: 10px; font-size: 0.85em; } .view-compact .scroll-badge { padding: 3px 8px; font-size: 0.75rem; } /* ============================================ RESPONSIVE ADJUSTMENTS ============================================ */ @media (max-width: 768px) { /* Comfy mobile */ .view-comfy .container, .view-comfy .games-library-container { padding: 40px 20px; } .view-comfy .scrolls-shelf, .view-comfy .games-grid { gap: 30px; } /* Compact mobile */ .view-compact .container, .view-compact .games-library-container { padding: 15px 10px; } .view-compact .scrolls-shelf, .view-compact .games-grid { gap: 15px; } .view-compact .library-header h1, .view-compact .page-header h1 { font-size: 2rem; } } /* ============================================ VIEW TOGGLE BUTTON (Optional) ============================================ */ /* Toggle Button Removed - view mode is now accessed via companion overlay menu */