/* ============================================================ ColdBoot — Homepage Styles (Premium Redesign) ============================================================ Drop-in replacement for coldboot-home.css Requires Google Fonts loaded in : DM Serif Display, DM Sans, JetBrains Mono ============================================================ */ /* --- Premium design tokens (override/extend existing vars) --- */ :root { --cb-bg: #FAF9F7; --cb-bg-warm: #F5F3EF; --cb-surface: #FFFFFF; --cb-ink: #1A1917; --cb-ink-soft: #4A4842; --cb-ink-muted: #8A8780; --cb-ink-faint: #B5B1AA; --cb-border-color: #E8E5DF; --cb-border-light: #F0EDE8; --cb-accent: #C8553D; --cb-accent-soft: #D4776A; --cb-radius-lg: 10px; --cb-radius-sm: 6px; --cb-shadow-sm: 0 1px 3px rgba(26,25,23,0.04); --cb-shadow-md: 0 4px 16px rgba(26,25,23,0.06); --cb-shadow-lg: 0 8px 32px rgba(26,25,23,0.08); --cb-ease: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --cb-font-display: 'DM Serif Display', Georgia, serif; --cb-font-body: 'DM Sans', -apple-system, sans-serif; --cb-font-mono: 'JetBrains Mono', monospace; } /* --- Base page background --- */ body { background: var(--cb-bg); } /* --- Homepage layout --- */ .cb-home { max-width: 1120px; margin: 0 auto; padding: 2rem 2rem 4rem; font-family: var(--cb-font-body); color: var(--cb-ink); -webkit-font-smoothing: antialiased; } /* --- Hero --- */ .cb-home__hero { text-align: center; padding: 3.5rem 0 2rem; } .cb-home__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--cb-accent); margin-bottom: 1.25rem; } .cb-home__eyebrow::before, .cb-home__eyebrow::after { content: ''; width: 24px; height: 1px; background: var(--cb-accent-soft); } .cb-home__title { font-family: var(--cb-font-display); font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 400; letter-spacing: -0.025em; margin: 0 0 0.75rem; line-height: 1.15; color: var(--cb-ink); } .cb-home__subtitle { font-size: 1.05rem; color: var(--cb-ink-soft); margin: 0 auto 2.5rem; font-weight: 400; max-width: 520px; line-height: 1.6; } /* --- Stats strip (NEW — add
to PHP) --- */ .cb-home__stats { display: flex; justify-content: center; gap: 2.5rem; padding: 1.5rem 0 0; margin-bottom: 0.5rem; } .cb-stat { text-align: center; } .cb-stat__number { font-family: var(--cb-font-display); font-size: 1.5rem; color: var(--cb-ink); line-height: 1; } .cb-stat__label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cb-ink-muted); margin-top: 0.25rem; } /* --- Search --- */ .cb-home__search-wrap { max-width: 560px; margin: 0 auto 1rem; position: relative; } .cb-home__search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--cb-ink-faint); pointer-events: none; } .cb-home__search { width: 100%; padding: 0.85rem 1rem 0.85rem 2.75rem; font-family: var(--cb-font-body); font-size: 0.95rem; border: 1.5px solid var(--cb-border-color); border-radius: 50px; background: var(--cb-surface); color: var(--cb-ink); outline: none; transition: border-color var(--cb-ease), box-shadow var(--cb-ease); box-shadow: var(--cb-shadow-sm); box-sizing: border-box; } .cb-home__search:focus { border-color: var(--cb-ink-faint); box-shadow: var(--cb-shadow-md); } .cb-home__search::placeholder { color: var(--cb-ink-faint); } /* --- Filters --- */ .cb-home__filters { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--cb-border-color); } .cb-filter { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; min-width: 155px; } .cb-filter__label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cb-ink-muted); } .cb-filter__select { padding: 0.55rem 2rem 0.55rem 0.7rem; font-family: var(--cb-font-body); font-size: 0.82rem; font-weight: 500; border: 1.5px solid var(--cb-border-color); border-radius: var(--cb-radius-sm); background: var(--cb-surface); color: var(--cb-ink); cursor: pointer; outline: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23B5B1AA'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.65rem center; padding-right: 2rem; transition: border-color var(--cb-ease); } .cb-filter__select:focus { border-color: var(--cb-ink-faint); } .cb-filter__clear { padding: 0.55rem 1.1rem; font-family: var(--cb-font-body); font-size: 0.78rem; font-weight: 600; border: 1.5px solid var(--cb-border-color); border-radius: var(--cb-radius-sm); background: var(--cb-bg-warm); color: var(--cb-ink-soft); cursor: pointer; transition: all var(--cb-ease); white-space: nowrap; } .cb-filter__clear:hover { background: var(--cb-border-color); } /* --- Results info --- */ .cb-home__results-info { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; color: var(--cb-ink-muted); margin-bottom: 1.25rem; font-weight: 600; } .cb-home__results-info strong { color: var(--cb-ink); font-weight: 700; } /* --- Cards grid --- */ .cb-home__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1rem; } .cb-home__empty, .cb-home__no-results { grid-column: 1 / -1; text-align: center; color: var(--cb-ink-muted); padding: 3rem 0; font-family: var(--cb-font-body); font-size: 0.9rem; } /* --- Game card --- */ .cb-card { display: flex; flex-direction: column; background: var(--cb-surface); border: 1px solid var(--cb-border-color); border-radius: var(--cb-radius-lg); padding: 1.25rem; text-decoration: none; color: var(--cb-ink); transition: all var(--cb-ease); position: relative; overflow: hidden; } /* Colored top-bar on hover */ .cb-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; opacity: 0; transition: opacity var(--cb-ease); } .cb-card:hover { border-color: var(--cb-border-color); box-shadow: var(--cb-shadow-lg); transform: translateY(-2px); } .cb-card:hover::before { opacity: 1; } /* Verdict-colored top accent */ .cb-card--strongly-recommended::before, .cb-card--recommended::before { background: var(--cb-green, #2D7A4F); } .cb-card--mixed::before { background: var(--cb-yellow, #A07E1B); } .cb-card--not-recommended::before, .cb-card--skip::before { background: var(--cb-red, #B33A3A); } .cb-card__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.5rem; } .cb-card__title { font-family: var(--cb-font-display); font-size: 1.05rem; font-weight: 400; line-height: 1.3; margin: 0; flex: 1; letter-spacing: -0.01em; } .cb-card__badge { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.2rem 0.55rem; border-radius: 4px; white-space: nowrap; flex-shrink: 0; } .cb-card__badge--strongly-recommended { background: var(--cb-green-bg, #E8F5ED); color: var(--cb-green, #2D7A4F); } .cb-card__badge--recommended { background: var(--cb-green-bg, #E8F5ED); color: var(--cb-green, #2D7A4F); } .cb-card__badge--mixed { background: var(--cb-yellow-bg, #FFF8E1); color: var(--cb-yellow, #A07E1B); } .cb-card__badge--not-recommended { background: var(--cb-red-bg, #FDEAEA); color: var(--cb-red, #B33A3A); } .cb-card__badge--skip { background: var(--cb-red-bg, #FDEAEA); color: var(--cb-red, #B33A3A); } .cb-card__meta { font-size: 0.78rem; color: var(--cb-ink-muted); margin: 0 0 0.2rem; } .cb-card__year::before { content: ' · '; color: var(--cb-border-color); } .cb-card__genres { font-size: 0.75rem; color: var(--cb-ink-faint); margin: 0 0 0.75rem; line-height: 1.4; } .cb-card__tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.75rem; } /* --- Mini tags on cards --- */ .cb-minitag { display: inline-flex; align-items: center; gap: 0; font-size: 0.65rem; border-radius: 4px; overflow: hidden; border: 1px solid var(--cb-border-light); } .cb-minitag__label { padding: 0.15rem 0.35rem; background: var(--cb-bg-warm); color: var(--cb-ink-muted); font-weight: 500; } .cb-minitag__value { padding: 0.15rem 0.4rem; font-weight: 700; } .cb-minitag__value--very-low, .cb-minitag__value--low, .cb-minitag__value--yes { background: var(--cb-green-bg, #E8F5ED); color: var(--cb-green, #2D7A4F); } .cb-minitag__value--moderate, .cb-minitag__value--mostly { background: var(--cb-yellow-bg, #FFF8E1); color: var(--cb-yellow, #A07E1B); } .cb-minitag__value--high, .cb-minitag__value--very-high, .cb-minitag__value--no { background: var(--cb-red-bg, #FDEAEA); color: var(--cb-red, #B33A3A); } .cb-card__access { font-size: 0.75rem; color: var(--cb-ink-soft); margin: 0 0 0.35rem; line-height: 1.4; } .cb-card__barrier { font-size: 0.72rem; color: var(--cb-ink-muted); margin: auto 0 0; padding-top: 0.65rem; border-top: 1px solid var(--cb-border-light); font-style: italic; line-height: 1.45; } /* --- Load more --- */ .cb-home__load-more-wrap { text-align: center; padding: 2rem 0 0; } .cb-home__load-more { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 2rem; font-family: var(--cb-font-body); font-size: 0.85rem; font-weight: 600; color: var(--cb-ink); background: var(--cb-surface); border: 1.5px solid var(--cb-border-color); border-radius: 50px; cursor: pointer; transition: all var(--cb-ease); box-shadow: var(--cb-shadow-sm); } .cb-home__load-more:hover { border-color: var(--cb-ink-faint); box-shadow: var(--cb-shadow-md); transform: translateY(-1px); } /* --- Card entrance animation --- */ @keyframes cb-card-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .cb-card { animation: cb-card-in 0.3s ease both; } /* --- Responsive --- */ @media (max-width: 768px) { .cb-home { padding: 1.5rem 1.25rem 3rem; } .cb-home__hero { padding: 2.5rem 0 1.5rem; } .cb-home__title { font-size: 1.75rem; } .cb-home__stats { gap: 1.5rem; } .cb-home__filters { flex-direction: column; align-items: stretch; } .cb-filter { min-width: 0; } .cb-home__grid { grid-template-columns: 1fr; } } @media (min-width: 1100px) { .cb-home { max-width: 1120px; } .cb-home__grid { grid-template-columns: repeat(3, 1fr); } }