/* ---------------------------------------------------------------- ReHoGa CDN -- styles Two themes share the same token names; data-theme="dark" on swaps the values. Tokens are namespaced under :root so the dark override stays readable. ---------------------------------------------------------------- */ :root { --bg: #f4f6fb; --bg-alt: #e9edf6; --panel: #ffffff; --panel-hi: #fafbfd; --border: #e0e4ee; --border-strong: #c8d0e0; --text: #161821; --muted: #5e6577; --faint: #9aa1b3; --accent: #2e4cd9; --accent-hover: #253fb7; --accent-soft: #e6ebfb; --accent-ink: #1c2f8a; --on-accent: #ffffff; --success: #157a48; --success-soft: #e1f3e7; --hi: #fef0c8; --hi-ink: #7a5500; --shadow: 0 1px 0 rgba(20,30,60,0.03), 0 1px 2px rgba(20,30,60,0.04); --status-glow: none; /* file-type tones */ --tone-blue-bg: #eef4ff; --tone-blue-fg: #1e4ed8; --tone-amber-bg: #fef3e2; --tone-amber-fg: #9a5a08; --tone-rose-bg: #fde9eb; --tone-rose-fg: #a8243a; --tone-slate-bg: #eef0f3; --tone-slate-fg: #475569; --tone-violet-bg: #f1ebfd; --tone-violet-fg: #6536c1; --tone-emerald-bg: #e6f6ec; --tone-emerald-fg: #177045; --tone-teal-bg: #e1f4f3; --tone-teal-fg: #0e6e6a; } :root[data-theme="dark"] { --bg: #0b0d12; --bg-alt: #10131a; --panel: #151823; --panel-hi: #1a1e2a; --border: #252a39; --border-strong: #323849; --text: #e8ebf2; --muted: #9099ad; --faint: #5a6275; --accent: #7a9bf0; --accent-hover: #94aef7; --accent-soft: rgba(122,155,240,0.12); --accent-ink: #bccdf8; --on-accent: #0b0d12; --success: #7fcfa3; --success-soft: rgba(127,207,163,0.12); --hi: rgba(255,210,120,0.14); --hi-ink: #ffd285; --shadow: 0 1px 0 rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); --status-glow: 0 0 8px rgba(127,207,163,0.5); --tone-blue-bg: rgba(96,135,255,0.14); --tone-blue-fg: #9ab4ff; --tone-amber-bg: rgba(255,180,80,0.14); --tone-amber-fg: #ffc787; --tone-rose-bg: rgba(255,120,140,0.14); --tone-rose-fg: #ff9aa9; --tone-slate-bg: rgba(180,190,210,0.10); --tone-slate-fg: #aebccc; --tone-violet-bg: rgba(170,130,255,0.14); --tone-violet-fg: #bea1ff; --tone-emerald-bg: rgba(100,200,150,0.14); --tone-emerald-fg: #86d6ab; --tone-teal-bg: rgba(90,200,200,0.14); --tone-teal-fg: #7fd8d2; } /* ----- base ----- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--bg); } body { font-family: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-feature-settings: 'ss01', 'cv11'; -webkit-font-smoothing: antialiased; color: var(--text); background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; transition: background-color 0.18s ease, color 0.12s ease; } .mono { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } * { transition: background-color 0.18s ease, border-color 0.18s ease, color 0.12s ease; } /* ----- top bar ----- */ .topbar { height: 60px; border-bottom: 1px solid var(--border); background: var(--panel); display: flex; align-items: center; padding: 0 32px; gap: 28px; position: relative; z-index: 2; } .brand { display: flex; align-items: center; gap: 10px; } .brand-mark { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; letter-spacing: -0.02em; } :root[data-theme="dark"] .brand-mark { box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset; } .brand-name { font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em; color: var(--text); } .nav { display: flex; gap: 4px; font-size: 13.5px; } .nav a { padding: 6px 10px; border-radius: 7px; color: var(--muted); font-weight: 400; } .nav a.active { color: var(--text); font-weight: 500; background: var(--accent-soft); } .nav a:hover { color: var(--text); } .topbar-end { margin-left: auto; display: flex; align-items: center; gap: 12px; } .theme-toggle { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--muted); display: flex; align-items: center; justify-content: center; } .theme-toggle:hover { background: var(--panel-hi); color: var(--text); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ----- footer ----- */ .footer { border-top: 1px solid var(--border); background: var(--panel); padding: 18px 48px; display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--muted); } .footer-links { display: flex; gap: 18px; } .footer-link-accent { color: var(--accent); font-weight: 500; } /* ----- page shells ----- */ main { flex: 1; display: flex; flex-direction: column; min-height: 0; } .fade-in { animation: fadeIn 0.22s ease-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @keyframes spin { to { transform: rotate(360deg); } } /* ----- hero ----- */ .hero { background: var(--bg-alt); border-bottom: 1px solid var(--border); padding: 44px 48px 40px; } .hero-inner { max-width: 760px; } .eyebrow { font-size: 11.5px; color: var(--muted); margin-bottom: 12px; letter-spacing: 0.12em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; } .hero h1 { margin: 0; font-size: 34px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.12; color: var(--text); } .hero h1 .accent { color: var(--accent); } .hero p { margin: 12px 0 22px; font-size: 15px; color: var(--muted); line-height: 1.55; max-width: 600px; } /* ----- search ----- */ .search { height: 46px; background: var(--panel); border-radius: 10px; border: 1px solid var(--border-strong); box-shadow: var(--shadow); display: flex; align-items: center; padding: 0 14px; gap: 10px; max-width: 540px; } .search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .search input { flex: 1; border: none; background: transparent; outline: none; color: var(--text); font-size: 14px; font-family: inherit; } .search input::placeholder { color: var(--faint); } .search-submit { height: 32px; padding: 0 16px; background: var(--accent); color: var(--on-accent); border: none; border-radius: 7px; font-weight: 500; font-size: 13px; } .search-submit:hover { background: var(--accent-hover); } .popular { margin-top: 14px; font-size: 12.5px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .tag { padding: 3px 10px; border-radius: 11px; background: var(--panel); border: 1px solid var(--border); color: var(--text); font-size: 12px; } .tag:hover { border-color: var(--border-strong); } /* ----- section heading ----- */ .section { padding: 0 48px; } .section-pad-top { padding-top: 32px; } .section-pad-bottom { padding-bottom: 36px; } .section-mid { padding-top: 28px; } .section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; } .section-head h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); } .section-aside { font-size: 12.5px; color: var(--muted); } .section-link { font-size: 12.5px; color: var(--accent); font-weight: 500; } /* ----- category grid ----- */ .category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .category-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px 16px 14px; display: flex; gap: 12px; text-align: left; color: var(--text); box-shadow: var(--shadow); cursor: pointer; transition: transform 0.12s, border-color 0.12s; } .category-card:hover { border-color: var(--border-strong); transform: translateY(-1px); } .category-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .category-body { min-width: 0; flex: 1; display: flex; flex-direction: column; } .category-name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 3px; } .category-blurb { font-size: 11.5px; color: var(--muted); line-height: 1.4; margin-bottom: 8px; } .category-meta { font-size: 11px; color: var(--faint); display: flex; justify-content: space-between; } /* ----- featured strip ----- */ .featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .featured-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow); cursor: pointer; } .featured-card:hover { border-color: var(--border-strong); } .featured-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .featured-title { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; } .featured-name { font-size: 13.5px; font-weight: 500; color: var(--text); } .featured-meta { font-size: 11.5px; color: var(--faint); } .chip-hi { font-size: 10px; padding: 1px 7px; border-radius: 9px; background: var(--hi); color: var(--hi-ink); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } /* ----- file-type glyph rounded box with extension monogram ----- */ .glyph { display: inline-flex; align-items: center; justify-content: center; font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 600; letter-spacing: -0.02em; text-transform: uppercase; flex: 0 0 auto; } .glyph-sm { width: 32px; height: 32px; font-size: 10px; border-radius: 7px; } .glyph-md { width: 36px; height: 36px; font-size: 11px; border-radius: 8px; } .glyph-lg { width: 44px; height: 44px; font-size: 14px; border-radius: 10px; } .glyph-xl { width: 64px; height: 64px; font-size: 20px; border-radius: 14px; } .tone-blue { background: var(--tone-blue-bg); color: var(--tone-blue-fg); } .tone-amber { background: var(--tone-amber-bg); color: var(--tone-amber-fg); } .tone-rose { background: var(--tone-rose-bg); color: var(--tone-rose-fg); } .tone-slate { background: var(--tone-slate-bg); color: var(--tone-slate-fg); } .tone-violet { background: var(--tone-violet-bg); color: var(--tone-violet-fg); } .tone-emerald { background: var(--tone-emerald-bg); color: var(--tone-emerald-fg); } .tone-teal { background: var(--tone-teal-bg); color: var(--tone-teal-fg); } /* ----- type chip ----- */ .type-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em; } /* ----- icon button ----- */ .icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); display: inline-flex; align-items: center; justify-content: center; transition: all 0.12s; } .icon-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .icon-btn-sm { width: 34px; height: 34px; border-radius: 8px; } /* ----- detail page ----- */ .detail { padding: 28px 48px 32px; } .breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 22px; } .breadcrumb a:hover { color: var(--accent); } .breadcrumb .current { color: var(--text); font-weight: 500; } .breadcrumb svg { color: var(--faint); } .release-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px; margin-bottom: 22px; display: flex; gap: 24px; align-items: center; box-shadow: var(--shadow); } .release-body { flex: 1; min-width: 0; } .release-tags { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .tag-latest { font-size: 11px; padding: 2px 9px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; } .release-date { font-size: 12px; color: var(--muted); } .release-title { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 5px; color: var(--text); } .release-notes { font-size: 13.5px; color: var(--muted); line-height: 1.5; max-width: 560px; } .release-meta { margin-top: 12px; display: flex; gap: 14px; font-size: 12px; color: var(--faint); align-items: center; white-space: nowrap; flex-wrap: wrap; } .release-cta { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 200px; } .btn-primary { height: 44px; padding: 0 22px; background: var(--accent); color: var(--on-accent); border: none; border-radius: 10px; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; justify-content: center; transition: background 0.12s; } .btn-primary:hover { background: var(--accent-hover); } .btn-ghost { height: 34px; background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; justify-content: center; padding: 0 12px; } .btn-ghost:hover { color: var(--text); border-color: var(--border-strong); } .btn-ghost.copied { color: var(--success); border-color: var(--success); } .btn-ghost .icon-check { display: none; } .btn-ghost.copied .icon-check { display: inline-block; } .btn-ghost.copied .icon-copy { display: none; } /* ----- file list ----- */ .list-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; } .list-head h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); } .list-actions { display: flex; gap: 8px; } .pill { height: 30px; padding: 0 12px; border-radius: 7px; border: 1px solid var(--border); background: var(--panel); font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; } .pill:hover { color: var(--text); border-color: var(--border-strong); } .file-list { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); } .file-row { display: grid; grid-template-columns: 44px 1fr 90px 84px 110px 44px; gap: 14px; padding: 12px 16px; align-items: center; border-bottom: 1px solid var(--border); } .file-row:last-child { border-bottom: none; } .file-row:hover { background: var(--panel-hi); } .file-main { min-width: 0; } .file-title { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; } .file-name { font-size: 13.5px; font-weight: 500; color: var(--text); } .file-notes { font-size: 11.5px; color: var(--faint); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-version { font-size: 12px; color: var(--muted); } .file-size { font-size: 12px; color: var(--muted); } .file-date { font-size: 12px; color: var(--muted); } .security-note { margin-top: 16px; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .security-note a { color: var(--accent); font-weight: 500; } /* ----- spinner ----- */ .spinner { width: 14px; height: 14px; animation: spin 0.7s linear infinite; transform-origin: center; } /* ----- responsive ----- */ @media (max-width: 960px) { .category-grid { grid-template-columns: repeat(2, 1fr); } .featured-grid { grid-template-columns: 1fr; } .topbar { padding: 0 20px; } .hero { padding: 32px 20px; } .section { padding: 0 20px; } .detail { padding: 24px 20px; } .footer { padding: 16px 20px; flex-direction: column; gap: 10px; } .release-card { flex-direction: column; align-items: flex-start; } .release-cta { width: 100%; min-width: 0; } .file-row { grid-template-columns: 36px 1fr 44px; grid-template-areas: "glyph main btn" ". meta meta"; } .file-row > .glyph { grid-area: glyph; } .file-main { grid-area: main; } .icon-btn { grid-area: btn; } .file-version, .file-size, .file-date { display: inline; margin-right: 10px; } .file-meta-row { grid-area: meta; font-size: 11.5px; color: var(--muted); } } @media (max-width: 600px) { .category-grid { grid-template-columns: 1fr; } .nav { display: none; } } /* ----- empty state ----- */ .empty-state { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 32px; text-align: center; color: var(--muted); box-shadow: var(--shadow); font-size: 13.5px; } .empty-state p { margin: 0; } /* ----- brand logo ----- */ .brand-logo { height: 60px; width: auto; display: block; filter: none; } :root[data-theme="dark"] .brand-logo { filter: invert(1); }