/* Timurid Chess marketing site — same two art directions as the desktop app (plan §32 M6): an illuminated-manuscript Timurid palette (default) and a Western-classical club palette, swapped with the theme toggle in the header. Plain CSS, no build step. */ :root { --bg: #f6ecd9; --bg-rgb: 246, 236, 217; --bg-elevated: #fbf4e4; --bg-elevated-rgb: 251, 244, 228; --surface: #fffaf0; --surface-rgb: 255, 250, 240; --surface-border: #c9a227; --text: #241a10; --text-dim: #7a5c34; --accent: #b8860b; --accent-text: #2a1a04; --danger: #8a2e22; --success: #2f6f5e; --board-light: #f1e2b8; --board-dark: #2f6f63; --display-font: "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif; --body-font: Georgia, "Times New Roman", serif; --radius: 4px; --border-width: 2px; --max-width: 1120px; /* Fluid scale — every gap, pad and rhythm value below is a clamp() that grows smoothly with the viewport width, so the layout adapts to *any* screen size continuously instead of only snapping at a few breakpoints. min at ~360px phone, max at ~1400px. */ --gutter: clamp(1rem, 0.4rem + 3vw, 2.5rem); /* page side padding */ --space-xs: clamp(0.4rem, 0.3rem + 0.5vw, 0.75rem); --space-sm: clamp(0.75rem, 0.55rem + 1vw, 1.25rem); --space-md: clamp(1rem, 0.6rem + 2vw, 2rem); --space-lg: clamp(1.5rem, 0.9rem + 3vw, 3rem); --space-section: clamp(2.75rem, 1.4rem + 6vw, 6rem); /* vertical rhythm between sections */ --text-body: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem); /* Illuminated-manuscript backdrop (website/backgrounds/) — same art direction as the desktop app's Timurid theme. Swapped for a portrait crop under 780px (see media query). */ --bg-image: url("../../backgrounds/timurid-chess-renaissance-website.png"); --bg-image-narrow: url("../../backgrounds/timurid-chess-renaissance-mobile.png"); --bg-wash: linear-gradient( 180deg, rgba(var(--bg-rgb), 0.5) 0%, rgba(var(--bg-rgb), 0.6) 45%, rgba(var(--bg-rgb), 0.7) 100% ); --hero-wash: linear-gradient( 100deg, rgba(var(--bg-rgb), 0.96) 0%, rgba(var(--bg-rgb), 0.9) 32%, rgba(var(--bg-rgb), 0.45) 58%, rgba(var(--bg-rgb), 0.12) 78% ); color-scheme: light; } [data-theme="western"] { --bg: #e9e2d0; --bg-rgb: 233, 226, 208; --bg-elevated: #f5f1e6; --bg-elevated-rgb: 245, 241, 230; --surface: #ffffff; --surface-rgb: 255, 255, 255; --surface-border: #5c4326; --text: #2b2018; --text-dim: #6b5c48; --accent: #1f4d3a; --accent-text: #f5f1e6; --danger: #7a2e22; --success: #2f6f4f; --board-light: #e8c99b; --board-dark: #7a4b2a; --display-font: "Book Antiqua", "Palatino Linotype", Georgia, serif; --body-font: Georgia, "Times New Roman", serif; --radius: 10px; --border-width: 1.5px; /* Chess-club backdrop: dark walnut/marble with a single lit piece, same art direction as the desktop app's Western theme. */ --bg-image: url("../../backgrounds/timurid-chess-western-website.png"); --bg-image-narrow: url("../../backgrounds/timurid-chess-western-mobile.png"); } /* --------------------------------------------------------------------------- Brightness — a second axis, independent of the Timurid/Western art direction (mirrors the desktop app's Light/Dark/System setting). The palettes below are the same dark values the desktop uses. "System" = no data-mode attribute, so the prefers-color-scheme media query decides; an explicit choice sets data-mode="light" | "dark" on and wins over the OS. The washes and gradients all read var(--bg-rgb) etc. at use-site, so overriding just the raw tokens re-tints every derived layer automatically. --------------------------------------------------------------------------- */ /* Timurid — dark (explicit choice) */ :root[data-mode="dark"] { --bg: #1a1510; --bg-rgb: 26, 21, 16; --bg-elevated: #221c15; --bg-elevated-rgb: 34, 28, 21; --surface: #2b241b; --surface-rgb: 43, 36, 27; --surface-border: #c9a227; --text: #f2e7d2; --text-dim: #bfa279; --accent: #d8a53a; --accent-text: #2a1a04; --danger: #d8735f; --success: #64b598; --board-light: #b58f61; --board-dark: #4f2f1c; color-scheme: dark; } /* Western — dark (explicit choice) */ :root[data-mode="dark"][data-theme="western"] { --bg: #16181a; --bg-rgb: 22, 24, 26; --bg-elevated: #1e2124; --bg-elevated-rgb: 30, 33, 36; --surface: #262a2d; --surface-rgb: 38, 42, 45; --surface-border: #8a7a5c; --text: #ece6da; --text-dim: #a99f8d; --accent: #4f9e7f; --accent-text: #0d1410; --danger: #d0705f; --success: #5aa87f; --board-light: #b98f63; --board-dark: #5c3a22; color-scheme: dark; } @media (prefers-color-scheme: dark) { /* Timurid — dark (System) */ :root:not([data-mode="light"]) { --bg: #1a1510; --bg-rgb: 26, 21, 16; --bg-elevated: #221c15; --bg-elevated-rgb: 34, 28, 21; --surface: #2b241b; --surface-rgb: 43, 36, 27; --surface-border: #c9a227; --text: #f2e7d2; --text-dim: #bfa279; --accent: #d8a53a; --accent-text: #2a1a04; --danger: #d8735f; --success: #64b598; --board-light: #b58f61; --board-dark: #4f2f1c; color-scheme: dark; } /* Western — dark (System) */ :root:not([data-mode="light"])[data-theme="western"] { --bg: #16181a; --bg-rgb: 22, 24, 26; --bg-elevated: #1e2124; --bg-elevated-rgb: 30, 33, 36; --surface: #262a2d; --surface-rgb: 38, 42, 45; --surface-border: #8a7a5c; --text: #ece6da; --text-dim: #a99f8d; --accent: #4f9e7f; --accent-text: #0d1410; --danger: #d0705f; --success: #5aa87f; --board-light: #b98f63; --board-dark: #5c3a22; color-scheme: dark; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* Keep 1rem == 16px on iOS in landscape (Safari otherwise inflates text and breaks the fluid scale). */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background-color: var(--bg); color: var(--text); font-family: var(--body-font); font-size: var(--text-body); line-height: 1.6; /* Nothing on this page is meant to scroll sideways; clip stray overflow (a wide grid track, an un-wrapped word) instead of showing a horizontal scrollbar on phones. */ overflow-x: hidden; overflow-x: clip; transition: background-color 0.25s ease, color 0.25s ease; } /* A dedicated fixed layer for the backdrop art, instead of `background-attachment: fixed` on body — on a long page with lots of images, browsers don't reliably keep a plain `fixed`-attachment body background composited/visible past the first viewport (confirmed empirically while building this page); a real `position: fixed` element behind everything is the robust way to get the same "backdrop stays put while content scrolls over it" effect. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background-image: var(--bg-wash), var(--bg-image); background-repeat: no-repeat; background-position: top center; background-size: cover; } @media (max-width: 780px) { body::before { background-image: var(--bg-wash), var(--bg-image-narrow); } } img { max-width: 100%; display: block; } a { color: inherit; } .container { max-width: var(--max-width); margin: 0 auto; /* Fluid side padding, but never less than the phone's safe area (notch / rounded corners in landscape). */ padding-inline: max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right)); } /* ---------- Ornament strip ---------- */ .ornament-strip { height: 8px; background-image: repeating-linear-gradient( 135deg, var(--surface-border) 0 2px, transparent 2px 22px ); opacity: 0.6; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 20; background: rgba(var(--bg-rgb), 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--surface-border); } .site-header .container { display: flex; align-items: center; gap: 16px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--display-font); font-weight: 700; font-size: 1.3rem; text-decoration: none; color: var(--text); margin-right: auto; } .brand img { width: 32px; height: 32px; } .site-nav { display: flex; gap: 4px; flex-wrap: wrap; } .site-nav a { text-decoration: none; padding: 8px 12px; border-radius: var(--radius); font-size: 0.95rem; color: var(--text-dim); } .site-nav a:hover { color: var(--text); background: var(--bg-elevated); } .theme-toggle { border: var(--border-width) solid var(--surface-border); background: var(--bg-elevated); color: var(--text); border-radius: var(--radius); padding: 8px 14px; font-family: var(--body-font); font-size: 0.9rem; cursor: pointer; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: var(--radius); border: var(--border-width) solid var(--surface-border); font-family: var(--body-font); font-size: 1rem; text-decoration: none; cursor: pointer; background: var(--bg-elevated); color: var(--text); } .btn.primary { background: var(--accent); color: var(--accent-text); font-weight: 700; border-color: var(--accent); } .btn.ghost { background: transparent; } .btn-row { display: flex; gap: 12px; flex-wrap: wrap; } /* ---------- Hero ---------- */ .hero { /* Fill exactly the screen it opens on — one viewport tall, whatever the device — then let it grow if the content itself is taller (very short landscape phones). `svh` is the stable "small" viewport height, so it doesn't lurch when mobile browser chrome hides. */ min-height: 100svh; padding-block: clamp(2rem, 1rem + 6vh, 6rem); display: flex; align-items: center; background-image: var(--hero-wash), var(--bg-image); background-repeat: no-repeat; background-position: right center; background-size: cover; } @supports not (min-height: 100svh) { .hero { min-height: 100vh; } } @media (max-width: 780px) { .hero { /* text sits up top, so keep that end opaque; fade out toward the bottom to reveal the portrait crop's own motif (its ornament sits low in the frame) */ background-image: linear-gradient( 180deg, rgba(var(--bg-rgb), 0.95) 0%, rgba(var(--bg-rgb), 0.88) 38%, rgba(var(--bg-rgb), 0.55) 65%, rgba(var(--bg-rgb), 0.25) 100% ), var(--bg-image-narrow); background-position: bottom center; } } .hero .container { width: 100%; } .hero .eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; color: var(--accent); font-weight: 700; } .hero h1 { font-family: var(--display-font); font-size: clamp(2.4rem, 6vw, 4rem); margin: 12px 0 8px; line-height: 1.1; max-width: 680px; } .hero p.lede { max-width: 560px; margin: 0 0 32px; font-size: 1.15rem; color: var(--text-dim); } .hero .btn-row { justify-content: flex-start; margin-bottom: 48px; } .piece-row { display: flex; justify-content: flex-start; gap: clamp(4px, 2vw, 18px); flex-wrap: wrap; opacity: 0.9; } .piece-row img { width: clamp(32px, 6vw, 56px); height: clamp(32px, 6vw, 56px); } /* ---------- Sections ---------- */ section { padding-block: var(--space-section); } section.alt { background: rgba(var(--bg-elevated-rgb), 0.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-top: 1px solid var(--surface-border); border-bottom: 1px solid var(--surface-border); } .section-head { text-align: center; max-width: 680px; margin: 0 auto var(--space-lg); padding: var(--space-sm) var(--space-md); border-radius: var(--radius); background: rgba(var(--surface-rgb), 0.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .section-head .eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; color: var(--accent); font-weight: 700; } .section-head h2 { font-family: var(--display-font); font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 8px 0 12px; } .section-head p { color: var(--text-dim); } /* ---------- Cards / grid ---------- */ .grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); } .card { background: rgba(var(--surface-rgb), 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: var(--border-width) solid var(--surface-border); border-radius: var(--radius); padding: var(--space-md); } .card h3 { font-family: var(--display-font); margin: 0 0 8px; font-size: 1.15rem; } .card p { margin: 0; color: var(--text-dim); font-size: 0.95rem; } .card .icon { font-size: 1.8rem; margin-bottom: 10px; display: block; } /* ---------- Screenshots ---------- */ .screens { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); } .screen-card { border: var(--border-width) solid var(--surface-border); border-radius: var(--radius); overflow: hidden; background: rgba(var(--surface-rgb), 0.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .screen-card img { width: 100%; border-bottom: 1px solid var(--surface-border); } .screen-card figcaption { padding: 12px 16px; font-size: 0.9rem; color: var(--text-dim); } .screen-card figcaption strong { color: var(--text); display: block; font-family: var(--display-font); margin-bottom: 2px; } /* ---------- Platforms / downloads ---------- */ .platforms { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); } .platform-card { background: rgba(var(--surface-rgb), 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: var(--border-width) solid var(--surface-border); border-radius: var(--radius); padding: var(--space-md); text-align: center; } .platform-card .glyph { font-size: 2.2rem; margin-bottom: 10px; } .platform-card h3 { font-family: var(--display-font); margin: 0 0 6px; } .platform-card p { color: var(--text-dim); font-size: 0.9rem; margin: 0 0 16px; } .download-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .download-links .btn { padding: 8px 14px; font-size: 0.9rem; } .dl-size { opacity: 0.6; font-size: 0.8em; } .download-note { max-width: 720px; margin: 36px auto 0; text-align: center; font-size: 0.9rem; color: var(--text-dim); border-top: 1px dashed var(--surface-border); padding-top: 20px; } .download-note code { background: var(--bg-elevated); border: 1px solid var(--surface-border); border-radius: 4px; padding: 1px 6px; font-size: 0.85em; } /* ---------- Rules difference list ---------- */ .rule-list { max-width: 760px; margin: 0 auto; display: grid; gap: var(--space-sm); } .rule-item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); align-items: start; background: rgba(var(--surface-rgb), 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--surface-border); border-radius: var(--radius); padding: 16px 20px; } .rule-item .badge { font-family: var(--display-font); font-weight: 700; color: var(--accent); white-space: nowrap; } .rule-item p { margin: 0; color: var(--text-dim); } /* ---------- Footer ---------- */ footer { padding-block: var(--space-lg) calc(var(--space-lg) + env(safe-area-inset-bottom)); text-align: center; color: var(--text-dim); font-size: 0.85rem; background: rgba(var(--bg-elevated-rgb), 0.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-top: 1px solid var(--surface-border); } footer a { color: var(--accent); text-decoration: none; } /* ---------- Utility ---------- */ .center { text-align: center; } @media (max-width: 640px) { .site-nav { order: 3; width: 100%; justify-content: center; } /* Header row: brand + the two toggles share one line above the wrapped nav. Trim the toggles so they don't force a third line on a 320px screen. */ .site-header .container { gap: 8px; row-gap: 10px; } .brand { font-size: 1.15rem; } .theme-toggle { padding: 6px 10px; font-size: 0.8rem; } } /* ---- Phone layout ------------------------------------------------------------- The fluid scale in :root already shrinks every gap, pad and rhythm value as the screen narrows — this block only carries the few *structural* changes a clamp() can't express. */ @media (max-width: 560px) { .hero p.lede { font-size: 1.05rem; } /* Full-width CTAs are an easier tap target than side-by-side buttons that wrap awkwardly at this width. */ .btn-row .btn { flex: 1 1 100%; justify-content: center; } /* The rule badge ("No castling / no en passant") is nowrap and eats the row on a narrow screen — stack it above its explanation instead. */ .rule-item { grid-template-columns: 1fr; gap: var(--space-xs); } /* The footer piece contact sheet: let it use the full width on a phone. */ footer .container img { max-width: 100% !important; } } /* Respect users who ask for less motion. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; } }