/* ============================================================ VULCAN FORGE — STYLESHEET Volcano / Lava theme. Pure CSS, no image dependencies (stone texture is built from layered CSS gradients). ============================================================ */ /* ---------- Design Tokens ---------- */ /* Chrome, Edge, Safari */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: #120a06; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ffb347 0%, #ff8c00 50%, #ff5e00 100%); border-radius: 999px; border: 2px solid #120a06; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #ffd27a 0%, #ff9f1a 50%, #ff6a00 100%); } /* Firefox */ html { scrollbar-width: thin; scrollbar-color: #ff8c00 #120a06; } :root { /* Base — deep blacks & dark grays */ --c-void: #0a0604; --c-coal: #120b07; --c-stone: #1c130d; --c-stone-2: #2a1d14; --c-ash: #3d2b1f; --c-ash-2: #5a4030; /* Lava accents */ --c-lava: #ff4500; /* lava orange */ --c-molten: #cc2200; /* molten red */ --c-ember: #ffb347; /* ember yellow */ --c-ember-soft: #ff8c42; --c-glow: #ff6a00; --c-crack: #ff7a1a; /* Text */ --t-bright: #fff4e6; --t-base: #e8d5c4; --t-muted: #b39a82; --t-faint: #7a6450; /* Fonts */ --font-display: "Cinzel", "Times New Roman", serif; --font-rugged: "Bebas Neue", "Impact", sans-serif; --font-body: "Inter", "Segoe UI", system-ui, sans-serif; /* Radii */ --r-sm: 4px; --r-md: 8px; --r-lg: 14px; /* Shadows / glows */ --glow-sm: 0 0 12px rgba(255, 69, 0, 0.45); --glow-md: 0 0 28px rgba(255, 69, 0, 0.55); --glow-lg: 0 0 60px rgba(255, 106, 0, 0.6); --glow-text: 0 0 8px rgba(255, 106, 0, 0.9), 0 0 22px rgba(255, 69, 0, 0.7), 0 0 44px rgba(204, 34, 0, 0.5); --maxw: 1200px; } /* ---------- Ash (light) theme ---------- */ /* Toggled via [data-theme="ash"] on . Kept warm-toned (not pure white) to preserve the forge identity. Lava accents stay vivid. */ [data-theme="ash"] { --c-void: #efe6dc; --c-coal: #e4d8c9; --c-stone: #d8c9b6; --c-stone-2: #cdbba4; --c-ash: #b8a48a; --c-ash-2: #9c866b; --c-lava: #d63600; --c-molten: #a51a00; --c-ember: #b86500; --c-ember-soft: #cc7400; --c-glow: #d63600; --c-crack: #c43800; --t-bright: #2a1408; --t-base: #3d2418; --t-muted: #6a4a36; --t-faint: #8a6a52; --glow-sm: 0 0 10px rgba(214, 54, 0, 0.3); --glow-md: 0 0 22px rgba(214, 54, 0, 0.35); --glow-lg: 0 0 50px rgba(214, 54, 0, 0.4); --glow-text: 0 0 6px rgba(214, 54, 0, 0.6), 0 0 16px rgba(214, 54, 0, 0.4); } [data-theme="ash"] body { background-image: radial-gradient(circle at 12% 18%, rgba(214, 54, 0, 0.05), transparent 40%), radial-gradient(circle at 88% 72%, rgba(165, 26, 0, 0.05), transparent 45%), radial-gradient(circle at 50% 100%, rgba(214, 54, 0, 0.06), transparent 55%), radial-gradient(circle at 25% 30%, rgba(156, 134, 107, 0.2) 0, transparent 1px), radial-gradient(circle at 70% 60%, rgba(156, 134, 107, 0.15) 0, transparent 1px), radial-gradient(circle at 40% 80%, rgba(184, 164, 138, 0.2) 0, transparent 1px), linear-gradient(135deg, var(--c-coal) 0%, var(--c-void) 40%, var(--c-stone) 100%); } [data-theme="ash"] .hero-logo { background: linear-gradient(180deg, #2a1408 0%, var(--c-ember) 45%, var(--c-lava) 75%, var(--c-molten) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 14px rgba(214, 54, 0, 0.4)) drop-shadow(0 0 30px rgba(165, 26, 0, 0.3)); } [data-theme="ash"] .hero-logo-404 { background: linear-gradient(180deg, #2a1408 0%, var(--c-ember) 40%, var(--c-lava) 70%, var(--c-molten) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } [data-theme="ash"] .ember-canvas { opacity: 0.5; } [data-theme="ash"] .game-card, [data-theme="ash"] .devlog-card, [data-theme="ash"] .wiki-content, [data-theme="ash"] .wiki-sidebar, [data-theme="ash"] .games-toolbar, [data-theme="ash"] .devlog-toolbar, [data-theme="ash"] .prevnext-card, [data-theme="ash"] .devlog-modal, [data-theme="ash"] .search-input, [data-theme="ash"] .sort-select { box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.08); } [data-theme="ash"] .btn-primary { color: #fff4e6; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); color: var(--t-base); line-height: 1.65; min-height: 100vh; display: flex; flex-direction: column; /* Stone texture: layered radial + linear gradients, no images */ background-color: var(--c-void); background-image: radial-gradient(circle at 12% 18%, rgba(255, 69, 0, 0.06), transparent 40%), radial-gradient(circle at 88% 72%, rgba(204, 34, 0, 0.07), transparent 45%), radial-gradient(circle at 50% 100%, rgba(255, 106, 0, 0.08), transparent 55%), /* fine grain speckle */ radial-gradient(circle at 25% 30%, rgba(90, 64, 48, 0.25) 0, transparent 1px), radial-gradient(circle at 70% 60%, rgba(90, 64, 48, 0.18) 0, transparent 1px), radial-gradient(circle at 40% 80%, rgba(61, 43, 31, 0.3) 0, transparent 1px), /* stone slabs */ linear-gradient(135deg, var(--c-coal) 0%, var(--c-void) 40%, var(--c-stone) 100%); background-size: auto, auto, auto, 6px 6px, 9px 9px, 7px 7px, 100% 100%; background-attachment: fixed; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: var(--c-ember); text-decoration: none; transition: color .2s ease, text-shadow .2s ease; } a:hover { color: var(--t-bright); text-shadow: var(--glow-sm); } ul, ol { padding-left: 1.25rem; } table { width: 100%; border-collapse: collapse; margin: 1rem 0; } /* ---------- Typography ---------- */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--t-bright); font-weight: 700; line-height: 1.15; letter-spacing: 0.02em; } h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); } h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); } h3 { font-size: clamp(1.3rem, 2.5vw, 1.7rem); } h4 { font-family: var(--font-rugged); font-size: 1.25rem; letter-spacing: 0.06em; color: var(--c-ember); } p { margin-bottom: 0.9rem; } ::selection { background: var(--c-lava); color: var(--c-void); } /* ---------- Layout helpers ---------- */ .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; } .section { padding: 5rem 0; position: relative; } .lead { font-size: 1.15rem; color: var(--t-muted); max-width: 60ch; } .text-center { text-align: center; } .mt-auto { margin-top: auto; } /* ---------- Ember canvas (background particles) ---------- */ #ember-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.9; } /* ---------- Header / Nav ---------- */ .site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(8px); background: linear-gradient(180deg, rgba(10, 6, 4, 0.92), rgba(10, 6, 4, 0.55)); border-bottom: 1px solid rgba(255, 106, 0, 0.18); box-shadow: 0 6px 30px rgba(0, 0, 0, 0.6); } .nav { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.25rem; max-width: var(--maxw); margin: 0 auto; } .brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.14em; font-size: 1.15rem; color: var(--t-bright); } .brand:hover { text-shadow: var(--glow-text); color: var(--t-bright); } .brand-mark { width: 30px; height: 30px; display: grid; place-items: center; filter: drop-shadow(0 0 6px var(--c-lava)); } .nav-links { display: flex; align-items: center; gap: 1.6rem; list-style: none; padding: 0; margin: 0; } .nav-links a { font-family: var(--font-rugged); letter-spacing: 0.12em; font-size: 1.05rem; color: var(--t-muted); position: relative; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: linear-gradient(90deg, var(--c-lava), var(--c-ember)); box-shadow: var(--glow-sm); transition: width .25s ease; } .nav-links a:hover { color: var(--t-bright); } .nav-links a:hover::after { width: 100%; } .nav-toggle { display: none; background: none; border: 1px solid rgba(255, 106, 0, 0.3); color: var(--c-ember); border-radius: var(--r-sm); width: 42px; height: 42px; font-size: 1.3rem; cursor: pointer; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-rugged); letter-spacing: 0.12em; font-size: 1.1rem; padding: 0.8rem 1.8rem; border-radius: var(--r-sm); border: none; cursor: pointer; text-transform: uppercase; transition: transform .18s ease, box-shadow .25s ease, filter .25s ease; position: relative; } .btn-primary { color: var(--c-void); background: linear-gradient(180deg, var(--c-ember) 0%, var(--c-lava) 60%, var(--c-molten) 100%); box-shadow: 0 0 0 1px rgba(255, 140, 66, 0.5), var(--glow-md); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); } .btn-primary:hover { color: var(--c-void); transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 180, 71, 0.8), var(--glow-lg); filter: brightness(1.08); } .btn-ghost { color: var(--t-bright); background: rgba(255, 69, 0, 0.06); border: 1px solid rgba(255, 106, 0, 0.45); } .btn-ghost:hover { color: var(--t-bright); background: rgba(255, 69, 0, 0.14); box-shadow: var(--glow-sm); transform: translateY(-2px); } .btn-play { font-size: 1.3rem; padding: 1rem 2.4rem; } .btn .icon { width: 1.1em; height: 1.1em; } /* ---------- Hero ---------- */ .hero { position: relative; min-height: 92vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; isolation: isolate; } /* molten glow at the base of the hero */ .hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: -10%; height: 55%; background: radial-gradient(ellipse at 50% 100%, rgba(255, 69, 0, 0.45), rgba(204, 34, 0, 0.18) 35%, transparent 70%); z-index: -1; filter: blur(8px); animation: heroPulse 6s ease-in-out infinite; } @keyframes heroPulse { 0%, 100% { opacity: 0.8; transform: scaleY(1); } 50% { opacity: 1; transform: scaleY(1.06); } } .hero-inner { position: relative; z-index: 2; padding: 6rem 1.25rem 4rem; max-width: 900px; } .hero-eyebrow { font-family: var(--font-rugged); letter-spacing: 0.4em; color: var(--c-ember); font-size: 0.95rem; margin-bottom: 1.2rem; text-shadow: var(--glow-sm); } .hero-logo { font-family: var(--font-display); font-weight: 900; font-size: clamp(3rem, 11vw, 7.5rem); line-height: 0.95; letter-spacing: 0.04em; color: var(--t-bright); text-shadow: var(--glow-text); margin-bottom: 0.4rem; background: linear-gradient(180deg, #fff4e6 0%, var(--c-ember) 45%, var(--c-lava) 75%, var(--c-molten) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; /* keep the glow on the filled text */ filter: drop-shadow(0 0 18px rgba(255, 69, 0, 0.55)) drop-shadow(0 0 40px rgba(204, 34, 0, 0.4)); } .hero-tagline { font-family: var(--font-rugged); letter-spacing: 0.18em; font-size: clamp(1.05rem, 2.4vw, 1.6rem); color: var(--t-base); margin: 1rem 0 2.4rem; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8); } .hero-cta-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .scroll-cue { position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%); color: var(--t-faint); font-family: var(--font-rugged); letter-spacing: 0.3em; font-size: 0.8rem; z-index: 2; animation: bob 2.4s ease-in-out infinite; } @keyframes bob { 0%, 100% { transform: translate(-50%, 0); opacity: 0.5; } 50% { transform: translate(-50%, 8px); opacity: 1; } } /* ---------- Lava Crack Divider ---------- */ .crack { position: relative; height: 60px; display: flex; align-items: center; justify-content: center; margin: 1rem 0; } .crack svg { width: 100%; height: 100%; display: block; } .crack .glow-line { stroke: var(--c-crack); stroke-width: 2; fill: none; filter: drop-shadow(0 0 4px var(--c-lava)) drop-shadow(0 0 10px var(--c-molten)); stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: crackDraw 2.4s ease-out forwards, crackFlicker 3.5s ease-in-out 2.4s infinite; } @keyframes crackDraw { to { stroke-dashoffset: 0; } } @keyframes crackFlicker { 0%, 100% { opacity: 0.9; } 47% { opacity: 0.9; } 50% { opacity: 0.55; } 53% { opacity: 0.95; } } /* ---------- Section heading ---------- */ .section-head { text-align: center; margin-bottom: 3rem; } .section-head .kicker { font-family: var(--font-rugged); letter-spacing: 0.35em; color: var(--c-lava); font-size: 0.9rem; text-shadow: var(--glow-sm); margin-bottom: 0.7rem; } .section-head h2 { text-shadow: var(--glow-sm); } .section-head p { color: var(--t-muted); margin: 0.8rem auto 0; max-width: 60ch; } /* ---------- Game Cards Grid ---------- */ .games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.6rem; } .game-card { position: relative; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--c-stone-2), var(--c-coal)); border: 1px solid rgba(255, 106, 0, 0.18); border-radius: var(--r-lg); overflow: hidden; cursor: pointer; transition: transform .25s ease, box-shadow .3s ease, border-color .3s ease; isolation: isolate; } .game-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10, 6, 4, 0.92) 100%); z-index: 1; pointer-events: none; } .game-card:hover { transform: translateY(-8px); border-color: var(--accent, rgba(255, 106, 0, 0.6)); box-shadow: 0 22px 48px rgba(0, 0, 0, 0.6), 0 0 30px color-mix(in srgb, var(--accent, #ff6a00) 55%, transparent); } /* accent glow strip at top of card on hover */ .game-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--accent, var(--c-lava)), transparent); opacity: 0; transition: opacity .3s ease; z-index: 3; } .game-card:hover::after { opacity: 1; } /* Featured ribbon */ .card-ribbon { position: absolute; top: 0.7rem; left: 0.7rem; z-index: 3; font-family: var(--font-rugged); letter-spacing: 0.12em; font-size: 0.68rem; padding: 0.22rem 0.6rem; border-radius: 999px; color: var(--c-void); background: linear-gradient(180deg, var(--c-ember), var(--c-lava)); box-shadow: var(--glow-sm); text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.3rem; } .card-thumb { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--c-ash), var(--c-stone)); overflow: hidden; } .card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .5s ease; } .game-card:hover .card-thumb img { transform: scale(1.1); filter: brightness(1.12) saturate(1.2); } /* shimmer sweep on card thumbnail hover */ .card-thumb::after { content: ""; position: absolute; top: 0; left: -60%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 244, 230, 0.18), transparent); transform: skewX(-20deg); transition: left .7s ease; z-index: 2; pointer-events: none; } .game-card:hover .card-thumb::after { left: 130%; } .card-thumb-empty { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--font-display); font-size: 3rem; color: rgba(255, 180, 71, 0.4); } .card-body { position: relative; z-index: 2; padding: 1.1rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; } .card-title { font-family: var(--font-display); font-size: 1.4rem; color: var(--t-bright); letter-spacing: 0.02em; } .card-tagline { color: var(--t-muted); font-size: 0.95rem; flex: 1; } .card-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; } .tag { font-family: var(--font-rugged); letter-spacing: 0.08em; font-size: 0.72rem; padding: 0.2rem 0.6rem; border-radius: 999px; color: var(--c-ember); background: rgba(255, 106, 0, 0.1); border: 1px solid rgba(255, 106, 0, 0.3); } .card-cta { margin-top: 0.5rem; font-family: var(--font-rugged); letter-spacing: 0.14em; font-size: 0.95rem; color: var(--c-lava); display: inline-flex; align-items: center; gap: 0.4rem; transition: gap .2s ease, color .2s ease; } .game-card:hover .card-cta { color: var(--c-ember); gap: 0.7rem; } /* Featured card variant (larger first card on landing) */ .games-grid.featured { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } /* ---------- About Studio ---------- */ .about-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; } .about-grid h2 { text-shadow: var(--glow-sm); } .about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.8rem; } .stat { text-align: center; padding: 1.1rem 0.6rem; background: rgba(255, 69, 0, 0.05); border: 1px solid rgba(255, 106, 0, 0.2); border-radius: var(--r-md); } .stat-num { font-family: var(--font-rugged); font-size: 2.2rem; line-height: 1; color: var(--c-ember); text-shadow: var(--glow-sm); } .stat-label { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-faint); margin-top: 0.35rem; } .anvil-visual { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-lg); background: radial-gradient(circle at 50% 35%, rgba(255, 106, 0, 0.5), transparent 55%), radial-gradient(circle at 50% 80%, rgba(204, 34, 0, 0.6), transparent 60%), linear-gradient(160deg, var(--c-stone-2), var(--c-void)); border: 1px solid rgba(255, 106, 0, 0.25); display: grid; place-items: center; overflow: hidden; box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.6), var(--glow-sm); } .anvil-visual .rune { font-family: var(--font-display); font-size: clamp(3rem, 8vw, 5rem); color: var(--c-ember); text-shadow: var(--glow-text); animation: runePulse 3.5s ease-in-out infinite; } @keyframes runePulse { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } .anvil-visual::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0, transparent 18px, rgba(255, 69, 0, 0.04) 19px, transparent 20px); mix-blend-mode: screen; pointer-events: none; } /* ---------- Game Page ---------- */ .game-hero { position: relative; padding: 4rem 0 2.5rem; overflow: hidden; } .game-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(0.35) saturate(1.2); z-index: -2; } .game-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,6,4,0.5) 0%, rgba(10,6,4,0.85) 80%, var(--c-void) 100%); z-index: -1; } .breadcrumb { font-family: var(--font-rugged); letter-spacing: 0.12em; font-size: 0.85rem; color: var(--t-faint); margin-bottom: 1rem; } .breadcrumb a { color: var(--t-muted); } .game-title-block .kicker { font-family: var(--font-rugged); letter-spacing: 0.3em; color: var(--c-lava); font-size: 0.85rem; text-shadow: var(--glow-sm); margin-bottom: 0.6rem; } .game-title-block h1 { font-size: clamp(2.4rem, 6vw, 4rem); text-shadow: var(--glow-text); } .game-title-block .tagline { font-size: 1.2rem; color: var(--t-muted); margin-top: 0.5rem; } .game-tags-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } /* Video embed */ .video-wrap { position: relative; max-width: 1000px; margin: 0 auto; border-radius: var(--r-lg); overflow: hidden; border: 1px solid rgba(255, 106, 0, 0.3); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), var(--glow-sm); background: var(--c-coal); } .video-frame { position: relative; aspect-ratio: 16 / 9; width: 100%; } .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .play-row { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin: 2rem 0; } /* Description prose */ .prose { max-width: 820px; margin: 0 auto; font-size: 1.05rem; } .prose p { color: var(--t-base); } .prose strong { color: var(--c-ember); } .prose em { color: var(--t-bright); } .prose h4 { margin-top: 1.4rem; margin-bottom: 0.5rem; } .prose ul, .prose ol { margin: 0.6rem 0 1rem; color: var(--t-base); } .prose li { margin-bottom: 0.35rem; } .prose table th, .prose table td { border: 1px solid rgba(255, 106, 0, 0.2); padding: 0.55rem 0.8rem; text-align: left; font-size: 0.95rem; } .prose table th { background: rgba(255, 69, 0, 0.12); color: var(--c-ember); font-family: var(--font-rugged); letter-spacing: 0.08em; } .prose table tr:nth-child(even) td { background: rgba(255, 69, 0, 0.03); } /* ---------- Wiki Layout ---------- */ .wiki { display: grid; grid-template-columns: 260px 1fr; gap: 2.5rem; align-items: start; max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; } .wiki-sidebar { position: sticky; top: 84px; background: linear-gradient(180deg, var(--c-stone-2), var(--c-coal)); border: 1px solid rgba(255, 106, 0, 0.2); border-radius: var(--r-lg); padding: 1.3rem 1.1rem; box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4); } .wiki-sidebar h3 { font-family: var(--font-rugged); letter-spacing: 0.18em; font-size: 0.95rem; color: var(--c-ember); margin-bottom: 1rem; padding-bottom: 0.7rem; border-bottom: 1px solid rgba(255, 106, 0, 0.2); } .wiki-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.2rem; } .wiki-nav a { display: block; padding: 0.55rem 0.7rem; border-radius: var(--r-sm); color: var(--t-muted); font-size: 0.95rem; border-left: 2px solid transparent; transition: all .2s ease; } .wiki-nav a:hover, .wiki-nav a.active { color: var(--t-bright); background: rgba(255, 69, 0, 0.08); border-left-color: var(--c-lava); text-shadow: var(--glow-sm); } .wiki-content { background: linear-gradient(180deg, rgba(28, 19, 13, 0.7), rgba(18, 11, 7, 0.7)); border: 1px solid rgba(255, 106, 0, 0.16); border-radius: var(--r-lg); padding: 2rem; min-width: 0; } .wiki-section { margin-bottom: 2.4rem; scroll-margin-top: 90px; } .wiki-section:last-child { margin-bottom: 0; } .wiki-section h3 { font-size: 1.6rem; margin-bottom: 0.9rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(255, 106, 0, 0.2); text-shadow: var(--glow-sm); } /* Mobile wiki accordion */ .wiki-accordion-toggle { display: none; } /* ---------- Footer ---------- */ .site-footer { position: relative; margin-top: auto; background: linear-gradient(180deg, var(--c-void), #050302); border-top: 1px solid rgba(255, 106, 0, 0.22); padding: 3rem 0 1.5rem; z-index: 2; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; } .footer-brand .brand { font-size: 1.3rem; margin-bottom: 0.8rem; } .footer-brand p { color: var(--t-muted); font-size: 0.95rem; max-width: 34ch; } .footer-col h4 { font-family: var(--font-rugged); letter-spacing: 0.16em; color: var(--c-ember); margin-bottom: 0.9rem; font-size: 0.95rem; } .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .footer-col a { color: var(--t-muted); font-size: 0.95rem; } .footer-col a:hover { color: var(--t-bright); } .footer-bottom { max-width: var(--maxw); margin: 2rem auto 0; padding: 1.2rem 1.25rem 0; border-top: 1px solid rgba(255, 106, 0, 0.14); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem; color: var(--t-faint); font-size: 0.85rem; } /* ---------- Misc / States ---------- */ .loading-state { color: var(--t-muted); text-align: center; padding: 4rem 0; font-family: var(--font-rugged); letter-spacing: 0.2em; } .error-state { color: var(--c-molten); text-align: center; padding: 4rem 1rem; } .error-state h2 { color: var(--c-lava); margin-bottom: 1rem; } .center-col { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; } /* fade-in on load */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; } .reveal.in { opacity: 1; transform: none; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } .anvil-visual { max-width: 420px; margin: 0 auto; } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 760px) { .nav-toggle { display: grid; place-items: center; } .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: rgba(10, 6, 4, 0.98); border-bottom: 1px solid rgba(255, 106, 0, 0.2); padding: 0.5rem 1.25rem 1rem; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .nav-links.open { opacity: 1; transform: none; pointer-events: auto; } .nav-links a { padding: 0.7rem 0.4rem; border-bottom: 1px solid rgba(255, 106, 0, 0.08); } .nav-links a::after { display: none; } .section { padding: 3.5rem 0; } /* Wiki: sidebar becomes accordion */ .wiki { grid-template-columns: 1fr; gap: 1.2rem; } .wiki-sidebar { position: static; padding: 0; background: none; border: none; box-shadow: none; } .wiki-sidebar h3 { cursor: pointer; padding: 1rem 1.1rem; margin: 0; border: 1px solid rgba(255, 106, 0, 0.2); border-radius: var(--r-md); background: linear-gradient(180deg, var(--c-stone-2), var(--c-coal)); display: flex; justify-content: space-between; align-items: center; box-shadow: var(--glow-sm); } .wiki-sidebar h3::after { content: "▾"; color: var(--c-ember); transition: transform .25s ease; } .wiki-sidebar.open h3::after { transform: rotate(180deg); } .wiki-nav { max-height: 0; overflow: hidden; transition: max-height .3s ease; padding: 0 1.1rem; } .wiki-sidebar.open .wiki-nav { max-height: 600px; padding: 0.6rem 1.1rem 1rem; } .wiki-content { padding: 1.3rem; } } @media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } .about-stats { grid-template-columns: 1fr; } .hero-cta-row { flex-direction: column; align-items: stretch; } .hero-cta-row .btn { justify-content: center; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ============================================================ ENHANCEMENTS — Phase 2 Reading progress, back-to-top, search/filter, accent theming, animated CTA, polished tables, wiki section badges. ============================================================ */ /* ---------- Reading Progress Bar ---------- */ .read-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 100; background: linear-gradient(90deg, var(--c-molten), var(--c-lava), var(--c-ember)); box-shadow: 0 0 10px var(--c-lava), 0 0 20px var(--c-molten); transition: width .08s linear; pointer-events: none; } /* ---------- Back to Top ---------- */ .back-top { position: fixed; bottom: 1.4rem; right: 1.4rem; z-index: 60; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 1px solid rgba(255, 106, 0, 0.5); background: linear-gradient(180deg, var(--c-stone-2), var(--c-coal)); color: var(--c-ember); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), var(--glow-sm); opacity: 0; transform: translateY(20px) scale(0.8); pointer-events: none; transition: opacity .3s ease, transform .3s ease, box-shadow .3s ease, color .2s ease; } .back-top.show { opacity: 1; transform: none; pointer-events: auto; } .back-top:hover { color: var(--t-bright); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), var(--glow-md); border-color: var(--c-ember); } .back-top svg { width: 22px; height: 22px; } /* ---------- Search & Filter (Games List) ---------- */ .games-toolbar { max-width: var(--maxw); margin: 0 auto 2.5rem; padding: 1.4rem 1.5rem; background: linear-gradient(180deg, var(--c-stone-2), var(--c-coal)); border: 1px solid rgba(255, 106, 0, 0.2); border-radius: var(--r-lg); box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4); } .search-wrap { position: relative; margin-bottom: 1.1rem; } .search-wrap .search-icon { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--c-ember); pointer-events: none; } .search-input { width: 100%; padding: 0.8rem 1rem 0.8rem 2.7rem; font-family: var(--font-body); font-size: 1rem; color: var(--t-bright); background: var(--c-void); border: 1px solid rgba(255, 106, 0, 0.25); border-radius: var(--r-md); transition: border-color .2s ease, box-shadow .2s ease; } .search-input::placeholder { color: var(--t-faint); } .search-input:focus { outline: none; border-color: var(--c-lava); box-shadow: var(--glow-sm); } .filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .filter-label { font-family: var(--font-rugged); letter-spacing: 0.14em; font-size: 0.8rem; color: var(--t-faint); margin-right: 0.4rem; text-transform: uppercase; } .chip { font-family: var(--font-rugged); letter-spacing: 0.08em; font-size: 0.78rem; padding: 0.35rem 0.85rem; border-radius: 999px; cursor: pointer; color: var(--t-muted); background: rgba(255, 106, 0, 0.05); border: 1px solid rgba(255, 106, 0, 0.22); transition: all .2s ease; user-select: none; } .chip:hover { color: var(--t-bright); border-color: rgba(255, 106, 0, 0.5); background: rgba(255, 106, 0, 0.12); } .chip.active { color: var(--c-void); background: linear-gradient(180deg, var(--c-ember), var(--c-lava)); border-color: var(--c-lava); box-shadow: var(--glow-sm); font-weight: 600; } .results-meta { margin-top: 1.2rem; font-family: var(--font-rugged); letter-spacing: 0.1em; font-size: 0.85rem; color: var(--t-faint); } .results-meta b { color: var(--c-ember); } .empty-results { grid-column: 1 / -1; text-align: center; padding: 3.5rem 1rem; border: 1px dashed rgba(255, 106, 0, 0.25); border-radius: var(--r-lg); background: rgba(255, 69, 0, 0.03); } .empty-results .er-icon { font-size: 2.6rem; margin-bottom: 0.8rem; filter: drop-shadow(0 0 10px var(--c-lava)); } .empty-results h3 { color: var(--c-ember); margin-bottom: 0.5rem; } .empty-results p { color: var(--t-muted); } /* ---------- Animated Play CTA pulse ---------- */ .btn-play { animation: playPulse 2.8s ease-in-out infinite; } @keyframes playPulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(255, 140, 66, 0.5), 0 0 28px rgba(255, 69, 0, 0.55); } 50% { box-shadow: 0 0 0 1px rgba(255, 180, 71, 0.8), 0 0 50px rgba(255, 106, 0, 0.7); } } /* ---------- Per-game accent theming ---------- */ .game-page-accent { --accent-bright: var(--accent, var(--c-lava)); } .game-page-accent .kicker { color: var(--accent-bright); text-shadow: 0 0 12px color-mix(in srgb, var(--accent-bright) 60%, transparent); } .game-page-accent .game-title-block h1 { text-shadow: 0 0 8px color-mix(in srgb, var(--accent-bright) 90%, transparent), 0 0 22px color-mix(in srgb, var(--accent-bright) 70%, transparent), 0 0 44px color-mix(in srgb, var(--accent-bright) 50%, transparent); } .game-page-accent .tag { color: var(--accent-bright); background: color-mix(in srgb, var(--accent-bright) 12%, transparent); border-color: color-mix(in srgb, var(--accent-bright) 35%, transparent); } .game-page-accent .btn-primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-bright) 40%, var(--c-ember)) 0%, var(--accent-bright) 60%, color-mix(in srgb, var(--accent-bright) 70%, var(--c-molten)) 100%); } .game-page-accent .wiki-section h3 { color: var(--t-bright); border-bottom-color: color-mix(in srgb, var(--accent-bright) 30%, transparent); } .game-page-accent .wiki-nav a:hover, .game-page-accent .wiki-nav a.active { border-left-color: var(--accent-bright); text-shadow: 0 0 8px color-mix(in srgb, var(--accent-bright) 60%, transparent); } .game-page-accent .crack .glow-line { stroke: var(--accent-bright); } /* ---------- Wiki section number badges ---------- */ .wiki-section { position: relative; padding-left: 3.2rem; } .wiki-section .section-num { position: absolute; left: 0; top: 0.1rem; font-family: var(--font-display); font-weight: 900; font-size: 1.1rem; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; color: var(--c-ember); background: rgba(255, 69, 0, 0.08); border: 1px solid rgba(255, 106, 0, 0.3); box-shadow: var(--glow-sm); } .game-page-accent .wiki-section .section-num { color: var(--accent-bright); background: color-mix(in srgb, var(--accent-bright) 10%, transparent); border-color: color-mix(in srgb, var(--accent-bright) 35%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent-bright) 45%, transparent); } @media (max-width: 760px) { .wiki-section { padding-left: 2.6rem; } .wiki-section .section-num { width: 1.9rem; height: 1.9rem; font-size: 0.95rem; } } /* ---------- Polished tables ---------- */ .prose table { border-radius: var(--r-md); overflow: hidden; } .prose table tr { transition: background .2s ease; } .prose table tbody tr:hover td { background: rgba(255, 106, 0, 0.1) !important; color: var(--t-bright); } .prose table tbody tr:hover td:first-child { color: var(--c-ember); } /* ---------- Prose enhancements: callout boxes ---------- */ .prose .callout { margin: 1.2rem 0; padding: 0.9rem 1.1rem 0.9rem 2.6rem; border-radius: var(--r-md); border-left: 3px solid var(--c-lava); background: rgba(255, 69, 0, 0.07); position: relative; } .prose .callout::before { content: "🔥"; position: absolute; left: 0.8rem; top: 0.85rem; font-size: 1.1rem; } .prose .callout.warn { border-left-color: var(--c-molten); background: rgba(204, 34, 0, 0.08); } .prose .callout.warn::before { content: "⚠️"; } .prose .callout.tip { border-left-color: var(--c-ember); background: rgba(255, 180, 71, 0.07); } .prose .callout.tip::before { content: "💡"; } /* ---------- Section index kicker numbers ---------- */ .section-head .kicker.has-num::before { content: attr(data-num) " — "; color: var(--c-ember-soft); } /* ---------- Card CTA arrow animation ---------- */ .game-card .card-cta span[aria-hidden] { transition: transform .25s ease; display: inline-block; } .game-card:hover .card-cta span[aria-hidden] { transform: translateX(4px); } /* ---------- Footer flame top-border animation ---------- */ .site-footer::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--c-lava), var(--c-ember), var(--c-lava), transparent); background-size: 200% 100%; animation: footerFlame 6s linear infinite; opacity: 0.7; } @keyframes footerFlame { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ---------- Quick-stats row on game page ---------- */ .game-quickstats { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.4rem; padding: 1rem 1.2rem; background: rgba(255, 69, 0, 0.05); border: 1px solid rgba(255, 106, 0, 0.18); border-radius: var(--r-md); } .quickstat { display: flex; flex-direction: column; gap: 0.15rem; } .quickstat .qs-label { font-family: var(--font-rugged); letter-spacing: 0.12em; font-size: 0.7rem; color: var(--t-faint); text-transform: uppercase; } .quickstat .qs-value { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--c-ember); } /* ---------- Related games row on game page ---------- */ .related-games { margin-top: 1.5rem; } .related-games h4 { font-family: var(--font-rugged); letter-spacing: 0.16em; color: var(--c-ember); margin-bottom: 1rem; } .related-games .games-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .related-games .game-card .card-tagline { font-size: 0.85rem; } /* ---------- Nav active state ---------- */ .nav-links a.active { color: var(--t-bright); } .nav-links a.active::after { width: 100%; } /* ============================================================ ENHANCEMENTS — Phase 3 Devlog feed, status badges, NEW badge, sort dropdown, keyboard hints, hero parallax, card 3D tilt, quickstat date. ============================================================ */ /* ---------- Devlog Feed ---------- */ .devlog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.6rem; } .devlog-card { position: relative; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--c-stone-2), var(--c-coal)); border: 1px solid rgba(255, 106, 0, 0.18); border-radius: var(--r-lg); padding: 1.5rem 1.5rem 1.3rem; overflow: hidden; transition: transform .25s ease, box-shadow .3s ease, border-color .3s ease; isolation: isolate; } .devlog-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--c-ember), var(--c-lava), var(--c-molten)); opacity: 0.7; transition: opacity .3s ease, width .3s ease; } .devlog-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, rgba(255, 106, 0, 0.08), transparent 50%); opacity: 0; transition: opacity .3s ease; pointer-events: none; z-index: -1; } .devlog-card:hover { transform: translateY(-5px); border-color: rgba(255, 106, 0, 0.5); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), var(--glow-md); } .devlog-card:hover::before { opacity: 1; width: 5px; } .devlog-card:hover::after { opacity: 1; } .devlog-meta { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; flex-wrap: wrap; } .devlog-date { font-family: var(--font-rugged); letter-spacing: 0.1em; font-size: 0.8rem; color: var(--t-faint); } .devlog-cat { font-family: var(--font-rugged); letter-spacing: 0.12em; font-size: 0.68rem; padding: 0.18rem 0.55rem; border-radius: 999px; text-transform: uppercase; border: 1px solid rgba(255, 106, 0, 0.3); } .devlog-cat.Update { color: var(--c-ember); background: rgba(255, 180, 71, 0.1); } .devlog-cat.Devlog { color: var(--c-ember-soft); background: rgba(255, 140, 66, 0.1); } .devlog-cat.Patch { color: var(--c-lava); background: rgba(255, 69, 0, 0.1); } .devlog-cat.Teaser { color: var(--t-bright); background: rgba(255, 106, 0, 0.15); border-color: var(--c-lava); box-shadow: var(--glow-sm); } .devlog-cat.News { color: var(--t-muted); background: rgba(255, 106, 0, 0.06); } .devlog-card h3 { font-size: 1.3rem; margin-bottom: 0.5rem; line-height: 1.25; } .devlog-card .devlog-excerpt { color: var(--t-muted); font-size: 0.95rem; flex: 1; } .devlog-readmore { margin-top: 1rem; font-family: var(--font-rugged); letter-spacing: 0.12em; font-size: 0.85rem; color: var(--c-lava); display: inline-flex; align-items: center; gap: 0.4rem; transition: gap .2s ease, color .2s ease; } .devlog-card:hover .devlog-readmore { color: var(--c-ember); gap: 0.7rem; } /* ---------- Status & NEW badges on cards ---------- */ .card-status { position: absolute; top: 0.7rem; right: 0.7rem; z-index: 3; font-family: var(--font-rugged); letter-spacing: 0.1em; font-size: 0.65rem; padding: 0.2rem 0.55rem; border-radius: 999px; text-transform: uppercase; background: rgba(10, 6, 4, 0.85); backdrop-filter: blur(4px); border: 1px solid rgba(255, 180, 71, 0.4); color: var(--c-ember); display: inline-flex; align-items: center; gap: 0.3rem; } .card-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-ember); box-shadow: 0 0 6px var(--c-ember); } .card-status.Coming-Soon { color: var(--c-ember-soft); border-color: rgba(255, 140, 66, 0.6); } .card-status.Coming-Soon .dot { background: var(--c-ember-soft); animation: statusPulse 1.6s ease-in-out infinite; } @keyframes statusPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.4); } } .card-new-badge { position: absolute; top: 0.7rem; left: 0.7rem; z-index: 4; font-family: var(--font-rugged); letter-spacing: 0.12em; font-size: 0.65rem; padding: 0.2rem 0.55rem; border-radius: 999px; text-transform: uppercase; color: var(--c-void); background: linear-gradient(135deg, var(--c-ember), var(--c-lava)); box-shadow: var(--glow-sm); animation: newBadgeGlow 2.4s ease-in-out infinite; } @keyframes newBadgeGlow { 0%, 100% { box-shadow: 0 0 8px rgba(255, 69, 0, 0.5); } 50% { box-shadow: 0 0 18px rgba(255, 106, 0, 0.85); } } /* when both new-badge and featured-ribbon exist, stack new-badge above ribbon */ .game-card .card-ribbon { top: 0.7rem; left: 0.7rem; } .game-card .card-new-badge + .card-ribbon { top: 2.5rem; } /* ---------- Toolbar top row (search + sort) ---------- */ .toolbar-top { display: flex; gap: 1rem; align-items: flex-end; margin-bottom: 1.1rem; flex-wrap: wrap; } .toolbar-top .search-wrap { flex: 1; min-width: 240px; margin-bottom: 0; } .sort-wrap { display: flex; flex-direction: column; gap: 0.3rem; } .sort-label { font-family: var(--font-rugged); letter-spacing: 0.14em; font-size: 0.7rem; color: var(--t-faint); text-transform: uppercase; } .sort-select { font-family: var(--font-body); font-size: 0.95rem; color: var(--t-bright); background: var(--c-void); border: 1px solid rgba(255, 106, 0, 0.25); border-radius: var(--r-md); padding: 0.72rem 2.2rem 0.72rem 0.9rem; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffb347' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; transition: border-color .2s ease, box-shadow .2s ease; } .sort-select:focus { outline: none; border-color: var(--c-lava); box-shadow: var(--glow-sm); } .sort-select option { background: var(--c-coal); color: var(--t-bright); } /* ---------- Keyboard hint ---------- */ .kbd-hint { position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%); font-family: var(--font-body); font-size: 0.75rem; color: var(--t-faint); background: rgba(255, 106, 0, 0.08); border: 1px solid rgba(255, 106, 0, 0.25); border-radius: var(--r-sm); padding: 0.1rem 0.45rem; pointer-events: none; transition: opacity .2s ease; } .search-input:focus ~ .kbd-hint { opacity: 0; } /* ---------- Hero parallax layers ---------- */ .hero-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 20% 80%, rgba(255, 69, 0, 0.18), transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(204, 34, 0, 0.14), transparent 45%); transition: transform .4s ease-out; } .hero-inner { transition: transform .3s ease-out; } /* ---------- Card 3D tilt (desktop pointer) ---------- */ @media (hover: hover) and (pointer: fine) { .game-card { transform-style: preserve-3d; perspective: 800px; } .game-card .card-body { transform: translateZ(20px); } .game-card .card-thumb img { transform: translateZ(0); } } /* ---------- Quickstat: release date + status pill ---------- */ .quickstat .qs-value.status-live { color: var(--c-ember); } .quickstat .qs-value.status-coming { color: var(--c-ember-soft); } .quickstat .qs-value.status-beta { color: var(--c-lava); } .status-pill { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-rugged); letter-spacing: 0.1em; font-size: 0.85rem; padding: 0.2rem 0.7rem; border-radius: 999px; border: 1px solid rgba(255, 180, 71, 0.4); background: rgba(255, 180, 71, 0.08); color: var(--c-ember); } .status-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-ember); box-shadow: 0 0 6px var(--c-ember); } .status-pill.coming { border-color: rgba(255, 140, 66, 0.6); color: var(--c-ember-soft); } .status-pill.coming .dot { background: var(--c-ember-soft); animation: statusPulse 1.6s ease-in-out infinite; } .status-pill.beta { border-color: rgba(255, 69, 0, 0.5); color: var(--c-lava); } .status-pill.beta .dot { background: var(--c-lava); } /* ---------- Games grid view-toggle count animation ---------- */ .games-grid { transition: opacity .2s ease; } /* ---------- "Coming Soon" card overlay treatment ---------- */ .game-card[data-coming="true"] .card-thumb::after { background: repeating-linear-gradient(135deg, transparent 0, transparent 8px, rgba(10, 6, 4, 0.4) 8px, rgba(10, 6, 4, 0.4) 16px); opacity: 1; left: 0; width: 100%; transform: none; z-index: 1; } .game-card[data-coming="true"]:hover .card-thumb::after { left: 0; } /* ---------- Devlog modal (expanded view) ---------- */ .devlog-modal-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(5, 3, 2, 0.82); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 1.5rem; opacity: 0; pointer-events: none; transition: opacity .25s ease; } .devlog-modal-backdrop.open { opacity: 1; pointer-events: auto; } .devlog-modal { position: relative; max-width: 720px; width: 100%; max-height: 85vh; overflow-y: auto; background: linear-gradient(180deg, var(--c-stone-2), var(--c-coal)); border: 1px solid rgba(255, 106, 0, 0.3); border-radius: var(--r-lg); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), var(--glow-md); padding: 2.2rem 2.2rem 2rem; transform: translateY(20px) scale(0.96); transition: transform .3s ease; } .devlog-modal-backdrop.open .devlog-modal { transform: none; } .devlog-modal-close { position: absolute; top: 1rem; right: 1rem; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 106, 0, 0.3); background: rgba(10, 6, 4, 0.7); color: var(--c-ember); font-size: 1.3rem; cursor: pointer; display: grid; place-items: center; transition: all .2s ease; } .devlog-modal-close:hover { background: rgba(255, 69, 0, 0.2); color: var(--t-bright); transform: rotate(90deg); } .devlog-modal h2 { font-size: 1.9rem; margin: 0.6rem 0 1rem; line-height: 1.2; } .devlog-modal .prose { max-width: none; margin: 0; } /* custom scrollbar for modal */ .devlog-modal::-webkit-scrollbar { width: 8px; } .devlog-modal::-webkit-scrollbar-track { background: var(--c-void); } .devlog-modal::-webkit-scrollbar-thumb { background: rgba(255, 106, 0, 0.3); border-radius: 4px; } .devlog-modal::-webkit-scrollbar-thumb:hover { background: rgba(255, 106, 0, 0.5); } @media (max-width: 760px) { .toolbar-top { flex-direction: column; align-items: stretch; } .sort-wrap { flex-direction: row; align-items: center; gap: 0.6rem; } .devlog-modal { padding: 1.5rem 1.3rem; max-height: 90vh; } } /* ============================================================ ENHANCEMENTS — Phase 4 Devlog page toolbar, visit counter, favicon, OG polish. ============================================================ */ /* ---------- Devlog page toolbar ---------- */ .devlog-toolbar { max-width: var(--maxw); margin: 0 auto 2.5rem; padding: 1.2rem 1.4rem; background: linear-gradient(180deg, var(--c-stone-2), var(--c-coal)); border: 1px solid rgba(255, 106, 0, 0.2); border-radius: var(--r-lg); box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4); } .devlog-toolbar .filter-row { margin-bottom: 0; } .devlog-count { margin-top: 1rem; font-family: var(--font-rugged); letter-spacing: 0.1em; font-size: 0.85rem; color: var(--t-faint); } .devlog-count b { color: var(--c-ember); } .devlog-grid-full { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } /* ---------- Visit counter quickstat ---------- */ .quickstat .qs-value.visit-count { color: var(--c-ember); font-size: 0.95rem; cursor: default; } .quickstat .qs-value.visit-count::before { content: "⚒ "; opacity: 0.7; } /* ---------- Devlog card "first post" highlight ---------- */ .devlog-grid-full .devlog-card:first-child { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 2rem; padding: 2rem 2.2rem; } .devlog-grid-full .devlog-card:first-child .devlog-body, .devlog-grid-full .devlog-card:first-child > h3, .devlog-grid-full .devlog-card:first-child > p, .devlog-grid-full .devlog-card:first-child > .devlog-meta, .devlog-grid-full .devlog-card:first-child > .devlog-readmore { flex: 1; } .devlog-grid-full .devlog-card:first-child > h3 { font-size: 1.7rem; } .devlog-grid-full .devlog-card:first-child::before { width: 5px; opacity: 1; } @media (max-width: 760px) { .devlog-grid-full .devlog-card:first-child { flex-direction: column; align-items: flex-start; gap: 0.8rem; padding: 1.6rem; } .devlog-grid-full .devlog-card:first-child > h3 { font-size: 1.4rem; } .devlog-grid-full { grid-template-columns: 1fr; } } /* ---------- Read-all posts CTA pulse on landing ---------- */ .section-head .btn-ghost { animation: ctaBreathe 4s ease-in-out infinite; } @keyframes ctaBreathe { 0%, 100% { box-shadow: 0 0 0 1px rgba(255, 106, 0, 0.45); } 50% { box-shadow: 0 0 0 1px rgba(255, 106, 0, 0.7), 0 0 20px rgba(255, 106, 0, 0.25); } } /* ---------- Nav: Devlog link subtle ember dot ---------- */ .nav-links a[href$="/devlog/"]::before { content: "•"; color: var(--c-lava); margin-right: 0.3rem; text-shadow: var(--glow-sm); font-size: 0.9em; animation: navDotPulse 2.5s ease-in-out infinite; } @keyframes navDotPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* ============================================================ ENHANCEMENTS — Phase 5 Devlog search, standalone post page, related-game pills, focus-trap polish, prose content blocks, sitemap. ============================================================ */ /* ---------- Related-game pill (devlog cards + modal) ---------- */ .devlog-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: 1rem; flex-wrap: wrap; } .devlog-related-pill { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-rugged); letter-spacing: 0.08em; font-size: 0.72rem; padding: 0.25rem 0.65rem; border-radius: 999px; color: var(--c-ember); background: rgba(255, 106, 0, 0.08); border: 1px solid rgba(255, 106, 0, 0.3); transition: all .2s ease; text-decoration: none; } .devlog-related-pill:hover { color: var(--t-bright); background: rgba(255, 106, 0, 0.18); border-color: var(--c-lava); box-shadow: var(--glow-sm); text-shadow: none; } .devlog-related-pill .rg-icon { font-size: 0.9em; } .devlog-modal-related { margin-left: auto; } .devlog-modal-footer { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 106, 0, 0.18); text-align: right; } .btn-sm { font-size: 0.85rem; padding: 0.5rem 1.1rem; } /* ---------- Standalone devlog article ---------- */ .devlog-article { max-width: 760px; margin: 0 auto; } .devlog-article-meta { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 1rem; } .devlog-article-title { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; text-shadow: var(--glow-sm); margin-bottom: 0.8rem; } .devlog-article-excerpt { font-size: 1.2rem; color: var(--t-muted); font-style: italic; border-left: 3px solid var(--c-lava); padding-left: 1rem; margin-bottom: 0.5rem; } .devlog-article-body { font-size: 1.08rem; } .devlog-article-body > p:first-child::first-letter { font-family: var(--font-display); font-weight: 900; font-size: 3.4rem; float: left; line-height: 0.9; padding: 0.2rem 0.6rem 0 0; color: var(--c-lava); text-shadow: var(--glow-md); } /* ---------- Prose: blockquote + stat cards + code ---------- */ .prose blockquote { margin: 1.3rem 0; padding: 0.9rem 1.3rem; border-left: 3px solid var(--c-lava); background: rgba(255, 69, 0, 0.06); border-radius: 0 var(--r-md) var(--r-md) 0; font-style: italic; color: var(--t-bright); position: relative; } .prose blockquote::before { content: """; position: absolute; top: -0.3rem; left: 0.6rem; font-family: var(--font-display); font-size: 2.2rem; color: var(--c-lava); opacity: 0.4; line-height: 1; } .prose .stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.9rem; margin: 1.3rem 0; } .prose .stat-card { text-align: center; padding: 1rem 0.8rem; background: linear-gradient(180deg, var(--c-stone-2), var(--c-coal)); border: 1px solid rgba(255, 106, 0, 0.25); border-radius: var(--r-md); box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3); } .prose .stat-card .sc-num { font-family: var(--font-display); font-weight: 900; font-size: 2rem; color: var(--c-ember); text-shadow: var(--glow-sm); line-height: 1; } .prose .stat-card .sc-label { font-family: var(--font-rugged); letter-spacing: 0.12em; font-size: 0.72rem; color: var(--t-faint); text-transform: uppercase; margin-top: 0.4rem; } .prose code { font-family: "Courier New", monospace; font-size: 0.92em; background: rgba(255, 69, 0, 0.12); border: 1px solid rgba(255, 106, 0, 0.25); border-radius: var(--r-sm); padding: 0.1rem 0.4rem; color: var(--c-ember); } .prose pre { background: var(--c-void); border: 1px solid rgba(255, 106, 0, 0.2); border-radius: var(--r-md); padding: 1rem 1.2rem; overflow-x: auto; margin: 1.2rem 0; } .prose pre code { background: none; border: none; padding: 0; color: var(--t-base); } /* ---------- Devlog search hint (kbd) on devlog page ---------- */ #devlog-search ~ .kbd-hint { display: block; } /* ---------- Card hover: related pill reveal ---------- */ .devlog-card .devlog-related-pill { opacity: 0.85; } .devlog-card:hover .devlog-related-pill { opacity: 1; } /* ---------- Standalone article breadcrumb polish ---------- */ .devlog-article .breadcrumb { color: var(--t-faint); } .devlog-article .breadcrumb a { color: var(--t-muted); } @media (max-width: 600px) { .devlog-card-footer { flex-direction: column; align-items: flex-start; } .prose .stat-cards { grid-template-columns: 1fr 1fr; } } /* ============================================================ ENHANCEMENTS — Phase 6 Reading-time badge, prev/next post nav, 404 page polish. ============================================================ */ /* ---------- Reading-time badge ---------- */ .devlog-reading-time { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-rugged); letter-spacing: 0.08em; font-size: 0.72rem; color: var(--t-faint); margin-left: auto; } .devlog-reading-time span[aria-hidden] { font-size: 0.85em; opacity: 0.8; } .devlog-modal-related { margin-left: 0; } /* when reading-time + related both present in modal meta, push related to the end */ .devlog-modal .devlog-meta { gap: 0.6rem; } .devlog-modal .devlog-reading-time { margin-left: 0; } /* ---------- Prev/Next post navigation ---------- */ .devlog-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.5rem; } .prevnext-card { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.1rem 1.3rem; background: linear-gradient(180deg, var(--c-stone-2), var(--c-coal)); border: 1px solid rgba(255, 106, 0, 0.2); border-radius: var(--r-lg); text-decoration: none; transition: all .25s ease; position: relative; overflow: hidden; min-width: 0; } .prevnext-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--c-ember), var(--c-lava)); opacity: 0.5; transition: opacity .25s ease, width .25s ease; } .prevnext-card:hover { border-color: rgba(255, 106, 0, 0.55); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), var(--glow-sm); transform: translateY(-3px); text-shadow: none; } .prevnext-card:hover::before { opacity: 1; width: 5px; } .prevnext-card.next { text-align: right; } .prevnext-card.next::before { left: auto; right: 0; } .prevnext-card.disabled { opacity: 0.4; cursor: default; pointer-events: none; font-style: italic; } .pn-label { font-family: var(--font-rugged); letter-spacing: 0.14em; font-size: 0.72rem; color: var(--c-lava); text-transform: uppercase; } .pn-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--t-bright); line-height: 1.3; } .prevnext-card:hover .pn-title { color: var(--c-ember); } .pn-date { font-family: var(--font-rugged); letter-spacing: 0.1em; font-size: 0.72rem; color: var(--t-faint); } @media (max-width: 600px) { .devlog-prevnext { grid-template-columns: 1fr; } } /* ---------- 404 page ---------- */ .hero .hero-logo-404 { font-family: var(--font-display); font-weight: 900; font-size: clamp(5rem, 18vw, 12rem); line-height: 0.9; letter-spacing: 0.04em; background: linear-gradient(180deg, var(--t-bright) 0%, var(--c-ember) 40%, var(--c-lava) 70%, var(--c-molten) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 24px rgba(255, 69, 0, 0.6)) drop-shadow(0 0 50px rgba(204, 34, 0, 0.45)); animation: errFlicker 4s ease-in-out infinite; margin-bottom: 0.4rem; } @keyframes errFlicker { 0%, 92%, 100% { opacity: 1; } 93% { opacity: 0.6; } 94% { opacity: 1; } 96% { opacity: 0.75; } 97% { opacity: 1; } } /* ============================================================ ENHANCEMENTS — Phase 7 Theme toggle, image gallery lightbox, devlog YouTube embed, site-wide search, OG image for posts. ============================================================ */ /* ---------- Theme toggle button ---------- */ .theme-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 106, 0, 0.35); background: rgba(255, 69, 0, 0.06); color: var(--c-ember); cursor: pointer; transition: all .25s ease; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--c-lava); box-shadow: var(--glow-sm); color: var(--t-bright); transform: rotate(20deg); } .theme-toggle svg { width: 20px; height: 20px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="ash"] .theme-toggle .icon-sun { display: block; } [data-theme="ash"] .theme-toggle .icon-moon { display: none; } /* keep toggle visible inside mobile nav */ @media (max-width: 760px) { .theme-toggle { order: 2; } } /* ---------- Image gallery + lightbox ---------- */ .prose .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.8rem; margin: 1.4rem 0; } .prose .gallery figure { margin: 0; cursor: zoom-in; border: 1px solid rgba(255, 106, 0, 0.2); border-radius: var(--r-md); overflow: hidden; position: relative; transition: transform .25s ease, box-shadow .3s ease, border-color .3s ease; } .prose .gallery figure:hover { transform: translateY(-3px); border-color: rgba(255, 106, 0, 0.55); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5), var(--glow-sm); } .prose .gallery figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .4s ease, filter .4s ease; } .prose .gallery figure:hover img { transform: scale(1.06); filter: brightness(1.08); } .prose .gallery figcaption { font-family: var(--font-rugged); letter-spacing: 0.08em; font-size: 0.72rem; color: var(--t-muted); padding: 0.45rem 0.7rem; background: rgba(10, 6, 4, 0.6); border-top: 1px solid rgba(255, 106, 0, 0.15); } [data-theme="ash"] .prose .gallery figcaption { background: rgba(239, 230, 220, 0.7); } /* lightbox */ .lightbox-backdrop { position: fixed; inset: 0; z-index: 300; background: rgba(5, 3, 2, 0.92); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 2rem; opacity: 0; pointer-events: none; transition: opacity .25s ease; } .lightbox-backdrop.open { opacity: 1; pointer-events: auto; } .lightbox-backdrop img { max-width: 92vw; max-height: 86vh; border-radius: var(--r-md); border: 1px solid rgba(255, 106, 0, 0.4); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), var(--glow-md); transform: scale(0.95); transition: transform .3s ease; } .lightbox-backdrop.open img { transform: none; } .lightbox-close { position: absolute; top: 1.2rem; right: 1.4rem; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 106, 0, 0.4); background: rgba(10, 6, 4, 0.8); color: var(--c-ember); font-size: 1.4rem; cursor: pointer; display: grid; place-items: center; transition: all .2s ease; } .lightbox-close:hover { background: rgba(255, 69, 0, 0.25); color: var(--t-bright); transform: rotate(90deg); } .lightbox-caption { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); font-family: var(--font-rugged); letter-spacing: 0.1em; font-size: 0.85rem; color: var(--t-muted); text-align: center; max-width: 80vw; } /* ---------- Devlog YouTube embed ---------- */ .prose .video-embed { position: relative; aspect-ratio: 16 / 9; width: 100%; margin: 1.4rem 0; border-radius: var(--r-md); overflow: hidden; border: 1px solid rgba(255, 106, 0, 0.25); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), var(--glow-sm); background: var(--c-coal); } .prose .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ---------- Site-wide search (landing) ---------- */ .sitesearch-wrap { max-width: 640px; margin: 0 auto 2rem; } .sitesearch-results { max-width: 640px; margin: 0 auto; text-align: left; } .sitesearch-group { margin-bottom: 1.5rem; } .sitesearch-group h4 { font-family: var(--font-rugged); letter-spacing: 0.16em; color: var(--c-ember); font-size: 0.85rem; margin-bottom: 0.6rem; border-bottom: 1px solid rgba(255, 106, 0, 0.2); padding-bottom: 0.4rem; } .sitesearch-item { display: block; padding: 0.7rem 0.9rem; border-radius: var(--r-md); color: var(--t-base); transition: background .2s ease, color .2s ease; text-decoration: none; } .sitesearch-item:hover { background: rgba(255, 106, 0, 0.1); color: var(--t-bright); text-shadow: none; } .sitesearch-item .ss-title { font-family: var(--font-display); font-weight: 700; color: var(--t-bright); font-size: 1.02rem; } .sitesearch-item .ss-sub { font-size: 0.85rem; color: var(--t-muted); margin-top: 0.15rem; } .sitesearch-item .ss-tag { font-family: var(--font-rugged); letter-spacing: 0.08em; font-size: 0.65rem; padding: 0.1rem 0.45rem; border-radius: 999px; background: rgba(255, 106, 0, 0.12); color: var(--c-ember); margin-left: 0.5rem; vertical-align: middle; } .sitesearch-empty { text-align: center; color: var(--t-muted); padding: 2rem; font-style: italic; } /* ============================================================ PHASE 7 ADDITIONS ============================================================ */ /* ---------- Ember (high-contrast) third theme ---------- */ /* Maximizes text/contrast for accessibility while keeping the lava identity. Pure black background, bright white text, vivid orange accents, thicker borders, no dim glows. */ [data-theme="ember"] { --c-void: #000000; --c-coal: #050505; --c-stone: #0c0c0c; --c-stone-2: #141414; --c-ash: #1f1f1f; --c-ash-2: #2a2a2a; --c-lava: #ff7a1a; --c-molten: #ff4500; --c-ember: #ffcc66; --c-ember-soft: #ffaa44; --c-glow: #ff8c33; --c-crack: #ff8c33; --t-bright: #ffffff; --t-base: #f2f2f2; --t-muted: #c8c8c8; --t-faint: #9a9a9a; --glow-sm: 0 0 0 1px rgba(255, 122, 26, 0.6); --glow-md: 0 0 0 2px rgba(255, 122, 26, 0.7); --glow-lg: 0 0 0 3px rgba(255, 122, 26, 0.8); --glow-text: 0 0 6px rgba(255, 122, 26, 0.9); } [data-theme="ember"] body { background-image: linear-gradient(135deg, #050505 0%, #000 40%, #0a0a0a 100%); } [data-theme="ember"] .hero-logo { background: linear-gradient(180deg, #ffffff 0%, var(--c-ember) 45%, var(--c-lava) 75%, var(--c-molten) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 8px rgba(255, 122, 26, 0.6)); } [data-theme="ember"] .hero-logo-404 { background: linear-gradient(180deg, #fff 0%, var(--c-ember) 40%, var(--c-lava) 70%, var(--c-molten) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } [data-theme="ember"] .ember-canvas { opacity: 0.35; } /* High-contrast: stronger borders + readable text everywhere */ [data-theme="ember"] .game-card, [data-theme="ember"] .devlog-card, [data-theme="ember"] .wiki-content, [data-theme="ember"] .wiki-sidebar, [data-theme="ember"] .games-toolbar, [data-theme="ember"] .devlog-toolbar, [data-theme="ember"] .prevnext-card, [data-theme="ember"] .devlog-modal, [data-theme="ember"] .search-input, [data-theme="ember"] .sort-select, [data-theme="ember"] .faq-item, [data-theme="ember"] .comm-card, [data-theme="ember"] .comm-link { border: 2px solid rgba(255, 122, 26, 0.5) !important; box-shadow: none; } [data-theme="ember"] .btn-primary { color: #ffffff; font-weight: 700; } [data-theme="ember"] .btn-ghost { border: 2px solid var(--c-lava); color: var(--t-bright); } [data-theme="ember"] .prose .gallery figcaption { background: #000; color: var(--t-bright); } [data-theme="ember"] a { color: var(--c-lava); } [data-theme="ember"] .nav-links a { color: var(--t-bright); } [data-theme="ember"] .nav-links a:hover, [data-theme="ember"] .nav-links a.active { color: var(--c-lava); } [data-theme="ember"] .card-status, [data-theme="ember"] .devlog-cat { border-width: 2px; } /* ---------- Theme toggle: 3-state visual indicator ---------- */ .theme-toggle { position: relative; } .theme-toggle::after { content: ""; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); width: 28px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--c-lava), var(--c-ember)); opacity: 0.35; transition: opacity .2s ease; } .theme-toggle[data-theme-current="ash"]::after { opacity: 0.55; } .theme-toggle[data-theme-current="ember"]::after { opacity: 0.95; box-shadow: var(--glow-sm); } .theme-toggle .icon-sun, .theme-toggle .icon-moon { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="ash"] .theme-toggle .icon-sun { display: block; } [data-theme="ash"] .theme-toggle .icon-moon { display: none; } [data-theme="ember"] .theme-toggle .icon-sun { display: none; } [data-theme="ember"] .theme-toggle .icon-moon { display: none; } [data-theme="ember"] .theme-toggle::before { content: "HC"; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-rugged); font-size: 0.7rem; letter-spacing: 0.05em; color: var(--c-ember); font-weight: 700; } /* ---------- Lightbox: nav arrows + counter ---------- */ .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255, 106, 0, 0.45); background: rgba(10, 6, 4, 0.75); color: var(--c-ember); font-size: 2.2rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: all .2s ease; z-index: 2; } .lightbox-nav:hover { background: rgba(255, 69, 0, 0.3); color: var(--t-bright); transform: translateY(-50%) scale(1.08); } .lightbox-nav[aria-disabled="true"] { opacity: 0.3; cursor: default; } .lightbox-prev { left: 1.4rem; } .lightbox-next { right: 1.4rem; } .lightbox-counter { position: absolute; top: 1.4rem; left: 50%; transform: translateX(-50%); font-family: var(--font-rugged); letter-spacing: 0.15em; font-size: 0.8rem; color: var(--c-ember); background: rgba(10, 6, 4, 0.7); padding: 0.25rem 0.8rem; border-radius: 999px; border: 1px solid rgba(255, 106, 0, 0.3); } [data-theme="ash"] .lightbox-backdrop { background: rgba(40, 30, 22, 0.94); } [data-theme="ember"] .lightbox-backdrop { background: rgba(0, 0, 0, 0.97); } [data-theme="ember"] .lightbox-nav { border-width: 2px; } @media (max-width: 640px) { .lightbox-nav { width: 42px; height: 42px; font-size: 1.7rem; } .lightbox-prev { left: 0.5rem; } .lightbox-next { right: 0.5rem; } } /* ---------- Wiki reading-progress rail ---------- */ .wiki-progress-rail { margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid rgba(255, 106, 0, 0.18); display: flex; flex-direction: column; gap: 0.55rem; } .wiki-progress-seg { height: 4px; border-radius: 2px; background: rgba(255, 106, 0, 0.14); transition: background .4s ease, box-shadow .4s ease, height .25s ease; position: relative; } .wiki-progress-seg.done { background: linear-gradient(90deg, var(--c-molten), var(--c-lava)); box-shadow: 0 0 8px rgba(255, 69, 0, 0.5); } .wiki-progress-seg.current { background: linear-gradient(90deg, var(--c-lava), var(--c-ember)); box-shadow: 0 0 12px rgba(255, 106, 0, 0.8); height: 6px; } @media (max-width: 760px) { .wiki-progress-rail { display: none; } } /* ---------- Community page ---------- */ .comm-hero { text-align: center; padding: 3.5rem 0 2rem; } .comm-hero .kicker { margin-bottom: 0.8rem; } .comm-hero h1 { font-family: var(--font-display); font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 900; letter-spacing: 0.02em; background: linear-gradient(180deg, var(--t-bright) 0%, var(--c-ember) 55%, var(--c-lava) 85%, var(--c-molten) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 18px rgba(255, 106, 0, 0.35)); } .comm-hero p { max-width: 640px; margin: 1rem auto 0; color: var(--t-muted); font-size: 1.08rem; } .comm-links-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; margin: 2rem 0; } .comm-link { display: flex; align-items: center; gap: 1rem; padding: 1.3rem 1.4rem; border-radius: var(--r-lg); border: 1px solid rgba(255, 106, 0, 0.22); background: linear-gradient(135deg, rgba(28, 19, 13, 0.85), rgba(18, 11, 7, 0.85)); text-decoration: none; color: var(--t-base); transition: transform .25s ease, border-color .3s ease, box-shadow .3s ease; position: relative; overflow: hidden; } .comm-link::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--c-lava), var(--c-molten)); opacity: 0.5; transition: opacity .3s ease, width .3s ease; } .comm-link:hover { transform: translateY(-4px); border-color: rgba(255, 106, 0, 0.6); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5), var(--glow-sm); color: var(--t-bright); } .comm-link:hover::before { opacity: 1; width: 5px; } .comm-link .cl-icon { font-size: 1.8rem; width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--r-md); background: rgba(255, 106, 0, 0.12); border: 1px solid rgba(255, 106, 0, 0.25); flex-shrink: 0; } .comm-link .cl-name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--t-bright); } .comm-link .cl-sub { font-size: 0.82rem; color: var(--t-muted); margin-top: 0.15rem; } .comm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin: 2.5rem 0; } .comm-stat { text-align: center; padding: 1.4rem 1rem; border-radius: var(--r-md); background: rgba(28, 19, 13, 0.5); border: 1px solid rgba(255, 106, 0, 0.18); } .comm-stat .cs-num { font-family: var(--font-rugged); font-size: 2.4rem; line-height: 1; background: linear-gradient(180deg, var(--c-ember), var(--c-lava)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .comm-stat .cs-label { font-family: var(--font-rugged); letter-spacing: 0.15em; font-size: 0.72rem; color: var(--t-muted); margin-top: 0.4rem; } /* FAQ accordion */ .faq-list { max-width: 760px; margin: 0 auto; } .faq-item { border: 1px solid rgba(255, 106, 0, 0.2); border-radius: var(--r-md); margin-bottom: 0.8rem; overflow: hidden; background: rgba(28, 19, 13, 0.5); transition: border-color .3s ease, box-shadow .3s ease; } .faq-item[open] { border-color: rgba(255, 106, 0, 0.5); box-shadow: var(--glow-sm); } .faq-item summary { cursor: pointer; padding: 1.1rem 1.3rem; font-family: var(--font-display); font-weight: 700; color: var(--t-bright); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; transition: background .2s ease; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-family: var(--font-rugged); font-size: 1.5rem; color: var(--c-ember); transition: transform .25s ease; flex-shrink: 0; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item summary:hover { background: rgba(255, 106, 0, 0.06); } .faq-item .faq-a { padding: 0 1.3rem 1.2rem; color: var(--t-base); line-height: 1.7; } /* Newsletter signup (static, non-submitting) */ .comm-newsletter { max-width: 560px; margin: 0 auto; text-align: center; padding: 2.2rem; border-radius: var(--r-lg); border: 1px solid rgba(255, 106, 0, 0.25); background: radial-gradient(circle at 20% 0%, rgba(255, 106, 0, 0.08), transparent 50%), radial-gradient(circle at 80% 100%, rgba(204, 34, 0, 0.08), transparent 50%), linear-gradient(135deg, rgba(28, 19, 13, 0.9), rgba(18, 11, 7, 0.9)); } .comm-newsletter h3 { font-family: var(--font-display); color: var(--t-bright); margin-bottom: 0.5rem; } .comm-newsletter p { color: var(--t-muted); font-size: 0.95rem; margin-bottom: 1.3rem; } .comm-form { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; } .comm-form input[type="email"] { flex: 1 1 240px; padding: 0.8rem 1rem; border-radius: var(--r-md); border: 1px solid rgba(255, 106, 0, 0.3); background: rgba(10, 6, 4, 0.7); color: var(--t-bright); font-family: var(--font-body); font-size: 0.95rem; } .comm-form input[type="email"]:focus { outline: none; border-color: var(--c-lava); box-shadow: var(--glow-sm); } .comm-form .comm-form-note { width: 100%; margin-top: 0.8rem; font-size: 0.78rem; color: var(--t-faint); font-style: italic; } .comm-success { margin-top: 1rem; color: var(--c-ember); font-family: var(--font-rugged); letter-spacing: 0.08em; display: none; } .comm-success.show { display: block; } /* Community values / pillars */ .comm-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; margin: 2rem 0; } .comm-card { padding: 1.6rem 1.4rem; border-radius: var(--r-md); border: 1px solid rgba(255, 106, 0, 0.2); background: rgba(28, 19, 13, 0.55); transition: transform .25s ease, border-color .3s ease; } .comm-card:hover { transform: translateY(-3px); border-color: rgba(255, 106, 0, 0.45); } .comm-card .cc-icon { font-size: 1.6rem; margin-bottom: 0.6rem; display: inline-block; } .comm-card h4 { font-family: var(--font-display); color: var(--t-bright); margin-bottom: 0.4rem; font-size: 1.05rem; } .comm-card p { font-size: 0.9rem; color: var(--t-muted); line-height: 1.6; } [data-theme="ash"] .comm-link, [data-theme="ash"] .comm-stat, [data-theme="ash"] .faq-item, [data-theme="ash"] .comm-newsletter, [data-theme="ash"] .comm-card { background: rgba(216, 201, 182, 0.5); } /* ---------- Styling polish (Phase 7) ---------- */ /* Richer card hover with subtle tilt + accent glow */ .game-card { transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease; } .game-card:hover { transform: translateY(-6px); } .game-card:hover .card-thumb img { filter: brightness(1.05) saturate(1.1); } /* Section-head kicker with anvil flourish */ .section-head .kicker::before, .section-head .kicker::after { content: "—"; opacity: 0.4; margin: 0 0.5em; font-weight: 400; } /* Footer link hover glow */ .site-footer a { transition: color .2s ease, text-shadow .2s ease; } .site-footer a:hover { text-shadow: var(--glow-sm); } /* Better focus-visible rings everywhere (accessibility) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--c-ember); outline-offset: 2px; border-radius: 2px; } /* Sticky-footer safety for short pages (reinforce flex column) */ body { min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1 0 auto; } .site-footer { flex-shrink: 0; } /* Devlog card: refined footer + reading-time pill polish */ .devlog-card { transition: transform .25s ease, box-shadow .3s ease, border-color .3s ease; } .devlog-card:hover { transform: translateY(-4px); } .devlog-reading-time { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-rugged); letter-spacing: 0.08em; font-size: 0.72rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: rgba(255, 106, 0, 0.1); color: var(--c-ember); } /* Quickstat visit-count ember pulse on first visit */ .quickstat .visit-count { color: var(--c-ember); } /* Gallery figure: number badge */ .prose .gallery figure { counter-increment: galleryfig; } .prose .gallery { counter-reset: galleryfig; } .prose .gallery figure::after { content: counter(galleryfig); position: absolute; top: 0.4rem; left: 0.4rem; font-family: var(--font-rugged); font-size: 0.7rem; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(10, 6, 4, 0.8); color: var(--c-ember); border: 1px solid rgba(255, 106, 0, 0.4); } /* Prevnext card: subtle accent corner */ .prevnext-card { position: relative; overflow: hidden; } .prevnext-card::after { content: ""; position: absolute; top: 0; right: 0; width: 40px; height: 40px; background: radial-gradient(circle at top right, rgba(255, 106, 0, 0.25), transparent 70%); pointer-events: none; } /* 404 featured fallback cards tighter */ .hero-logo-404 { line-height: 0.9; } /* Mobile: comm-links stack nicely */ @media (max-width: 600px) { .comm-link { padding: 1.1rem 1.1rem; } .comm-link .cl-icon { width: 40px; height: 40px; font-size: 1.5rem; } .comm-newsletter { padding: 1.5rem; } } /* ============================================================ PHASE 8 ADDITIONS ============================================================ */ /* ---------- Comparison tables (rich prose block) ---------- */ .prose .table-wrap { margin: 1.4rem 0; border: 1px solid rgba(255, 106, 0, 0.28); border-radius: var(--r-md); overflow: hidden; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); } .prose .table-wrap table { width: 100%; border-collapse: collapse; margin: 0; font-size: 0.92rem; } .prose .table-wrap th { background: linear-gradient(180deg, rgba(255, 69, 0, 0.18), rgba(204, 34, 0, 0.1)); color: var(--c-ember); font-family: var(--font-rugged); letter-spacing: 0.1em; font-size: 0.78rem; text-transform: uppercase; padding: 0.7rem 0.9rem; text-align: left; border-bottom: 2px solid rgba(255, 106, 0, 0.35); white-space: nowrap; } .prose .table-wrap td { padding: 0.65rem 0.9rem; border-bottom: 1px solid rgba(255, 106, 0, 0.1); color: var(--t-base); vertical-align: top; } .prose .table-wrap tbody tr:last-child td { border-bottom: none; } .prose .table-wrap tbody tr:nth-child(even) td { background: rgba(255, 106, 0, 0.035); } .prose .table-wrap tbody tr { transition: background .18s ease; } .prose .table-wrap tbody tr:hover td { background: rgba(255, 106, 0, 0.12) !important; color: var(--t-bright); } .prose .table-wrap tbody tr:hover td:first-child { color: var(--c-ember); font-weight: 600; } .prose .table-wrap td:first-child { font-family: var(--font-display); font-weight: 600; color: var(--t-bright); } /* horizontal scroll on small screens */ @media (max-width: 640px) { .prose .table-wrap { overflow-x: auto; } .prose .table-wrap table { min-width: 480px; } } [data-theme="ash"] .prose .table-wrap th { background: linear-gradient(180deg, rgba(214, 54, 0, 0.2), rgba(165, 26, 0, 0.1)); } [data-theme="ash"] .prose .table-wrap td:first-child { color: var(--c-molten); } [data-theme="ember"] .prose .table-wrap { border-width: 2px; } [data-theme="ember"] .prose .table-wrap th { border-bottom-width: 2px; } /* ---------- Spoiler / collapsible block ---------- */ .prose .spoiler { margin: 1.3rem 0; border: 1px solid rgba(255, 106, 0, 0.25); border-radius: var(--r-md); overflow: hidden; background: rgba(10, 6, 4, 0.4); transition: border-color .3s ease, box-shadow .3s ease; } .prose .spoiler.open { border-color: rgba(255, 106, 0, 0.55); box-shadow: var(--glow-sm); } .prose .spoiler-head { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.85rem 1.1rem; background: rgba(255, 69, 0, 0.08); border: none; border-left: 3px solid var(--c-lava); color: var(--t-bright); font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; text-align: left; cursor: pointer; transition: background .2s ease; } .prose .spoiler-head:hover { background: rgba(255, 106, 0, 0.16); } .prose .spoiler-head:focus-visible { outline: 2px solid var(--c-ember); outline-offset: -2px; } .prose .spoiler-icon { color: var(--c-ember); font-size: 0.85rem; width: 1.1rem; display: inline-block; transition: transform .2s ease; flex-shrink: 0; } .prose .spoiler.open .spoiler-icon { transform: rotate(0deg); } .prose .spoiler-body, .prose .spoiler > p, .prose .spoiler > *:not(.spoiler-head) { max-height: 0; overflow: hidden; opacity: 0; margin: 0; padding: 0 1.1rem; transition: max-height .35s ease, opacity .25s ease, padding .25s ease; } .prose .spoiler.open .spoiler-body, .prose .spoiler.open > p, .prose .spoiler.open > *:not(.spoiler-head) { max-height: 800px; opacity: 1; padding: 0.9rem 1.1rem 1rem; } .prose .spoiler.open > p:first-of-type { padding-top: 0.9rem; } .prose .spoiler.open > *:last-child { padding-bottom: 1rem; } [data-theme="ash"] .prose .spoiler { background: rgba(216, 201, 182, 0.4); } [data-theme="ash"] .prose .spoiler-head { background: rgba(214, 54, 0, 0.12); } [data-theme="ember"] .prose .spoiler { border-width: 2px; } [data-theme="ember"] .prose .spoiler-head { border-left-width: 4px; } /* ---------- Games list: status filter row ---------- */ .filter-row-status { padding-top: 0.2rem; border-top: 1px dashed rgba(255, 106, 0, 0.15); margin-top: 0.4rem; } .filter-row-status .filter-label { color: var(--c-ember-soft); } .chip-status { position: relative; } .chip-status[data-status="Live"]::before, .chip-status[data-status="Beta"]::before, .chip-status[data-status="Coming Soon"]::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 0.4rem; vertical-align: middle; } .chip-status[data-status="Live"]::before { background: #4ade80; box-shadow: 0 0 6px rgba(74, 222, 128, 0.7); } .chip-status[data-status="Beta"]::before { background: var(--c-ember); box-shadow: 0 0 6px rgba(255, 180, 71, 0.7); } .chip-status[data-status="Coming Soon"]::before { background: var(--c-ember-soft); box-shadow: 0 0 6px rgba(255, 140, 66, 0.7); } .chip-status.active { border-color: var(--c-lava); } @media (max-width: 600px) { .filter-row-status { flex-wrap: wrap; gap: 0.4rem; } } /* ---------- Site search: hint + "view more" link ---------- */ .sitesearch-hint { text-align: center; margin: 0.7rem 0 0; font-size: 0.78rem; color: var(--t-faint); font-family: var(--font-rugged); letter-spacing: 0.1em; } .sitesearch-hint kbd { font-family: var(--font-body); background: rgba(255, 69, 0, 0.12); border: 1px solid rgba(255, 106, 0, 0.3); border-radius: 3px; padding: 0.05rem 0.35rem; color: var(--c-ember); font-size: 0.72rem; } .sitesearch-more { display: inline-block; margin-top: 0.6rem; font-family: var(--font-rugged); letter-spacing: 0.1em; font-size: 0.82rem; color: var(--c-lava); text-decoration: none; padding: 0.3rem 0.7rem; border-radius: var(--r-sm); border: 1px solid rgba(255, 106, 0, 0.25); transition: all .2s ease; } .sitesearch-more:hover { background: rgba(255, 69, 0, 0.15); border-color: var(--c-lava); color: var(--t-bright); text-shadow: var(--glow-sm); } /* ---------- Dedicated search page ---------- */ .search-page-count { max-width: 720px; margin: 1.4rem auto 0.8rem; font-family: var(--font-rugged); letter-spacing: 0.1em; font-size: 0.92rem; color: var(--t-muted); } .sitesearch-results-page { max-width: 720px; margin: 0 auto 3rem; min-height: 200px; } .sitesearch-results-page .sitesearch-item { padding: 1rem 1.1rem; margin-bottom: 0.6rem; border-radius: var(--r-md); border: 1px solid rgba(255, 106, 0, 0.15); background: rgba(28, 19, 13, 0.4); transition: all .2s ease; } .sitesearch-results-page .sitesearch-item:hover { border-color: rgba(255, 106, 0, 0.5); transform: translateX(4px); box-shadow: var(--glow-sm); } .sitesearch-results-page .sitesearch-group { margin-bottom: 2rem; } .sitesearch-results-page .sitesearch-group h4 { font-size: 0.9rem; padding-bottom: 0.6rem; margin-bottom: 0.8rem; } [data-theme="ash"] .sitesearch-results-page .sitesearch-item { background: rgba(216, 201, 182, 0.4); } /* ---------- Devlog card keyboard-nav focus ring ---------- */ .devlog-card:focus-visible { outline: 2px solid var(--c-ember); outline-offset: 3px; border-color: var(--c-lava) !important; box-shadow: 0 0 0 4px rgba(255, 180, 71, 0.15), var(--glow-sm) !important; } .devlog-card:focus-visible .devlog-readmore { color: var(--c-ember); } /* ---------- Polish: tag chips row spacing + status chip alignment ---------- */ .filter-row { gap: 0.4rem; } .filter-label { font-family: var(--font-rugged); letter-spacing: 0.14em; font-size: 0.7rem; color: var(--c-ember); text-transform: uppercase; margin-right: 0.3rem; white-space: nowrap; align-self: center; } /* ---------- Section: search page hero accent ---------- */ #search-page-root .section-head { text-align: center; } #search-page-root .section-head .kicker::before, #search-page-root .section-head .kicker::after { content: "—"; opacity: 0.4; margin: 0 0.5em; } /* ============================================================ PHASE 9 ADDITIONS ============================================================ */ /* ---------- Keyboard shortcut help overlay ---------- */ .kbd-overlay { position: fixed; inset: 0; z-index: 400; background: rgba(5, 3, 2, 0.88); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; opacity: 0; pointer-events: none; transition: opacity .25s ease; } .kbd-overlay.open { opacity: 1; pointer-events: auto; } .kbd-card { position: relative; max-width: 720px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 2.2rem 2.2rem 1.8rem; border-radius: var(--r-lg); border: 1px solid rgba(255, 106, 0, 0.35); background: radial-gradient(circle at 20% 0%, rgba(255, 106, 0, 0.08), transparent 50%), radial-gradient(circle at 80% 100%, rgba(204, 34, 0, 0.08), transparent 50%), linear-gradient(135deg, rgba(28, 19, 13, 0.97), rgba(18, 11, 7, 0.97)); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), var(--glow-md); transform: scale(0.96); transition: transform .3s cubic-bezier(.2,.7,.3,1); } .kbd-overlay.open .kbd-card { transform: none; } .kbd-title { font-family: var(--font-display); font-size: 1.8rem; font-weight: 900; color: var(--t-bright); margin-bottom: 0.3rem; } .kbd-sub { color: var(--t-muted); font-size: 0.95rem; margin-bottom: 1.6rem; } .kbd-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.4rem; margin-bottom: 1.4rem; } .kbd-group h3 { font-family: var(--font-rugged); letter-spacing: 0.15em; font-size: 0.78rem; color: var(--c-lava); text-transform: uppercase; margin-bottom: 0.7rem; padding-bottom: 0.4rem; border-bottom: 1px solid rgba(255, 106, 0, 0.2); } .kbd-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.35rem 0; font-size: 0.9rem; color: var(--t-base); } .kbd-row span { flex: 1; } .kbd-row kbd, .kbd-hint kbd, .kbd-hint { font-family: var(--font-body); display: inline-block; min-width: 26px; text-align: center; padding: 0.18rem 0.5rem; font-size: 0.78rem; background: rgba(255, 69, 0, 0.12); border: 1px solid rgba(255, 106, 0, 0.35); border-bottom-width: 2px; border-radius: 4px; color: var(--c-ember); line-height: 1.2; white-space: nowrap; } .kbd-foot { font-size: 0.82rem; color: var(--t-faint); font-style: italic; text-align: center; padding-top: 0.8rem; border-top: 1px dashed rgba(255, 106, 0, 0.18); } .kbd-close { position: absolute; top: 1rem; right: 1.2rem; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 106, 0, 0.4); background: rgba(10, 6, 4, 0.8); color: var(--c-ember); font-size: 1.3rem; cursor: pointer; display: grid; place-items: center; transition: all .2s ease; } .kbd-close:hover { background: rgba(255, 69, 0, 0.25); color: var(--t-bright); transform: rotate(90deg); } [data-theme="ash"] .kbd-overlay { background: rgba(40, 30, 22, 0.92); } [data-theme="ash"] .kbd-card { background: linear-gradient(135deg, rgba(216, 201, 182, 0.97), rgba(239, 230, 220, 0.97)); } [data-theme="ash"] .kbd-title { color: var(--c-molten); } [data-theme="ember"] .kbd-card { border-width: 2px; } [data-theme="ember"] .kbd-row kbd { border-width: 2px; } /* ---------- Floating "?" shortcut-hint button ---------- */ .kbd-hint-btn { position: fixed; bottom: 1.5rem; left: 1.5rem; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 106, 0, 0.4); background: rgba(10, 6, 4, 0.85); backdrop-filter: blur(6px); color: var(--c-ember); font-family: var(--font-rugged); font-size: 1.1rem; font-weight: 700; cursor: pointer; display: grid; place-items: center; z-index: 90; opacity: 0.5; transform: translateY(20px); transition: all .3s ease; } .kbd-hint-btn.show { opacity: 0.85; transform: none; } .kbd-hint-btn:hover { opacity: 1; background: rgba(255, 69, 0, 0.2); border-color: var(--c-lava); box-shadow: var(--glow-sm); transform: scale(1.08); } [data-theme="ash"] .kbd-hint-btn { background: rgba(216, 201, 182, 0.85); } @media (max-width: 600px) { .kbd-hint-btn { bottom: 1rem; left: 1rem; width: 38px; height: 38px; } } /* ---------- Genre-browse page: tag cloud ---------- */ .genres-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 2rem; padding: 0.9rem 1.1rem; border: 1px solid rgba(255, 106, 0, 0.2); border-radius: var(--r-md); background: rgba(28, 19, 13, 0.5); } .tagcloud { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.7rem 0.9rem; padding: 2rem 1rem; margin-bottom: 2.5rem; border-radius: var(--r-lg); background: radial-gradient(circle at 30% 20%, rgba(255, 106, 0, 0.06), transparent 50%), radial-gradient(circle at 70% 80%, rgba(204, 34, 0, 0.06), transparent 50%), rgba(18, 11, 7, 0.5); border: 1px solid rgba(255, 106, 0, 0.18); } .tagcloud-item { display: inline-flex; align-items: baseline; gap: 0.35rem; padding: 0.3rem 0.8rem; border-radius: 999px; border: 1px solid rgba(255, 106, 0, 0.2); background: rgba(28, 19, 13, 0.6); color: var(--t-base); font-family: var(--font-display); font-weight: 700; cursor: pointer; transition: all .22s ease; line-height: 1.3; } .tagcloud-item:hover { border-color: var(--c-lava); background: rgba(255, 69, 0, 0.15); color: var(--t-bright); transform: translateY(-2px); box-shadow: var(--glow-sm); } .tagcloud-item.active { border-color: var(--c-lava); background: linear-gradient(135deg, var(--c-molten), var(--c-lava)); color: var(--t-bright); box-shadow: var(--glow-md); } .tagcloud-item .tc-count { font-family: var(--font-body); font-weight: 500; font-size: 0.72em; opacity: 0.7; } [data-theme="ash"] .tagcloud { background: rgba(216, 201, 182, 0.4); } [data-theme="ash"] .tagcloud-item { background: rgba(239, 230, 220, 0.6); } [data-theme="ash"] .genres-status-row { background: rgba(216, 201, 182, 0.5); } [data-theme="ember"] .tagcloud-item { border-width: 2px; } [data-theme="ember"] .genres-status-row { border-width: 2px; } .genres-results-head { text-align: center; margin-bottom: 1.5rem; } .genres-results-head .kicker { font-family: var(--font-rugged); letter-spacing: 0.25em; color: var(--c-lava); font-size: 0.78rem; margin-bottom: 0.4rem; } .genres-h { font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 900; color: var(--t-bright); text-shadow: var(--glow-sm); } .genres-count { color: var(--t-muted); font-size: 0.92rem; margin-top: 0.3rem; } /* ---------- "Surprise Me" button (games list) ---------- */ .btn-surprise { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1rem !important; font-family: var(--font-rugged) !important; letter-spacing: 0.08em; font-size: 0.9rem !important; white-space: nowrap; border: 1px solid rgba(255, 106, 0, 0.35) !important; position: relative; overflow: hidden; } .btn-surprise::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(255, 106, 0, 0.3), transparent 60%); opacity: 0; transition: opacity .3s ease; } .btn-surprise:hover::before { opacity: 1; } .btn-surprise:hover { border-color: var(--c-lava) !important; color: var(--t-bright) !important; box-shadow: var(--glow-sm); } .btn-surprise.flash { animation: surpriseFlash .25s ease; } @keyframes surpriseFlash { 0% { box-shadow: 0 0 0 0 rgba(255, 106, 0, 0.7); } 100% { box-shadow: 0 0 0 20px rgba(255, 106, 0, 0); } } @media (max-width: 720px) { .btn-surprise { order: 99; margin-top: 0.5rem; width: 100%; justify-content: center; } } /* ---------- Badge / achievement showcase grid ---------- */ .prose .badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.9rem; margin: 1.5rem 0; } .prose .badge { text-align: center; padding: 1.2rem 0.8rem 0.9rem; border-radius: var(--r-md); border: 1px solid rgba(255, 106, 0, 0.22); background: linear-gradient(180deg, var(--c-stone-2), var(--c-coal)); box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3); transition: transform .25s ease, border-color .3s ease, box-shadow .3s ease; position: relative; } .prose .badge:hover { transform: translateY(-4px); border-color: rgba(255, 106, 0, 0.55); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5), var(--glow-sm); } .prose .badge-icon { font-size: 2.2rem; line-height: 1; margin-bottom: 0.5rem; filter: drop-shadow(0 0 10px rgba(255, 106, 0, 0.5)); } .prose .badge-name { font-family: var(--font-display); font-weight: 700; color: var(--t-bright); font-size: 0.98rem; margin-bottom: 0.25rem; } .prose .badge-desc { font-size: 0.82rem; color: var(--t-muted); line-height: 1.45; margin-bottom: 0.6rem; } .prose .badge-rarity { display: inline-block; font-family: var(--font-rugged); letter-spacing: 0.12em; font-size: 0.66rem; padding: 0.15rem 0.6rem; border-radius: 999px; text-transform: uppercase; } .prose .badge-rarity.common { background: rgba(180, 180, 180, 0.15); color: #c8c8c8; border: 1px solid rgba(180, 180, 180, 0.3); } .prose .badge-rarity.rare { background: rgba(74, 222, 128, 0.12); color: #4ade80; border: 1px solid rgba(74, 222, 128, 0.35); } .prose .badge-rarity.epic { background: rgba(180, 100, 255, 0.12); color: #c084fc; border: 1px solid rgba(180, 100, 255, 0.35); } .prose .badge-rarity.legendary { background: linear-gradient(135deg, rgba(255, 180, 71, 0.2), rgba(255, 69, 0, 0.2)); color: var(--c-ember); border: 1px solid rgba(255, 180, 71, 0.5); box-shadow: 0 0 10px rgba(255, 180, 71, 0.3); } [data-theme="ash"] .prose .badge { background: linear-gradient(180deg, rgba(216, 201, 182, 0.6), rgba(239, 230, 220, 0.4)); } [data-theme="ember"] .prose .badge { border-width: 2px; } /* ---------- Step-by-step recipe block ---------- */ .prose .recipe-steps { list-style: none; margin: 1.4rem 0; padding: 0; counter-reset: recipe; } .prose .recipe-steps > li { display: flex; gap: 1rem; padding: 1.1rem 1.2rem; margin-bottom: 0.8rem; border-radius: var(--r-md); border: 1px solid rgba(255, 106, 0, 0.2); border-left: 3px solid var(--c-lava); background: rgba(28, 19, 13, 0.5); transition: border-color .25s ease, transform .25s ease, box-shadow .3s ease; position: relative; } .prose .recipe-steps > li:hover { border-left-color: var(--c-ember); border-color: rgba(255, 106, 0, 0.4); transform: translateX(4px); box-shadow: var(--glow-sm); } .prose .recipe-step-num { flex-shrink: 0; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--c-molten), var(--c-lava)); color: var(--t-bright); font-family: var(--font-display); font-weight: 900; font-size: 1.1rem; box-shadow: var(--glow-sm); } .prose .recipe-step-body { flex: 1; min-width: 0; } .prose .recipe-step-body h4 { margin: 0 0 0.3rem; color: var(--t-bright); font-family: var(--font-display); font-size: 1.02rem; } .prose .recipe-step-body p { margin: 0; color: var(--t-base); font-size: 0.92rem; line-height: 1.55; } [data-theme="ash"] .prose .recipe-steps > li { background: rgba(216, 201, 182, 0.4); } [data-theme="ember"] .prose .recipe-steps > li { border-width: 2px; border-left-width: 4px; } @media (max-width: 540px) { .prose .recipe-steps > li { padding: 0.9rem; gap: 0.7rem; } .prose .recipe-step-num { width: 32px; height: 32px; font-size: 0.95rem; } }