/* * Chess theme layer. * Contains every chess-specific visual. Delete this file and reference * a different theme-*.css from the page to re-skin the site * without touching any markup. * * Nothing in this file should define new layout or component structure * — it only layers visuals onto the semantic/structural classes defined * in components.css and layout.css. */ /* ── Chessboard background on hero ───────────────────────────────── */ .hero__board { background-color: var(--surface-board-dark); /* 8x8 subtle checker pattern, barely visible until knight's trail pulses */ background-image: linear-gradient(45deg, var(--surface-board-light) 25%, transparent 25%), linear-gradient(-45deg, var(--surface-board-light) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--surface-board-light) 75%), linear-gradient(-45deg, transparent 75%, var(--surface-board-light) 75%); background-size: 90px 90px; background-position: 0 0, 0 45px, 45px -45px, -45px 0; opacity: 0.9; } /* Knight's-tour SVG sits inside .hero__board and is positioned absolutely */ .knight-tour { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .knight-tour__square { fill: transparent; transition: fill var(--dur-slow) var(--ease-out); } .knight-tour__square.is-visited { fill: var(--glow-orange); animation: square-glow 2400ms var(--ease-out) forwards; } @keyframes square-glow { 0% { fill: rgba(255, 131, 0, 0.55); } 40% { fill: rgba(255, 131, 0, 0.25); } 100% { fill: rgba(255, 131, 0, 0); } } .knight-tour__piece { transition: transform var(--dur-tour) cubic-bezier(0.5, 0, 0.2, 1); filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55)); } @media (prefers-reduced-motion: reduce) { .knight-tour__piece { transition: none; } .knight-tour__square.is-visited { animation: none; fill: transparent; } } /* Hero vignette: soft blend at the copy-to-board seam so the board * transitions cleanly into the dark copy side. */ .hero::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient( 95deg, rgba(5, 30, 40, 1) 0%, rgba(5, 30, 40, 0.98) 35%, rgba(5, 30, 40, 0.7) 45%, rgba(5, 30, 40, 0.2) 55%, rgba(5, 30, 40, 0) 65%, rgba(5, 30, 40, 0) 100% ); pointer-events: none; } @media (max-width: 900px) { .hero::before { background: linear-gradient( 180deg, rgba(5, 30, 40, 1) 0%, rgba(5, 30, 40, 0.95) 45%, rgba(5, 30, 40, 0.6) 70%, rgba(5, 30, 40, 0.35) 100% ); } } /* ── Page header: static board pattern, right-side fade ─────────── */ .page-header::before { content: ""; position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(45deg, var(--surface-board-light) 25%, transparent 25%), linear-gradient(-45deg, var(--surface-board-light) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--surface-board-light) 75%), linear-gradient(-45deg, transparent 75%, var(--surface-board-light) 75%); background-size: 80px 80px; background-position: 0 0, 0 40px, 40px -40px, -40px 0; opacity: 0.65; mask-image: linear-gradient(95deg, transparent 30%, #000 70%, #000 100%); -webkit-mask-image: linear-gradient(95deg, transparent 30%, #000 70%, #000 100%); } /* ── Section dividers: chess notation ───────────────────────────── */ .chess-divider { display: flex; align-items: center; gap: var(--space-4); font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--tracking-micro); text-transform: uppercase; color: var(--brand-orange); } .chess-divider::before, .chess-divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--border-light), transparent); } .section--dark .chess-divider::before, .section--dark .chess-divider::after { background: linear-gradient(90deg, transparent, var(--border-subtle), transparent); } /* ── Card chess accents ──────────────────────────────────────────── */ /* Small board-square pattern peeking in the top-right of feature cards */ .card::after { content: ""; position: absolute; top: -2px; right: -2px; width: 56px; height: 56px; background-image: linear-gradient(45deg, var(--border-light) 25%, transparent 25%), linear-gradient(-45deg, var(--border-light) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--border-light) 75%), linear-gradient(-45deg, transparent 75%, var(--border-light) 75%); background-size: 14px 14px; background-position: 0 0, 0 7px, 7px -7px, -7px 0; opacity: 0.35; border-top-right-radius: var(--radius-lg); mask-image: linear-gradient(225deg, #000 40%, transparent 75%); -webkit-mask-image: linear-gradient(225deg, #000 40%, transparent 75%); pointer-events: none; } .section--dark .card::after { background-image: linear-gradient(45deg, var(--border-subtle) 25%, transparent 25%), linear-gradient(-45deg, var(--border-subtle) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--border-subtle) 75%), linear-gradient(-45deg, transparent 75%, var(--border-subtle) 75%); opacity: 0.6; } /* ── Decorative piece silhouette ─────────────────────────────────── */ .piece-decor { position: absolute; pointer-events: none; opacity: 0.06; filter: blur(0.3px); } .piece-decor--br { bottom: -40px; right: -40px; width: 340px; height: 340px; } .piece-decor--bl { bottom: -30px; left: -30px; width: 280px; height: 280px; } .piece-decor--tr { top: -30px; right: -30px; width: 220px; height: 220px; } /* ── CTA band: subtle board on gradient ──────────────────────────── */ .cta-band::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%), linear-gradient(-45deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.04) 75%), linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.04) 75%); background-size: 48px 48px; background-position: 0 0, 0 24px, 24px -24px, -24px 0; opacity: 0.7; z-index: 1; } /* ── Micro-labels: rank/file tick style on eyebrows ──────────────── */ .eyebrow::before { content: "▸ "; color: var(--brand-orange); margin-right: 2px; } /* ── Hero-specific ornament: notation under title ────────────────── */ .hero__notation { display: inline-flex; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--tracking-micro); text-transform: uppercase; color: var(--brand-sky); opacity: 0.75; } .hero__notation span:first-child { color: var(--brand-orange); }