/* ========================================================================== EXPERIMENTAL LOOK 1 — "STUDIO" (Settings → Appearance → Look) ========================================================================== Opt-in. Every rule is scoped to html[data-look="studio"], so with the Look set to Classic this file changes nothing. The choice is saved under localStorage 'panda_chess_look' and applied by the inline script in index.html's , before first paint, so there is no flash. What it changes, and only this: - Background: a still, neutral graphite spotlight instead of the navy and purple gradient. It replaces the background picker's choice while Studio is on, because the look is the background plus the panels together. STATIC ON PURPOSE: see style.css on why animated backgrounds flicker. - Surfaces: the app's blue-tinted dark grays become neutral graphite. The palette overrides at the bottom of this file are generated from the dark:bg-[#...] classes the app actually uses. - The board sits on a plinth: a rounded graphite frame with a deep, soft shadow, and slightly rounded corners on the squares. - Coordinates are quieter (lighter weight, muted color, no glow). - Panels are one calm sheet: hairline borders, no dark stripes. - The current move is a soft blue pill, and move numbers line up. Board square colors, pieces and every mode's own look (variation tape, camp high contrast, B&W, phone mode) are left alone. */ /* ---------- Background ---------- */ /* html needs its own background. Otherwise the browser hands body's background up to the page canvas, sized against , which has zero height here (body is position: fixed). The gradient then collapses to one flat color. */ html[data-look="studio"] { background: #dcdfe4; } html[data-look="studio"].dark { background: #0f1012; } html[data-look="studio"] body, html[data-look="studio"] body[class] { background: radial-gradient(ellipse 70% 55% at 40% 0%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.3) 50%, transparent 80%), radial-gradient(ellipse 60% 75% at 33% 50%, #f3f4f6 0%, #e6e8eb 60%, #d8dbe0 100%) !important; background-color: #eef0f3 !important; } html[data-look="studio"].dark body, html[data-look="studio"].dark body[class] { background: radial-gradient(ellipse 70% 55% at 40% 0%, rgba(120, 124, 135, 0.22) 0%, rgba(120, 124, 135, 0.07) 50%, transparent 80%), radial-gradient(ellipse 60% 75% at 33% 50%, #24262b 0%, #18191c 60%, #0f1012 100%) !important; background-color: #141518 !important; } /* The picker's gradient and glow layers live on ::before / ::after. */ html[data-look="studio"] body::before, html[data-look="studio"] body::after { display: none !important; } /* ---------- Panels ---------- */ html[data-look="studio"] body #right-panel { background-color: rgba(255, 255, 255, 0.72) !important; border: 1px solid rgba(15, 23, 42, 0.07) !important; border-radius: 22px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 24px 60px -28px rgba(15, 23, 42, 0.35), 0 2px 6px -2px rgba(15, 23, 42, 0.08); backdrop-filter: blur(20px) saturate(140%) !important; -webkit-backdrop-filter: blur(20px) saturate(140%) !important; } html[data-look="studio"].dark body #right-panel { background-color: rgba(30, 31, 35, 0.78) !important; border-color: rgba(255, 255, 255, 0.07) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 30px 70px -30px rgba(0, 0, 0, 0.9), 0 2px 8px -2px rgba(0, 0, 0, 0.5); } /* The inner panel was a second frosted layer; one sheet is calmer. */ html[data-look="studio"] body[class] #analysis-panel { background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Toolbar, names and playback were tinted stripes; now hairline rules only. */ html[data-look="studio"] #analysis-toolbar, html[data-look="studio"] #game-info-panel, html[data-look="studio"] #playback-controls { background-color: transparent !important; border-color: rgba(15, 23, 42, 0.07) !important; } html[data-look="studio"].dark #analysis-toolbar, html[data-look="studio"].dark #game-info-panel, html[data-look="studio"].dark #playback-controls { border-color: rgba(255, 255, 255, 0.06) !important; } html[data-look="studio"] #analysis-toolbar button, html[data-look="studio"] #playback-controls button { border-radius: 10px; transition: background-color 150ms ease, color 150ms ease; } html[data-look="studio"] #analysis-toolbar button:hover, html[data-look="studio"] #playback-controls button:hover { background-color: rgba(15, 23, 42, 0.06) !important; } html[data-look="studio"].dark #analysis-toolbar button:hover, html[data-look="studio"].dark #playback-controls button:hover { background-color: rgba(255, 255, 255, 0.07) !important; } html[data-look="studio"].dark #analysis-toolbar, html[data-look="studio"].dark #playback-controls { color: #a1a4ab; } /* Name, date and result fields: soft wells instead of dark boxes. */ html[data-look="studio"] #game-info-panel input, html[data-look="studio"] #game-info-panel select, html[data-look="studio"] #game-info-panel button { border-radius: 12px !important; } html[data-look="studio"].dark #game-info-panel input, html[data-look="studio"].dark #game-info-panel select { background-color: rgba(255, 255, 255, 0.045) !important; border-color: rgba(255, 255, 255, 0.06) !important; } /* ---------- The board on a plinth ---------- */ html[data-look="studio"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast):not(.phone-mode) #board-surface { border-color: #ffffff; background-color: #ffffff; border-radius: 14px; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06), 0 40px 80px -36px rgba(15, 23, 42, 0.45), 0 14px 28px -18px rgba(15, 23, 42, 0.3); } html[data-look="studio"].dark:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast):not(.phone-mode) #board-surface { border-color: #2a2b30; background-color: #2a2b30; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 50px 90px -40px rgba(0, 0, 0, 0.95), 0 18px 36px -20px rgba(0, 0, 0, 0.7); } html[data-look="studio"] body:not(.phone-mode) #board-container { border-radius: 8px; overflow: hidden; } /* ---------- Coordinates: present, not loud ---------- */ html[data-look="studio"] #rank-labels, html[data-look="studio"] #file-labels, html[data-look="studio"] #rank-labels-right, html[data-look="studio"] #file-labels-top, html[data-look="studio"] body[class] #rank-labels, html[data-look="studio"] body[class] #file-labels, html[data-look="studio"] body[class] #rank-labels-right, html[data-look="studio"] body[class] #file-labels-top { font-weight: 600; color: rgba(30, 32, 38, 0.42) !important; text-shadow: none !important; font-variant-numeric: tabular-nums; } html[data-look="studio"].dark #rank-labels, html[data-look="studio"].dark #file-labels, html[data-look="studio"].dark #rank-labels-right, html[data-look="studio"].dark #file-labels-top, html[data-look="studio"].dark body[class] #rank-labels, html[data-look="studio"].dark body[class] #file-labels, html[data-look="studio"].dark body[class] #rank-labels-right, html[data-look="studio"].dark body[class] #file-labels-top { color: rgba(255, 255, 255, 0.4) !important; } /* ---------- Move list ---------- */ html[data-look="studio"] #move-list { font-variant-numeric: tabular-nums; } html[data-look="studio"] #move-list [data-node-id] { border-radius: 8px; font-weight: 500; } html[data-look="studio"] #move-list [data-node-id].bg-blue-600 { background: linear-gradient(180deg, #4d8fff 0%, #2f6fe8 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 12px -4px rgba(47, 111, 232, 0.6); font-weight: 600; } /* ---------- Footer ---------- */ html[data-look="studio"] #main-footer { border-color: transparent !important; } html[data-look="studio"] #footer-author { letter-spacing: 0.12em; font-weight: 600; opacity: 0.75; } /* ---------- Modals and cards: rounder, hairline, deeper shadow ---------- */ html[data-look="studio"].dark .dark\:bg-\[\#1a1d24\].rounded-2xl, html[data-look="studio"].dark .dark\:bg-\[\#1a1d24\].rounded-xl { border-color: rgba(255, 255, 255, 0.07) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 40px 90px -30px rgba(0, 0, 0, 0.9) !important; } /* ---------- Graphite palette (generated) ---------- The app's dark surfaces are Tailwind arbitrary colors with a faint blue cast (#13151a, #1a1d24, #2a2e38 ...). Each maps to a neutral graphite of the same lightness, so contrast and layering are unchanged. */ html[data-look="studio"].dark .dark\:bg-\[\#0f1115\] { background-color: #111214 !important; } html[data-look="studio"].dark .dark\:border-\[\#0f1115\] { border-color: #111214 !important; } html[data-look="studio"].dark .dark\:ring-\[\#0f1115\] { --tw-ring-color: #111214 !important; } html[data-look="studio"].dark .dark\:ring-offset-\[\#0f1115\] { --tw-ring-offset-color: #111214 !important; } html[data-look="studio"].dark .dark\:hover\:bg-\[\#0f1115\]:hover { background-color: #111214 !important; } html[data-look="studio"].dark .dark\:bg-\[\#101420\] { background-color: #141518 !important; } html[data-look="studio"].dark .dark\:border-\[\#101420\] { border-color: #141518 !important; } html[data-look="studio"].dark .dark\:ring-\[\#101420\] { --tw-ring-color: #141518 !important; } html[data-look="studio"].dark .dark\:ring-offset-\[\#101420\] { --tw-ring-offset-color: #141518 !important; } html[data-look="studio"].dark .dark\:hover\:bg-\[\#101420\]:hover { background-color: #141518 !important; } html[data-look="studio"].dark .dark\:bg-\[\#13151a\] { background-color: #17181b !important; } html[data-look="studio"].dark .dark\:border-\[\#13151a\] { border-color: #17181b !important; } html[data-look="studio"].dark .dark\:ring-\[\#13151a\] { --tw-ring-color: #17181b !important; } html[data-look="studio"].dark .dark\:ring-offset-\[\#13151a\] { --tw-ring-offset-color: #17181b !important; } html[data-look="studio"].dark .dark\:hover\:bg-\[\#13151a\]:hover { background-color: #17181b !important; } html[data-look="studio"].dark .dark\:bg-\[\#1a1d24\] { background-color: #1f2023 !important; } html[data-look="studio"].dark .dark\:border-\[\#1a1d24\] { border-color: #1f2023 !important; } html[data-look="studio"].dark .dark\:ring-\[\#1a1d24\] { --tw-ring-color: #1f2023 !important; } html[data-look="studio"].dark .dark\:ring-offset-\[\#1a1d24\] { --tw-ring-offset-color: #1f2023 !important; } html[data-look="studio"].dark .dark\:hover\:bg-\[\#1a1d24\]:hover { background-color: #1f2023 !important; } html[data-look="studio"].dark .dark\:bg-\[\#1f2229\] { background-color: #232427 !important; } html[data-look="studio"].dark .dark\:border-\[\#1f2229\] { border-color: #232427 !important; } html[data-look="studio"].dark .dark\:ring-\[\#1f2229\] { --tw-ring-color: #232427 !important; } html[data-look="studio"].dark .dark\:ring-offset-\[\#1f2229\] { --tw-ring-offset-color: #232427 !important; } html[data-look="studio"].dark .dark\:hover\:bg-\[\#1f2229\]:hover { background-color: #232427 !important; } html[data-look="studio"].dark .dark\:bg-\[\#22252d\] { background-color: #26272b !important; } html[data-look="studio"].dark .dark\:border-\[\#22252d\] { border-color: #26272b !important; } html[data-look="studio"].dark .dark\:ring-\[\#22252d\] { --tw-ring-color: #26272b !important; } html[data-look="studio"].dark .dark\:ring-offset-\[\#22252d\] { --tw-ring-offset-color: #26272b !important; } html[data-look="studio"].dark .dark\:hover\:bg-\[\#22252d\]:hover { background-color: #26272b !important; } html[data-look="studio"].dark .dark\:bg-\[\#22262e\] { background-color: #26272b !important; } html[data-look="studio"].dark .dark\:border-\[\#22262e\] { border-color: #26272b !important; } html[data-look="studio"].dark .dark\:ring-\[\#22262e\] { --tw-ring-color: #26272b !important; } html[data-look="studio"].dark .dark\:ring-offset-\[\#22262e\] { --tw-ring-offset-color: #26272b !important; } html[data-look="studio"].dark .dark\:hover\:bg-\[\#22262e\]:hover { background-color: #26272b !important; } html[data-look="studio"].dark .dark\:bg-\[\#2a2e38\] { background-color: #2d2e33 !important; } html[data-look="studio"].dark .dark\:border-\[\#2a2e38\] { border-color: #2d2e33 !important; } html[data-look="studio"].dark .dark\:ring-\[\#2a2e38\] { --tw-ring-color: #2d2e33 !important; } html[data-look="studio"].dark .dark\:ring-offset-\[\#2a2e38\] { --tw-ring-offset-color: #2d2e33 !important; } html[data-look="studio"].dark .dark\:hover\:bg-\[\#2a2e38\]:hover { background-color: #2d2e33 !important; } html[data-look="studio"].dark .dark\:bg-\[\#343945\] { background-color: #37383e !important; } html[data-look="studio"].dark .dark\:border-\[\#343945\] { border-color: #37383e !important; } html[data-look="studio"].dark .dark\:ring-\[\#343945\] { --tw-ring-color: #37383e !important; } html[data-look="studio"].dark .dark\:ring-offset-\[\#343945\] { --tw-ring-offset-color: #37383e !important; } html[data-look="studio"].dark .dark\:hover\:bg-\[\#343945\]:hover { background-color: #37383e !important; } html[data-look="studio"].dark .dark\:bg-\[\#3a3e48\] { background-color: #3d3e44 !important; } html[data-look="studio"].dark .dark\:border-\[\#3a3e48\] { border-color: #3d3e44 !important; } html[data-look="studio"].dark .dark\:ring-\[\#3a3e48\] { --tw-ring-color: #3d3e44 !important; } html[data-look="studio"].dark .dark\:ring-offset-\[\#3a3e48\] { --tw-ring-offset-color: #3d3e44 !important; } html[data-look="studio"].dark .dark\:hover\:bg-\[\#3a3e48\]:hover { background-color: #3d3e44 !important; } html[data-look="studio"].dark .dark\:bg-\[\#4a4e58\] { background-color: #4b4c52 !important; } html[data-look="studio"].dark .dark\:border-\[\#4a4e58\] { border-color: #4b4c52 !important; } html[data-look="studio"].dark .dark\:ring-\[\#4a4e58\] { --tw-ring-color: #4b4c52 !important; } html[data-look="studio"].dark .dark\:ring-offset-\[\#4a4e58\] { --tw-ring-offset-color: #4b4c52 !important; } html[data-look="studio"].dark .dark\:hover\:bg-\[\#4a4e58\]:hover { background-color: #4b4c52 !important; } html[data-look="studio"].dark .dark\:bg-\[\#1a2132\] { background-color: #2a2b30 !important; } html[data-look="studio"].dark .dark\:border-\[\#1a2132\] { border-color: #2a2b30 !important; } html[data-look="studio"].dark .dark\:ring-\[\#1a2132\] { --tw-ring-color: #2a2b30 !important; } html[data-look="studio"].dark .dark\:ring-offset-\[\#1a2132\] { --tw-ring-offset-color: #2a2b30 !important; } html[data-look="studio"].dark .dark\:hover\:bg-\[\#1a2132\]:hover { background-color: #2a2b30 !important; } html[data-look="studio"].dark .dark\:bg-\[\#13151a\]\/60 { background-color: rgba(23, 24, 27, 0.6) !important; } html[data-look="studio"].dark .dark\:bg-\[\#13151a\]\/50 { background-color: rgba(23, 24, 27, 0.5) !important; } html[data-look="studio"].dark .dark\:bg-\[\#1a1d24\]\/95 { background-color: rgba(31, 32, 35, 0.95) !important; } html[data-look="studio"].dark .dark\:bg-\[\#2a2e38\]\/50 { background-color: rgba(45, 46, 51, 0.5) !important; } html[data-look="studio"].dark .dark\:border-\[\#2a2e38\]\/50 { border-color: rgba(45, 46, 51, 0.5) !important; } html[data-look="studio"].dark .dark\:hover\:bg-\[\#2a2e38\]\/60:hover { background-color: rgba(45, 46, 51, 0.6) !important; }