/* ===================== Chess Decoded theme ===================== */ /* The site is locked to its dark palette — no light mode, no system-preference switch. App.razor and theme.js stamp data-theme="dark" on . */ :root, :root[data-theme="dark"] { --bg: #0c0e14; --panel: #14161f; --panel-2: #191c28; --border: #262a3a; --text: #eef1f8; --text-muted: #9aa2ba; --gold: #d3ad5f; --gold-soft: rgba(211, 173, 95, 0.16); --blue: #7c9cff; --green: #4caf7d; --red: #e0637a; --sq-light: #f0d9b5; --sq-dark: #7a5a3a; --radius: 14px; --shadow: 0 12px 32px rgba(0, 0, 0, 0.35); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-family: Georgia, 'Times New Roman', serif; line-height: 1.2; margin: 0 0 0.5em; } p { line-height: 1.65; color: var(--text-muted); } ul { padding-left: 1.2em; color: var(--text-muted); line-height: 1.65; } li { margin-bottom: 0.4em; } .blazor-error-boundary { background: #b32121; padding: 1rem; color: white; border-radius: var(--radius); } #blazor-error-ui { background: #b32121; bottom: 0; box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.3); display: none; left: 0; padding: 0.8rem 1.2rem; position: fixed; width: 100%; z-index: 1000; color: white; } #blazor-error-ui .dismiss { cursor: pointer; float: right; } /* ===================== App shell ===================== */ .app-shell { display: flex; min-height: 100vh; } .app-content { flex: 1; max-width: 1080px; margin: 0 auto; padding: 2.5rem 2rem 5rem; } /* ===================== Side nav ===================== */ .side-nav { width: 240px; flex-shrink: 0; background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 1.75rem 1.25rem; position: sticky; top: 0; height: 100vh; overflow: hidden; } .brand-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); flex-shrink: 0; } .brand { display: flex; align-items: center; gap: 0.6rem; font-size: 1.15rem; min-width: 0; } .theme-toggle { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; width: 2.1rem; height: 2.1rem; flex-shrink: 0; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--text); display: flex; align-items: center; justify-content: center; } .theme-toggle:hover { border-color: var(--gold); } .brand-glyph { font-size: 1.8rem; color: var(--gold); } .brand-text strong { color: var(--gold); font-weight: 700; } .nav-search { display: flex; gap: 0.4rem; margin-bottom: 1.25rem; flex-shrink: 0; } .nav-search input[type="search"] { flex: 1; min-width: 0; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.7rem; color: var(--text); font-size: 0.85rem; } .nav-search input[type="search"]:focus { outline: none; border-color: var(--gold); } .nav-search button { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.65rem; cursor: pointer; color: var(--text); } .nav-search button:hover { border-color: var(--gold); } .nav-links { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 0.3rem; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .nav-links::-webkit-scrollbar { width: 6px; } .nav-links::-webkit-scrollbar-track { background: transparent; } .nav-links::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } .nav-links::-webkit-scrollbar-thumb:hover { background: var(--gold); } .nav-link { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.8rem; border-radius: 10px; color: var(--text-muted); font-weight: 500; transition: background 0.15s, color 0.15s; } .nav-link:hover { background: var(--panel-2); color: var(--text); } .nav-link.active { background: var(--gold-soft); color: var(--gold); } .nav-icon { width: 1.4em; text-align: center; } .nav-group-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); opacity: 0.6; margin: 0.9rem 0 0.15rem 0.8rem; } .nav-group-label:first-of-type { margin-top: 0.5rem; } .nav-footer { flex-shrink: 0; padding-top: 1.25rem; border-top: 1px solid var(--border); } .nav-footer p { font-size: 0.8rem; color: var(--text-muted); opacity: 0.8; } /* ===================== Buttons & pills ===================== */ .btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.7rem 1.3rem; border-radius: 10px; font-weight: 600; border: 1px solid transparent; cursor: pointer; } .btn-primary { background: var(--gold); color: #241b08; } .btn-primary:hover { filter: brightness(1.08); } .btn-secondary { background: var(--panel-2); border-color: var(--border); color: var(--text); } .btn-secondary:hover { border-color: var(--gold); color: var(--gold); } .pill-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.5rem 0 1rem; } .pill { background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem 0.75rem; font-size: 0.8rem; color: var(--text-muted); } .badge { display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .badge-category { background: rgba(124, 156, 255, 0.15); color: var(--blue); } .badge-difficulty { background: var(--panel-2); color: var(--text-muted); border: 1px solid var(--border); } .badge-beginner { color: var(--green); border-color: rgba(76, 175, 125, 0.4); } .badge-intermediate { color: var(--gold); border-color: rgba(211, 173, 95, 0.4); } .badge-advanced { color: var(--red); border-color: rgba(224, 99, 122, 0.4); } /* ===================== Hero ===================== */ .hero { text-align: center; padding: 3rem 1rem 3.5rem; border-bottom: 1px solid var(--border); margin-bottom: 3rem; } .hero-pieces { font-size: 2.6rem; color: var(--gold); letter-spacing: 0.35em; margin-bottom: 1rem; } .hero h1 { font-size: 2.6rem; margin-bottom: 0.75rem; } .hero-lede { max-width: 640px; margin: 0 auto 1.75rem; font-size: 1.05rem; } .hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* ===================== Feature grid & stats ===================== */ .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 3rem; } .feature-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; transition: transform 0.15s, border-color 0.15s; } .feature-card:hover { transform: translateY(-3px); border-color: var(--gold); } .feature-glyph { font-size: 2.2rem; color: var(--gold); margin-bottom: 0.75rem; } .stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; } .stat { text-align: center; } .stat-number { display: block; font-size: 2rem; font-weight: 700; color: var(--gold); font-family: Georgia, serif; } .stat-label { font-size: 0.85rem; color: var(--text-muted); } /* ===================== Explore more (home) ===================== */ .explore-more { margin-top: 3rem; } .explore-more h2 { font-size: 1.3rem; color: var(--gold); margin-bottom: 1rem; } .explore-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.75rem; } .explore-link { display: flex; align-items: center; gap: 0.6rem; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 0.85rem 1.1rem; font-size: 0.92rem; transition: border-color 0.15s, transform 0.15s; } .explore-link span { font-size: 1.2rem; } .explore-link:hover { border-color: var(--gold); transform: translateY(-2px); } /* ===================== Page header ===================== */ .page-header { margin-bottom: 2rem; } .page-header h1 { font-size: 2.2rem; } /* ===================== Piece grid ===================== */ .piece-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; } .piece-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; text-align: center; transition: transform 0.15s, border-color 0.15s; } .piece-card:hover { transform: translateY(-4px); border-color: var(--gold); } .piece-card-glyph { font-size: 3.2rem; color: var(--gold); margin-bottom: 0.5rem; } .piece-card-value { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 0.6rem; } .piece-card p { font-size: 0.9rem; } /* ===================== Strategy grid / filters ===================== */ .category-filter { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.75rem; } .filter-pill { background: var(--panel); border: 1px solid var(--border); color: var(--text-muted); padding: 0.5rem 1rem; border-radius: 999px; cursor: pointer; font-size: 0.85rem; font-weight: 600; } .filter-pill.active { background: var(--gold-soft); border-color: var(--gold); color: var(--gold); } .strategy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; } .strategy-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; transition: transform 0.15s, border-color 0.15s; display: flex; flex-direction: column; gap: 0.5rem; } .strategy-card:hover { transform: translateY(-4px); border-color: var(--gold); } .strategy-card-top { display: flex; gap: 0.4rem; flex-wrap: wrap; } .strategy-card h2 { font-size: 1.15rem; } .strategy-card p { font-size: 0.88rem; margin: 0; } /* ===================== Detail pages ===================== */ .detail-header { display: flex; gap: 1.5rem; align-items: flex-start; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); } .piece-detail-header .detail-header-glyph { font-size: 4.5rem; color: var(--gold); line-height: 1; } .detail-header h1 { font-size: 2rem; margin-bottom: 0.25rem; } .detail-tagline { font-size: 1.05rem; font-style: italic; color: var(--text-muted); } .detail-layout { display: grid; grid-template-columns: 1fr 380px; gap: 2.5rem; align-items: start; } .detail-layout.single-column { grid-template-columns: 1fr; max-width: 760px; } .champion-card-order { font-family: Georgia, serif; font-size: 0.85rem; color: var(--text-muted); opacity: 0.7; margin-bottom: 0.4rem; } .champion-card-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: top center; border: 2px solid var(--border); margin-bottom: 0.75rem; } .detail-header-photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; object-position: top center; border: 2px solid var(--gold); flex-shrink: 0; } .photo-credit { font-size: 0.78rem; opacity: 0.75; margin-top: -0.5rem; margin-bottom: 1.5rem; } .photo-credit a { color: var(--gold); } .detail-section { margin-bottom: 2.25rem; } .detail-section h2 { font-size: 1.3rem; color: var(--gold); border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; margin-bottom: 0.9rem; } .etymology-box { background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 10px; padding: 1rem 1.25rem; margin-top: 1rem; } .etymology-box h3 { font-size: 0.95rem; color: var(--gold); margin-bottom: 0.35rem; } .sw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .sw-box { border-radius: 10px; padding: 1rem 1.25rem; border: 1px solid var(--border); } .sw-strength { border-left: 3px solid var(--green); } .sw-weakness { border-left: 3px solid var(--red); } .sw-box h3 { font-size: 0.95rem; margin-bottom: 0.35rem; } .fun-facts li::marker { color: var(--gold); } .game-cards { display: grid; gap: 0.9rem; } .game-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.25rem; } .game-card h3 { font-size: 1rem; margin-bottom: 0.2rem; } .game-card-meta { font-size: 0.78rem; color: var(--gold); margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.03em; } .game-card p { font-size: 0.9rem; margin: 0; } /* ===================== Diagram panel ===================== */ .detail-aside { position: sticky; top: 2rem; } .diagram-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; text-align: center; } .diagram-panel h3 { font-size: 1rem; color: var(--gold); margin-bottom: 1rem; } .diagram-note { font-size: 0.82rem; margin-top: 0.75rem; } code { background: var(--panel-2); border: 1px solid var(--border); border-radius: 4px; padding: 0.05em 0.4em; font-family: 'Courier New', monospace; font-size: 0.92em; color: var(--gold); } .pgn-note { font-family: 'Courier New', monospace; background: var(--panel-2); border-radius: 8px; padding: 0.5rem 0.75rem; color: var(--text); } .mini-board-figure { margin: 0; } /* ===================== Game replay ===================== */ .replay-controls { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1rem; } .replay-controls .btn { padding: 0.4rem 0.7rem; font-size: 0.95rem; } .replay-controls .btn:disabled { opacity: 0.35; cursor: not-allowed; } .replay-counter { font-family: 'Courier New', monospace; font-size: 0.82rem; color: var(--text-muted); min-width: 4.5em; text-align: center; } .move-list { margin-top: 1.25rem; max-height: 320px; overflow-y: auto; text-align: left; border-top: 1px solid var(--border); padding-top: 0.75rem; } .move-row { display: grid; grid-template-columns: 2.2em 1fr 1fr; gap: 0.3rem; align-items: center; padding: 0.15rem 0; } .move-number { color: var(--text-muted); font-size: 0.82rem; font-family: 'Courier New', monospace; } .move-btn { background: transparent; border: 1px solid transparent; color: var(--text); font-family: 'Courier New', monospace; font-size: 0.85rem; padding: 0.2rem 0.5rem; border-radius: 6px; cursor: pointer; text-align: left; } .move-btn:hover { background: var(--panel-2); } .move-btn.active { background: var(--gold-soft); border-color: var(--gold); color: var(--gold); font-weight: 700; } .mini-board { width: 100%; max-width: 352px; height: auto; border-radius: 6px; box-shadow: var(--shadow); } .sq-light { fill: var(--sq-light); } .sq-dark { fill: var(--sq-dark); } .sq-highlight { fill: rgba(76, 175, 125, 0.55); } .sq-focus { fill: none; stroke: var(--gold); stroke-width: 3; } .piece-white { font-size: 30px; fill: #fff; stroke: #1a1a1a; stroke-width: 0.6; } .piece-black { font-size: 30px; fill: #1a1a1a; stroke: #fff; stroke-width: 0.4; } .coord-label { font-size: 9px; fill: rgba(0, 0, 0, 0.45); font-family: 'Segoe UI', sans-serif; } figcaption { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.85rem; } /* ===================== Glossary ===================== */ .glossary-list { display: grid; gap: 1rem; } .glossary-entry { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 1.1rem 1.4rem; } .glossary-entry h3 { font-size: 1.05rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.4rem; } .glossary-entry p { margin: 0; font-size: 0.92rem; } .glossary-link { font-size: 0.78rem; color: var(--gold); white-space: nowrap; } /* ===================== Search ===================== */ .search-results { display: grid; gap: 0.75rem; max-width: 760px; } .search-result { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.3rem; transition: border-color 0.15s; } .search-result:hover { border-color: var(--gold); } .search-result h3 { font-size: 1.05rem; margin: 0.4rem 0 0.3rem; } .search-result p { margin: 0; font-size: 0.88rem; } /* ===================== Empty state ===================== */ .empty-state { text-align: center; padding: 5rem 1rem; } .empty-state-glyph { font-size: 3.5rem; color: var(--gold); margin-bottom: 1rem; } /* ===================== Responsive ===================== */ @media (max-width: 900px) { .detail-layout { grid-template-columns: 1fr; } .detail-aside { position: static; } .sw-grid { grid-template-columns: 1fr; } } /* Mobile top bar + slide-in drawer — hidden at desktop widths. Open/closed state is the hidden #nav-toggle checkbox (a sibling of .app-shell's children, rendered by NavMenu); labels toggle it, so this needs no JS. */ .nav-topbar, .nav-backdrop { display: none; } @media (max-width: 860px) { .app-shell { flex-direction: column; } .nav-topbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 1rem; background: var(--panel); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; } .nav-topbar .brand { font-size: 1.05rem; } .nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 2.5rem; height: 2.5rem; padding: 0; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; flex-shrink: 0; } .nav-toggle-bar { display: block; width: 1.15rem; height: 2px; margin: 0 auto; background: var(--text); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; } .nav-toggle-checkbox:checked ~ .nav-topbar .nav-toggle .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle-checkbox:checked ~ .nav-topbar .nav-toggle .nav-toggle-bar:nth-child(2) { opacity: 0; } .nav-toggle-checkbox:checked ~ .nav-topbar .nav-toggle .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .nav-toggle-checkbox:checked ~ .nav-backdrop { opacity: 1; pointer-events: auto; } .side-nav { position: fixed; top: 0; left: 0; z-index: 40; width: min(290px, 82vw); height: 100vh; transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: var(--shadow); overflow-y: auto; } .nav-toggle-checkbox:checked ~ .side-nav { transform: translateX(0); } .app-content { padding: 1.5rem 1.15rem 3rem; min-width: 0; } .detail-header { flex-direction: column; } .hero { padding: 2.25rem 0.25rem 2.75rem; } .hero-pieces { font-size: 1.7rem; letter-spacing: 0.18em; overflow: hidden; } .hero h1 { font-size: 1.95rem; } .hero-lede { font-size: 0.98rem; } .feature-grid, .piece-grid, .strategy-grid, .champion-grid, .explore-grid { grid-template-columns: 1fr; } .stat-strip { grid-template-columns: 1fr 1fr; } .detail-header-photo, .detail-header .detail-header-glyph { margin-left: auto; margin-right: auto; } } /* ===================== SEO-migration additions ===================== */ /* Breadcrumb trail on detail pages */ .breadcrumb { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 1rem; } .breadcrumb a { color: var(--gold); } .breadcrumb a:hover { text-decoration: underline; } .count-badge { display: inline-block; font-size: 0.7rem; font-weight: 600; color: var(--text-muted); background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 0.05rem 0.5rem; vertical-align: middle; margin-left: 0.4rem; } /* ---- CSS-only puzzle "reveal solution" ---- */ .puzzle-layout .when-revealed { display: none; } .puzzle-layout .puzzle-reveal-cb:checked ~ .detail-main .when-revealed, .puzzle-layout .puzzle-reveal-cb:checked ~ .detail-aside .when-revealed { display: block; } .puzzle-layout .puzzle-reveal-cb:checked ~ .detail-main .when-hidden, .puzzle-layout .puzzle-reveal-cb:checked ~ .detail-aside .when-hidden { display: none; } .puzzle-layout label.btn { cursor: pointer; } /* ---- Game replay (progressive-enhancement JS) ---- */ .game-replay .replay-board[hidden] { display: none; } .replay-controls { display: flex; align-items: center; gap: 0.35rem; margin: 0.85rem 0 0.5rem; flex-wrap: wrap; } .replay-controls .btn { padding: 0.4rem 0.7rem; } .replay-counter { font-size: 0.85rem; color: var(--text-muted); min-width: 3.5em; text-align: center; } .replay-heading { min-height: 1.4em; } .replay-nojs-note { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.5rem; } /* when JS runs it removes [hidden] on .replay-controls and hides the plain move text */ .game-replay .replay-controls[hidden], .game-replay .replay-movetext.js-hidden { display: none; } .replay-movetext { font-family: 'Courier New', monospace; font-size: 0.85rem; line-height: 1.7; color: var(--text-muted); margin-top: 0.75rem; word-spacing: 0.15em; } .move-list .move-btn.active { background: var(--gold-soft); color: var(--gold); }