/* Themes for the GATE note pages. * * Three looks, selected by data-theme on : * * (none) / dark the original — near-black with library gold * light a proper light theme, warm paper rather than pure white * galaxy purple claymorphism: soft lavender panels floating on * deep violet, after the reference design * * Everything here re-points the custom properties declared in gate-note.css * and note-3d.css. No selector targets a component directly, so a new theme * is a block of variables and nothing else has to change. theme-switch.js * writes the choice to localStorage and a pre-paint snippet in each page's * applies it before first paint, so there is no flash of the wrong * theme on load. */ /* ═══════════════════════════════════════════════════ light ══════════ */ :root[data-theme="light"] { /* Warm off-white rather than #fff: pure white against dark text is needlessly harsh for long reading, which is what these pages are for. */ --bg:#f7f5f1; --bg-card:#ffffff; --bg-code:#f0ece4; --border:#e0d9cd; --text:#3d3831; --text-dim:#6f6659; /* 5.18:1 on --bg; #7b7266 was 4.34 */ --text-bright:#1f1b16; --heading:#14110d; --accent:#8a5f1a; /* 5.17:1 on --bg; #9a6b1f was 4.29 */ --accent-dim:#6f4b14; --accent-rgb:138 95 26; --accent-hi:#735015; --on-accent:#ffffff; --switch-fg:#6f6659; --switch-fg-hi:#1f1b16; --bg-bar:rgba(247,245,241,.90); /* note-3d.css paints the bar's shadow; the dark original is a white top highlight over a heavy drop shadow, which reads as grime on a pale bar. */ --bar-shadow:0 1px 0 rgba(255,255,255,.7), 0 4px 14px rgba(31,27,22,.09); --shadow:0 1px 2px rgba(31,27,22,.05), 0 6px 16px rgba(31,27,22,.06); /* Syntax and callout accents, darkened so they pass contrast on white. */ --green:#177a52; --orange:#a35d09; --red:#bc3434; --pink:#a0407d; --cyan:#0d6c80; --yellow:#8a6407; --purple:#6b3fae; --blue:#155b8f; } /* note-3d.css depth layer, flattened for light: heavy shadows read as dirt on a pale ground, so this keeps a hairline edge and a whisper of lift. */ :root[data-theme="light"] { --d-surface:linear-gradient(158deg,#ffffff 0%,#fbf9f5 100%); --d-surface-2:linear-gradient(158deg,#fffdf9 0%,#f6f2ea 100%); --d-edge:rgba(31,27,22,.10); --d-lift-sm:0 1px 2px rgba(31,27,22,.06); --d-lift:0 1px 2px rgba(31,27,22,.06), 0 8px 20px rgba(31,27,22,.07); --d-inset:inset 0 1px 0 rgba(255,255,255,.9); } :root[data-theme="light"] body { background-image: radial-gradient(1100px 620px at 88% -6%, rgba(154,107,31,.06) 0%, transparent 62%), radial-gradient(900px 560px at 6% 4%, rgba(107,63,174,.05) 0%, transparent 58%); } /* The code-copy button is styled for a dark surface in theme-light.css. */ :root[data-theme="light"] .code-copy-btn { background:rgba(31,27,22,.06); border-color:rgba(31,27,22,.14); color:#5c554b; } :root[data-theme="light"] .code-copy-btn:hover { background:rgba(31,27,22,.12); } /* ══════════════════════════════════════════════════ galaxy ══════════ */ /* Claymorphism: light lavender panels sitting on deep violet, chunky radii, soft double shadows. Because the panels are light and the page is dark, the text tokens invert relative to the other two themes — panel text is near-black while anything drawn straight onto the page ground is pale. */ :root[data-theme="galaxy"] { /* A deeper violet than the reference's mid-purple. Pale text on #6f66b8 reaches only 2.75-3.94:1; on this it is 5.4-8.5:1. Panels stay light, so the two-tone character of the design is unchanged. */ --bg:#4a4290; --bg-card:#cac4f0; --bg-code:#b8b1e8; --border:rgba(255,255,255,.42); /* These are the values for text drawn on the violet ground. Anything inside a panel re-declares them dark — see the .content block below. Scoping the tokens rather than the components means this works whatever a page nests inside its container: .section, .week, or nothing. */ --text:#e7e3ff; --text-dim:#cfc9f5; --text-bright:#ffffff; --heading:#ffffff; --accent:#3a2d7e; --accent-dim:#4a3c93; --accent-rgb:58 45 126; --accent-hi:#2c2166; --on-accent:#e8e5fb; --switch-fg:#4a4278; --switch-fg-hi:#1b1540; /* the pill sits on lavender */ --bg-bar:rgba(62,55,120,.95); --bar-shadow:0 1px 0 rgba(255,255,255,.16), 0 6px 20px rgba(43,36,92,.4); --radius:1.5rem; --shadow:6px 6px 16px rgba(43,36,92,.34), -4px -4px 12px rgba(255,255,255,.18); --green:#125a41; /* 5.09:1 on the lavender panel; #186b4e was 4.02 */ --orange:#8a4f0c; --red:#a32f3f; --pink:#93316f; --cyan:#155e73; --yellow:#7a5a0a; --purple:#4a2d8f; --blue:#1d4e86; } :root[data-theme="galaxy"] { --d-surface:linear-gradient(158deg,#d2ccf5 0%,#c2bbec 100%); --d-surface-2:linear-gradient(158deg,#dcd7f9 0%,#cbc5f2 100%); --d-edge:rgba(255,255,255,.5); --d-lift-sm:4px 4px 10px rgba(43,36,92,.26), -3px -3px 8px rgba(255,255,255,.16); --d-lift:6px 6px 16px rgba(43,36,92,.32), -4px -4px 12px rgba(255,255,255,.18); --d-inset:inset 0 1px 0 rgba(255,255,255,.55); --d-r:1.5rem; } :root[data-theme="galaxy"] body { background-image: radial-gradient(1200px 700px at 85% -8%, rgba(150,138,225,.30) 0%, transparent 62%), radial-gradient(900px 600px at 5% 6%, rgba(58,45,126,.30) 0%, transparent 58%); } /* Text drawn directly on the violet ground, not inside a panel, has to go pale or it disappears. */ :root[data-theme="galaxy"] .topbar a { color:#ded9fb; } :root[data-theme="galaxy"] .topbar .sep { color:rgba(255,255,255,.35); } :root[data-theme="galaxy"] .topbar .current, :root[data-theme="galaxy"] .hero-label { color:#f0edff; } :root[data-theme="galaxy"] .hero h1 { color:#ffffff; } :root[data-theme="galaxy"] .hero-meta { color:rgba(255,255,255,.78); } /* Links drawn on the ground, not in a panel. The palette's --cyan etc. are chosen for dark-on-lavender and measure 1.16:1 out here. */ :root[data-theme="galaxy"] .hero-meta a, :root[data-theme="galaxy"] .hero a { color:#b8ecf8; } :root[data-theme="galaxy"] .rail-head { color:#efecff; } /* on the ground */ :root[data-theme="galaxy"] .toc h2 { color:var(--heading); } /* inside the panel */ :root[data-theme="galaxy"] .rail-link { color:rgba(255,255,255,.72); } :root[data-theme="galaxy"] .rail-link:hover, :root[data-theme="galaxy"] .rail-link.cur { color:#1b1540; } :root[data-theme="galaxy"] .rail-num { color:rgba(255,255,255,.5); } :root[data-theme="galaxy"] .rail-link.cur .rail-num { color:#3a2d7e; } :root[data-theme="galaxy"] .rail-top { color:rgba(255,255,255,.8); border-color:rgba(255,255,255,.35); } :root[data-theme="galaxy"] .rail-set-n { color:rgba(255,255,255,.75); } :root[data-theme="galaxy"] .rail-set { border-color:rgba(255,255,255,.3); } :root[data-theme="galaxy"] .qzs-label, :root[data-theme="galaxy"] .qzs-counter { color:#ece9ff; } /* Chunky, soft-edged panels are the whole character of this theme. */ :root[data-theme="galaxy"] .note, :root[data-theme="galaxy"] .tip, :root[data-theme="galaxy"] .warn, :root[data-theme="galaxy"] .key, :root[data-theme="galaxy"] .exam, :root[data-theme="galaxy"] .analogy, :root[data-theme="galaxy"] .formula, :root[data-theme="galaxy"] pre, :root[data-theme="galaxy"] .qz-card, :root[data-theme="galaxy"] .rail-sum, :root[data-theme="galaxy"] .qzs-opt { border-radius:1.25rem; box-shadow:var(--d-lift-sm); border-color:rgba(255,255,255,.45); } :root[data-theme="galaxy"] .qz-launch, :root[data-theme="galaxy"] .qzs-res-btn.primary { box-shadow:5px 5px 14px rgba(43,36,92,.32), -3px -3px 10px rgba(255,255,255,.2); } :root[data-theme="galaxy"] table { border-radius:1rem; overflow:hidden; } :root[data-theme="galaxy"] code { color:#3a2d7e; } /* Body copy must not sit on the bare violet ground — dark-on-violet measures about 1.5:1. The reference design never does this either: text there always sits inside a light panel. So the main container becomes the panel, and re-declares the text tokens inside it. Inheritance carries them to every descendant regardless of what the page nests. */ :root[data-theme="galaxy"] .content, :root[data-theme="galaxy"] .toc, :root[data-theme="galaxy"] .wrap { background-color:#cdc7f3; background-image:var(--d-surface); border:1px solid rgba(255,255,255,.45); border-radius:1.75rem; box-shadow:var(--d-lift); padding:clamp(1.25rem,3vw,2rem); --text:#2f2861; --text-dim:#4a4278; --text-bright:#221c4c; --heading:#1b1540; /* Re-declaring the token is not enough on its own: `color` inherits as a computed value, so an element with no colour rule of its own inherits whatever body resolved var(--text) to — the pale ground colour. Setting colour here recomputes it on the panel, and that inherits downward. */ color:var(--text); } :root[data-theme="galaxy"] .content { padding-block:clamp(1.5rem,4vw,2.5rem); } :root[data-theme="galaxy"] .content > .section { border-top-color:rgba(58,45,126,.18); } :root[data-theme="galaxy"] .toc-grid a:hover { background:rgba(255,255,255,.45); } /* Panels nested inside the container need to lift off it. */ :root[data-theme="galaxy"] .note, :root[data-theme="galaxy"] .tip, :root[data-theme="galaxy"] .warn, :root[data-theme="galaxy"] .key, :root[data-theme="galaxy"] .exam, :root[data-theme="galaxy"] .analogy { background:rgba(255,255,255,.55); } :root[data-theme="galaxy"] pre, :root[data-theme="galaxy"] .formula { background:rgba(255,255,255,.42); } :root[data-theme="galaxy"] th { background:rgba(255,255,255,.5); } :root[data-theme="galaxy"] td, :root[data-theme="galaxy"] th { border-color:rgba(58,45,126,.18); } :root[data-theme="galaxy"] .back-top { color:var(--accent); } /* inside the panel */ /* ══════════════════════════════════════════ theme switcher ══════════ */ /* The switch supplies its own foreground default rather than inheriting the page's --text-dim, which on the GATE pages measures 3.84:1 against the pill. Those pages are deliberately not edited, so the fix lives here. */ :root { --switch-fg:#7c8194; --switch-fg-hi:#e8eaf0; } .theme-switch { display:inline-flex; gap:2px; margin-inline-start:auto; padding:3px; border:1px solid var(--border); border-radius:99px; background:var(--bg-card); /* Must be allowed to shrink. Course-page topbars are flex containers that do not wrap, so at 375px this control was pushing the document to 433px wide on its own. */ flex-shrink:1; min-width:0; max-width:100%; } .theme-btn { flex-shrink:1; min-width:0; } .theme-btn { /* The pill has its own background, so it needs its own foreground — --text-dim is tuned for the page ground and can invert against it. */ font-family:inherit; font-size:0.75rem; line-height:1; padding:0.375rem 0.625rem; border:none; border-radius:99px; background:none; color:var(--switch-fg, var(--text-dim)); cursor:pointer; transition:background .18s, color .18s; } .theme-btn:hover { color:var(--switch-fg-hi, var(--text-bright)); } .theme-btn[aria-pressed="true"] { background:var(--accent, #c9974a); color:var(--on-accent, #12141c); } .theme-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } @media (max-width:640px) { .theme-switch { margin-inline-start:0; } } /* ═══════════════════════════════════════════ pointer trail ══════════ */ /* A soft dot that tracks the pointer with a lagging ring behind it. Both are pointer-events:none and driven only by transform, so they never intercept a click and never cost a layout. Enabled only for genuine mouse input — see theme-switch.js, which refuses to start on touch or when the reader has asked for reduced motion. */ .cursor-dot, .cursor-ring { position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%; will-change:transform; opacity:0; transition:opacity .25s ease; } .cursor-dot { width:7px; height:7px; margin:-3.5px 0 0 -3.5px; background:var(--accent); } .cursor-ring { width:34px; height:34px; margin:-17px 0 0 -17px; border:1.5px solid rgb(var(--accent-rgb) / .55); transition:opacity .25s ease, width .2s ease, height .2s ease, margin .2s ease, border-color .2s ease, background .2s ease; } html.cursor-on .cursor-dot, html.cursor-on .cursor-ring { opacity:1; } /* Over something clickable the ring opens up and fills faintly. */ html.cursor-hot .cursor-ring { width:52px; height:52px; margin:-26px 0 0 -26px; border-color:rgb(var(--accent-rgb) / .8); background:rgb(var(--accent-rgb) / .10); } html.cursor-press .cursor-ring { width:26px; height:26px; margin:-13px 0 0 -13px; } @media (prefers-reduced-motion: reduce) { .cursor-dot, .cursor-ring { display:none !important; } } /* ═════════════════════════════════════ the app shell (index.html) ══════ */ /* index.html predates the note pages and carries its own token set, with different semantics for a shared name: --accent-dim there is a translucent tint, while on a note page it is a darker accent. So its overrides live in their own block keyed on [data-app], which index.html sets on . */ :root[data-app][data-theme="light"] { --switch-fg:#6f6659; --switch-fg-hi:#1f1b16; --on-accent:#ffffff; /* the shell defines no such token of its own */ --bg:#f7f5f1; --surface:#ffffff; --surface-2:#fbf9f5; --surface-3:#f2eee6; --border:#e0d9cd; --border-hover:#cfc5b3; --text:#1f1b16; --text-muted:#4a443c; --text-dim:#6f6659; /* 5.18:1 on --bg; #7b7266 was 4.34 */ --shadow:rgba(31,27,22,0.10); --shadow-lg:rgba(31,27,22,0.16); --blue:#1f6fb2; --blue-dim:rgba(31,111,178,0.10); --orange:#a3620f; --orange-dim:rgba(163,98,15,0.10); --purple:#6b3fae; --purple-dim:rgba(107,63,174,0.10); --green:#177a52; --green-dim:rgba(23,122,82,0.10); --rose:#b83b57; --rose-dim:rgba(184,59,87,0.10); --yellow:#8a6407; --yellow-dim:rgba(138,100,7,0.10); --teal:#0f7d72; --teal-dim:rgba(15,125,114,0.10); --cyan:#0d6c80; --cyan-dim:rgba(13,108,128,0.10); --red:#bc3434; --red-dim:rgba(188,52,52,0.10); --accent:#9a6b1f; --accent-dim:rgba(154,107,31,0.14); } :root[data-app][data-theme="galaxy"] { --switch-fg:#4a4278; --switch-fg-hi:#1b1540; --on-accent:#2c2166; /* Same deep violet as the note pages, so the two halves of the site match. */ --bg:#4a4290; --surface:#cdc7f3; --surface-2:#d6d1f7; --surface-3:#c1baee; /* A 45%-white edge over this ground computes to 3.07:1 — a glare rather than a division, and it was drawing hard bright lines down the sidebar and under the header. 18% reads as a soft seam, which is what a claymorphic surface wants. Panels re-raise it below, where the edge sits on lavender and needs to be visible. */ --border:rgba(255,255,255,0.18); --border-hover:rgba(255,255,255,0.34); /* Ground values. The shell draws its sidebar, header and logo straight onto the violet, so these must be pale; the surface block below flips them back to dark for anything sitting on a lavender card. */ --text:#ece9ff; --text-muted:#d4cff6; --text-dim:#cfc9f5; --shadow:rgba(43,36,92,0.30); --shadow-lg:rgba(43,36,92,0.42); /* The accent hues are used almost entirely inside cards — the section badges are `background: var(--X-dim); color: var(--X)` — so they are tuned dark against the lavender surface, not pale against the ground. Pale values here measured 1.06-1.26:1 and were effectively invisible. */ --blue:#173e6b; --blue-dim:rgba(23,62,107,0.14); --orange:#5c3408; --orange-dim:rgba(92,52,8,0.14); --purple:#3b2472; --purple-dim:rgba(59,36,114,0.14); --green:#0e4733; --green-dim:rgba(14,71,51,0.14); --rose:#732136; --rose-dim:rgba(115,33,54,0.14); --yellow:#553e06; --yellow-dim:rgba(85,62,6,0.14); --teal:#0a4640; --teal-dim:rgba(10,70,64,0.14); --cyan:#114a5c; --cyan-dim:rgba(17,74,92,0.14); --red:#731f2c; --red-dim:rgba(115,31,44,0.14); --accent:#e3ddff; --accent-dim:rgba(227,221,255,0.16); } /* Anything on a lavender surface takes the dark palette back. `color` is set explicitly as well as the tokens, because colour inherits as a computed value — a child with no colour rule of its own would otherwise keep the pale ground colour it inherited from body. */ :root[data-app][data-theme="galaxy"] :is( .announcement, .schedule-item, .sch-date-box, .resource-card, .note-card, .note-row, .video-preview, .resource-thumb, .about-hero, .project-card, .hobby-pill, .subject-card, .back-btn, .progress-bar-wrap, .search-bar input, .header-profile, .gate-stat ) { color:#221c4c; --text:#221c4c; --text-muted:#3b3475; --text-dim:#4a4278; --accent:#3a2d7e; /* On lavender a white edge disappears; this is the panel's own seam. */ --border:rgba(58,45,126,0.16); } /* The sidebar CTA takes its label colour from --bg, which is now dark. */ :root[data-app][data-theme="galaxy"] .nav-cta { background:#e3ddff; color:#2c2166; } /* The shell paints its own page background in a couple of places. */ :root[data-app][data-theme="light"] body, :root[data-app][data-theme="galaxy"] body { background:var(--bg); color:var(--text); } /* Pages without a .topbar get the picker docked in the corner instead. */ .theme-dock { position:fixed; right:1rem; bottom:1rem; z-index:1500; display:flex; } .theme-dock .theme-switch { margin:0; box-shadow:0 4px 18px rgba(0,0,0,.28); background:var(--surface, var(--bg-card)); } @media (max-width:640px){ .theme-dock { right:.625rem; bottom:.625rem; } } /* ── app-shell components that pin their own colours ─────────────────── .nav-cta paints a gold gradient via background-image, which outranks `background: var(--accent)` — so in a non-gold theme the button kept the gold while its label followed the theme. Each theme now supplies its own. */ :root[data-app][data-theme="light"] .nav-cta { background-image: linear-gradient(150deg, #a9741f 0%, #8a5f1a 100%); color: #ffffff; box-shadow: 0 6px 16px rgba(138,95,26,.24), inset 0 1px 0 rgba(255,255,255,.25); } :root[data-app][data-theme="galaxy"] .nav-cta { background-image: linear-gradient(150deg, #efeaff 0%, #d9d2fb 100%); color: #2c2166; box-shadow: 0 6px 16px rgba(43,36,92,.30), inset 0 1px 0 rgba(255,255,255,.45); } /* ── skip link ───────────────────────────────────────────────────────── Injected by theme-switch.js on every page, so it must be styled here in the one stylesheet every page loads — it previously lived in responsive.css and was therefore unstyled on the 84 GATE pages. */ .skip-link { /* Position and the hidden state are set inline by theme-switch.js so the link is never visible when this file has not arrived yet. What is left here is only theming. */ background:var(--accent, #c9974a); color:var(--on-accent, #12141c); font-family:var(--font-body, system-ui, sans-serif); } .skip-link:focus { top:0 !important; } /* The copy-code button is styled for a dark surface by theme-light.css. */ :root[data-theme="galaxy"] .code-copy-btn { background:rgba(43,36,92,.10); border-color:rgba(43,36,92,.28); color:#2f2861; } :root[data-theme="galaxy"] .code-copy-btn:hover { background:rgba(43,36,92,.18); } /* The shell's bottom-nav labels ride on the surface, not the page ground, and measured 2.7:1 in light against it. */ :root[data-app][data-theme="light"] .bottom-nav { background:rgba(247,245,241,.94); border-top-color:#e0d9cd; } :root[data-app][data-theme="light"] .bn-label, :root[data-app][data-theme="light"] .bottom-nav-item { color:#5c5449; } :root[data-app][data-theme="light"] .bottom-nav-item.active, :root[data-app][data-theme="light"] .bottom-nav-item.active .bn-label { color:#8a5f1a; } :root[data-app][data-theme="galaxy"] .bottom-nav { background:rgba(62,55,120,.95); border-top-color:rgba(255,255,255,.28); } :root[data-app][data-theme="galaxy"] .bn-label, :root[data-app][data-theme="galaxy"] .bottom-nav-item { color:#e7e3ff; } :root[data-app][data-theme="galaxy"] .bottom-nav-item.active, :root[data-app][data-theme="galaxy"] .bottom-nav-item.active .bn-label { color:#ffffff; } /* ── GATE tab: two spots that pin their own colours ──────────────────── .gate-banner paints a gold gradient via background-image and .sc-count .orange2 hardcodes amber, so both ignored the theme. In galaxy the banner read as a muddy gold wash over violet and the badge as pale-on-pale. */ :root[data-app][data-theme="light"] .gate-banner { background-image: linear-gradient(150deg, rgba(138,95,26,.10) 0%, rgba(138,95,26,.04) 100%); } :root[data-app][data-theme="light"] .sc-count.orange2 { background: rgba(163,93,9,.12); color: #a35d09; } :root[data-app][data-theme="galaxy"] .gate-banner { background-color: #cdc7f3; background-image: linear-gradient(150deg, rgba(255,255,255,.45) 0%, rgba(193,186,238,.55) 100%); /* The banner is a light panel, so everything inside it takes the dark palette — the stats read #ece9ff (the ground colour) against it before. */ color: #221c4c; --text: #221c4c; --text-muted: #3b3475; --text-dim: #4a4278; --border: rgba(58,45,126,.16); /* .gs-val (the big 7 / 12 / 84) is painted with var(--accent), which is pale for the violet ground — inside this light panel it vanished. */ --accent: #3a2d7e; --accent-dim: rgba(58,45,126,.16); } :root[data-app][data-theme="galaxy"] .gate-banner h1, :root[data-app][data-theme="galaxy"] .gate-banner h2, :root[data-app][data-theme="galaxy"] .gate-stat { color: #221c4c; } :root[data-app][data-theme="galaxy"] .gate-banner-tag { background: rgba(58,45,126,.14); color: #2c2166; } :root[data-app][data-theme="galaxy"] .sc-count.orange2 { background: rgba(92,52,8,.14); color: #5c3408; } /* ── Collapsible Code Section Styles ── */ .code-lab { margin: 24px 0 16px; border: 1px solid var(--border, #1e2030); border-radius: 12px; overflow: hidden; background: var(--bg-card, #0f1117); transition: border-color .2s ease, box-shadow .2s ease; } .code-lab:hover { border-color: rgba(74,222,128,0.35); } .code-lab-header { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: rgba(74,222,128,0.06); border-bottom: 1px solid rgba(74,222,128,0.12); font-size: 13.5px; font-weight: 700; color: var(--green, #6ee7b7); cursor: pointer; user-select: none; transition: background .2s ease; } .code-lab-header:hover { background: rgba(74,222,128,0.12); } .code-toggle-pill { margin-left: auto; font-size: 11px; padding: 4px 12px; border-radius: 99px; background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.28); color: var(--green, #6ee7b7); font-weight: 700; letter-spacing: 0.2px; transition: all .2s ease; } .code-lab-header:hover .code-toggle-pill { background: rgba(74,222,128,0.22); border-color: rgba(74,222,128,0.5); } /* ── Light Theme Code Block Contrast Fix ── */ :root[data-theme="light"] .code-lab, :root[data-theme="light"] .code-lab-standalone { background: #ffffff !important; border-color: #e0d9cd !important; box-shadow: 0 2px 8px rgba(31,27,22,0.05) !important; } :root[data-theme="light"] .code-lab-header { background: rgba(138,95,26,0.08) !important; border-bottom-color: rgba(138,95,26,0.18) !important; color: #8a5f1a !important; } :root[data-theme="light"] .code-toggle-pill { background: rgba(138,95,26,0.1) !important; border-color: rgba(138,95,26,0.25) !important; color: #8a5f1a !important; } :root[data-theme="light"] .code-lab-header:hover .code-toggle-pill { background: rgba(138,95,26,0.2) !important; border-color: rgba(138,95,26,0.4) !important; } :root[data-theme="light"] pre, :root[data-theme="light"] code, :root[data-theme="light"] .code-copy-wrap, :root[data-theme="light"] .code-lab pre { background: #f0ece4 !important; color: #1f1b16 !important; } :root[data-theme="light"] pre code { background: transparent !important; color: #1f1b16 !important; } :root[data-theme="light"] .code-copy-btn { background: rgba(31,27,22,0.08) !important; border-color: rgba(31,27,22,0.18) !important; color: #5c554b !important; } :root[data-theme="light"] .code-copy-btn:hover { background: rgba(31,27,22,0.16) !important; color: #1f1b16 !important; } :root[data-theme="light"] .pg-try-btn { background: rgba(23,122,82,0.12) !important; border-color: rgba(23,122,82,0.3) !important; color: #177a52 !important; } :root[data-theme="light"] .pg-try-btn:hover { background: rgba(23,122,82,0.22) !important; border-color: rgba(23,122,82,0.5) !important; } :root[data-theme="light"] .pg-panel { background: #f7f5f1 !important; border-color: rgba(23,122,82,0.3) !important; } :root[data-theme="light"] .pg-editor { background: #ffffff !important; color: #1f1b16 !important; border-bottom-color: rgba(23,122,82,0.2) !important; } :root[data-theme="light"] .pg-status { color: #6f6659 !important; } /* Light Theme Code Block Syntax Highlighting Contrast Fixes */ :root[data-theme="light"] pre span, :root[data-theme="light"] code span { font-weight: 500; } :root[data-theme="light"] pre [style*="color:#6ee7b7"], :root[data-theme="light"] pre [style*="color: #6ee7b7"], :root[data-theme="light"] code [style*="color:#6ee7b7"], :root[data-theme="light"] code [style*="color: #6ee7b7"] { color: #059669 !important; } :root[data-theme="light"] pre [style*="color:#67e8f9"], :root[data-theme="light"] pre [style*="color: #67e8f9"], :root[data-theme="light"] code [style*="color:#67e8f9"], :root[data-theme="light"] code [style*="color: #67e8f9"] { color: #0891b2 !important; } :root[data-theme="light"] pre [style*="color:#fde68a"], :root[data-theme="light"] pre [style*="color: #fde68a"], :root[data-theme="light"] code [style*="color:#fde68a"], :root[data-theme="light"] code [style*="color: #fde68a"] { color: #b45309 !important; } :root[data-theme="light"] pre [style*="color:#f472b6"], :root[data-theme="light"] pre [style*="color: #f472b6"], :root[data-theme="light"] code [style*="color:#f472b6"], :root[data-theme="light"] code [style*="color: #f472b6"] { color: #db2777 !important; } :root[data-theme="light"] pre [style*="color:#c084fc"], :root[data-theme="light"] pre [style*="color: #c084fc"], :root[data-theme="light"] code [style*="color:#c084fc"], :root[data-theme="light"] code [style*="color: #c084fc"] { color: #7c3aed !important; } :root[data-theme="light"] pre [style*="color:#f5a623"], :root[data-theme="light"] pre [style*="color: #f5a623"], :root[data-theme="light"] code [style*="color:#f5a623"], :root[data-theme="light"] code [style*="color: #f5a623"] { color: #d97706 !important; } :root[data-theme="light"] pre [style*="color:#6b7084"], :root[data-theme="light"] pre [style*="color: #6b7084"], :root[data-theme="light"] code [style*="color:#6b7084"], :root[data-theme="light"] code [style*="color: #6b7084"] { color: #475569 !important; }