/* ============================================================ THEME TOKENS — the opening screen's colorway, site-wide: orange ground, green accents, black ink/outlines, white for the things that need to read (cards, the "7" circle). Ponke's structure, the opening page's colours. No red, blue or gray. Dark: black ground, white ink, same orange/green. ============================================================ */ :root { /* Navy colorway (degencoinflip dark): deep-blue ground, white bubbles + black text, purple accent. --orange is the accent role site-wide, so it now carries the purple. */ --orange: #7C4DFF; /* accent (purple) */ --orange-deep: #512DA8; /* accent shade */ --green: #1FA84F; /* the ball */ --green-deep: #127A38; /* the ball's shade */ --green-hat: #2E7D32; /* the hat */ --black: #000000; --white: #FFFFFF; --bg: #0F172A; /* navy ground */ --bg-2: #0B1220; --bg-glow: radial-gradient(ellipse 90% 85% at 50% 40%, #1B2B4D 0%, #142138 44%, #0F172A 100%); /* subtle navy lift, darker at the edges */ --intro-glow: radial-gradient(ellipse 92% 88% at 50% 42%, #21365f 0%, #16264a 44%, #0F172A 100%); /* the opening screen keeps a slightly brighter centre */ --pf-1: #CBD8F2; --pf-2: #FFFFFF; --pf-3: #9FB4E0; --pf-mark: rgba(255, 255, 255, 0.30); /* opening-screen particles: soft blue-white on navy */ --ink: var(--white); --ink-50: rgba(255, 255, 255, 0.60); --ink-40: rgba(255, 255, 255, 0.45); --ink-10: rgba(255, 255, 255, 0.14); --ink-05: rgba(255, 255, 255, 0.07); --card: var(--white); /* white bubbles */ --card-ink: #0B1220; /* black text inside bubbles */ --card-ink-50: rgba(11, 18, 32, 0.55); --card-ink-10: rgba(11, 18, 32, 0.1); --card-ink-05: rgba(11, 18, 32, 0.06); --line: var(--black); --footer: #0B1220; --nav-bg: rgba(10, 19, 38, 0.72); /* navy translucent so the glow shows through the solid nav */ --on-solid: var(--white); /* wheel: the same five colours */ --seg-1: #7C4DFF; --seg-1-ink: #FFFFFF; --seg-2: #1FA84F; --seg-2-ink: #FFFFFF; --seg-3: #FFFFFF; --seg-3-ink: #000000; --seg-4: #127A38; --seg-4-ink: #FFFFFF; --seg-5: #000000; --seg-5-ink: #FFFFFF; --seg-6: #512DA8; --seg-6-ink: #FFFFFF; --wheel-rim: #000000; --wheel-pin: #FFFFFF; --wheel-hub: #FFFFFF; --font-display: "Lilita One", "Cubano", Impact, "Arial Black", sans-serif; /* Slerf-style chunky display face (Lilita One is the free stand-in for Cubano) */ --font-body: "Poppins", "Segoe UI", system-ui, sans-serif; --ease: cubic-bezier(0.4, 0, 0.2, 1); color-scheme: dark; } /* ---- colourways (data-palette on , set by ?palette=; see design-research/colorways) ---- Same roles as above: --orange is the accent, --green the ball, the glows lighter in the middle and darker at the edges. */ :root[data-palette="mint"] { --orange: #2E8BC0; --orange-deep: #1F6A9C; --bg: #1B4A85; --bg-2: #163C6E; --footer: #8CDFC0; --nav-bg: rgba(140, 223, 192, 0.74); --bg-glow: radial-gradient(ellipse 78% 74% at 50% 60%, #C6F3DC 0%, #8CDFC0 34%, #3A8FC4 74%, #1B4A85 100%); --intro-glow: radial-gradient(ellipse 78% 74% at 50% 60%, #D7F9E6 0%, #9BE6C9 34%, #3A8FC4 74%, #1B4A85 100%); --pop-line: #0F2F5C; --pop-shadow: #2E8BC0; --seg-1: #2E8BC0; --seg-1-ink: #FFFFFF; --seg-6: #1F6A9C; --seg-6-ink: #FFFFFF; --pf-1: #E8FFF4; --pf-2: #FFFFFF; --pf-3: #BFF0FF; --pf-mark: rgba(15, 47, 92, 0.4); } :root[data-palette="aqua"] { --orange: #1E88E5; --orange-deep: #1565C0; --bg: #1B4A8E; --bg-2: #163C74; --footer: #85E3DC; --nav-bg: rgba(133, 227, 220, 0.74); --bg-glow: radial-gradient(ellipse 78% 74% at 50% 60%, #D4FBF3 0%, #85E3DC 34%, #3B9BD8 74%, #1B4A8E 100%); --intro-glow: radial-gradient(ellipse 78% 74% at 50% 60%, #E0FFF8 0%, #93EDE4 34%, #3B9BD8 74%, #1B4A8E 100%); --pop-line: #0D3B66; --pop-shadow: #1E88E5; --seg-1: #1E88E5; --seg-1-ink: #FFFFFF; --seg-6: #1565C0; --seg-6-ink: #FFFFFF; --pf-1: #E6FFFB; --pf-2: #FFFFFF; --pf-3: #B3ECFF; --pf-mark: rgba(13, 59, 102, 0.4); } :root[data-palette="lime"] { --orange: #1E9E9E; --orange-deep: #157A7A; --bg: #1E5F8C; --bg-2: #184D72; --footer: #A9E69B; --nav-bg: rgba(169, 230, 155, 0.74); --bg-glow: radial-gradient(ellipse 78% 74% at 50% 60%, #E2F9C6 0%, #A9E69B 34%, #3FA6B5 74%, #1E5F8C 100%); --intro-glow: radial-gradient(ellipse 78% 74% at 50% 60%, #EDFFD6 0%, #B7F0A8 34%, #3FA6B5 74%, #1E5F8C 100%); --pop-line: #124A5E; --pop-shadow: #1E9E9E; --seg-1: #1E9E9E; --seg-1-ink: #FFFFFF; --seg-6: #157A7A; --seg-6-ink: #FFFFFF; --pf-1: #F4FFE0; --pf-2: #FFFFFF; --pf-3: #C9F5F0; --pf-mark: rgba(18, 74, 94, 0.4); } :root[data-palette="sky"] { --orange: #2563EB; --orange-deep: #1D4ED8; --bg: #1D4C98; --bg-2: #173E7C; --footer: #9CD5F6; --nav-bg: rgba(156, 213, 246, 0.74); --bg-glow: radial-gradient(ellipse 78% 74% at 50% 60%, #E2F4FF 0%, #9CD5F6 34%, #3F8ED8 74%, #1D4C98 100%); --intro-glow: radial-gradient(ellipse 78% 74% at 50% 60%, #EEF9FF 0%, #ADDFFA 34%, #3F8ED8 74%, #1D4C98 100%); --pop-line: #10336B; --pop-shadow: #2563EB; --seg-1: #2563EB; --seg-1-ink: #FFFFFF; --seg-6: #1D4ED8; --seg-6-ink: #FFFFFF; --pf-1: #F0FAFF; --pf-2: #FFFFFF; --pf-3: #CFEBFF; --pf-mark: rgba(16, 51, 107, 0.4); } :root[data-palette="skydeep"] { /* Sky & blue with a darker centre */ --orange: #2563EB; --orange-deep: #1D4ED8; --bg: #1D4C98; --bg-2: #173E7C; --footer: #7CC1EF; --nav-bg: rgba(124, 193, 239, 0.74); --bg-glow: radial-gradient(ellipse 78% 74% at 50% 60%, #B9E1FA 0%, #7CC1EF 34%, #3F8ED8 74%, #1D4C98 100%); --intro-glow: radial-gradient(ellipse 78% 74% at 50% 60%, #C9E9FC 0%, #8CCBF3 34%, #3F8ED8 74%, #1D4C98 100%); --pop-line: #10336B; --pop-shadow: #2563EB; --seg-1: #2563EB; --seg-1-ink: #FFFFFF; --seg-6: #1D4ED8; --seg-6-ink: #FFFFFF; --pf-1: #F0FAFF; --pf-2: #FFFFFF; --pf-3: #CFEBFF; --pf-mark: rgba(16, 51, 107, 0.4); } :root[data-theme="dark"] { --bg: #000000; --bg-2: #0A0A0A; --bg-glow: #000000; --ink: #FFFFFF; --ink-50: rgba(255, 255, 255, 0.6); --ink-40: rgba(255, 255, 255, 0.45); --ink-10: rgba(255, 255, 255, 0.14); --ink-05: rgba(255, 255, 255, 0.07); --card: #111111; --card-ink: #FFFFFF; --card-ink-50: rgba(255, 255, 255, 0.6); --card-ink-10: rgba(255, 255, 255, 0.14); --card-ink-05: rgba(255, 255, 255, 0.07); --line: var(--orange); --footer: #0A0A0A; --nav-bg: rgba(0, 0, 0, 0.82); --seg-3: #1A1A1A; --seg-3-ink: #FFFFFF; --seg-5: #FFFFFF; --seg-5-ink: #000000; --wheel-rim: #FB923C; --wheel-hub: #111111; color-scheme: dark; } /* Slerf-style "pop" lettering: white fill, brown outline, brown extrude */ :root { --pop-line: #060C18; --pop-shadow: #7C4DFF; }