/* darknet.sh - terminal-flavoured directory theme Hand-authored CSS, no build step required. */ /* Light is the default theme; dark is opt-in via . */ :root { color-scheme: light; --bg: #f6f5f2; --bg-grid: #ecebe4; --surface: #ffffff; --surface-2: #f2f0ea; --border: #e4e0d7; --border-2: #d5cfc3; --text: #1e1b17; --muted: #6a6358; --faint: #9c9488; --accent: #d76a08; /* orange, darker for contrast on white */ --accent-dim: #b5560f; --accent-glow: rgba(215, 106, 8, 0.10); --on-accent: #ffffff; /* text on an orange fill */ --good: #b7860b; /* non-green "good" (gold) */ --ok: #b07a2e; --bad: #d6402c; --info: #2f6fd0; --header-bg: rgba(255, 255, 255, 0.86); --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Menlo", "Consolas", monospace; --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 2px rgba(20,16,10,0.05), 0 10px 28px -18px rgba(20,16,10,0.28); --maxw: 1360px; } html[data-theme="dark"] { color-scheme: dark; --bg: #0a0c0f; --bg-grid: #0e1116; --surface: #12161c; --surface-2: #171c24; --border: #232a34; --border-2: #2e3742; --text: #e7ecf3; --muted: #8a94a3; --faint: #5c6675; --accent: #ff8a2b; /* terminal orange */ --accent-dim: #a8530f; --accent-glow: rgba(255, 138, 43, 0.13); --on-accent: #1a0e00; --good: #ffb020; --ok: #c78b3a; --bad: #f0674f; --info: #56a8f5; --header-bg: rgba(10, 12, 15, 0.85); --shadow: 0 1px 0 rgba(255,255,255,0.02), 0 12px 32px -18px rgba(0,0,0,0.8); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--sans); background-color: var(--bg); background-image: linear-gradient(var(--bg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px); background-size: 44px 44px; background-position: -1px -1px; color: var(--text); line-height: 1.55; min-height: 100vh; display: flex; flex-direction: column; } a { color: inherit; text-decoration: none; } a:hover { color: var(--accent); } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 12px; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 40; background: var(--header-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .site-header .container { display: flex; align-items: center; gap: 20px; height: 62px; } .brand { font-family: var(--mono); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; white-space: nowrap; display: flex; align-items: center; gap: 2px; } .brand .prompt { color: var(--accent); } .brand .caret { display: inline-block; width: 8px; height: 1.05em; background: var(--accent); margin-left: 3px; translate: 0 2px; animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } .nav { display: flex; align-items: center; gap: 4px; margin-left: auto; } .nav a { font-size: 0.9rem; color: var(--muted); padding: 7px 11px; border-radius: var(--radius-sm); } .nav a:hover { color: var(--text); background: var(--surface); } .nav a.cta { color: var(--accent); border: 1px solid var(--border-2); } .nav a.cta:hover { background: var(--accent-glow); border-color: var(--accent-dim); } .menu-toggle { display: none; } /* ---------- Hero ---------- */ .hero { padding: 54px 0 26px; } .hero h1 { font-family: var(--mono); font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1.1; margin: 0 0 14px; letter-spacing: -0.03em; } .hero h1 .accent { color: var(--accent); } .hero p { color: var(--muted); max-width: 620px; font-size: 1.05rem; margin: 0 0 22px; } .hero .stat-row { display: flex; gap: 26px; flex-wrap: wrap; color: var(--faint); font-family: var(--mono); font-size: 0.82rem; } .hero .stat-row b { color: var(--text); font-weight: 600; } /* ---------- Search ---------- */ .searchbar { display: flex; gap: 10px; margin: 4px 0 8px; flex-wrap: wrap; } .searchbar .field { flex: 1 1 320px; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 12px; } .searchbar .field:focus-within { border-color: var(--accent-dim); box-shadow: 0 0 0 3px var(--accent-glow); } .searchbar .field .sigil { color: var(--accent); font-family: var(--mono); } .searchbar input[type="search"], .searchbar input[type="text"] { flex: 1; background: transparent; border: 0; outline: 0; color: var(--text); font-size: 0.95rem; padding: 11px 0; font-family: var(--sans); } .searchbar input::placeholder { color: var(--faint); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 0.9rem; font-weight: 600; padding: 10px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text); cursor: pointer; transition: background .15s, border-color .15s; } .btn:hover { background: var(--surface); border-color: var(--faint); color: var(--text); } .btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .btn-primary:hover { background: var(--accent); filter: brightness(1.06); } .btn-block { width: 100%; justify-content: center; } .btn-ghost { background: transparent; } /* ---------- Layout grid ---------- */ .layout { display: grid; grid-template-columns: 232px 1fr; gap: 26px; padding: 12px 0 60px; } .sidebar { position: sticky; top: 84px; align-self: start; } .filter-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; } .filter-card h3 { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--faint); margin: 0 0 12px; } .filter-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .filter-list a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--radius-sm); font-size: 0.9rem; color: var(--muted); } .filter-list a:hover { background: var(--surface-2); color: var(--text); } .filter-list a.active { background: var(--accent-glow); color: var(--accent); } .filter-list .count { font-family: var(--mono); font-size: 0.72rem; color: var(--faint); } .filter-list a.active .count { color: var(--accent); } /* ---------- Toolbar ---------- */ .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .toolbar .result-count { color: var(--muted); font-size: 0.9rem; font-family: var(--mono); } .toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .view-switch { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .view-switch a { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 30px; padding: 0 9px; border-radius: 5px; color: var(--muted); font-size: 0.78rem; } .view-switch a:hover { color: var(--text); } .view-switch a.active { color: var(--accent); background: var(--surface-2); } .view-switch .icon { width: 15px; height: 15px; } .sortbar { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; } .sortbar a { font-size: 0.82rem; padding: 6px 11px; border-radius: 6px; color: var(--muted); } .sortbar a:hover { color: var(--text); } .sortbar a.active { background: var(--surface-2); color: var(--accent); } /* ---------- Cards ---------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 13px; } .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .service-grid.list-view { grid-template-columns: 1fr; } .service-grid.list-view .service-card { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(180px, 1fr) auto; align-items: center; gap: 12px 18px; } .service-grid.list-view .card-head { grid-column: 1; grid-row: 1 / span 2; } .service-grid.list-view .excerpt { grid-column: 2; grid-row: 1; } .service-grid.list-view .chip-row { grid-column: 2; grid-row: 2; } .service-grid.list-view .card-foot { grid-column: 3; grid-row: 1 / span 2; border-top: 0; padding-top: 0; } .service-card { display: flex; flex-direction: column; gap: 9px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px; box-shadow: var(--shadow); transition: border-color .15s, transform .15s; position: relative; overflow: hidden; } .service-card:hover { border-color: var(--border-2); transform: translateY(-2px); } .service-card.is-featured { border-color: var(--accent-dim); } .service-card .featured-flag { position: absolute; top: 0; right: 0; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); background: var(--accent-glow); padding: 3px 9px; border-bottom-left-radius: 8px; } .card-head { display: flex; align-items: flex-start; gap: 12px; } .logo { width: 36px; height: 36px; flex-shrink: 0; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: 1.05rem; color: var(--accent); overflow: hidden; } .logo img { width: 100%; height: 100%; object-fit: cover; } .card-head .title { min-width: 0; } .card-head .title h3 { margin: 0; font-size: 0.94rem; font-weight: 650; letter-spacing: -0.01em; } .card-head .title .cat { font-size: 0.78rem; color: var(--faint); font-family: var(--mono); } .excerpt { color: var(--muted); font-size: 0.84rem; margin: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .chip-row { display: flex; flex-wrap: wrap; gap: 6px; } .card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--border); padding-top: 12px; margin-top: auto; } .meta-mini { font-family: var(--mono); font-size: 0.74rem; color: var(--faint); display: flex; gap: 12px; } /* ---------- Score badge ---------- */ .score { font-family: var(--mono); font-weight: 700; font-size: 0.95rem; display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 34px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--border-2); background: var(--surface-2); } .score small { font-size: 0.62rem; color: var(--faint); font-weight: 500; margin-left: 1px; } .score.good { color: var(--good); border-color: rgba(255,176,32,.38); background: rgba(255,176,32,.10); } .score.ok { color: var(--ok); border-color: rgba(226,185,59,.35); background: rgba(226,185,59,.08); } .score.bad { color: var(--bad); border-color: rgba(240,103,79,.35); background: rgba(240,103,79,.08); } .score.unrated { color: var(--faint); } .score-lg { min-width: 68px; height: 60px; font-size: 1.7rem; border-radius: 12px; flex-direction: column; gap: 0; } .score-lg small { font-size: 0.6rem; } /* ---------- Chips / attributes ---------- */ .chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 0.72rem; line-height: 1; padding: 5px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); white-space: nowrap; } .chip .ico { font-size: 0.85rem; } .chip.positive { color: var(--accent); border-color: rgba(255,138,43,.3); } .chip.negative { color: var(--bad); border-color: rgba(240,103,79,.3); } .chip.warning { color: var(--ok); border-color: rgba(226,185,59,.3); } .chip.neutral { color: var(--muted); } .chip.kyc-good { color: var(--accent); border-color: rgba(255,138,43,.3); background: var(--accent-glow); } .chip.kyc-ok { color: var(--ok); border-color: rgba(226,185,59,.3); } .chip.kyc-bad { color: var(--bad); border-color: rgba(240,103,79,.3); } .chip.kyc-unrated { color: var(--faint); } .tag { font-size: 0.74rem; color: var(--faint); font-family: var(--mono); } .tag::before { content: "#"; color: var(--accent-dim); } /* ---------- Detail page ---------- */ .detail-head { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 22px; } .detail-head .logo { width: 64px; height: 64px; font-size: 1.5rem; border-radius: 14px; } .detail-head h1 { margin: 0 0 4px; font-size: 1.7rem; letter-spacing: -0.02em; } .detail-head .cat { color: var(--faint); font-family: var(--mono); font-size: 0.85rem; } .detail-head .grow { flex: 1; min-width: 220px; } .detail-head .urls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .url-pill { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 0.8rem; padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .url-pill:hover { border-color: var(--accent-dim); color: var(--accent); } .url-pill .k { color: var(--faint); } .detail-grid { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start; } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 18px; } .panel h2 { font-family: var(--mono); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--faint); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .prose { color: #c7ced9; font-size: 0.97rem; } .prose p { margin: 0 0 12px; } .pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .pros-cons ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .pros-cons li { font-size: 0.9rem; display: flex; gap: 8px; align-items: baseline; } .pros-cons .pros li::before { content: "+"; color: var(--accent); font-family: var(--mono); font-weight: 700; } .pros-cons .cons li::before { content: "\2212"; color: var(--bad); font-family: var(--mono); font-weight: 700; } .attr-list { display: flex; flex-direction: column; gap: 10px; } .attr-list .attr { display: flex; gap: 10px; align-items: flex-start; } .attr-list .attr .ico { font-size: 1rem; line-height: 1.3; } .attr-list .attr .n { font-family: var(--mono); font-size: 0.82rem; } .attr-list .attr .d { color: var(--faint); font-size: 0.78rem; } .attr-list .attr.positive .n { color: var(--accent); } .attr-list .attr.negative .n { color: var(--bad); } .attr-list .attr.warning .n { color: var(--ok); } /* ---------- Reviews ---------- */ .review { border-top: 1px solid var(--border); padding: 14px 0; } .review:first-of-type { border-top: 0; } .review .rhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .review .who { font-family: var(--mono); font-size: 0.85rem; color: var(--text); } .review .when { font-size: 0.74rem; color: var(--faint); } .review .rtitle { font-weight: 600; font-size: 0.95rem; margin: 4px 0; } .review .rbody { color: var(--muted); font-size: 0.92rem; } /* ---------- Forms ---------- */ .form-row { margin-bottom: 16px; } .form-row label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 6px; font-family: var(--mono); } .form-row label .req { color: var(--bad); } .input, .textarea, .select { width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 11px 12px; font-family: var(--sans); font-size: 0.95rem; outline: 0; } .input:focus, .textarea:focus, .select:focus { border-color: var(--accent-dim); box-shadow: 0 0 0 3px var(--accent-glow); } .textarea { min-height: 130px; resize: vertical; } .help { color: var(--faint); font-size: 0.78rem; margin-top: 5px; } .field-error { color: var(--bad); font-size: 0.8rem; margin-top: 5px; } .rating-input { display: flex; gap: 6px; flex-wrap: wrap; } .rating-input input { position: absolute; opacity: 0; pointer-events: none; } .rating-input label { font-family: var(--mono); width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; color: var(--muted); margin: 0; } .rating-input input:checked + label { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .rating-input label:hover { border-color: var(--faint); color: var(--text); } /* ---------- Alerts ---------- */ .alert { border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 18px; font-size: 0.9rem; border: 1px solid var(--accent-dim); background: var(--accent-glow); color: var(--accent); } .alert-error { border-color: rgba(240,103,79,.4); background: rgba(240,103,79,.08); color: var(--bad); } /* ---------- Empty / pagination ---------- */ .empty { text-align: center; padding: 60px 20px; color: var(--muted); border: 1px dashed var(--border-2); border-radius: var(--radius); font-family: var(--mono); } .pagination { display: flex; gap: 6px; justify-content: center; margin-top: 28px; flex-wrap: wrap; list-style: none; padding: 0; } .pagination a, .pagination span { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font-family: var(--mono); font-size: 0.82rem; color: var(--muted); } .pagination a:hover { border-color: var(--faint); color: var(--text); } .pagination [aria-current] span { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .pagination .disabled span { opacity: 0.4; } /* ---------- Footer ---------- */ .site-footer { margin-top: auto; border-top: 1px solid var(--border); background: var(--bg-grid); } .site-footer .container { padding: 30px 20px; display: flex; gap: 20px; flex-wrap: wrap; justify-content: space-between; } .site-footer .col h4 { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); margin: 0 0 10px; } .site-footer .col a { display: block; color: var(--muted); font-size: 0.88rem; padding: 3px 0; } .site-footer .col a:hover { color: var(--accent); } .site-footer .disclaimer { color: var(--faint); font-size: 0.78rem; max-width: 340px; } .site-footer .brand { margin-bottom: 10px; } .tor-site-link { display: inline-flex !important; align-items: center; gap: 6px; margin-top: 8px; font-family: var(--mono); } .tor-site-link .icon { width: 14px; height: 14px; } /* ---------- Footer banner rotator ---------- */ .footer-banner-strip { border-top: 1px solid var(--border); background: var(--bg); padding: 20px 0; } .footer-banner-strip .container { max-width: 1360px; padding: 0; } .footer-banner-rotator { position: relative; width: 100%; height: 120px; margin: 0 auto; } .footer-banner { display: none; width: 100%; height: 100%; overflow: hidden; border: 1px solid transparent; border-radius: 6px; background: var(--surface); } .footer-banner.active { display: flex; animation: promoFade .45s ease; } .footer-banner:hover { border-color: var(--info); } .footer-banner img { width: 100%; height: 100%; object-fit: fill; } .footer-banner-text { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 20px; text-align: center; } .footer-banner-text strong { font-size: 1.1rem; } .footer-banner-text span { color: var(--muted); font-size: 0.9rem; } @media (max-width: 620px) { .footer-banner-strip { padding: 12px 0; } .footer-banner-rotator { height: auto; aspect-ratio: 29 / 3; } } /* ---------- Section heading ---------- */ .section-title { font-family: var(--mono); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--faint); margin: 28px 0 14px; display: flex; align-items: center; gap: 10px; } .section-title::before { content: "//"; color: var(--accent-dim); } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .layout { grid-template-columns: 1fr; } .sidebar { position: static; } .detail-grid { grid-template-columns: 1fr; } } @media (max-width: 620px) { .nav { display: none; } .nav.open { display: flex; position: absolute; top: 62px; left: 0; right: 0; flex-direction: column; background: var(--surface); border-bottom: 1px solid var(--border); padding: 8px; } .nav.open a { padding: 10px; } .menu-toggle { display: inline-flex; margin-left: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; color: var(--text); cursor: pointer; } .pros-cons { grid-template-columns: 1fr; } .stat-grid { grid-template-columns: repeat(2, 1fr); } .admin-head { flex-direction: column; align-items: flex-start; } .service-grid { grid-template-columns: 1fr; } .service-grid.list-view .service-card { display: flex; } .service-grid.list-view .card-head, .service-grid.list-view .excerpt, .service-grid.list-view .chip-row, .service-grid.list-view .card-foot { grid-column: auto; grid-row: auto; } .service-grid.list-view .card-foot { border-top: 1px solid var(--border); padding-top: 12px; } } /* ================= Icons ================= */ .icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; flex: none; } img.icon { object-fit: contain; } html:not([data-theme="dark"]) img.icon { filter: invert(1); } .btn .icon, .nav a .icon, .nav-btn .icon, .cta .icon, .cta-alt .icon { width: 15px; height: 15px; } .chip .icon { width: 13px; height: 13px; } .cat .icon { width: 13px; height: 13px; } .url-pill .icon { width: 13px; height: 13px; opacity: .7; } .logo .icon { width: 22px; height: 22px; } .detail-head .logo .icon { width: 30px; height: 30px; } .attr .ico .icon { width: 16px; height: 16px; } .section-title .icon, h2 .icon { width: 15px; height: 15px; vertical-align: -0.16em; } /* ================= Nav auth ================= */ .nav a { display: inline-flex; align-items: center; gap: 6px; } .nav-btn { background: transparent; border: 0; color: var(--muted); cursor: pointer; padding: 7px 9px; border-radius: var(--radius-sm); font: inherit; display: inline-flex; align-items: center; } .nav-btn:hover { color: var(--text); background: var(--surface); } .nav a.cta-alt { color: var(--text); border: 1px solid var(--border-2); } .nav a.cta-alt:hover { border-color: var(--accent-dim); color: var(--accent); background: var(--accent-glow); } /* ================= Buttons extra ================= */ .btn-sm { padding: 6px 10px; font-size: 0.82rem; gap: 5px; } .btn-danger { color: var(--bad); border-color: rgba(240,103,79,.3); background: transparent; } .btn-danger:hover { background: rgba(240,103,79,.1); border-color: var(--bad); color: var(--bad); } .input-sm { padding: 6px 9px; font-size: 0.85rem; } .mono { font-family: var(--mono); } textarea.mono, input.mono { font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.02em; } /* ================= Code ================= */ code { font-family: var(--mono); font-size: 0.85em; color: var(--accent); background: rgba(255,255,255,.04); padding: 1px 5px; border-radius: 4px; word-break: break-word; } .codeblock { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; font-family: var(--mono); font-size: 0.78rem; color: var(--muted); overflow-x: auto; white-space: pre-wrap; word-break: break-all; margin: 10px 0 0; } /* ================= Auth ================= */ .auth-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); background: var(--accent-glow); border: 1px solid var(--accent-dim); padding: 5px 11px; border-radius: 999px; } .auth-badge .icon { width: 13px; height: 13px; } /* ================= Captcha ================= */ .captcha-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .captcha-img { border-radius: 8px; border: 1px solid var(--border); height: 50px; display: block; } .captcha-refresh { padding: 0; width: 34px; height: 34px; justify-content: center; } /* ================= Rows (account / lists) ================= */ .row-link { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); color: var(--text); } .row-link:first-of-type { border-top: 0; } .row-link:hover { color: var(--accent); } .row-ico { width: 34px; height: 34px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; color: var(--accent); flex: none; } .row-ico .icon { width: 18px; height: 18px; } .grow { flex: 1; min-width: 0; } /* ================= Admin ================= */ .admin-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .admin-nav { display: inline-flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; } .admin-nav a { padding: 7px 13px; border-radius: 6px; font-size: 0.85rem; color: var(--muted); } .admin-nav a:hover { color: var(--text); } .admin-nav a.active { background: var(--surface-2); color: var(--accent); } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; } .stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } .stat-tile .n { font-family: var(--mono); font-size: 1.8rem; font-weight: 700; line-height: 1; } .stat-tile .l { color: var(--faint); font-size: 0.72rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 6px; } .stat-tile.warn .n { color: var(--ok); } .mod-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--border); } .mod-row:first-child { border-top: 0; } .mod-title { font-weight: 600; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .admin-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; } .admin-actions form { display: inline-flex; margin: 0; } .inline-edit { display: inline-flex; gap: 6px; align-items: center; } .api-token { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); flex-wrap: wrap; } .api-token .k { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); } .api-token code { cursor: pointer; } .api-token form { margin: 0; } .metric-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); } .metric-row:first-child { border-top: 0; } .metric-label { width: 54px; font-family: var(--mono); font-size: 0.74rem; color: var(--faint); } .metric-value { min-width: 32px; text-align: right; font-family: var(--mono); font-size: 0.8rem; } .metric-bar { flex: 1; height: 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); overflow: hidden; } .metric-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-dim)); } .metric-row-search { align-items: flex-start; } .banner-image-field { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; } .banner-image-field .input[type="file"] { width: auto; max-width: 100%; } .banner-image-preview { width: 96px; height: 36px; object-fit: cover; border: 1px solid var(--border); border-radius: 4px; } /* ================= Smaller-card tweaks ================= */ .logo .icon { width: 19px; height: 19px; } .service-card .chip { font-size: 0.68rem; padding: 4px 7px; } /* ================= Promo / banner bar ================= */ .promo-bar { background: var(--bg-grid); border-bottom: 1px solid var(--border); } .promo-inner { display: flex; justify-content: center; max-width: 1200px; padding: 8px 20px; } .promo-label { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--faint); display: inline-flex; align-items: center; gap: 5px; flex: none; } .promo-label .icon { width: 13px; height: 13px; color: var(--accent); } .promo-items { display: flex; gap: 8px; overflow-x: auto; flex: 1; scrollbar-width: none; } .promo-items::-webkit-scrollbar { display: none; } .promo-item { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; border: 1px solid var(--border-2); background: var(--surface); border-radius: 999px; padding: 5px 12px; font-size: 0.8rem; color: var(--text); } .promo-item:hover { border-color: var(--accent-dim); color: var(--accent); } .promo-item strong { font-weight: 600; } .promo-sub { color: var(--faint); font-size: 0.74rem; } .promo-empty { color: var(--faint); border-style: dashed; } .promo-empty .icon { width: 12px; height: 12px; } .promo-items-top { display: grid; grid-template-columns: repeat(2, 280px); justify-content: center; gap: 8px; width: 100%; max-width: 1144px; overflow: visible; } .promo-item-compact { display: flex; min-width: 0; width: 280px; height: 160px; padding: 0; border-radius: 6px; border-color: transparent; overflow: hidden; } .promo-item-compact:hover { border-color: var(--info); } .promo-item-compact.promo-empty { align-items: center; justify-content: center; gap: 8px; padding: 16px; text-align: center; white-space: normal; } .promo-items-top .promo-img { width: 100%; height: 100%; max-width: none; object-fit: fill; border-radius: 5px; } .promo-item-text { flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 16px; text-align: center; white-space: normal; background: var(--surface); } .promo-item-text strong { font-size: 1rem; } .promo-item-compact strong, .promo-item-compact .promo-sub { overflow: hidden; text-overflow: ellipsis; } .promo-item-compact .promo-sub { max-width: 118px; font-size: 0.68rem; } .promo-item-text .promo-sub { max-width: none; font-size: 0.78rem; } /* ================= Filter form ================= */ .filter-form .field { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 10px; } .filter-form .field:focus-within { border-color: var(--accent-dim); box-shadow: 0 0 0 3px var(--accent-glow); } .filter-form .field .sigil { color: var(--accent); display: inline-flex; } .filter-form .field .sigil .icon { width: 15px; height: 15px; } .filter-form .field input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--text); font-size: 0.9rem; padding: 9px 0; font-family: var(--sans); } .check-list { display: flex; flex-direction: column; gap: 5px; max-height: 260px; overflow-y: auto; } .check-chip { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; padding: 6px 9px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-size: 0.82rem; font-family: var(--mono); } .check-chip:hover { color: var(--text); border-color: var(--faint); } .check-chip.on { color: var(--accent); border-color: var(--accent-dim); background: var(--accent-glow); } .check-chip input { position: absolute; opacity: 0; pointer-events: none; } .check-chip .icon { width: 14px; height: 14px; } /* ================= Admin inline forms ================= */ .attr-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .grid-fields { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1; } .grid-fields .input, .grid-fields .select { margin: 0; } /* ================= 3-column layout (filters | content | banner rail) ================= */ .layout-3 { grid-template-columns: 224px minmax(0, 1fr) 200px; } .rail { position: sticky; top: 84px; align-self: start; } .rail-head { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--faint); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .rail-head .icon { width: 13px; height: 13px; color: var(--accent); } .banner-grid { display: flex; flex-direction: column; gap: 12px; } .banner-box { display: flex; align-items: center; justify-content: center; text-align: center; width: 200px; height: 120px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; color: var(--text); padding: 10px; } .banner-box:hover { border-color: var(--accent-dim); } .banner-img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--radius) - 3px); } .banner-txt { display: flex; flex-direction: column; gap: 4px; } .banner-txt strong { font-size: 0.92rem; } .banner-txt span { color: var(--faint); font-size: 0.76rem; } .banner-empty { color: var(--faint); border-style: dashed; font-family: var(--mono); font-size: 0.78rem; gap: 6px; } .banner-empty .icon { width: 13px; height: 13px; } /* ================= Rotating promo strip ================= */ .promo-rotator { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; } .promo-item.rot { display: none; } .promo-item.rot.active { display: inline-flex; animation: promoFade .5s ease; } @keyframes promoFade { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } } .promo-img { height: 26px; max-width: 220px; object-fit: contain; border-radius: 4px; display: block; } .promo-count { font-family: var(--mono); font-size: 0.66rem; color: var(--faint); flex: none; } .check-chip .count { margin-left: auto; font-family: var(--mono); font-size: 0.7rem; color: var(--faint); } @media (max-width: 1080px) { .layout-3 { grid-template-columns: 224px minmax(0, 1fr); } .rail { display: none; } } @media (max-width: 620px) { .promo-label { display: none; } .promo-inner { padding: 6px 12px; } .promo-items-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .promo-item-compact { width: 100%; height: auto; aspect-ratio: 7 / 4; } } @media (max-width: 900px) { .layout-3 { grid-template-columns: 1fr; } } @media (min-width: 1200px) { .promo-items-top { grid-template-columns: repeat(4, 280px); } } /* ================= Theme toggle ================= */ .theme-toggle { background: transparent; border: 0; color: var(--muted); cursor: pointer; padding: 7px 9px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; font: inherit; } .theme-toggle:hover { color: var(--text); background: var(--surface); } .theme-toggle .icon { width: 16px; height: 16px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: inline-flex; } html[data-theme="dark"] .theme-toggle .icon-sun { display: inline-flex; } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ================= Service logo image ================= */ .logo-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }