/* ---------------------------------------------------------------------------- Easy Jigsaw Puzzles — site styles Ported from PuzzleMyApp design-canvas (web/tokens.jsx). Paper palette is default; switch via . ----------------------------------------------------------------------------- */ /* ---- design tokens / palettes --------------------------------------------- */ :root { /* Paper — warm cream (default) */ --bg: #F2EBE0; --bg-elev: #FBF6EB; --surface: #FFFFFF; --surface-2: #ECE4D7; --line: rgba(30, 22, 16, 0.08); --line-2: rgba(30, 22, 16, 0.14); --text: #1A1410; --text-2: #6E5D4E; --text-3: #A89886; --accent: #C5704A; --accent-ink: #FFFFFF; --accent-soft: rgba(197, 112, 74, 0.12); --accent-2: #9A6B43; --error: #C04A38; --success: #4A8460; --paper: #F2EBE0; --play-bg: #1A1410; --play-fg: #F5EFE3; /* radii */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; --r-card: 18px; --r-hero: 28px; /* shadows */ --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.18); --sh-md: 0 4px 16px rgba(0, 0, 0, 0.10); --sh-lg: 0 12px 40px rgba(0, 0, 0, 0.18); --sh-hover: 0 18px 50px rgba(0, 0, 0, 0.22); --sh-hero: 0 32px 80px rgba(0, 0, 0, 0.18); /* type */ --serif: "Fraunces", "Source Serif 4", "New York", Charter, "Iowan Old Style", Georgia, serif; --ui: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif; --mono: "SF Mono", ui-monospace, Menlo, monospace; /* layout */ --max-width: 1140px; } [data-theme="cocoa"] { --bg: #14110D; --bg-elev: #1B1612; --surface: #221C16; --surface-2: #2C241B; --line: rgba(245, 239, 227, 0.08); --line-2: rgba(245, 239, 227, 0.14); --text: #F5EFE3; --text-2: #B6A993; --text-3: #74695A; --accent: #E8956B; --accent-ink: #1A0F08; --accent-soft: rgba(232, 149, 107, 0.16); --accent-2: #D4A574; --paper: #F5EFE3; --play-bg: #0E0C0A; --sh-md: 0 4px 16px rgba(0, 0, 0, 0.25); --sh-lg: 0 12px 40px rgba(0, 0, 0, 0.35); --sh-hover: 0 18px 50px rgba(0, 0, 0, 0.45); --sh-hero: 0 32px 80px rgba(0, 0, 0, 0.45); } [data-theme="oxblood"] { --bg: #15100F; --bg-elev: #1D1614; --surface: #241B18; --surface-2: #2F2320; --line: rgba(243, 234, 220, 0.08); --line-2: rgba(243, 234, 220, 0.14); --text: #F3EADC; --text-2: #B59E92; --text-3: #735A52; --accent: #D86A57; --accent-ink: #1A0908; --accent-soft: rgba(216, 106, 87, 0.16); --accent-2: #C49A6C; --paper: #F3EADC; --sh-hero: 0 32px 80px rgba(0, 0, 0, 0.45); } [data-theme="slate"] { --bg: #0F1417; --bg-elev: #161C20; --surface: #1E262B; --surface-2: #283238; --line: rgba(232, 238, 242, 0.08); --line-2: rgba(232, 238, 242, 0.14); --text: #E8EEF2; --text-2: #9AAAB4; --text-3: #5D6E78; --accent: #F0A455; --accent-ink: #1A0F05; --accent-soft: rgba(240, 164, 85, 0.16); --accent-2: #85B3C8; --paper: #E8EEF2; --sh-hero: 0 32px 80px rgba(0, 0, 0, 0.45); } /* ---- base ----------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--ui); font-size: 17px; line-height: 1.55; letter-spacing: -0.1px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Prevent any stray overflow on the X axis (decorative blocks, popovers, scatter canvases) from making the whole page horizontally scrollable on mobile. `clip` doesn't establish a scroll context — modern browsers since 2023 support it. */ overflow-x: clip; } /* For browsers that don't support overflow-x: clip yet, fall back to hidden. */ @supports not (overflow-x: clip) { html, body { overflow-x: hidden; } } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } img { max-width: 100%; display: block; } ::selection { background: var(--accent-soft); color: var(--text); } /* Page wrapper — paper-grain texture above the body bg. Intensity is controlled by . */ .site-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%20viewBox%3D%270%200%20200%20200%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%272%27%20seed%3D%273%27%2F%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200.5%200%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%20opacity%3D%270.4%27%2F%3E%3C%2Fsvg%3E"); opacity: 0.5; } [data-texture="off"] .site-bg { display: none; } [data-texture="soft"] .site-bg { opacity: 0.35; } [data-texture="heavy"] .site-bg { opacity: 0.75; } .wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; } @media (max-width: 767px) { .wrap { padding: 0 20px; } } /* ---- type ----------------------------------------------------------------- */ .serif { font-family: var(--serif); } .italic { font-style: italic; } .t-display { font-family: var(--serif); font-size: clamp(48px, 7vw, 84px); line-height: 0.96; letter-spacing: -2.2px; font-weight: 600; } .t-h1 { font-family: var(--serif); font-size: clamp(36px, 5vw, 56px); line-height: 1.02; letter-spacing: -1.4px; font-weight: 600; } .t-h2 { font-family: var(--serif); font-size: clamp(28px, 3.5vw, 40px); line-height: 1.08; letter-spacing: -0.9px; font-weight: 600; } .t-h3 { font-family: var(--serif); font-size: clamp(22px, 2.5vw, 28px); line-height: 1.18; letter-spacing: -0.5px; font-weight: 600; } .t-h4 { font-family: var(--serif); font-size: 20px; line-height: 1.3; letter-spacing: -0.2px; font-weight: 600; } .t-body { font-size: 17px; line-height: 1.55; } .t-bodylg { font-family: var(--serif); font-size: 19px; line-height: 1.6; font-weight: 400; color: var(--text); } .t-small { font-size: 14px; line-height: 1.5; } .t-micro { font-size: 12px; line-height: 1.4; letter-spacing: 0.6px; font-weight: 700; text-transform: uppercase; color: var(--accent); } /* ---- header (sticky top nav) ---------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 93%, transparent); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid var(--line); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 18px; padding-bottom: 18px; } @media (max-width: 767px) { .site-header .wrap { padding-top: 14px; padding-bottom: 14px; gap: 12px; } } .brand-lockup { display: inline-flex; align-items: center; gap: 12px; } .brand-mark { width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.06); overflow: hidden; } .brand-mark svg { display: block; } .brand-wordmark { font-family: var(--serif); font-size: 19px; line-height: 1; font-weight: 600; letter-spacing: -0.5px; color: var(--text); font-variation-settings: "SOFT" 100, "WONK" 0; white-space: nowrap; } @media (max-width: 767px) { .brand-wordmark { font-size: 16px; } } .site-nav { display: flex; align-items: center; gap: 28px; } @media (max-width: 767px) { .site-nav { display: none; } } .site-nav a { font-size: 14px; font-weight: 500; color: var(--text-2); border-bottom: 1.5px solid transparent; padding-bottom: 2px; transition: color 0.15s; } .site-nav a.active { color: var(--text); border-bottom-color: var(--accent); } .site-nav a:hover { color: var(--text); } .site-actions { display: flex; align-items: center; gap: 10px; } .icon-btn { width: 38px; height: 38px; border-radius: 10px; background: transparent; color: var(--text-2); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; } .icon-btn:hover { background: var(--surface-2); color: var(--text); } @media (max-width: 767px) { .icon-btn.desktop-only { display: none; } } @media (min-width: 768px) { .icon-btn.mobile-only { display: none; } } /* ---- buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: var(--r-md); font-family: var(--ui); font-size: 15px; font-weight: 600; letter-spacing: -0.1px; border: none; cursor: pointer; text-decoration: none; white-space: nowrap; user-select: none; transition: transform 0.12s, background 0.15s, box-shadow 0.15s, color 0.15s; } .btn:hover { transform: translateY(-1px); } .btn-sm { height: 36px; padding: 0 14px; font-size: 14px; border-radius: 8px; gap: 6px; } .btn-lg { height: 56px; padding: 0 26px; font-size: 17px; border-radius: 12px; gap: 10px; } .btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 6px 16px var(--accent-soft); } .btn-primary:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 10px 24px var(--accent-soft); } .btn-secondary { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255, 255, 255, 0.04); } .btn-secondary:hover { background: color-mix(in srgb, var(--surface-2) 80%, var(--text-2)); } .btn-ghost { background: transparent; color: var(--text-2); } .btn-ghost:hover { color: var(--text); background: var(--surface-2); } /* ---- footer --------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--line); padding: 64px 0 40px; background: var(--bg); margin-top: 48px; position: relative; z-index: 1; } @media (max-width: 767px) { .site-footer { padding: 48px 0 32px; } } .site-footer .wrap { display: grid; grid-template-columns: minmax(0, 320px) 1fr auto; gap: 48px; align-items: start; } @media (max-width: 767px) { .site-footer .wrap { grid-template-columns: 1fr; gap: 32px; } } .footer-intro { display: flex; flex-direction: column; gap: 16px; max-width: 320px; } .footer-intro p { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.55; } .footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 500px; margin-left: auto; margin-right: auto; } @media (max-width: 767px) { .footer-cols { grid-template-columns: 1fr 1fr; max-width: 100%; margin: 0; gap: 24px; } .footer-col-fineprint { display: none; } } /* show/hide helpers used by header buttons */ .show-mobile { display: none; } @media (max-width: 767px) { .hide-mobile { display: none; } .show-mobile { display: inline; } } /* ---- hero (home + stubs + 404) ------------------------------------------- */ .hero { padding: 64px 0 32px; position: relative; z-index: 1; } @media (max-width: 767px) { .hero { padding: 32px 0 16px; } } .hero-grid { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 56px; } @media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; gap: 24px; } } .hero-grid-stub { display: grid; grid-template-columns: 1fr; } .hero-text { max-width: 640px; } .hero-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; } .hero-em { color: var(--text-2); font-style: italic; font-weight: 500; } .hero-lede { font-size: 19px; color: var(--text-2); max-width: 520px; margin: 24px 0 0; line-height: 1.55; } @media (max-width: 767px) { .hero-lede { font-size: 17px; margin-top: 16px; } } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } @media (max-width: 767px) { .hero-cta { margin-top: 24px; } } .hero-art { width: 360px; height: 360px; flex-shrink: 0; position: relative; touch-action: none; } @media (max-width: 1000px) { .hero-art { width: 100%; height: 280px; } } .hero-art canvas { width: 100%; height: 100%; display: block; cursor: grab; } .hero-art canvas:active { cursor: grabbing; } .hero-demo-overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; z-index: 2; pointer-events: none; animation: fadeIn 0.25s ease; } .hero-demo-overlay.show { display: flex; pointer-events: auto; } .hero-demo-card { background: var(--surface); border-radius: var(--r-lg); padding: 18px 22px; text-align: center; box-shadow: var(--sh-lg), inset 0 0 0 1px var(--line); max-width: 280px; } .hero-demo-kicker { color: var(--accent); margin-bottom: 4px; } .hero-demo-title { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--text); margin-bottom: 14px; line-height: 1.25; } .hero-demo-actions { display: flex; align-items: center; justify-content: center; gap: 8px; } .hero-demo-actions [data-hero-replay] { width: 36px; padding: 0; font-size: 18px; } /* Desktop: show "Pick a real puzzle". Mobile: show "Get the iOS app". The two CTAs are pre-rendered so SSR HTML is final — no JS flicker. */ .hero-demo-cta-mobile { display: none; } @media (max-width: 767px) { .hero-demo-cta-desktop { display: none; } .hero-demo-cta-mobile { display: inline-flex; } } /* ---- how it works -------------------------------------------------------- */ .howitworks { padding: 48px 0 32px; position: relative; z-index: 1; } @media (max-width: 767px) { .howitworks { padding: 24px 0; } } .howitworks-card { padding: 40px 48px; border-radius: var(--r-card); background: var(--bg-elev); box-shadow: inset 0 0 0 1px var(--line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } @media (max-width: 767px) { .howitworks-card { padding: 24px; gap: 24px; grid-template-columns: 1fr; } } .howitworks-step { display: flex; flex-direction: column; gap: 10px; } .howitworks-num { font-family: var(--serif); font-style: italic; font-size: 28px; font-weight: 500; color: var(--accent); line-height: 1; } @media (max-width: 767px) { .howitworks-num { font-size: 22px; } } .howitworks-title { font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: -0.2px; color: var(--text); } @media (max-width: 767px) { .howitworks-title { font-size: 18px; } } .howitworks-step p { margin: 0; font-size: 15px; color: var(--text-2); max-width: 320px; } /* ---- generic section + section header ----------------------------------- */ .section { padding: 40px 0 56px; position: relative; z-index: 1; } @media (max-width: 767px) { .section { padding: 20px 0 32px; } } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; } @media (max-width: 767px) { .section-head { margin-bottom: 20px; } } .section-head-titles { display: flex; flex-direction: column; gap: 6px; } .section-head-titles h2 { margin: 0; } .t-micro { color: var(--accent); } .section-head-link { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--accent); } .section-head-link:hover { color: var(--accent-2); } @media (max-width: 767px) { .section-head-link { display: none; } } /* ---- category grid ------------------------------------------------------- */ .category-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; } @media (max-width: 1000px) { .category-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { .category-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } } .category-card { display: flex; flex-direction: column; text-decoration: none; color: var(--text); cursor: pointer; } .category-card-cover { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--r-card); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); transition: transform 0.18s ease, box-shadow 0.18s ease; } .category-card:hover .category-card-cover { transform: translateY(-2px); box-shadow: var(--sh-hover); } .category-card-bg { position: absolute; inset: 0; background-image: var(--card-gradient); z-index: 0; } .category-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform 0.4s ease; } .category-card:hover img { transform: scale(1.04); } .category-card-corner { position: absolute; top: 10px; right: 10px; z-index: 2; opacity: 0.55; } .category-card-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.6) 100%); z-index: 2; } .category-card-label { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 3; display: flex; justify-content: space-between; align-items: flex-end; color: #fff; } .category-card-name { font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: -0.4px; } @media (max-width: 767px) { .category-card-name { font-size: 18px; } } .category-card-count { font-size: 12px; color: rgba(255, 255, 255, 0.85); font-variant-numeric: tabular-nums; } /* ---- puzzle grid --------------------------------------------------------- */ .puzzle-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; } @media (max-width: 1000px) { .puzzle-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { .puzzle-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } } .puzzle-grid-wide { grid-template-columns: repeat(4, 1fr); margin-top: 32px; } @media (max-width: 1000px) { .puzzle-grid-wide { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { .puzzle-grid-wide { grid-template-columns: repeat(2, 1fr); } } .puzzle-grid-compact { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1000px) { .puzzle-grid-compact { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { .puzzle-grid-compact { grid-template-columns: repeat(2, 1fr); } } .puzzle-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--text); cursor: pointer; } .puzzle-card-compact { gap: 8px; } .puzzle-card-cover { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--r-card); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); transition: transform 0.18s ease, box-shadow 0.18s ease; } .puzzle-card:hover .puzzle-card-cover { transform: translateY(-2px); box-shadow: var(--sh-hover); } .puzzle-card-bg { position: absolute; inset: 0; background-image: var(--card-gradient); z-index: 0; } .puzzle-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform 0.4s ease; } .puzzle-card:hover img { transform: scale(1.03); } .puzzle-card-hover { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%); opacity: 0; display: flex; align-items: flex-end; padding: 12px; transition: opacity 0.2s ease; } .puzzle-card:hover .puzzle-card-hover { opacity: 1; } .puzzle-card-play { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.95); color: #1A0F08; font-size: 12px; font-weight: 600; } .puzzle-card-meta { padding: 0 2px; display: flex; flex-direction: column; gap: 2px; } .puzzle-card-title { font-family: var(--serif); font-size: 17px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.25; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .puzzle-card-compact .puzzle-card-title { font-size: 15px; } @media (max-width: 767px) { .puzzle-card-title { font-size: 16px; } } .puzzle-card-cat { font-size: 12px; color: var(--text-3); letter-spacing: 0.3px; text-transform: uppercase; font-weight: 600; } /* ---- breadcrumb ---------------------------------------------------------- */ .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-3); line-height: 1.4; margin: 20px 0; } .breadcrumb a { color: var(--text-2); } .breadcrumb a:hover { color: var(--text); } .breadcrumb span[aria-current="page"] { color: var(--text); } .breadcrumb svg { color: var(--text-3); opacity: 0.7; flex-shrink: 0; } /* ---- category page: collection card -------------------------------------- */ .category-page { padding-bottom: 56px; } .collection-card { position: relative; border-radius: var(--r-card); background: var(--bg-elev); box-shadow: inset 0 0 0 1px var(--line), var(--sh-md); overflow: hidden; padding: 40px 48px; margin-top: 8px; } @media (max-width: 767px) { .collection-card { padding: 24px; } } .collection-card-inner { position: relative; z-index: 2; max-width: 540px; } .collection-kicker { color: var(--accent); margin-bottom: 12px; } .collection-title { margin: 0 0 12px; } .collection-blurb { font-family: var(--serif); font-size: 19px; color: var(--text-2); margin: 0 0 24px; line-height: 1.5; } .collection-meta { display: flex; flex-wrap: wrap; gap: 24px; font-size: 14px; color: var(--text-2); } .collection-meta span { display: inline-flex; align-items: center; gap: 8px; } .collection-meta svg { color: var(--text-3); flex-shrink: 0; } .collection-bignum { position: absolute; top: -20px; right: -40px; font-family: var(--serif); font-weight: 600; font-size: 380px; line-height: 0.85; color: var(--accent); opacity: 0.18; letter-spacing: -20px; user-select: none; z-index: 1; } @media (max-width: 1000px) { .collection-bignum { font-size: 280px; right: -30px; } } @media (max-width: 767px) { .collection-bignum { font-size: 200px; right: -16px; top: -10px; } } /* ---- tag hero (lighter than category collection card) ------------------- */ .hero-tag { padding: 24px 0 16px; } .hero-tag .t-h1 { margin: 0 0 8px; } .hero-tag .hero-lede { margin-top: 12px; max-width: 540px; } .hero-meta { display: flex; gap: 20px; margin-top: 20px; font-size: 14px; color: var(--text-2); } /* ---- category SEO copy --------------------------------------------------- */ .category-about { margin: 64px auto 0; max-width: 720px; display: flex; flex-direction: column; gap: 16px; } @media (max-width: 767px) { .category-about { margin-top: 40px; } } .category-about-kicker { color: var(--text-3); margin-bottom: 4px; } .category-about p { margin: 0; color: var(--text); font-weight: 400; } /* ---- puzzle page --------------------------------------------------------- */ .puzzle-page { padding-bottom: 96px; } @media (max-width: 767px) { .puzzle-page { padding-bottom: 64px; } } .puzzle-hero-grid { display: grid; grid-template-columns: minmax(0, 540px) 1fr; gap: 56px; align-items: start; margin-top: 32px; } @media (max-width: 1000px) { .puzzle-hero-grid { grid-template-columns: 1fr; gap: 24px; } } .puzzle-hero-image-wrap { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-hero); overflow: hidden; box-shadow: var(--sh-hero), inset 0 0 0 1px var(--line); } .puzzle-hero-bg { position: absolute; inset: 0; background-image: var(--card-gradient); z-index: 0; } .puzzle-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .puzzle-hero-corner { position: absolute; bottom: -16px; right: -16px; width: 64px; height: 64px; transform: rotate(8deg); filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25)); z-index: 3; } .puzzle-info { display: flex; flex-direction: column; gap: 20px; } @media (max-width: 767px) { .puzzle-info { gap: 16px; } } .puzzle-info-cat { letter-spacing: 0.6px; } .puzzle-info-title { margin: 0; letter-spacing: -0.8px; text-wrap: balance; } .puzzle-info-tags { display: flex; gap: 8px; flex-wrap: wrap; } .tag { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 500; background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; text-decoration: none; transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s; } .tag-link { cursor: pointer; } .tag-link:hover { background: var(--accent); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent); transform: translateY(-1px); } .play-block { margin-top: 16px; padding: 28px; border-radius: var(--r-card); background: var(--bg-elev); box-shadow: inset 0 0 0 1px var(--line); } @media (max-width: 767px) { .play-block { padding: 20px; margin-top: 8px; } } .play-block-head { margin-bottom: 18px; } .play-block-head .t-h4 { margin: 0; color: var(--text); } .play-block-sub { font-size: 13px; color: var(--text-2); margin-top: 4px; } /* ---- difficulty grid + button ------------------------------------------- */ .diff-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } @media (max-width: 767px) { .diff-grid { gap: 8px; } } .diff-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; padding: 18px 8px 12px; border-radius: 14px; background: var(--surface); color: var(--text); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line-2); transition: transform 0.12s, box-shadow 0.15s, background 0.15s; min-width: 0; } .diff-btn:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--accent), 0 8px 24px var(--accent-soft); } .diff-btn-rec { background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); } .diff-btn-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); height: 20px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; white-space: nowrap; } .diff-btn-grid { width: 36px; height: 36px; display: grid; grid-template-columns: repeat(var(--dim, 4), 1fr); grid-template-rows: repeat(var(--dim, 4), 1fr); gap: 1.5px; } .diff-btn-grid i { background: currentColor; opacity: 0.55; border-radius: 1.5px; } .diff-btn-num { font-size: 18px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); } .diff-btn-label { font-size: 10px; color: var(--text-2); letter-spacing: 0.3px; text-transform: uppercase; font-weight: 600; } .diff-btn-time { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; } /* ---- puzzle description + siblings -------------------------------------- */ .puzzle-desc { margin-top: 72px; max-width: 720px; display: flex; flex-direction: column; gap: 16px; } @media (max-width: 767px) { .puzzle-desc { margin-top: 48px; } } .puzzle-desc-kicker { color: var(--text-3); } .puzzle-desc .t-bodylg { margin: 0; color: var(--text); font-weight: 400; } .puzzle-siblings { margin-top: 96px; } @media (max-width: 767px) { .puzzle-siblings { margin-top: 56px; } } /* ---- app store badges + Get-the-app section ----------------------------- */ .app-badges { display: flex; flex-wrap: wrap; gap: 12px; } .app-badge { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px; border-radius: 12px; background: var(--surface); color: var(--text); text-decoration: none; border: 1px solid var(--line-2); transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s; min-width: 200px; } .app-badge:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 24px var(--accent-soft); } .app-badge-lg { padding: 12px 22px; min-width: 230px; } .app-badge-icon { width: 28px; height: 28px; flex-shrink: 0; } .app-badge-lg .app-badge-icon { width: 32px; height: 32px; } .app-badge-text { display: flex; flex-direction: column; line-height: 1.1; } .app-badge-sub { font-size: 11px; font-weight: 500; color: var(--text-3); letter-spacing: 0.2px; } .app-badge-main { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--text); margin-top: 2px; letter-spacing: -0.2px; } .app-badge-lg .app-badge-main { font-size: 18px; } /* Home: dedicated CTA section */ .get-app-section { padding: 32px 0 80px; } @media (max-width: 767px) { .get-app-section { padding: 24px 0 56px; } } .get-app-card { padding: 48px; border-radius: var(--r-card); background: var(--bg-elev); box-shadow: inset 0 0 0 1px var(--line); display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 56px; align-items: center; } @media (max-width: 900px) { .get-app-card { grid-template-columns: 1fr; padding: 32px; gap: 28px; } .get-app-card .app-badges { width: 100%; } } .get-app-text .t-h2 { margin: 8px 0 12px; } .get-app-text p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--text-2); max-width: 520px; } /* /apps/ page hero + platform rows */ .apps-hero { padding: 24px 0 32px; } .apps-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; align-items: center; gap: 56px; } @media (max-width: 900px) { .apps-hero-grid { grid-template-columns: 1fr; gap: 32px; } } .apps-hero-art { width: 360px; height: 360px; display: flex; align-items: center; justify-content: center; } @media (max-width: 900px) { .apps-hero-art { width: 100%; height: 240px; } } .apps-hero-art svg { width: 100%; height: 100%; } .apps-platforms { padding: 24px 0 96px; } .apps-platform-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } @media (max-width: 767px) { .apps-platform-row { grid-template-columns: 1fr; } } .apps-platform { padding: 32px; border-radius: var(--r-card); background: var(--bg-elev); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 14px; } .apps-platform-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; } .apps-platform-icon svg { width: 32px; height: 32px; color: var(--text); } .apps-platform h2 { margin: 0; } .apps-platform p { margin: 0; color: var(--text-2); font-size: 16px; line-height: 1.6; flex-grow: 1; } .apps-platform .btn { align-self: flex-start; margin-top: 8px; } /* ---- legal pages (privacy + terms) -------------------------------------- */ .legal-page { padding: 16px 0 80px; max-width: 760px; } .legal-header { margin: 20px 0 40px; } .legal-header .t-h1 { margin: 8px 0 8px; } .legal-updated { margin: 0; font-size: 14px; color: var(--text-3); font-variant-numeric: tabular-nums; } .legal-body { display: flex; flex-direction: column; gap: 28px; } .legal-body section { display: flex; flex-direction: column; gap: 12px; } .legal-body h2 { margin: 0; color: var(--text); } .legal-body p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--text); } .legal-body strong { font-weight: 600; } .legal-body a { color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } .legal-body a:hover { border-bottom-color: var(--accent); } .legal-body code { font-family: var(--mono); font-size: 0.92em; background: var(--surface-2); padding: 1px 6px; border-radius: 4px; } .legal-body address { font-style: normal; font-size: 16px; line-height: 1.7; } .legal-list { margin: 0; display: flex; flex-direction: column; gap: 0; background: var(--bg-elev); border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line); padding: 8px 20px; } .legal-row { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: baseline; } .legal-row:last-child { border-bottom: none; } @media (max-width: 640px) { .legal-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; } } .legal-row dt { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-3); } .legal-row dd { margin: 0; font-size: 15px; color: var(--text); line-height: 1.5; } /* ---- play page (full-bleed game) ---------------------------------------- */ body:has(.play-stage) .site-header, body:has(.play-stage) .site-footer, body:has(.play-stage) .site-bg { display: none; } .play-stage { position: fixed; inset: 0; background: var(--paper); overflow: hidden; touch-action: none; } #board { display: block; width: 100%; height: 100%; cursor: grab; } #board:active { cursor: grabbing; } .play-hud { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 12px; padding: 16px 24px; z-index: 2; pointer-events: none; } @media (max-width: 767px) { .play-hud { padding: 12px 16px; gap: 8px; } } .play-hud > * { pointer-events: auto; } .play-hud-back { width: 44px; height: 44px; flex-shrink: 0; border-radius: 999px; background: var(--surface); color: var(--text); display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-md), inset 0 0 0 1px var(--line); transition: transform 0.12s, background 0.15s; } .play-hud-back:hover { transform: translateX(-2px); background: var(--surface-2); } .play-hud-title-block { flex: 1; min-width: 0; } .play-hud-title { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--text); letter-spacing: -0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 767px) { .play-hud-title { font-size: 16px; } } .play-hud-sub { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; } .play-hud-actions { display: flex; gap: 8px; } .play-hud-pill { display: inline-flex; align-items: center; background: var(--surface); border-radius: 999px; box-shadow: var(--sh-md), inset 0 0 0 1px var(--line); padding: 4px; gap: 2px; } .play-hud-pill-item { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: transparent; border: none; color: var(--text); font-family: var(--ui); font-size: 13px; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; transition: background 0.15s, color 0.15s; } .play-hud-pill-item:hover { background: var(--surface-2); } .play-hud-pill-item:first-child { padding-left: 16px; } .play-hud-pill-item:not(button) { cursor: default; } @media (max-width: 767px) { .play-hud-pill-item span { display: none; } .play-hud-pill-item:first-child span { display: inline; } .play-hud-pill-item { padding: 8px 10px; } } .play-toggles { position: absolute; top: 76px; left: 50%; transform: translateX(-50%); z-index: 2; display: inline-flex; gap: 8px; } @media (max-width: 767px) { .play-toggles { top: 68px; gap: 6px; } } .play-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: var(--surface); border: none; color: var(--text); font-family: var(--ui); font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: var(--sh-md), inset 0 0 0 1px var(--line); transition: background 0.15s, color 0.15s, box-shadow 0.15s; } .play-toggle:hover { background: var(--surface-2); } .play-toggle.is-active { background: var(--accent); color: var(--accent-ink); box-shadow: var(--sh-md), inset 0 0 0 1px transparent; } /* ---- win overlay --------------------------------------------------------- */ .win-overlay { position: absolute; inset: 0; background: color-mix(in srgb, var(--paper) 78%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; z-index: 3; animation: fadeIn 0.2s ease; } .win-overlay.show { display: flex; } .win-card { background: var(--surface); border-radius: 22px; padding: 36px 40px; text-align: center; max-width: 420px; box-shadow: var(--sh-lg), inset 0 0 0 1px var(--line); } @media (max-width: 767px) { .win-card { padding: 28px 24px; max-width: calc(100vw - 32px); } } .win-kicker { color: var(--accent); margin-bottom: 8px; } .win-title { margin: 0 0 12px; color: var(--text); } .win-time { margin: 0 0 24px; color: var(--text-2); font-size: 15px; } .win-time strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } .win-actions { display: flex; flex-direction: column; gap: 10px; } .win-actions .btn { width: 100%; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ---- theme + texture switcher ------------------------------------------- */ .theme-switcher { position: relative; } .theme-popover { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; min-width: 260px; padding: 18px; background: var(--surface); border-radius: 14px; box-shadow: var(--sh-lg), inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 18px; animation: fadeIn 0.12s ease; } .theme-popover[hidden] { display: none; } @media (max-width: 767px) { .theme-popover { right: -8px; min-width: 240px; padding: 16px; } } .theme-popover-title { font-size: 11px; font-weight: 700; color: var(--text-3); letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 10px; } .theme-swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .swatch { display: inline-flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: transparent; border: 1px solid var(--line); cursor: pointer; text-align: left; color: var(--text); font-size: 13px; font-weight: 500; transition: border-color 0.15s, background 0.15s; } .swatch:hover { background: var(--surface-2); } .swatch[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); } .swatch-dot { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, var(--dot-a), var(--dot-b)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14); } .swatch-paper .swatch-dot { --dot-a: #F2EBE0; --dot-b: #C5704A; } .swatch-cocoa .swatch-dot { --dot-a: #2C241B; --dot-b: #E8956B; } .swatch-oxblood .swatch-dot { --dot-a: #2F2320; --dot-b: #D86A57; } .swatch-slate .swatch-dot { --dot-a: #1E262B; --dot-b: #F0A455; } .theme-segments { display: inline-flex; background: var(--surface-2); padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); width: 100%; } .segment { flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 12px; border-radius: 999px; background: transparent; border: none; cursor: pointer; color: var(--text-2); font-family: var(--ui); font-size: 13px; font-weight: 600; transition: background 0.15s, color 0.15s, box-shadow 0.15s; } .segment:hover { color: var(--text); } .segment[aria-checked="true"] { background: var(--surface); color: var(--text); box-shadow: var(--sh-sm); } /* ---- language switcher --------------------------------------------------- */ .lang-popover { min-width: 260px; padding: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .lang-item { display: flex; align-items: baseline; gap: 8px; padding: 10px 12px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 14px; transition: background 0.15s, color 0.15s; } .lang-item:hover { background: var(--surface-2); } .lang-item.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .lang-code { font-family: var(--mono); font-size: 11px; color: var(--text-3); font-weight: 700; letter-spacing: 0.5px; min-width: 22px; } .lang-item.is-active .lang-code { color: var(--accent); } .lang-native { color: inherit; } .footer-col-title { font-size: 11px; color: var(--text-3); letter-spacing: 0.6px; text-transform: uppercase; font-weight: 700; margin: 0 0 10px; } .footer-col a { display: block; font-size: 14px; color: var(--text-2); line-height: 2.2; } .footer-col a:hover { color: var(--text); } .footer-meta { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; } @media (max-width: 767px) { .footer-meta { align-items: flex-start; } } .footer-socials { display: flex; gap: 10px; color: var(--text-3); } .footer-socials a { color: inherit; } .footer-socials a:hover { color: var(--text); } .footer-tagline { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--text-3); } .footer-credits { font-size: 12px; color: var(--text-3); } .footer-credits a { color: var(--text-2); border-bottom: 1px solid color-mix(in srgb, var(--text-2) 30%, transparent); } .footer-credits a:hover { color: var(--accent); border-bottom-color: var(--accent); } .footer-copy { font-size: 12px; color: var(--text-3); }