/* Beasties (beasties.hohl.dev): the app's night stage instead of graphite, its paper Sudoku board, monsters. */ :root { --bg: #141027; --bg-deep: #0f0c1f; --surface: #1d1837; --surface-2: #28214a; --line: #2f2855; --line-strong: #463d78; --text: #f1ecff; --text-2: #d8d1f1; --muted: #a59cc9; --zap: #ffd400; --zap-ink: #120f24; --paper: #fbf8f1; --paper-ink: #1e1a33; --paper-line: #d9d3e6; --paper-user: #5b3fd0; --t-locker: #3fc1a5; --t-normal: #3d8bff; --t-fies: #ff8a3d; --t-teuflisch: #e0457b; } :root[data-theme="light"] { --bg: #f4f1fb; --bg-deep: #ebe6f7; --surface: #ffffff; --surface-2: #ebe6f7; --line: #ddd6ef; --line-strong: #c6bde3; --text: #1e1a33; --text-2: #3b3556; --muted: #645d80; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #f4f1fb; --bg-deep: #ebe6f7; --surface: #ffffff; --surface-2: #ebe6f7; --line: #ddd6ef; --line-strong: #c6bde3; --text: #1e1a33; --text-2: #3b3556; --muted: #645d80; } } /* buttons in the app's yellow, always with dark ink (never yellow text on the dark stage) */ .btn, .wp-block-button__link { background: var(--zap); color: var(--zap-ink); } .btn:hover, .wp-block-button__link:hover { background: var(--text); color: var(--bg); } .btn.is-soon { background: transparent; color: var(--text); } /* header: the wordmark instead of icon + name */ .brand.is-logo img { height: 52px; width: auto; border-radius: 0; margin-block: -8px; } .brand-wrap:has(.is-logo) { display: flex; align-items: center; } /* no line box below the wordmark: it sits in the middle of the bar */ .brand-wrap:has(.is-logo) .brand-by { display: none; } /* the wordmark stands alone; hohl.dev is in the footer */ .bst-link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); font-weight: 600; text-decoration: none; cursor: pointer; } .bst-link:hover { text-decoration: underline; } /* difficulty dots: the app's colours */ .bst-dot { display: inline-block; width: .62em; height: .62em; border-radius: 50%; margin-right: .45em; vertical-align: .08em; background: var(--muted); } .bst-dot.is-locker { background: var(--t-locker); } .bst-dot.is-normal { background: var(--t-normal); } .bst-dot.is-fies { background: var(--t-fies); } .bst-dot.is-teuflisch { background: var(--t-teuflisch); } /* ---------- start page hero ---------- */ .bst-hero { text-align: center; max-width: 760px; margin: 0 auto; padding-top: clamp(8px, 3vw, 32px); } .bst-wordmark { margin: 0 auto .2em; line-height: 0; } .bst-logo { width: min(380px, 78vw); height: auto; } .bst-hero-line { font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 3.4vw, 2rem); text-transform: uppercase; letter-spacing: .03em; margin: .2em 0 .5em; color: var(--text); } .bst-hero .lead { margin-inline: auto; max-width: 600px; } .bst-hero .get-app { justify-content: center; } .bst-parade { display: flex; justify-content: center; align-items: flex-end; gap: clamp(4px, 2vw, 18px); margin-top: clamp(24px, 4vw, 40px); margin-bottom: calc(-1 * clamp(40px, 7vw, 96px)); } .bst-parade img { height: clamp(78px, 15vw, 140px); width: auto; } .bst-parade .bst-parade-3 { height: clamp(104px, 20vw, 190px); } .bst-parade .bst-parade-1, .bst-parade .bst-parade-5 { height: clamp(64px, 12vw, 112px); } /* ---------- inner pages: hero with a monster ---------- */ .bst-page-hero .page-hero-inner.has-pic { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; } .bst-hero-pic img { display: block; height: clamp(120px, 18vw, 200px); width: auto; margin-bottom: -8px; } .bst-body { max-width: var(--wide); margin: 0 auto; padding: clamp(28px, 5vw, 56px) var(--gutter) 0; } @media (max-width: 640px) { .bst-page-hero .page-hero-inner.has-pic { grid-template-columns: 1fr; } .bst-hero-pic { display: none; } } /* ---------- Sudoku board: the app's paper ---------- * Nine boxes in a 3×3 grid; the gaps between boxes (2px) and cells (1px) are the lines, so no cell ever * differs in size from another. */ .sdk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; aspect-ratio: 1; background: var(--paper-ink); border: 3px solid var(--paper-ink); border-radius: 10px; overflow: hidden; font-variant-numeric: tabular-nums; container-type: inline-size; box-sizing: border-box; } .sb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--paper-line); min-width: 0; min-height: 0; } .sdk .sc { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; overflow: hidden; background: var(--paper); color: var(--paper-ink); border: 0; padding: 0; margin: 0; border-radius: 0; font: 600 clamp(.6rem, 6.4cqw, 2rem)/1 Inter, system-ui, sans-serif; transition: background-color .25s ease, color .25s ease; } .sdk .is-given { font-weight: 700; } .sdk .is-filled { color: var(--paper-user); } .sdk .is-peer, .sdk .is-house { background: #eeeaf8; } .sdk .is-same, .sdk .is-mark, .sdk .is-hit { background: #d6ccfa; } .sdk .is-sel { background: #ffe066; } .sdk .is-key { background: #ffe066; box-shadow: inset 0 0 0 2px #e0b400; } .sdk .is-line { background: #fbe3e7; } .sdk .is-x::after { content: ""; position: absolute; inset: 22%; background: linear-gradient(45deg, transparent 44%, #d92d4b 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, #d92d4b 44% 56%, transparent 56%); opacity: .75; animation: bst-pop .3s ease-out; } .sdk .sc.is-wrong { color: #d92d4b; background: #fde2e6; } .sdk .is-hint { color: var(--paper-user); background: #fff3b8; } .sdk .is-pop { animation: bst-pop .32s ease-out; } .sdk .is-hit { animation: bst-pulse .45s ease-out; } .sdk button.is-empty { cursor: pointer; color: var(--paper-user); } .sdk button.is-empty:hover { background: #eeeaf8; } .sdk button.is-empty:focus-visible { outline: 2px solid var(--paper-user); outline-offset: -3px; } .sdk button.is-peek { background: #ffe066; cursor: default; animation: bst-pop .28s ease-out; } /* notes: a 3×3 grid of small candidates inside a cell */ .sdk .nts { position: absolute; inset: 4%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); font-size: .44em; font-weight: 700; line-height: 1; color: #5a5478; } .sdk .nts i { font-style: normal; display: grid; place-items: center; opacity: 0; transition: opacity .25s, color .25s; } .sdk .nts i.is-on { opacity: 1; animation: bst-pop .25s ease-out; } .sdk .is-key .nts i.is-on { color: var(--paper-ink); font-weight: 800; } /* one-number notes (pointing, X-Wing): bigger, so they read on a phone */ .bst-scene[data-scene="pointing"] .sdk .nts, .bst-scene[data-scene="xwing"] .sdk .nts { inset: 1%; font-size: .58em; } .sdk .nts i.is-on.is-big { color: #5b3fd0; font-weight: 900; transform: scale(1.3); transition: opacity .25s, color .25s, transform .25s; } .sdk .nts i.is-out { color: #d92d4b; text-decoration: line-through; text-decoration-thickness: 2px; opacity: .7; animation: bst-shake .3s ease-out; } @keyframes bst-pop { 0% { transform: scale(.55); } 70% { transform: scale(1.14); } 100% { transform: scale(1); } } @keyframes bst-pulse { 0% { box-shadow: inset 0 0 0 0 rgba(91, 63, 208, .6); } 100% { box-shadow: inset 0 0 0 10px rgba(91, 63, 208, 0); } } @keyframes bst-shake { 0%, 100% { transform: none; } 30% { transform: translateX(-2px); } 60% { transform: translateX(2px); } } /* ---------- the game screen, stylised (scenes) ---------- */ .gx { --pw: 22%; position: relative; width: 100%; max-width: 400px; margin: 0 auto; box-sizing: border-box; padding: 18px 16px 18px; border-radius: 34px; color: #ede7ff; background: radial-gradient(120% 60% at 50% 0%, #5a35d0 0%, rgba(90, 53, 208, 0) 70%), linear-gradient(180deg, #2a1c63 0%, #17112f 60%, #120f24 100%); box-shadow: 0 30px 70px -20px rgba(18, 15, 36, .7), inset 0 0 0 1px rgba(255, 255, 255, .06); user-select: none; } .gx-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-bottom: 6px; } .gx-level { font-size: .78rem; font-weight: 600; color: #b7aee0; white-space: nowrap; } .gx-head.is-titled { align-items: start; margin-top: 2px; } .gx-head.is-titled .gx-icons, .gx-head.is-titled .gx-pill { margin-top: 14px; } .gx-head.is-titled .gx-stars { justify-content: center; gap: 3px; margin-top: 2px; } .gx-head.is-titled .st { width: 17px; height: 17px; } .gx-stars { position: relative; display: flex; gap: 4px; } .gx .st { width: 22px; height: 22px; color: #ffd400; transition: color .3s; } .gx .st.is-lost { color: #2c2456; } .gx .st.is-spent { color: #2c2456; } .gx .st.is-capped { color: rgba(143, 134, 184, .55); transition: color .3s; } .gx .st .st-x { fill: rgba(237, 231, 255, .85); } .gx .st-fall { position: absolute; top: 0; color: #ffd400; animation: bst-fall 1s cubic-bezier(.4, 0, .9, .6) forwards; pointer-events: none; } @keyframes bst-fall { 0% { transform: none; opacity: 1; } 100% { transform: translateY(70px) rotate(70deg) scale(.7); opacity: 0; } } .st-fly { position: fixed; z-index: 99; color: #ffd400; pointer-events: none; } .gx-pill { justify-self: end; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: #1a1533; box-shadow: inset 0 0 0 1.5px #8a6d1a; font-weight: 700; font-size: .85rem; } .gx-pill.is-bump { animation: bst-pop .2s ease-out; } .gx .st-mini { width: 13px; height: 13px; color: #ffd400; } .gx-stage { position: relative; padding-top: calc(var(--pw) * .764); } .gx-stage .sdk { position: relative; z-index: 1; border-radius: 12px; box-shadow: 0 6px 0 rgba(0, 0, 0, .28); } .gx-peek { --px: .8; position: absolute; z-index: 2; top: 0; left: calc(var(--px) * 100%); width: var(--pw); aspect-ratio: 293 / 223; transform: translateX(-50%); transition: left .45s cubic-bezier(.3, 1.4, .5, 1); pointer-events: none; } /* the window shows the part of Gnatz above the board edge (62% of the picture) */ .gx-peek-win { position: absolute; inset: 0; clip-path: inset(-120% -60% 0 -60%); } .gx-peek-body { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 293 / 360; transition: transform .35s cubic-bezier(.3, 1.5, .5, 1); } .gx-peek.is-cheer .gx-peek-body { transform: translateY(-14%); } .gx-peek .pk { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; } .gx-peek .pk.is-on { opacity: 1; } .gx-hand { position: absolute; z-index: 3; bottom: 0; width: 30%; height: auto; transform: translateY(50%); transition: opacity .2s; } .gx-hand.is-l { left: calc(50% - 28% - 15%); transform: translateY(50%) scaleX(-1); } .gx-hand.is-r { left: calc(50% + 28% - 15%); } .gx-peek.is-cheer .gx-hand { opacity: 0; } .gx-toast { position: absolute; z-index: 4; left: 50%; top: 55%; transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none; padding: 14px 22px; border-radius: 18px; text-align: center; background: #241e45; color: #ede7ff; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), opacity .2s; } .gx-toast.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); } .gx-toast strong { display: block; font-family: var(--display); font-size: 1.5rem; text-transform: uppercase; letter-spacing: .03em; } .gx-toast span { display: inline-block; margin-top: 8px; padding: 6px 14px; border-radius: 10px; background: #ffd400; color: #120f24; font-weight: 700; font-size: .85rem; } .gx-toast.is-lost strong { color: #ff8da1; } .gx-toast.is-won { background: #ffd400; color: #120f24; } .gx-tools { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 18px; } .gx-tool { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #ede7ff; font-size: .68rem; font-weight: 500; } .gx-tool > svg { width: 24px; height: 24px; padding: 5px 12px; border-radius: 999px; transition: background-color .2s, color .2s; } .gx-tool-label { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; color: #8f86b8; } .gx-tool-label .st-price { width: 9px; height: 9px; color: inherit; } .gx-tool { position: relative; } .gx-tag { position: absolute; top: -6px; left: calc(50% + 4px); z-index: 1; display: inline-flex; align-items: center; gap: 1px; padding: 1px 5px 1px 6px; border-radius: 999px; background: #ede7ff; color: #120f24; box-shadow: 0 0 0 1.5px #120f24; font-size: .6rem; font-weight: 800; line-height: 1.3; white-space: nowrap; pointer-events: none; } .gx-tag .st-price { width: 8px; height: 8px; color: inherit; } .gx-tool.is-off .gx-tag { background: #8f86b8; } .gx-tool.is-active .gx-tool-label { color: #ede7ff; font-weight: 700; } .gx-tool.is-active > svg { background: #ffd400; color: #120f24; } .gx-tool.is-press > svg { animation: bst-press .3s ease-out; } .gx-pad { display: grid; grid-template-columns: repeat(9, 1fr); margin-top: 12px; } .gx-key { display: flex; flex-direction: column; align-items: center; line-height: 1; } .gx-key b { font-size: clamp(1.3rem, 6vw, 1.9rem); font-weight: 500; color: #f1ecff; } .gx-key small { font-size: .62rem; color: #8f86b8; margin-top: 3px; } .gx-key.is-done { opacity: .18; } .gx-key.is-press b { animation: bst-key .35s ease-out; } @keyframes bst-key { 0% { transform: scale(1); } 35% { transform: scale(.8); color: #ffd400; } 100% { transform: scale(1); } } @keyframes bst-press { 0% { transform: scale(1); } 35% { transform: scale(.82); } 100% { transform: scale(1); } } /* ---------- scenes with captions ---------- */ .bst-scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; transition: opacity .35s; } .bst-scene.is-fading .bst-scene-visual { opacity: 0; transition: opacity .3s; } .bst-scene-visual { transition: opacity .3s; min-width: 0; } .bst-scene.is-hero { display: block; } .bst-board-card { position: relative; max-width: 470px; margin: 0 auto; padding: 14px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-pop); } .bst-count { position: absolute; top: -14px; right: 18px; padding: 6px 12px; border-radius: 999px; background: var(--zap); color: var(--zap-ink); font-weight: 800; font-size: .9rem; opacity: 0; transform: scale(.7); transition: opacity .2s, transform .2s; } .bst-count.is-on { opacity: 1; transform: none; } .bst-strip { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin-top: 12px; } .bst-strip span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; background: var(--surface-2); color: var(--text); font-weight: 700; transition: background-color .25s, color .25s, opacity .25s; } .bst-strip span.is-out { opacity: .3; text-decoration: line-through; text-decoration-color: #ff5d78; text-decoration-thickness: 2px; } .bst-strip span.is-keep { background: var(--zap); color: var(--zap-ink); animation: bst-pop .35s ease-out; } .bst-caps { list-style: none; margin: 0; padding: 0; counter-reset: cap; display: grid; gap: 10px; } .bst-caps li { counter-increment: cap; position: relative; padding: 14px 16px 14px 58px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); line-height: 1.5; transition: border-color .3s, background-color .3s, transform .3s; } .bst-caps li::before { content: counter(cap); position: absolute; left: 14px; top: 13px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 1.1rem; background: var(--surface-2); color: var(--muted); transition: background-color .3s, color .3s; } .bst-caps li strong { color: var(--text); } .bst-caps li.is-on { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); } .bst-caps li.is-on::before { background: var(--zap); color: var(--zap-ink); } .bst-scene.is-flip .bst-scene-visual { order: 2; } @media (max-width: 860px) { .bst-scene { grid-template-columns: 1fr; } .bst-scene.is-flip .bst-scene-visual { order: 0; } } @media (prefers-reduced-motion: reduce) { .sdk *, .gx *, .bst-strip span { animation: none !important; transition: none !important; } } /* ---------- difficulty boards ---------- */ .bst-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .bst-tier { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 20px; } .bst-tier .sdk { border-width: 2px; border-radius: 8px; } .bst-tier h3 { font-size: 1.5rem; margin: 14px 0 2px; } .bst-tier-given { font-weight: 700; color: var(--text) !important; margin: 0 0 6px !important; } .bst-tier p { color: var(--text-2); margin: 0; font-size: .95rem; line-height: 1.5; } .bst-tier.is-teuflisch .sdk { filter: saturate(.9); } @media (max-width: 960px) { .bst-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .bst-tiers { grid-template-columns: 1fr; } } /* ---------- one level ---------- */ .bst-boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 4vw, 48px); max-width: 1040px; } .bst-board { margin: 0; min-width: 0; } .bst-board figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; } .bst-board figcaption strong { font-family: var(--display); font-size: 1.4rem; text-transform: uppercase; letter-spacing: .03em; } .bst-board figcaption span { color: var(--muted); font-size: .9rem; } .bst-peek-bar { min-height: 1.6em; margin: 10px 0 0; color: var(--muted); font-size: .9rem; } .bst-spoiler { position: relative; border-radius: 10px; overflow: hidden; } .bst-spoiler .sdk { transition: filter .35s ease; } .bst-spoiler:not(.is-open) .sdk { filter: blur(9px) saturate(.6); user-select: none; } .bst-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: 10px; cursor: pointer; padding: 16px; text-align: center; background: color-mix(in srgb, var(--bg) 55%, transparent); color: var(--text); font: inherit; transition: opacity .25s; } .bst-cover:hover { background: color-mix(in srgb, var(--bg) 45%, transparent); } .bst-cover-pic { height: clamp(70px, 14vw, 110px); width: auto; margin-bottom: 6px; } .bst-cover strong { display: inline-block; font-family: var(--display); font-size: 1.25rem; text-transform: uppercase; letter-spacing: .03em; background: var(--zap); color: var(--zap-ink); padding: .5em 1em; border-radius: 12px; } .bst-cover span { font-size: .9rem; color: var(--text-2); margin-top: 6px; } .bst-spoiler.is-open .bst-cover { opacity: 0; pointer-events: none; } .bst-pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; max-width: 1040px; margin-top: clamp(28px, 5vw, 48px); padding-top: 20px; border-top: 1px solid var(--line); } .bst-pager a { color: var(--text); text-decoration: none; font-weight: 600; } .bst-pager a:hover { color: var(--accent); } .bst-pager .bst-all { color: var(--muted); font-weight: 500; text-align: center; } .bst-pager .bst-next { justify-self: end; } .bst-note { color: var(--muted); max-width: 720px; margin-top: 20px; } .bst-note a { color: var(--accent); } @media (max-width: 760px) { .bst-boards { grid-template-columns: 1fr; max-width: 520px; } .bst-pager .bst-all { grid-column: 1 / -1; grid-row: 2; } } /* ---------- all levels ---------- * Hero: a fan of paper boards (level 1 per difficulty, the chosen one in front) with Gnatz peeking, and a jump box. * Below: the difficulty switch, the levels in blocks of 25 as small paper cards (mini board drawn by beasties.js * from data-g), then "how it works". --tc is the colour of the difficulty in hand. */ .is-locker { --tc: var(--t-locker); } .is-normal { --tc: var(--t-normal); } .is-fies { --tc: var(--t-fies); } .is-teuflisch { --tc: var(--t-teuflisch); } /* the hero */ .bst-page-hero.is-overview .page-hero-inner.has-pic { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 5vw, 64px); } .bst-page-hero.is-overview h1 { margin-bottom: .2em; } .bst-page-hero.is-overview .bst-hero-pic { min-width: 0; } .bst-jump { margin-top: clamp(20px, 3vw, 28px); max-width: 520px; } .bst-jump-label { display: block; font-weight: 600; font-size: .95rem; color: var(--text); margin-bottom: 8px; } .bst-jump-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; padding: 6px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .6); transition: border-color .2s; } .bst-jump-row:focus-within { border-color: var(--line-strong); } .bst-jump select, .bst-jump input { font: inherit; font-weight: 600; color: var(--text); background: var(--surface-2); border: 0; border-radius: 12px; height: 46px; padding: 0 14px; min-width: 0; box-sizing: border-box; -webkit-appearance: none; appearance: none; } .bst-jump select { padding-right: 34px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23a59cc9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 11px; } .bst-jump input::placeholder { color: var(--muted); font-weight: 500; } .bst-jump input { -moz-appearance: textfield; } .bst-jump input::-webkit-outer-spin-button, .bst-jump input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .bst-jump select:focus-visible, .bst-jump input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; } .bst-jump .btn { height: 46px; padding: 0 20px; border: 0; border-radius: 12px; font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; } .bst-jump.is-shake .bst-jump-row { animation: bst-shake .3s ease-out; border-color: #ff5d78; } /* the fan: three boards, the front one straight, the others tilted behind */ .bst-fan { position: relative; width: min(100%, 430px); margin: 0 auto; aspect-ratio: 1 / 1.02; animation: bst-float 6s ease-in-out infinite; } .bst-fan-card { --r: 0deg; --x: 0%; --y: 0%; --s: 1; position: absolute; left: 14%; right: 14%; bottom: 3%; z-index: 1; aspect-ratio: 1; box-sizing: border-box; padding: 8px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 24px 50px -22px rgba(0, 0, 0, .7); transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(var(--s)); transition: transform .55s cubic-bezier(.3, 1.35, .5, 1), filter .4s, opacity .4s; filter: saturate(.75) brightness(.82); } .bst-fan-card .sdk { border-width: 2px; border-radius: 10px; } .bst-fan-card .sc { font-size: clamp(.5rem, 6cqw, 1.1rem); } .bst-fan-card.is-back-l { --r: -12deg; --x: -24%; --y: -4%; --s: .88; } .bst-fan-card.is-back-r { --r: 11deg; --x: 24%; --y: -3%; --s: .88; } .bst-fan-card.is-front { z-index: 3; filter: none; } .bst-fan-card:not(.is-front) { cursor: pointer; } .bst-fan-card:not(.is-front):hover { filter: saturate(.9) brightness(.95); } .bst-fan-tag { position: absolute; left: 16px; top: -13px; padding: 4px 11px; border-radius: 999px; background: var(--tc); color: #120f24; font-family: var(--display); font-weight: 700; font-size: .95rem; letter-spacing: .05em; text-transform: uppercase; line-height: 1.2; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5); } .bst-fan-card.is-front .bst-fan-tag { top: auto; bottom: -13px; } /* Gnatz holds the top edge */ .bst-fan-card.is-back-r .bst-fan-tag { left: auto; right: 16px; } @keyframes bst-float { 0%, 100% { transform: none; } 50% { transform: translateY(-8px) rotate(-.6deg); } } /* Gnatz over the front board: the window shows the part above the board edge (62% of the picture) */ .bst-fan-peek { position: absolute; z-index: 4; left: 50%; bottom: 73.6%; width: 30%; transform: translateX(-50%); pointer-events: none; } .bst-hero-pic .bst-fan img { height: auto; margin: 0; } /* not the hero monster size */ .bst-fan-win { position: relative; aspect-ratio: 293 / 223; overflow: hidden; } .bst-fan-body { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 293 / 360; animation: bst-peekup 1s .3s cubic-bezier(.3, 1.5, .5, 1) both; } .bst-fan-body .pk { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; animation: bst-poses 12s steps(1, end) infinite; } .bst-fan-body .pk.is-happy { animation-delay: 0s; } .bst-fan-body .pk.is-look-l { animation-delay: -9s; } .bst-fan-body .pk.is-look-r { animation-delay: -6s; } .bst-fan-body .pk.is-wow { animation-delay: -3s; } @keyframes bst-poses { 0% { opacity: 1; } 25%, 100% { opacity: 0; } } @keyframes bst-peekup { 0% { transform: translateY(70%); } 100% { transform: none; } } .bst-fan .bst-fan-hand { position: absolute; z-index: 2; bottom: 0; width: 30%; height: auto; transform: translateY(50%); } .bst-fan .bst-fan-hand.is-l { left: calc(50% - 28% - 15%); transform: translateY(50%) scaleX(-1); } .bst-fan .bst-fan-hand.is-r { left: calc(50% + 28% - 15%); } .bst-fan-say { position: absolute; z-index: 3; left: 86%; top: -4%; display: inline-flex; align-items: center; gap: 2px; padding: 5px 9px; border-radius: 14px; background: #fff; color: #120f24; font-weight: 900; font-size: .95rem; line-height: 1; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); transform-origin: 0 100%; animation: bst-say 12s cubic-bezier(.3, 1.6, .5, 1) infinite; } .bst-fan-say::after { content: ""; position: absolute; left: 6px; bottom: -6px; border: 6px solid transparent; border-top-color: #fff; border-bottom: 0; } .bst-fan-say .st-say { width: 15px; height: 15px; color: #ffc400; } @keyframes bst-say { 0%, 72% { opacity: 0; transform: scale(.3); } 76%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.3); } } /* the difficulty switch */ .bst-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 clamp(24px, 4vw, 40px); max-width: 760px; } .bst-tab { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--surface); border: 1.5px solid var(--line); color: var(--text); text-decoration: none; transition: border-color .2s, background-color .2s, transform .2s, box-shadow .2s; } .bst-tab .bst-mini { width: 48px; flex: none; border-radius: 8px; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); } .bst-tab-text { display: grid; gap: 1px; min-width: 0; } .bst-tab strong { font-family: var(--display); font-size: 1.45rem; text-transform: uppercase; letter-spacing: .03em; line-height: 1; } .bst-tab small { color: var(--muted); font-size: .82rem; font-weight: 500; white-space: nowrap; } .bst-tab:hover { border-color: color-mix(in srgb, var(--tc) 55%, var(--line)); transform: translateY(-2px); } .bst-tab:hover .bst-mini { transform: rotate(-6deg) scale(1.06); } .bst-tab:active { transform: scale(.97); } .bst-tab[aria-selected="true"] { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, var(--surface)); box-shadow: 0 16px 34px -20px var(--tc); } .bst-tab[aria-selected="true"] small { color: var(--text-2); } .bst-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 14px; height: 14px; background: var(--tc); border-radius: 3px; transform: translateX(-50%) rotate(45deg); clip-path: polygon(100% 0, 100% 100%, 0 100%); } .bst-tab:focus-visible { outline: 2px solid var(--tc); outline-offset: 3px; } /* a difficulty: head, then the blocks */ .bst-panel + .bst-panel { margin-top: 48px; } .js .bst-levels .bst-panel { margin-top: 0; } .js .bst-levels .bst-panel:not(.is-active) { display: none; } .js .bst-levels .bst-panel.is-active { animation: bst-in .4s ease-out; } @keyframes bst-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .bst-panel-head { max-width: 720px; margin-bottom: clamp(20px, 3vw, 28px); } .bst-panel-head h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 .2em; } .bst-panel-head h2::before { content: ""; display: inline-block; width: .42em; height: .42em; margin-right: .3em; border-radius: 4px; background: var(--tc); vertical-align: .14em; transform: rotate(45deg); } .bst-panel-head p { color: var(--text-2); margin: 0; } .bst-blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); } .bst-block { position: relative; min-width: 0; padding: 16px 16px 18px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); } .bst-block h3 { font-family: var(--display); font-size: 1.15rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); margin: 0 0 12px; padding-right: 64px; } .bst-block-pal { position: absolute; right: 14px; top: -26px; height: 62px; width: auto; transform-origin: 50% 100%; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); } .bst-block:hover .bst-block-pal { transform: translateY(-4px) rotate(4deg); } .bst-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .bst-tiles li { min-width: 0; } /* a level: a small paper card with its mini board and the number */ .bst-lv { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 6px 5px; border-radius: 14px; background: var(--surface-2); color: var(--text); text-decoration: none; border: 1.5px solid transparent; transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), border-color .15s, background-color .15s, box-shadow .2s; } .bst-lv-n { font-weight: 700; font-size: .9rem; line-height: 1; font-variant-numeric: tabular-nums; } a.bst-lv:hover { border-color: var(--tc); transform: translateY(-3px) rotate(-1.5deg); box-shadow: 0 12px 22px -14px var(--tc); } a.bst-lv:hover .bst-mini { box-shadow: 0 0 0 2px var(--tc); } a.bst-lv:active { transform: scale(.94); transition-duration: .08s; } a.bst-lv:focus-visible { outline: 2px solid var(--tc); outline-offset: 2px; } .bst-lv:visited .bst-lv-n { color: var(--text-2); } /* the mini board: paper with the 3×3 boxes until the canvas (givens in the difficulty's colour) is drawn */ .bst-mini { display: block; width: 100%; aspect-ratio: 1; border-radius: 7px; overflow: hidden; background-color: var(--paper); background-image: linear-gradient(90deg, transparent calc(33.33% - .5px), var(--paper-line) calc(33.33% - .5px) calc(33.33% + .5px), transparent calc(33.33% + .5px) calc(66.67% - .5px), var(--paper-line) calc(66.67% - .5px) calc(66.67% + .5px), transparent calc(66.67% + .5px)), linear-gradient(transparent calc(33.33% - .5px), var(--paper-line) calc(33.33% - .5px) calc(33.33% + .5px), transparent calc(33.33% + .5px) calc(66.67% - .5px), var(--paper-line) calc(66.67% - .5px) calc(66.67% + .5px), transparent calc(66.67% + .5px)); transition: box-shadow .15s; } .bst-mini canvas { display: block; width: 100%; height: 100%; animation: bst-fade .3s ease-out; } @keyframes bst-fade { from { opacity: 0; } } html:not(.js) .bst-lv .bst-mini { display: none; } html:not(.js) .bst-lv { aspect-ratio: 1; justify-content: center; } /* how it works */ .bst-how { margin-top: clamp(56px, 9vw, 112px); } .bst-how-head { max-width: 720px; margin-bottom: clamp(24px, 4vw, 40px); } .bst-how-head h2 { font-size: clamp(2rem, 4.6vw, 3rem); margin: 0 0 .25em; } .bst-how-head p:last-child { color: var(--text-2); margin: 0; } .bst-how-steps { list-style: none; margin: 0; padding: 0; counter-reset: how; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); } .bst-how-step { counter-increment: how; min-width: 0; padding: 18px 18px 22px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); } .bst-how-pic { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: 18px; border-radius: 16px; overflow: hidden; background: radial-gradient(90% 90% at 50% 0%, color-mix(in srgb, var(--accent) 22%, var(--surface-2)), var(--surface-2)); } .bst-how-step h3 { font-size: 1.5rem; margin: 0 0 .3em; display: flex; align-items: center; gap: 10px; } .bst-how-step h3::before { content: counter(how); flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--zap); color: var(--zap-ink); font-size: 1.05rem; } .bst-how-step p { color: var(--text-2); margin: 0; line-height: 1.55; } .bst-how-more { margin: 24px 0 0; color: var(--text-2); } .bst-how-more a { color: var(--accent); font-weight: 600; text-decoration: none; } .bst-how-more a:hover { text-decoration: underline; } /* step 1: tiles, the right one gets pressed */ .bst-how-tiles { --tc: var(--t-locker); display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 78%; } .bst-how-tiles .bst-lv { background: var(--surface); } .bst-how-tiles .bst-lv.is-pick { animation: bst-pick 3.2s ease-in-out infinite; } @keyframes bst-pick { 0%, 30% { transform: none; border-color: transparent; box-shadow: none; } 42% { transform: translateY(-4px) rotate(-2deg); border-color: var(--tc); box-shadow: 0 12px 22px -12px var(--tc); } 52% { transform: scale(.9); border-color: var(--tc); } 62%, 88% { transform: translateY(-4px) rotate(-2deg); border-color: var(--tc); box-shadow: 0 12px 22px -12px var(--tc); } 100% { transform: none; border-color: transparent; box-shadow: none; } } /* step 2: three cells show their number one after another */ .bst-how-board { width: 62%; } .bst-how-board .sdk { border-width: 2px; border-radius: 8px; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6); } .bst-how-board .sc { font-size: 7cqw; } .bst-how-board.is-peek .is-filled { animation: bst-reveal 6s ease-out infinite both; } .bst-how-board.is-peek .is-r2 { animation-delay: .9s; } .bst-how-board.is-peek .is-r3 { animation-delay: 1.8s; } @keyframes bst-reveal { 0%, 10% { color: transparent; background: var(--paper); transform: none; } 14% { color: var(--paper-user); background: #ffe066; transform: scale(1.3); } 20%, 70% { color: var(--paper-user); background: #ffe066; transform: none; } 80%, 100% { color: transparent; background: var(--paper); } } /* step 3: the cover lifts off the solution */ .bst-how-board.is-reveal { position: relative; } .bst-how-board.is-reveal .sdk { animation: bst-unblur 5s ease-in-out infinite; } .bst-how-cover { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 8px; animation: bst-cover 5s ease-in-out infinite; } .bst-how-cover span { padding: 7px 12px; border-radius: 10px; background: var(--zap); color: var(--zap-ink); font-family: var(--display); font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; } @keyframes bst-unblur { 0%, 30% { filter: blur(5px) saturate(.6); } 42%, 88% { filter: none; } 100% { filter: blur(5px) saturate(.6); } } @keyframes bst-cover { 0%, 26% { opacity: 1; transform: none; } 32% { transform: scale(.9); opacity: 1; } 40%, 90% { opacity: 0; transform: scale(1.1); } 100% { opacity: 1; transform: none; } } @media (max-width: 1080px) { .bst-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { .bst-how-steps { grid-template-columns: 1fr; max-width: 520px; } .bst-how-pic { aspect-ratio: 16 / 9; } .bst-how-board { width: auto; height: 84%; aspect-ratio: 1; } .bst-how-tiles { width: 64%; } } @media (max-width: 640px) { .bst-page-hero.is-overview .page-hero-inner.has-pic { grid-template-columns: 1fr; gap: 8px; } .bst-page-hero.is-overview .bst-hero-pic { display: block; order: -1; } .bst-page-hero.is-overview .bst-fan { width: min(62%, 236px); margin-bottom: 6px; } .bst-blocks { grid-template-columns: 1fr; } .bst-tabs { gap: 6px; } .bst-tab { flex-direction: column; text-align: center; gap: 8px; padding: 10px 6px 12px; border-radius: 16px; } .bst-tab .bst-mini { width: 40px; } .bst-tab strong { font-size: 1.2rem; } .bst-tab small { font-size: .74rem; } .bst-jump-row { grid-template-columns: auto minmax(0, 1fr) auto; } .bst-jump select { padding-left: 12px; padding-right: 28px; background-position: right 10px center; } .bst-jump .btn { padding: 0 14px; } } @media (prefers-reduced-motion: reduce) { .bst-fan, .bst-fan-body, .bst-fan-body .pk, .bst-fan-say, .bst-how *, .js .bst-levels .bst-panel.is-active { animation: none !important; } .bst-fan-body .pk.is-happy { opacity: 1; } .bst-fan-say { opacity: 0; } .bst-how-board.is-peek .is-filled { background: #ffe066; } } /* ---------- game cards ---------- */ .bst-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 20px; } .bst-game { display: grid; grid-template-columns: 170px 1fr; gap: 24px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; } .bst-game-pic { position: relative; } .bst-game-pic .sdk { border-width: 2px; border-radius: 8px; } .bst-game-monster { position: absolute; right: -18px; bottom: -14px; height: 78px; width: auto; } .bst-game h3 { font-size: 1.8rem; margin: 0 0 .3em; } .bst-game h3 a { color: inherit; text-decoration: none; } .bst-game p { color: var(--text-2); margin: 0 0 14px; } .bst-game-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 !important; } @media (max-width: 520px) { .bst-game { grid-template-columns: 1fr; } .bst-game-pic { max-width: 220px; } } /* ---------- rules ---------- */ /* guide pages */ .steps { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important; } .bst-mascot img { height: clamp(150px, 20vw, 230px); width: auto; display: block; margin: 0 auto; } .page-hero .toc-chips { justify-content: flex-start; margin-top: 28px !important; } /* ---------- Sudoku guide layout ---------- */ .bst-guide-hero .hero-grid { gap: clamp(28px, 5vw, 72px) !important; } .bst-hero-scene { min-width: 0; } .bst-hero-scene .gx { max-width: 360px; } .bst-flip .bst-scene-visual, .bst-tech.is-flip .bst-scene-visual { order: 2; } .bst-tech + .bst-tech { margin-top: clamp(48px, 8vw, 96px); padding-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line); } .bst-tech-head { max-width: 720px; margin-bottom: 24px; } .bst-tech-head h3 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0 0 .25em; } .bst-tech-head p:last-child { color: var(--text-2); margin: 0; } .bst-after { max-width: 760px; color: var(--text-2); margin-top: 32px !important; } .bst-after a { color: var(--accent); } .bst-cta-pic img { width: 100%; max-width: 200px; height: auto; display: block; margin: 0 auto; } .bst-cta h2 { margin-top: 0; } @media (max-width: 860px) { .bst-flip .bst-scene-visual, .bst-tech.is-flip .bst-scene-visual { order: 0; } .bst-cta-pic { display: none; } } .bst-page-hero { padding-inline: var(--gutter); } /* ---------- the iPhone around the game (like the phones on dcft.hohl.dev) ---------- */ .bst-phone { position: relative; width: 100%; max-width: 330px; margin: 0 auto; padding: 9px; box-sizing: border-box; border-radius: 54px; background: #0b0a0a; box-shadow: 0 0 0 1.5px #3b3733, 0 40px 80px -20px rgba(0, 0, 0, .75), 0 0 120px -40px color-mix(in srgb, var(--accent) 55%, transparent); } .bst-phone .gx { max-width: none; aspect-ratio: 402 / 874; border-radius: 45px; box-shadow: none; overflow: hidden; display: flex; flex-direction: column; padding: 0 12px 8px; } .gx-status { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 46px; flex: none; font-size: .8rem; font-weight: 600; color: #fff; padding: 0 10px; } .gx-island { width: 92px; height: 27px; border-radius: 999px; background: #000; } .gx-sys { justify-self: end; display: inline-flex; gap: 5px; align-items: center; } .gx-sys svg { height: 11px; width: auto; fill: currentColor; color: #fff; } .bst-phone .gx-head { flex: none; margin-top: 6px; } .bst-phone .gx-stage { margin-top: auto; } .bst-phone .gx-bottom { flex: none; } .bst-phone .gx-tools { margin-top: 14px; } .bst-phone .gx-pad { margin-top: 10px; } .gx-home { display: block; flex: none; width: 36%; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .85); margin: auto auto 0; } .bst-scene.is-hero .bst-phone { max-width: 320px; } @media (max-width: 420px) { .bst-phone { max-width: 300px; border-radius: 48px; } .bst-phone .gx { border-radius: 40px; } } /* ---------- the app's FX: a finished row or box ---------- */ .gx-fx { position: absolute; inset: 0; z-index: 5; pointer-events: none; } .fx-shard { position: absolute; border-radius: 2px; } .fx-shard.is-star { border-radius: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23000' stroke-width='2.6' stroke-linejoin='round' d='M12 3.6l2.55 5.2 5.7.82-4.13 4.03.98 5.69L12 16.65l-5.1 2.69.98-5.69-4.13-4.03 5.7-.82z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23000' stroke-width='2.6' stroke-linejoin='round' d='M12 3.6l2.55 5.2 5.7.82-4.13 4.03.98 5.69L12 16.65l-5.1 2.69.98-5.69-4.13-4.03 5.7-.82z'/%3E%3C/svg%3E") center / contain no-repeat; } .fx-ring { position: absolute; border-radius: 50%; border: 4px solid #ffd400; box-sizing: border-box; } .fx-sweep { position: absolute; overflow: hidden; border-radius: 4px; } .fx-sweep b { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 212, 0, .85) 45%, rgba(255, 212, 0, .85) 55%, transparent); } .fx-sweep.is-v b { background: linear-gradient(180deg, transparent, rgba(255, 212, 0, .85) 45%, rgba(255, 212, 0, .85) 55%, transparent); } .sdk .sc.is-win { animation: bst-win .55s ease-out both; } @keyframes bst-win { 0% { background: #c9bcff; transform: scale(1); } 40% { background: #c9bcff; transform: scale(1.16); } 100% { transform: scale(1); } } .gx-peek.is-cheer .gx-peek-body { animation: bst-jump .6s cubic-bezier(.3, 1.4, .5, 1); } @keyframes bst-jump { 0% { transform: translateY(0); } 45% { transform: translateY(-30%); } 100% { transform: translateY(-14%); } } /* speech bubble: monster language, a star and an exclamation mark */ .gx-say { position: absolute; z-index: 4; left: 88%; top: -6%; display: inline-flex; align-items: center; gap: 2px; padding: 5px 9px; border-radius: 14px; background: #fff; color: #120f24; font-weight: 900; font-size: .95rem; line-height: 1; opacity: 0; transform: scale(.3); transform-origin: 0 100%; transition: opacity .15s, transform .3s cubic-bezier(.3, 1.6, .5, 1); box-shadow: 0 6px 16px rgba(0, 0, 0, .3); } .gx-say::after { content: ""; position: absolute; left: 6px; bottom: -6px; border: 6px solid transparent; border-top-color: #fff; border-bottom: 0; } .gx-say .st-say { width: 16px; height: 16px; color: #ffc400; } .gx-say.is-on { opacity: 1; transform: none; } .gx-peek.is-right .gx-say { left: auto; right: 88%; transform-origin: 100% 100%; } .gx-peek.is-right .gx-say::after { left: auto; right: 6px; } /* ---------- Stacks: the board (StacksView.swift) ---------- * .stk is the container: every size is in cqw of it (--s = piece width, --h = board height, poles: --x, --top, * --base; pieces: --x, --y = their centre). PHP draws the start, beasties.js (bstStk) moves the pieces. */ .stk { --rod: #4a4380; --ink-dark: #0e0b1a; position: relative; container-type: inline-size; box-sizing: border-box; width: 100%; } .stk-field { position: relative; height: calc(var(--h) * 1cqw); transition: height .45s cubic-bezier(.3, 1.2, .5, 1); } .stk-fx { position: absolute; inset: 0; z-index: 6; pointer-events: none; } .stk-rod { position: absolute; z-index: 0; width: 0; left: calc(var(--x) * 1cqw); top: calc(var(--top) * 1cqw); height: calc((var(--base) - var(--top)) * 1cqw); transition: left .45s cubic-bezier(.3, 1.2, .5, 1), top .4s cubic-bezier(.3, 1.2, .5, 1), height .4s cubic-bezier(.3, 1.2, .5, 1); } .stk-rod.is-extra { --rod: color-mix(in srgb, #ffd400 45%, #4a4380); } .stk-bar { position: absolute; top: 0; left: calc(var(--s) * -.13cqw); width: calc(var(--s) * .26cqw); height: calc(100% + var(--s) * .12cqw); border-radius: 999px; background: var(--rod); box-shadow: inset 0 0 0 2px var(--ink-dark); transition: box-shadow .25s; } .stk-cap { position: absolute; z-index: 1; left: calc(var(--s) * -.25cqw); top: calc(var(--s) * -.05cqw); width: calc(var(--s) * .5cqw); height: max(6px, calc(var(--s) * .16cqw)); border-radius: 999px; background: color-mix(in srgb, var(--rod) 75%, #fff); box-shadow: inset 0 0 0 2px var(--ink-dark); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), opacity .2s; } .stk-rod.is-full .stk-cap { transform: scale(.2); opacity: 0; } .stk-foot { --dot: min(calc(var(--s) * .11cqw), calc(var(--s) / var(--c) * .62cqw)); position: absolute; z-index: 1; left: calc(var(--s) * -.56cqw); top: calc(100% - var(--s) * .01cqw); width: calc(var(--s) * 1.12cqw); height: max(8px, calc(var(--s) * .26cqw)); display: flex; align-items: center; justify-content: center; gap: calc(var(--dot) * .55); border-radius: 999px; background: var(--rod); box-shadow: inset 0 0 0 2px var(--ink-dark); } /* the pole runs into the foot: one piece, no outline between them */ .stk-foot::before { content: ""; position: absolute; left: 50%; top: -1.5px; width: calc(var(--s) * .26cqw - 4px); height: 5px; transform: translateX(-50%); background: var(--rod); } .stk-foot b { position: relative; width: var(--dot); height: var(--dot); border-radius: 50%; background: rgba(14, 11, 26, .55); box-shadow: inset 0 0 0 1px rgba(237, 231, 255, .35); transition: background-color .3s, box-shadow .3s; } .stk-foot b.is-on { background: #ede7ff; box-shadow: 0 0 6px rgba(237, 231, 255, .55); } .stk-rod.is-from .stk-bar, .stk-rod.is-to .stk-bar { box-shadow: inset 0 0 0 2px var(--ink-dark), 0 0 0 3px rgba(255, 212, 0, .75), 0 0 18px rgba(255, 212, 0, .45); } .stk-rod.is-shake { animation: stk-shake .32s ease-out; } .stk-rod.is-grow { animation: stk-grow .5s cubic-bezier(.3, 1.5, .5, 1); transform-origin: 50% 100%; } .stk-rod.is-point .stk-bar { animation: stk-point 1.4s ease-out; } @keyframes stk-grow { 0% { opacity: 0; transform: translateY(16px) scaleY(.5); } 100% { opacity: 1; transform: none; } } @keyframes stk-point { 0%, 100% { box-shadow: inset 0 0 0 2px var(--ink-dark); } 25%, 70% { box-shadow: inset 0 0 0 2px var(--ink-dark), 0 0 0 3px rgba(255, 212, 0, .8), 0 0 22px rgba(255, 212, 0, .5); } } /* a piece: a calm jelly capsule, the top one with its family monster peeking out behind it */ .stk-k { position: absolute; z-index: 1; left: calc(var(--x) * 1cqw); top: calc(var(--y) * 1cqw); width: calc(var(--s) * 1cqw); aspect-ratio: 1 / .42; transform: translate(-50%, -50%); transition: left .34s cubic-bezier(.3, 1.12, .5, 1), top .3s cubic-bezier(.3, 1.3, .5, 1); } .stk-k.is-air { z-index: 4; } .stk-in { position: absolute; inset: 0; transform-origin: 50% 100%; } /* the heads live in a window that ends at the middle of the capsule: a ducking head never shows below its capsule */ .stk-k .hds { position: absolute; left: -20%; right: -20%; top: -400%; bottom: 50%; overflow: hidden; pointer-events: none; } .stk-k .hd { position: absolute; left: calc(100% / 7); width: calc(100% / 1.4); bottom: calc(var(--s) * -.21cqw); height: auto; opacity: 0; transform: translateY(42%); transition: opacity .16s, transform .38s cubic-bezier(.3, 1.5, .5, 1); pointer-events: none; } .stk-k.is-low { --duck: 20.8%; } .stk-k.is-top:not(.is-up):not(.is-crown) .hd.is-idle, .stk-k.is-top.is-up .hd.is-wow, .stk-k.is-top.is-crown:not(.is-up) .hd.is-crown { opacity: 1; transform: translateY(var(--duck, 0%)); } .stk-k .bd { position: absolute; inset: 0; border-radius: 999px; background: linear-gradient(180deg, color-mix(in srgb, var(--fc) 80%, #fff), var(--fc)); box-shadow: inset 0 0 0 max(1.5px, calc(var(--s) * .05cqw)) #0e0b1a; transition: background-color .3s; } .stk-k .bd::before { content: ""; position: absolute; left: 10%; top: 20%; width: 16%; height: 18%; border-radius: 999px; background: rgba(255, 255, 255, .5); } .stk-k .bd::after { content: ""; position: absolute; left: 21%; right: 21%; bottom: 17%; height: max(1.5px, calc(var(--s) * .045cqw)); border-radius: 999px; background: color-mix(in srgb, var(--fc) 82%, #000); } .stk-k .zz { display: none; } .stk-k.is-sleep .bd { background: #2e2850; } .stk-k.is-sleep .bd::before, .stk-k.is-sleep .bd::after { opacity: 0; } .stk-k.is-sleep .zz { display: block; position: absolute; left: 50%; top: 50%; height: 50%; width: auto; aspect-ratio: 1; transform: translate(-50%, -50%); fill: #8f86b8; color: #8f86b8; } .stk-k:not(.is-sleep) .bd { animation: stk-wake .35s ease-out; } .stk-in.is-hop { animation: stk-hop .42s cubic-bezier(.3, .7, .4, 1) both; } .stk-k.is-shake .stk-in { animation: stk-shake .32s ease-out; } @keyframes stk-hop { 0% { transform: none; } 30% { transform: translateY(-52%); } 55% { transform: translateY(4%) scale(1.05, .93); } 100% { transform: none; } } @keyframes stk-shake { 0%, 100% { transform: none; } 18% { transform: translateX(7px); } 38% { transform: translateX(-6px); } 58% { transform: translateX(4px); } 78% { transform: translateX(-2px); } } @keyframes stk-wake { 0% { filter: brightness(1.6); } 100% { filter: none; } } .stk-k.f0 { --fc: #3fc1a5; } .stk-k.f1 { --fc: #ff7ab6; } .stk-k.f2 { --fc: #ff8a3d; } .stk-k.f3 { --fc: #4db8ff; } .stk-k.f4 { --fc: #7ed957; } .stk-k.f5 { --fc: #8e5cff; } .stk-k.f6 { --fc: #e84855; } .stk-k.f7 { --fc: #ffc83d; } .stk-k.f8 { --fc: #c7a6ff; } .stk-k.f9 { --fc: #2fb7c9; } /* before beasties.js takes over, the start is a still picture: no transitions */ .stk:not(.is-live) * { transition: none !important; animation: none !important; } @media (prefers-reduced-motion: reduce) { .stk * { transition: none !important; animation: none !important; } } /* the well the board sits in, like the app (dark, also in light mode) */ .bst-board-card.is-stacks { padding: 12px; } .bst-board-card.is-stacks .stk, .bst-tier-board .stk, .bst-fan-well .stk, .bst-how-stk .stk, .bst-game-well .stk, .bst-stk-stage .stk, .gx-well .stk { background: #1a1533; border-radius: 14px; box-shadow: inset 0 0 0 2.5px #0e0b1a; padding: 12px 6px 10px; } .bst-board-card.is-stacks .stk { padding: 22px 10px 16px; border-radius: 16px; } /* ---------- Stacks: the game screen ---------- */ .gx.is-stacks .gx-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 4px; } .gx-icons { display: inline-flex; gap: 8px; color: #ede7ff; } .gx-icons svg { width: 20px; height: 20px; } .gx-title { display: grid; justify-items: center; line-height: 1.05; } .gx-title small { font-size: .66rem; font-weight: 600; color: #8f86b8; } .gx-title b { font-family: var(--display); font-size: 1.35rem; font-weight: 700; color: #ede7ff; letter-spacing: .02em; text-transform: uppercase; } .bst-phone .gx-stage.is-stacks { flex: 1; display: flex; flex-direction: column; margin-top: 10px; min-height: 0; } .gx-well { flex: 1; display: flex; padding: 9px; border-radius: 18px; background: linear-gradient(180deg, #2f294f, #241e45); box-shadow: inset 0 0 0 3px #0e0b1a, 0 7px 0 #0e0b1a; } .gx-well .stk { flex: 1; display: flex; flex-direction: column; justify-content: center; } .gx-tools.is-3 { grid-template-columns: repeat(3, 1fr); } .bst-phone .gx.is-stacks .gx-bottom { position: relative; margin-bottom: 18px; } .gx-tool-icons { display: grid; } .gx-tool-icons svg { grid-area: 1 / 1; width: 24px; height: 24px; padding: 5px 12px; border-radius: 999px; transition: background-color .2s, color .2s, opacity .2s; } .gx-tool-icons svg + svg { opacity: 0; } .gx-tool.is-longer .gx-tool-icons svg:first-child { opacity: 0; } .gx-tool.is-longer .gx-tool-icons svg + svg { opacity: 1; } .gx-tool.is-active .gx-tool-icons svg { background: #ffd400; color: #120f24; } .gx-tool.is-press .gx-tool-icons { animation: bst-press .3s ease-out; } .gx.is-offer .gx-tools { opacity: 0; transition: opacity .2s; } .gx-offer { position: absolute; z-index: 5; left: 14px; right: 14px; bottom: 34px; display: grid; justify-items: center; gap: 6px; padding: 12px 12px 12px; border-radius: 18px; background: #241e45; box-shadow: inset 0 0 0 2.5px #0e0b1a, 0 6px 0 #0e0b1a; text-align: center; opacity: 0; transform: scale(.85); pointer-events: none; transition: opacity .2s, transform .3s cubic-bezier(.3, 1.5, .5, 1); } .gx-offer.is-on { opacity: 1; transform: none; } .gx-offer strong { font-family: var(--display); font-size: 1.05rem; text-transform: uppercase; letter-spacing: .03em; color: #ede7ff; } .gx-offer > span { font-size: .66rem; line-height: 1.35; color: #8f86b8; } .gx-offer-cap { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: #ede7ff; } .gx-offer-cap b { font-weight: 800; } .gx-offer-stars { display: inline-flex; gap: 2px; color: #ffd400; } .gx-offer-stars .st { width: 13px; height: 13px; } .gx-offer-cap i { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #8f86b8; color: #241e45; font: 800 .6rem/1 var(--display, sans-serif); font-style: normal; } .gx-offer-btns { display: flex; gap: 8px; margin-top: 2px; } .gx-offer-btns i, .gx-offer-btns b { font-style: normal; display: inline-flex; align-items: center; gap: 3px; padding: 6px 12px; border-radius: 11px; font-size: .74rem; font-weight: 800; box-shadow: inset 0 0 0 2px #0e0b1a, 0 3px 0 #0e0b1a; } .gx-offer-btns i { background: #2f294f; color: #ede7ff; } .gx-offer-btns b { background: #ffd400; color: #120f24; transition: transform .15s; } .gx-offer-btns b .st-price { width: 10px; height: 10px; color: #120f24; } .gx-offer.is-buy b { transform: scale(.88); } /* ---------- Stacks on the site ---------- */ .bst-scene:not(:has(.bst-caps)) { display: block; } .bst-mini.is-stacks { background: #1a1533; } .bst-tier.is-stacks .bst-tier-board { margin-bottom: 4px; } .bst-fan-card.is-stacks { display: flex; } .bst-fan-well { flex: 1; display: flex; min-width: 0; } .bst-fan-well .stk { flex: 1; display: flex; flex-direction: column; justify-content: center; } .bst-how-stk { width: 84%; } .bst-how-pic .bst-scene { width: 100%; display: grid; place-items: center; } .bst-game-well { width: 100%; } .bst-game.is-stacks .bst-game-monster { display: none; } /* one level: the solution player */ .bst-level.is-stacks { max-width: 760px; } /* move target + star limits above the solution (like Laundry Day's .ldy-facts) */ .stk-facts { list-style: none; margin: 0 auto 28px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 560px; } .stk-facts li { display: grid; gap: 2px; justify-items: center; text-align: center; padding: 12px 8px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); } .stk-facts strong { font-family: var(--display); font-size: 1.7rem; line-height: 1; color: var(--text); } .stk-facts span { font-size: .8rem; color: var(--muted); line-height: 1.3; } .stk-facts .is-stars strong { display: inline-flex; gap: 2px; color: #ffd400; } .stk-facts .st { width: 22px; height: 22px; } @media (max-width: 560px) { .stk-facts { gap: 6px; } .stk-facts strong { font-size: 1.4rem; } .stk-facts .st { width: 17px; height: 17px; } } .bst-player { margin: 0; } .bst-player figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; } .bst-player figcaption strong { font-family: var(--display); font-size: 1.4rem; text-transform: uppercase; letter-spacing: .03em; } .bst-player figcaption span { color: var(--muted); font-size: .9rem; } .bst-stk-stage { position: relative; padding: 10px; border-radius: 22px; background: linear-gradient(180deg, #2f294f, #241e45); box-shadow: inset 0 0 0 3px #0e0b1a, 0 8px 0 #0e0b1a, 0 30px 60px -30px rgba(0, 0, 0, .7); } .bst-stk-stage .stk { padding: 18px 8px 14px; } .bst-player-bar { display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: 8px; margin-top: 22px; } .bst-play-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; transition: background-color .15s, transform .12s, opacity .2s, border-color .15s; } .bst-play-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .bst-play-btn[data-act="play"] svg, .bst-play-btn[data-act="start"] svg { fill: currentColor; stroke: none; } .bst-play-btn[data-act="start"] svg path:first-child { stroke: currentColor; stroke-width: 2.4; } .bst-play-btn.is-icon { width: 48px; padding: 0; } .bst-play-btn.is-icon span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .bst-play-btn.is-main { background: var(--zap); color: var(--zap-ink); border-color: transparent; padding: 0 22px; } .bst-play-btn.is-main svg { order: 2; } .bst-play-btn:hover:not(:disabled) { border-color: var(--line-strong); transform: translateY(-1px); } .bst-play-btn:active:not(:disabled) { transform: scale(.95); } .bst-play-btn:disabled { opacity: .38; cursor: default; } .bst-play-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .bst-play-btn .i-pause { display: none; } .is-playing .bst-play-btn .i-pause { display: block; } .is-playing .bst-play-btn .i-play { display: none; } .is-playing .bst-play-btn[data-act="play"] { background: var(--surface-2); border-color: var(--zap); } .bst-player-count { margin: 0; text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); line-height: 1.2; } .bst-player-count strong { font-family: var(--display); font-size: 1.6rem; color: var(--text); } .bst-player-count small { display: block; font-size: .85rem; color: var(--text-2); } .bst-level.is-done .bst-player-count small { color: var(--zap); font-weight: 700; } .bst-move-list { margin-top: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 0 16px; } .bst-move-list summary { cursor: pointer; padding: 14px 0; font-weight: 700; } .bst-move-list p { color: var(--muted); font-size: .9rem; margin: 0 0 10px; } .bst-move-list ol { margin: 0 0 16px; padding-left: 1.6em; columns: 3 12em; column-gap: 24px; color: var(--text-2); } .bst-move-list li { padding: 2px 6px; border-radius: 6px; break-inside: avoid; font-variant-numeric: tabular-nums; } .bst-move-list li.is-on { background: color-mix(in srgb, var(--zap) 22%, transparent); color: var(--text); } @media (max-width: 560px) { .bst-player-bar { grid-template-columns: auto auto 1fr auto; } .bst-player-bar [data-act="play"] { grid-column: 4; grid-row: 1; } .bst-player-bar .is-main { grid-column: 1 / -1; grid-row: 2; } .bst-player-count { grid-column: 3; grid-row: 1; } .bst-stk-stage { padding: 7px; border-radius: 18px; } .bst-stk-stage .stk { padding: 14px 4px 10px; } } @media (max-width: 560px) { .bst-player-bar [data-act="start"] { grid-column: 1; grid-row: 1; } .bst-player-bar [data-act="back"] { grid-column: 2; grid-row: 1; } } /* the level page: pieces about as big as in the app, not wider */ .bst-stk-stage { max-width: calc(var(--per, 5) * 88px + 40px); margin-inline: auto; } .bst-player figcaption, .bst-player-bar { max-width: max(520px, calc(var(--per, 5) * 88px + 40px)); margin-inline: auto; } /* ---------- start page: offline and no ads ---------- */ .bst-wordmark { margin: 0; } .bst-wordmark .bst-logo { display: block; margin: 0 auto; } .bst-wordmark .bst-hero-line { display: block; } .bst-usp-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; padding: 0; margin: 18px auto 26px; } .bst-usp-pills li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--text); font-weight: 600; font-size: .95rem; } .bst-usp-pills svg { width: 18px; height: 18px; flex: none; color: var(--accent); } .bst-usp-pills svg:not(.bst-ico) { fill: currentColor; } .gx-air { display: none; } .bst-usp-stage .gx-sys { display: none; } .bst-usp-stage .gx-air { display: inline-flex; gap: 5px; align-items: center; justify-self: end; } .gx-air svg { height: 11px; width: auto; fill: currentColor; color: #fff; } .gx-air svg:first-child { height: 13px; } .bst-usp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; } .bst-usp-stage { position: relative; max-width: 420px; margin: 0 auto; padding: 24px 0 8px; } .bst-usp-stage .bst-scene { margin: 0; } .bst-usp-stage .bst-caps { display: none; } .bst-usp-chip { position: absolute; z-index: 3; left: -6px; top: 0; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: #ffd400; color: #0e0b1a; border: 2.5px solid #0e0b1a; box-shadow: 3px 4px 0 #0e0b1a; font-weight: 800; font-size: .85rem; transform: rotate(-5deg); } .bst-usp-chip svg { height: 15px; width: auto; fill: currentColor; } .bst-usp-chip svg + svg { display: none; } .bst-ads { position: absolute; inset: 0; pointer-events: none; z-index: 4; } .bst-ad { position: absolute; right: -34px; width: 168px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; color: #1e1a33; border: 2.5px solid #0e0b1a; box-shadow: 3px 5px 0 #0e0b1a; font-size: .78rem; font-weight: 600; line-height: 1.25; opacity: 0; animation: bst-ad 7.5s ease-in-out infinite; } .bst-ad b { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #0e0b1a; color: #fff; font-family: var(--display); font-size: 1rem; letter-spacing: .02em; } .bst-ad-x { position: absolute; left: -8px; right: -8px; top: 50%; height: 6px; margin-top: -3px; border-radius: 6px; background: #ff4d6d; box-shadow: 0 0 0 2px #0e0b1a; transform: rotate(-14deg); transform-origin: center; clip-path: inset(-4px 100% -4px -4px); animation: bst-ad-x 7.5s ease-in-out infinite; } .bst-ad.is-1 { top: 16%; } .bst-ad.is-2 { top: 44%; animation-delay: 2.5s; } .bst-ad.is-2 .bst-ad-x { animation-delay: 2.5s; } .bst-ad.is-3 { top: 70%; animation-delay: 5s; } .bst-ad.is-3 .bst-ad-x { animation-delay: 5s; } @keyframes bst-ad { 0% { opacity: 0; transform: translate(150px, -24px) rotate(10deg); } 10% { opacity: 1; transform: translate(60px, -6px) rotate(5deg); } 20%, 30% { opacity: 1; transform: translate(0, 0) rotate(-2deg); } 22% { transform: translate(-6px, 0) rotate(-3deg); } 44% { opacity: 1; transform: translate(14px, 30px) rotate(-12deg); } 56%, 100% { opacity: 0; transform: translate(40px, 150px) rotate(-28deg); } } @keyframes bst-ad-x { 0%, 19% { clip-path: inset(-4px 100% -4px -4px); } 26%, 100% { clip-path: inset(-4px -4px -4px -4px); } } @media (prefers-reduced-motion: reduce) { .bst-ad { animation: none; opacity: 1; } .bst-ad.is-2, .bst-ad.is-3 { display: none; } .bst-ad-x { animation: none; clip-path: none; } } .bst-points { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 32px; list-style: none; padding: 0; margin: 12px 0 0; } .bst-points li { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto 1fr; gap: 0 14px; align-items: start; align-content: start; } .bst-points .bst-ico { grid-row: span 2; width: 40px; height: 40px; padding: 8px; box-sizing: border-box; border-radius: 12px; background: var(--surface-2); color: var(--accent); } .bst-points h3 { font-size: 1.1rem; margin: 2px 0 4px; } .bst-points p { margin: 0; color: var(--text-2); font-size: .98rem; line-height: 1.5; } @media (max-width: 900px) { .bst-usp { grid-template-columns: 1fr; } .bst-usp-text { order: -1; } .bst-usp-stage { max-width: 340px; } .bst-ad { right: -12px; width: 150px; font-size: .72rem; } } @media (max-width: 900px) { .bst-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .bst-points { grid-template-columns: 1fr; } } /* ---------- header: Games panel + three anchors (inc/apps.php 'drop' => bst_nav_games) ---------- */ .main-nav a, .nav-drop > summary { white-space: nowrap; } .nav-drop { position: relative; } .nav-drop > summary { list-style: none; display: flex; align-items: center; gap: 5px; padding: 8px 12px; border-radius: 10px; color: var(--muted); font-weight: 500; font-size: .95rem; cursor: pointer; user-select: none; } .nav-drop > summary::-webkit-details-marker { display: none; } .nav-drop > summary svg { width: 13px; height: 13px; transition: transform .2s; } .nav-drop[open] > summary svg { transform: rotate(180deg); } .nav-drop > summary:hover, .nav-drop[open] > summary, .nav-drop > summary.is-current { color: var(--text); background: var(--surface); } .nav-drop-panel { position: absolute; left: 50%; top: calc(100% + 12px); transform: translateX(-50%); width: min(660px, calc(100vw - 32px)); box-sizing: border-box; padding: 12px; border-radius: 22px; background: var(--surface); border: 2.5px solid #0e0b1a; box-shadow: 0 6px 0 #0e0b1a, 0 24px 60px rgba(0, 0, 0, .35); z-index: 60; } .site-header .nd-games { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; } .site-header .nd-games a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 13px; color: var(--text); text-decoration: none; font-size: 1rem; white-space: normal; } .site-header .nd-games a:hover, .site-header .nd-games a[aria-current] { background: var(--surface-2); } .nd-games .bst-ico { flex: none; width: 38px; height: 38px; padding: 8px; box-sizing: border-box; border-radius: 11px; background: var(--surface-2); color: var(--accent); transition: transform .15s, background .15s; } .nd-games a:hover .bst-ico, .nd-games a[aria-current] .bst-ico { background: var(--zap); color: var(--zap-ink); transform: rotate(-6deg); } .nd-games span { min-width: 0; line-height: 1.2; } .nd-games b { display: block; font-weight: 700; font-size: .98rem; } .nd-games small { display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; } .nd-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 8px 4px 0; padding: 12px 8px 4px; border-top: 1px solid var(--line); } .site-header .nd-all { padding: 0; color: var(--accent); font-weight: 700; font-size: .95rem; text-decoration: none; background: none; } .site-header .nd-all:hover { text-decoration: underline; background: none; } .nd-soon { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .85rem; } .nd-soon .bst-ico { width: 18px; height: 18px; } .menu-head { display: none; } @media (max-width: 900px) { /* burger: a full-width sheet with the games as a grid, then the anchors */ .menu-panel { position: fixed; left: 12px; right: 12px; top: 72px; min-width: 0; max-height: calc(100dvh - 88px); overflow: auto; padding: 10px; border-radius: 22px; border: 2.5px solid #0e0b1a; box-shadow: 0 6px 0 #0e0b1a, 0 24px 60px rgba(0, 0, 0, .35); } .menu-panel > ul > li + li { border-top: 1px solid var(--line); } .menu-panel > ul > li.has-drop { padding-bottom: 6px; } .menu-head { display: block; padding: 8px 10px 6px; font-family: var(--display); font-weight: 700; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } .site-header .menu-panel .nd-games { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-header .menu-panel .nd-games a { padding: 7px 8px; gap: 9px; } .menu-panel .nd-games .bst-ico { width: 34px; height: 34px; padding: 7px; } .menu-panel .nd-games small { display: none; } .menu-panel .nd-foot { margin-top: 6px; padding: 10px 8px 2px; } .site-header .menu-panel .nd-all { padding: 0; } .menu-panel > ul > li > a { font-weight: 600; } } /* ---------- start page ---------- */ .bst-home { padding-bottom: 0; } .bst-hero2 { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 72px); align-items: center; } .bst-home h1 { font-size: clamp(2.7rem, 5.4vw, 4.6rem); line-height: .98; max-width: 13ch; hyphens: manual; margin: 0 0 .3em; } .bst-home .lead { max-width: 520px; } .bst-home .bst-usp-pills { justify-content: flex-start; margin: 22px 0 6px; } .bst-home .get-app { margin-top: 22px; } .bst-home .bst-usp-stage { padding-top: 30px; } .bst-home .bst-parade { margin-top: clamp(20px, 3vw, 36px); margin-bottom: -12px; } .bst-more-link { margin: 28px 0 0; font-weight: 700; text-align: center; } .bst-more-link a { color: var(--accent); text-decoration: none; } .bst-more-link a:hover { text-decoration: underline; } @media (max-width: 900px) { .bst-hero2 { grid-template-columns: 1fr; } .bst-hero-text { text-align: center; } .bst-home h1 { margin-inline: auto; } .bst-home .lead { margin-inline: auto; } .bst-home .bst-usp-pills { justify-content: center; } .bst-home .get-app { align-items: center; } .bst-home .get-app-note { margin-inline: auto; } .bst-home .bst-usp-stage { max-width: 320px; } } @media (max-width: 560px) { .bst-home .bst-usp-pills { gap: 8px; } .bst-home .bst-usp-pills li { padding: 7px 11px; font-size: .88rem; } .bst-home .bst-parade img:is(.bst-parade-1, .bst-parade-5) { display: none; } } /* game tiles (start page) and the "in the works" card, like the app's home grid */ .bst-tiles { display: grid; gap: 18px; } .bst-tile { display: flex; flex-direction: column; padding: 10px 10px 14px; border-radius: 20px; background: var(--surface); border: 2.5px solid #0e0b1a; box-shadow: 0 5px 0 #0e0b1a; color: var(--text); text-decoration: none; transition: transform .15s ease; } .bst-tile:nth-child(odd) { rotate: -1deg; } .bst-tile:nth-child(even) { rotate: 1deg; } a.bst-tile:hover, a.bst-tile:focus-visible { transform: translateY(-4px); rotate: 0deg; } .bst-tile-pic { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; margin-bottom: 10px; padding: 8px; border-radius: 14px; background: var(--bg-deep); overflow: hidden; } .bst-tile-pic > * { width: 100%; max-height: 100%; } .bst-tile-pic .sdk { border-width: 2px; border-radius: 8px; } .bst-tile-name { padding: 0 4px; font-family: var(--display); font-weight: 700; font-size: 1.3rem; line-height: 1.1; } .bst-tile-tag { padding: 0 4px; color: var(--muted); font-size: .86rem; line-height: 1.3; margin-top: 3px; } .bst-tile.is-soon { cursor: pointer; background: color-mix(in srgb, var(--surface) 60%, transparent); border-style: dashed; box-shadow: none; } .bst-tile.is-soon > * { filter: saturate(0); opacity: .6; } /* Eleven games + the building-site tile = 12: 6 + 6 on desktop, 4 × 3, 3 × 4, 2 × 6 on phones (all rows full). */ .bst-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } @media (max-width: 1100px) { .bst-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 800px) { .bst-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .bst-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .bst-tile-name { font-size: 1.1rem; } .bst-tile-tag { font-size: .8rem; } } /* the building site (app: HomeView MiniWorks) */ .bst-works { position: relative; display: block; width: 100%; max-width: 180px; aspect-ratio: 96 / 88; margin: auto; transform-origin: 50% 100%; } .bst-works.is-poked { animation: bst-wobble .5s ease-out; } .bst-works .bw-card { position: absolute; top: 10%; width: 35%; height: 50%; display: grid; place-items: center; border-radius: 10px; background: #1a1533; border: 2.5px solid #0e0b1a; font-family: var(--display); font-style: normal; font-weight: 800; font-size: clamp(1.4rem, 3vw, 2rem); } .bst-works .bw-card.is-1 { left: 5%; color: #ff7ab6; rotate: -10deg; } .bst-works .bw-card.is-2 { right: 5%; color: #4db8ff; rotate: 9deg; } .bst-works .bw-gnatz { position: absolute; left: 50%; top: 22%; width: 44%; height: auto; translate: -50% 0; } .bst-works .bw-wrench { position: absolute; right: 12%; top: 46%; width: 20%; height: auto; fill: #f1ecff; stroke: #0e0b1a; stroke-width: 1.6; stroke-linejoin: round; rotate: -30deg; transform-origin: 10% 90%; } .bst-works.is-poked .bw-wrench { animation: bst-wobble .5s ease-out reverse; } .bst-works .bw-bar { position: absolute; left: 2%; right: 2%; top: 70%; height: 15%; border-radius: 4px; border: 3px solid #0e0b1a; background: repeating-linear-gradient(-55deg, #ffd400 0 9px, #0e0b1a 9px 18px); rotate: -3deg; } .bst-works .bw-post { position: absolute; top: 80%; width: 6%; height: 16%; border-radius: 6px; background: #f1ecff; border: 1.5px solid #0e0b1a; } .bst-works .bw-post.is-l { left: 11%; } .bst-works .bw-post.is-r { right: 11%; } @keyframes bst-wobble { 0% { transform: rotate(0); } 16% { transform: rotate(-7deg); } 36% { transform: rotate(6deg); } 56% { transform: rotate(-3.5deg); } 76% { transform: rotate(1.5deg); } 100% { transform: rotate(0); } } .bst-game.is-soon { cursor: pointer; border-style: dashed; } .bst-game.is-soon .bst-game-pic { filter: saturate(0); opacity: .65; } .bst-soon-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1.5px dashed var(--line-strong); color: var(--muted); font-weight: 600; font-size: .9rem; } .bst-soon-chip .bst-ico { width: 17px; height: 17px; } @media (prefers-reduced-motion: reduce) { .bst-works.is-poked, .bst-works.is-poked .bw-wrench { animation: none; } .bst-tile { transition: none; } } /* "Free & Pro": the levels of one game as bars */ .bst-price { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: center; } .bst-price-text h2 { margin-top: 0; } .bst-price-text p:not(.eyebrow) { color: var(--text-2); } .bst-usp-pills.is-left { justify-content: flex-start; margin: 20px 0 0; } .bst-pc { position: relative; padding: clamp(18px, 3vw, 28px); border-radius: 24px; background: var(--bg); border: 2.5px solid #0e0b1a; box-shadow: 0 6px 0 #0e0b1a; } .bst-pc-head { margin: 0 0 14px; font-family: var(--display); font-weight: 700; font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .bst-pc-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .bst-pc-row { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; } .bst-pc-name { font-weight: 700; font-size: .95rem; white-space: nowrap; } .bst-pc-bar { display: flex; height: 38px; border-radius: 12px; overflow: hidden; border: 2px solid #0e0b1a; background: var(--surface); font-size: .8rem; font-weight: 700; } .bst-pc-bar > span { display: flex; align-items: center; gap: 6px; padding: 0 10px; white-space: nowrap; overflow: hidden; } .bst-pc-free { flex: 0 0 auto; min-width: 15%; color: #0e0b1a; background: var(--t); transform-origin: left; } .bst-pc-more { flex: 1 1 auto; color: var(--text-2); background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--t) 22%, transparent) 0 8px, transparent 8px 16px); border-left: 2px dashed #0e0b1a; } .bst-pc-pro { flex: 1; color: #fff; background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--t) 85%, #0e0b1a) 0 10px, var(--t) 10px 20px); } .bst-pc-pro .bst-ico { width: 15px; height: 15px; } .bst-pc-row.is-locker { --t: var(--t-locker); } .bst-pc-row.is-normal { --t: var(--t-normal); } .bst-pc-row.is-fies { --t: var(--t-fies); } .bst-pc-row.is-teuflisch { --t: var(--t-teuflisch); } .bst-pc-stats { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .bst-pc-stats li { padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 2px solid #0e0b1a; box-shadow: 0 3px 0 #0e0b1a; } .bst-pc-stats li:nth-child(1) { rotate: -2deg; } .bst-pc-stats li:nth-child(3) { rotate: 2deg; background: var(--zap); color: var(--zap-ink); } .bst-pc-stats b { display: block; font-family: var(--display); font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1; } .bst-pc-stats span { display: block; font-size: .8rem; line-height: 1.25; margin-top: 4px; color: inherit; opacity: .85; } .bst-pc-gnatz { position: absolute; right: -14px; top: -58px; width: 92px; height: auto; rotate: 8deg; } /* the bars fill when the chart scrolls into view (beasties.js sets is-in) */ .js .bst-pc[data-bst-in] .bst-pc-free, .js .bst-pc[data-bst-in] .bst-pc-pro { transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms); } .js .bst-pc.is-in .bst-pc-free, .js .bst-pc.is-in .bst-pc-pro { transform: none; } @media (prefers-reduced-motion: reduce) { .js .bst-pc[data-bst-in] .bst-pc-free, .js .bst-pc[data-bst-in] .bst-pc-pro { transform: none; transition: none; } } @media (max-width: 900px) { .bst-price { grid-template-columns: 1fr; } } @media (max-width: 480px) { .bst-pc-row { grid-template-columns: 1fr; gap: 4px; } .bst-pc-bar { font-size: .74rem; } .bst-pc-bar > span { padding: 0 8px; } .bst-pc-stats { grid-template-columns: 1fr; } .bst-pc-stats li { rotate: 0deg !important; display: flex; align-items: baseline; gap: 10px; } .bst-pc-gnatz { width: 70px; top: -44px; right: -6px; } } /* start page "Why Beasties": the points as stickers, sleepy Gnatz for the cozy pace */ #offline .section-inner { position: relative; } .bst-sleepy { position: absolute; right: 0; top: -10px; width: clamp(110px, 14vw, 170px); pointer-events: none; } .bst-sleepy img { display: block; width: 100%; height: auto; } .bst-sleepy span { position: absolute; font-family: var(--display); font-weight: 800; color: var(--accent); opacity: 0; animation: bst-z 3.6s ease-in-out infinite; } .bst-sleepy span:first-of-type { right: 8%; top: 4%; font-size: 1.4rem; } .bst-sleepy span:last-of-type { right: -6%; top: -14%; font-size: 1.9rem; animation-delay: 1.2s; } @keyframes bst-z { 0% { opacity: 0; transform: translate(0, 10px) rotate(-8deg); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -18px) rotate(8deg); } } @media (prefers-reduced-motion: reduce) { .bst-sleepy span { animation: none; opacity: .8; } } @media (max-width: 1060px) { .bst-sleepy { position: relative; right: auto; top: auto; width: 120px; margin: -8px auto 18px; } } #offline .bst-points { gap: 18px; } #offline .bst-points li { padding: 18px 18px 20px; border-radius: 20px; background: var(--surface); border: 2.5px solid #0e0b1a; box-shadow: 0 5px 0 #0e0b1a; grid-template-columns: 48px 1fr; } #offline .bst-points li:nth-child(3n+1) { rotate: -.6deg; } #offline .bst-points li:nth-child(3n) { rotate: .6deg; } #offline .bst-points .bst-ico { width: 48px; height: 48px; padding: 10px; border-radius: 14px; border: 2px solid #0e0b1a; } #offline .bst-points li:nth-child(odd) .bst-ico { background: var(--zap); color: var(--zap-ink); } #offline .bst-points h3 { font-size: 1.2rem; margin-top: 4px; } @media (max-width: 640px) { #offline .bst-points li { rotate: 0deg !important; } } @media (max-width: 900px) { .menu-panel { top: 84px; max-height: calc(100dvh - 100px); } } #offline, #games, #pricing { overflow-x: clip; } .bst-nw { white-space: nowrap; } /* ---------- every level (2026-10-16): four difficulties, ranges of 50, hub pages, the Pro line ---------- * Overview: a card per range of 50 (bst-range) per difficulty. Hub page (…/chill/, …/chill/page/2/): the * difficulty switch as links, all ranges as chips, then 50 level cards; Pro levels carry a small lock. */ .bst-tabs.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1000px; } .bst-tab[aria-current="page"] { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, var(--surface)); box-shadow: 0 16px 34px -20px var(--tc); } .bst-tab[aria-current="page"] small { color: var(--text-2); } .bst-panel-head .bst-panel-free { margin-top: .5em; color: var(--muted); font-size: .95rem; } .bst-ranges-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 10px; } .bst-ranges-grid li { min-width: 0; } .bst-range { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line); color: var(--text); text-decoration: none; transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), border-color .15s, box-shadow .2s; } .bst-range .bst-mini { width: 44px; flex: none; border-radius: 7px; } .bst-range-text { display: grid; gap: 3px; min-width: 0; } .bst-range strong { font-weight: 700; font-size: .98rem; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; } .bst-range small { display: inline-flex; align-items: center; gap: 4px; color: var(--tc); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .bst-range.is-pro small { color: var(--muted); } .bst-range small .bst-ico { width: 13px; height: 13px; } a.bst-range:hover { border-color: var(--tc); transform: translateY(-2px); box-shadow: 0 12px 22px -14px var(--tc); } a.bst-range:focus-visible { outline: 2px solid var(--tc); outline-offset: 2px; } html:not(.js) .bst-range .bst-mini { display: none; } .bst-hub .bst-tabs { margin-bottom: 18px; } .bst-ranges { margin: 0 0 clamp(22px, 3.4vw, 34px); } .bst-ranges ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .bst-ranges a { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); text-decoration: none; font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; } .bst-ranges a.is-pro { color: var(--muted); } .bst-ranges a:hover { border-color: var(--tc); color: var(--text); } .bst-ranges a[aria-current="page"] { background: var(--tc); border-color: var(--tc); color: #120f24; } .bst-hub-levels h2 { font-family: var(--display); font-size: clamp(1.4rem, 3vw, 1.9rem); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 14px; } .bst-hub-levels h2::before { content: ""; display: inline-block; width: .42em; height: .42em; margin-right: .35em; border-radius: 3px; background: var(--tc); vertical-align: .14em; transform: rotate(45deg); } .bst-hub-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; } .bst-hub-grid li { min-width: 0; } .bst-lv { position: relative; } .bst-lv-pro { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-strong); color: var(--muted); } .bst-lv-pro .bst-ico { width: 12px; height: 12px; } .bst-pro { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; max-width: 640px; margin: 14px 0 0; color: var(--text-2); font-size: .95rem; line-height: 1.5; } .bst-pro-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--zap) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--zap) 45%, var(--line)); color: var(--text); font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; } .bst-pro-tag .bst-ico { width: 14px; height: 14px; color: var(--zap); } .bst-pro-text a { color: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; } .bst-pro-text a:hover { text-decoration: underline; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .bst-pro-tag .bst-ico { color: #8a6d00; } } :root[data-theme="light"] .bst-pro-tag .bst-ico { color: #8a6d00; } @media (max-width: 1000px) { .bst-hub-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } } @media (max-width: 760px) { .bst-hub-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (max-width: 640px) { .bst-tabs.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bst-ranges-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .bst-range { gap: 8px; padding: 8px 9px; } .bst-range .bst-mini { width: 36px; } .bst-range strong { font-size: .9rem; } .bst-ranges a { padding: 5px 8px; font-size: .8rem; } } @media (prefers-reduced-motion: reduce) { .bst-range { transition: none; } } @media (max-width: 900px) { .bst-hero-text .bst-pro { justify-content: center; margin-inline: auto; } } @media (max-width: 400px) { .bst-range strong { font-size: .84rem; } .bst-range .bst-mini { width: 30px; } .bst-range { gap: 7px; padding: 8px 7px; } } /* ---------- 2026-10-16 r5: app home pictures, star packs in the pricing chart ---------- */ /* game cards: the app's own home card pictures (assets/img/beasties/home-.webp, 3x) */ /* the app draws these on its dark card panel, so they keep it in light mode too */ .bst-tile-pic:has(.bst-home-pic), .bst-game-pic.is-app { background: linear-gradient(#2a2350, #1d1837); } .bst-tile-pic > img.bst-home-pic { width: auto; height: auto; max-width: 86%; max-height: 86%; object-fit: contain; } .bst-game-pic.is-app { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; padding: 12px; border-radius: 18px; } .bst-game-pic.is-app img { width: auto; height: auto; max-width: 92%; max-height: 92%; object-fit: contain; } .bst-works.is-app { display: flex; align-items: center; justify-content: center; aspect-ratio: auto; } .bst-works.is-app img { width: 100%; height: auto; } .bst-tile-pic > .bst-works.is-app { width: 86%; } .bst-game-pic .bst-works.is-app { max-width: 150px; } @media (max-width: 520px) { .bst-game-pic.is-app { max-width: 180px; } } /* pricing chart: the stars part of each bar = 17 packs of 50, the legend and the star pack sticker */ .bst-pc-free { flex: 0 0 15%; } .bst-pc-more { gap: 5px; color: var(--text); background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 17 - 1.5px), color-mix(in srgb, #0e0b1a 55%, transparent) calc(100% / 17 - 1.5px) calc(100% / 17)), color-mix(in srgb, var(--t) 24%, var(--surface)); } .bst-pc-more > span { overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 0 var(--surface); } .bst-pc .st { flex: none; width: 15px; height: 15px; color: var(--zap); filter: drop-shadow(0 1px 0 #0e0b1a); } .bst-pc-keys { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8rem; color: var(--text-2); } .bst-pc-keys li { display: inline-flex; align-items: center; gap: 7px; } .bst-pc-key { width: 22px; height: 12px; border-radius: 4px; border: 1.5px solid #0e0b1a; } .bst-pc-key.is-free { background: var(--t-normal); } .bst-pc-key.is-more { background: repeating-linear-gradient(90deg, transparent 0 5px, #0e0b1a 5px 6.5px), color-mix(in srgb, var(--t-normal) 24%, var(--surface)); } .bst-pc-key.is-pro { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--t-teuflisch) 85%, #0e0b1a) 0 4px, var(--t-teuflisch) 4px 8px); } .bst-pc-pack { display: flex; align-items: center; gap: 14px; margin: 18px 0 0; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 2px dashed color-mix(in srgb, var(--zap) 60%, var(--line)); } .bst-pc-pack-tag { flex: none; display: grid; place-items: center; width: 62px; height: 62px; margin: 0; border-radius: 14px; background: var(--zap); color: var(--zap-ink); border: 2.5px solid #0e0b1a; box-shadow: 0 3px 0 #0e0b1a; rotate: -6deg; line-height: 1; text-align: center; } .bst-pc-pack-tag b { font-family: var(--display); font-size: 1.35rem; } .bst-pc-pack-tag span { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin-top: -10px; } .bst-pc-pack-body { min-width: 0; } .bst-pc-pack-body p { margin: 0 0 6px; font-size: .85rem; font-weight: 700; color: var(--text-2); } .bst-pc-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .bst-pc-steps li { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 6px; border-radius: 999px; background: var(--bg); border: 1.5px solid var(--line); font-weight: 800; font-size: .82rem; white-space: nowrap; } .bst-pc-steps small { font-weight: 600; color: var(--muted); margin-left: 2px; } .bst-pc-steps .st { width: 13px; height: 13px; } .js .bst-pc[data-bst-in] .bst-pc-more, .js .bst-pc[data-bst-in] .bst-pc-steps li { opacity: 0; transition: opacity .5s ease calc(var(--d, 0ms) + 450ms), transform .5s ease calc(var(--d, 0ms) + 450ms); } .js .bst-pc[data-bst-in] .bst-pc-steps li { transform: translateY(6px); transition-delay: var(--d, 0ms); } .js .bst-pc.is-in .bst-pc-more, .js .bst-pc.is-in .bst-pc-steps li { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .bst-pc[data-bst-in] .bst-pc-more, .js .bst-pc[data-bst-in] .bst-pc-steps li { opacity: 1; transform: none; transition: none; } } .bst-pro.is-stars .bst-pro-tag .st { width: 14px; height: 14px; color: var(--zap); } @media (max-width: 480px) { .bst-pc-pack { gap: 12px; padding: 10px 12px; } .bst-pc-pack-tag { width: 52px; height: 52px; } .bst-pc-pack-tag b { font-size: 1.15rem; } .bst-pc-steps li { font-size: .76rem; padding: 2px 7px 2px 5px; } .bst-pc-keys { font-size: .76rem; } } /* toggles: WordPress' flow layout (:root :where(.is-layout-flow) > :last-child { margin-block-end: 0 }) beat the FAQ answer's bottom margin, so an open answer sat right on the next question's line. */ .faq .wp-block-details > :not(summary):last-child { margin-bottom: 24px; } .faq .wp-block-details > summary + * { margin-top: 0; } .faq .wp-block-details > summary { line-height: 1.35; } .faq .wp-block-details > summary::after { line-height: 1; } @media (max-width: 560px) { .faq .wp-block-details > summary { padding: 18px 40px 18px 0; font-size: 1.05rem; } .faq .wp-block-details > :not(summary):last-child { margin-bottom: 20px; } } /* solution pages: the move list toggle gets the same + / × as the FAQ instead of the browser's triangle */ .bst-move-list > summary { list-style: none; position: relative; padding-right: 36px; } .bst-move-list > summary::-webkit-details-marker { display: none; } .bst-move-list > summary::after { content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; line-height: 1; color: var(--accent); transition: transform .2s; } .bst-move-list[open] > summary::after { transform: translateY(-50%) rotate(45deg); } .bst-move-list[open] > summary { padding-bottom: 10px; } /* ---- start page 2026-10-17: daily challenges, search instead of the FAQ ---- */ .bst-daily { position: relative; padding: clamp(18px, 3vw, 28px); border-radius: 24px; background: var(--bg); border: 2.5px solid #0e0b1a; box-shadow: 0 6px 0 #0e0b1a; } .bst-daily-head { margin: 0 0 16px; font-family: var(--display); font-weight: 700; font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .bst-dc-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; } .bst-dc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 10px 12px; border-radius: 18px; background: var(--surface); border: 2.5px solid #0e0b1a; box-shadow: 0 5px 0 #0e0b1a; text-align: center; rotate: calc((var(--i) - 1) * 2.5deg); } .bst-dc.is-teuflisch { z-index: 1; scale: 1.08; translate: 0 -6px; border-color: color-mix(in srgb, var(--t-teuflisch) 70%, #0e0b1a); box-shadow: 0 5px 0 #0e0b1a, 0 0 0 4px color-mix(in srgb, var(--t-teuflisch) 30%, transparent); } .bst-dc-tier { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; } .bst-dc-pic { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: linear-gradient(#2a2350, #1d1837); } .bst-dc-reel { position: absolute; inset: 0; display: flex; flex-direction: column; } .bst-dc-reel > span { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; } .bst-dc-reel img { max-width: 80%; max-height: 80%; width: auto; height: auto; } .bst-daily.is-in .bst-dc-reel { animation: bst-reel 7s cubic-bezier(.3, .1, .2, 1) calc(var(--i) * 250ms) infinite both; } @keyframes bst-reel { 0% { transform: translateY(0); } 22%, 92% { transform: translateY(-400%); } 100% { transform: translateY(-400%); } } .bst-daily:not(.is-in) .bst-dc-reel, .bst-dc-reel { transform: translateY(-400%); } .bst-dc-name { font-family: var(--display); font-size: 1.12rem; line-height: 1.1; margin-top: 4px; } .bst-dc-level { color: var(--muted); font-size: .85rem; } .bst-dc-reward { display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; font-weight: 800; font-size: .9rem; } .bst-dc-reward .st, .bst-daily-foot .st { width: 16px; height: 16px; color: var(--zap); } .bst-dc-stamps { display: inline-flex; gap: 3px; margin-left: 8px; } .bst-dc-stamps i { width: 13px; height: 13px; border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 2px color-mix(in srgb, #fff 35%, transparent); } .bst-daily-foot { margin: 18px 0 0; text-align: center; } .bst-dc-reroll { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: var(--surface-2); font-weight: 700; font-size: .88rem; } .bst-dc-reroll .bst-ico { width: 17px; height: 17px; } .bst-daily-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; } @media (max-width: 900px) { .bst-daily-wrap { grid-template-columns: 1fr; } } @media (max-width: 420px) { .bst-dc { padding: 8px 6px 10px; } .bst-dc-name { font-size: .95rem; } .bst-dc-tier { font-size: .7rem; } .bst-dc-stamps { margin-left: 4px; } } @media (prefers-reduced-motion: reduce) { .bst-daily.is-in .bst-dc-reel { animation: none; } } .bst-search { position: relative; max-width: 720px; margin: 0 auto; text-align: center; } .bst-search-gnatz { display: block; width: 120px; height: auto; margin: -20px auto -34px; position: relative; z-index: 0; } .bst-search-field { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; width: 100%; padding: 18px 20px; border-radius: 18px; border: 2.5px solid #0e0b1a; background: var(--surface); box-shadow: 0 5px 0 #0e0b1a; color: var(--muted); font: inherit; font-size: 1.08rem; text-align: left; cursor: text; } .bst-search-field svg { flex: none; color: var(--accent); } .bst-search-field span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bst-search-field kbd { flex: none; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line-strong); font: inherit; font-size: .85rem; } .bst-search-field:hover, .bst-search-field:focus-visible { border-color: var(--accent); } .bst-asks { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .bst-ask { padding: 8px 14px; border-radius: 99px; border: 1.5px solid var(--line-strong); background: transparent; color: var(--text-2); font: inherit; font-size: .92rem; cursor: pointer; } .bst-ask:hover, .bst-ask:focus-visible { border-color: var(--accent); color: var(--text); } #ask .section-head { text-align: center; margin-inline: auto; } @media (max-width: 560px) { .bst-search-field { padding: 14px 14px; font-size: 1rem; } .bst-search-field kbd { display: none; } } .bst-points.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1100px) { .bst-points.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .bst-points.is-four { grid-template-columns: 1fr; } } .bst-points.is-daily { grid-template-columns: 1fr; gap: 16px; margin-top: 22px; } /* ---- landing pages 2026-10-17: Free & Pro, Offline & ad-free (content from _src/beasties/core_landing.py) ---- */ .bst-more-link.is-left { text-align: left; margin-top: 18px; } .bst-landing-hero .hero-grid > .wp-block-column:last-child { min-width: 0; } .bst-landing-hero .bst-usp-stage { max-width: 360px; margin-inline: auto; } .bst-procard { position: relative; padding: 46px clamp(18px, 3vw, 28px) 22px; border-radius: 26px; background: linear-gradient(160deg, #2a2350, #171230); color: #f1ecff; border: 2.5px solid #0e0b1a; box-shadow: 0 6px 0 #0e0b1a; } .bst-procard-tag { position: absolute; top: -18px; left: 22px; margin: 0; padding: 6px 16px; border-radius: 12px; background: var(--zap); color: var(--zap-ink); border: 2.5px solid #0e0b1a; font-family: var(--display); font-weight: 800; font-size: 1.3rem; text-transform: uppercase; rotate: -3deg; box-shadow: 0 4px 0 #0e0b1a; } .bst-procard-gnatz { --w: 150px; position: absolute; top: -84px; right: 4px; width: var(--w); height: var(--w); background: url(../img/beasties/part-pro-outfit-anim.webp) 0 0 / calc(var(--w) * 12) var(--w) repeat-x; } @media (prefers-reduced-motion: no-preference) { .bst-procard-gnatz { animation: bst-pro-outfit 3.6s infinite; } } @keyframes bst-pro-outfit { 0% { background-position-x: 0; animation-timing-function: steps(12, end); } 33.3%, 100% { background-position-x: calc(var(--w) * -12); } } .bst-procard-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .bst-procard-rows li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .06); } .bst-procard-rows .bst-ico { width: 40px; height: 40px; padding: 8px; box-sizing: border-box; border-radius: 12px; background: var(--zap); color: var(--zap-ink); } .bst-procard-rows b { display: block; font-size: 1.05rem; } .bst-procard-rows small { display: block; color: #cfc7ee; font-size: .9rem; line-height: 1.4; } .bst-procard-promise { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; font-weight: 700; font-size: .92rem; } .bst-procard-promise li { display: inline-flex; align-items: center; gap: 6px; } .bst-procard-promise .bst-ico { width: 18px; height: 18px; color: #7ee0b5; } .bst-procard.is-in .bst-procard-rows li { animation: bst-pop .45s ease both; } .bst-procard.is-in .bst-procard-rows li:nth-child(2) { animation-delay: .1s; } .bst-procard.is-in .bst-procard-rows li:nth-child(3) { animation-delay: .2s; } .bst-procard.is-in .bst-procard-rows li:nth-child(4) { animation-delay: .3s; } .bst-cmp { overflow-x: auto; border-radius: 22px; border: 2.5px solid #0e0b1a; box-shadow: 0 6px 0 #0e0b1a; background: var(--surface); } .bst-cmp table { width: 100%; border-collapse: collapse; font-size: 1rem; } .bst-cmp th, .bst-cmp td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); } .bst-cmp thead th { font-family: var(--display); font-size: 1.05rem; text-transform: uppercase; letter-spacing: .06em; background: var(--surface-2); } .bst-cmp thead th:last-child { background: var(--zap); color: var(--zap-ink); } .bst-cmp tbody tr:last-child > * { border-bottom: 0; } .bst-cmp tbody th { font-weight: 700; } .bst-cmp td.is-yes .bst-ico { width: 22px; height: 22px; color: #2fb37f; stroke-width: 2.6; } .bst-cmp td.is-no .bst-ico { width: 20px; height: 20px; color: var(--muted); } .bst-cmp .bst-dot { margin-right: 8px; } .bst-cmp .st { width: 16px; height: 16px; color: var(--zap); vertical-align: -2px; margin-right: 3px; } .bst-cmp.is-rewards td { font-weight: 800; font-size: 1.1rem; } .bst-steps { list-style: none; counter-reset: st; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .bst-steps li { counter-increment: st; position: relative; padding: 18px; border-radius: 20px; background: var(--surface); border: 2.5px solid #0e0b1a; box-shadow: 0 5px 0 #0e0b1a; } .bst-steps li::before { content: counter(st); position: absolute; top: -14px; right: 14px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--zap); color: var(--zap-ink); font-weight: 800; border: 2px solid #0e0b1a; } .bst-steps .bst-ico { width: 40px; height: 40px; padding: 8px; box-sizing: border-box; border-radius: 12px; background: var(--surface-2); color: var(--accent); } .bst-steps h3 { font-size: 1.1rem; margin: 10px 0 4px; } .bst-steps p { margin: 0; color: var(--text-2); font-size: .97rem; line-height: 1.5; } @media (max-width: 1000px) { .bst-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .bst-steps { grid-template-columns: 1fr; } .bst-cmp th, .bst-cmp td { padding: 10px 10px; font-size: .92rem; } .bst-procard-gnatz { --w: 112px; top: -62px; } } @media (prefers-reduced-motion: reduce) { .bst-procard.is-in .bst-procard-rows li { animation: none; } } .bst-landing-hero h1 em { font-style: normal; color: var(--accent); } .section-inner > .bst-daily { max-width: 680px; margin: 8px auto 28px; } /* level pages: the H1 names game and difficulty (unique per page), the level number stays the big part */ .bst-level-h1 > span { display: block; font-size: .42em; line-height: 1.2; letter-spacing: .02em; color: var(--muted); margin-bottom: .15em; } /* level pages: the H1 names game and difficulty (unique per page), the level number stays the big part */ .bst-level-h1 > span { display: block; font-size: .42em; line-height: 1.2; letter-spacing: .02em; color: var(--muted); margin-bottom: .15em; } /* FAQ-Überschrift mittig über der mittig gesetzten FAQ (alle Seiten mit .faq) */ .section-inner:has(> .faq) > .section-head { text-align: center; margin-inline: auto !important; }