/* ============================================================ Sudoception — system.css "The puzzle page": frosted glass over a lime aurora with newsprint grain. Dark default; full light "paper" mode via [data-theme="paper"] on . Tokens and components are lifted 1:1 from the Claude Design prototypes (Sudoception Landing / Hero + System). Highlighter lime carries actions only; ink indigo carries data, links and focus. Inter for UI, Newsreader for display and large digits. ============================================================ */ /* Self-hosted variable fonts (SIL OFL — licences in fonts/). No third-party requests anywhere on this site. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("fonts/inter-variable.woff2") format("woff2"); } @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/newsreader-variable.woff2") format("woff2"); } @font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400 500; font-display: swap; src: url("fonts/newsreader-italic-variable.woff2") format("woff2"); } /* ---------- TOKENS : DARK (default) ---------- */ :root { --bg: #101114; --bg2: #17181D; --text: #F5F6FA; --muted: #A0A3B1; --faint: #6C6F7E; --eyebrow: #8FE04A; --accentInk: #C8F03A; --indigoInk: #8FA0FF; --glass1: rgba(255,255,255,.06); --glass2: rgba(255,255,255,.10); --glass3: rgba(255,255,255,.14); --border: rgba(255,255,255,.12); --border2: rgba(255,255,255,.22); --hl: rgba(255,255,255,.28); --badgeBg: rgba(16,17,20,.5); --gridBg: rgba(16,17,20,.35); --aur1: .16; --aur2: .12; --aur3: .14; --grain: .05; /* grid-mini cells */ --cellBg: rgba(255,255,255,.05); --cellBorder: rgba(255,255,255,.07); --entry: #8FA0FF; --lbBar: rgba(255,255,255,.10); --accent: #C8F03A; --accent2: #8FE04A; --accentGrad: linear-gradient(135deg, #C8F03A, #8FE04A); --indigo: #5B6CFF; --serif: "Newsreader", Georgia, serif; --sans: "Inter", system-ui, sans-serif; --mono: ui-monospace, SFMono-Regular, monospace; } /* ---------- TOKENS : PAPER ---------- */ [data-theme="paper"] { --bg: #FAF8F2; --bg2: #FFFFFF; --text: #15161A; --muted: #5B5F6E; --faint: #8B8E9A; --eyebrow: #5A8F12; --accentInk: #5A8F12; --indigoInk: #3A48D6; --glass1: rgba(255,255,255,.6); --glass2: rgba(255,255,255,.75); --glass3: rgba(255,255,255,.9); --border: rgba(21,22,26,.10); --border2: rgba(21,22,26,.16); --hl: rgba(255,255,255,.9); --badgeBg: rgba(255,255,255,.7); --gridBg: rgba(21,22,26,.06); --aur1: .22; --aur2: .16; --aur3: .12; --grain: .035; --cellBg: rgba(255,255,255,.85); --cellBorder: rgba(21,22,26,.08); --entry: #3A48D6; --lbBar: rgba(21,22,26,.10); } /* ---------- BASE ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; transition: background .3s, color .3s; } a { color: #5B6CFF; text-decoration: none; } a:hover { color: #8FA0FF; } *:focus-visible { outline: 2px solid #5B6CFF; outline-offset: 2px; border-radius: 4px; } ::selection { background: rgba(200,240,58,.3); } img, svg { max-width: 100%; } button { font: inherit; } @keyframes aurora-a { 0% { transform: translate(0,0); } 50% { transform: translate(60px,40px); } 100% { transform: translate(0,0); } } @keyframes aurora-b { 0% { transform: translate(0,0); } 50% { transform: translate(-50px,30px); } 100% { transform: translate(0,0); } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; } html { scroll-behavior: auto; } } /* ---------- LAYOUT PRIMITIVES ---------- */ .wrap { max-width: 1200px; margin: 0 auto; padding-left: 32px; padding-right: 32px; } .narrow { max-width: 760px; margin: 0 auto; padding: 28px 32px 96px; } .skip-link { position: absolute; left: -9999px; top: 16px; z-index: 50; font-size: 14px; font-weight: 600; color: #101114; background: var(--accentGrad); border-radius: 10px; padding: 10px 16px; } .skip-link:focus-visible { left: 16px; color: #101114; } /* ---------- TYPE ---------- */ .eyebrow { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--eyebrow); } .h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 38px; letter-spacing: -0.01em; } .tnum { font-variant-numeric: tabular-nums; } /* ---------- GLASS ---------- */ .glass { border-radius: 24px; padding: 26px; background: var(--glass1); border: 1px solid var(--border); box-shadow: inset 0 1px 0 var(--hl); } .glass--lift { border-radius: 28px; background: linear-gradient(180deg, var(--glass3), var(--glass1)); border: 1px solid var(--border2); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); box-shadow: inset 0 1px 0 var(--hl), 0 2px 6px rgba(0,0,0,.12), 0 24px 60px rgba(0,0,0,.35); } /* ---------- BUTTONS ---------- */ .btn-primary { display: inline-block; cursor: pointer; border: none; font-size: 15px; font-weight: 600; color: #101114; background: var(--accentGrad); border-radius: 14px; padding: 12px 24px; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 24px rgba(200,240,58,.3); } .btn-primary:hover { color: #101114; } .btn-pill { display: inline-block; font-size: 13px; font-weight: 600; color: #101114; background: var(--accentGrad); border-radius: 999px; padding: 9px 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 18px rgba(200,240,58,.28); } .btn-pill:hover { color: #101114; } .theme-toggle { cursor: pointer; font-size: 13px; color: var(--muted); background: var(--glass2); border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; } /* ---------- THE MARK (3×3, one lime cell) ---------- */ .mark { --cell: 7px; --gap: 2px; --r: 2px; --cellc: var(--muted); display: grid; grid-template-columns: repeat(3, var(--cell)); gap: var(--gap); flex: none; } .mark i { display: block; width: var(--cell); height: var(--cell); border-radius: var(--r); background: var(--cellc); } .mark i:nth-child(5) { background: var(--accentGrad); opacity: 1; } .mark--sm { --cell: 6px; --gap: 1.5px; --r: 1.5px; --cellc: var(--faint); } /* ---------- CHIPS ---------- */ .chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); background: var(--glass1); border: 1px solid var(--border); border-radius: 10px; padding: 6px 12px; } .chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--indigoInk); } /* The weekly grade scale, lime → indigo. Colour pairs from the prototype. */ .grade-chip { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; font-variant-numeric: tabular-nums; color: var(--gc); background: color-mix(in srgb, var(--gc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gc) 35%, transparent); } .grade-chip.g1 { --gc: #C8F03A; --gi: #4A6B10; } .grade-chip.g2 { --gc: #B4E344; --gi: #4A6B10; } .grade-chip.g3 { --gc: #98D45C; --gi: #3E6E2A; } .grade-chip.g4 { --gc: #7CBB8E; --gi: #2C6148; } .grade-chip.g5 { --gc: #69A0BE; --gi: #2A5A75; } .grade-chip.g6 { --gc: #5F85E4; --gi: #2F49A8; } .grade-chip.g7 { --gc: #5B6CFF; --gi: #3A48D6; } [data-theme="paper"] .grade-chip { color: var(--gi); background: color-mix(in srgb, var(--gc) 15%, transparent); border-color: color-mix(in srgb, var(--gc) 40%, transparent); } /* ---------- APP STORE BADGE ---------- */ /* Apple's official artwork from Apple Marketing Resources, self-hosted in images/badges/. Black on paper, white on dark, swapped here. Never recolour, stretch or outline it; keep it 40px tall or more. */ .appstore-badge { display: inline-flex; align-items: center; border-radius: 8px; transition: transform .16s cubic-bezier(.2,0,0,1); } .appstore-badge:hover { transform: translateY(-1px); } .appstore-badge img { display: block; height: 44px; width: auto; } .appstore-badge .appstore-badge__light { display: none; } [data-theme="paper"] .appstore-badge .appstore-badge__light { display: block; } [data-theme="paper"] .appstore-badge .appstore-badge__dark { display: none; } /* ---------- PLACEHOLDER TAG — the honesty rule, visibly enforced ---------- */ .ph-tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--indigoInk); border: 1px dashed var(--indigoInk); border-radius: 6px; padding: 3px 8px; line-height: 1.3; } .ph-tag--xs { font-size: 10px; padding: 2px 7px; } /* ---------- SEAL ---------- */ .seal { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--faint); } .seal:hover { color: var(--faint); } .seal--boxed { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; }