. Static CSS only. No build step. Motion is CSS-first and switched off under prefers-reduced-motion. Every text/background pair below is checked at 4.5:1 or better (see SPEC.md, "Contrast"). ===================================================================== */ /* ---------- 1. Tokens ---------- */ :root{ color-scheme: light dark; /* type */ --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif; --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-pixel: "Silkscreen", ui-monospace, "Courier New", monospace; --fs-xs: .8125rem; --fs-sm: .9375rem; --fs-md: 1.0625rem; --fs-lg: clamp(1.15rem, 1.05rem + .45vw, 1.35rem); --fs-h3: clamp(1.2rem, 1.08rem + .5vw, 1.45rem); --fs-h2: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem); --fs-h1: clamp(2.3rem, 1.6rem + 3.6vw, 4.6rem); --fs-price: clamp(2.6rem, 2rem + 2.6vw, 3.8rem); --lh-tight: 1.05; --lh-body: 1.6; /* space (4px base) */ --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 6.5rem; --gutter: clamp(1rem, .6rem + 2vw, 2rem); --maxw: 1180px; --maxw-text: 66ch; /* shape */ --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 36px; --r-pill: 999px; --bw: 2px; /* motion */ --ease-out: cubic-bezier(.2,.8,.2,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); --t-fast: 140ms; --t-med: 260ms; --t-slow: 600ms; /* studio palette (light) */ --bg: #fbf6ec; /* warm paper */ --bg-2: #f3ead8; --surface: #ffffff; --surface-2: #fff8ea; --ink: #1f1b2e; /* 15.5:1 on bg */ --ink-2: #585266; /* 6.9:1 on bg */ --line: #e3d7bf; --ink-strong: #1f1b2e; /* sticker outlines + offset shadows */ --accent: #c2401f; /* workshop tomato; white text 5.2:1 */ --on-accent: #ffffff; --accent-text: #c2401f; /* 4.8:1 on bg */ --accent-2: #ffc93c; /* sunflower; ink text 10.9:1 */ --on-accent-2: #1f1b2e; --good: #1d7a4f; --focus: #2f6bff; --shadow-1: 0 1px 2px rgb(31 27 46 / .08), 0 4px 14px rgb(31 27 46 / .07); --shadow-2: 0 2px 4px rgb(31 27 46 / .08), 0 14px 40px rgb(31 27 46 / .14); --sticker: 0 4px 0 var(--ink-strong); --sticker-hover: 0 6px 0 var(--ink-strong); --sticker-press: 0 1px 0 var(--ink-strong); --hero-wash: radial-gradient(900px 420px at 85% -10%, #ffe2b8 0%, transparent 60%), radial-gradient(700px 380px at -10% 20%, #ffd9cf 0%, transparent 55%); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg: #17141f; --bg-2: #1e1a28; --surface: #221e2e; --surface-2: #2a2538; --ink: #f4efe6; --ink-2: #b9b2c6; --line: #3a3449; --ink-strong: #000000; --accent: #ff8a5c; --on-accent: #17141f; --accent-text: #ff8a5c; --accent-2: #ffc93c; --on-accent-2: #17141f; --good: #5fd39a; --focus: #8fb0ff; --shadow-1: 0 1px 2px rgb(0 0 0 / .4), 0 4px 14px rgb(0 0 0 / .35); --shadow-2: 0 2px 4px rgb(0 0 0 / .4), 0 14px 40px rgb(0 0 0 / .5); --hero-wash: radial-gradient(900px 420px at 85% -10%, #3a2340 0%, transparent 60%), radial-gradient(700px 380px at -10% 20%, #3b2622 0%, transparent 55%); } } /* ---------- 2. Worlds (one palette + texture per product line) ---------- */ /* Owls: moonlit night blues + warm gold. Night in BOTH themes. */ [data-world="owls"]{ --bg: #121a3a; --bg-2: #0d1430; --surface: #1c2652; --surface-2: #232f62; --ink: #f3eedf; --ink-2: #b8bfdc; --line: #33407a; --ink-strong: #070b1f; --accent: #f5c451; --on-accent: #1a1640; --accent-text: #f5c451; --accent-2: #9fb4ff; --on-accent-2: #0d1430; --focus: #ffe08a; --hero-wash: radial-gradient(800px 500px at 80% 0%, #2a3a86 0%, transparent 60%), radial-gradient(600px 400px at 0% 100%, #1b2a6b 0%, transparent 60%); } /* Arcade: parchment + pixel ink + candy colours */ [data-world="arcade"]{ --bg: #f6ecd4; --bg-2: #efe0bd; --surface: #fffaf0; --surface-2: #fbf1dc; --ink: #2b2118; --ink-2: #5e4e3c; --line: #d9c49b; --ink-strong: #2b2118; --accent: #d81b5a; --on-accent: #ffffff; --accent-text: #c8174f; --accent-2: #ffd23f; --on-accent-2: #2b2118; --candy-mint: #43d19e; --candy-sky: #4aa8ff; --candy-lemon: #ffd23f; --candy-pink: #ff5d8f; --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 10px; --hero-wash: none; } /* Tiger: jungle orange + jade on sky mint */ [data-world="tiger"]{ --bg: #e3f4ec; --bg-2: #cfeadd; --surface: #ffffff; --surface-2: #f2faf6; --ink: #173a31; --ink-2: #3d5f55; --line: #a9d3c2; --ink-strong: #173a31; --accent: #f59331; --on-accent: #2a1606; --accent-text: #17705b; --accent-2: #17705b; --on-accent-2: #ffffff; --hero-wash: radial-gradient(700px 360px at 85% 10%, #fff3c4 0%, transparent 60%); } /* Software: clean paper + blueprint blue */ [data-world="software"]{ --bg: #f4f7fc; --bg-2: #e8eef8; --surface: #ffffff; --surface-2: #f7f9fd; --ink: #162033; --ink-2: #4a566c; --line: #cfd9ea; --ink-strong: #162033; --accent: #1f56d6; --on-accent: #ffffff; --accent-text: #1f56d6; --accent-2: #ffc93c; --on-accent-2: #162033; --hero-wash: none; } /* Learn: notebook cream + highlighter + teal ink */ [data-world="learn"]{ --bg: #fffaf0; --bg-2: #f7eedb; --surface: #ffffff; --surface-2: #fffdf7; --ink: #2a2733; --ink-2: #5a5566; --line: #e6dcc6; --ink-strong: #2a2733; --accent: #0f6b74; --on-accent: #ffffff; --accent-text: #0f6b74; --accent-2: #ffe36b; --on-accent-2: #2a2733; --margin-red: #e8737a; --hero-wash: none; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) [data-world="owls"], :root:not([data-theme="light"]) body[data-world="owls"]{ --bg: #0b1129; --bg-2: #080c20; --surface: #161e44; --surface-2: #1c2652; } :root:not([data-theme="light"]) [data-world="arcade"]{ --bg: #1d1830; --bg-2: #241e3b; --surface: #2a2342; --surface-2: #31294c; --ink: #f7efe0; --ink-2: #c3b8d6; --line: #4a3f68; --ink-strong: #000000; --accent: #ff6f9c; --on-accent: #1d1830; --accent-text: #ff6f9c; } :root:not([data-theme="light"]) [data-world="tiger"]{ --bg: #0f2a24; --bg-2: #0b221d; --surface: #153a31; --surface-2: #1a463b; --ink: #e6f5ee; --ink-2: #a9cbbf; --line: #2a5b4d; --ink-strong: #000000; --accent: #f59331; --on-accent: #2a1606; --accent-text: #f59331; --accent-2: #5fd3b0; --on-accent-2: #0f2a24; --hero-wash: radial-gradient(700px 360px at 85% 10%, #1f4a3c 0%, transparent 60%); } :root:not([data-theme="light"]) [data-world="software"]{ --bg: #0f1522; --bg-2: #131b2c; --surface: #172036; --surface-2: #1c2741; --ink: #eef2fa; --ink-2: #a7b4cc; --line: #2b3a5a; --ink-strong: #000000; --accent: #7aa2ff; --on-accent: #0f1522; --accent-text: #7aa2ff; } :root:not([data-theme="light"]) [data-world="learn"]{ --bg: #1b1915; --bg-2: #22201a; --surface: #26231d; --surface-2: #2d2a22; --ink: #f5efe2; --ink-2: #c2b9a6; --line: #433d31; --ink-strong: #000000; --accent: #5cc8cf; --on-accent: #1b1915; --accent-text: #5cc8cf; --accent-2: #e6c84a; --on-accent-2: #1b1915; --margin-red: #b5525a; } } /* ---------- 3. Base ---------- */ *,*::before,*::after{ box-sizing: border-box; } html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; } body{ margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--fs-md)/var(--lh-body) var(--font-body); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: hidden; } [data-world]{ background-color: var(--bg); color: var(--ink); } img,svg,video{ display: block; max-width: 100%; height: auto; } img{ border-radius: inherit; } h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 800; line-height: var(--lh-tight); letter-spacing: -.02em; margin: 0 0 var(--s-4); text-wrap: balance; } h1{ font-size: var(--fs-h1); letter-spacing: -.035em; } h2{ font-size: var(--fs-h2); letter-spacing: -.03em; } h3{ font-size: var(--fs-h3); font-weight: 700; } h4{ font-size: var(--fs-md); font-weight: 700; letter-spacing: 0; } p{ margin: 0 0 var(--s-4); text-wrap: pretty; } ul,ol{ margin: 0 0 var(--s-4); padding-left: 1.2em; } a{ color: var(--accent-text); text-underline-offset: .18em; text-decoration-thickness: .08em; } a:hover{ text-decoration-thickness: .14em; } strong{ font-weight: 700; } small,.small{ font-size: var(--fs-sm); } hr{ border: 0; border-top: var(--bw) dashed var(--line); margin: var(--s-6) 0; } :focus-visible{ outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; } ::selection{ background: var(--accent-2); color: var(--on-accent-2); } .sr-only{ position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link{ position: absolute; left: var(--s-4); top: -100px; z-index: 100; padding: var(--s-3) var(--s-4); background: var(--accent-2); color: var(--on-accent-2); font-weight: 700; border-radius: var(--r-sm); text-decoration: none; } .skip-link:focus{ top: var(--s-3); } .icon{ width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ---------- 4. Layout primitives ---------- */ .wrap{ width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow{ max-width: 820px; } .section{ padding-block: clamp(3rem, 2rem + 4vw, 6rem); position: relative; } .section--tight{ padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); } .section--alt{ background: var(--bg-2); } .section__head{ max-width: 760px; margin-bottom: var(--s-6); } .section__head--center{ margin-inline: auto; text-align: center; } .section__head p{ color: var(--ink-2); font-size: var(--fs-lg); } .stack > * + *{ margin-top: var(--s-4); } .cluster{ display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; } .grid{ display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 260px)), 1fr)); } .grid--2{ --min: 340px; } .grid--3{ --min: 260px; } .grid--4{ --min: 210px; } .split{ display: grid; gap: var(--s-6); align-items: center; } .split > *, .offer > *{ min-width: 0; } /* grid children may shrink below their content width on small phones */ @media (min-width: 880px){ .split{ grid-template-columns: 1.1fr .9fr; gap: var(--s-7); } .split--even{ grid-template-columns: 1fr 1fr; } } .measure{ max-width: var(--maxw-text); } .center{ text-align: center; } .muted{ color: var(--ink-2); } .mt-0{ margin-top: 0; } .mt-4{ margin-top: var(--s-4); } .mt-6{ margin-top: var(--s-6); } .mb-0{ margin-bottom: 0; } /* ---------- 5. Type helpers ---------- */ .eyebrow{ display: inline-flex; align-items: center; gap: var(--s-2); font: 700 var(--fs-xs)/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); margin-bottom: var(--s-3); } .lede{ font-size: var(--fs-lg); color: var(--ink-2); max-width: 58ch; } .hl{ background: linear-gradient(transparent 58%, var(--accent-2) 58% 90%, transparent 90%); color: inherit; padding-inline: .08em; } [data-world="owls"] .hl{ background: none; color: var(--accent); } .scribble{ position: relative; white-space: nowrap; } .scribble::after{ content: ""; position: absolute; left: -2%; right: -2%; bottom: -.12em; height: .32em; background: no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M2 14 C40 4 80 4 110 10 S170 18 198 6' fill='none' stroke='%23f5a623' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E"); } .pixel-label{ font-family: var(--font-pixel); font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase; } /* ---------- 6. Header / nav ---------- */ .site-header{ position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); } .nav{ display: flex; align-items: center; gap: var(--s-3); min-height: 68px; } .logo{ display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink); text-decoration: none; font: 800 1.15rem/1 var(--font-display); letter-spacing: -.02em; margin-right: auto; min-height: 44px; white-space: nowrap; } @media (max-width: 380px){ .logo{ font-size: 1rem; } .logo__mark{ width: 30px; height: 30px; } } .logo__mark{ width: 34px; height: 34px; flex: none; transition: transform var(--t-med) var(--ease-spring); } .logo:hover .logo__mark{ transform: rotate(-8deg) scale(1.06); } .logo small{ display: block; font: 400 var(--fs-xs)/1.2 var(--font-body); color: var(--ink-2); letter-spacing: 0; } .nav__links{ display: flex; gap: var(--s-1); list-style: none; margin: 0; padding: 0; } .nav__links a{ display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-3); border-radius: var(--r-pill); color: var(--ink); text-decoration: none; font-weight: 700; } .nav__links a:hover{ background: var(--bg-2); } .nav__links a[aria-current="page"]{ background: var(--ink); color: var(--bg); } .nav__toggle{ display: none; } @media (max-width: 819px){ .nav__toggle{ display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--r-sm); border: var(--bw) solid var(--ink); background: var(--surface); color: var(--ink); cursor: pointer; } .nav__toggle .icon{ width: 22px; height: 22px; } .nav__panel{ position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: var(--bw) solid var(--ink); padding: var(--s-3) var(--gutter) var(--s-5); box-shadow: var(--shadow-2); } .js .nav__panel:not(.is-open){ display: none; } .nav__links{ flex-direction: column; } .nav__links a{ font-size: 1.15rem; min-height: 52px; border-radius: var(--r-sm); } .nav__panel .btn{ display: none; } /* phones: the Play free button stays in the bar instead */ } @media (min-width: 820px){ .nav__panel{ display: flex; align-items: center; gap: var(--s-4); } .nav > .btn--play{ display: none; } } .nav--minimal{ justify-content: space-between; } /* Ad pages: below 400px only the logo mark shows, so the header button never gets clipped (link keeps its aria-label) */ @media (max-width: 399px){ .nav--minimal .logo > span{ display: none; } } /* Hub header (logo + Play free + menu) on small phones: tighten, then drop the logo text below 360px */ @media (max-width: 399px){ .nav{ gap: var(--s-2); } .nav .logo{ font-size: .95rem; gap: 6px; } .nav > .btn--play{ padding-inline: .75em; } } @media (max-width: 359px){ .nav .logo > span{ display: none; } } .crumbs{ font-size: var(--fs-sm); color: var(--ink-2); padding-top: var(--s-4); } .crumbs ol{ display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; } .crumbs li + li::before{ content: "/"; margin-right: var(--s-2); opacity: .6; } .crumbs a{ color: var(--ink-2); } /* ---------- 7. Buttons ("stickers") ---------- */ .btn{ --b-bg: var(--surface); --b-ink: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 48px; padding: .7em 1.25em; border-radius: var(--r-pill); border: var(--bw) solid var(--ink-strong); background: var(--b-bg); color: var(--b-ink); font: 700 1rem/1.1 var(--font-body); text-decoration: none; cursor: pointer; text-align: center; white-space: nowrap; box-shadow: var(--sticker); transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); } .btn:hover{ transform: translateY(-2px); box-shadow: var(--sticker-hover); text-decoration: none; } .btn:active{ transform: translateY(3px); box-shadow: var(--sticker-press); } .btn--primary{ --b-bg: var(--accent); --b-ink: var(--on-accent); } .btn--secondary{ --b-bg: var(--accent-2); --b-ink: var(--on-accent-2); } .btn--ghost{ --b-bg: transparent; box-shadow: none; border-color: currentColor; } .btn--ghost:hover{ box-shadow: none; background: color-mix(in srgb, var(--ink) 8%, transparent); } .btn--lg{ min-height: 58px; font-size: 1.125rem; padding: .8em 1.6em; } .btn--sm{ min-height: 44px; font-size: var(--fs-sm); padding: .5em 1em; } .btn--block{ width: 100%; } @media (max-width: 359px){ .btn{ white-space: normal; } } /* long labels wrap instead of overflowing on 320px phones */ .btn .icon{ width: 1.15em; height: 1.15em; } [data-world="owls"] .btn{ border-color: var(--ink-strong); } [data-world="owls"] .btn--ghost{ border-color: var(--ink); color: var(--ink); } [data-world="arcade"] .btn{ border-radius: var(--r-md); box-shadow: 4px 4px 0 var(--ink-strong); } [data-world="arcade"] .btn:hover{ box-shadow: 6px 6px 0 var(--ink-strong); transform: translate(-1px,-1px); } [data-world="arcade"] .btn:active{ box-shadow: 1px 1px 0 var(--ink-strong); transform: translate(3px,3px); } [data-world="tiger"] .btn:hover{ transform: translateY(-2px) scale(1.03); transition-timing-function: var(--ease-spring); } .link-arrow{ display: inline-flex; align-items: center; gap: .35em; font-weight: 700; min-height: 44px; } .link-arrow::after{ content: "\2192"; transition: transform var(--t-fast) var(--ease-out); } .link-arrow:hover::after{ transform: translateX(4px); } .cta-row{ display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); align-items: center; margin-top: var(--s-5); } .cta-note{ font-size: var(--fs-sm); color: var(--ink-2); margin-top: var(--s-3); } /* ---------- 8. Chips, badges, trust strip ---------- */ .chip,.badge{ display: inline-flex; align-items: center; gap: .4em; padding: .3em .75em; border-radius: var(--r-pill); font: 700 var(--fs-xs)/1.3 var(--font-body); letter-spacing: .01em; background: var(--surface-2); color: var(--ink); border: 1.5px solid var(--line); white-space: nowrap; } .chip .icon,.badge .icon{ width: 1.1em; height: 1.1em; } .badge--free{ background: #d8f5e4; color: #0f5132; border-color: #9fdcbc; } .badge--price{ background: var(--accent-2); color: var(--on-accent-2); border-color: transparent; } .badge--need{ background: #e7edff; color: #1d3f9e; border-color: #b9c9f5; } /* needs your own API key, Node.js */ .badge--warn{ background: #fff1cc; color: #6b4800; border-color: #f0d27a; } /* early release */ .badge--edu{ background: #ffe4e0; color: #8a1f12; border-color: #f4b4a8; } /* education only / not advice */ .badge--genre{ background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--ink); border-color: transparent; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .badge--free{ background: #133a28; color: #9de8c0; border-color: #24603f; } :root:not([data-theme="light"]) .badge--need{ background: #1a2850; color: #b9c9ff; border-color: #2c3f7a; } :root:not([data-theme="light"]) .badge--warn{ background: #3a2e0a; color: #ffdf8a; border-color: #6b5410; } :root:not([data-theme="light"]) .badge--edu{ background: #40160f; color: #ffbfb2; border-color: #6e2a1e; } } .trust{ display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; margin: var(--s-4) 0 0; } .trust li{ display: inline-flex; align-items: center; gap: .45em; padding: .45em .85em; border-radius: var(--r-pill); background: color-mix(in srgb, var(--surface) 80%, transparent); border: 1.5px solid var(--line); font-weight: 700; font-size: var(--fs-sm); } .trust .icon{ color: var(--accent-text); } .trust--rows{ display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .trust--rows li{ border-radius: var(--r-md); padding: var(--s-4); align-items: flex-start; font-weight: 400; font-size: var(--fs-md); background: var(--surface); } .trust--rows li strong{ display: block; font-family: var(--font-display); font-size: var(--fs-lg); margin-bottom: 2px; } .trust--rows .icon{ width: 28px; height: 28px; margin-top: 2px; } /* ---------- 9. Hero ---------- */ .hero{ position: relative; overflow: hidden; padding-block: clamp(2.5rem, 1.5rem + 5vw, 6rem) clamp(3rem, 2rem + 5vw, 6.5rem); background-image: var(--hero-wash); isolation: isolate; } .hero h1{ margin-bottom: var(--s-4); } .hero .lede{ margin-bottom: 0; } .hero__media{ position: relative; display: grid; place-items: center; } .hero--center{ text-align: center; } .hero--center .lede{ margin-inline: auto; } .hero--center .cta-row,.hero--center .trust{ justify-content: center; } /* World textures */ [data-world="owls"].hero::before,[data-world="owls"] .hero::before,.tex-stars::before{ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .9; background-image: radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 28% 62%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 44% 12%, #ffe9a8 50%, transparent 51%), radial-gradient(1px 1px at 63% 40%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 78% 72%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 90% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 8% 84%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 52% 88%, #ffe9a8 50%, transparent 51%); background-size: 420px 420px; } .moon{ position: absolute; z-index: -1; width: clamp(120px, 18vw, 220px); aspect-ratio: 1; border-radius: 50%; right: 6%; top: 8%; background: radial-gradient(circle at 38% 36%, #fff8dc 0 30%, #f5e3a6 60%, #e9cf82 100%); box-shadow: 0 0 60px 20px rgb(245 196 81 / .25), 0 0 160px 60px rgb(245 196 81 / .12); } @media (max-width: 879px){ .moon{ width: 96px; right: -24px; top: 12px; opacity: .55; } } [data-world="arcade"].hero,[data-world="arcade"] .hero,.tex-pixel{ background-image: linear-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px); background-size: 16px 16px; } .tex-blueprint,[data-world="software"].hero,[data-world="software"] .hero{ background-image: linear-gradient(color-mix(in srgb, var(--accent) 9%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent) 1px, transparent 1px), linear-gradient(color-mix(in srgb, var(--accent) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 4%, transparent) 1px, transparent 1px); background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px; } .tex-ruled,[data-world="learn"].hero,[data-world="learn"] .hero{ background-image: linear-gradient(90deg, transparent calc(var(--gutter) + 18px), var(--margin-red) calc(var(--gutter) + 18px) calc(var(--gutter) + 20px), transparent calc(var(--gutter) + 20px)), repeating-linear-gradient(transparent 0 31px, color-mix(in srgb, var(--accent) 16%, transparent) 31px 32px); } /* Tiger canopy scallop: put .scallop on the section ABOVE the next one */ .scallop{ position: relative; } .scallop::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 28px; background: var(--scallop-next, var(--bg-2)); -webkit-mask: radial-gradient(28px 28px at 28px 0, transparent 98%, #000) 0 0/56px 28px repeat-x; mask: radial-gradient(28px 28px at 28px 0, transparent 98%, #000) 0 0/56px 28px repeat-x; } /* ---------- 10. Screenshot frames ---------- */ .frame{ position: relative; margin: 0; } .frame img{ width: 100%; height: auto; } .frame figcaption{ font-size: var(--fs-sm); color: var(--ink-2); margin-top: var(--s-3); text-align: center; } /* Portrait phone: owls 416x740, arcade 404x674 */ .frame--phone{ width: min(300px, 74vw); padding: 10px; border-radius: 40px; background: #0b0d18; box-shadow: 0 0 0 2px #2c3150, var(--shadow-2), 0 30px 80px -20px rgb(0 0 0 / .55); } .frame--phone img{ border-radius: 30px; } .frame--phone::before{ content: ""; position: absolute; top: 18px; left: 50%; width: 64px; height: 6px; border-radius: 6px; transform: translateX(-50%); background: #23273d; z-index: 1; } /* Wide screen: tiger 1059x662 */ .frame--screen{ padding: 10px 10px 14px; border-radius: 22px; background: #10241e; box-shadow: var(--shadow-2), 0 30px 70px -24px rgb(0 0 0 / .45); } .frame--screen img{ border-radius: 14px; } .frame--screen::after{ content: ""; display: block; width: 26%; height: 12px; margin: 12px auto -14px; border-radius: 0 0 14px 14px; background: #0b1a15; } /* 8-bit cabinet: arcade */ .frame--pixel{ width: min(300px, 74vw); padding: 12px; background: var(--surface); border-radius: 0; box-shadow: 0 -6px 0 0 var(--ink-strong), 0 6px 0 0 var(--ink-strong), -6px 0 0 0 var(--ink-strong), 6px 0 0 0 var(--ink-strong), 12px 12px 0 0 color-mix(in srgb, var(--ink-strong) 35%, transparent); } .frame--pixel img{ border-radius: 0; image-rendering: pixelated; } .frame--tilt-l{ rotate: -4deg; } .frame--tilt-r{ rotate: 3deg; } .frame-stack{ position: relative; display: grid; place-items: center; } .frame-stack > .frame:nth-child(2){ position: absolute; width: min(200px, 46vw); right: -4%; bottom: -8%; rotate: 6deg; } @media (max-width: 879px){ .frame-stack > .frame:nth-child(2){ display: none; } } .float{ animation: kw-float 7s ease-in-out infinite; } .float--delay{ animation-delay: -3.5s; } @keyframes kw-float{ 0%,100%{ translate: 0 0; } 50%{ translate: 0 -10px; } } /* ---------- 11. Cards, doors, tiles ---------- */ .card{ background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--shadow-1); } .card > :last-child{ margin-bottom: 0; } .card--link{ text-decoration: none; display: block; transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out); } .card--link:hover{ transform: translateY(-4px); box-shadow: var(--shadow-2); } .card__kicker{ font-size: var(--fs-sm); color: var(--ink-2); } /* Home "doors": three big tilted world cards */ .doors{ display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .door{ position: relative; display: flex; flex-direction: column; min-height: 420px; overflow: hidden; isolation: isolate; border-radius: var(--r-xl); border: var(--bw) solid var(--ink-strong); color: var(--ink); background: var(--bg); text-decoration: none; box-shadow: 6px 8px 0 var(--ink-strong); padding: var(--s-5); transition: transform var(--t-med) var(--ease-spring), box-shadow var(--t-med) var(--ease-out); } .door:nth-child(1){ rotate: -1.6deg; } .door:nth-child(2){ rotate: 1.2deg; } .door:nth-child(3){ rotate: -.8deg; } .door:hover,.door:focus-visible{ rotate: 0deg; transform: translateY(-8px); box-shadow: 8px 14px 0 var(--ink-strong); } .door h3{ font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem); margin-bottom: var(--s-2); } .door p{ color: var(--ink-2); } .door__art{ margin-top: auto; display: flex; gap: var(--s-3); align-items: flex-end; justify-content: center; padding-top: var(--s-4); } .door__art img{ width: 30%; border-radius: 12px; box-shadow: var(--shadow-2); transition: transform var(--t-med) var(--ease-spring); } .door__art img:nth-child(1){ rotate: -6deg; } .door__art img:nth-child(3){ rotate: 6deg; } .door__art img:nth-child(2){ width: 36%; z-index: 1; } .door:hover .door__art img:nth-child(1){ transform: translate(-6px,-6px); } .door:hover .door__art img:nth-child(3){ transform: translate(6px,-6px); } .door__go{ display: inline-flex; align-items: center; gap: .4em; font-weight: 700; color: var(--accent-text); } /* Product tile (one game/app/lesson) */ .tile{ position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1); transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out); } .tile:hover{ transform: translateY(-5px) rotate(-.4deg); box-shadow: var(--shadow-2); } .tile__media{ position: relative; display: block; background: var(--bg-2); overflow: hidden; } .tile__media img{ width: 100%; height: 100%; object-fit: cover; aspect-ratio: var(--ratio, 9 / 14); transition: transform var(--t-slow) var(--ease-out); } .tile:hover .tile__media img{ transform: scale(1.04); } .tile__media--wide{ --ratio: 16 / 10; } .tile__media .badge{ position: absolute; left: var(--s-3); top: var(--s-3); } .tile__body{ display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); flex: 1; } .tile__body h3{ margin: 0; font-size: 1.2rem; } .tile__body p{ margin: 0; color: var(--ink-2); font-size: var(--fs-sm); } .tile__meta{ display: flex; flex-wrap: wrap; gap: var(--s-2); } .tile__actions{ display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-top: auto; padding-top: var(--s-3); } .tile__actions .btn{ flex: 1 1 auto; white-space: normal; } .tile__actions .link-sub{ font-size: var(--fs-sm); color: var(--ink-2); font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; } /* Stretched link: make the media/title open the demo without nesting links */ .tile__title-link{ color: inherit; text-decoration: none; } .tile__title-link:hover{ text-decoration: underline; } /* Genre tile (no screenshot available) */ .tile__placeholder{ display: grid; place-items: center; aspect-ratio: var(--ratio, 16 / 10); padding: var(--s-4); text-align: center; background: repeating-linear-gradient(45deg, var(--bg-2) 0 14px, var(--surface-2) 14px 28px); font: 800 1.4rem/1.1 var(--font-display); color: var(--ink); } /* Series panel (/games/ hub) */ .series{ border-radius: var(--r-xl); overflow: hidden; border: var(--bw) solid var(--ink-strong); box-shadow: 6px 8px 0 var(--ink-strong); } .series__inner{ display: grid; gap: var(--s-6); padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); } @media (min-width: 960px){ .series__inner{ grid-template-columns: .9fr 1.1fr; align-items: center; } } .series + .series{ margin-top: var(--s-7); } .facts-line{ font-weight: 700; color: var(--ink-2); } /* ---------- 12. Shelf (scroll-snap carousel, works without JS) ---------- */ .shelf{ position: relative; } .shelf__track{ display: grid; grid-auto-flow: column; grid-auto-columns: var(--shelf-col, min(72%, 240px)); gap: var(--s-4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: var(--s-2) var(--gutter) var(--s-5); margin-inline: calc(var(--gutter) * -1); list-style: none; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } .shelf__track > *{ scroll-snap-align: start; } .shelf--wide{ --shelf-col: min(86%, 440px); } .shelf__nav{ display: none; gap: var(--s-2); justify-content: flex-end; margin-bottom: var(--s-3); } .js .shelf__nav{ display: flex; } .shelf__btn{ width: 46px; height: 46px; border-radius: 50%; border: var(--bw) solid var(--ink-strong); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 3px 0 var(--ink-strong); } .shelf__btn:disabled{ opacity: .35; cursor: default; box-shadow: none; } @media (min-width: 1000px){ .shelf--grid-desktop .shelf__track{ grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding-inline: 0; } .shelf--grid-desktop .shelf__nav{ display: none; } } /* ---------- 13. Offer / buy block ---------- */ .offer{ position: relative; display: grid; gap: var(--s-5); background: var(--surface); color: var(--ink); border: var(--bw) solid var(--ink-strong); border-radius: var(--r-xl); padding: clamp(1.25rem, 1rem + 2.5vw, 2.75rem); box-shadow: 8px 10px 0 var(--ink-strong); } @media (min-width: 880px){ .offer{ grid-template-columns: 1.1fr .9fr; align-items: center; } } .offer__name{ font: 800 var(--fs-h3)/1.15 var(--font-display); margin: 0 0 var(--s-2); } .price{ font: 800 var(--fs-price)/1 var(--font-display); letter-spacing: -.04em; margin: var(--s-2) 0; } .price small{ font-size: .35em; font-weight: 700; letter-spacing: 0; color: var(--ink-2); margin-left: .3em; } .price-note{ color: var(--ink-2); font-size: var(--fs-sm); margin: 0; } .checklist{ list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); } .checklist li{ position: relative; padding-left: 1.9em; } .checklist li::before{ content: ""; position: absolute; left: 0; top: .2em; width: 1.25em; height: 1.25em; border-radius: 50%; background: var(--accent) no-repeat center/70% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); } [data-world="owls"] .checklist li::before,[data-world="tiger"] .checklist li::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1640' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); } .checklist--x li::before{ background: var(--bg-2) no-repeat center/60% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23585266' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); } /* Reassurance line that sits directly under every buy button */ .buy-trust{ display: flex; flex-wrap: wrap; gap: .25em .9em; font-size: var(--fs-sm); color: var(--ink-2); margin-top: var(--s-3); } .buy-trust span{ display: inline-flex; align-items: center; gap: .35em; } .buy-trust .icon{ width: 1em; height: 1em; } /* ---------- 14. Notes, disclosure, FAQ, compare ---------- */ .notes{ border: var(--bw) dashed var(--line); border-radius: var(--r-lg); padding: var(--s-5); background: var(--surface-2); } .notes h3{ display: flex; align-items: center; gap: var(--s-2); } .notes ul{ margin: 0; display: grid; gap: var(--s-2); } .callout{ border-left: 6px solid var(--accent); background: var(--surface); padding: var(--s-4) var(--s-5); border-radius: 0 var(--r-md) var(--r-md) 0; } .callout--edu{ border-left-color: #c2401f; } .disclose{ display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-2); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); background: var(--surface-2); max-width: 72ch; } .disclose .icon{ margin-top: 2px; color: var(--accent-text); } .faq{ display: grid; gap: var(--s-3); max-width: 820px; } .faq details{ background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md); } .faq summary{ list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); min-height: 56px; padding: var(--s-3) var(--s-5); font: 700 1.075rem/1.3 var(--font-display); } .faq summary::-webkit-details-marker{ display: none; } .faq summary::after{ content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-2); color: var(--on-accent-2); font: 800 1.25rem/1 var(--font-body); transition: rotate var(--t-med) var(--ease-spring); } .faq details[open] summary::after{ rotate: 45deg; } .faq details > div{ padding: 0 var(--s-5) var(--s-4); color: var(--ink-2); } .faq details > div > :last-child{ margin-bottom: 0; } details.more > summary{ cursor: pointer; font-weight: 700; color: var(--accent-text); min-height: 44px; display: inline-flex; align-items: center; } .table-wrap{ overflow-x: auto; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--surface); } .compare{ width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 640px; } .compare th,.compare td{ text-align: left; vertical-align: top; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); } .compare thead th{ font-family: var(--font-display); font-size: 1rem; background: var(--bg-2); position: sticky; top: 0; } .compare tbody th{ color: var(--ink-2); font-weight: 700; white-space: nowrap; } /* ---------- 15. Chooser ("pick what fits you") ---------- */ .chooser{ display: flex; flex-wrap: wrap; gap: var(--s-3); list-style: none; padding: 0; margin: 0; } .chooser a{ display: inline-flex; align-items: center; gap: .5em; min-height: 48px; padding: .55em 1.1em; border-radius: var(--r-pill); border: var(--bw) solid var(--ink-strong); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 700; transition: transform var(--t-fast) var(--ease-spring), background var(--t-fast); } .chooser a:hover{ transform: translateY(-2px) rotate(-1deg); background: var(--accent-2); color: var(--on-accent-2); } .chooser a span{ font-weight: 400; color: var(--ink-2); } .chooser a:hover span{ color: inherit; } .picker{ display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); } .picker a{ display: block; padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); background: var(--surface); border: 1.5px solid var(--line); color: var(--ink); text-decoration: none; transition: transform var(--t-med) var(--ease-out), border-color var(--t-med); } .picker a:hover{ transform: translateY(-3px); border-color: var(--accent); } .picker strong{ display: block; font: 700 1.1rem/1.25 var(--font-display); margin-bottom: 4px; } .picker span{ color: var(--ink-2); font-size: var(--fs-sm); } /* Book-cover cards (/learn/) */ .cover{ display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 3 / 4; padding: var(--s-4); border-radius: 4px 14px 14px 4px; background: var(--cover, var(--accent)); color: var(--cover-ink, var(--on-accent)); text-decoration: none; box-shadow: inset 10px 0 0 rgb(0 0 0 / .14), var(--shadow-2); transition: transform var(--t-med) var(--ease-spring); } .cover:hover{ transform: translateY(-6px) rotate(-1.5deg); } .cover h3{ font-size: 1.15rem; margin: 0; } .cover small{ font-weight: 700; } /* ---------- 16. Sticky mobile CTA ---------- */ .sticky-cta{ position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: flex; gap: var(--s-2); align-items: center; padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom)); background: var(--surface); border-top: var(--bw) solid var(--ink-strong); box-shadow: 0 -8px 30px rgb(0 0 0 / .15); transition: transform var(--t-med) var(--ease-out), visibility 0s; } .sticky-cta .btn{ flex: 1 1 auto; min-height: 48px; box-shadow: none; padding-inline: .9em; } @media (max-width: 399px){ .sticky-cta{ gap: var(--s-1); } .sticky-cta .btn{ font-size: .9rem; padding-inline: .6em; } } .sticky-cta__text{ display: none; font-weight: 700; } /* Hidden until the hero has scrolled away (kw.js), and over the buy block and footer. visibility keeps it out of the tab order. */ .sticky-cta.is-hidden{ transform: translateY(110%); visibility: hidden; transition: transform var(--t-med) var(--ease-out), visibility 0s linear var(--t-med); } .has-sticky{ padding-bottom: 88px; } @media (min-width: 900px){ .sticky-cta{ left: 50%; right: auto; bottom: var(--s-4); width: min(720px, calc(100% - 2 * var(--gutter))); transform: translateX(-50%); border: var(--bw) solid var(--ink-strong); border-radius: var(--r-pill); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5); box-shadow: 0 6px 0 var(--ink-strong), var(--shadow-2); } .sticky-cta.is-hidden{ transform: translate(-50%, 160%); } .sticky-cta__text{ display: block; flex: 1; } .sticky-cta .btn{ flex: 0 0 auto; } .has-sticky{ padding-bottom: 0; } } /* ---------- 17. Footer ---------- */ .site-footer{ background: #1f1b2e; color: #efe9dc; padding-block: var(--s-8) var(--s-6); margin-top: 0; } .site-footer a{ color: #ffd27a; } .site-footer h2{ font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: #c9c1d6; margin-bottom: var(--s-3); font-family: var(--font-body); } .footer__grid{ display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); } .footer__grid ul{ list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-1); } .footer__grid li a{ display: inline-flex; min-height: 40px; align-items: center; color: #efe9dc; text-decoration: none; } .footer__grid li a:hover{ color: #ffd27a; text-decoration: underline; } .footer__brand p{ color: #c9c1d6; font-size: var(--fs-sm); } .footer__legal{ border-top: 1px solid #3a3449; margin-top: var(--s-7); padding-top: var(--s-5); font-size: var(--fs-sm); color: #c9c1d6; display: grid; gap: var(--s-2); } .site-footer--minimal{ padding-block: var(--s-6); } /* ---------- 18. Lightbox (native