/* Quesly landing, catalog and shared site chrome. Shares the panel's design tokens (see src/styles.css) and its theme contract: the OS preference is the default, and an explicit choice is stamped on and stored under the same localStorage key the panel uses, so switching the theme on either side carries over to the other. */ :root { --surface-1: #fcfcfb; --page: #f9f9f7; --text-primary: #0b0b0b; --text-secondary: #52514e; --text-muted: #898781; --border: rgba(11, 11, 11, 0.1); --accent: #2a78d6; --accent-ink: #ffffff; --accent-soft: #cde2fb; --good: #1baf7a; /* player-cabinet button: a solid orange that flips per theme — a lighter tone with black ink in light mode, a deeper tone with white ink in dark */ --cabinet-bg: #f4a63a; --cabinet-ink: #0b0b0b; --shadow: 0 1px 3px rgba(11, 11, 11, 0.06), 0 4px 16px rgba(11, 11, 11, 0.04); } /* dark tokens, kept in one place and applied by both selectors below */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surface-1: #1a1a19; --page: #0d0d0d; --text-primary: #ffffff; --text-secondary: #c3c2b7; --text-muted: #898781; --border: rgba(255, 255, 255, 0.1); --accent: #3987e5; --accent-ink: #ffffff; --accent-soft: #184f95; --good: #199e70; --cabinet-bg: #a75f1d; --cabinet-ink: #ffffff; --shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } } :root[data-theme="dark"] { --surface-1: #1a1a19; --page: #0d0d0d; --text-primary: #ffffff; --text-secondary: #c3c2b7; --text-muted: #898781; --border: rgba(255, 255, 255, 0.1); --accent: #3987e5; --accent-ink: #ffffff; --accent-soft: #184f95; --good: #199e70; --cabinet-bg: #a75f1d; --cabinet-ink: #ffffff; --shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } * { box-sizing: border-box; } /* The `hidden` attribute only carries `display: none` from the UA stylesheet, so any author rule that sets `display` silently defeats it — which is how the catalog grid (display: grid) stayed on screen underneath the "no quizzes" notice after a language switch. Author-level and !important, so hiding an element by attribute always wins. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--page); color: var(--text-primary); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; } /* Header — stays pinned to the top of the viewport on every scroll so the nav is always one tap away. The sticky here only holds if no ancestor becomes a scroll container: see the html/body `overflow-x: clip` note near the end of this file (plain `overflow-x: hidden` on silently defeats it). */ .site-header { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--page) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .site-header .wrap { display: flex; align-items: center; gap: 18px; height: 60px; } .logo { font-weight: 700; font-size: 19px; color: var(--text-primary); display: flex; align-items: center; gap: 8px; white-space: nowrap; } .top-nav { display: flex; gap: 16px; margin-left: auto; } .top-nav a { color: var(--text-secondary); font-size: 15px; white-space: nowrap; } .top-nav a:hover { color: var(--text-primary); } .top-nav a.current { color: var(--text-primary); font-weight: 600; } /* the panel + cabinet links inside the nav are redundant next to their header buttons on the desktop bar, so they only surface inside the mobile drop-down (see the mobile-menu block below) */ .top-nav .nav-cta, .top-nav .nav-cabinet { display: none; } /* Hamburger: only meaningful once the inline nav collapses, so it is hidden on the desktop bar and revealed by the mobile breakpoint below. Shares the icon-btn footprint. */ .nav-toggle { display: none; position: relative; width: 34px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: none; color: var(--text-secondary); cursor: pointer; } .nav-toggle:hover { color: var(--text-primary); border-color: var(--text-muted); } /* three bars drawn from the middle one plus its ::before/::after */ .nav-toggle .bar, .nav-toggle .bar::before, .nav-toggle .bar::after { content: ""; position: absolute; left: 50%; width: 16px; height: 2px; margin-left: -8px; border-radius: 2px; background: currentColor; transition: transform 0.2s ease, opacity 0.2s ease; } .nav-toggle .bar { top: 50%; margin-top: -1px; } .nav-toggle .bar::before { top: -5px; } .nav-toggle .bar::after { top: 5px; } /* open state morphs the bars into an X */ .site-header.nav-open .nav-toggle .bar { background: transparent; } .site-header.nav-open .nav-toggle .bar::before { transform: translateY(5px) rotate(45deg); } .site-header.nav-open .nav-toggle .bar::after { transform: translateY(-5px) rotate(-45deg); } .header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .lang-switch { display: flex; gap: 2px; border: 1px solid var(--border); border-radius: 8px; padding: 2px; } /* the switch renders as links on the static pages and as buttons where the language is applied in place (catalog) — both must look identical */ .lang-switch a, .lang-switch span, .lang-switch button { padding: 2px 8px; border-radius: 6px; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.6; color: var(--text-muted); background: none; border: none; cursor: pointer; } .lang-switch .active { background: var(--accent); color: var(--accent-ink); } /* theme toggle: same footprint as one language chip */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 30px; border: 1px solid var(--border); border-radius: 8px; background: none; color: var(--text-secondary); font-size: 15px; cursor: pointer; } .icon-btn:hover { color: var(--text-primary); border-color: var(--text-muted); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: 10px; font-size: 15px; font-weight: 600; border: 1px solid transparent; cursor: pointer; white-space: nowrap; } .btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow); } .btn-primary:hover { filter: brightness(1.08); } .btn-ghost { border-color: var(--border); color: var(--text-primary); background: var(--surface-1); } .btn-ghost:hover { border-color: var(--text-muted); } /* Player cabinet entrance: same shape as the admin-panel button but a distinct colour so the two panel doors read as different destinations — the players' door in solid orange, the creators' door as the neutral ghost. */ .btn-cabinet { background: var(--cabinet-bg); color: var(--cabinet-ink); border-color: transparent; box-shadow: var(--shadow); } .btn-cabinet:hover { filter: brightness(1.05); } .btn-big { padding: 14px 28px; font-size: 17px; border-radius: 12px; } /* Hero */ .hero { padding: 72px 0 56px; text-align: center; } .hero h1 { font-size: clamp(32px, 6vw, 52px); line-height: 1.15; margin: 0 auto 18px; max-width: 820px; letter-spacing: -0.02em; } .hero h1 em { font-style: normal; color: var(--accent); } .hero .sub { font-size: clamp(16px, 2.5vw, 19px); color: var(--text-secondary); max-width: 680px; margin: 0 auto 30px; } .hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .hero-note { margin-top: 14px; font-size: 13.5px; color: var(--text-muted); } /* Sections */ .section { padding: 56px 0; } .section.alt { background: var(--surface-1); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .section h2 { font-size: clamp(26px, 4vw, 34px); text-align: center; margin: 0 0 10px; letter-spacing: -0.01em; } .section .lead { text-align: center; color: var(--text-secondary); max-width: 640px; margin: 0 auto 40px; } /* Feature grid */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 18px; } .card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; padding: 22px; box-shadow: var(--shadow); } .section.alt .card { background: var(--page); } .card .icon { font-size: 28px; line-height: 1; margin-bottom: 12px; } .card h3 { margin: 0 0 8px; font-size: 17px; } .card p { margin: 0; font-size: 14.5px; color: var(--text-secondary); } /* Steps */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 18px; counter-reset: step; } .step { position: relative; padding: 22px 22px 22px 22px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; } .step .num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; margin-bottom: 12px; } .step h3 { margin: 0 0 6px; font-size: 16px; } .step p { margin: 0; font-size: 14px; color: var(--text-secondary); } /* Mode cards */ .modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 18px; } .mode { background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; padding: 26px; box-shadow: var(--shadow); } .mode h3 { margin: 0 0 10px; font-size: 19px; } .mode ul { margin: 0; padding-left: 20px; color: var(--text-secondary); font-size: 14.5px; } .mode li { margin: 6px 0; } .badge { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 999px; padding: 3px 10px; margin-bottom: 12px; } /* Audience */ .audience { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 18px; } /* FAQ */ .faq { max-width: 760px; margin: 0 auto; } .faq details { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 4px 20px; margin-bottom: 10px; } .faq summary { cursor: pointer; font-weight: 600; padding: 12px 0; font-size: 15.5px; list-style: none; position: relative; padding-right: 28px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 20px; font-weight: 400; } .faq details[open] summary::after { content: "–"; } .faq details p { margin: 0 0 16px; color: var(--text-secondary); font-size: 14.5px; } /* Final CTA */ .cta-final { text-align: center; padding: 72px 0; } .cta-final h2 { font-size: clamp(26px, 4vw, 36px); margin: 0 0 14px; } .cta-final p { color: var(--text-secondary); margin: 0 0 28px; } /* Footer */ .site-footer { border-top: 1px solid var(--border); padding: 28px 0; font-size: 14px; color: var(--text-muted); } .site-footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; } .site-footer a { color: var(--text-secondary); } .site-footer nav { display: flex; gap: 18px; flex-wrap: wrap; } /* Below this width the nav links no longer fit next to the logo and the header actions, so they collapse behind a hamburger. Rather than dropping the links (which forced a scroll to the footer to reach the catalog, cabinet or panel), the bar keeps a menu button that unfolds the full nav as a drop-down sheet pinned under the sticky header — so every section and destination stays one tap away no matter how far down the page has scrolled. */ @media (max-width: 1100px) { .site-header .wrap { gap: 12px; } .header-actions { margin-left: auto; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; order: -1; /* menu button sits at the left edge of the actions cluster */ } /* the nav turns into a sheet anchored to the header's bottom edge; the header is `position: sticky` (a positioned box), so it is the containing block for this absolute child and the sheet spans the full bar width */ .site-header .top-nav { display: flex; flex-direction: column; gap: 2px; position: absolute; top: 100%; left: 0; right: 0; margin-left: 0; padding: 8px; background: var(--surface-1); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); /* collapsed until .nav-open; animated open/close */ max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease, max-height 0.24s ease; } .site-header.nav-open .top-nav { max-height: min(78vh, 560px); overflow-y: auto; opacity: 1; transform: translateY(0); pointer-events: auto; } .site-header .top-nav a { padding: 12px 14px; border-radius: 10px; font-size: 16px; color: var(--text-primary); } .site-header .top-nav a:hover, .site-header .top-nav a.current { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); } /* the two panel doors belong in the sheet on mobile — their desktop header buttons are gone here (or hidden outright below 560px). Each keeps its own colour so the sheet mirrors the bar: cabinet green, admin panel accent. */ .site-header .top-nav .nav-cabinet, .site-header .top-nav .nav-cta { display: block; margin-top: 6px; text-align: center; font-weight: 600; } .site-header .top-nav .nav-cabinet { background: var(--cabinet-bg); color: var(--cabinet-ink); } .site-header .top-nav .nav-cabinet:hover { background: var(--cabinet-bg); color: var(--cabinet-ink); filter: brightness(1.05); } .site-header .top-nav .nav-cta { background: var(--accent); color: var(--accent-ink); } .site-header .top-nav .nav-cta:hover { background: var(--accent); color: var(--accent-ink); filter: brightness(1.08); } } @media (max-width: 720px) { .hero { padding: 48px 0 40px; } .section { padding: 44px 0; } } /* On a phone the logo, theme toggle, language switch and the panel button together are wider than the viewport, which pushed the header — and with it the sticky bar — into a sideways scroll. The panel link stays reachable from the footer and the hero, so it is the one that goes. */ @media (max-width: 560px) { .site-header .wrap { gap: 10px; padding: 0 14px; } .header-actions > .btn { display: none; } .logo { font-size: 17px; } } /* Nothing on these pages is meant to scroll sideways; a single overflowing child used to drag the whole document with it. This must be `clip`, not `hidden`: `overflow-x: hidden` turns into a scroll container, which becomes the sticky header's scrollport and quietly breaks `position: sticky` (the header scrolled away instead of pinning). `clip` trims the same overflow without establishing a scroll container, so the header stays put. */ html, body { overflow-x: clip; } /* ---------- Quiz catalog ---------- */ .cat-toolbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: center; margin: 20px 0 4px; } .cat-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 14px 0 6px; } .cat-chip { border: 1px solid var(--border); background: var(--surface-1); color: var(--text-secondary); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 14px; cursor: pointer; } .cat-chip:hover { color: var(--text-primary); border-color: var(--text-muted); } .cat-chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .quiz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 18px; margin-top: 22px; } .quiz-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; /* surface + explicit ink: the card must stay readable in both themes */ background: var(--surface-1); color: var(--text-primary); box-shadow: var(--shadow); text-align: left; } /* the cover area is reserved before anything loads: a fixed 16:9 box holding the category-emoji placeholder, with the real cover fading in over it once decoded — so cards never resize or jump while images arrive */ .quiz-cover-wrap { position: relative; aspect-ratio: 16/9; width: 100%; overflow: hidden; background: linear-gradient( 135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--good) 18%, transparent) ); } .quiz-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.4s ease; } .quiz-cover.is-loaded { opacity: 1; } .quiz-cover-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 44px; } .quiz-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .quiz-title { font-size: 17px; font-weight: 700; margin: 0; color: var(--text-primary); } .quiz-blurb { margin: 0; font-size: 14px; color: var(--text-secondary); flex: 1; } .quiz-credit { font-size: 12.5px; color: var(--text-muted); } /* the author's handle links to their Telegram: underlined only on hover so the credit line stays a quiet footnote under the blurb */ .quiz-credit-link { color: var(--text-secondary); text-decoration: none; } .quiz-credit-link:hover, .quiz-credit-link:focus-visible { color: var(--accent); text-decoration: underline; } .quiz-card .btn { align-self: flex-start; } /* card facts: question count, difficulty and popularity as small pills */ .quiz-meta { display: flex; flex-wrap: wrap; gap: 6px; } .quiz-tag { font-size: 12px; color: var(--text-secondary); background: var(--surface-2, rgba(127, 127, 127, 0.1)); border: 1px solid var(--border, rgba(127, 127, 127, 0.18)); border-radius: 999px; padding: 2px 9px; white-space: nowrap; } .quiz-tag-played { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); } /* three-dot difficulty indicator: leftmost N dots filled in the level colour */ .quiz-diff { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; background: var(--surface-2, rgba(127, 127, 127, 0.1)); border: 1px solid var(--border, rgba(127, 127, 127, 0.18)); border-radius: 999px; padding: 2px 9px; white-space: nowrap; } .diff-dots { display: inline-flex; align-items: center; gap: 3px; } .diff-dots i { width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; border: 1px solid color-mix(in srgb, var(--text-muted, #888) 55%, transparent); background: transparent; } .diff-easy { --diff: #35a35a; } .diff-medium { --diff: #e0a52a; } .diff-hard { --diff: #db5b52; } .diff-dots i.on { background: var(--diff); border-color: var(--diff); } .diff-text { color: var(--diff); font-weight: 600; } /* sort control above the grid */ .catalog-sort { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 14px; color: var(--text-secondary); } .catalog-sort select { font: inherit; color: var(--text-primary); background: var(--surface-1, transparent); border: 1px solid var(--border, rgba(127, 127, 127, 0.25)); border-radius: 10px; padding: 6px 10px; cursor: pointer; } .catalog-empty { text-align: center; color: var(--text-secondary); padding: 48px 0; } /* first-load state: a spinner while the catalog feed is being fetched */ .catalog-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 64px 0; color: var(--text-secondary); font-size: 15px; } .loader-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--accent) 22%, transparent); border-top-color: var(--accent); animation: loader-spin 0.7s linear infinite; } @keyframes loader-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .loader-spinner { animation-duration: 1.6s; } } /* offered when the chosen language has no quizzes yet */ .lang-offer { max-width: 520px; margin: 0 auto; background: var(--surface-1); border: 1px solid var(--border); border-radius: 16px; padding: 28px 24px; text-align: center; } .lang-offer h2 { margin: 0 0 8px; font-size: 20px; } .lang-offer p { margin: 0 0 18px; color: var(--text-secondary); font-size: 15px; } .suggest-band { margin-top: 40px; border: 1px dashed var(--border); border-radius: 16px; padding: 22px; display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .suggest-band p { margin: 0; max-width: 560px; color: var(--text-secondary); } /* ---------- User guide / article platform ---------- */ .guide-wrap { padding-top: 28px; padding-bottom: 56px; } .guide-index-title { margin: 0 0 6px; font-size: clamp(28px, 4vw, 40px); } .guide-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; margin-top: 28px; } .guide-card { display: block; padding: 20px 22px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-1); box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: transform 0.12s ease, border-color 0.12s ease; } .guide-card:hover { transform: translateY(-2px); border-color: var(--accent); } .guide-card h2 { margin: 0 0 6px; font-size: 20px; color: var(--text-primary); } .guide-card p { margin: 0; color: var(--text-secondary); font-size: 15px; line-height: 1.5; } .guide-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; color: var(--accent); text-decoration: none; font-weight: 500; } .guide-back:hover { text-decoration: underline; } /* the reading column: a comfortable telegra.ph-style long-form measure */ .article { max-width: 720px; margin: 0 auto; } .article > h1 { margin: 0 0 10px; font-size: clamp(30px, 5vw, 44px); line-height: 1.15; letter-spacing: -0.01em; } .article-meta { margin: 0 0 32px; color: var(--text-muted); font-size: 14px; } .article-body { color: var(--text-primary); font-size: 18px; line-height: 1.72; } .article-body h2 { margin: 40px 0 14px; font-size: 26px; line-height: 1.25; } .article-body h3 { margin: 32px 0 12px; font-size: 21px; } .article-body h4 { margin: 26px 0 10px; font-size: 18px; color: var(--text-secondary); } .article-body p { margin: 0 0 18px; } .article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .article-body ul, .article-body ol { margin: 0 0 18px; padding-left: 26px; } .article-body li { margin: 6px 0; /* wrapped item text and nested lists hang under the item's text, not the marker, so multi-line points read as one block */ padding-left: 4px; } /* a nested list hugs its parent item instead of opening a full paragraph gap */ .article-body li > ul, .article-body li > ol { margin: 6px 0 8px; } .article-body blockquote { margin: 0 0 20px; padding: 4px 18px; border-left: 3px solid var(--accent); color: var(--text-secondary); background: var(--accent-soft); border-radius: 0 10px 10px 0; } .article-body blockquote p:last-child { margin-bottom: 0; } .article-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; padding: 2px 6px; border-radius: 6px; background: var(--border); } .article-body pre { margin: 0 0 20px; padding: 16px 18px; overflow-x: auto; border-radius: 12px; background: var(--border); } .article-body pre code { padding: 0; background: none; } .article-body hr { margin: 34px 0; border: none; border-top: 1px solid var(--border); } .article-body figure { margin: 0 0 22px; } .article-body img { max-width: 100%; height: auto; border-radius: 12px; display: block; } .article-body figcaption { margin-top: 8px; text-align: center; color: var(--text-muted); font-size: 14px; }