/** * TGP Game Hub Archive - Modern Dark Theme * Version 2.0.0 */ /* Custom props scoped to the archive so they don't leak site-wide. Default = dark look. */ .tgp-archive { --tgp-bg: #19192a; --tgp-surface: rgba(255, 255, 255, 0.03); --tgp-surface-hover: rgba(255, 255, 255, 0.06); --tgp-border: rgba(255, 255, 255, 0.08); --tgp-border-light: rgba(255, 255, 255, 0.12); --tgp-accent: #ff8a00; --tgp-accent-hover: #ff9f2e; --tgp-text: #f0f0f5; --tgp-text-muted: rgba(255, 255, 255, 0.65); --tgp-radius: 10px; --tgp-radius-sm: 6px; --tgp-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); --tgp-transition: 0.15s ease; } /* Light-mode fallback: when Foxiz is NOT in dark mode, use solid surfaces so cards aren't white-on-white. Foxiz toggles a dark class on ; absence of it means light scheme. */ body:not(.dark-scheme):not(.is-dark) .tgp-archive { --tgp-bg: #f4f5f8; --tgp-surface: #ffffff; --tgp-surface-hover: #eef0f5; --tgp-border: #e2e5ec; --tgp-border-light: #cfd4de; --tgp-text: #1a1a2a; --tgp-text-muted: #5a6072; --tgp-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } /* Layout */ .tgp-archive { background: var(--tgp-bg); min-height: 100vh; padding-bottom: 60px; } .tgp-container { max-width: 1400px; margin: 0 auto; padding: 0 16px; } /* Hero Section */ .tgp-archive-hero { position: relative; min-height: 220px; background: var(--hero-bg) center/cover no-repeat; display: flex; align-items: flex-end; padding: 40px 16px 30px; } .tgp-archive-hero-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(25, 25, 42, 0.5) 0%, rgba(25, 25, 42, 0.7) 50%, rgba(25, 25, 42, 0.95) 100% ); } .tgp-archive-hero-content { position: relative; z-index: 2; max-width: 1400px; margin: 0 auto; width: 100%; } /* Simple Header (no hero image) */ .tgp-archive-header { padding: 40px 0 24px; } .tgp-archive-title { font-size: 1.75rem; font-weight: 800; color: var(--tgp-text); margin: 0 0 6px; line-height: 1.2; } .tgp-archive-subtitle { font-size: 0.95rem; color: var(--tgp-text-muted); margin: 0; } /* Breadcrumb */ .tgp-breadcrumb { font-size: 0.8rem; margin-bottom: 12px; } .tgp-breadcrumb a { color: var(--tgp-text-muted); text-decoration: none; transition: color var(--tgp-transition); } .tgp-breadcrumb a:hover { color: var(--tgp-accent); } .tgp-bc-sep { color: var(--tgp-text-muted); margin: 0 8px; opacity: 0.5; } .tgp-bc-current { color: var(--tgp-text); } /* Toolbar */ .tgp-toolbar, .tgp-calendar-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 16px 0; } .tgp-toolbar { margin-bottom: 8px; } .tgp-search-form { flex: 1; min-width: 200px; max-width: 320px; } .tgp-search-wrap { position: relative; } .tgp-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--tgp-text-muted); pointer-events: none; } .tgp-search-input { width: 100%; padding: 10px 14px 10px 44px; background: var(--tgp-surface); border: 1px solid var(--tgp-border); border-radius: var(--tgp-radius); color: var(--tgp-text); font-size: 0.9rem; transition: border-color var(--tgp-transition), background var(--tgp-transition); } .tgp-search-input::placeholder { color: var(--tgp-text-muted); } .tgp-search-input:focus { outline: none; border-color: var(--tgp-accent); background: var(--tgp-surface-hover); } .tgp-filters { display: flex; gap: 10px; align-items: center; } /* Shared select styling (platform + calendar pickers) */ .tgp-platform-select, .tgp-picker-select { padding: 10px 32px 10px 14px; background: var(--tgp-surface); border: 1px solid var(--tgp-border); border-radius: var(--tgp-radius); color: var(--tgp-text); font-size: 0.85rem; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; transition: border-color var(--tgp-transition); } .tgp-platform-select:hover { border-color: var(--tgp-border-light); } .tgp-platform-select:focus, .tgp-picker-select:focus { outline: none; border-color: var(--tgp-accent); } /* Shared accent buttons/links */ .tgp-calendar-link, .tgp-apply-btn, .tgp-reset-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--tgp-accent); border: none; border-radius: var(--tgp-radius); color: #000; font-size: 0.85rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background var(--tgp-transition); } .tgp-calendar-link:hover, .tgp-apply-btn:hover, .tgp-reset-btn:hover { background: var(--tgp-accent-hover); } .tgp-apply-btn { padding: 10px 18px; } @media (max-width: 640px) { .tgp-toolbar { flex-direction: column; align-items: stretch; } .tgp-search-form { max-width: none; } .tgp-filters { justify-content: space-between; } } /* A-Z Filter */ .tgp-az-filter { display: flex; flex-wrap: wrap; gap: 4px; padding: 12px 0; margin-bottom: 20px; border-top: 1px solid var(--tgp-border); border-bottom: 1px solid var(--tgp-border); } .tgp-az-btn { display: flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; background: transparent; border: 1px solid transparent; border-radius: var(--tgp-radius-sm); color: var(--tgp-text-muted); font-size: 0.8rem; font-weight: 500; text-decoration: none; transition: color var(--tgp-transition), background var(--tgp-transition); } .tgp-az-btn:hover { color: var(--tgp-text); background: var(--tgp-surface); } .tgp-az-btn.active { background: var(--tgp-accent); color: #000; font-weight: 600; } /* Grids (games + calendar share tile styling) */ .tgp-games-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (min-width: 1400px) { .tgp-games-grid { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 1024px) { .tgp-games-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .tgp-games-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } } .tgp-calendar-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } @media (max-width: 1200px) { .tgp-calendar-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 900px) { .tgp-calendar-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 540px) { .tgp-calendar-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } } /* Shared card (game tile + calendar card) */ .tgp-game-tile, .tgp-calendar-card { border-radius: var(--tgp-radius); overflow: hidden; background: var(--tgp-surface); border: 1px solid var(--tgp-border); transition: border-color var(--tgp-transition), transform var(--tgp-transition), box-shadow var(--tgp-transition); } .tgp-game-tile:hover, .tgp-calendar-card:hover { border-color: var(--tgp-border-light); transform: translateY(-2px); box-shadow: var(--tgp-shadow); } .tgp-tile-link, .tgp-cal-link { display: block; text-decoration: none; color: inherit; } .tgp-tile-image, .tgp-cal-image { position: relative; aspect-ratio: 2/3; overflow: hidden; background: #111; } .tgp-tile-image img, .tgp-cal-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .tgp-game-tile:hover .tgp-tile-image img, .tgp-calendar-card:hover .tgp-cal-image img { transform: scale(1.03); } .tgp-tile-placeholder, .tgp-cal-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #2a2a3d, #1a1a2a); } .tgp-tile-info { padding: 12px; } .tgp-cal-info { padding: 10px; } .tgp-tile-title, .tgp-cal-title { font-weight: 600; color: var(--tgp-text); margin: 0 0 4px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tgp-tile-title { font-size: 0.9rem; } .tgp-cal-title { font-size: 0.85rem; } .tgp-tile-date { display: block; font-size: 0.75rem; color: var(--tgp-accent); font-weight: 500; } .tgp-tile-platforms, .tgp-cal-platforms { display: block; font-size: 0.7rem; color: var(--tgp-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tgp-tile-platforms { margin-top: 4px; } .tgp-cal-date-badge { position: absolute; bottom: 8px; left: 8px; padding: 4px 8px; background: var(--tgp-accent); border-radius: 4px; color: #000; font-size: 0.7rem; font-weight: 700; } /* Calendar Toolbar / Label */ .tgp-calendar-picker { display: flex; gap: 8px; align-items: center; } .tgp-back-to-hub { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--tgp-surface); border: 1px solid var(--tgp-border); border-radius: var(--tgp-radius); color: var(--tgp-text); font-size: 0.85rem; font-weight: 500; text-decoration: none; transition: border-color var(--tgp-transition), background var(--tgp-transition); } .tgp-back-to-hub:hover { background: var(--tgp-surface-hover); border-color: var(--tgp-border-light); } .tgp-calendar-label { display: flex; align-items: center; gap: 16px; padding: 12px 0 20px; border-bottom: 1px solid var(--tgp-border); margin-bottom: 20px; } .tgp-calendar-label h2 { font-size: 1.25rem; font-weight: 700; color: var(--tgp-text); margin: 0; } .tgp-clear-filter { font-size: 0.8rem; color: var(--tgp-accent); text-decoration: none; } .tgp-clear-filter:hover { text-decoration: underline; } /* Platform Archive */ .tgp-platform-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .tgp-platform-card { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; background: var(--tgp-surface); border: 1px solid var(--tgp-border); border-radius: var(--tgp-radius); color: var(--tgp-text); text-decoration: none; transition: border-color var(--tgp-transition), background var(--tgp-transition), transform var(--tgp-transition); } .tgp-platform-card:hover { background: var(--tgp-surface-hover); border-color: var(--tgp-accent); transform: translateX(4px); } .tgp-platform-name { font-size: 0.95rem; font-weight: 600; } .tgp-platform-count { font-size: 0.8rem; color: var(--tgp-text-muted); margin-left: auto; margin-right: 12px; } .tgp-platform-arrow { color: var(--tgp-text-muted); transition: color var(--tgp-transition), transform var(--tgp-transition); } .tgp-platform-card:hover .tgp-platform-arrow { color: var(--tgp-accent); transform: translateX(3px); } /* Pagination */ .tgp-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--tgp-border); } .tgp-pagination a, .tgp-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; background: var(--tgp-surface); border: 1px solid var(--tgp-border); border-radius: var(--tgp-radius-sm); color: var(--tgp-text); font-size: 0.85rem; text-decoration: none; transition: border-color var(--tgp-transition), background var(--tgp-transition); } .tgp-pagination a:hover { background: var(--tgp-surface-hover); border-color: var(--tgp-accent); } .tgp-pagination .current { background: var(--tgp-accent); border-color: var(--tgp-accent); color: #000; font-weight: 600; } .tgp-pagination .dots { background: transparent; border-color: transparent; color: var(--tgp-text-muted); } .tgp-pagination .prev, .tgp-pagination .next { padding: 0 8px; } /* No Results */ .tgp-no-results { text-align: center; padding: 60px 20px; } .tgp-no-results p { color: var(--tgp-text-muted); font-size: 1rem; margin: 0 0 20px; } .tgp-reset-btn { padding: 10px 20px; font-size: 0.9rem; } /* Keyboard focus (a11y) */ .tgp-az-btn:focus-visible, .tgp-tile-link:focus-visible, .tgp-platform-card:focus-visible, .tgp-pagination a:focus-visible { outline: 2px solid var(--tgp-accent); outline-offset: 2px; } /* Responsive */ @media (min-width: 1280px) { .tgp-container { padding: 0 48px; } .tgp-archive-hero { padding: 50px 48px 35px; } } @media (max-width: 480px) { .tgp-archive-title { font-size: 1.4rem; } .tgp-archive-subtitle { font-size: 0.85rem; } .tgp-calendar-picker { width: 100%; } .tgp-picker-select { flex: 1; } .tgp-calendar-toolbar { flex-direction: column; align-items: stretch; } .tgp-back-to-hub { justify-content: center; } }