/* ============================================================ FazzCodeAPIs — "Gray Dark-Light Premium Developer Platform" Override layer. Loaded AFTER main.css and dashboard.css so it wins the cascade on equal-specificity selectors — this lets a full re-skin happen without rewriting every template, by: 1) redefining the shared design tokens (colors/shadow/radius) that main.css/dashboard.css already build every component from, and 2) overriding the handful of rules that hardcode black borders, offset "brutalist" shadows, or dark-on-dark sections that a variable swap alone can't reach. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap'); :root{ /* Brand grays, per design spec */ --bg-main: #E5E7EB; --bg-secondary: #F5F5F5; --sidebar-dark: #1F2937; --card-dark: #2B2F36; --card-light: #FFFFFF; --line: #D1D5DB; --text-main: #111827; --text-soft: #6B7280; --accent: #374151; --accent-hover: #4B5563; --radius-lg: 22px; --radius-md: 18px; --shadow-soft: 0 4px 16px rgba(17,24,39,.06), 0 1px 3px rgba(17,24,39,.05); --shadow-soft-lg: 0 12px 32px rgba(17,24,39,.10), 0 2px 6px rgba(17,24,39,.06); /* Re-point the original tokens at the new palette so every rule already written in terms of --ink/--bd/--sh/--r/--sans falls into the new look automatically. */ --ink: var(--text-main); --ink-mid: var(--text-main); --ink-soft: var(--text-soft); --canvas: var(--bg-main); --white: var(--card-light); --blue: var(--accent); --blue-l: var(--accent-hover); --bd: var(--line); --sh: var(--shadow-soft); --sh-lg: var(--shadow-soft-lg); --r: var(--radius-md); --sans: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif; --dash-bg: var(--bg-main); --dash-card: var(--card-light); --dash-border: var(--line); --dash-text: var(--text-main); --dash-muted: var(--text-soft); --dash-shadow: var(--shadow-soft); } html[data-theme="dark"]{ --dash-bg: #15181e; --dash-card: var(--card-dark); --dash-border: #3a3f47; --dash-text: #f3f4f6; --dash-muted: #9aa1ad; --canvas: #15181e; --white: var(--card-dark); --ink: #f3f4f6; --ink-soft: #9aa1ad; --bd: #3a3f47; } body{ font-family: var(--sans); -webkit-font-smoothing: antialiased; letter-spacing: -.01em; } code{ color: var(--accent); background: rgba(55,65,81,.08); } /* ── Kill every "hard offset shadow + thick black border" affordance left over from the old neo-brutalist system: flatten borders to a hairline, remove the click/hover translate-and-grow-shadow trick in favor of a gentle lift, per spec. ── */ .dash-card, .dash-card-flat, .stat-card, .auth-card, .fz-modal-content, .feat-card, .cat-preview-card, .step-card, .code-snippet-section, .terminal-mockup, .endpoints-table, .ready-cta-card, .stack-screen, .stack-box, .dev-code-window, .param-input, .res-code-block, .res-url-bar, .slide-panel-container, .panel-info-block{ border-width: 1px !important; border-color: var(--line) !important; box-shadow: var(--shadow-soft) !important; } .dash-card, .auth-card, .fz-modal-content, .ready-cta-card{ border-radius: var(--radius-lg) !important; } .dash-card-flat, .feat-card, .cat-preview-card, .step-card, .stat-card, .code-snippet-section, .endpoints-table, .dev-code-window{ border-radius: var(--radius-md) !important; } .dash-card, .stat-card, .feat-card, .cat-preview-card{ transition: transform .3s ease, box-shadow .3s ease; } .dash-card:hover, .stat-card:hover, .feat-card:hover, .cat-preview-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-soft-lg) !important; } /* Buttons: soft, no offset shadow / harsh translate */ .dash-btn, .cta-primary, .cta-ghost, .card-method-btn, .method-badge, .btn-send, .nav-cta-btn, .feat-icon{ box-shadow: none !important; border-width: 1px !important; } .dash-btn, .cta-primary, .cta-ghost, .btn-send{ transition: background .2s ease, transform .2s ease, box-shadow .2s ease; } .dash-btn:hover, .cta-primary:hover, .cta-ghost:hover, .btn-send:hover:not(:disabled){ transform: translateY(-2px); box-shadow: var(--shadow-soft) !important; } .dash-btn-dark, .cta-primary, .btn-send{ background: var(--accent) !important; border-color: var(--accent) !important; } .dash-btn-dark:hover, .cta-primary:hover, .btn-send:hover:not(:disabled){ background: var(--accent-hover) !important; } /* Hero accent — drop the hard drop-shadow duplicate-text effect */ .hl-accent{ text-shadow: none !important; color: var(--accent) !important; } .hl-outline{ -webkit-text-stroke: 2px var(--text-main); } /* ── Sidebar: dark, monochrome icons, smooth hover, brighter active ── */ .dash-sidebar{ background: var(--sidebar-dark) !important; border-right: 1px solid #10131a !important; width: 260px !important; } .dash-logo{ background: rgba(255,255,255,.06) !important; } .dash-nav-link{ color: #cbd5e1 !important; transition: background .2s ease, color .2s ease; } .dash-nav-link i{ color: #8b93a3 !important; } .dash-nav-link:hover{ background: rgba(255,255,255,.06) !important; color: #fff !important; } .dash-nav-link.active{ background: var(--accent-hover) !important; color: #fff !important; } .dash-nav-link.active i{ color: #fff !important; } .dash-nav-divider{ background: rgba(255,255,255,.08) !important; } .dash-theme-toggle{ background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.12) !important; color: #e5e7eb !important; } .dash-user-card, .dash-user-name{ color: #e5e7eb !important; } .dash-user-plan{ color: #9aa1ad !important; } .dash-user-avatar{ background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.15) !important; color: #fff; } /* ── Topbar / nav: light, soft shadow instead of hard bottom border ── */ .fz-nav{ background: rgba(255,255,255,.9) !important; border-bottom: 1px solid var(--line) !important; box-shadow: var(--shadow-soft); height: 76px !important; } .nav-logo-f{ box-shadow: none !important; border-color: var(--line) !important; } .nav-cta-btn{ background: var(--accent) !important; border-color: var(--accent) !important; } .nav-cta-btn:hover{ background: var(--accent-hover) !important; box-shadow: var(--shadow-soft) !important; } /* Public navbar theme toggle (dashboard has its own switch — see .dash-theme-toggle) */ .nav-theme-btn{ width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--card-light); color: var(--text-main); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; margin-right:10px; font-size:14px; transition: background .2s ease, transform .2s ease; } .nav-theme-btn:hover{ background: var(--bg-secondary); transform: translateY(-1px); } /* ── Dark full-bleed sections: swap pure black for sidebar gray ── */ .stats-section, .fz-footer, .feat-card-dark, .stack-screen-code, .dev-code-body, .term-body, .snippet-body, .example-pre, .res-code-block{ background: var(--sidebar-dark) !important; border-color: #10131a !important; } .hero-section, .quickstart-section{ border-color: var(--line) !important; } /* ── Forms / inputs ── */ .dash-field input, .dash-field textarea, .dash-field select, .otp-box, .param-input{ border: 1px solid var(--line) !important; border-radius: 12px !important; background: var(--card-light); } .dash-field input:focus, .dash-field textarea:focus, .dash-field select:focus, .otp-box:focus, .param-input:focus{ border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(55,65,81,.12) !important; transform: none !important; } /* ── Badges / status pills stay soft-colored, just tone down border ── */ .badge-pill{ border-width: 1px !important; } /* ── Table ── */ .dash-table th{ border-bottom: 1px solid var(--line) !important; } .dash-table td{ border-bottom: 1px solid var(--bg-secondary) !important; } /* ── Misc thick-border cleanup across docs / landing components ── */ .auth-illustration-box, .stack-screen::before, .verify-email-chip, .upload-zone, .snippet-copy, .panel-collapse-toggle, .info-val, .stat-pill, .chip, .method-tag, .usage-bar, .switch-track, .key-icon-btn, .feat-icon{ border-color: var(--line) !important; } ::-webkit-scrollbar-thumb{ background: var(--accent-hover); } /* ── Docs ID/EN toggle ── */ .docs-lang-toggle{ display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-left:10px; } .docs-lang-toggle button{ border:none; background:var(--card-light); color:var(--text-soft); font-size:11px; font-weight:700; padding:6px 10px; cursor:pointer; } .docs-lang-toggle button.active{ background:var(--accent); color:#fff; } html[data-theme="dark"] .docs-lang-toggle{ border-color: var(--bd); } html[data-theme="dark"] .docs-lang-toggle button{ background:#1c1f26; color: var(--ink-soft); } html[data-theme="dark"] .docs-lang-toggle button.active{ background: var(--accent-hover); color:#fff; } /* ── Loading skeleton shimmer ── Applied automatically to chart containers before JS fills them in (public/js/dashboard.js and public/js/status.js render into these via innerHTML, which naturally clears the :empty match once populated — no JS changes needed for that case). For live-updating text values (e.g. /status's stat numbers, which start as "—" until the first successful poll), apply the .skeleton-text class in the markup and have the poll function remove it — see public/js/status.js. */ @keyframes fzShimmer{ 0%{ background-position:-300px 0; } 100%{ background-position:300px 0; } } .chart-wrap:empty{ background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--line) 37%, var(--bg-secondary) 63%); background-size: 600px 100%; animation: fzShimmer 1.4s linear infinite; border-radius: 10px; } html[data-theme="dark"] .chart-wrap:empty{ background: linear-gradient(90deg, #1c1f26 25%, #2a2e37 37%, #1c1f26 63%); background-size: 600px 100%; } .skeleton-text{ display:inline-block; min-width:52px; height:1em; border-radius:5px; color:transparent !important; background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--line) 37%, var(--bg-secondary) 63%); background-size: 600px 100%; animation: fzShimmer 1.4s linear infinite; vertical-align: middle; } html[data-theme="dark"] .skeleton-text{ background: linear-gradient(90deg, #1c1f26 25%, #2a2e37 37%, #1c1f26 63%); background-size: 600px 100%; } /* ── Scroll-triggered fade-in (public/js/scroll-reveal.js) — landing page sections start hidden/offset, then ease in once scrolled into view. Respects prefers-reduced-motion for accessibility. Gated behind .js-reveal-ready (added by scroll-reveal.js itself right before it starts observing) so that if the script ever fails to load (ad blocker, network issue, etc.), sections simply stay visible by default instead of being permanently stuck at opacity:0. ── */ .js-reveal-ready .reveal-on-scroll{ opacity:0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); } .js-reveal-ready .reveal-on-scroll.revealed{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ .reveal-on-scroll{ opacity:1 !important; transform:none !important; transition:none !important; } } /* ── Personal alert bell (public/js/notif-bell.js) ── */ .notif-bell-wrap{ position:relative; } #notifBellBtn{ width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:var(--card-light); color: var(--text-main); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:15px; transition: background .2s ease; } #notifBellBtn:hover{ background: var(--bg-secondary); } .notif-bell-dot{ position:absolute; top:6px; right:7px; width:8px; height:8px; border-radius:50%; background:#dc2626; border:2px solid var(--card-light); } .notif-bell-panel{ position:absolute; top:calc(100% + 10px); right:0; width:320px; max-width:calc(100vw - 32px); background:var(--card-light); border:1px solid var(--line); border-radius:14px; box-shadow: var(--shadow-soft-lg, 0 12px 32px rgba(17,24,39,.15)); z-index:1040; overflow:hidden; } .notif-bell-panel-title{ font-weight:800; font-size:13px; padding:12px 14px 8px; color: var(--text-main); } .notif-bell-empty{ padding:22px 16px; text-align:center; font-size:12.5px; color: var(--text-soft); } .notif-bell-item{ display:flex; gap:10px; align-items:flex-start; padding:10px 14px; font-size:12.5px; line-height:1.5; color: var(--text-main); text-decoration:none; border-top:1px solid var(--bg-secondary); } .notif-bell-item:hover{ background: var(--bg-secondary); } .notif-bell-item i{ margin-top:2px; flex-shrink:0; } .notif-bell-danger i{ color:#dc2626; } .notif-bell-warning i{ color:#b45309; } .notif-bell-info i{ color:#2563eb; } html[data-theme="dark"] #notifBellBtn{ background:#1c1f26; border-color: var(--bd); color: var(--ink); } html[data-theme="dark"] .notif-bell-dot{ border-color:#1c1f26; } html[data-theme="dark"] .notif-bell-panel{ background: var(--card-dark); border-color: var(--bd); } html[data-theme="dark"] .notif-bell-panel-title{ color: var(--ink); } html[data-theme="dark"] .notif-bell-item{ color: var(--ink); border-top-color:#2a2e37; } html[data-theme="dark"] .notif-bell-item:hover{ background: rgba(255,255,255,.05); } /* ── Monthly uptime bar chart (/status) ── */ .uptime-bar-chart{ display:flex; align-items:flex-end; gap:14px; height:160px; padding-top:8px; } .uptime-bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; height:100%; } .uptime-bar-value{ font-size:11px; font-weight:700; color: var(--text-soft); margin-bottom:6px; } .uptime-bar-track{ flex:1; width:100%; max-width:44px; display:flex; align-items:flex-end; background: var(--bg-secondary); border-radius:8px; overflow:hidden; } .uptime-bar-fill{ width:100%; border-radius:8px 8px 0 0; transition: height .4s ease; } .uptime-bar-fill.good{ background:#16a34a; } .uptime-bar-fill.ok{ background:#d97706; } .uptime-bar-fill.bad{ background:#dc2626; } .uptime-bar-label{ font-size:11px; color: var(--text-soft); margin-top:8px; white-space:nowrap; } html[data-theme="dark"] .uptime-bar-track{ background:#1c1f26; } /* ── Gamification card (dashboard) ── */ .gami-rank-badge{ width:52px; height:52px; border-radius:14px; background: var(--bg-secondary); display:flex; align-items:center; justify-content:center; font-size:26px; flex-shrink:0; } .gami-streak-flame{ font-size:30px; filter: grayscale(1) opacity(.4); transition: filter .3s ease; } .gami-streak-flame.active{ filter:none; animation: fzFlamePulse 1.8s ease-in-out infinite; } @keyframes fzFlamePulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } } .gami-badge-pill{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:5px 10px; border-radius:99px; border:1.5px solid; background: var(--bg-secondary); } .gami-badge-locked{ opacity:.45; border-color: var(--line) !important; color: var(--text-soft) !important; } /* ── Natural-language docs search ── */ .nl-search-box{ display:flex; align-items:center; gap:10px; border:1.5px solid var(--line); border-radius:12px; padding:11px 16px; background: var(--card-light); } .nl-search-box i{ color: var(--accent); font-size:15px; } .nl-search-box input{ flex:1; border:none; outline:none; background:transparent; font-size:13.5px; color: var(--text-main); } .nl-search-box button{ border:none; background: var(--accent); color:#fff; font-size:12px; font-weight:700; padding:8px 16px; border-radius:8px; cursor:pointer; flex-shrink:0; } .nl-search-box button:hover{ background: var(--accent-hover); } .nl-search-results{ margin-top:10px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background: var(--card-light); } .nl-search-item{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:11px 14px; border:none; border-top:1px solid var(--bg-secondary); background:transparent; cursor:pointer; font-size:12.5px; } .nl-search-item:first-child{ border-top:none; } .nl-search-item:hover{ background: var(--bg-secondary); } .nl-search-item-text{ flex:1; color: var(--text-main); } .nl-search-item i{ color: var(--text-soft); font-size:11px; } .nl-search-loading, .nl-search-empty{ padding:16px; text-align:center; font-size:12.5px; color: var(--text-soft); } html[data-theme="dark"] .nl-search-box{ background:#1c1f26; border-color: var(--bd); } html[data-theme="dark"] .nl-search-box input{ color: var(--ink); } html[data-theme="dark"] .nl-search-results{ background: var(--card-dark); border-color: var(--bd); } html[data-theme="dark"] .nl-search-item{ border-top-color:#2a2e37; } html[data-theme="dark"] .nl-search-item:hover{ background: rgba(255,255,255,.05); } html[data-theme="dark"] .nl-search-item-text{ color: var(--ink); } /* ── Public /feedback page ── */ .feedback-vote-btn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; width:52px; height:52px; border-radius:12px; border:1.5px solid var(--line); background: var(--card-light); color: var(--text-soft); cursor:pointer; flex-shrink:0; transition: all .15s ease; } .feedback-vote-btn i{ font-size:16px; } .feedback-vote-count{ font-size:13px; font-weight:800; } .feedback-vote-btn:hover{ border-color: var(--accent); color: var(--accent); } .feedback-vote-btn.voted{ background: var(--accent); border-color: var(--accent); color:#fff; } .feedback-admin-note{ font-size:12px; color: var(--accent); background: var(--bg-secondary); border-radius:8px; padding:6px 10px; margin-top:6px; display:inline-block; } .feedback-overlay{ position:fixed; inset:0; background:rgba(17,24,39,.55); z-index:1060; display:flex; align-items:center; justify-content:center; padding:20px; } .feedback-overlay-card{ background: var(--card-light); border-radius:18px; padding:22px; width:100%; max-width:440px; box-shadow: 0 20px 50px rgba(0,0,0,.3); } html[data-theme="dark"] .feedback-vote-btn{ background:#1c1f26; border-color: var(--bd); color: var(--ink-soft); } html[data-theme="dark"] .feedback-admin-note{ background:#1c1f26; } html[data-theme="dark"] .feedback-overlay-card{ background: var(--card-dark); } html[data-theme="dark"] .gami-rank-badge{ background:#1c1f26; } html[data-theme="dark"] .gami-badge-pill{ background:#1c1f26; } /* ── Locked endpoints (src/lib/endpointLock.js) — visually distinct card + sidebar item, and a notice banner inside the panel when opened. ── */ .api-item-locked .api-card{ opacity:.6; background: repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(220,38,38,.04) 10px, rgba(220,38,38,.04) 20px); } .api-item-locked .card-method-btn{ filter: grayscale(1); } .locked-badge{ display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:800; color:#dc2626; background:#fee2e2; border:1px solid #fecaca; border-radius:99px; padding:2px 8px; margin-left:8px; vertical-align:middle; } .sidebar-item-locked{ opacity:.55; } .sidebar-lock-icon{ margin-left:auto; font-size:10px; color:#dc2626; } .locked-notice{ display:flex; gap:10px; align-items:flex-start; background:#fee2e2; border:1px solid #fecaca; color:#7f1d1d; border-radius:12px; padding:12px 14px; margin:0 0 16px; font-size:12.5px; line-height:1.5; } .locked-notice i{ font-size:15px; margin-top:2px; color:#dc2626; flex-shrink:0; } .locked-notice a{ color:#7f1d1d; text-decoration:underline; } html[data-theme="dark"] .locked-badge{ background:#450a0a; color:#f87171; border-color:#7f1d1d; } html[data-theme="dark"] .locked-notice{ background:#2a1215; border-color:#7f1d1d; color:#fca5a5; } html[data-theme="dark"] .locked-notice a{ color:#fca5a5; } .snippet-key-bar{ display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--line); border-radius:10px; background: var(--bg-secondary); margin-bottom:8px; } .snippet-key-bar i{ color: var(--text-soft); font-size:12px; flex-shrink:0; } .snippet-key-bar input{ flex:1; border:none; background:transparent; font-size:12.5px; font-family: 'Share Tech Mono', monospace; outline:none; color: var(--text-main); min-width:0; } .snippet-key-bar button{ width:26px; height:26px; border-radius:7px; border:none; background: var(--accent); color:#fff; flex-shrink:0; cursor:pointer; } .snippet-key-bar button:hover{ background: var(--accent-hover); } html[data-theme="dark"] .snippet-key-bar{ background:#1c1f26; border-color: var(--bd); } html[data-theme="dark"] .snippet-key-bar input{ color: var(--ink); } .nav-status-dot.offline{ background:#dc2626 !important; box-shadow:none !important; animation:none !important; } /* ============================================================ DARK MODE — corrects every place above that hardcoded a light-mode color with !important. Same selectors + specificity, declared later in this same file, so these only win when html[data-theme="dark"] is set (see public/js/theme.js — applied site-wide, not just dashboard). Without this block, dark mode looked broken: white cards on a dark page, white form inputs with invisible text, a white navbar clashing with everything below it, etc. ============================================================ */ html[data-theme="dark"] body{ background: var(--dash-bg); color: var(--ink); } html[data-theme="dark"] .dash-shell{ background: var(--dash-bg); } html[data-theme="dark"] .text-muted{ color: var(--ink-soft) !important; } html[data-theme="dark"] a{ color: inherit; } html[data-theme="dark"] hr, html[data-theme="dark"] .border-bottom{ border-color: var(--bd) !important; } html[data-theme="dark"] .dash-card, html[data-theme="dark"] .dash-header, html[data-theme="dark"] .stat-card, html[data-theme="dark"] .auth-card, html[data-theme="dark"] .fz-modal-content, html[data-theme="dark"] .feat-card, html[data-theme="dark"] .cat-preview-card, html[data-theme="dark"] .step-card, html[data-theme="dark"] .code-snippet-section, html[data-theme="dark"] .endpoints-table, html[data-theme="dark"] .ready-cta-card, html[data-theme="dark"] .dev-code-window{ background: var(--card-dark) !important; border-color: var(--bd) !important; color: var(--ink) !important; box-shadow: 0 4px 16px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.3) !important; } html[data-theme="dark"] .dash-card:hover, html[data-theme="dark"] .stat-card:hover, html[data-theme="dark"] .feat-card:hover, html[data-theme="dark"] .cat-preview-card:hover{ box-shadow: 0 12px 32px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4) !important; } /* Forms — the biggest usability bug: inputs stayed white-on-white. */ html[data-theme="dark"] .dash-field input, html[data-theme="dark"] .dash-field textarea, html[data-theme="dark"] .dash-field select, html[data-theme="dark"] .otp-box, html[data-theme="dark"] .param-input{ background: #1c1f26 !important; border-color: var(--bd) !important; color: var(--ink) !important; } html[data-theme="dark"] .dash-field input::placeholder, html[data-theme="dark"] .dash-field textarea::placeholder{ color: #6b7280; } html[data-theme="dark"] .dash-field label{ color: var(--ink-soft); } /* Topbar / navbar */ html[data-theme="dark"] .fz-nav{ background: rgba(21,24,30,.92) !important; border-bottom-color: var(--bd) !important; } html[data-theme="dark"] .nav-link{ color: var(--ink) !important; } html[data-theme="dark"] .nav-logo-name{ color: var(--ink); } html[data-theme="dark"] .nav-logo-f{ border-color: var(--bd) !important; } html[data-theme="dark"] .nav-theme-btn{ background:#1c1f26; border-color: var(--bd); color: var(--ink); } html[data-theme="dark"] .nav-mobile-menu{ background: var(--card-dark); border-color: var(--bd); } /* Hero / full-bleed sections */ html[data-theme="dark"] .hero-section, html[data-theme="dark"] .quickstart-section{ border-color: var(--bd) !important; } /* Table */ html[data-theme="dark"] .dash-table th{ border-bottom-color: var(--bd) !important; color: var(--ink-soft); } html[data-theme="dark"] .dash-table td{ border-bottom-color: #2a2e37 !important; color: var(--ink); } /* Misc borders that were hardcoded to the light-mode line color */ html[data-theme="dark"] .auth-illustration-box, html[data-theme="dark"] .upload-zone, html[data-theme="dark"] .snippet-copy, html[data-theme="dark"] .panel-collapse-toggle, html[data-theme="dark"] .info-val, html[data-theme="dark"] .stat-pill, html[data-theme="dark"] .chip, html[data-theme="dark"] .method-tag, html[data-theme="dark"] .usage-bar, html[data-theme="dark"] .switch-track, html[data-theme="dark"] .key-icon-btn, html[data-theme="dark"] .feat-icon{ border-color: var(--bd) !important; } /* Bootstrap dropdown menus (used by the account menu, admin action menus) */ html[data-theme="dark"] .dropdown-menu{ background: var(--card-dark); border-color: var(--bd); box-shadow: 0 8px 24px rgba(0,0,0,.45); } html[data-theme="dark"] .dropdown-item{ color: var(--ink); } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus{ background: rgba(255,255,255,.06); color: #fff; } /* FZModal */ html[data-theme="dark"] .fz-modal-message{ color: var(--ink-soft); } html[data-theme="dark"] .fz-modal-close{ color: #9aa1ad; } html[data-theme="dark"] .fz-modal-close:hover{ color: var(--ink); } /* AI widget panel */ html[data-theme="dark"] .fz-ai-panel{ background: var(--card-dark); border-color: var(--bd); } html[data-theme="dark"] .fz-ai-messages{ background: #15181e; } html[data-theme="dark"] .fz-ai-msg-assistant .fz-ai-bubble{ background: var(--card-dark); border-color: var(--bd); color: var(--ink); } html[data-theme="dark"] .fz-ai-input-row{ background: var(--card-dark); border-top-color: var(--bd); } html[data-theme="dark"] .fz-ai-input-row input{ background: #1c1f26; border-color: var(--bd); color: var(--ink); } /* Badges — keep the semantic color, darken the surface so it reads on a dark card */ html[data-theme="dark"] .badge-green{ background:#052e16 !important; color:#4ade80 !important; border-color:#14532d !important; } html[data-theme="dark"] .badge-red{ background:#450a0a !important; color:#f87171 !important; border-color:#7f1d1d !important; } html[data-theme="dark"] .badge-yellow{ background:#451a03 !important; color:#fbbf24 !important; border-color:#78350f !important; } html[data-theme="dark"] .badge-gray{ background:#1f2937 !important; color:#9ca3af !important; border-color:#374151 !important; } /* Scrollbar + inline code */ html[data-theme="dark"] ::-webkit-scrollbar-track{ background: #15181e; } html[data-theme="dark"] ::-webkit-scrollbar-thumb{ background: #4b5563; } html[data-theme="dark"] code{ background: rgba(255,255,255,.08); color: #c7d2fe; } /* ============================================================ AUTH SPLIT-SCREEN (login/register redesign) ============================================================ */ .auth-split-shell{ min-height:100vh; display:flex; } /* ── Left brand panel (hidden on small screens) ── */ .auth-split-brand{ display:none; width:44%; min-width:420px; background: var(--sidebar-dark); padding:56px 48px; position:relative; overflow:hidden; } .auth-split-brand::before{ content:''; position:absolute; top:-120px; right:-120px; width:340px; height:340px; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,.06), transparent 70%); } .auth-split-brand-inner{ position:relative; z-index:1; max-width:400px; display:flex; flex-direction:column; height:100%; } .auth-split-logo{ display:flex; align-items:center; gap:10px; text-decoration:none; margin-bottom:48px; } .auth-split-logo img{ width:32px; height:32px; object-fit:contain; } .auth-split-logo span{ color:#fff; font-weight:800; font-size:16px; } .auth-split-headline{ color:#fff; font-size:32px; font-weight:800; line-height:1.25; margin-bottom:14px; } .auth-split-sub{ color:#9aa1ad; font-size:14px; line-height:1.6; margin-bottom:40px; } .auth-split-features{ display:flex; flex-direction:column; gap:22px; margin-bottom:auto; } .auth-split-feature{ display:flex; gap:14px; align-items:flex-start; } .auth-split-feature-icon{ width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; flex-shrink:0; } .auth-split-feature-title{ color:#fff; font-weight:700; font-size:13.5px; margin-bottom:3px; } .auth-split-feature-desc{ color:#9aa1ad; font-size:12.5px; line-height:1.5; } .auth-split-feature-desc a{ color:#c7d2fe; } .auth-split-stat{ margin-top:40px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); } .auth-split-stat-num{ color:#fff; font-size:26px; font-weight:800; } .auth-split-stat-label{ color:#9aa1ad; font-size:12px; margin-top:2px; } /* ── Right form panel ── */ .auth-split-form-side{ flex:1; display:flex; flex-direction:column; background: var(--bg-main); min-height:100vh; } .auth-split-form-topbar{ display:flex; align-items:center; padding:24px 32px 0; } .auth-split-form-logo{ font-weight:800; color: var(--text-main); text-decoration:none; font-size:15px; } .auth-split-form-wrap{ flex:1; display:flex; flex-direction:column; justify-content:center; max-width:400px; width:100%; margin:0 auto; padding:32px 24px; } .auth-split-form-title{ font-size:24px; font-weight:800; color: var(--text-main); margin-bottom:6px; } .auth-split-form-sub{ color: var(--text-soft); font-size:13.5px; margin-bottom:28px; } .auth-split-form-footer{ text-align:center; font-size:11.5px; color: var(--text-soft); padding:20px; } .auth-split-form-footer a{ color: var(--text-soft); } @media (min-width:992px){ .auth-split-brand{ display:flex; } } /* ── Honeypot (invisible to real users, present in DOM for bots) ── */ .hp-field{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; } /* ── Self-hosted "slide to verify" widget ── */ .slide-verify{ user-select:none; } .slide-verify-track{ position:relative; height:46px; border-radius:23px; background: var(--bg-secondary); border:1.5px solid var(--line); overflow:hidden; } .slide-verify-fill{ position:absolute; left:0; top:0; bottom:0; width:0; background: rgba(55,65,81,.15); transition: width .05s linear; border-radius:23px 0 0 23px; } .slide-verify.dragging .slide-verify-fill{ transition:none; } .slide-verify-label{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:600; color: var(--text-soft); pointer-events:none; } .slide-verify-handle{ position:absolute; left:0; top:2px; width:42px; height:42px; border-radius:50%; background: var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; cursor:grab; box-shadow:0 2px 6px rgba(0,0,0,.2); touch-action:none; } .slide-verify-handle:active{ cursor:grabbing; } .slide-verify.completed .slide-verify-track{ border-color:#16a34a; background:#f0fdf4; } .slide-verify.completed .slide-verify-fill{ background:rgba(22,163,74,.18); } .slide-verify.completed .slide-verify-handle{ background:#16a34a; } .slide-verify.completed .slide-verify-label{ color:#16a34a; font-weight:700; } html[data-theme="dark"] .slide-verify-track{ background:#1c1f26; border-color: var(--bd); } html[data-theme="dark"] .slide-verify.completed .slide-verify-track{ background:#052e16; border-color:#16a34a; } html[data-theme="dark"] .auth-split-form-side{ background: var(--dash-bg); } /* ── Swipe-to-delete rows (mobile API keys/history list) ── */ .swipe-row{ position:relative; overflow:hidden; border-radius:14px; } .swipe-row-content{ position:relative; z-index:2; background: var(--card-light); touch-action:pan-y; } .swipe-row-actions{ position:absolute; top:0; right:0; bottom:0; width:84px; display:flex; z-index:1; } .swipe-action-btn{ flex:1; border:none; color:#fff; font-size:15px; display:flex; align-items:center; justify-content:center; cursor:pointer; } .swipe-action-edit{ background:#2563eb; } .swipe-action-delete{ background:#dc2626; } html[data-theme="dark"] .swipe-row-content{ background: var(--card-dark); } /* ============================================================ JSON TREE EXPLORER (docs response viewer) ============================================================ */ .json-tree-root{ font-family:'Share Tech Mono', monospace; font-size:12.5px; line-height:1.7; background:#0f1115; color:#e5e7eb; border-radius:10px; padding:14px 16px; max-height:420px; overflow-y:auto; overflow-x:hidden; max-width:100%; box-sizing:border-box; } /* Wrapping, not nowrap: a long string/URL value used to force this row (and with it, .json-tree-root, and with THAT, the whole panel/page) wider than the viewport on mobile — the exact "keluar card, halaman melebar" bug. Structure stays readable because only the key+bracket stay on one line; the value itself wraps and can break anywhere (long unbroken URLs included). */ .json-tree-row{ white-space:normal; word-break:break-word; overflow-wrap:anywhere; } .json-tree-key, .json-tree-bracket, .json-tree-toggle{ white-space:nowrap; } .json-tree-val{ white-space:normal; word-break:break-word; overflow-wrap:anywhere; } .json-tree-children{ border-left:1px dashed rgba(255,255,255,.12); margin-left:5px; padding-left:10px; } .json-tree-children.collapsed{ display:none; } .json-tree-toggle{ display:inline-block; width:14px; color:#6b7280; user-select:none; } .json-tree-key{ color:#93c5fd; } .json-tree-bracket{ color:#6b7280; } .json-tree-val-string{ color:#86efac; } .json-tree-val-number{ color:#fbbf24; } .json-tree-val-boolean{ color:#f472b6; font-weight:700; } .json-tree-val-null, .json-tree-val-undefined{ color:#6b7280; font-style:italic; } .json-tree-branch{ cursor:pointer; } .json-tree-branch:hover .json-tree-bracket{ color:#9ca3af; } .resp-view-toggle{ display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; } .resp-view-toggle button{ border:none; background:var(--card-light); color:var(--text-soft); font-size:11px; font-weight:700; padding:5px 10px; cursor:pointer; } .resp-view-toggle button.active{ background:var(--accent); color:#fff; } html[data-theme="dark"] .resp-view-toggle button{ background:#1c1f26; color:var(--ink-soft); } html[data-theme="dark"] .resp-view-toggle button.active{ background:var(--accent-hover); color:#fff; } /* ── Quota progress ring (dashboard) ── */ .quota-ring-track{ stroke: var(--bg-secondary); } .quota-ring-fill{ transition: stroke-dashoffset .6s ease, stroke .3s ease; } .quota-ring-pct{ font-size:17px; font-weight:800; fill: var(--text-main); font-family: var(--sans); } .quota-ring-label{ font-size:8px; fill: var(--text-soft); font-family: var(--sans); } html[data-theme="dark"] .quota-ring-track{ stroke:#1c1f26; } html[data-theme="dark"] .quota-ring-pct{ fill: var(--ink); } html[data-theme="dark"] .quota-ring-label{ fill: var(--ink-soft); } /* ── Plans page: "berapa banyak request?" slider ── */ .plan-slider{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:3px; background: var(--bg-secondary); outline:none; } .plan-slider::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background: var(--accent); cursor:pointer; border:3px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.25); } .plan-slider::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background: var(--accent); cursor:pointer; border:3px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.25); } .plan-card-recommend{ transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease; } .plan-card-highlighted{ border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(55,65,81,.15) !important; transform: translateY(-2px); } html[data-theme="dark"] .plan-slider{ background:#1c1f26; } html[data-theme="dark"] .plan-card-highlighted{ box-shadow: 0 0 0 3px rgba(199,210,254,.15) !important; } /* ── Product tour (dashboard first-visit) ── */ .fz-tour-overlay{ position:fixed; inset:0; z-index:1080; background:rgba(17,24,39,.55); } .fz-tour-spotlight{ position:absolute; border-radius:14px; box-shadow:0 0 0 4px #fff, 0 0 0 9999px rgba(17,24,39,.55); transition: top .35s ease, left .35s ease, width .35s ease, height .35s ease; pointer-events:none; } .fz-tour-tooltip{ position:absolute; width:300px; max-width:calc(100vw - 24px); background: var(--card-light); border-radius:14px; padding:18px; box-shadow:0 16px 40px rgba(0,0,0,.3); transition: top .35s ease, left .35s ease; } .fz-tour-step-count{ font-size:10.5px; font-weight:800; color: var(--accent); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; } .fz-tour-title{ font-size:15px; font-weight:800; color: var(--text-main); margin-bottom:6px; } .fz-tour-body{ font-size:12.5px; color: var(--text-soft); line-height:1.6; margin-bottom:16px; } .fz-tour-actions{ display:flex; justify-content:space-between; align-items:center; } .fz-tour-skip{ background:none; border:none; color: var(--text-soft); font-size:12px; cursor:pointer; } .fz-tour-skip:hover{ color: var(--text-main); } .fz-tour-next{ background: var(--accent); color:#fff; border:none; border-radius:8px; padding:8px 18px; font-size:12.5px; font-weight:700; cursor:pointer; } .fz-tour-next:hover{ background: var(--accent-hover); } html[data-theme="dark"] .fz-tour-tooltip{ background: var(--card-dark); } html[data-theme="dark"] .fz-tour-title{ color: var(--ink); } html[data-theme="dark"] .fz-tour-spotlight{ box-shadow:0 0 0 4px var(--card-dark), 0 0 0 9999px rgba(0,0,0,.65); } /* ── Toast notifications (public/js/toast.js) ── */ #fzToastContainer{ position:fixed; bottom:20px; right:20px; z-index:1090; display:flex; flex-direction:column; gap:8px; align-items:flex-end; } .fz-toast{ display:flex; align-items:center; gap:9px; background: var(--card-light); border:1px solid var(--line); border-radius:10px; padding:11px 16px; font-size:12.5px; font-weight:600; color: var(--text-main); box-shadow: var(--shadow-soft-lg, 0 8px 24px rgba(17,24,39,.15)); cursor:pointer; opacity:0; transform:translateX(20px); transition: opacity .25s ease, transform .25s ease; max-width:320px; } .fz-toast.show{ opacity:1; transform:translateX(0); } .fz-toast i{ font-size:14px; flex-shrink:0; } .fz-toast-success i{ color:#16a34a; } .fz-toast-danger i{ color:#dc2626; } .fz-toast-warning i{ color:#b45309; } .fz-toast-info i{ color:#2563eb; } html[data-theme="dark"] .fz-toast{ background: var(--card-dark); border-color: var(--bd); color: var(--ink); } @media(max-width:480px){ #fzToastContainer{ left:12px; right:12px; bottom:12px; align-items:stretch; } .fz-toast{ max-width:none; } } /* ── Interactive param controls (docs playground: numeric slider, boolean toggle) ── */ .param-num-live{ float:right; font-weight:800; color: var(--accent); text-transform:none; letter-spacing:0; } .param-number-row{ display:flex; align-items:center; gap:10px; } .param-number-row .param-range{ flex:1; -webkit-appearance:none; appearance:none; height:5px; border-radius:3px; background: var(--bg-secondary); outline:none; } .param-number-row .param-range::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background: var(--accent); cursor:pointer; border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.25); } .param-number-row .param-range::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background: var(--accent); cursor:pointer; border:2px solid #fff; } .param-number-row input[type="number"]{ width:72px; flex-shrink:0; } .param-toggle{ display:flex; align-items:center; gap:10px; cursor:pointer; width:fit-content; } .param-toggle input{ position:absolute; opacity:0; width:0; height:0; } .param-toggle-track{ position:relative; width:42px; height:24px; border-radius:99px; background: var(--bg-secondary); border:1px solid var(--line); transition: background .2s ease; flex-shrink:0; } .param-toggle-track::after{ content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition: transform .2s ease; } .param-toggle input:checked + .param-toggle-track{ background: var(--accent); border-color: var(--accent); } .param-toggle input:checked + .param-toggle-track::after{ transform: translateX(18px); } .param-toggle-text{ font-size:12px; font-weight:700; color: var(--text-soft); text-transform:capitalize; } html[data-theme="dark"] .param-number-row .param-range{ background:#1c1f26; } html[data-theme="dark"] .param-toggle-track{ background:#1c1f26; border-color: var(--bd); } /* ── .dash-select: shared select styling (replaces ad-hoc inline background:#fff on