/* Taza — the house design, final layer. Snow-white paper, deep ink, the sky blue of the flag as the one accent and steppe gold only for ornament. Titles in IBM Plex Serif, everything else in Golos Text. The one loud thing is the tekemet: the felt carpet with a ram's-horn border that the live board lies on. Everything else is quiet: hairlines, whitespace, no lifts, no gradients. */ :root { --tekemet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84' fill='none' stroke='%23D2A54A' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate%2828 0%29'%3E%3Cpath d='M0 3.5H28M0 24.5H28' stroke-width='1.3'/%3E%3Cpath d='M0 6.2H28' stroke-width='.6'/%3E%3Cpath transform='translate%28.36 6.4%29 scale%28.62%29' d='M22 21V13C22 7 16 4 11.5 6C7.5 7.8 8 13 11.5 13.4C14 13.7 14.8 10.6 12.6 9.8M22 13C22 7 28 4 32.5 6C36.5 7.8 36 13 32.5 13.4C30 13.7 29.2 10.6 31.4 9.8' stroke-width='2.3'/%3E%3Cpath d='M0 11 3 14.5 0 18ZM28 11 25 14.5 28 18Z' fill='%23D2A54A' stroke='none'/%3E%3C/g%3E%3Cg transform='translate%2828 84%29 scale%281 -1%29'%3E%3Cpath d='M0 3.5H28M0 24.5H28' stroke-width='1.3'/%3E%3Cpath d='M0 6.2H28' stroke-width='.6'/%3E%3Cpath transform='translate%28.36 6.4%29 scale%28.62%29' d='M22 21V13C22 7 16 4 11.5 6C7.5 7.8 8 13 11.5 13.4C14 13.7 14.8 10.6 12.6 9.8M22 13C22 7 28 4 32.5 6C36.5 7.8 36 13 32.5 13.4C30 13.7 29.2 10.6 31.4 9.8' stroke-width='2.3'/%3E%3Cpath d='M0 11 3 14.5 0 18ZM28 11 25 14.5 28 18Z' fill='%23D2A54A' stroke='none'/%3E%3C/g%3E%3Cg transform='translate%280 56%29 rotate%28-90%29'%3E%3Cpath d='M0 3.5H28M0 24.5H28' stroke-width='1.3'/%3E%3Cpath d='M0 6.2H28' stroke-width='.6'/%3E%3Cpath transform='translate%28.36 6.4%29 scale%28.62%29' d='M22 21V13C22 7 16 4 11.5 6C7.5 7.8 8 13 11.5 13.4C14 13.7 14.8 10.6 12.6 9.8M22 13C22 7 28 4 32.5 6C36.5 7.8 36 13 32.5 13.4C30 13.7 29.2 10.6 31.4 9.8' stroke-width='2.3'/%3E%3Cpath d='M0 11 3 14.5 0 18ZM28 11 25 14.5 28 18Z' fill='%23D2A54A' stroke='none'/%3E%3C/g%3E%3Cg transform='translate%2884 28%29 rotate%2890%29'%3E%3Cpath d='M0 3.5H28M0 24.5H28' stroke-width='1.3'/%3E%3Cpath d='M0 6.2H28' stroke-width='.6'/%3E%3Cpath transform='translate%28.36 6.4%29 scale%28.62%29' d='M22 21V13C22 7 16 4 11.5 6C7.5 7.8 8 13 11.5 13.4C14 13.7 14.8 10.6 12.6 9.8M22 13C22 7 28 4 32.5 6C36.5 7.8 36 13 32.5 13.4C30 13.7 29.2 10.6 31.4 9.8' stroke-width='2.3'/%3E%3Cpath d='M0 11 3 14.5 0 18ZM28 11 25 14.5 28 18Z' fill='%23D2A54A' stroke='none'/%3E%3C/g%3E%3Cg transform='translate%280 0%29'%3E%3Cpath d='M28 3.5H3.5V28M28 24.5H24.5V28' stroke-width='1.3'/%3E%3Cpath d='M28 6.2H6.2V28' stroke-width='.6'/%3E%3Cpath d='M15.3 8.6 22 15.3 15.3 22 8.6 15.3Z' stroke-width='1.2'/%3E%3Cpath d='M15.3 12.6 18 15.3 15.3 18 12.6 15.3Z M28 11 25 14.5 28 18Z M11 28 14.5 25 18 28Z' fill='%23D2A54A' stroke='none'/%3E%3C/g%3E%3Cg transform='translate%2884 0%29 scale%28-1 1%29'%3E%3Cpath d='M28 3.5H3.5V28M28 24.5H24.5V28' stroke-width='1.3'/%3E%3Cpath d='M28 6.2H6.2V28' stroke-width='.6'/%3E%3Cpath d='M15.3 8.6 22 15.3 15.3 22 8.6 15.3Z' stroke-width='1.2'/%3E%3Cpath d='M15.3 12.6 18 15.3 15.3 18 12.6 15.3Z M28 11 25 14.5 28 18Z M11 28 14.5 25 18 28Z' fill='%23D2A54A' stroke='none'/%3E%3C/g%3E%3Cg transform='translate%280 84%29 scale%281 -1%29'%3E%3Cpath d='M28 3.5H3.5V28M28 24.5H24.5V28' stroke-width='1.3'/%3E%3Cpath d='M28 6.2H6.2V28' stroke-width='.6'/%3E%3Cpath d='M15.3 8.6 22 15.3 15.3 22 8.6 15.3Z' stroke-width='1.2'/%3E%3Cpath d='M15.3 12.6 18 15.3 15.3 18 12.6 15.3Z M28 11 25 14.5 28 18Z M11 28 14.5 25 18 28Z' fill='%23D2A54A' stroke='none'/%3E%3C/g%3E%3Cg transform='translate%2884 84%29 scale%28-1 -1%29'%3E%3Cpath d='M28 3.5H3.5V28M28 24.5H24.5V28' stroke-width='1.3'/%3E%3Cpath d='M28 6.2H6.2V28' stroke-width='.6'/%3E%3Cpath d='M15.3 8.6 22 15.3 15.3 22 8.6 15.3Z' stroke-width='1.2'/%3E%3Cpath d='M15.3 12.6 18 15.3 15.3 18 12.6 15.3Z M28 11 25 14.5 28 18Z M11 28 14.5 25 18 28Z' fill='%23D2A54A' stroke='none'/%3E%3C/g%3E%3C/svg%3E"); --felt-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url%28%23n%29'/%3E%3C/svg%3E"); } :root[data-skin="taza"] { --page: #F6F6F3; --page-deep: #EDEDE8; --surface: #FFFFFF; --surface-2: #F1F1ED; --rule: #E3E0D8; --rule-strong: #CBC6BA; --ink: #16212C; --ink-soft: #4E5965; --ink-faint: #737D88; --accent: #1A76BA; --accent-solid: #1A76BA; --accent-ink: #145C93; --accent-wash: rgba(26, 118, 186, .12); --on-accent: #FFFFFF; --gold: var(--accent-solid); --gold-ink: var(--accent-ink); --gold-wash: var(--accent-wash); --ember: var(--accent-solid); --me-bg: var(--accent-solid); --me-ink: var(--on-accent); --orn-c: #C2922F; --felt: #17324F; --felt-ink: #F3EEE2; --felt-soft: rgba(243, 238, 226, .7); --last: rgba(219, 174, 58, .45); --top-bg: #FFFFFF; --top-ink: var(--ink); --top-soft: var(--ink-soft); --top-hover: var(--surface-2); --top-line: var(--rule); --side-bg: #FFFFFF; --side-ink: var(--ink); --side-soft: var(--ink-soft); --side-hover: var(--surface-2); --side-active: var(--accent-wash); --side-line: var(--rule); --brand-ink: var(--ink); --foot-bg: var(--page); --foot-ink: var(--ink-soft); --foot-head: var(--ink); --hero-bg: var(--felt); --deep-bg: var(--felt); --hero: var(--felt); --card-radius: 10px; --btn-radius: 8px; --radius: 8px; --board-radius: 4px; --shadow: none; --shadow-hi: 0 12px 32px -20px rgba(22, 33, 44, .5); --theme-color: #FFFFFF; } :root[data-skin="taza"][data-theme="night"] { --page: #10161D; --page-deep: #0C1116; --surface: #18212B; --surface-2: #1F2A36; --rule: #26323F; --rule-strong: #3A4856; --ink: #E7EBEF; --ink-soft: #A7B1BB; --ink-faint: #7E8994; --accent: #2B7FC4; --accent-solid: #2B7FC4; --accent-ink: #72B8EC; --accent-wash: rgba(79, 163, 224, .16); --on-accent: #FFFFFF; --orn-c: #D6AE55; --felt: #173554; --felt-ink: #F1ECDF; --felt-soft: rgba(241, 236, 223, .7); --last: rgba(214, 174, 85, .42); --top-bg: #141C25; --top-line: #222D39; --top-hover: #1F2A36; --side-bg: #141C25; --side-line: #222D39; --side-hover: #1F2A36; --foot-bg: var(--page); --shadow-hi: 0 14px 36px -18px rgba(0, 0, 0, .8); --theme-color: #141C25; } /* ------------------------------------------------------------ type */ :root[data-skin="taza"] body { background: var(--page); color: var(--ink); } :root[data-skin="taza"] .page-title { font: 700 clamp(28px, 3vw, 38px)/1.12 var(--font-display); letter-spacing: -0.02em; text-wrap: balance; } :root[data-skin="taza"] .section-title { font: 700 clamp(24px, 2.6vw, 32px)/1.15 var(--font-display); letter-spacing: -0.018em; text-wrap: balance; } :root[data-skin="taza"] .section-lead { font-size: 16px; line-height: 1.55; } :root[data-skin="taza"] .page-title::after, :root[data-skin="taza"] .section-title::after { width: 44px; height: 16px; margin-top: 10px; opacity: 1; -webkit-mask-size: 32px 16px; mask-size: 32px 16px; } /* labels in sentence case, never shouted */ .more-sheet h3, .site-footer h4, .co-score span, .pf-label, .dna-kicker, .rush-kicker, .ex-line .lbl { text-transform: none !important; letter-spacing: 0 !important; } .more-sheet h3 { font: 600 13px/1.3 var(--font-ui); color: var(--ink-faint); } /* ------------------------------------------------------------ chrome */ :root[data-skin="taza"] .topbar { background: var(--top-bg); border-bottom: 1px solid var(--top-line); box-shadow: none; } :root[data-skin="taza"] .topbar::after { content: none; } :root[data-skin="taza"] .tn-group.active .tn-head { box-shadow: inset 0 -2px 0 var(--accent-solid); } :root[data-skin="taza"] .lang-switch button[aria-pressed="true"] { background: var(--ink); color: var(--page); } :root[data-skin="taza"] .site-footer { padding-top: 40px; border-top: 1px solid var(--rule); } :root[data-skin="taza"] .site-footer::before { content: none; } :root[data-skin="taza"] .site-footer h4 { font: 700 15px/1.2 var(--font-display); color: var(--foot-head); } :root[data-skin="taza"] .foot-support { background: transparent; color: var(--ink) !important; border: 1px solid var(--rule-strong); } :root[data-skin="taza"] .foot-support svg { color: #C2413B; } :root[data-skin="taza"] .foot-support:hover { background: var(--surface); filter: none; } /* ------------------------------------------------------------ surfaces and controls */ :root[data-skin="taza"] .card { border-radius: var(--card-radius); box-shadow: none; } :root[data-skin="taza"] a.card:hover { transform: none; box-shadow: none; border-color: var(--rule-strong); } :root[data-skin="taza"] .btn { border-radius: var(--btn-radius); } :root[data-skin="taza"] .btn-gold { background: var(--accent-solid); border-color: var(--accent-solid); color: var(--on-accent); box-shadow: none; text-shadow: none; } :root[data-skin="taza"] .btn-gold:hover:not(:disabled) { filter: none; background: var(--accent-ink); border-color: var(--accent-ink); } :root[data-skin="taza"][data-theme="night"] .btn-gold:hover:not(:disabled) { background: #3990D6; border-color: #3990D6; } :root[data-skin="taza"] .btn-primary { box-shadow: none; } :root[data-skin="taza"] .pill { background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--rule); } :root[data-skin="taza"] .seg input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--page); } :root[data-skin="taza"] .seg input:focus-visible + span, :root[data-skin="taza"] .btn:focus-visible, :root[data-skin="taza"] a:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 2px; } /* ------------------------------------------------------------ the tekemet */ .tekemet { position: relative; margin: 0; box-sizing: border-box; border: 28px solid transparent; border-image: var(--tekemet) 28 round; background: var(--felt-grain), var(--felt); color: var(--felt-ink); padding: 10px 10px 8px; } .tekemet .board { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 10px 24px -14px rgba(0, 0, 0, .8); } .tekemet .hero-caption { margin-top: 9px; color: var(--felt-soft); font-size: 13px; } .tekemet .hero-caption strong { color: var(--felt-ink); font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------ home */ :root[data-skin="taza"] .dash { padding-top: 34px; gap: 30px; } :root[data-skin="taza"] .dash-hero { background: none; color: var(--ink); box-shadow: none; border-radius: 0; padding: 0; overflow: visible; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: clamp(28px, 5vw, 72px); } :root[data-skin="taza"] .dash-hero::before, :root[data-skin="taza"] .dash-hero::after { content: none; } :root[data-skin="taza"] .dash-hero h1 { color: var(--ink); font-size: clamp(34px, 4.6vw, 58px); line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; max-width: 16ch; } :root[data-skin="taza"] .dh-lead { color: var(--ink-soft); opacity: 1; font-size: 17px; max-width: 46ch; } :root[data-skin="taza"] .dh-actions { margin-top: 26px; } :root[data-skin="taza"] .dh-ghost { background: var(--surface); border-color: var(--rule-strong); color: var(--ink); } :root[data-skin="taza"] .dh-ghost:hover { background: var(--surface); border-color: var(--ink-soft); } :root[data-skin="taza"] .dh-rank { display: grid; grid-template-columns: 22px auto 1fr; grid-template-areas: "ic nm xp" "ic bar bar" "ic sm sm"; gap: 5px 10px; max-width: 380px; margin-top: 30px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink); } :root[data-skin="taza"] .dh-rank:hover { background: none; } :root[data-skin="taza"] .dh-rank:hover b { text-decoration: underline; text-underline-offset: 3px; } :root[data-skin="taza"] .dh-rank svg { grid-area: ic; grid-row: auto; width: 22px; height: 22px; color: var(--orn-c); align-self: start; } :root[data-skin="taza"] .dh-rank b { grid-area: nm; font: 700 15px/1.3 var(--font-display); } :root[data-skin="taza"] .dh-rank .rk-xp { grid-area: xp; justify-self: end; align-self: center; font-size: 13px; color: var(--ink-faint); font-variant-numeric: tabular-nums; } :root[data-skin="taza"] .dh-rank i { grid-area: bar; height: 4px; border-radius: 2px; background: var(--rule); } :root[data-skin="taza"] .dh-rank i::after { background: var(--orn-c); border-radius: 2px; } :root[data-skin="taza"] .dh-rank small { grid-area: sm; font-size: 13px; color: var(--ink-faint); opacity: 1; } :root[data-skin="taza"] .dh-board { justify-self: end; width: 100%; } :root[data-skin="taza"] .dh-board .board { --board: 100%; width: 100%; height: auto; aspect-ratio: 1; } :root[data-skin="taza"] .dash-grid { gap: 16px; } :root[data-skin="taza"] .card-head h2 { font: 700 19px/1.25 var(--font-display); letter-spacing: -0.01em; } :root[data-skin="taza"] .tc-grid { gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; } :root[data-skin="taza"] .tc-tile { border: 0; border-radius: 0; background: var(--surface); min-height: 62px; transition: background .12s; } :root[data-skin="taza"] .tc-tile:hover { background: var(--surface-2); border: 0; transform: none; } :root[data-skin="taza"] .tc-tile.on { box-shadow: inset 0 0 0 2px var(--accent-solid); background: var(--surface); } :root[data-skin="taza"] .tc-tile b { font-variant-numeric: tabular-nums; } :root[data-skin="taza"] .cont-list { gap: 0; border-top: 1px solid var(--rule); } :root[data-skin="taza"] .cont-list a { background: none; border-radius: 0; padding: 11px 0; border-bottom: 1px solid var(--rule); } :root[data-skin="taza"] .cont-list a:hover { background: none; } :root[data-skin="taza"] .cont-list a:hover span { text-decoration: underline; text-underline-offset: 3px; } :root[data-skin="taza"] .li-ico { border-radius: 50%; background: var(--accent-wash); color: var(--accent-ink); } :root[data-skin="taza"] .tip-box { border-top: 0; padding-top: 4px; } :root[data-skin="taza"] .opp-chip { background: var(--surface); } :root[data-skin="taza"] .opp-chip u { color: var(--accent-ink); } /* the heroes: medallions on paper, the legends in a gold ring */ :root[data-skin="taza"] .char-card { background: none; border-radius: 0; padding: 12px 4px; transition: none; } :root[data-skin="taza"] .char-card:hover { background: none; transform: none; } :root[data-skin="taza"] .char-card .avatar { border-radius: 50%; transition: box-shadow .15s; } :root[data-skin="taza"] .char-card:hover .avatar { box-shadow: 0 0 0 3px var(--page), 0 0 0 5px var(--ink-faint); } :root[data-skin="taza"] .char-card.legend, :root[data-skin="taza"] .char.legend > span { background: var(--surface); } :root[data-skin="taza"] .char-card.legend { background: none; } .char.legend > span::before, .char-card.legend::before { content: none !important; } :root[data-skin="taza"] .char-card.legend .avatar, :root[data-skin="taza"] .char.legend .avatar { box-shadow: 0 0 0 2px var(--page), 0 0 0 3.5px var(--orn-c); border-radius: 50%; } :root[data-skin="taza"] .char.legend .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--orn-c); } :root[data-skin="taza"] .char-card.legend .elo, :root[data-skin="taza"] .char.legend .elo { color: var(--orn-c); } :root[data-skin="taza"][data-theme="day"] .char-card.legend .elo, :root[data-skin="taza"][data-theme="day"] .char.legend .elo { color: #8C6517; } :root[data-skin="taza"] .char-card .elo, :root[data-skin="taza"] .char .elo { color: var(--ink-faint); } :root[data-skin="taza"] .char > span { border-radius: var(--card-radius); transition: border-color .15s; } :root[data-skin="taza"] .char:hover > span { transform: none; } :root[data-skin="taza"] .char input:checked + span { border-color: var(--accent-solid); background: var(--surface); box-shadow: inset 0 0 0 1px var(--accent-solid); } /* more on Tulpar: a plain index of links, not a wall of cards */ :root[data-skin="taza"] .x-grid { gap: 0 32px; margin-top: 18px; border-top: 1px solid var(--rule); } :root[data-skin="taza"] .x-card { grid-template-columns: 26px 1fr; gap: 2px 14px; padding: 16px 0; background: none; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; box-shadow: none; transition: none; } :root[data-skin="taza"] .x-card:hover { transform: none; box-shadow: none; } :root[data-skin="taza"] .x-card:hover b { text-decoration: underline; text-underline-offset: 3px; } :root[data-skin="taza"] .x-ico { width: 26px; height: 26px; border-radius: 0; background: none; color: var(--accent-solid); align-self: start; margin-top: 1px; } :root[data-skin="taza"] .x-ico svg { width: 22px; height: 22px; } :root[data-skin="taza"] .dash-import { box-shadow: none; } :root[data-skin="taza"] .source-badge { border-radius: 6px; } /* phones: no live board here; the text itself sits on the carpet */ @media (max-width: 640px) { :root[data-skin="taza"] .dash { padding-top: 14px; gap: 18px; } :root[data-skin="taza"] .dash-hero { border: 20px solid transparent; border-image: var(--tekemet) 28 / 20px round; background: var(--felt-grain), var(--felt); color: var(--felt-ink); padding: 10px 8px 12px; } :root[data-skin="taza"] .dash-hero h1 { color: var(--felt-ink); font-size: 31px; } :root[data-skin="taza"] .dh-lead { color: var(--felt-soft); font-size: 15.5px; } :root[data-skin="taza"] .dh-ghost { background: transparent; border-color: rgba(243, 238, 226, .35); color: var(--felt-ink); } :root[data-skin="taza"] .dh-rank { color: var(--felt-ink); margin-top: 20px; } :root[data-skin="taza"] .dh-rank .rk-xp, :root[data-skin="taza"] .dh-rank small { color: var(--felt-soft); } :root[data-skin="taza"] .dh-rank i { background: rgba(243, 238, 226, .2); } :root[data-skin="taza"] .x-grid { gap: 0; } } /* ------------------------------------------------------------ board details */ :root[data-skin="taza"] .board { border-radius: var(--board-radius); box-shadow: 0 0 0 1px rgba(22, 33, 44, .12); } :root[data-skin="taza"][data-theme="night"] .board { box-shadow: 0 0 0 1px rgba(0, 0, 0, .45); } .sq.last::after { background: var(--last, var(--gold-wash)); } @media (max-width: 860px) { :root[data-skin="taza"] .dash-hero { grid-template-columns: minmax(0, 1fr); } :root[data-skin="taza"] .dh-board { justify-self: start; width: min(100%, 440px); } :root[data-skin="taza"] .dash-hero h1 { max-width: 22ch; } } /* ============================================================ the player's own look (custom.js) */ :root { --tex-wood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' preserveAspectRatio='none'%3E%3Cfilter id='t' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.16' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .28 0 0 0 0 .16 0 0 0 0 .06 0 0 0 -1.6 1.25'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url%28%23t%29'/%3E%3C/svg%3E"); --tex-felt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240' preserveAspectRatio='none'%3E%3Cfilter id='t' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 -.18'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url%28%23t%29'/%3E%3C/svg%3E"); --tex-marble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' preserveAspectRatio='none'%3E%3Cfilter id='t' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='.0045 .007' numOctaves='5' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .22 0 0 0 0 .26 -2.4 0 0 0 1.05'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url%28%23t%29'/%3E%3C/svg%3E"); --tex-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cfilter id='t' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .5 -.12'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url%28%23t%29'/%3E%3C/svg%3E"); } /* corners and density */ :root[data-corners="sharp"] { --card-radius: 2px; --btn-radius: 2px; --radius: 2px; --board-radius: 0px; } :root[data-corners="round"] { --card-radius: 18px; --btn-radius: 999px; --radius: 14px; --board-radius: 10px; } :root[data-corners="sharp"] .seg span, :root[data-corners="sharp"] .pill, :root[data-corners="sharp"] .opp-chip, :root[data-corners="sharp"] .lang-switch, :root[data-corners="sharp"] .icon-btn { border-radius: 2px; } :root[data-corners="round"] .tc-grid { border-radius: 16px; } :root[data-density="compact"] .card { padding: 14px; } :root[data-density="compact"] .dash { gap: 18px; } :root[data-density="compact"] .set-group { padding: 14px 0; } :root[data-density="compact"] .panel { gap: 10px; } :root[data-density="airy"] .card { padding: 28px; } :root[data-density="airy"] .dash { gap: 44px; } :root[data-density="airy"] .set-group { padding: 30px 0; } /* night tones */ :root[data-skin="taza"][data-theme="night"][data-night-tone="coal"] { --page: #151515; --page-deep: #101010; --surface: #1F1F1F; --surface-2: #272727; --rule: #303030; --rule-strong: #444444; --top-bg: #1B1B1B; --top-line: #2B2B2B; --top-hover: #272727; --side-bg: #1B1B1B; --side-line: #2B2B2B; --side-hover: #272727; --theme-color: #1B1B1B; } :root[data-skin="taza"][data-theme="night"][data-night-tone="black"] { --page: #000000; --page-deep: #000000; --surface: #0E0E0F; --surface-2: #17171A; --rule: #232326; --rule-strong: #34343A; --top-bg: #000000; --top-line: #1C1C1F; --top-hover: #17171A; --side-bg: #000000; --side-line: #1C1C1F; --side-hover: #17171A; --theme-color: #000000; } /* text size: everything but the board scales */ :root.zoomed .view > :not(:has(.board-col)), :root.zoomed .view .stage .panel, :root.zoomed .site-footer, :root.zoomed .more-sheet { zoom: var(--z); } :root.zoomed .stage { --panel: calc(360px * var(--z)); } @media (min-width: 1001px) { :root.zoomed .stage .panel { width: 360px; } } /* board textures */ .board .squares::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-size: 100% 100%; border-radius: inherit; } :root[data-texture="wood"] .board .squares::after { background-image: var(--tex-wood); mix-blend-mode: multiply; opacity: .5; } :root[data-texture="felt"] .board .squares::after { background-image: var(--tex-felt); background-size: 30% 30%; mix-blend-mode: multiply; opacity: .45; } :root[data-texture="marble"] .board .squares::after { background-image: var(--tex-marble); mix-blend-mode: multiply; opacity: .55; } :root[data-texture="paper"] .board .squares::after { background-image: var(--tex-paper); background-size: 25% 25%; mix-blend-mode: multiply; opacity: .6; } :root[data-texture="linen"] .board .squares::after { background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px); } /* frames and coordinates outside: the board gives up a band around it. A frame is a material (--fw wide, times the chosen width) in a colour (--fc); brass studs may sit in its corners. */ :root { --fk: 1; --fw: 0px; --stud: linear-gradient(transparent, transparent); } :root[data-frame-width="sm"] { --fk: .65; } :root[data-frame-width="lg"] { --fk: 1.45; } :root[data-frame="thin"] { --fw: 6px; --fc0: var(--ink); } :root[data-frame="double"] { --fw: 11px; --fc0: var(--ink-soft); } :root[data-frame="wood"] { --fw: 16px; --fc0: #6E4527; } :root[data-frame="metal"] { --fw: 14px; --fc0: #8C929B; } :root[data-frame="stone"] { --fw: 16px; --fc0: #B9BCBF; } :root[data-frame="felt"] { --fw: 18px; --fc0: #17324F; } :root[data-frame="ornament"] { --fw: 22px; --fc0: #17324F; } :root[data-coords-pos="out"] { --fw-min: 20px; } :root[data-frame-studs="on"]:is([data-frame="wood"], [data-frame="metal"], [data-frame="stone"], [data-frame="felt"]) { --stud: radial-gradient(circle, #F4DC97 0 16%, #B58B2C 17% 27%, rgba(0, 0, 0, .35) 28% 33%, transparent 35%); } :root:is(:not([data-frame="none"]), [data-coords-pos="out"]) :is(.stage, .set-preview) .board { --F: max(calc(var(--fw, 0px) * var(--fk)), var(--fw-min, 0px)); --fc: var(--frame-c, var(--fc0, var(--ink))); width: calc(var(--board) - 2 * var(--F)); height: calc(var(--board) - 2 * var(--F)); margin: var(--F); overflow: visible; isolation: isolate; } :root:is(:not([data-frame="none"]), [data-coords-pos="out"]) :is(.stage, .set-preview) .board::before { content: ""; position: absolute; inset: calc(-1 * var(--F)); z-index: -1; pointer-events: none; border-radius: calc(var(--board-radius) + 2px); --studs: var(--stud) 0 0 / var(--F) var(--F) no-repeat, var(--stud) 100% 0 / var(--F) var(--F) no-repeat, var(--stud) 0 100% / var(--F) var(--F) no-repeat, var(--stud) 100% 100% / var(--F) var(--F) no-repeat; } :root[data-frame="thin"] :is(.stage, .set-preview) .board::before { background: var(--fc); opacity: .9; } :root[data-frame="double"] :is(.stage, .set-preview) .board::before { border: 2px solid var(--fc); box-shadow: inset 0 0 0 calc(var(--F) - 4px) transparent; } :root[data-frame="double"] :is(.stage, .set-preview) .board { box-shadow: 0 0 0 1.5px var(--fc) !important; } :root[data-frame="wood"] :is(.stage, .set-preview) .board::before { background: var(--studs), var(--tex-wood) 0 0 / 100% 100%, linear-gradient(135deg, color-mix(in srgb, var(--fc), #fff 16%), color-mix(in srgb, var(--fc), #000 20%) 60%, var(--fc)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 0 0 3px rgba(0, 0, 0, .25), 0 10px 22px -14px rgba(0, 0, 0, .7); } :root[data-frame="metal"] :is(.stage, .set-preview) .board::before { background: var(--studs), linear-gradient(135deg, color-mix(in srgb, var(--fc), #fff 55%), var(--fc) 28%, color-mix(in srgb, var(--fc), #000 34%) 52%, color-mix(in srgb, var(--fc), #fff 38%) 74%, color-mix(in srgb, var(--fc), #000 12%)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), inset 0 0 0 2px rgba(0, 0, 0, .3), 0 10px 22px -14px rgba(0, 0, 0, .7); } :root[data-frame="stone"] :is(.stage, .set-preview) .board::before { background: var(--studs), var(--tex-marble) 0 0 / 100% 100%, linear-gradient(160deg, color-mix(in srgb, var(--fc), #fff 22%), var(--fc)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), inset 0 0 0 2px rgba(0, 0, 0, .16), 0 10px 22px -14px rgba(0, 0, 0, .6); } :root[data-frame="felt"] :is(.stage, .set-preview) .board::before { background: var(--studs), var(--felt-grain), var(--fc); outline: 1.5px dashed rgba(255, 255, 255, .42); outline-offset: calc(var(--F) * -0.42); border-radius: 3px; } :root[data-frame="ornament"] :is(.stage, .set-preview) .board::before { border: var(--F) solid transparent; border-image: var(--tekemet) 28 / var(--F) round; background: var(--felt-grain), var(--fc); border-radius: 0; } /* the corners are rounded on the squares themselves, so the board need not clip */ .board .sq:nth-child(1) { border-top-left-radius: var(--board-radius, 4px); } .board .sq:nth-child(8) { border-bottom-left-radius: var(--board-radius, 4px); } .board .sq:nth-child(57) { border-top-right-radius: var(--board-radius, 4px); } .board .sq:nth-child(64) { border-bottom-right-radius: var(--board-radius, 4px); } .board .sq::after, .board .sq::before { border-radius: inherit; } .board .sq.target::before { border-radius: 50%; } :root[data-coords-pos="out"] :is(.stage, .set-preview) .board .coord.file { left: 0; right: 0; text-align: center; bottom: calc(-0.5 * var(--F) - 0.5em); color: var(--frame-coord, var(--ink-faint)) !important; } :root[data-coords-pos="out"] :is(.stage, .set-preview) .board .coord.rank { top: 50%; left: calc(-0.5 * var(--F) - 0.32em); transform: translateY(-50%); color: var(--frame-coord, var(--ink-faint)) !important; } :root:is([data-frame="wood"], [data-frame="felt"], [data-frame="ornament"]) { --frame-coord: #F1E3C4; } :root[data-frame="metal"], :root[data-frame="stone"] { --frame-coord: #20262C; } :root[data-frame-ink="light"]:not([data-frame="none"], [data-frame="thin"], [data-frame="double"]) { --frame-coord: #F4EBD6; } :root[data-frame-ink="dark"]:not([data-frame="none"], [data-frame="thin"], [data-frame="double"]) { --frame-coord: #1B2128; } /* thin and double frames keep the letters outside the line */ :root:is([data-frame="thin"], [data-frame="double"])[data-coords-pos="out"] { --frame-coord: var(--ink-soft); } :root[data-frame="thin"][data-coords-pos="out"] :is(.stage, .set-preview) .board::before { inset: calc(-6px * var(--fk)); } :root[data-frame="double"][data-coords-pos="out"] :is(.stage, .set-preview) .board::before { inset: -3px; } :root[data-frame="double"][data-coords-pos="out"] :is(.stage, .set-preview) .board { box-shadow: none !important; } :root[data-frame="thin"][data-coords-pos="out"] :is(.stage, .set-preview) .board .coord.file { bottom: calc(-0.5 * var(--F) - 0.5em - 3px); } :root[data-frame="thin"][data-coords-pos="out"] :is(.stage, .set-preview) .board .coord.rank { left: calc(-0.5 * var(--F) - 0.32em - 3px); } @media (max-width: 760px) { :root[data-frame="thin"] { --fw: 4px; } :root[data-frame="double"] { --fw: 7px; } :root:is([data-frame="wood"], [data-frame="metal"], [data-frame="stone"]) { --fw: 9px; } :root[data-frame="felt"] { --fw: 11px; } :root[data-frame="ornament"] { --fw: 14px; } :root[data-coords-pos="out"] { --fw-min: 15px; } } :root[data-coords-pos="off"] .board .coord { display: none; } .coords-page .board:not(.no-coords) .coord { display: block; } /* views */ :root[data-view="raised"] :is(.stage, .set-preview) .board { box-shadow: 0 2px 0 rgba(0, 0, 0, .16), 0 26px 40px -22px rgba(10, 20, 30, .7); } :root[data-view="raised"] :is(.stage, .set-preview) .board .sq { background-image: linear-gradient(150deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .06)); } :root[data-view="raised"] :is(.stage, .set-preview) .board .piece .pc { filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .32)); } :root[data-view="tilt"] :is(.stage, .set-preview) .board { transform: perspective(1500px) rotateX(26deg); transform-origin: 50% 62%; transform-style: preserve-3d; overflow: visible; isolation: auto; box-shadow: 0 34px 40px -26px rgba(10, 20, 30, .75); } :root[data-view="tilt"] :is(.stage, .set-preview) .board .pieces, :root[data-view="tilt"] :is(.stage, .set-preview) .board .piece, :root[data-view="tilt"] :is(.stage, .set-preview) .board .piece .mb, :root[data-view="tilt"] :is(.stage, .set-preview) .board .piece .mb-in { transform-style: preserve-3d; } :root[data-view="tilt"] :is(.stage, .set-preview) .board .piece .mb { filter: none !important; } :root[data-view="tilt"] :is(.stage, .set-preview) .board .piece .pc { rotate: x -26deg; transform-origin: 50% 86%; pointer-events: visiblePainted; filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .28)); } :root[data-view="tilt"] :is(.stage, .set-preview) .board .piece.lifted .pc, :root[data-view="tilt"] :is(.stage, .set-preview) .board .piece.dying .pc { pointer-events: none; } /* marks: the last move, where a piece can go, arrows */ :root[data-hints="rings"] .sq.target::before { width: 38%; height: 38%; background: none; border: 3px solid var(--hint-dot); box-sizing: border-box; } :root[data-hints="squares"] .sq.target::before { left: 0; top: 0; width: 100%; height: 100%; transform: none; border-radius: inherit; background: var(--accent-wash-strong, rgba(26, 118, 186, .3)); } :root[data-hints="squares"] .sq.target.capture::before { border: 0; background: rgba(194, 65, 59, .32); } :root[data-hints="off"] .sq.target::before { display: none; } .arrow-hint { fill: var(--arrow, var(--gold)); } .arrows .ring { stroke: var(--arrow, var(--gold)); } .arrow-user { fill: var(--arrow, #D9A02B); opacity: .82; } .arrows .ring.arrow-user { fill: none; stroke: var(--arrow, #D9A02B); stroke-width: 6; } .arrow-user.u-green { fill: #2E8B69; } .arrows .ring.u-green { stroke: #2E8B69; } .arrow-user.u-red { fill: #C9453D; } .arrows .ring.u-red { stroke: #C9453D; } .arrow-user.u-blue { fill: #2C7CC6; } .arrows .ring.u-blue { stroke: #2C7CC6; } /* pieces: size and shadow */ .board .piece .pc { scale: var(--piece-scale, 1); transform-origin: 50% 60%; } :root[data-pshadow="soft"] .board .piece .pc { filter: drop-shadow(0 2px 1.5px rgba(0, 0, 0, .26)); } :root[data-pshadow="strong"] .board .piece .pc { filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .42)); } :root[data-pshadow="glow"] .board .piece .pc { filter: drop-shadow(0 0 2.5px rgba(255, 246, 220, .85)); } /* ============================================================ settings */ .settings { max-width: 980px; } :root[data-skin="taza"] .set-group { grid-template-columns: 250px minmax(0, 1fr); gap: 16px 36px; padding: 26px 0; margin: 0; background: none; border: 0; border-top: 1px solid var(--rule) !important; border-radius: 0; box-shadow: none; } :root[data-skin="taza"] .set-group h2 { font: 700 19px/1.25 var(--font-display); letter-spacing: -0.01em; } :root[data-skin="taza"] .set-group .desc { font-size: 14px; line-height: 1.5; max-width: 30ch; } .set-items { min-width: 0; } .set-sub { font: 600 15px/1.3 var(--font-ui); color: var(--ink); margin: 0; padding-top: 18px; border-top: 1px solid var(--rule); } .set-sub:first-child { padding-top: 0; border-top: 0; } .set-side { min-width: 0; } .set-preview { --board: 250px; position: sticky; top: calc(var(--nav-h) + 20px); margin-top: 18px; width: 250px; height: 250px; } .set-preview .board { width: var(--board); height: var(--board); } .set-board > .set-side { display: flex; flex-direction: column; } .set-board > .set-side .set-preview { flex: none; } .set-data { display: flex; flex-wrap: wrap; gap: 10px; align-content: start; } .dots-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; } .dots { display: flex; flex-wrap: wrap; gap: 8px; } .dot { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 0; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); } .dot[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); } :root[data-skin="taza"] .set-group .dot[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--page), 0 0 0 4px var(--ink); } .dot:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 4px; } .dot-none { background: linear-gradient(to top right, transparent calc(50% - 1px), var(--ink-faint) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), var(--surface); box-shadow: inset 0 0 0 1px var(--rule-strong, var(--rule)); } .own-accent[data-on="true"] input { box-shadow: 0 0 0 2px var(--page), 0 0 0 4px var(--ink); } .color-field input { border-radius: 8px; } .packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; } .spack { padding: 10px 12px; border-radius: var(--btn-radius); border: 1px solid var(--rule-strong, var(--rule)); background: var(--surface); color: var(--ink); font: 600 14px/1.2 var(--font-ui); text-align: left; cursor: pointer; } .spack:hover { border-color: var(--ink-soft); } .spack[aria-pressed="true"] { border-color: var(--accent-solid); box-shadow: inset 0 0 0 1px var(--accent-solid); } .ev-box { border-top: 1px solid var(--rule); padding-top: 14px; } .ev-box summary { cursor: pointer; font-weight: 600; font-size: 15px; } .ev-list { display: grid; gap: 8px; margin-top: 14px; } .ev-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 190px) auto 36px; gap: 8px; align-items: center; font-size: 14.5px; } .ev-row .input { padding: 7px 10px; font-size: 14px; width: 100%; } .ev-row .ev-file { grid-column: 3; white-space: nowrap; } .ev-row .ev-play { grid-column: 4; width: 36px; height: 36px; } :root[data-skin="taza"] .swatch[aria-pressed="true"] { border-color: var(--accent-solid); } :root[data-skin="taza"] .pset[aria-pressed="true"] { border-color: var(--accent-solid); box-shadow: none; } :root[data-skin="taza"] .pcolor[aria-pressed="true"] { border-color: var(--accent-solid); box-shadow: inset 0 0 0 1px var(--accent-solid); } :root[data-skin="taza"] .toggle input { accent-color: var(--accent-solid); } :root[data-skin="taza"] input[type="range"] { accent-color: var(--accent-solid); } @media (hover: none) { .hide-touch { display: none; } } @media (max-width: 900px) { :root[data-skin="taza"] .set-group { grid-template-columns: minmax(0, 1fr); padding: 20px 0; } :root[data-skin="taza"] .set-group .desc { max-width: none; } .set-preview { position: static; margin-inline: auto; } .ev-row { grid-template-columns: minmax(0, 1fr) minmax(0, 150px) 36px; } .ev-row .ev-file { grid-column: 1 / 3; grid-row: 2; justify-self: start; } .ev-row .ev-play { grid-column: 3; } } /* more board colours */ :root[data-board="marble"] { --sq-light: #ECEAE4; --sq-dark: #A2AAB2; --coord-on-light: #7F8891; --coord-on-dark: #ECEAE4; } :root[data-board="sand"] { --sq-light: #F2E6CA; --sq-dark: #C89E66; --coord-on-light: #A67B43; --coord-on-dark: #F2E6CA; } :root[data-board="dusk"] { --sq-light: #CDD6E2; --sq-dark: #5D6F8D; --coord-on-light: #5D6F8D; --coord-on-dark: #CDD6E2; } :root[data-board="cherry"] { --sq-light: #F2DFCF; --sq-dark: #9E5552; --coord-on-light: #9E5552; --coord-on-dark: #F2DFCF; } :root[data-board="mint"] { --sq-light: #E4EFE7; --sq-dark: #6E9F8C; --coord-on-light: #5C8C7A; --coord-on-dark: #E4EFE7; } .eco { display: inline-block; margin-right: 8px; padding: 1px 6px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--rule); color: var(--ink-soft); font-size: .86em; font-weight: 600; font-variant-numeric: tabular-nums; } /* ============================================================ features: a list to read, not a wall of cards */ :root[data-skin="taza"] .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin-top: 30px; border-top: 1px solid var(--rule); } :root[data-skin="taza"] .fcard, :root[data-skin="taza"] .fcard.wide { grid-column: auto; flex-direction: row; align-items: flex-start; gap: 22px; padding: 26px 0; background: none; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; overflow: visible; transition: none; } :root[data-skin="taza"] .fcard:hover { transform: none; box-shadow: none; } :root[data-skin="taza"] .fvis, :root[data-skin="taza"] .fcard.wide .fvis { flex: 0 0 148px; width: 148px; height: 112px; min-height: 0; padding: 0; border-radius: 6px; background: var(--felt-grain), var(--felt); } :root[data-skin="taza"] .fvis::after { content: none; } :root[data-skin="taza"] .fvis > * { zoom: .5; } :root[data-skin="taza"] .ftext, :root[data-skin="taza"] .fcard.wide .ftext { padding: 0; justify-content: flex-start; min-width: 0; } :root[data-skin="taza"] .ftext h2 { font: 700 20px/1.25 var(--font-display); letter-spacing: -0.01em; } :root[data-skin="taza"] .ftext p { font-size: 15px; line-height: 1.55; color: var(--ink-soft); max-width: 46ch; } @media (max-width: 980px) { :root[data-skin="taza"] .fgrid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 520px) { :root[data-skin="taza"] .fcard, :root[data-skin="taza"] .fcard.wide { gap: 14px; padding: 20px 0; } :root[data-skin="taza"] .fvis, :root[data-skin="taza"] .fcard.wide .fvis { flex-basis: 84px; width: 84px; height: 84px; } :root[data-skin="taza"] .fvis > * { zoom: .34; } } .tekemet { --board-radius: 2px; } /* analysis views: five signs in a row that always fit, no sideways scrolling */ .an-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 0; overflow: visible; background: none !important; border: 0 !important; border-bottom: 1px solid var(--rule) !important; border-radius: 0; align-self: stretch; } .an-tabs button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding: 8px 2px 10px; border: 0; border-radius: 6px 6px 0 0; background: none; box-shadow: none !important; color: var(--ink-soft); font: 600 12.5px/1.15 var(--font-ui); white-space: normal; text-align: center; cursor: pointer; } .an-tabs button svg { width: 21px; height: 21px; flex: none; } .an-tabs button span { overflow-wrap: anywhere; } .an-tabs button:hover { color: var(--ink); background: var(--surface-2); } .an-tabs button::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent-solid); transform: scaleX(0); transition: transform .22s cubic-bezier(.3, 1.4, .5, 1); } .an-tabs button[aria-selected="true"] { color: var(--ink); background: none; } .an-tabs button[aria-selected="true"] svg { color: var(--accent-solid); } .an-tabs button[aria-selected="true"]::after { transform: scaleX(1); } /* the eval bar is exactly as tall as the board, whatever sits under it */ .play-col > .evalbar { align-self: flex-start; height: var(--board); margin: 38px 0 0; } /* ============================================================ touch and motion Controls are felt-covered keys: they stand two pixels proud of the page and sink when pressed, and what is chosen stays pressed in. Links are stitched, not underlined. Things arrive the way a rider does: fast, then settling. */ :root { --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-spring: cubic-bezier(.3, 1.55, .5, 1); --t-press: 90ms; --edge: 2px; --key-edge: var(--rule-strong); --stitch: repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 9px); } :root[data-motion="calm"] { --ease-spring: var(--ease-out); } /* keys */ :root[data-press="key"] :is(.btn, .icon-btn, .spack, .opp-chip, .seg span) { box-shadow: 0 var(--edge) 0 var(--key-edge); transform: translateY(0); transition: transform var(--t-press) var(--ease-out), box-shadow var(--t-press) var(--ease-out), background-color .15s, border-color .15s, color .15s; } :root[data-press="key"] :is(.btn, .icon-btn, .spack, .opp-chip):hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 calc(var(--edge) + 1px) 0 var(--key-edge); } :root[data-press="key"] :is(.btn, .icon-btn, .spack, .opp-chip):active:not(:disabled), :root[data-press="key"] .seg label:active span { transform: translateY(var(--edge)); box-shadow: 0 0 0 var(--key-edge); transition-duration: 40ms; } :root[data-press="key"] .btn-gold { --key-edge: color-mix(in srgb, var(--accent-solid) 68%, #000); } :root[data-press="key"] .btn-primary { --key-edge: color-mix(in srgb, var(--ink) 55%, #000); } :root[data-press="key"][data-theme="night"] .btn-primary { --key-edge: color-mix(in srgb, var(--ink) 60%, #000); } :root[data-press="key"] .dh-ghost { --key-edge: var(--rule-strong); } /* the chosen segment stays down */ :root[data-press="key"] .seg input:checked + span, :root[data-press="key"] .spack[aria-pressed="true"] { transform: translateY(var(--edge)); box-shadow: 0 0 0 var(--key-edge); } :root[data-press="key"] .btn:disabled { box-shadow: 0 var(--edge) 0 var(--rule); } :root[data-press="key"] :is(.board-nav, .sheet-actions, .dh-actions, .set-data, .panel-actions) { padding-bottom: var(--edge); } /* flat and soft */ :root[data-press="flat"] :is(.btn, .icon-btn, .spack, .opp-chip, .seg span) { transition: transform var(--t-press) var(--ease-out), background-color .15s, border-color .15s; } :root[data-press="flat"] :is(.btn, .icon-btn, .spack, .opp-chip):active:not(:disabled), :root[data-press="flat"] .seg label:active span { transform: scale(.96); } :root[data-press="soft"] :is(.btn, .icon-btn, .spack, .opp-chip, .seg span) { transition: box-shadow .12s, background-color .15s, border-color .15s, filter .12s; } :root[data-press="soft"] :is(.btn, .icon-btn, .spack, .opp-chip):active:not(:disabled), :root[data-press="soft"] .seg label:active span { box-shadow: inset 0 2px 5px rgba(0, 0, 0, .22); filter: brightness(.96); } /* one focus ring everywhere */ :is(button, a, summary, select, input, [tabindex]):focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 2px; } .board :focus-visible { outline: none; } /* switches instead of ticks */ .toggle input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 38px; height: 22px; margin: 0; border-radius: 11px; background: var(--rule-strong); cursor: pointer; transition: background-color .18s; } .toggle input[type="checkbox"]::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .24s var(--ease-spring), width .12s; } .toggle input[type="checkbox"]:checked { background: var(--accent-solid); } .toggle input[type="checkbox"]:checked::after { transform: translateX(16px); } .toggle:active input[type="checkbox"]::after { width: 20px; } .toggle:active input[type="checkbox"]:checked::after { transform: translateX(12px); } /* a choice lands with a small bounce */ @keyframes pick-pop { from { transform: scale(.82); } } .dot[aria-pressed="true"], .swatch[aria-pressed="true"] i, .pcolor[aria-pressed="true"] i, .pset[aria-pressed="true"] .pset-row { animation: pick-pop .28s var(--ease-spring); } /* stitched links and the stitched mark under the current section */ .site-footer a:hover, .tip-box a:hover, .note a:hover, .cont-list a:hover span, .x-card:hover b, .dh-rank:hover b, .story a:hover, .st-ch a:hover { text-decoration: none !important; background: var(--stitch) left calc(100% - 1px) / 100% 1.5px no-repeat; } :root[data-skin="taza"] .tn-head { position: relative; box-shadow: none !important; } .tn-head::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px; color: var(--orn-c); background: var(--stitch); transform: scaleX(0); transform-origin: left; transition: transform .26s var(--ease-out); } .tn-group.active .tn-head::after, .tn-head:hover::after, .tn-group.open .tn-head::after { transform: scaleX(1); } .side-nav a { transition: background-color .15s, color .15s, padding-left .18s var(--ease-out); } .side-nav a:active { padding-left: calc(var(--side-pad, 12px) + 3px); } /* menus, sheets and notices */ @keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scaleY(.96); } } .tn-menu { transform-origin: 50% 0; } .tn-group.open .tn-menu, .tn-group:hover .tn-menu { animation: menu-in .17s var(--ease-out); } .tn-menu a { transition: background-color .12s, color .12s, padding-left .16s var(--ease-out); } .tn-menu a:hover { padding-left: 14px; } @keyframes sheet-in { from { opacity: 0; transform: translateY(18px) scale(.97); } } @keyframes fade-in { from { opacity: 0; } } dialog.sheet[open] { animation: sheet-in .3s var(--ease-spring); } dialog.sheet[open]::backdrop { animation: fade-in .2s both; } @keyframes toast-in { from { opacity: 0; transform: translate(-50%, 14px) scale(.94); } } .toast:not([hidden]) { animation: toast-in .32s var(--ease-spring); border-radius: var(--btn-radius); } @media (max-width: 760px) { dialog.more-sheet[open] { animation: sheet-up .3s var(--ease-out); } } @keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } } /* a new page rides in; the carpet on the home page unrolls */ @keyframes view-in { from { opacity: 0; transform: translateY(10px); } } .view.entering > * { animation: view-in .34s var(--ease-out) both; } .view.entering > * > :nth-child(2) { animation: view-in .4s .05s var(--ease-out) both; } .view.entering > * > :nth-child(n+3) { animation: view-in .44s .1s var(--ease-out) both; } .view.entering .stage, .view.entering .stage > * { animation: none; } .view.entering .stage .panel { animation: view-in .34s .04s var(--ease-out) both; } @keyframes unroll { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } } .view.entering .dash .tekemet { animation: unroll .7s .08s var(--ease-out) both; } @keyframes grow-x { from { transform: scaleX(0); } } .view.entering .dh-rank i::after, .view.entering .pt-bar i, .view.entering .progress > div { animation: grow-x .8s .25s var(--ease-out) both; transform-origin: left; } /* small things that answer the hand */ .card-head a, .lang-switch button, .tc-tile, .swatch, .pset, .pcolor, .char-card .avatar { transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .12s var(--ease-out); } .tc-tile:active, .swatch:active, .pset:active, .pcolor:active, .lang-switch button:active { transform: scale(.96); } .char-card:active .avatar { transform: scale(.94); } .dot { transition: transform .12s var(--ease-out), box-shadow .15s; } .dot:hover { transform: scale(1.1); } .dot:active { transform: scale(.9); } details > summary { transition: color .15s; } details[open] > :not(summary) { animation: view-in .26s var(--ease-out); } .an-tab:not([hidden]) { animation: view-in .24s var(--ease-out); } input[type="range"] { cursor: grab; } input[type="range"]:active { cursor: grabbing; } .seg-links { flex-wrap: wrap; overflow: visible; border-radius: 12px; } /* calm: no bounce and no travel; off: nothing moves but the pieces */ :root[data-motion="calm"] .view.entering > *, :root[data-motion="calm"] .view.entering > * > *, :root[data-motion="calm"] .view.entering .stage .panel { animation: fade-in .2s both; } :root[data-motion="calm"] .view.entering .dash .tekemet { animation: fade-in .3s both; } :root[data-motion="off"] *:not(.board *):not(.board), :root[data-motion="off"] *:not(.board *)::after, :root[data-motion="off"] *:not(.board *)::before, :root[data-motion="off"] ::backdrop { animation: none !important; transition: none !important; } .dot-auto { background: conic-gradient(#6E4527 0 25%, #8C929B 0 50%, #17324F 0 75%, #B9BCBF 0); } .own-frame[data-on="true"] input { box-shadow: 0 0 0 2px var(--page), 0 0 0 4px var(--ink); } #frameOpts { display: grid; gap: inherit; } #frameOpts[hidden] { display: none; } /* ============================================================ openings library */ .op-page { max-width: 880px; } .op-count { margin-top: 10px; font-size: 14px; color: var(--ink-faint); font-variant-numeric: tabular-nums; } .op-group { margin-top: 34px; } .op-group h2 { font: 700 20px/1.25 var(--font-display); letter-spacing: -0.01em; margin: 0 0 6px; } .op-list { border-top: 1px solid var(--rule); } .op-row { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto 22px; gap: 14px; align-items: center; padding: 13px 4px; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); transition: padding-left .18s var(--ease-out), background-color .15s; } .op-row:hover { padding-left: 10px; background: var(--surface); } .op-row:hover b { background: var(--stitch) left calc(100% - 1px) / 100% 1.5px no-repeat; } .op-side { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--ink); background: #fff; flex: none; } .op-side.b { background: var(--ink); } :root[data-theme="night"] .op-side { border-color: var(--ink-soft); } :root[data-theme="night"] .op-side.b { background: #0B0F14; } .op-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .op-name b { font-weight: 600; font-size: 16px; align-self: flex-start; } .op-name small { font-size: 13.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } .op-eco { font-size: 12.5px; font-weight: 600; color: var(--ink-faint); font-variant-numeric: tabular-nums; } .op-tick { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1.5px dashed var(--rule-strong); } .op-tick.on { border: 0; background: var(--c-best, #2E8B69); color: #fff; } .op-tick svg { width: 14px; height: 14px; } .op-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink-soft); text-decoration: none; align-self: flex-start; } .op-back svg { width: 15px; height: 15px; } .op-back:hover { color: var(--ink); } .op-meta { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; color: var(--ink-soft); } .op-idea { font-size: 15.5px; line-height: 1.6; color: var(--ink); max-width: 46ch; } .op-notes { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); } .op-moves { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 2px; padding: 12px; border: 1px solid var(--rule); border-radius: var(--card-radius); background: var(--surface); min-height: 48px; font-variant-numeric: tabular-nums; } .op-no { color: var(--ink-faint); font-size: 13.5px; margin-left: 6px; } .op-no:first-child { margin-left: 0; } .op-mv { border: 0; background: none; padding: 3px 6px; border-radius: 5px; font: 600 15px var(--font-ui); color: var(--ink); cursor: pointer; } .op-mv:hover { background: var(--surface-2); } .op-mv.on { background: var(--ink); color: var(--page); } .op-q { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 4px; border-radius: 5px; border: 1.5px dashed var(--accent-solid); color: var(--accent-ink); font-weight: 700; } .panel-actions { display: flex; flex-wrap: wrap; gap: 8px; }