/* ============================================================ Glass design system - liquid glass / glassmorphism Theme is driven by [data-theme] on . ============================================================ */ :root { --radius-lg: 24px; --radius-md: 16px; --radius-sm: 10px; --blur: 22px; --blur-strong: 40px; --ease: cubic-bezier(.22, 1, .36, 1); --maxw: 1440px; --gutter: 24px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; } /* ---------------- LIGHT ---------------- */ [data-theme="light"] { --bg: #eef1f6; --bg-grad-1: #dbe4f3; --bg-grad-2: #f3e8f5; --glass-bg: rgba(255, 255, 255, .55); --glass-bg-2: rgba(255, 255, 255, .38); --glass-border: rgba(255, 255, 255, .75); --glass-shadow: 0 8px 32px rgba(31, 45, 80, .12); --glass-shadow-lg: 0 18px 60px rgba(31, 45, 80, .18); --glass-highlight: rgba(255, 255, 255, .9); --text: #16202f; --text-2: #4d5a70; --text-3: #7c8798; --accent: #4c7cf3; --accent-2: #7b5cf0; --accent-soft: rgba(76, 124, 243, .14); --accent-contrast: #ffffff; --danger: #e14b5a; --success: #22a06b; --chip-bg: rgba(255, 255, 255, .5); --input-bg: rgba(255, 255, 255, .6); --table-stripe: rgba(255, 255, 255, .32); --scheme: light; } /* ---------------- DARK ---------------- */ [data-theme="dark"] { --bg: #0b1020; --bg-grad-1: #182042; --bg-grad-2: #2a1636; --glass-bg: rgba(255, 255, 255, .07); --glass-bg-2: rgba(255, 255, 255, .045); --glass-border: rgba(255, 255, 255, .14); --glass-shadow: 0 8px 32px rgba(0, 0, 0, .45); --glass-shadow-lg: 0 18px 60px rgba(0, 0, 0, .6); --glass-highlight: rgba(255, 255, 255, .16); --text: #eef2fb; --text-2: #b4bfd4; --text-3: #8592aa; --accent: #6d94ff; --accent-2: #a07dff; --accent-soft: rgba(109, 148, 255, .18); --accent-contrast: #0b1020; --danger: #ff6b7c; --success: #37cd8f; --chip-bg: rgba(255, 255, 255, .06); --input-bg: rgba(255, 255, 255, .06); --table-stripe: rgba(255, 255, 255, .03); --scheme: dark; } /* ---------------- the glass surface ---------------- */ .glass { position: relative; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(var(--blur)) saturate(180%); backdrop-filter: blur(var(--blur)) saturate(180%); } /* specular sheen along the top edge - the "liquid" cue */ .glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient( to bottom, var(--glass-highlight) 0%, rgba(255, 255, 255, 0) 38% ); opacity: .5; } /* ---------------- animated background ---------------- */ .aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(120% 120% at 10% 0%, var(--bg-grad-1), transparent 55%), radial-gradient(120% 120% at 90% 10%, var(--bg-grad-2), transparent 50%), var(--bg); } .blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; will-change: transform; } .b1 { width: 520px; height: 520px; background: #6b8dff; top: -160px; left: -120px; animation: drift1 26s var(--ease) infinite alternate; } .b2 { width: 460px; height: 460px; background: #c07cff; top: 18%; right: -160px; animation: drift2 32s var(--ease) infinite alternate; } .b3 { width: 420px; height: 420px; background: #4ad6d0; bottom: -140px; left: 24em; animation: drift3 29s var(--ease) infinite alternate; } @keyframes drift1 { to { transform: translate(140px, 90px) scale(1.12); } } @keyframes drift2 { to { transform: translate(-120px, 130px) scale(1.08); } } @keyframes drift3 { to { transform: translate(90px, -110px) scale(1.15); } } [data-theme="dark"] .blob { opacity: .32; } /* ---------------- buttons ---------------- */ .btn-primary, .btn-ghost { font-family: inherit; font-size: 14px; font-weight: 600; border-radius: var(--radius-sm); padding: 9px 18px; cursor: pointer; border: 1px solid transparent; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s; } .btn-primary { color: var(--accent-contrast); background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 20px var(--accent-soft); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 28px var(--accent-soft); } .btn-primary.small, .btn-ghost.small { padding: 6px 12px; font-size: 13px; } .btn-ghost { color: var(--text-2); background: var(--glass-bg-2); border-color: var(--glass-border); } .btn-ghost:hover { color: var(--text); background: var(--glass-bg); } .icon-btn { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--glass-border); background: var(--glass-bg-2); color: var(--text-2); cursor: pointer; text-decoration: none; font-size: 15px; transition: transform .18s var(--ease), color .18s, background .18s; } .icon-btn:hover { transform: translateY(-1px); color: var(--text); background: var(--glass-bg); } /* ---------------- form controls ---------------- */ /* Every native control inherits the theme palette, so dark mode never renders a white widget on top of a dark glass surface. */ input, textarea, select { color-scheme: var(--scheme, light); } .searchbox { display: flex; align-items: center; gap: 6px; margin: 0; height: 32px; box-sizing: border-box; background: var(--input-bg); border: 1px solid var(--glass-border); border-radius: 999px; padding: 0 10px; min-width: 180px; backdrop-filter: blur(14px); } .searchbox svg { color: var(--text-3); flex: none; } .searchbox input { border: 0; background: transparent; outline: none; color: var(--text); font-family: inherit; font-size: 14px; width: 100%; margin: 0; padding: 0; } .finput, .select { width: 100%; box-sizing: border-box; background: var(--input-bg); border: 1px solid var(--glass-border); color: var(--text); border-radius: var(--radius-sm); padding: 9px 12px; font-family: inherit; font-size: 14px; } .finput:focus, .select:focus { border-color: var(--accent); } .select { width: auto; padding: 8px 12px; } label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--text-2); font-weight: 500; } label input, label textarea, label select { margin-top: 5px; } button { font-family: inherit; } /* ---------------- table ---------------- */ .table { width: 100%; border-collapse: collapse; font-size: 14px; } .table th { text-align: left; padding: 10px 12px; font-size: 12px; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--glass-border); } .table td { padding: 11px 12px; border-bottom: 1px solid var(--table-stripe); color: var(--text-2); } .table tbody tr:hover { background: var(--table-stripe); } /* ---------------- modal ---------------- */ .modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 20px; } .modal-body { width: min(720px, 100%); max-height: 88vh; overflow-y: auto; padding: 24px; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; } /* ---------------- compact resource card ---------------- */ .card.res { display: block; padding: 0; color: inherit; text-decoration: none; } .res-body { padding: 12px 13px 13px; } .res-cover { height: 94px; margin: 0 0 10px; display: flex; align-items: center; justify-content: center; font-size: 30px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent-2) 22%, transparent)); background-size: cover; background-position: center; } .res-title { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 6px; line-height: 1.4; } .res-desc { font-size: 12px; color: var(--text-3); margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .res-meta { display: flex; gap: 8px; margin-top: 8px; font-size: 10.5px; color: var(--text-3); flex-wrap: wrap; } .res-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 7px; } .tag { font-size: 10px; padding: 2px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 600; } .badge { font-size: 10px; padding: 2px 7px; border-radius: 6px; font-weight: 700; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-contrast); } /* ---------------- description rich text (images + links) ---------------- */ .desc { color: var(--text-2); font-size: 14px; line-height: 1.6; word-break: break-word; } .desc .desc-link { color: var(--accent); text-decoration: none; } .desc .desc-link:hover { text-decoration: underline; } .desc .desc-img { display: block; max-width: 100%; height: auto; margin: 10px 0; border-radius: 12px; border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); } /* ---------------- admin live preview ---------------- */ .desc-preview { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--glass-bg-2); border: 1px solid var(--glass-border); max-height: 180px; overflow-y: auto; } .hint { font-size: 11.5px; color: var(--text-3); } code { font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--glass-bg-2); padding: 1px 5px; border-radius: 4px; font-size: 11.5px; } /* ---------------- theme toggle icons ---------------- */ /* Glyph = the state you switch TO: light -> moon (go dark) dark -> sun (go light) index.html ships both inline SVGs; CSS shows exactly one. */ .i-sun { display: none; } .i-moon { display: block; } [data-theme="dark"] .i-moon { display: none; } [data-theme="dark"] .i-sun { display: block; } /* mobile-only search buttons: hidden on desktop */ .search-toggle, .search-close { display: none; } .hidden { display: none !important; }