/* ══════════════════════════════════════════════════════════ DARK MODE — applied when has data-theme="dark" ══════════════════════════════════════════════════════════ */ [data-theme="dark"] { --primary: #4f7ef5; --primary-dark: #3b66d6; --primary-light: #6b93f7; --accent: #4f7ef5; --success: #22c55e; --danger: #f87171; --warning: #fbbf24; --bg: #0f1117; --surface: #1a1d27; --border: #2d3148; --text: #e8eaf6; --text-muted: #8b90b0; --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 4px 12px rgba(0,0,0,.4); --shadow-lg: 0 8px 24px rgba(0,0,0,.5); } [data-theme="dark"] body { background: var(--bg); color: var(--text); } [data-theme="dark"] .site-header, [data-theme="dark"] .main-nav { background: var(--surface); border-color: var(--border); } [data-theme="dark"] .card, [data-theme="dark"] .widget, [data-theme="dark"] .earn-card { background: var(--surface); border-color: var(--border); } [data-theme="dark"] .post-row { background: var(--surface); border-color: var(--border); } [data-theme="dark"] .post-row:hover { border-color: var(--primary-light); } [data-theme="dark"] .input, [data-theme="dark"] select.input, [data-theme="dark"] textarea.input { background: #12151f; border-color: var(--border); color: var(--text); } [data-theme="dark"] .input:focus { border-color: var(--primary); } [data-theme="dark"] .input::placeholder { color: var(--text-muted); } [data-theme="dark"] .btn { background: var(--surface); border-color: var(--border); color: var(--text); } [data-theme="dark"] .btn:hover { border-color: var(--primary); color: var(--primary); } [data-theme="dark"] .btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; } [data-theme="dark"] .btn-primary:hover { background: var(--primary-dark); } [data-theme="dark"] .btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; } [data-theme="dark"] .chip { background: #2d3148; color: var(--text-muted); } [data-theme="dark"] .chip-live { background: #14532d; color: #4ade80; } [data-theme="dark"] .chip-pending { background: #451a03; color: #fbbf24; } [data-theme="dark"] .chip-featured { background: #1e3a8a; color: #93c5fd; } [data-theme="dark"] .site-sidebar { background: var(--surface); border-color: var(--border); } [data-theme="dark"] .sidebar-link:hover { background: #2d3148; } [data-theme="dark"] .sidebar-link.active { background: #1e3a8a; } [data-theme="dark"] .welcome-banner { background: linear-gradient(135deg, #1e3a8a, #2d4fd6); } [data-theme="dark"] .profile-card, [data-theme="dark"] .public-profile-card { background: var(--surface); border-color: var(--border); } [data-theme="dark"] .profile-cover { background: linear-gradient(135deg, #1e3a8a, #3b5fc4); } [data-theme="dark"] .comment-card { background: var(--surface); border-color: var(--border); } [data-theme="dark"] .comment-card.is-reply { background: #12151f; } [data-theme="dark"] .nav-dropdown-menu { background: var(--surface); border-color: var(--border); } [data-theme="dark"] .nav-dropdown-menu a:hover { background: #2d3148; } [data-theme="dark"] .alert-info { background: #1e3a5f; color: #93c5fd; border-color: #2563eb; } [data-theme="dark"] .alert-success { background: #14532d; color: #4ade80; border-color: #16a34a; } [data-theme="dark"] .alert-warning { background: #451a03; color: #fbbf24; border-color: #d97706; } [data-theme="dark"] .alert-error { background: #450a0a; color: #f87171; border-color: #dc2626; } [data-theme="dark"] .post-body-content { color: var(--text); } [data-theme="dark"] .post-body-content blockquote { background: #12151f; border-color: var(--primary); color: var(--text-muted); } [data-theme="dark"] footer { background: #0a0d15 !important; } [data-theme="dark"] .table-wrap { border-color: var(--border); } [data-theme="dark"] .data-table th { background: #12151f; color: var(--text-muted); border-color: var(--border); } [data-theme="dark"] .data-table td { border-color: var(--border); } [data-theme="dark"] .data-table tr:hover td { background: #1a1d27; } [data-theme="dark"] .ticker { background: #0a0d15; } [data-theme="dark"] .profile-status.is-active { background: #14532d; color: #4ade80; } [data-theme="dark"] .profile-status.is-expiring { background: #451a03; color: #fbbf24; } [data-theme="dark"] .profile-status.is-expired { background: #450a0a; color: #f87171; } /* Theme toggle button */ .theme-toggle { background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; padding: 7px 10px; color: var(--text-muted); font-size: 15px; display: flex; align-items: center; transition: border-color .15s, color .15s; } .theme-toggle:hover { border-color: var(--primary); color: var(--primary); } /* ══════════════════════════════════════════════════════════ iOS SAFARI FIXES ══════════════════════════════════════════════════════════ */ @supports (-webkit-touch-callout: none) { /* Prevent input zoom on iOS (inputs must be at least 16px) */ input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="url"], select, textarea { font-size: 16px !important; } /* Fix sticky header on iOS Safari */ .site-header { position: -webkit-sticky; position: sticky; } /* Fix sidebar height on iOS */ .site-sidebar { height: -webkit-fill-available; } } @media (max-width: 600px) { /* Minimum tap target size for iOS (Apple recommends 44px) */ .btn { min-height: 44px; } .nav-link { min-height: 44px; } /* Smaller thumbnail on very narrow screens */ .post-thumb { min-width: 90px; width: 90px; height: 70px; } } /* ══════════════════════════════════════════════════════════ PUBLIC PROFILE PAGE STYLES ══════════════════════════════════════════════════════════ */ .public-profile-card { max-width: 700px; margin: 0 auto 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .profile-cover { height: 100px; background: linear-gradient(135deg, var(--primary), var(--primary-light)); } .profile-body { padding: 0 24px 24px; } .profile-avatar-wrap { margin-top: -40px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: flex-end; } .profile-avatar-large { width: 80px; height: 80px; border-radius: 50%; border: 4px solid var(--surface); background: #eef2ff; color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 36px; overflow: hidden; flex-shrink: 0; } .profile-avatar-large img { width: 100%; height: 100%; object-fit: cover; } .profile-name { font-size: 20px; font-weight: 700; margin-bottom: 2px; font-family: 'Playfair Display', serif; } .profile-tagline { font-size: 14px; color: var(--text-muted); margin-bottom: 12px; font-style: italic; } .profile-details { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; } .profile-detail { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); } .profile-detail a { color: var(--primary); } .profile-bio-text { font-size: 14px; color: var(--text); line-height: 1.7; margin-bottom: 16px; } .follow-stats { display: flex; gap: 24px; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 20px; } .follow-stat { text-align: center; } .follow-stat .num { font-size: 20px; font-weight: 700; color: var(--text); } .follow-stat .lbl { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; } /* ══════════════════════════════════════════════════════════ DARK MODE — CONTENT VISIBILITY FIXES ══════════════════════════════════════════════════════════ */ /* Post titles and links */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5 { color: var(--text); } [data-theme="dark"] a { color: var(--primary-light); } [data-theme="dark"] a:hover { color: var(--primary); } [data-theme="dark"] .post-row-body h3 a, [data-theme="dark"] .post-row-body h3 { color: var(--text); } [data-theme="dark"] .post-row-body h3 a:hover { color: var(--primary-light); } /* Post meta text */ [data-theme="dark"] .post-meta, [data-theme="dark"] .post-meta span { color: var(--text-muted); } /* Post row tags / chips */ [data-theme="dark"] .post-row-tags .chip { background: #2d3148; color: #a5b4fc; } /* Homepage layout grid and sidebar */ [data-theme="dark"] .layout-grid { color: var(--text); } /* Widget titles */ [data-theme="dark"] .widget-title { color: var(--text); border-color: var(--border); } [data-theme="dark"] .widget { background: var(--surface); border-color: var(--border); } /* Single post article content */ [data-theme="dark"] .post-body-content h1, [data-theme="dark"] .post-body-content h2, [data-theme="dark"] .post-body-content h3, [data-theme="dark"] .post-body-content h4 { color: var(--text); } [data-theme="dark"] .post-body-content p, [data-theme="dark"] .post-body-content li, [data-theme="dark"] .post-body-content td { color: var(--text); } [data-theme="dark"] .post-body-content a { color: var(--primary-light); } [data-theme="dark"] .post-body-content pre, [data-theme="dark"] .post-body-content code { background: #0a0d15; color: #e2e8f0; } /* Post title on single post page */ [data-theme="dark"] .post-title { color: var(--text); } /* Stat cards */ [data-theme="dark"] .stat-card { background: var(--surface); border-color: var(--border); } [data-theme="dark"] .stat-card .num, [data-theme="dark"] .stat-card .stat-num { color: var(--text); } [data-theme="dark"] .stat-card .label, [data-theme="dark"] .stat-card .stat-label { color: var(--text-muted); } /* Earn cards */ [data-theme="dark"] .earn-card .label { color: var(--text-muted); } [data-theme="dark"] .earn-card .sub { color: var(--text-muted); } [data-theme="dark"] .earn-card .amount { color: var(--text); } /* Profile card text */ [data-theme="dark"] .profile-username { color: var(--text); } [data-theme="dark"] .profile-detail-row { color: var(--text-muted); } [data-theme="dark"] .profile-bio-wrap { color: var(--text); } /* Categories page posts */ [data-theme="dark"] .post-row-body h3 a { color: var(--text) !important; } /* Pagination */ [data-theme="dark"] .pagination a { background: var(--surface); border-color: var(--border); color: var(--text); } [data-theme="dark"] .pagination .active { background: var(--primary); color: #fff; border-color: var(--primary); } [data-theme="dark"] .pagination .disabled { background: var(--surface); color: var(--text-muted); border-color: var(--border); } /* Hint text */ [data-theme="dark"] .hint { color: var(--text-muted); } [data-theme="dark"] .sub { color: var(--text-muted); } [data-theme="dark"] .text-muted { color: var(--text-muted) !important; } /* Announcement ticker text */ [data-theme="dark"] .ticker-item { color: #94a3b8; } /* Form labels */ [data-theme="dark"] label { color: var(--text); } [data-theme="dark"] .field label { color: var(--text); } /* Nav links */ [data-theme="dark"] .nav-link { color: var(--text-muted); } [data-theme="dark"] .nav-link:hover, [data-theme="dark"] .nav-link.active { color: var(--primary-light); border-bottom-color: var(--primary-light); } /* Sidebar links */ [data-theme="dark"] .sidebar-link { color: var(--text); } [data-theme="dark"] .sidebar-link i { color: var(--text-muted); } [data-theme="dark"] .sidebar-link:hover, [data-theme="dark"] .sidebar-link.active { color: var(--primary-light); background: #1e2a4a; } /* Page title row */ [data-theme="dark"] .page-title-row h2 { color: var(--text); } /* Brand in header */ [data-theme="dark"] .brand { color: var(--primary-light); } [data-theme="dark"] .brand span { color: var(--text); } /* Collapse forms (withdrawal forms) */ [data-theme="dark"] .collapse-form { border-color: var(--border); } /* Post list card on dashboard */ [data-theme="dark"] .post-list-card { border-color: var(--border); } [data-theme="dark"] .post-list-thumb { background: #12151f; color: var(--text-muted); } /* Notification items */ [data-theme="dark"] .notif-item { border-color: var(--border); } [data-theme="dark"] .notif-item.unread { background: #1a1d27; } [data-theme="dark"] .notif-msg { color: var(--text); } [data-theme="dark"] .notif-time { color: var(--text-muted); } /* Welcome banner on profile */ [data-theme="dark"] .welcome-banner h2 { color: #fff; } [data-theme="dark"] .welcome-banner .meta { color: #dbe4ff; } /* Overrides for hardcoded inline color: #111827 on headings */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--text) !important; } /* Auth pages (login, register) */ [data-theme="dark"] .auth-wrap .card { background: var(--surface); } [data-theme="dark"] .form-footer { color: var(--text-muted); } [data-theme="dark"] .form-footer a { color: var(--primary-light); } /* Slider empty state */ [data-theme="dark"] .slider { background: #12151f; border-color: var(--border); } [data-theme="dark"] .slider-empty { color: var(--text-muted); } /* Table of contents / data tables */ [data-theme="dark"] .data-table { color: var(--text); } /* post-analytics on dashboard */ [data-theme="dark"] .post-analytics { color: var(--text-muted); } [data-theme="dark"] .post-analytics span { color: var(--text-muted); } /* Withdrawal history rows */ [data-theme="dark"] .wh-row { border-color: var(--border); color: var(--text); } /* Page header (admin pages) */ [data-theme="dark"] .page-header h1 { color: var(--text); } [data-theme="dark"] .page-header p { color: var(--text-muted); } /* Card head (admin) */ [data-theme="dark"] .card-head { color: var(--text); border-color: var(--border); background: var(--surface); } [data-theme="dark"] .card-body { background: var(--surface); color: var(--text); } /* ══════════════════════════════════════════════════════════ Theme-aware tint variables used by .icon-badge / .tint-box / .code-chip ══════════════════════════════════════════════════════════ */ [data-theme="dark"] { --tint-primary: #1e2a4a; --tint-success: #10301e; --tint-warning: #3a2a0a; --tint-danger: #3a1414; --tint-purple: #2e1a3a; }