/* Puzzle Press design system. Newspaper-quiet: warm paper, ink and amber accents, generous whitespace, serif display type for mastheads and titles, system UI type for everything you touch. Every game page layers its own style.css on top of this file. */ /* ---------- tokens ---------- */ :root { --bg: #f6f2e8; --surface: #fffdf8; --surface-2: #efe9db; --text: #201d18; --muted: #6c6558; --line: #ded6c3; --accent: #1e3a5f; --accent-strong: #16293f; --accent-2: #8a2e22; --good: #35633f; --bad: #a5322a; --tile-ink: #1e3a5f; --tile-mark: #b8791a; --tile-absent: #8a8272; --radius: 0.7rem; --radius-sm: 0.4rem; --shadow: 0 1px 2px rgba(30, 25, 15, 0.06), 0 10px 28px rgba(30, 25, 15, 0.08); --shadow-sm: 0 1px 3px rgba(30, 25, 15, 0.12); --font-display: Georgia, "Times New Roman", Cambria, serif; --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --on-accent: #fff; --focus-ring: 0 0 0 3px color-mix(in srgb, var(--g-color, var(--accent)) 35%, transparent); --motion-fast: 120ms; --motion-med: 220ms; --motion-slow: 420ms; --ease: cubic-bezier(0.2, 0.7, 0.3, 1); color-scheme: light; /* Per-game identity colors. Light values here are dark/saturated enough for white text at AA; dark-theme values below are light pastels meant for --on-accent (dark ink) text instead. Soft tints are derived once, from --surface, so they track theme changes automatically. */ --g-wordrow: #24478c; --g-clusters: #7a3568; --g-heptagram: #9c6210; --g-minigrid: #1b6e68; --g-wordweave: #4f6b28; --g-edgeways: #a8480f; --g-sudoku: #4b5768; --g-wordrow-soft: color-mix(in srgb, var(--g-wordrow) 16%, var(--surface)); --g-clusters-soft: color-mix(in srgb, var(--g-clusters) 16%, var(--surface)); --g-heptagram-soft: color-mix(in srgb, var(--g-heptagram) 16%, var(--surface)); --g-minigrid-soft: color-mix(in srgb, var(--g-minigrid) 16%, var(--surface)); --g-wordweave-soft: color-mix(in srgb, var(--g-wordweave) 16%, var(--surface)); --g-edgeways-soft: color-mix(in srgb, var(--g-edgeways) 16%, var(--surface)); --g-sudoku-soft: color-mix(in srgb, var(--g-sudoku) 16%, var(--surface)); } /* Maps the data-game attribute (set by initChrome on , and by the hub on each card) onto the two working custom properties every themed component reads: --g-color and --g-color-soft. Components fall back to --accent when neither is set, so untagged chrome is unaffected. */ [data-game="wordrow"] { --g-color: var(--g-wordrow); --g-color-soft: var(--g-wordrow-soft); } [data-game="clusters"] { --g-color: var(--g-clusters); --g-color-soft: var(--g-clusters-soft); } [data-game="heptagram"] { --g-color: var(--g-heptagram); --g-color-soft: var(--g-heptagram-soft); } [data-game="minigrid"] { --g-color: var(--g-minigrid); --g-color-soft: var(--g-minigrid-soft); } [data-game="wordweave"] { --g-color: var(--g-wordweave); --g-color-soft: var(--g-wordweave-soft); } [data-game="edgeways"] { --g-color: var(--g-edgeways); --g-color-soft: var(--g-edgeways-soft); } [data-game="sudoku"] { --g-color: var(--g-sudoku); --g-color-soft: var(--g-sudoku-soft); } [data-game="wordrow"] .pp-card__glyph { mask-image: url(icons/wordrow.svg); -webkit-mask-image: url(icons/wordrow.svg); } [data-game="clusters"] .pp-card__glyph { mask-image: url(icons/clusters.svg); -webkit-mask-image: url(icons/clusters.svg); } [data-game="heptagram"] .pp-card__glyph { mask-image: url(icons/heptagram.svg); -webkit-mask-image: url(icons/heptagram.svg); } [data-game="minigrid"] .pp-card__glyph { mask-image: url(icons/minigrid.svg); -webkit-mask-image: url(icons/minigrid.svg); } [data-game="wordweave"] .pp-card__glyph { mask-image: url(icons/wordweave.svg); -webkit-mask-image: url(icons/wordweave.svg); } [data-game="edgeways"] .pp-card__glyph { mask-image: url(icons/edgeways.svg); -webkit-mask-image: url(icons/edgeways.svg); } [data-game="sudoku"] .pp-card__glyph { mask-image: url(icons/sudoku.svg); -webkit-mask-image: url(icons/sudoku.svg); } [data-theme="dark"] { --bg: #14161a; --surface: #1c1f24; --surface-2: #24272d; --text: #eae5d8; --muted: #9b968a; --line: #34373d; --accent: #6f9cca; --accent-strong: #8ab0d8; --accent-2: #d9895f; --good: #6ea87c; --bad: #d9756c; --tile-ink: #4d7eae; --tile-mark: #d1993f; --tile-absent: #565048; --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.45); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --on-accent: var(--bg); --focus-ring: 0 0 0 3px color-mix(in srgb, var(--g-color, var(--accent)) 45%, transparent); color-scheme: dark; --g-wordrow: #7fa6dc; --g-clusters: #cf8ebd; --g-heptagram: #e0a94a; --g-minigrid: #6cc4bd; --g-wordweave: #a9c37a; --g-edgeways: #e08a52; --g-sudoku: #9aa6b8; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #14161a; --surface: #1c1f24; --surface-2: #24272d; --text: #eae5d8; --muted: #9b968a; --line: #34373d; --accent: #6f9cca; --accent-strong: #8ab0d8; --accent-2: #d9895f; --good: #6ea87c; --bad: #d9756c; --tile-ink: #4d7eae; --tile-mark: #d1993f; --tile-absent: #565048; --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.45); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --on-accent: var(--bg); --focus-ring: 0 0 0 3px color-mix(in srgb, var(--g-color, var(--accent)) 45%, transparent); color-scheme: dark; --g-wordrow: #7fa6dc; --g-clusters: #cf8ebd; --g-heptagram: #e0a94a; --g-minigrid: #6cc4bd; --g-wordweave: #a9c37a; --g-edgeways: #e08a52; --g-sudoku: #9aa6b8; } } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 16px; line-height: 1.5; transition: background-color var(--motion-med) var(--ease), color var(--motion-med) var(--ease); } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; text-align: inherit; } a { color: var(--accent); } h1, h2, h3, p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } .pp-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .pp-skip-link { position: fixed; top: -3rem; left: 0.75rem; z-index: 1000; background: var(--accent); color: #fff; padding: 0.6rem 1rem; border-radius: var(--radius-sm); transition: top var(--motion-fast) var(--ease); } .pp-skip-link:focus { top: 0.75rem; } /* ---------- layout ---------- */ .pp-wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; } /* ---------- masthead (hub) ---------- */ .pp-masthead { border-bottom: 3px double var(--line); padding: 2.5rem 0 1.5rem; } .pp-masthead__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .pp-wordmark { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 6vw, 3.6rem); letter-spacing: -0.01em; color: var(--text); text-decoration: none; display: inline-block; } .pp-wordmark:hover { color: var(--accent); } .pp-masthead__rule { margin-top: 0.4rem; display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-ui); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .pp-masthead__rule::before, .pp-masthead__rule::after { content: ""; height: 1px; flex: 1; background: var(--line); } .pp-dateline { margin-top: 0.9rem; font-family: var(--font-display); font-style: italic; color: var(--muted); font-size: 1.05rem; } .pp-progress { margin-top: 0.35rem; font-size: 0.85rem; color: var(--muted); } .pp-progress__count { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } /* ---------- theme toggle ---------- */ .pp-theme-toggle { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; flex: none; box-shadow: var(--shadow-sm); transition: transform var(--motion-fast) var(--ease), background-color var(--motion-med) var(--ease); } .pp-theme-toggle:hover { transform: translateY(-1px); } .pp-theme-toggle svg { width: 1.15rem; height: 1.15rem; stroke: var(--text); } /* ---------- game grid (hub) ---------- */ .pp-grid { padding: 2.25rem 0 3rem; display: grid; grid-template-columns: 1fr; gap: 1.1rem; } @media (min-width: 560px) { .pp-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 860px) { .pp-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1180px) { .pp-grid { grid-template-columns: repeat(4, 1fr); } } .pp-card { position: relative; display: flex; flex-direction: column; gap: 0.85rem; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--g-color, var(--line)); border-radius: var(--radius); padding: 1.3rem 1.4rem 1.2rem; text-decoration: none; color: var(--text); box-shadow: var(--shadow-sm); transition: transform var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease); } .pp-card:hover, .pp-card:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 30px color-mix(in srgb, var(--g-color, var(--accent)) 24%, transparent), var(--shadow-sm); border-color: var(--g-color, var(--accent)); } .pp-card:focus-visible { outline: none; box-shadow: 0 14px 30px color-mix(in srgb, var(--g-color, var(--accent)) 24%, transparent), var(--focus-ring); } .pp-card__top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .pp-card__icon { width: 2.9rem; height: 2.9rem; border-radius: 50%; background: var(--g-color-soft, var(--surface-2)); display: grid; place-items: center; flex: none; transition: background-color var(--motion-med) var(--ease); } .pp-card__glyph { width: 1.5rem; height: 1.5rem; background-color: var(--g-color, var(--accent)); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .pp-card__wide-text { display: flex; flex-direction: column; gap: 0.35rem; } .pp-card__name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; } .pp-card__tagline { color: var(--muted); font-size: 0.95rem; line-height: 1.45; flex: 1; } .pp-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.3rem 0.65rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); } .pp-chip[data-state="solved"] { background: color-mix(in srgb, var(--good) 16%, var(--surface)); color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, var(--line)); } .pp-chip[data-state="lost"] { background: color-mix(in srgb, var(--bad) 14%, var(--surface)); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); } .pp-chip[data-state="continue"] { background: var(--g-color-soft, color-mix(in srgb, var(--accent) 12%, var(--surface))); color: var(--g-color, var(--accent)); border-color: color-mix(in srgb, var(--g-color, var(--accent)) 32%, var(--line)); } .pp-chip__dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; } /* ---------- last card: the week's classic gets a deliberate wide finale row instead of an orphaned single card trailing the grid. ---------- */ @media (min-width: 560px) { .pp-card--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 1.1rem; padding: 1.1rem 1.5rem; } .pp-card--wide .pp-card__wide-text { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 0.9rem; } .pp-card--wide .pp-card__tagline { flex: none; } .pp-card--wide .pp-chip { align-self: center; } } /* ---------- footer ---------- */ .pp-footer { border-top: 1px solid var(--line); padding: 1.75rem 0 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; color: var(--muted); font-size: 0.88rem; } .pp-footer a { color: var(--muted); text-decoration: underline; text-underline-offset: 0.2em; } .pp-footer a:hover { color: var(--accent); } /* ---------- game chrome top bar ---------- */ .pp-topbar { position: sticky; top: 0; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--line); backdrop-filter: saturate(1.1) blur(6px); } .pp-topbar__inner { max-width: 720px; margin: 0 auto; padding: 0.65rem 1rem; display: flex; align-items: center; gap: 0.75rem; } .pp-topbar__wordmark { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; text-decoration: none; color: var(--text); flex: none; } .pp-topbar__wordmark:hover { color: var(--accent); } .pp-topbar__divider { width: 1px; height: 1.3rem; background: var(--line); flex: none; } .pp-topbar__title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; justify-content: center; } .pp-topbar__game { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pp-topbar__underline { display: block; width: 1.8rem; height: 3px; border-radius: 2px; background: var(--g-color, var(--accent)); } .pp-topbar__actions { display: flex; align-items: center; gap: 0.35rem; flex: none; } .pp-icon-btn { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; color: var(--text); transition: background-color var(--motion-fast) var(--ease); } .pp-icon-btn:hover { background: var(--surface-2); } .pp-icon-btn svg { width: 1.2rem; height: 1.2rem; stroke: currentColor; } /* ---------- buttons ---------- */ .pp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px; padding: 0.55rem 1.1rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: transform var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease), background-color var(--motion-fast) var(--ease); } .pp-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } .pp-btn:active { transform: translateY(0); } .pp-btn--primary { background: var(--g-color, var(--accent)); border-color: var(--g-color, var(--accent)); color: var(--on-accent); } .pp-btn--primary:hover { background: color-mix(in srgb, var(--g-color, var(--accent)) 85%, black); border-color: color-mix(in srgb, var(--g-color, var(--accent)) 85%, black); } .pp-btn--ghost { background: transparent; border-color: transparent; } .pp-btn--ghost:hover { background: var(--surface-2); } /* ---------- in-game placement standard: difficulty tabs + status row ---------- */ .pp-diff-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 1rem; } .pp-difftabs { display: flex; gap: 0.4rem; flex: 1 1 auto; min-width: 0; } .pp-difftabs__tab { flex: 1; min-height: 44px; padding: 0.4rem 0.7rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-weight: 600; font-size: 0.9rem; white-space: nowrap; transition: transform var(--motion-fast) var(--ease), background-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease); } .pp-difftabs__tab:hover { border-color: var(--g-color, var(--accent)); } .pp-difftabs__tab[aria-selected="true"] { background: var(--g-color, var(--accent)); border-color: var(--g-color, var(--accent)); color: var(--on-accent); } .pp-status-row { display: flex; align-items: center; gap: 0.6rem; flex: none; color: var(--muted); font-weight: 600; font-size: 0.9rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .pp-stats-diff { margin-bottom: 0.6rem; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; } /* ---------- tiles (letter games) ---------- */ .pp-tile { position: relative; display: grid; place-items: center; aspect-ratio: 1; border: 2px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; text-transform: uppercase; background: var(--surface); color: var(--text); transition: transform var(--motion-fast) var(--ease), background-color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease); } .pp-tile[data-state="correct"] { background: var(--tile-ink); border-color: var(--tile-ink); color: #fff; } .pp-tile[data-state="present"] { background: var(--tile-mark); border-color: var(--tile-mark); color: #241a04; } .pp-tile[data-state="absent"] { background: var(--tile-absent); border-color: var(--tile-absent); color: #fff; } .pp-tile[data-state="correct"]::after, .pp-tile[data-state="present"]::after { content: ""; position: absolute; right: 0.28em; bottom: 0.28em; width: 0.32em; height: 0.32em; pointer-events: none; } .pp-tile[data-state="correct"]::after { border: 0.09em solid rgba(255, 255, 255, 0.85); border-radius: 50%; background: transparent; } .pp-tile[data-state="present"]::after { border-radius: 50%; background: rgba(36, 26, 4, 0.75); } .pp-tile--pop { animation: pp-pop var(--motion-fast) var(--ease); } .pp-tile--flip { animation: pp-flip var(--motion-slow) var(--ease); } @keyframes pp-pop { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } } @keyframes pp-flip { 0% { transform: rotateX(0deg); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0deg); } } /* ---------- modal ---------- */ .pp-modal-backdrop { position: fixed; inset: 0; background: rgba(20, 17, 12, 0.5); display: grid; place-items: center; padding: 1.25rem; z-index: 100; animation: pp-fade var(--motion-fast) var(--ease); } .pp-modal { width: min(440px, 100%); max-height: min(80vh, 640px); overflow: auto; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; animation: pp-rise var(--motion-med) var(--ease); } .pp-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; } .pp-modal__title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; } .pp-modal__body { font-size: 0.98rem; line-height: 1.55; color: var(--text); } .pp-modal__body p + p { margin-top: 0.7rem; } @keyframes pp-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes pp-rise { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ---------- toast ---------- */ .pp-toast-region { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; pointer-events: none; } .pp-toast { background: var(--text); color: var(--bg); padding: 0.6rem 1rem; border-radius: 999px; font-size: 0.88rem; font-weight: 600; box-shadow: var(--shadow); opacity: 0; transform: translateY(6px); transition: opacity var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease); } .pp-toast--visible { opacity: 1; transform: translateY(0); } /* ---------- stats block ---------- */ .pp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; text-align: center; } .pp-stat__value { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; } .pp-stat__label { margin-top: 0.15rem; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } /* ---------- game page frame ---------- */ .pp-game { max-width: 520px; margin: 0 auto; padding: 1.5rem 1rem 3rem; } .pp-game--wide { max-width: 560px; } /* ---------- utility ---------- */ .pp-muted { color: var(--muted); } .pp-center { text-align: center; } /* ---------- confetti canvas ---------- */ .pp-confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 300; } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---------- responsive ---------- */ @media (max-width: 480px) { .pp-masthead { padding-top: 1.75rem; } .pp-modal { padding: 1.15rem; } /* Tighten the topbar so the longest game names (Heptagram, Wordweave) still fit whole next to the wordmark and the three action buttons at a 360px viewport instead of truncating to an ellipsis. */ .pp-topbar__inner { padding: 0.65rem 0.75rem; gap: 0.5rem; } .pp-topbar__wordmark, .pp-topbar__game { font-size: 0.92rem; } .pp-topbar__actions { gap: 0.2rem; } } @media (min-width: 1024px) { .pp-wrap { padding: 0 1.75rem; } }