/* ═══════════════════════════════════════════════════════════════ style.css — Code Note.IO *** UNIFIED *** All CSS for every page lives here. 9 Themes (dark1–dark9). SECTIONS: A. GOOGLE FONTS B. THEMES 1–9 C. RESET & BASE D. NAVBAR (shared) E. THEME BUTTON + PANEL (shared) F. SCROLL REVEAL (shared) G. BACK TO TOP (shared) H. SCROLLBAR (shared) I. HOMEPAGE — canvas, hero, search, buttons, lang cards, info, footer J. PAGE LAYOUT — sidebar + main (note/about/contact pages) K. NOTE PAGES — code cards, pop panels, search, chapters L. ABOUT PAGE — about card, lang tags, credits grid, contact btn M. CONTACT PAGE — form card, inputs, FAQ accordion, info card N. RESPONSIVE ═══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════ A. GOOGLE FONTS ═══════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Outfit:wght@300;400;600;700&family=Neuton:wght@700&family=Roboto:wght@300;400;700&display=swap'); /* ══════════════════════════════════════════ B. THEMES Each theme sets ALL CSS variables used across every page. data-theme is set on . To add a theme: copy a block, change the data-theme name, update colors, add a button in every HTML file's theme-panel. ═══════════════════════════════════════════ */ /* ── THEME 1 — Warm Sand ── */ [data-theme="dark1"] { --bg: #222831; --surface: #393E46; --card: #2a3040; --accent: #948979; --text: #DFD0B8; --text-dim: rgba(223,208,184,0.60); --border: rgba(148,137,121,0.20); --code-bg: #181c26; --nav-bg: rgba(34,40,49,0.93); --sidebar-bg: #1c2030; --sidebar-act:rgba(148,137,121,0.14); --result-bg: rgba(148,137,121,0.08); --result-bdr: rgba(148,137,121,0.30); --result-txt: #d0c4a8; --explain-bg: rgba(57,62,70,0.40); --explain-bdr:rgba(148,137,121,0.22); --explain-txt: #DFD0B8; --btn-res: #948979; --btn-exp: #7a8880; --chapter-col: #c8b49a; --copy-col: #948979; --search-bg: rgba(57,62,70,0.60); --stag-bg: rgba(148,137,121,0.12); --stag-bdr: rgba(148,137,121,0.28); --tag-bg: rgba(148,137,121,0.12); --tag-bdr: rgba(148,137,121,0.30); --btn-bg: rgba(57,62,70,0.72); --btn-border: rgba(148,137,121,0.40); --badge-js: #DFD0B8; --badge-js-b: rgba(223,208,184,0.30); --badge-css: #948979; --badge-css-b:rgba(148,137,121,0.35); --badge-html: #c4b89e; --badge-html-b:rgba(196,184,158,0.30); --badge-node: #a0b8a0; --badge-node-b:rgba(160,184,160,0.30); --badge-py: #a8c4df; --badge-py-b: rgba(168,196,223,0.30); --input-bg: #181c26; --input-bdr: rgba(148,137,121,0.30); --input-focus: #948979; --btn-send: #948979; --success-bg: rgba(80,160,80,0.12); --success-bdr:rgba(80,160,80,0.35); --success-col: #90d890; --error-bg: rgba(200,80,80,0.10); --error-bdr: rgba(200,80,80,0.32); --error-col: #d88080; --faq-bg: rgba(57,62,70,0.35); } /* ── THEME 2 — Dusty Rose ── */ [data-theme="dark2"] { --bg: #37353E; --surface: #44444E; --card: #3c3a44; --accent: #715A5A; --text: #D3DAD9; --text-dim: rgba(211,218,217,0.60); --border: rgba(113,90,90,0.22); --code-bg: #28262e; --nav-bg: rgba(55,53,62,0.93); --sidebar-bg: #2c2a34; --sidebar-act:rgba(113,90,90,0.16); --result-bg: rgba(113,90,90,0.10); --result-bdr: rgba(113,90,90,0.32); --result-txt: #c8c0c0; --explain-bg: rgba(68,68,78,0.42); --explain-bdr:rgba(113,90,90,0.24); --explain-txt: #D3DAD9; --btn-res: #9a7878; --btn-exp: #7a8888; --chapter-col: #b89898; --copy-col: #9a7878; --search-bg: rgba(68,68,78,0.65); --stag-bg: rgba(113,90,90,0.14); --stag-bdr: rgba(113,90,90,0.30); --tag-bg: rgba(113,90,90,0.12); --tag-bdr: rgba(113,90,90,0.30); --btn-bg: rgba(68,68,78,0.72); --btn-border: rgba(113,90,90,0.40); --badge-js: #D3DAD9; --badge-js-b: rgba(211,218,217,0.28); --badge-css: #9a7a7a; --badge-css-b:rgba(154,122,122,0.32); --badge-html: #c0b0b0; --badge-html-b:rgba(192,176,176,0.28); --badge-node: #a0b8a0; --badge-node-b:rgba(160,184,160,0.28); --badge-py: #a8b8d0; --badge-py-b: rgba(168,184,208,0.28); --input-bg: #28262e; --input-bdr: rgba(113,90,90,0.32); --input-focus: #9a7878; --btn-send: #715A5A; --success-bg: rgba(80,160,80,0.12); --success-bdr:rgba(80,160,80,0.35); --success-col: #90d890; --error-bg: rgba(200,80,80,0.10); --error-bdr: rgba(200,80,80,0.32); --error-col: #d88080; --faq-bg: rgba(68,68,78,0.35); } /* ── THEME 3 — Ocean Deep ── */ [data-theme="dark3"] { --bg: #1B3C53; --surface: #234C6A; --card: #1e4260; --accent: #456882; --text: #D2C1B6; --text-dim: rgba(210,193,182,0.60); --border: rgba(69,104,130,0.26); --code-bg: #122c40; --nav-bg: rgba(27,60,83,0.93); --sidebar-bg: #122c40; --sidebar-act:rgba(69,104,130,0.18); --result-bg: rgba(69,104,130,0.10); --result-bdr: rgba(69,104,130,0.34); --result-txt: #c0ccce; --explain-bg: rgba(35,76,106,0.42); --explain-bdr:rgba(69,104,130,0.28); --explain-txt: #D2C1B6; --btn-res: #5888a8; --btn-exp: #6888a0; --chapter-col: #88b0cc; --copy-col: #5888a8; --search-bg: rgba(35,76,106,0.65); --stag-bg: rgba(69,104,130,0.14); --stag-bdr: rgba(69,104,130,0.32); --tag-bg: rgba(69,104,130,0.14); --tag-bdr: rgba(69,104,130,0.32); --btn-bg: rgba(35,76,106,0.72); --btn-border: rgba(69,104,130,0.45); --badge-js: #D2C1B6; --badge-js-b: rgba(210,193,182,0.28); --badge-css: #6898b8; --badge-css-b:rgba(104,152,184,0.32); --badge-html: #c0a898; --badge-html-b:rgba(192,168,152,0.28); --badge-node: #90b898; --badge-node-b:rgba(144,184,152,0.28); --badge-py: #98b8d8; --badge-py-b: rgba(152,184,216,0.28); --input-bg: #102232; --input-bdr: rgba(69,104,130,0.35); --input-focus: #5888a8; --btn-send: #456882; --success-bg: rgba(80,160,80,0.12); --success-bdr:rgba(80,160,80,0.35); --success-col: #90d890; --error-bg: rgba(200,80,80,0.10); --error-bdr: rgba(200,80,80,0.32); --error-col: #d88080; --faq-bg: rgba(35,76,106,0.35); } /* ── THEME 4 — Steel Blue ── */ [data-theme="dark4"] { --bg: #27374D; --surface: #526D82; --card: #2c3e56; --accent: #9DB2BF; --text: #DDE6ED; --text-dim: rgba(221,230,237,0.60); --border: rgba(157,178,191,0.20); --code-bg: #1c2c3e; --nav-bg: rgba(39,55,77,0.93); --sidebar-bg: #1c2c3e; --sidebar-act:rgba(157,178,191,0.14); --result-bg: rgba(82,109,130,0.12); --result-bdr: rgba(157,178,191,0.28); --result-txt: #c8d4de; --explain-bg: rgba(44,62,86,0.44); --explain-bdr:rgba(157,178,191,0.22); --explain-txt: #DDE6ED; --btn-res: #6e90b0; --btn-exp: #7e96b0; --chapter-col: #9DB2BF; --copy-col: #6e90b0; --search-bg: rgba(82,109,130,0.55); --stag-bg: rgba(157,178,191,0.12); --stag-bdr: rgba(157,178,191,0.30); --tag-bg: rgba(157,178,191,0.12); --tag-bdr: rgba(157,178,191,0.30); --btn-bg: rgba(82,109,130,0.52); --btn-border: rgba(157,178,191,0.40); --badge-js: #DDE6ED; --badge-js-b: rgba(221,230,237,0.28); --badge-css: #9DB2BF; --badge-css-b:rgba(157,178,191,0.32); --badge-html: #c8d4dc; --badge-html-b:rgba(200,212,220,0.28); --badge-node: #90b090; --badge-node-b:rgba(144,176,144,0.28); --badge-py: #a0b8d8; --badge-py-b: rgba(160,184,216,0.28); --input-bg: #1a2838; --input-bdr: rgba(157,178,191,0.30); --input-focus: #9DB2BF; --btn-send: #526D82; --success-bg: rgba(80,160,80,0.12); --success-bdr:rgba(80,160,80,0.35); --success-col: #90d890; --error-bg: rgba(200,80,80,0.10); --error-bdr: rgba(200,80,80,0.32); --error-col: #d88080; --faq-bg: rgba(44,62,86,0.35); } /* ── THEME 5 — Noir Rose ── */ [data-theme="dark5"] { --bg: #2a2830; --surface: #37353E; --card: #322e38; --accent: #a07070; --text: #D3DAD9; --text-dim: rgba(211,218,217,0.58); --border: rgba(160,112,112,0.22); --code-bg: #201e28; --nav-bg: rgba(42,40,48,0.94); --sidebar-bg: #201e28; --sidebar-act:rgba(160,112,112,0.16); --result-bg: rgba(113,90,90,0.12); --result-bdr: rgba(160,112,112,0.30); --result-txt: #c8c0c0; --explain-bg: rgba(55,53,62,0.44); --explain-bdr:rgba(160,112,112,0.22); --explain-txt: #D3DAD9; --btn-res: #b08080; --btn-exp: #8898a0; --chapter-col: #c09090; --copy-col: #b08080; --search-bg: rgba(55,53,62,0.70); --stag-bg: rgba(160,112,112,0.12); --stag-bdr: rgba(160,112,112,0.28); --tag-bg: rgba(160,112,112,0.12); --tag-bdr: rgba(160,112,112,0.28); --btn-bg: rgba(55,53,62,0.76); --btn-border: rgba(160,112,112,0.42); --badge-js: #D3DAD9; --badge-js-b: rgba(211,218,217,0.28); --badge-css: #b08080; --badge-css-b:rgba(176,128,128,0.32); --badge-html: #c8b0b0; --badge-html-b:rgba(200,176,176,0.28); --badge-node: #98b098; --badge-node-b:rgba(152,176,152,0.28); --badge-py: #a0b0d0; --badge-py-b: rgba(160,176,208,0.28); --input-bg: #1e1c26; --input-bdr: rgba(160,112,112,0.30); --input-focus: #b08080; --btn-send: #715A5A; --success-bg: rgba(80,160,80,0.12); --success-bdr:rgba(80,160,80,0.35); --success-col: #90d890; --error-bg: rgba(200,80,80,0.10); --error-bdr: rgba(200,80,80,0.32); --error-col: #d88080; --faq-bg: rgba(55,53,62,0.38); } /* ── THEME 6 — Mint Abyss ── */ [data-theme="dark6"] { --bg: #19183B; --surface: #252458; --card: #1e1d4a; --accent: #708993; --text: #E7F2EF; --text-dim: rgba(231,242,239,0.60); --border: rgba(112,137,147,0.24); --code-bg: #12112e; --nav-bg: rgba(25,24,59,0.94); --sidebar-bg: #12112e; --sidebar-act:rgba(161,194,189,0.14); --result-bg: rgba(112,137,147,0.10); --result-bdr: rgba(161,194,189,0.30); --result-txt: #c8dce0; --explain-bg: rgba(37,36,88,0.44); --explain-bdr:rgba(112,137,147,0.24); --explain-txt: #E7F2EF; --btn-res: #70a898; --btn-exp: #7890a8; --chapter-col: #A1C2BD; --copy-col: #70a898; --search-bg: rgba(37,36,88,0.65); --stag-bg: rgba(161,194,189,0.10); --stag-bdr: rgba(161,194,189,0.28); --tag-bg: rgba(161,194,189,0.10); --tag-bdr: rgba(161,194,189,0.28); --btn-bg: rgba(37,36,88,0.66); --btn-border: rgba(161,194,189,0.38); --badge-js: #E7F2EF; --badge-js-b: rgba(231,242,239,0.28); --badge-css: #A1C2BD; --badge-css-b:rgba(161,194,189,0.32); --badge-html: #c0d8d4; --badge-html-b:rgba(192,216,212,0.28); --badge-node: #90c0a8; --badge-node-b:rgba(144,192,168,0.28); --badge-py: #a0b8d8; --badge-py-b: rgba(160,184,216,0.28); --input-bg: #10102a; --input-bdr: rgba(161,194,189,0.28); --input-focus: #A1C2BD; --btn-send: #708993; --success-bg: rgba(80,160,80,0.12); --success-bdr:rgba(80,160,80,0.35); --success-col: #90d890; --error-bg: rgba(200,80,80,0.10); --error-bdr: rgba(200,80,80,0.32); --error-col: #d88080; --faq-bg: rgba(37,36,88,0.38); } /* ── THEME 7 — Warm Taupe (#A98B76 palette) ── */ [data-theme="dark7"] { --bg: #2e2620; --surface: #3d3228; --card: #352c22; --accent: #BFA28C; --text: #F3E4C9; --text-dim: rgba(243,228,201,0.62); --border: rgba(191,162,140,0.22); --code-bg: #221a14; --nav-bg: rgba(46,38,32,0.94); --sidebar-bg: #221a14; --sidebar-act:rgba(191,162,140,0.16); --result-bg: rgba(169,139,118,0.10); --result-bdr: rgba(191,162,140,0.30); --result-txt: #e0d0b8; --explain-bg: rgba(61,50,40,0.44); --explain-bdr:rgba(186,191,148,0.22); --explain-txt: #F3E4C9; --btn-res: #BFA28C; --btn-exp: #BABF94; --chapter-col: #D4B898; --copy-col: #BFA28C; --search-bg: rgba(61,50,40,0.65); --stag-bg: rgba(191,162,140,0.12); --stag-bdr: rgba(191,162,140,0.28); --tag-bg: rgba(191,162,140,0.12); --tag-bdr: rgba(191,162,140,0.28); --btn-bg: rgba(61,50,40,0.72); --btn-border: rgba(191,162,140,0.40); --badge-js: #F3E4C9; --badge-js-b: rgba(243,228,201,0.30); --badge-css: #BABF94; --badge-css-b:rgba(186,191,148,0.32); --badge-html: #c8a880; --badge-html-b:rgba(200,168,128,0.30); --badge-node: #a0c0a0; --badge-node-b:rgba(160,192,160,0.28); --badge-py: #a8b8d8; --badge-py-b: rgba(168,184,216,0.28); --input-bg: #221a14; --input-bdr: rgba(191,162,140,0.30); --input-focus: #BFA28C; --btn-send: #A98B76; --success-bg: rgba(80,160,80,0.12); --success-bdr:rgba(80,160,80,0.35); --success-col: #90d890; --error-bg: rgba(200,80,80,0.10); --error-bdr: rgba(200,80,80,0.32); --error-col: #d88080; --faq-bg: rgba(61,50,40,0.38); } /* ── THEME 8 — Warm Cream (#FFF8F0 palette) ── */ [data-theme="dark8"] { --bg: #4B2E2B; --surface: #6b4038; --card: #5a3530; --accent: #C08552; --text: #FFF8F0; --text-dim: rgba(255,248,240,0.65); --border: rgba(192,133,82,0.25); --code-bg: #3a2420; --nav-bg: rgba(75,46,43,0.94); --sidebar-bg: #3a2420; --sidebar-act:rgba(192,133,82,0.16); --result-bg: rgba(192,133,82,0.10); --result-bdr: rgba(192,133,82,0.32); --result-txt: #f0d8b8; --explain-bg: rgba(107,64,56,0.44); --explain-bdr:rgba(140,90,60,0.24); --explain-txt: #FFF8F0; --btn-res: #C08552; --btn-exp: #8C5A3C; --chapter-col: #e0a870; --copy-col: #C08552; --search-bg: rgba(107,64,56,0.65); --stag-bg: rgba(192,133,82,0.14); --stag-bdr: rgba(192,133,82,0.32); --tag-bg: rgba(192,133,82,0.14); --tag-bdr: rgba(192,133,82,0.32); --btn-bg: rgba(107,64,56,0.72); --btn-border: rgba(192,133,82,0.42); --badge-js: #FFF8F0; --badge-js-b: rgba(255,248,240,0.30); --badge-css: #C08552; --badge-css-b:rgba(192,133,82,0.32); --badge-html: #e09060; --badge-html-b:rgba(224,144,96,0.30); --badge-node: #98c890; --badge-node-b:rgba(152,200,144,0.28); --badge-py: #a0b8e0; --badge-py-b: rgba(160,184,224,0.28); --input-bg: #3a2420; --input-bdr: rgba(192,133,82,0.30); --input-focus: #C08552; --btn-send: #C08552; --success-bg: rgba(80,160,80,0.12); --success-bdr:rgba(80,160,80,0.35); --success-col: #90d890; --error-bg: rgba(200,80,80,0.10); --error-bdr: rgba(200,80,80,0.32); --error-col: #d88080; --faq-bg: rgba(107,64,56,0.38); } /* ── THEME 9 — Forest Olive (#41431B palette) ── */ [data-theme="dark9"] { --bg: #41431B; --surface: #5a5e28; --card: #4e5220; --accent: #AEB784; --text: #F8F3E1; --text-dim: rgba(248,243,225,0.65); --border: rgba(174,183,132,0.22); --code-bg: #2e3010; --nav-bg: rgba(65,67,27,0.94); --sidebar-bg: #2e3010; --sidebar-act:rgba(174,183,132,0.16); --result-bg: rgba(174,183,132,0.10); --result-bdr: rgba(174,183,132,0.30); --result-txt: #e0dbb8; --explain-bg: rgba(90,94,40,0.44); --explain-bdr:rgba(174,183,132,0.22); --explain-txt: #F8F3E1; --btn-res: #AEB784; --btn-exp: #c8d098; --chapter-col: #c8d098; --copy-col: #AEB784; --search-bg: rgba(90,94,40,0.65); --stag-bg: rgba(174,183,132,0.12); --stag-bdr: rgba(174,183,132,0.28); --tag-bg: rgba(174,183,132,0.12); --tag-bdr: rgba(174,183,132,0.28); --btn-bg: rgba(90,94,40,0.72); --btn-border: rgba(174,183,132,0.40); --badge-js: #F8F3E1; --badge-js-b: rgba(248,243,225,0.30); --badge-css: #AEB784; --badge-css-b:rgba(174,183,132,0.32); --badge-html: #c8d090; --badge-html-b:rgba(200,208,144,0.28); --badge-node: #90c890; --badge-node-b:rgba(144,200,144,0.28); --badge-py: #a0c8e0; --badge-py-b: rgba(160,200,224,0.28); --input-bg: #2e3010; --input-bdr: rgba(174,183,132,0.30); --input-focus: #AEB784; --btn-send: #AEB784; --success-bg: rgba(80,160,80,0.12); --success-bdr:rgba(80,160,80,0.35); --success-col: #90d890; --error-bg: rgba(200,80,80,0.10); --error-bdr: rgba(200,80,80,0.32); --error-col: #d88080; --faq-bg: rgba(90,94,40,0.38); } /* ══════════════════════════════════════════ C. RESET & BASE ═══════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background-color: var(--bg); font-family: 'Outfit', sans-serif; color: var(--text); overflow-x: hidden; transition: background-color 0.45s ease, color 0.45s ease; } /* ══════════════════════════════════════════ D. NAVBAR (all pages) ═══════════════════════════════════════════ */ .Front-nav { position: sticky; top: 0; z-index: 200; background: var(--nav-bg); display: flex; align-items: center; gap: 10px; padding: 10px 20px; backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); transition: background 0.45s; } .Front-nav ul { list-style: none; display: flex; gap: 6px; margin-left: auto; margin-right: 8px; } .Front-nav ul li a { text-decoration: none; color: var(--text); padding: 6px 13px; border-radius: 8px; font-size: 14px; font-weight: 600; border: 1px solid transparent; transition: background 0.22s, border-color 0.22s; } .Front-nav ul li a:hover { background: var(--surface); border-color: var(--border); } .menu-icon { color: var(--accent); font-size: 22px; cursor: pointer; transition: color 0.2s; flex-shrink: 0; } .menu-icon:hover { color: var(--text); } /* page badge (note pages) */ .js-1s, .page-label { font-family: 'JetBrains Mono', monospace; color: var(--accent); font-size: 14px; background: rgba(255,255,255,0.06); padding: 4px 11px; border-radius: 8px; border: 1px solid var(--border); white-space: nowrap; transition: color 0.45s; } /* ══════════════════════════════════════════ E. THEME BUTTON + PANEL (all pages) ═══════════════════════════════════════════ */ @keyframes navDynamicShift { 0% { background-position: 0 0, 0% 50%; } 50% { background-position: 0 0, 100% 50%; } 100% { background-position: 0 0, 0% 50%; } } .theme-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg, rgba(8, 14, 28, 0.92), rgba(15, 23, 42, 0.76)) padding-box, linear-gradient(120deg, #FACC15, #3B82F6, #10B981, #8B5CF6, #F97316, #FACC15) border-box; background-size: 100% 100%, 240% 240%; border: 1px solid transparent; color: #F8FAFC; padding: 7px 15px; border-radius: 12px; cursor: pointer; font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 600; white-space: nowrap; flex-shrink: 0; box-shadow: 0 14px 34px rgba(2, 6, 23, 0.26), 0 0 24px rgba(59, 130, 246, 0.14); backdrop-filter: blur(15px); transition: transform 0.22s ease, box-shadow 0.22s ease, background-position 0.4s ease; animation: navDynamicShift 12s ease infinite; } .theme-btn:hover { color: #F8FAFC; transform: translateY(-2px); box-shadow: 0 18px 38px rgba(2, 6, 23, 0.34), 0 0 30px rgba(250, 204, 21, 0.22); background-position: 0 0, 100% 50%; } .theme-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.24), 0 18px 38px rgba(2, 6, 23, 0.30); } .theme-panel { position: fixed; top: 56px; right: 16px; z-index: 500; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px; display: none; flex-direction: column; gap: 8px; min-width: 212px; max-height: 80vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,0.40); transition: background 0.45s; } .theme-panel.open { display: flex; } .theme-panel-label { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 3px; } .theme-option { display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 9px; padding: 8px 11px; cursor: pointer; color: var(--text); font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 600; transition: background 0.2s, border-color 0.2s; } .theme-option:hover { background: rgba(255,255,255,0.09); border-color: var(--accent); } .theme-option.active { border-color: var(--accent); background: rgba(255,255,255,0.08); } .t-swatch { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.12); flex-shrink: 0; } /* ══════════════════════════════════════════ F. SCROLL REVEAL (all pages) Class .reveal starts hidden. JS adds .visible on intersection, removes on exit so it repeats every scroll up and down. ═══════════════════════════════════════════ */ .reveal { opacity: 0; transform: scale(0.94) translateY(22px); transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .reveal.visible { opacity: 1; transform: scale(1) translateY(0); } /* ══════════════════════════════════════════ G. BACK TO TOP (all pages) ═══════════════════════════════════════════ */ .back-top { position: fixed; bottom: 26px; right: 26px; width: 42px; height: 42px; background: var(--accent); color: var(--bg); border: none; border-radius: 12px; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(10px); transition: opacity 0.28s, transform 0.28s, background 0.2s; z-index: 100; } .back-top.show { opacity: 1; transform: translateY(0); } .back-top:hover { background: var(--text); color: var(--bg); } /* ══════════════════════════════════════════ H. SCROLLBAR (all pages) ═══════════════════════════════════════════ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* ══════════════════════════════════════════ ANIMATION TOGGLE SWITCH (navbar) Animated pill toggle — off by default. .on class added by JS when enabled. ═══════════════════════════════════════════ */ .anim-toggle { display: flex; align-items: center; gap: 7px; cursor: pointer; flex-shrink: 0; -webkit-user-select: none; user-select: none; } .anim-toggle input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .anim-toggle .track { position: relative; width: 42px; height: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; flex-shrink: 0; transition: background 0.30s ease, border-color 0.30s ease; } .anim-toggle.on .track { background: var(--accent); border-color: var(--accent); } .anim-toggle .thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: var(--text-dim); border-radius: 50%; transition: transform 0.30s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.30s ease; pointer-events: none; } .anim-toggle.on .thumb { transform: translateX(18px); background: var(--bg); } .anim-lbl { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; color: var(--text-dim); white-space: nowrap; transition: color 0.25s; } .anim-toggle:hover .anim-lbl { color: var(--text); } /* ══════════════════════════════════════════ I. HOMEPAGE canvas, hero, search, buttons, lang cards ═══════════════════════════════════════════ */ /* Canvas background */ #bg-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.50; } /* Hero */ .hero-section { position: relative; z-index: 10; text-align: center; padding: 70px 20px 36px; } .main-title { color: var(--text); font-size: clamp(3rem, 9vw, 9rem); font-family: 'Neuton', serif; font-weight: 700; line-height: 1.1; letter-spacing: -1px; text-shadow: 0 0 60px rgba(255,255,255,0.08); margin-bottom: 16px; transition: color 0.45s; } .deitals-1s { color: var(--accent); font-family: 'Outfit', sans-serif; font-size: clamp(15px, 2.2vw, 24px); margin-bottom: 8px; transition: color 0.45s; } .coding-D-1s { color: var(--text-dim); font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 2px; } /* Homepage search */ .search-section { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 20px 28px; } .search-wrap { position: relative; width: 100%; max-width: 640px; } .search-icon { display: none; } .search-input { width: 100%; padding: 13px 44px 13px 14px; background: var(--search-bg); border: 1px solid var(--border); border-radius: 12px; color: var(--text); font-family: 'Outfit', sans-serif; font-size: 15px; outline: none; transition: border-color 0.25s, background 0.25s, box-shadow 0.25s; } .search-input::placeholder { color: var(--text-dim); } .search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,255,255,0.06); } .search-clear { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-dim); font-size: 16px; cursor: pointer; display: none; transition: color 0.2s; } .search-clear:hover { color: var(--text); } .search-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .stag { background: var(--stag-bg); border: 1px solid var(--stag-bdr); color: var(--text-dim); padding: 5px 14px; border-radius: 20px; font-size: 13px; font-family: 'JetBrains Mono', monospace; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; } .stag:hover, .stag.active { background: var(--accent); color: var(--bg); border-color: var(--accent); } .search-count { font-size: 12px; color: var(--text-dim); min-height: 18px; font-family: 'JetBrains Mono', monospace; } .lang-block.search-hidden { display: none; } /* Platform text */ .platform-section { position: relative; z-index: 10; padding: 0 20px; } .platform-1s { color: var(--text); text-align: center; font-family: 'Neuton', serif; font-size: clamp(18px, 2.4vw, 27px); letter-spacing: 2.3px; padding: 8px 0; transition: color 0.45s; } .info-1s, .info-2s, .info-3s { color: var(--text-dim); text-align: center; font-family: 'Outfit', sans-serif; font-size: clamp(14px, 1.3vw, 17px); line-height: 1.88; max-width: 760px; margin: 0 auto; } .info-2s { padding-top: 22px; } .info-1s { padding-top: 18px; } .info-3s { padding-top: 18px; padding-bottom: 48px; } .divider { border: none; border-top: 1px solid var(--border); margin: 10px 28px 0; } /* Homepage nav buttons */ .button-cm { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding: 36px 24px 46px; position: relative; z-index: 10; } .button-cls { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 150px; padding: 12px 22px; background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0)), var(--btn-bg); color: var(--text); border: 1px solid var(--btn-border); border-radius: 12px; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; letter-spacing: 0.4px; box-shadow: 0 12px 24px rgba(0,0,0,0.14); transition: background 0.22s, border-color 0.22s, transform 0.15s, color 0.22s, box-shadow 0.22s; } .button-cls:hover { background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0)), var(--accent); border-color: var(--accent); color: var(--bg); transform: translateY(-2px); box-shadow: 0 16px 28px rgba(0,0,0,0.18); } .button-cls:active { transform: translateY(1px); } .button-cls:focus { outline: none; box-shadow: 0 0 0 2px var(--btn-border), 0 12px 24px rgba(0,0,0,0.14); } .button-icon { color: inherit; font-size: 13px; } .button-label { color: inherit; white-space: nowrap; } /* Language cards */ .lang-section { position: relative; z-index: 10; padding: 0 28px 24px; } .lang-section .code-intro-1s { display: none; } .L-i { color: var(--text); font-family: 'Neuton', serif; font-size: clamp(20px, 3vw, 34px); padding: 38px 0 26px; transition: color 0.45s; } .lang-block { display: flex; align-items: flex-start; gap: 26px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 16px; padding: 26px 30px; margin-bottom: 18px; transition: border-color 0.28s, background 0.28s; } .lang-block:hover { background: rgba(255,255,255,0.07); border-color: var(--accent); } .lang-badge { flex-shrink: 0; width: 68px; height: 68px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 17px; font-weight: 700; letter-spacing: 1px; border: 2px solid; } .lang-badge-js { color: var(--badge-js); border-color: var(--badge-js-b); background: rgba(255,220,50,0.10); } .lang-badge-css { color: var(--badge-css); border-color: var(--badge-css-b); background: rgba(100,60,160,0.10); } .lang-badge-html { color: var(--badge-html); border-color: var(--badge-html-b); background: rgba(220,80,36,0.10); } .lang-badge-node { color: var(--badge-node); border-color: var(--badge-node-b); background: rgba(100,180,40,0.10); } .lang-badge-python { color: var(--badge-py); border-color: var(--badge-py-b); background: rgba(60,120,180,0.10); } /* New language badges — fixed brand colors, work across all 9 themes */ .lang-badge-cpp { color: #00599C; border-color: rgba(0,89,156,0.30); background: rgba(0,89,156,0.10); } /* C++ (official blue) */ .lang-badge-csharp { color: #9B4F96; border-color: rgba(155,79,150,0.30); background: rgba(155,79,150,0.10); } /* C# (purple) */ .lang-badge-tailwind{ color: #06B6D4; border-color: rgba(6,182,212,0.30); background: rgba(6,182,212,0.10); } /* Tailwind (cyan) */ .lang-badge-go { color: #00ADD8; border-color: rgba(0,173,216,0.30); background: rgba(0,173,216,0.10); } /* Go (light blue) */ .lang-badge-ruby { color: #CC342D; border-color: rgba(204,52,45,0.30); background: rgba(204,52,45,0.10); } /* Ruby (red) */ .lang-badge-rust { color: #DEA584; border-color: rgba(222,165,132,0.30);background: rgba(222,165,132,0.10);} /* Rust (orange-brown) */ .lang-badge-kotlin { color: #7F52FF; border-color: rgba(127,82,255,0.30); background: rgba(127,82,255,0.10); } /* Kotlin (gradient base purple) */ .lang-badge-kali { color: #268BEE; border-color: rgba(38,139,238,0.30); background: rgba(38,139,238,0.10); } /* Kali Linux (blue) */ .lang-badge-java { color: #F89820; border-color: rgba(248,152,32,0.30); background: rgba(248,152,32,0.10); } /* Java (orange) */ .lang-badge-php { color: #777BB4; border-color: rgba(119,123,180,0.30);background: rgba(119,123,180,0.10);} /* PHP (indigo) */ .lang-badge-c { color: #A8B9CC; border-color: rgba(168,185,204,0.30);background: rgba(168,185,204,0.10);} /* C (light blue-gray) */ .lang-content { flex: 1; } .lang-title { color: var(--text); font-family: 'Neuton', serif; font-size: clamp(18px, 2.4vw, 28px); font-weight: 700; letter-spacing: 2px; margin-bottom: 10px; transition: color 0.45s; } .code-intro-1s { color: var(--text-dim); font-size: clamp(13px, 1.2vw, 15px); line-height: 2; } .credit-1 { color: rgba(255,255,255,0.18); text-align: right; font-size: 12px; padding: 24px 4px 8px; line-height: 1.8; } .credit-3s { position: relative; z-index: 10; text-align: center; padding: 26px 20px 44px; color: rgba(255,255,255,0.18); font-family: 'Outfit', sans-serif; font-size: 13px; line-height: 2; } /* ══════════════════════════════════════════ J. PAGE LAYOUT — sidebar + main (note pages, About page, Contact page) ═══════════════════════════════════════════ */ .page-layout { display: flex; min-height: calc(100vh - 56px); } .sidebar { position: sticky; top: 56px; width: 240px; height: calc(100vh - 56px); overflow-y: auto; flex-shrink: 0; background: var(--sidebar-bg); border-right: 1px solid var(--border); padding: 18px 0; transition: background 0.45s, border-color 0.45s; } .sidebar-header { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); padding: 0 16px 12px; border-bottom: 1px solid var(--border); margin-bottom: 8px; } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; } .sidebar-link { text-decoration: none; color: var(--text-dim); font-size: 13px; padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; transition: background 0.20s, color 0.20s, border-color 0.20s; line-height: 1.4; } .sidebar-link:hover { background: var(--sidebar-act); color: var(--text); border-color: var(--border); } .sidebar-link.active { background: var(--sidebar-act); color: var(--text); border-color: var(--accent); } .sidebar::-webkit-scrollbar { width: 4px; } .sidebar::-webkit-scrollbar-track { background: transparent; } .sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } .main-content { flex: 1; padding: 22px 30px 80px; min-width: 0; } /* ══════════════════════════════════════════ K. NOTE PAGES code cards, chapters, pop panels, search, copy ═══════════════════════════════════════════ */ /* Note-page search bar */ .search-section.note-search { align-items: flex-start; padding: 18px 0 10px; max-width: 620px; } .search-section.note-search .search-wrap { max-width: 100%; } .search-section.note-search .search-input { padding: 11px 40px 11px 42px; border-radius: 10px; font-size: 14px; } .code-container.search-hidden { display: none; } /* Chapter headings */ .chapters { font-family: 'Neuton', serif; font-size: clamp(1.3rem, 2.4vw, 1.9rem); color: var(--chapter-col); padding: 40px 0 8px; letter-spacing: 0.4px; transition: color 0.45s; } .chapters::after { content: ''; display: block; height: 2px; width: 56px; background: linear-gradient(90deg, var(--accent), transparent); margin-top: 7px; border-radius: 2px; } /* CSS page intro heading */ .css-title { font-family: 'JetBrains Mono', monospace; font-size: clamp(1.6rem, 3vw, 2.6rem); color: var(--chapter-col); padding: 28px 0 8px; letter-spacing: 2px; transition: color 0.45s; } .css-p { color: var(--text-dim); font-size: 15px; line-height: 1.82; max-width: 760px; padding-bottom: 10px; } /* Code card */ .code-container { background: var(--card); border: 1px solid var(--border); border-radius: 14px; margin: 12px 0; overflow: hidden; transition: border-color 0.28s, background 0.45s; } .code-container:hover { border-color: var(--accent); } .card-header { display: flex; justify-content: space-between; align-items: center; padding: 11px 16px; background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--border); } .card-title { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--accent); font-weight: 700; } .copy-btn { background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--copy-col); padding: 4px 11px; border-radius: 7px; font-size: 12px; cursor: pointer; font-family: 'Outfit', sans-serif; font-weight: 600; transition: background 0.2s, color 0.2s; } .copy-btn:hover { background: var(--surface); } .copy-btn.copied { color: #80c080; border-color: rgba(128,192,128,0.40); } pre { background: var(--code-bg) !important; margin: 0 !important; padding: 18px 20px !important; border-radius: 0 !important; overflow-x: auto; border: none !important; font-size: 13px; line-height: 1.76; transition: background 0.45s; } code { font-family: 'JetBrains Mono', monospace !important; font-size: 13px !important; } /* Pop buttons & panels */ .pop-buttons { display: flex; gap: 10px; padding: 11px 16px; background: rgba(255,255,255,0.02); border-top: 1px solid var(--border); } .pop-btn { padding: 7px 15px; border-radius: 9px; border: 1px solid; cursor: pointer; font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 600; transition: all 0.22s cubic-bezier(0.34,1.56,0.64,1); } .pop-btn:hover { transform: translateY(-2px) scale(1.04); } .pop-btn:active { transform: scale(0.97); } .pop-result { background: rgba(255,255,255,0.05); color: var(--btn-res); border-color: var(--result-bdr); } .pop-explain { background: rgba(255,255,255,0.04); color: var(--btn-exp); border-color: var(--explain-bdr); } .pop-result:hover { background: var(--result-bg); } .pop-explain:hover { background: var(--explain-bg); } .pop-panel { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.44s cubic-bezier(0.4,0,0.2,1), opacity 0.28s ease; } .pop-panel.open { max-height: 520px; opacity: 1; } .pop-inner { margin: 0 13px 13px; border-radius: 10px; padding: 13px 17px; font-size: 14px; line-height: 1.82; } .result-inner { background: var(--result-bg); border: 1px solid var(--result-bdr); color: var(--result-txt); transition: background 0.45s, border-color 0.45s; } .explain-inner { background: var(--explain-bg); border: 1px solid var(--explain-bdr); color: var(--explain-txt); transition: background 0.45s, border-color 0.45s; } .pop-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; opacity: 0.70; margin-bottom: 7px; } .pop-text { font-family: 'JetBrains Mono', monospace; font-size: 13px; white-space: pre-wrap; } /* ══════════════════════════════════════════ L. ABOUT PAGE ═══════════════════════════════════════════ */ .page-title { font-family: 'Neuton', serif; font-size: clamp(2rem, 4vw, 3rem); color: var(--chapter-col); padding-bottom: 12px; margin-bottom: 24px; border-bottom: 2px solid var(--border); letter-spacing: 0.5px; transition: color 0.45s; } .about-subtitle { font-family: 'Neuton', serif; font-size: clamp(1.2rem, 2.2vw, 1.6rem); color: var(--chapter-col); padding: 36px 0 8px; letter-spacing: 0.5px; transition: color 0.45s; } .about-subtitle::after { content: ''; display: block; height: 2px; width: 50px; background: linear-gradient(90deg, var(--accent), transparent); margin-top: 7px; border-radius: 2px; } .about-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 24px 28px; margin-bottom: 6px; transition: border-color 0.28s, background 0.45s; } .about-card:hover { border-color: var(--accent); } .about-p { color: var(--text-dim); font-size: 16px; line-height: 1.90; margin-bottom: 14px; transition: color 0.45s; } .about-p:last-child { margin-bottom: 0; } .about-p strong { color: var(--text); font-weight: 700; } /* Language tags (About page) */ .lang-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .ltag { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; padding: 5px 14px; border-radius: 20px; background: var(--tag-bg); border: 1px solid var(--tag-bdr); letter-spacing: 0.5px; color: var(--text); transition: background 0.2s, transform 0.15s; } .ltag:hover { transform: translateY(-2px); } .ltag-js { border-color: rgba(220,180,80,0.40); color: #d8b870; } .ltag-html { border-color: rgba(220,110,60,0.40); color: #d07050; } .ltag-css { border-color: rgba(80,140,220,0.40); color: #6090d8; } .ltag-py { border-color: rgba(80,160,220,0.40); color: #60a8d8; } .ltag-node { border-color: rgba(100,180,100,0.40); color: #70b870; } .ltag-cpp { border-color: rgba(128,184,232,0.40); color: #80b8e8; } .ltag-csharp { border-color: rgba(184,144,232,0.40); color: #b890e8; } .ltag-tailwind{ border-color: rgba(56,189,248,0.40); color: #38bdf8; } .ltag-c { border-color: rgba(140,180,220,0.40); color: #8cb4dc; } .ltag-java { border-color: rgba(240,160,90,0.40); color: #f0a05a; } .ltag-php { border-color: rgba(160,150,220,0.40); color: #a096dc; } .ltag-go { border-color: rgba(122,215,224,0.40); color: #7ad7e0; } .ltag-ruby { border-color: rgba(240,138,138,0.40); color: #f08a8a; } .ltag-rust { border-color: rgba(214,164,106,0.40); color: #d6a46a; } .ltag-kotlin { border-color: rgba(183,156,255,0.40); color: #b79cff; } .ltag-kali { border-color: rgba(124,184,255,0.40); color: #7cb8ff; } /* Credits grid */ .credits-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 16px; } .credit-item { background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 9px; padding: 10px 14px; font-size: 14px; color: var(--text-dim); transition: background 0.2s, color 0.2s, border-color 0.2s; } .credit-item:hover { background: var(--sidebar-act); color: var(--text); border-color: var(--accent); } /* Contact link button on About page */ .contact-link-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 11px 24px; background: rgba(255,255,255,0.05); border: 1px solid var(--accent); border-radius: 10px; color: var(--text); font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; text-decoration: none; transition: background 0.22s, color 0.22s, transform 0.15s; } .contact-link-btn:hover { background: var(--accent); color: var(--bg); transform: translateY(-2px); } /* ══════════════════════════════════════════ M. CONTACT PAGE ═══════════════════════════════════════════ */ .section-subtitle { font-family: 'Neuton', serif; font-size: clamp(1.2rem, 2.2vw, 1.6rem); color: var(--chapter-col); padding: 36px 0 10px; letter-spacing: 0.5px; transition: color 0.45s; } .section-subtitle::after { content: ''; display: block; height: 2px; width: 50px; background: linear-gradient(90deg, var(--accent), transparent); margin-top: 7px; border-radius: 2px; } /* Form card */ .form-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 30px 34px; transition: background 0.45s, border-color 0.45s; } .form-intro { color: var(--text-dim); font-size: 15px; line-height: 1.8; margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--border); } .form-group { display: flex; flex-direction: column; margin-bottom: 20px; } .form-group label { color: var(--accent); font-size: 13px; font-weight: 700; font-family: 'JetBrains Mono', monospace; margin-bottom: 7px; letter-spacing: 0.5px; transition: color 0.45s; } .req { color: var(--error-col); margin-left: 2px; } .form-group input, .form-group textarea { background: var(--input-bg); border: 1px solid var(--input-bdr); border-radius: 10px; color: var(--text); font-family: 'Outfit', sans-serif; font-size: 15px; padding: 11px 15px; outline: none; resize: vertical; transition: border-color 0.25s, background 0.45s, box-shadow 0.25s; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-dim); } .form-group input:focus, .form-group textarea:focus { border-color: var(--input-focus); box-shadow: 0 0 0 3px rgba(255,255,255,0.05); } .field-error { font-size: 12px; color: var(--error-col); margin-top: 5px; min-height: 16px; font-family: 'JetBrains Mono', monospace; } .char-count { text-align: right; font-size: 12px; color: var(--text-dim); margin-top: -12px; margin-bottom: 18px; font-family: 'JetBrains Mono', monospace; } .char-count.near { color: #d8b870; } .char-count.at-max { color: var(--error-col); } .send-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--btn-send); color: var(--bg); border: none; border-radius: 11px; padding: 13px 30px; font-size: 15px; font-weight: 700; font-family: 'JetBrains Mono', monospace; cursor: pointer; transition: background 0.25s, transform 0.15s, opacity 0.2s; margin-top: 6px; } .send-btn:hover { background: var(--accent); transform: translateY(-2px); } .send-btn:active { transform: translateY(1px); } .send-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } .spinner { display: inline-block; animation: spin 0.8s linear infinite; font-size: 18px; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .status-msg { margin-top: 18px; padding: 14px 18px; border-radius: 10px; font-size: 14px; font-family: 'JetBrains Mono', monospace; line-height: 1.6; display: none; } .status-msg.success { display: block; background: var(--success-bg); border: 1px solid var(--success-bdr); color: var(--success-col); } .status-msg.error { display: block; background: var(--error-bg); border: 1px solid var(--error-bdr); color: var(--error-col); } /* Contact info card */ .info-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 22px 28px; display: flex; flex-direction: column; gap: 20px; transition: background 0.45s, border-color 0.45s; } .info-card:hover { border-color: var(--accent); } .info-row { display: flex; align-items: flex-start; gap: 16px; } .info-icon { font-size: 20px; color: var(--accent); flex-shrink: 0; margin-top: 2px; } .info-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; } .info-value { font-size: 15px; color: var(--text); text-decoration: none; transition: color 0.2s; } a.info-value:hover { color: var(--accent); text-decoration: underline; } /* FAQ accordion */ .faq-list { display: flex; flex-direction: column; gap: 10px; } .faq-item { background: var(--faq-bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: border-color 0.25s, background 0.45s; } .faq-item:hover { border-color: var(--accent); } .faq-item.open { background: rgba(255,255,255,0.04); border-color: var(--accent); } .faq-q { width: 100%; background: none; border: none; color: var(--text); font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 600; padding: 16px 20px; text-align: left; cursor: pointer; transition: color 0.2s; } .faq-q:hover { color: var(--accent); } .faq-a { max-height: 0; overflow: hidden; color: var(--text-dim); font-size: 14px; line-height: 1.80; padding: 0 20px; transition: max-height 0.38s cubic-bezier(0.4,0,0.2,1), padding 0.28s; } .faq-item.open .faq-a { max-height: 200px; padding: 0 20px 16px; } /* ══════════════════════════════════════════ N. RESPONSIVE ═══════════════════════════════════════════ */ /* @media (max-width: 768px) { .sidebar { display: none; } .main-content { padding: 14px 14px 60px; } .form-card { padding: 20px 18px; } .credits-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { .Front-nav ul li a { padding: 5px 8px; font-size: 12px; } .lang-block { flex-direction: column; } .button-cls { min-width: 120px; font-size: 12px; } } .corrector-banner { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; margin: 12px 0 16px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--border); font-size: 13px; color: var(--text-2); flex-wrap: wrap; gap: 8px; } .corrector-banner-btn { padding: 6px 14px; border-radius: 6px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 500; text-decoration: none; border: none; cursor: pointer; } */ /* ══════════════════════════════════════════ PROFILE PAGE ═══════════════════════════════════════════ */ .prof-identity-card { display: flex; align-items: flex-start; gap: 24px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 28px; margin-bottom: 8px; position: relative; transition: border-color 0.28s, background 0.45s; } .prof-identity-card:hover { border-color: var(--accent); } .prof-avatar { width: 80px; height: 80px; border-radius: 20px; background: linear-gradient(135deg, var(--accent), var(--surface)); border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 26px; font-weight: 700; color: var(--bg); flex-shrink: 0; } .prof-info { flex: 1; } .prof-name { font-family: 'Neuton', serif; font-size: 28px; font-weight: 700; color: var(--text); margin-bottom: 6px; } .prof-bio { color: var(--text-dim); font-size: 14px; margin-bottom: 12px; font-family: 'JetBrains Mono', monospace; } .prof-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .prof-tag { background: var(--tag-bg); border: 1px solid var(--tag-bdr); color: var(--accent); padding: 4px 12px; border-radius: 20px; font-size: 12px; font-family: 'JetBrains Mono', monospace; font-weight: 700; } .prof-links { display: flex; gap: 12px; } .prof-link { color: var(--text-dim); font-size: 13px; text-decoration: none; font-family: 'JetBrains Mono', monospace; padding: 5px 12px; border: 1px solid var(--border); border-radius: 8px; transition: color 0.2s, border-color 0.2s, background 0.2s; } .prof-link:hover { color: var(--accent); border-color: var(--accent); background: var(--sidebar-act); } .prof-edit-btn { position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--text-dim); padding: 6px 14px; border-radius: 8px; font-size: 13px; cursor: pointer; font-family: 'Outfit', sans-serif; transition: all 0.2s; } .prof-edit-btn:hover { border-color: var(--accent); color: var(--accent); } /* Edit Form */ .prof-edit-form { background: var(--card); border: 1px solid var(--accent); border-radius: 16px; padding: 24px 28px; margin-bottom: 8px; } .prof-edit-title { font-family: 'Neuton', serif; font-size: 20px; color: var(--chapter-col); margin-bottom: 18px; } .prof-edit-grid { display: grid; gap: 14px; } .prof-field { display: flex; flex-direction: column; gap: 6px; } .prof-field label { font-size: 12px; font-family: 'JetBrains Mono', monospace; color: var(--accent); font-weight: 700; letter-spacing: 0.5px; } .prof-field input { background: var(--input-bg); border: 1px solid var(--input-bdr); border-radius: 9px; color: var(--text); font-family: 'Outfit', sans-serif; font-size: 14px; padding: 10px 14px; outline: none; transition: border-color 0.25s; } .prof-field input:focus { border-color: var(--input-focus); } .prof-field input::placeholder { color: var(--text-dim); } .prof-edit-actions { display: flex; gap: 12px; margin-top: 18px; } .prof-save-btn { background: var(--accent); color: var(--bg); border: none; padding: 10px 24px; border-radius: 9px; font-size: 14px; font-weight: 700; font-family: 'JetBrains Mono', monospace; cursor: pointer; transition: opacity 0.2s, transform 0.15s; } .prof-save-btn:hover { opacity: 0.85; transform: translateY(-1px); } .prof-cancel-btn { background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--text-dim); padding: 10px 20px; border-radius: 9px; font-size: 14px; font-family: 'JetBrains Mono', monospace; cursor: pointer; transition: all 0.2s; } .prof-cancel-btn:hover { border-color: var(--error-col); color: var(--error-col); } /* Stats */ .prof-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 8px; } .prof-stat-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 22px 16px; text-align: center; transition: border-color 0.28s, background 0.45s; } .prof-stat-card:hover { border-color: var(--accent); } .prof-stat-num { font-family: 'Neuton', serif; font-size: 42px; font-weight: 700; color: var(--accent); line-height: 1; margin-bottom: 8px; } .prof-stat-label { font-size: 12px; font-family: 'JetBrains Mono', monospace; color: var(--text-dim); letter-spacing: 0.5px; } /* Bookmarks */ .prof-bookmarks { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px; min-height: 80px; transition: background 0.45s; } .prof-empty { color: var(--text-dim); font-size: 14px; font-family: 'JetBrains Mono', monospace; text-align: center; padding: 20px 0; } .prof-bookmark-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; background: rgba(255,255,255,0.03); transition: border-color 0.2s; } .prof-bookmark-item:hover { border-color: var(--accent); } .prof-bookmark-title { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--text); } .prof-bookmark-lang { font-size: 11px; color: var(--accent); background: var(--tag-bg); border: 1px solid var(--tag-bdr); padding: 3px 10px; border-radius: 12px; font-family: 'JetBrains Mono', monospace; } .prof-bookmark-del { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 16px; padding: 0 4px; transition: color 0.2s; } .prof-bookmark-del:hover { color: var(--error-col); } /* Badges */ .prof-badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .prof-badge { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 14px; text-align: center; transition: border-color 0.28s, background 0.45s; } .prof-badge.earned { border-color: var(--accent); background: var(--sidebar-act); } .prof-badge.locked { opacity: 0.40; } .prof-badge-icon { font-size: 32px; margin-bottom: 8px; } .prof-badge-name { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 4px; } .prof-badge-desc { font-size: 11px; color: var(--text-dim); } /* Bookmark button on code cards */ .bookmark-btn { background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--text-dim); padding: 4px 11px; border-radius: 7px; font-size: 12px; cursor: pointer; font-family: 'Outfit', sans-serif; font-weight: 600; transition: background 0.2s, color 0.2s; margin-left: 6px; } .bookmark-btn:hover { background: var(--surface); } .bookmark-btn.bookmarked { color: #f0c040; border-color: rgba(240,192,64,0.40); } @media (max-width: 768px) { .prof-stats-grid { grid-template-columns: repeat(2, 1fr); } .prof-identity-card { flex-direction: column; } .prof-edit-btn { position: static; margin-top: 12px; } } /* ========================================================================== HOMEPAGE + NAV REDESIGN OVERRIDES ========================================================================== */ .Front-nav { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 8px 18px; } .nav-left { display: flex; align-items: center; gap: 10px; min-width: 0; } .nav-brand { display: none; } .nav-actions { justify-self: end; display: flex; align-items: center; gap: 10px; } .Front-nav ul { margin: 0; margin-right: 0; gap: 6px; padding: 0; } .Front-nav ul li a { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); font-size: 13px; } .nav-profile-link { width: 38px; height: 38px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; text-decoration: none; background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03)); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255,255,255,0.08); transition: transform 0.2s ease, box-shadow 0.2s ease; } .nav-profile-link:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(15, 23, 42, 0.24); } .nav-profile-fallback { width: 100%; height: 100%; display: inline-flex; align-items: center; justify-content: center; color: #F8FAFC; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.14), rgba(255,255,255,0.02)); } .nav-profile-icon { width: 18px; height: 18px; fill: currentColor; } .nav-profile-image { width: 100%; height: 100%; object-fit: cover; } .nav-profile-link.has-image .nav-profile-fallback { display: none; } .hero-section { padding: 34px 20px 20px; } .hero-shell { position: relative; z-index: 10; max-width: 1360px; margin: 0 auto; text-align: center; padding: 48px 32px 28px; border-radius: 34px; background: radial-gradient(circle at top left, rgba(255,255,255,0.12), transparent 42%), radial-gradient(circle at top right, rgba(148,137,121,0.14), transparent 38%), linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 28px 60px rgba(15, 23, 42, 0.16); backdrop-filter: blur(7px); } .main-title { margin-bottom: 14px; display: inline-block; padding-bottom: 0.12em; font-family: 'Neuton', Georgia, serif; font-size: clamp(3.8rem, 8.4vw, 7.6rem); font-weight: 700; line-height: 1.04; color: var(--text); letter-spacing: 0.03em; background: linear-gradient(180deg, #fffaf2 0%, var(--text) 54%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 14px 26px rgba(15, 23, 42, 0.12); } .deitals-1s { margin-bottom: 24px; color: rgba(248,250,252,0.82); font-size: clamp(15px, 2.2vw, 24px); } .search-section { gap: 10px; padding: 0 20px 22px; } .hero-search-wrap { position: relative; display: flex; align-items: center; gap: 10px; max-width: 860px; margin: 0 auto; padding: 12px 12px 12px 48px; border-radius: 20px; background: rgba(15, 23, 42, 0.32); border: 1px solid rgba(255,255,255,0.1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 20px 40px rgba(15, 23, 42, 0.14); backdrop-filter: blur(15px); } .hero-search-wrap:focus-within { border-color: rgba(255,255,255,0.22); box-shadow: 0 0 0 3px rgba(255,255,255,0.05), 0 20px 40px rgba(15, 23, 42, 0.18); } .hero-search-wrap .search-icon { display: none; } .hero-search-wrap .search-input { flex: 1; padding: 0; background: transparent; border: none; border-radius: 0; box-shadow: none; } .hero-search-wrap .search-input:focus { border: none; box-shadow: none; } .hero-search-wrap .search-clear { position: static; transform: none; width: 36px; height: 36px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); } .search-editor-btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 24px; border-radius: 14px; border: 1px solid transparent; background: linear-gradient(135deg, rgba(4, 12, 26, 0.98), rgba(10, 20, 38, 0.86)) padding-box, linear-gradient(120deg, #00F5FF, #56FF7F, #FACC15, #00F5FF) border-box; background-size: 100% 100%, 240% 240%; color: #F8FAFC; font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap; animation: navDynamicShift 7s linear infinite; transition: transform 0.22s ease, box-shadow 0.22s ease, background-position 0.4s ease; box-shadow: 0 0 0 1px rgba(0,245,255,0.18), 0 0 18px rgba(0,245,255,0.18), 0 0 30px rgba(86,255,127,0.1); } .search-editor-btn:hover { transform: translateY(-2px); background-position: 0 0, 100% 50%; box-shadow: 0 0 0 1px rgba(0,245,255,0.28), 0 0 20px rgba(0,245,255,0.3), 0 0 36px rgba(86,255,127,0.16); } .platform-section { display: none; } .home-notes-wrap { position: relative; z-index: 10; max-width: 1380px; margin: 0 auto; padding: 10px 20px 24px; } .home-language-section { margin-bottom: 24px; padding: 26px 24px 30px; border-radius: 32px; background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)), radial-gradient(circle at top left, rgba(255,255,255,0.06), transparent 34%); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(10px); box-shadow: 0 22px 48px rgba(15, 23, 42, 0.12); } .home-language-section.section-hidden { display: none !important; } .home-section-head { display: flex; align-items: flex-end; gap: 18px; margin-bottom: 24px; } .home-section-copy { flex: 0 0 auto; } .home-section-kicker { margin: 0 0 6px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(248,250,252,0.54); } .home-section-title { margin: 0; font-family: 'Outfit', sans-serif; font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 700; color: #F8FAFC; letter-spacing: -0.04em; } .home-section-subtitle { margin: 7px 0 0; max-width: 540px; color: rgba(248,250,252,0.7); font-size: 14px; } .home-section-line { flex: 1 1 auto; height: 1px; margin-bottom: 8px; background: linear-gradient(90deg, rgba(255,255,255,0.22), rgba(255,255,255,0.04)); } .home-section-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 24px; } .home-note-item.search-hidden { display: none !important; } .home-note-item { position: relative; display: flex; flex-direction: column; padding-top: 34px; } .home-note-button { position: absolute; top: 0; left: 50%; z-index: 3; width: min(82%, 290px); min-width: 0; margin: 0; padding: 14px 18px !important; border-radius: 18px !important; border: 1px solid var(--btn-border) !important; background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02)), var(--btn-bg); color: var(--text) !important; transform: translateX(-50%); box-shadow: 0 16px 34px rgba(15, 23, 42, 0.2); backdrop-filter: blur(7px); } .home-note-button:hover { color: var(--text) !important; border-color: var(--accent) !important; transform: translateX(-50%) translateY(-2px); box-shadow: 0 20px 40px rgba(15, 23, 42, 0.24); } .home-note-button .button-icon { opacity: 0.82; } .home-note-card { width: 100%; min-height: 270px; padding: 56px 0 0; border-radius: 28px; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)), radial-gradient(circle at top left, rgba(255,255,255,0.05), transparent 32%); border: 1px solid var(--border); backdrop-filter: blur(8px); box-shadow: 0 22px 44px rgba(15, 23, 42, 0.12); transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease; } .home-note-card:hover { transform: translateY(-3px); box-shadow: 0 28px 50px rgba(15, 23, 42, 0.18); } .home-note-card.open { border-color: var(--accent); box-shadow: 0 30px 60px rgba(15, 23, 42, 0.22); } .home-note-card-trigger { width: 100%; border: none; background: transparent; padding: 0 22px 18px; cursor: pointer; color: inherit; text-align: left; } .home-note-card-head { display: flex; align-items: flex-start; gap: 14px; padding: 0; } .home-note-badge { width: 64px; height: 64px; border-radius: 18px; font-size: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } .home-note-card-copy { flex: 1; min-width: 0; } .home-note-card-title { display: block; font-family: 'Outfit', sans-serif; font-size: 1.12rem; font-weight: 700; color: #F8FAFC; } .home-note-card-subtitle { display: block; margin-top: 4px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(248,250,252,0.54); } .home-note-card-toggle { display: none; } .home-note-card-preview { min-height: 152px; margin: 18px 0 0; padding: 18px 18px 20px; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)), var(--explain-bg); border: 1px solid var(--explain-bdr); transition: transform 0.24s ease, border-color 0.24s ease, background 0.24s ease; } .home-note-card.open .home-note-card-preview { transform: translateY(-2px); border-color: var(--accent); background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)), var(--result-bg); } .home-note-preview-top { display: flex; align-items: flex-start; gap: 10px; } .home-note-preview-lead { display: block; font-size: 15px; line-height: 1.65; color: rgba(248,250,252,0.9); font-weight: 500; } .home-note-preview-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .home-note-preview-meta span { display: inline-flex; align-items: center; padding: 7px 10px; border-radius: 999px; background: var(--tag-bg); border: 1px solid var(--tag-bdr); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); } .home-note-card-panel { max-height: 0; opacity: 0; overflow: hidden; transform: translateY(-10px); transition: max-height 0.42s ease, opacity 0.28s ease, transform 0.28s ease; } .home-note-card-panel-inner { min-height: 0; margin: 0 22px 22px; padding: 2px 0 0; border-radius: 0; background: transparent; border: none; } .home-note-full-copy { padding: 20px 0 0; border-top: 1px solid var(--border); } .home-note-full-title { margin: 0 0 14px; font-family: 'Outfit', sans-serif; font-size: 1.08rem; color: #F8FAFC; } .home-note-full-text p { margin: 0 0 14px; color: rgba(248,250,252,0.78); font-size: 14px; line-height: 1.82; } .home-note-full-text p:last-child { margin-bottom: 0; } .home-note-card.open .home-note-card-panel { opacity: 1; transform: translateY(0); } .legacy-home-buttons, .legacy-home-lang, .legacy-home-divider { display: none !important; } @media (max-width: 1180px) { .home-section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 980px) { .Front-nav { grid-template-columns: 1fr; row-gap: 10px; } .nav-left { justify-content: flex-start; } .nav-actions { justify-self: stretch; justify-content: space-between; flex-wrap: wrap; } } @media (max-width: 760px) { .Front-nav { gap: 10px; padding: 8px 14px; } .nav-left { width: 100%; } .nav-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; } .Front-nav ul { flex-wrap: wrap; justify-content: flex-start; } .hero-shell { padding: 38px 18px 22px; border-radius: 26px; } .hero-search-wrap { flex-wrap: wrap; padding: 12px 12px 12px 46px; } .hero-search-wrap .search-input { flex-basis: calc(100% - 46px); min-width: 0; } .search-editor-btn { width: 100%; } .home-language-section { padding: 22px 16px 24px; } .home-section-head { flex-direction: column; align-items: flex-start; gap: 12px; } .home-section-line { width: 100%; margin-bottom: 0; } .home-section-grid { grid-template-columns: 1fr; gap: 20px; } .home-note-item { padding-top: 28px; } .home-note-button { width: calc(100% - 28px); } .home-note-card-trigger { padding: 0 16px 16px; } .home-note-card-panel-inner { margin-left: 16px; margin-right: 16px; } .home-note-card-preview { margin-top: 16px; min-height: 0; } } /* Homepage scale + canvas tune */ body { zoom: 1.1; } #bg-canvas { filter: saturate(1.16) contrast(1.08) brightness(1.12); } @media (max-width: 900px) { body { zoom: 1; } } /* ------------------------------------------------------ PRACTICE BUTTON ------------------------------------------------------ */ .pop-practice { background: rgba(255,255,255,0.04); color: var(--accent); border-color: var(--border); } .pop-practice:hover { background: rgba(255,255,255,0.09); } /* ------------------------------------------------------ PRACTICE MODAL ------------------------------------------------------ */ .practice-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 9999; align-items: center; justify-content: center; padding: 16px; } .practice-modal-overlay.open { display: flex; } .practice-modal-box { background: var(--card); border: 1px solid var(--border); border-radius: 16px; width: 100%; max-width: 1100px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; } /* Header */ .pm-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .pm-header-title { font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 600; color: var(--accent); } .pm-close { background: none; border: none; color: var(--text-dim); font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: all 0.2s; } .pm-close:hover { background: rgba(255,255,255,0.08); color: var(--text); } /* Type Select Screen */ .pm-type-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 40px 24px; flex: 1; } .pm-type-label { font-family: 'Outfit', sans-serif; font-size: 14px; color: var(--text-dim); margin: 0; } .pm-type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; width: 100%; max-width: 700px; } .pm-type-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; transition: all 0.22s ease; font-family: 'Outfit', sans-serif; } .pm-type-btn:hover:not(:disabled) { border-color: var(--accent); background: rgba(255,255,255,0.06); transform: translateY(-3px); } .pm-type-btn:disabled { opacity: 0.35; cursor: not-allowed; } .pm-type-icon { font-size: 22px; } .pm-type-name { font-size: 13px; font-weight: 600; color: var(--text); } .pm-type-desc { font-size: 11px; color: var(--text-dim); } /* Split View */ .pm-split { display: flex; flex: 1; overflow: hidden; min-height: 480px; } .pm-left { flex: 1; padding: 20px; overflow-y: auto; border-right: 1px solid var(--border); } .pm-right { width: 340px; display: flex; flex-direction: column; flex-shrink: 0; } .pm-editor-header { padding: 10px 14px; font-size: 12px; color: var(--text-dim); border-bottom: 1px solid var(--border); font-family: 'Outfit', sans-serif; } .pm-code-editor { flex: 1; background: var(--code-bg); color: var(--text); border: none; outline: none; padding: 14px; font-family: 'JetBrains Mono', monospace; font-size: 13px; resize: none; line-height: 1.6; } /* Question Area */ .pm-progress { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); margin-bottom: 16px; font-family: 'Outfit', sans-serif; } .pm-q-box { margin-bottom: 16px; } .pm-q-text { font-family: 'Outfit', sans-serif; font-size: 15px; color: var(--text); line-height: 1.6; margin: 0 0 12px; } .pm-q-code { background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--text); margin: 0 0 12px; white-space: pre-wrap; } /* Quiz Options */ .pm-opts { display: flex; flex-direction: column; gap: 8px; } .pm-opt { padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); cursor: pointer; font-family: 'Outfit', sans-serif; font-size: 13px; text-align: left; transition: all 0.18s; } .pm-opt:hover { border-color: var(--accent); background: rgba(255,255,255,0.06); } .pm-opt.active { border-color: var(--accent); background: rgba(255,255,255,0.08); } .pm-opt.correct { border-color: #4caf50; background: rgba(76,175,80,0.12); color: #81c784; } .pm-opt.wrong { border-color: #f44336; background: rgba(244,67,54,0.10); color: #e57373; } /* Input */ .pm-input { width: 100%; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: 'Outfit', sans-serif; font-size: 13px; outline: none; box-sizing: border-box; transition: border-color 0.2s; } .pm-input:focus { border-color: var(--accent); } /* Feedback */ .pm-feedback { padding: 10px 14px; border-radius: 8px; font-size: 13px; font-family: 'Outfit', sans-serif; margin-bottom: 12px; } .pm-feedback.ok { background: rgba(76,175,80,0.12); color: #81c784; border: 1px solid rgba(76,175,80,0.3); } .pm-feedback.fail { background: rgba(244,67,54,0.10); color: #e57373; border: 1px solid rgba(244,67,54,0.3); } /* Buttons Row */ .pm-btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; } .pm-submit-btn, .pm-next-btn, .pm-back-btn, .pm-hint-btn { padding: 8px 18px; border-radius: 8px; border: 1px solid; cursor: pointer; font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 600; transition: all 0.2s; } .pm-submit-btn { background: var(--accent); color: var(--bg); border-color: var(--accent); } .pm-submit-btn:hover { opacity: 0.85; } .pm-next-btn { background: rgba(255,255,255,0.06); color: var(--text); border-color: var(--border); } .pm-next-btn:hover { border-color: var(--accent); } .pm-back-btn { background: none; color: var(--text-dim); border-color: var(--border); } .pm-back-btn:hover { color: var(--text); } .pm-hint-btn { background: none; color: var(--text-dim); border-color: var(--border); font-size: 12px; } /* Timer */ .pm-timer { margin-bottom: 14px; } .pm-timer-bar-bg { height: 4px; background: var(--border); border-radius: 2px; margin-top: 6px; } .pm-timer-bar { height: 4px; background: var(--accent); border-radius: 2px; width: 100%; transition: width 1s linear; } /* Result */ .pm-result { text-align: center; padding: 20px 0; } .pm-result-score { font-size: 48px; font-weight: 700; color: var(--accent); font-family: 'Outfit', sans-serif; } .pm-result-pct { font-size: 20px; color: var(--text-dim); margin: 4px 0 12px; font-family: 'Outfit', sans-serif; } .pm-result-msg { font-size: 16px; color: var(--text); font-family: 'Outfit', sans-serif; } /* Responsive */ @media (max-width: 700px) { .pm-split { flex-direction: column; } .pm-right { width: 100%; height: 200px; border-right: none; border-top: 1px solid var(--border); } .pm-type-grid { grid-template-columns: repeat(2, 1fr); } } /* SQL Table */ .sql-table{width:100%;border-collapse:collapse;margin:8px 0;font-size:0.85rem;} .sql-table th,.sql-table td{border:1px solid var(--border-color,#444);padding:6px 10px;text-align:left;} .sql-table th{background:#f29111;color:#fff;} .sql-table tr:nth-child(even){background:var(--card-bg,rgba(255,255,255,0.05));} .lang-badge-sql { color: #f29111; border-color: rgba(242,145,17,0.30); background: rgba(242,145,17,0.10); }