/* =========================================================================== THEMES =========================================================================== CSS variables drive theming. Three modes available: - dark (default): the original deep blue-gray - light: clean white/gray for daytime - midnight: deeper black, higher contrast The theme is applied via data-theme attribute on . JavaScript reads localStorage or syncs from server preference. Pack colors (var(--accent) blue, #f0883e orange, #3fb950 green, #a78bfa purple, #f85149 red, #d29922 yellow) are intentionally NOT themed because they identify specific topic packs and need to stay consistent. =========================================================================== */ :root, [data-theme="dark"] { --bg: #0d1117; --bg-card: #161b22; --bg-hover: #1c2129; /* Borders are bumped up for better visibility against the dark background */ --border: #30363d; --border-strong: #484f58; --text: #e6edf3; --text-strong: #f0f6fc; --text-muted: #8b949e; --text-soft: #b1bac4; --text-faint: #484f58; --accent: #58a6ff; --accent-hover: #79b8ff; } [data-theme="light"] { --bg: #ffffff; --bg-card: #f6f8fa; --bg-hover: #eaeef2; --border: #d0d7de; --border-strong: #afb8c1; --text: #1f2328; --text-strong: #0a0c0f; --text-muted: #656d76; --text-soft: #424a53; --text-faint: #8c959f; --accent: #0969da; --accent-hover: #218bff; } [data-theme="midnight"] { --bg: #000000; --bg-card: #0a0a0a; --bg-hover: #141414; /* Midnight needs stronger borders too since the background is pure black */ --border: #2d2d2d; --border-strong: #404040; --text: #ededed; --text-strong: #ffffff; --text-muted: #969696; --text-soft: #b8b8b8; --text-faint: #4a4a4a; --accent: #4a9eff; --accent-hover: #7ab8ff; } /* Smooth transitions when switching themes */ body, .nav, .pack-card, .roadmap-track-card, .admin-stat-card, .brief-card, .pack-category, .roadmap-item, button, input { transition: background-color 0.2s, color 0.2s, border-color 0.2s; } /* Pulse Platform Stylesheet Design principles: - Dark theme (matches the ThreatPulse email aesthetic) - Mobile-first (styles for small screens, scales up for desktop) - Minimal, clean, functional - System fonts for fast loading */ /* --------------------------------------------------------------------------- RESET & BASE --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* --------------------------------------------------------------------------- NAVIGATION --------------------------------------------------------------------------- */ .nav { border-bottom: 1px solid var(--border); padding: 0 20px; } .nav-inner { max-width: 960px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 56px; } .nav-brand { font-size: 18px; font-weight: 600; color: var(--text-strong); display: flex; align-items: center; gap: 8px; } .nav-brand:hover { text-decoration: none; color: var(--accent); } .brand-icon { color: var(--accent); } .nav-links { display: flex; align-items: center; gap: 20px; } .nav-links a { font-size: 14px; color: var(--text-muted); } .nav-links a:hover { color: var(--text-strong); text-decoration: none; } .nav-btn-primary { background: var(--accent); color: var(--bg) !important; padding: 6px 16px; border-radius: 8px; font-weight: 500; } .nav-btn-primary:hover { background: var(--accent-hover); } .nav-btn-secondary { color: var(--text-muted) !important; } /* --------------------------------------------------------------------------- MAIN & FOOTER --------------------------------------------------------------------------- */ .main { max-width: 960px; margin: 0 auto; padding: 0 20px; min-height: calc(100vh - 120px); } .footer { text-align: center; padding: 24px; color: var(--text-faint); font-size: 12px; border-top: 1px solid var(--border); margin-top: 60px; } /* --------------------------------------------------------------------------- HERO SECTION (landing page) --------------------------------------------------------------------------- */ .hero { text-align: center; padding: 80px 0 60px; } .hero h1 { font-size: 40px; font-weight: 600; line-height: 1.2; color: var(--text-strong); margin-bottom: 16px; } .hero-sub { font-size: 18px; color: var(--text-muted); max-width: 520px; margin: 0 auto 32px; line-height: 1.6; } .hero-note { font-size: 13px; color: var(--text-faint); margin-top: 12px; } /* --------------------------------------------------------------------------- BUTTONS --------------------------------------------------------------------------- */ .btn { display: inline-block; padding: 10px 24px; border-radius: 8px; font-size: 14px; font-weight: 500; border: none; cursor: pointer; transition: background 0.2s, transform 0.1s; text-align: center; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn-primary { background: var(--accent); color: var(--bg); } .btn-primary:hover { background: var(--accent-hover); color: var(--bg); } .btn-secondary { background: var(--border); color: var(--text); border: 1px solid var(--border-strong); } .btn-secondary:hover { background: var(--border-strong); color: var(--text); } .btn-ghost { background: transparent; color: var(--accent); border: 1px solid var(--border-strong); } .btn-lg { padding: 14px 32px; font-size: 16px; } .btn-sm { padding: 6px 14px; font-size: 13px; } .btn-full { width: 100%; } /* --------------------------------------------------------------------------- TOPIC PACK CARDS --------------------------------------------------------------------------- */ .topics-preview, .topics-section { padding: 60px 0; } .topics-preview h2, .topics-section h1, .how-it-works h2 { text-align: center; font-size: 28px; font-weight: 600; margin-bottom: 8px; } .section-sub { text-align: center; color: var(--text-muted); font-size: 15px; margin-bottom: 32px; } .pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 32px; } .pack-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 24px; transition: border-color 0.2s, transform 0.2s; } .pack-card:hover { border-color: var(--border-strong); } .pack-card-selectable { cursor: default; } .pack-active { border-color: var(--accent); background: var(--bg-card)99; } .pack-icon { font-size: 28px; margin-bottom: 12px; } .pack-card h3 { font-size: 17px; font-weight: 600; color: var(--text-strong); margin-bottom: 6px; } .pack-card p { font-size: 13px; color: var(--text-muted); line-height: 1.5; } .pack-action { margin-top: 16px; } /* Keywords form inside topic cards */ .keywords-form { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; } .keywords-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; } .keywords-input { background: var(--bg); border: 1px solid var(--border-strong); border-radius: 6px; padding: 8px 10px; color: var(--text); font-size: 13px; font-family: inherit; } .keywords-input:focus { outline: none; border-color: var(--accent); } .topics-footer { text-align: center; padding-top: 16px; } /* --------------------------------------------------------------------------- HOW IT WORKS --------------------------------------------------------------------------- */ .how-it-works { padding: 60px 0; border-top: 1px solid var(--border); } .steps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px; } .step { text-align: center; padding: 24px; } .step-num { width: 40px; height: 40px; border-radius: 50%; background: #58a6ff22; color: var(--accent); font-weight: 600; font-size: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } .step h3 { font-size: 15px; font-weight: 600; margin-bottom: 8px; } .step p { font-size: 13px; color: var(--text-muted); } /* --------------------------------------------------------------------------- AUTH PAGES (signup, login) --------------------------------------------------------------------------- */ .auth-section { display: flex; justify-content: center; padding: 60px 0; } .auth-card { width: 100%; max-width: 400px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 36px; } .auth-card h1 { font-size: 24px; font-weight: 600; margin-bottom: 4px; } .auth-sub { color: var(--text-muted); font-size: 14px; margin-bottom: 24px; } .form-group { margin-bottom: 16px; } .form-group label { display: block; font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 6px; } .form-group input { width: 100%; background: var(--bg); border: 1px solid var(--border-strong); border-radius: 8px; padding: 10px 14px; color: var(--text); font-size: 14px; font-family: inherit; } .form-group input:focus { outline: none; border-color: var(--accent); } .form-group input::placeholder { color: var(--text-faint); } .auth-switch { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 20px; } /* --------------------------------------------------------------------------- ALERTS --------------------------------------------------------------------------- */ .alert { padding: 12px 16px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; } .alert-error { background: #f8514922; color: #f85149; border: 1px solid #f8514933; } .alert-warning { background: #d29922; color: var(--bg); border: 1px solid #d2992233; } /* --------------------------------------------------------------------------- DASHBOARD --------------------------------------------------------------------------- */ .dashboard-section { padding: 40px 0; } .dashboard-header { margin-bottom: 32px; } .dashboard-header h1 { font-size: 28px; font-weight: 600; } .brief-cards { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; } .brief-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .brief-card-header { display: flex; align-items: center; gap: 14px; } .brief-card-icon { font-size: 28px; } .brief-card h3 { font-size: 16px; font-weight: 600; } .brief-card-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .brief-card-empty { font-size: 13px; color: var(--text-faint); } /* Dashboard preview cards (new design with article previews) */ .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-bottom: 32px; } .dashboard-brief-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; } .dashboard-brief-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; } .dashboard-brief-icon { font-size: 28px; line-height: 1; } .dashboard-brief-title h3 { font-size: 17px; font-weight: 600; color: var(--text-strong); margin-bottom: 2px; } .dashboard-brief-meta { font-size: 12px; color: var(--text-muted); } .dashboard-preview { flex: 1; margin-bottom: 16px; } .dashboard-preview-item { padding: 10px 0; border-bottom: 1px solid var(--border); } .dashboard-preview-item:last-child { border-bottom: none; } .dashboard-preview-title { display: block; color: var(--accent); font-size: 13px; font-weight: 500; line-height: 1.4; margin-bottom: 3px; text-decoration: none; } .dashboard-preview-title:hover { text-decoration: underline; } .dashboard-preview-source { font-size: 11px; color: var(--text-muted); } .dashboard-brief-action { align-self: flex-start; } .brief-footer-actions { text-align: center; padding: 30px 0 10px; } .dashboard-actions { text-align: center; } /* --------------------------------------------------------------------------- BRIEF VIEW PAGE --------------------------------------------------------------------------- */ .brief-section { padding: 40px 0; } .brief-header { text-align: center; padding-bottom: 24px; margin-bottom: 32px; } .brief-topic-icon { font-size: 36px; display: block; margin-bottom: 8px; } .brief-header h1 { font-size: 28px; font-weight: 600; } .brief-meta { font-size: 14px; color: var(--text-muted); margin-top: 4px; } .brief-toggle { margin-top: 16px; font-size: 13px; } .brief-toggle-link { color: var(--text-muted); text-decoration: none; padding: 6px 14px; border: 1px solid var(--border-strong); border-radius: 16px; display: inline-block; transition: border-color 0.2s, color 0.2s; } .brief-toggle-link:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; } .brief-block { margin-bottom: 32px; } .section-label { font-size: 12px; text-transform: uppercase; letter-spacing: 2px; color: var(--text-muted); padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--border); } .section-label-urgent { color: #f85149; } /* News cards */ .news-card { padding: 14px 0; border-bottom: 1px solid var(--border); } .news-card:last-child { border-bottom: none; } .news-title { font-size: 15px; font-weight: 500; color: var(--accent); line-height: 1.4; display: block; margin-bottom: 4px; } .news-meta { font-size: 12px; color: var(--text-muted); } .news-desc { font-size: 13px; color: var(--text-soft); margin-top: 6px; line-height: 1.5; } /* CVE cards */ .cve-card { background: var(--bg); border-radius: 8px; padding: 14px; margin-bottom: 12px; border-left: 4px solid var(--border-strong); } .cve-critical { border-left-color: #f85149; } .cve-high { border-left-color: #d29922; } .cve-medium { border-left-color: #e3b341; } .cve-low { border-left-color: #3fb950; } .cve-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .cve-link { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 14px; font-weight: 600; } .cve-score { font-size: 13px; font-weight: 600; margin-bottom: 6px; } .cve-desc { font-size: 13px; color: var(--text-soft); line-height: 1.5; } .cve-affected { font-size: 12px; color: var(--text-muted); margin-top: 6px; } .cve-patches { margin-top: 6px; } .cve-patches a { color: #3fb950; font-size: 12px; margin-right: 10px; } /* KEV cards */ .kev-card { background: var(--bg); border-radius: 8px; padding: 14px; margin-bottom: 12px; border-left: 4px solid #f85149; } .kev-header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .kev-vendor { font-size: 13px; color: #d29922; margin-bottom: 6px; } .kev-desc { font-size: 13px; color: var(--text-soft); line-height: 1.5; } .kev-action { background: #16231266; color: #3fb950; font-size: 12px; padding: 8px; border-radius: 6px; margin-top: 8px; } .kev-meta { font-size: 11px; color: var(--text-muted); margin-top: 6px; } /* Badges */ .badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; } .badge-critical { background: #f8514922; color: #f85149; } .badge-high { background: #d2992222; color: #d29922; } .badge-medium { background: #e3b34122; color: #e3b341; } .badge-low { background: #3fb95022; color: #3fb950; } .badge-danger { background: #f8514922; color: #f85149; } /* Empty state */ .empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); } .empty-state h2 { color: var(--text); margin-bottom: 8px; } .empty-state p { margin-bottom: 20px; } /* --------------------------------------------------------------------------- RESPONSIVE --------------------------------------------------------------------------- */ @media (max-width: 600px) { .hero h1 { font-size: 28px; } .hero-sub { font-size: 15px; } .pack-grid { grid-template-columns: 1fr; } .steps-grid { grid-template-columns: 1fr; } .brief-card { flex-direction: column; align-items: flex-start; } .nav-links { gap: 12px; } .nav-links a { font-size: 13px; } .auth-card { padding: 24px; } } /* =========================================================================== ADMIN PANEL =========================================================================== */ .admin-section { padding: 40px 0; } .admin-header { margin-bottom: 24px; } .admin-header h1 { font-size: 28px; font-weight: 600; margin-bottom: 4px; } .admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 32px; } .admin-stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; text-align: center; } .admin-stat-value { font-size: 32px; font-weight: 700; color: var(--accent); line-height: 1; } .admin-stat-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 6px; } .admin-section-title { font-size: 18px; font-weight: 600; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .admin-table-wrap { overflow-x: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; } .admin-table { width: 100%; border-collapse: collapse; font-size: 14px; } .admin-table th { background: var(--bg); padding: 12px 16px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); border-bottom: 1px solid var(--border); } .admin-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); } .admin-table tr:last-child td { border-bottom: none; } .admin-self-row { background: var(--bg-hover); } .admin-meta { color: var(--text-muted); font-size: 12px; } .admin-toggle { background: var(--border); color: var(--text-muted); border: 1px solid var(--border-strong); padding: 4px 12px; border-radius: 12px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.15s; } .admin-toggle:hover:not(:disabled) { background: var(--border-strong); color: var(--text); } .admin-toggle:disabled { opacity: 0.5; cursor: not-allowed; } .admin-toggle-on { background: #58a6ff22; color: var(--accent); border-color: #58a6ff44; } .admin-toggle-paid { background: #3fb95022; color: #3fb950; border-color: #3fb95044; } .nav-admin-link { color: #f0883e !important; font-weight: 600; } /* =========================================================================== ROADMAP =========================================================================== */ .roadmap-section { padding: 40px 0; } .roadmap-header { text-align: center; margin-bottom: 40px; } .roadmap-header h1 { font-size: 32px; font-weight: 600; margin-bottom: 8px; } .roadmap-tracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-bottom: 40px; } .roadmap-track-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 24px; text-decoration: none; color: inherit; transition: transform 0.15s, border-color 0.15s; display: block; } .roadmap-track-card:hover { transform: translateY(-2px); border-color: var(--border-strong); text-decoration: none; } .roadmap-track-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .roadmap-track-icon { font-size: 28px; } .roadmap-track-card h2 { font-size: 18px; font-weight: 600; color: var(--text-strong); margin: 0; } .roadmap-track-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-bottom: 16px; } .roadmap-track-stats { display: flex; gap: 20px; margin-bottom: 16px; } .roadmap-stat strong { color: var(--text); font-size: 18px; font-weight: 700; display: block; } .roadmap-stat span { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; } .roadmap-stat-rising strong { color: #f0883e; } .roadmap-progress-bar { width: 100%; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-bottom: 6px; } .roadmap-progress-bar-large { height: 10px; border-radius: 5px; } .roadmap-progress-fill { height: 100%; transition: width 0.3s; } .roadmap-progress-text { font-size: 11px; color: var(--text-muted); } .roadmap-legend { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin-top: 40px; } .roadmap-legend h3 { font-size: 14px; margin-bottom: 12px; color: var(--text-strong); } .roadmap-legend ul { list-style: none; padding: 0; } .roadmap-legend li { font-size: 13px; color: var(--text-soft); padding: 4px 0; } /* Track detail page */ .roadmap-track-detail-header { text-align: center; padding-bottom: 24px; margin-bottom: 32px; } .roadmap-back { display: inline-block; color: var(--text-muted); font-size: 13px; margin-bottom: 16px; } .roadmap-detail-icon { font-size: 40px; display: block; margin-bottom: 8px; } .roadmap-track-detail-header h1 { font-size: 28px; font-weight: 600; margin-bottom: 8px; } .roadmap-detail-desc { color: var(--text-muted); font-size: 14px; max-width: 600px; margin: 0 auto 20px; line-height: 1.5; } .roadmap-detail-progress { max-width: 400px; margin: 0 auto; } .roadmap-login-prompt { margin-top: 16px; } .roadmap-stage { margin-bottom: 40px; } .roadmap-stage-title { font-size: 18px; font-weight: 600; margin-bottom: 16px; color: var(--text-strong); padding-bottom: 8px; border-bottom: 1px solid var(--border); } .roadmap-stage-level { display: inline-block; background: #58a6ff22; color: var(--accent); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 3px 10px; border-radius: 10px; margin-right: 10px; } .roadmap-items { display: flex; flex-direction: column; gap: 12px; } .roadmap-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 16px; } .roadmap-item-completed { border-left: 3px solid #3fb950; opacity: 0.85; } .roadmap-item-in_progress { border-left: 3px solid #d29922; } .roadmap-item-planned { border-left: 3px solid var(--accent); } .roadmap-item-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .roadmap-item-type { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 2px 8px; border-radius: 10px; } .roadmap-type-cert { background: #f0883e22; color: #f0883e; } .roadmap-type-skill { background: #58a6ff22; color: var(--accent); } .roadmap-type-concept { background: #a78bfa22; color: #a78bfa; } .roadmap-item-name { font-size: 16px; font-weight: 600; color: var(--text-strong); margin: 0; flex: 1; } .roadmap-item-name a { color: inherit; text-decoration: none; } .roadmap-item-name a:hover { color: var(--accent); text-decoration: underline; } .roadmap-badge-rising { background: #f0883e22; color: #f0883e; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 10px; } .roadmap-item-desc { font-size: 13px; color: var(--text-soft); line-height: 1.5; margin: 0 0 4px; } .roadmap-item-meta { font-size: 12px; color: var(--text-muted); margin: 0; } .roadmap-status-form { display: flex; gap: 6px; flex-wrap: wrap; } .roadmap-status-btn { background: var(--border); color: var(--text-muted); border: 1px solid var(--border-strong); padding: 6px 14px; border-radius: 14px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.15s; } .roadmap-status-btn:hover { background: var(--border-strong); color: var(--text); } .roadmap-status-btn.active { background: var(--accent); color: var(--bg); border-color: var(--accent); } .roadmap-status-clear { padding: 6px 10px; font-weight: 700; } @media (max-width: 600px) { .roadmap-item-header { flex-direction: column; align-items: flex-start; } .roadmap-status-form { flex-direction: column; } .admin-stats { grid-template-columns: 1fr 1fr; } .admin-table { font-size: 12px; } .admin-table th, .admin-table td { padding: 8px; } } /* Rising reason callout */ .roadmap-rising-reason { background: #f0883e11; border-left: 3px solid #f0883e; padding: 10px 14px; margin: 12px 0 8px; border-radius: 4px; font-size: 12px; color: var(--text-soft); line-height: 1.5; } .roadmap-rising-reason strong { color: #f0883e; } /* Learning resources */ .roadmap-resources { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .roadmap-resources summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); list-style: none; padding: 4px 0; user-select: none; } .roadmap-resources summary::-webkit-details-marker { display: none; } .roadmap-resources summary:before { content: "▸"; display: inline-block; margin-right: 6px; transition: transform 0.15s; } .roadmap-resources[open] summary:before { transform: rotate(90deg); } .roadmap-resources summary:hover { color: var(--accent-hover); } .roadmap-resource-list { list-style: none; padding: 10px 0 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .roadmap-resource a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; text-decoration: none; transition: border-color 0.15s, background 0.15s; } .roadmap-resource a:hover { background: var(--bg-card); border-color: var(--border-strong); text-decoration: none; } .roadmap-resource-type { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 8px; border-radius: 10px; min-width: 80px; text-align: center; flex-shrink: 0; } .roadmap-resource-official { background: #58a6ff22; color: var(--accent); } .roadmap-resource-course { background: #d2992222; color: #d29922; } .roadmap-resource-free_course { background: #3fb95022; color: #3fb950; } .roadmap-resource-book { background: #a78bfa22; color: #a78bfa; } .roadmap-resource-practice { background: #f0883e22; color: #f0883e; } .roadmap-resource-youtube { background: #f8514922; color: #f85149; } .roadmap-resource-community { background: var(--text-muted)22; color: var(--text-muted); } .roadmap-resource-docs { background: #79c0ff22; color: var(--accent-hover); } .roadmap-resource-name { font-size: 13px; color: var(--text); flex: 1; } .roadmap-reviewed { font-size: 11px; color: var(--text-muted); margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); line-height: 1.5; } @media (max-width: 600px) { .roadmap-resource a { flex-direction: column; align-items: flex-start; gap: 6px; } .roadmap-resource-type { min-width: auto; } } /* =========================================================================== COLLAPSIBLE PACK CATEGORIES (topics page) =========================================================================== */ .pack-category { margin-bottom: 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); overflow: hidden; } .pack-category-header { cursor: pointer; padding: 16px 20px; background: var(--bg-card); display: flex; align-items: center; justify-content: space-between; list-style: none; user-select: none; transition: background 0.15s; } .pack-category-header::-webkit-details-marker { display: none; } .pack-category-header:hover { background: var(--bg-hover); } .pack-category-header:before { content: "▸"; display: inline-block; margin-right: 10px; font-size: 12px; color: var(--text-muted); transition: transform 0.15s; } .pack-category[open] .pack-category-header:before { transform: rotate(90deg); } .pack-category-name { font-size: 16px; font-weight: 600; color: var(--text-strong); flex: 1; } .pack-category-count { font-size: 11px; color: var(--text-muted); background: var(--border); padding: 3px 10px; border-radius: 10px; font-weight: 600; } .pack-category[open] .pack-grid { padding: 20px; border-top: 1px solid var(--border); } /* =========================================================================== ROADMAP - PACK ATTRIBUTION & ACCESS STATES =========================================================================== */ .roadmap-track-pack-badge { display: inline-block; padding: 3px 10px; margin-top: 10px; margin-bottom: 4px; font-size: 11px; font-weight: 600; color: var(--text-muted); background: var(--bg-card); border-radius: 4px; } .roadmap-track-pack-attribution { margin: 12px 0; font-size: 13px; color: var(--text-muted); } .roadmap-pack-link { font-weight: 600; text-decoration: none; } .roadmap-pack-link:hover { text-decoration: underline; } .roadmap-locked-notice { background: #d2992211; border: 1px solid #d2992233; border-left: 3px solid #d29922; padding: 12px 16px; border-radius: 6px; font-size: 13px; color: var(--text-soft); margin: 16px auto; max-width: 500px; text-align: left; line-height: 1.5; } .roadmap-locked-notice strong { color: #d29922; } .roadmap-empty-state { text-align: center; padding: 60px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; margin-top: 30px; } .roadmap-empty-state h2 { font-size: 20px; font-weight: 600; margin-bottom: 12px; color: var(--text-strong); } .roadmap-empty-state p { font-size: 14px; color: var(--text-muted); max-width: 480px; margin: 0 auto 24px; line-height: 1.5; } /* =========================================================================== THEME SWITCHER =========================================================================== */ .theme-switcher { position: relative; display: inline-block; } .theme-switcher-btn { background: transparent; border: 1px solid var(--border); color: var(--text-muted); width: 32px; height: 32px; border-radius: 6px; cursor: pointer; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s; padding: 0; } .theme-switcher-btn:hover { background: var(--bg-hover); color: var(--text-strong); border-color: var(--border-strong); } .theme-switcher-menu { position: absolute; top: calc(100% + 6px); right: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; min-width: 140px; padding: 6px; display: none; z-index: 100; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .theme-switcher.open .theme-switcher-menu { display: block; } .theme-option { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 4px; cursor: pointer; font-size: 13px; color: var(--text); transition: background 0.15s; width: 100%; text-align: left; background: transparent; border: none; } .theme-option:hover { background: var(--bg-hover); } .theme-option.active { color: var(--accent); font-weight: 600; } .theme-option-icon { font-size: 14px; width: 16px; text-align: center; } .theme-option.active::after { content: "✓"; margin-left: auto; color: var(--accent); } /* =========================================================================== FEEDBACK WIDGET =========================================================================== */ /* Floating action button (FAB) — bottom right corner */ .feedback-fab { position: fixed; bottom: 24px; right: 24px; background: var(--accent); color: var(--bg); border: none; border-radius: 28px; height: 48px; padding: 0 18px 0 14px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; font-weight: 600; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); z-index: 90; transition: all 0.15s; } .feedback-fab:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } .feedback-fab-icon { font-size: 18px; } .feedback-fab-label { font-size: 14px; } /* On small screens, collapse to just the icon */ @media (max-width: 600px) { .feedback-fab { padding: 0; width: 48px; justify-content: center; border-radius: 50%; } .feedback-fab-label { display: none; } } /* Nav feedback link (alternative entry point) */ .nav-feedback-link { color: var(--text-muted); } .nav-feedback-link:hover { color: var(--text-strong); text-decoration: none; } /* =========================================================================== MODAL (used by feedback, can be reused) =========================================================================== */ .feedback-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; } .feedback-modal.open { display: flex; } .feedback-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(4px); } .feedback-modal-content { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); z-index: 1; } .feedback-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border); } .feedback-modal-header h2 { font-size: 18px; color: var(--text-strong); margin: 0; } .feedback-modal-close { background: transparent; border: none; color: var(--text-muted); font-size: 28px; line-height: 1; cursor: pointer; padding: 0 4px; transition: color 0.15s; } .feedback-modal-close:hover { color: var(--text-strong); } .feedback-modal-body { padding: 20px 24px 24px; } .feedback-intro { color: var(--text-muted); font-size: 14px; margin-bottom: 20px; line-height: 1.5; } .form-field { margin-bottom: 16px; } .form-field label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; } .form-field select, .form-field input[type="text"], .form-field input[type="email"], .form-field textarea { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 10px 12px; font-size: 14px; font-family: inherit; transition: border-color 0.15s; } .form-field select:focus, .form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--accent); } .form-field textarea { resize: vertical; min-height: 120px; } .form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; } .btn-primary { background: var(--accent); color: var(--bg); border: none; padding: 10px 20px; border-radius: 6px; font-weight: 600; font-size: 14px; cursor: pointer; transition: background 0.15s; } .btn-primary:hover { background: var(--accent-hover); } .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; } .btn-secondary { background: transparent; color: var(--text-muted); border: 1px solid var(--border); padding: 10px 20px; border-radius: 6px; font-weight: 500; font-size: 14px; cursor: pointer; transition: all 0.15s; } .btn-secondary:hover { color: var(--text-strong); border-color: var(--border-strong); } .feedback-status { font-size: 13px; padding: 8px 0; min-height: 20px; } .feedback-status.success { color: #3fb950; } .feedback-status.error { color: #f85149; } /* =========================================================================== FOOTER LINKS =========================================================================== */ .footer-links { margin-top: 8px; font-size: 13px; color: var(--text-muted); } .footer-links a { color: var(--text-muted); margin: 0 8px; } .footer-links a:hover { color: var(--text-strong); } /* =========================================================================== STATIC CONTENT PAGES (contact, privacy, terms, refund policy) =========================================================================== */ .content-page { max-width: 760px; margin: 0 auto; padding: 40px 20px; } .content-page h1 { color: var(--text-strong); font-size: 32px; margin-bottom: 8px; } .content-page .subtitle { color: var(--text-muted); font-size: 15px; margin-bottom: 32px; } .content-page h2 { color: var(--text-strong); font-size: 20px; margin-top: 32px; margin-bottom: 12px; } .content-page h3 { color: var(--text-strong); font-size: 16px; margin-top: 24px; margin-bottom: 8px; } .content-page p, .content-page li { color: var(--text); line-height: 1.7; margin-bottom: 12px; } .content-page ul, .content-page ol { padding-left: 24px; margin-bottom: 16px; } .content-page .contact-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 20px; margin: 16px 0; } .content-page .contact-card .email { color: var(--accent); font-weight: 600; font-size: 16px; } .content-page .contact-card .description { color: var(--text-muted); font-size: 14px; margin-top: 4px; } .content-page .last-updated { color: var(--text-faint); font-size: 13px; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--border); } /* =========================================================================== ACCOUNT SETTINGS / CANCELLATION =========================================================================== */ .danger-zone { background: var(--bg-card); border: 1px solid #f85149; border-radius: 8px; padding: 20px; margin-top: 40px; } .danger-zone h2 { color: #f85149; font-size: 16px; margin-bottom: 12px; } .danger-zone p { color: var(--text-muted); margin-bottom: 16px; line-height: 1.6; } .btn-danger { background: transparent; color: #f85149; border: 1px solid #f85149; padding: 8px 16px; border-radius: 6px; font-size: 14px; cursor: pointer; transition: all 0.15s; } .btn-danger:hover { background: #f85149; color: white; } .cancellation-reason-list { list-style: none; padding: 0; margin: 16px 0; } .cancellation-reason-list li { margin-bottom: 8px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; } .cancellation-reason-list label { display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--text); font-size: 14px; font-weight: normal; margin-bottom: 0; } .account-deleted-banner { background: rgba(248, 81, 73, 0.1); border: 1px solid #f85149; border-radius: 8px; padding: 16px 20px; margin: 20px auto; max-width: 760px; text-align: center; } .account-deleted-banner strong { color: #f85149; } /* =========================================================================== ADMIN FEEDBACK BADGES =========================================================================== */ .feedback-badge { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: lowercase; } .feedback-badge-bug { background: rgba(248, 81, 73, 0.15); color: #f85149; } .feedback-badge-feature { background: rgba(167, 139, 250, 0.15); color: #a78bfa; } .feedback-badge-topic_suggestion { background: rgba(63, 185, 80, 0.15); color: #3fb950; } .feedback-badge-question { background: rgba(210, 153, 34, 0.15); color: #d29922; } .feedback-badge-other { background: var(--bg-hover); color: var(--text-muted); } .feedback-status-badge { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: lowercase; } .feedback-status-new { background: rgba(88, 166, 255, 0.15); color: var(--accent); } .feedback-status-in_progress { background: rgba(210, 153, 34, 0.15); color: #d29922; } .feedback-status-resolved { background: rgba(63, 185, 80, 0.15); color: #3fb950; } .feedback-status-archived { background: var(--bg-hover); color: var(--text-faint); } /* =========================================================================== ACCOUNT SETTINGS FORMS =========================================================================== */ .settings-form { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 20px; margin-bottom: 20px; } .settings-form .form-actions { margin-top: 16px; } /* Alerts (success / error / info) */ .alert { padding: 12px 16px; border-radius: 8px; font-size: 14px; margin-bottom: 16px; border: 1px solid; } .alert-success { background: rgba(63, 185, 80, 0.1); color: #3fb950; border-color: rgba(63, 185, 80, 0.3); } .alert-error { background: rgba(248, 81, 73, 0.1); color: #f85149; border-color: rgba(248, 81, 73, 0.3); } .alert-info { background: rgba(88, 166, 255, 0.1); color: var(--accent); border-color: rgba(88, 166, 255, 0.3); } /* =========================================================================== ROADMAP ACCESS BADGES + BANNERS =========================================================================== */ .access-badge { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; margin: 8px 0; text-transform: lowercase; letter-spacing: 0.3px; } .access-badge-full { background: rgba(63, 185, 80, 0.15); color: #3fb950; border: 1px solid rgba(63, 185, 80, 0.3); } .access-badge-browse { background: rgba(210, 153, 34, 0.15); color: #d29922; border: 1px solid rgba(210, 153, 34, 0.3); } .access-badge-locked { background: var(--bg-hover); color: var(--text-muted); border: 1px solid var(--border-strong); } .roadmap-banner { background: var(--bg-card); border: 1px solid var(--accent); border-left: 4px solid var(--accent); border-radius: 8px; padding: 16px 20px; margin-bottom: 24px; font-size: 14px; color: var(--text); line-height: 1.5; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .roadmap-banner strong { color: var(--text-strong); } .roadmap-banner .btn-primary { flex-shrink: 0; } .roadmap-locked-notice { background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 8px; padding: 16px 20px; margin: 16px 0; font-size: 14px; line-height: 1.6; color: var(--text); } .roadmap-locked-notice strong { color: var(--text-strong); } .btn-sm { padding: 6px 14px !important; font-size: 13px !important; } /* =========================================================================== TOPICS CATEGORY CONTROLS =========================================================================== */ .category-controls { margin: 0 0 20px; font-size: 13px; color: var(--text-muted); } .link-button { background: transparent; border: none; color: var(--accent); cursor: pointer; font-size: 13px; padding: 0; font-family: inherit; text-decoration: none; } .link-button:hover { text-decoration: underline; } /* =========================================================================== BRIEF ARCHIVE =========================================================================== */ .brief-archive-list { margin: 24px 0; } .brief-archive-item { display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 14px 18px; margin-bottom: 10px; text-decoration: none; color: var(--text); transition: all 0.15s; } .brief-archive-item:hover { border-color: var(--accent); background: var(--bg-hover); text-decoration: none; } .brief-archive-date { font-size: 14px; font-weight: 600; color: var(--text-strong); margin-bottom: 4px; } .brief-archive-preview { font-size: 13px; color: var(--text-muted); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .brief-archive-link { margin-top: 12px; font-size: 13px; } .brief-archive-link a { color: var(--text-muted); } .brief-archive-link a:hover { color: var(--accent); } /* =========================================================================== SHARE LINK =========================================================================== */ .share-link-container { display: flex; gap: 8px; margin: 12px 0; } .share-url-input { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 10px 12px; font-size: 13px; font-family: ui-monospace, monospace; } .share-url-input:focus { outline: none; border-color: var(--accent); } .share-status { font-size: 13px; min-height: 18px; margin-top: 6px; } .share-status.success { color: #3fb950; } /* =========================================================================== FORM INPUT VISIBILITY FIXES Make sure inputs/textareas/selects are clearly visible in all themes. These override more generic rules from earlier in the file. =========================================================================== */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="tel"], textarea, select { background: var(--bg); border: 1px solid var(--border-strong); color: var(--text); } [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="search"], [data-theme="dark"] textarea, [data-theme="dark"] select { /* Use a slightly lighter background than page so the field stands out */ background: #161b22; border-color: #484f58; } [data-theme="midnight"] input[type="text"], [data-theme="midnight"] input[type="email"], [data-theme="midnight"] input[type="password"], [data-theme="midnight"] input[type="search"], [data-theme="midnight"] textarea, [data-theme="midnight"] select { background: #141414; border-color: #404040; } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15); } /* Sign up / login form input boxes specifically - these had nearly-invisible borders */ .auth-form input, .signup-form input, .login-form input, form input[name="email"], form input[name="password"], form input[name="display_name"] { background: var(--bg-card); border: 1px solid var(--border-strong); } [data-theme="dark"] .auth-form input, [data-theme="dark"] .signup-form input, [data-theme="dark"] .login-form input, [data-theme="dark"] form input[name="email"], [data-theme="dark"] form input[name="password"], [data-theme="dark"] form input[name="display_name"] { background: #1c2129; border-color: #484f58; } /* =========================================================================== USER AVATAR + DROPDOWN MENU =========================================================================== */ .user-menu { position: relative; display: inline-block; margin-left: 4px; } .user-avatar-btn { background: transparent; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: transform 0.1s, box-shadow 0.15s; } .user-avatar-btn:hover { transform: scale(1.05); } .user-avatar-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.3); } .user-avatar { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; font-size: 13px; font-weight: 600; color: #ffffff; user-select: none; line-height: 1; } .user-menu-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 240px; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.15s, transform 0.15s, visibility 0.15s; z-index: 1000; } .user-menu-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); } .user-menu-header { padding: 12px 12px 10px; } .user-menu-name { font-size: 14px; font-weight: 600; color: var(--text-strong); margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-menu-email { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 8px; } .user-menu-tier { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; background: var(--bg-hover); color: var(--text-muted); border: 1px solid var(--border); } .user-menu-tier-paid { background: rgba(63, 185, 80, 0.15); color: #3fb950; border-color: rgba(63, 185, 80, 0.3); } .user-menu-divider { height: 1px; background: var(--border); margin: 4px 0; } .user-menu-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 6px; color: var(--text); text-decoration: none; font-size: 13px; transition: background 0.1s; } .user-menu-item:hover { background: var(--bg-hover); text-decoration: none; color: var(--text-strong); } .user-menu-item-danger { color: var(--text-muted); } .user-menu-item-danger:hover { background: rgba(248, 81, 73, 0.1); color: #f85149; } .user-menu-item svg { flex-shrink: 0; opacity: 0.7; } /* =========================================================================== LANDING PAGE =========================================================================== */ /* ----- Hero ----- */ .landing-hero { padding: 60px 24px 80px; background: linear-gradient(180deg, var(--bg) 0%, var(--bg-card) 100%); border-bottom: 1px solid var(--border); } .landing-hero-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } @media (max-width: 880px) { .landing-hero-inner { grid-template-columns: 1fr; gap: 32px; } } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(63, 185, 80, 0.1); border: 1px solid rgba(63, 185, 80, 0.3); color: #3fb950; border-radius: 100px; font-size: 12px; font-weight: 600; margin-bottom: 20px; } .hero-pulse-dot { width: 6px; height: 6px; background: #3fb950; border-radius: 50%; box-shadow: 0 0 0 0 rgba(63, 185, 80, 0.4); animation: pulse-dot 2s infinite; } @keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(63, 185, 80, 0.6); } 70% { box-shadow: 0 0 0 8px rgba(63, 185, 80, 0); } 100% { box-shadow: 0 0 0 0 rgba(63, 185, 80, 0); } } .hero-title { font-size: 56px; line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; color: var(--text-strong); margin: 0 0 20px; } .hero-title-accent { color: var(--accent); } @media (max-width: 660px) { .hero-title { font-size: 40px; } } .hero-sub { font-size: 18px; line-height: 1.6; color: var(--text-muted); margin: 0 0 32px; max-width: 540px; } .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .hero-fineprint { font-size: 13px; color: var(--text-faint); margin: 0; } .btn-lg { padding: 14px 28px !important; font-size: 15px !important; font-weight: 600 !important; border-radius: 8px; } /* ----- Hero mockup (email preview) ----- */ .hero-mockup { background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 12px; padding: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); font-size: 13px; max-width: 460px; } .hero-mockup-header { border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 14px; } .hero-mockup-from { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; } .hero-mockup-subject { font-size: 15px; font-weight: 600; color: var(--text-strong); } .hero-mockup-section { margin-bottom: 16px; } .hero-mockup-section-title { font-size: 10px; color: var(--accent); font-weight: 700; letter-spacing: 1px; margin-bottom: 10px; } .hero-mockup-item { padding: 8px 0; border-bottom: 1px solid var(--border); } .hero-mockup-item:last-child { border-bottom: none; } .hero-mockup-headline { color: var(--text); margin-bottom: 2px; line-height: 1.4; } .hero-mockup-source { font-size: 11px; color: var(--text-muted); } /* ----- Landing sections (generic) ----- */ .landing-section { padding: 80px 24px; } .landing-section-alt { background: var(--bg-card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .landing-section-inner { max-width: 1200px; margin: 0 auto; } .landing-section-narrow { max-width: 720px; } /* On landing pages, section headers and ledes are centered by default so they look intentional in the middle of wide screens rather than "floating" left while the content sits centered below. */ .landing-section .section-h2, .landing-section .section-lede { text-align: center; margin-left: auto; margin-right: auto; } .section-h2 { font-size: 36px; line-height: 1.15; font-weight: 700; color: var(--text-strong); letter-spacing: -0.01em; margin: 0 0 16px; } .section-h2-center { text-align: center; } @media (max-width: 660px) { .section-h2 { font-size: 28px; } } .section-lede { font-size: 17px; line-height: 1.6; color: var(--text-muted); margin: 0 0 48px; max-width: 720px; } .section-lede-center { text-align: center; margin-left: auto; margin-right: auto; } /* ----- Features grid ----- */ .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 880px) { .features-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .features-grid { grid-template-columns: 1fr; } } .feature-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 24px; } .feature-icon { width: 40px; height: 40px; border-radius: 8px; background: rgba(88, 166, 255, 0.1); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; } .feature-card h3 { font-size: 17px; font-weight: 600; color: var(--text-strong); margin: 0 0 10px; } .feature-card p { color: var(--text-muted); line-height: 1.6; font-size: 14px; margin: 0; } /* ----- Steps ----- */ .steps-grid-modern { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } @media (max-width: 720px) { .steps-grid-modern { grid-template-columns: 1fr; } } .step-modern { text-align: center; padding: 0 12px; } .step-modern-num { width: 48px; height: 48px; margin: 0 auto 20px; background: var(--accent); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; } .step-modern h3 { font-size: 18px; color: var(--text-strong); margin: 0 0 10px; } .step-modern p { color: var(--text-muted); line-height: 1.6; font-size: 14px; max-width: 280px; margin: 0 auto; } /* ----- Pack showcase ----- */ .packs-showcase { display: flex; flex-direction: column; gap: 32px; } .showcase-category-name { font-size: 14px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin: 0 0 14px; } .showcase-packs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (max-width: 660px) { .showcase-packs { grid-template-columns: 1fr; } } .showcase-pack { background: var(--bg-card); padding: 14px 16px; border: 1px solid var(--border); border-radius: 6px; } .showcase-pack-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .showcase-pack-icon { font-size: 18px; } .showcase-pack-name { font-size: 14px; font-weight: 600; color: var(--text-strong); } .showcase-pack-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin: 0; } /* ----- Pricing ----- */ .pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 800px; margin: 0 auto; } @media (max-width: 720px) { .pricing-grid { grid-template-columns: 1fr; } } .pricing-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 32px; } .pricing-card-featured { border: 2px solid var(--accent); position: relative; box-shadow: 0 8px 32px rgba(88, 166, 255, 0.15); } .pricing-tier { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; color: var(--text-muted); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .pricing-tier-badge { background: var(--accent); color: #fff; padding: 3px 10px; border-radius: 100px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; } .pricing-price { margin-bottom: 8px; } .pricing-price-amount { font-size: 48px; font-weight: 700; color: var(--text-strong); line-height: 1; } .pricing-price-period { font-size: 14px; color: var(--text-muted); margin-left: 6px; } .pricing-tagline { font-size: 14px; color: var(--text-muted); margin-bottom: 24px; } .pricing-features { list-style: none; padding: 0; margin: 0 0 24px; } .pricing-features li { padding: 8px 0; font-size: 14px; color: var(--text); display: flex; align-items: flex-start; gap: 10px; } .pricing-feature-locked { color: var(--text-faint) !important; } .pricing-check { color: #3fb950; font-weight: 700; flex-shrink: 0; width: 16px; } .pricing-x { color: var(--text-faint); flex-shrink: 0; width: 16px; } .pricing-cta-primary, .pricing-cta-secondary { display: block; text-align: center; padding: 12px 20px; border-radius: 8px; font-weight: 600; text-decoration: none; transition: all 0.15s; } .pricing-cta-primary { background: var(--accent); color: #fff; border: 1px solid var(--accent); } .pricing-cta-primary:hover { background: var(--accent-hover); color: #fff; text-decoration: none; } .pricing-cta-secondary { background: transparent; color: var(--text); border: 1px solid var(--border-strong); } .pricing-cta-secondary:hover { background: var(--bg-hover); text-decoration: none; } .pricing-footnote { margin-top: 14px; font-size: 12px; color: var(--text-faint); text-align: center; line-height: 1.5; } /* ----- Founder note ----- */ .founder-note { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 36px; font-size: 16px; line-height: 1.7; color: var(--text); } .founder-note p { margin: 0 0 18px; } .founder-note p:last-child { margin-bottom: 0; } .founder-sign { font-weight: 600; color: var(--text-strong); margin-top: 24px !important; } /* ----- Final CTA ----- */ .landing-final-cta { padding: 80px 24px 100px; text-align: center; } .final-cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; } /* =========================================================================== COMPARISON / VS STATUS QUO TABLE =========================================================================== */ .comparison-wrapper { display: flex; flex-direction: column; gap: 2px; background: var(--border); border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden; } .comparison-row { display: grid; grid-template-columns: 1fr 1.5fr 1.5fr; gap: 2px; background: var(--border); } .comparison-cell { padding: 16px 20px; background: var(--bg-card); font-size: 14px; line-height: 1.5; display: flex; align-items: center; } .comparison-header { font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; font-size: 12px; } .comparison-header .comparison-cell { color: var(--text-muted); padding: 14px 20px; } .comparison-cell-empty { background: var(--bg-card); } .comparison-label { font-weight: 600; color: var(--text-strong); background: var(--bg); } .comparison-cell-without { color: var(--text-muted); } .comparison-cell-with { color: var(--text); position: relative; } .comparison-cell-with::before { content: "✓"; color: #3fb950; font-weight: 700; margin-right: 8px; flex-shrink: 0; } .comparison-header .comparison-cell-with::before { display: none; } .comparison-header .comparison-cell-with { color: var(--accent); } @media (max-width: 720px) { .comparison-row { grid-template-columns: 1fr; } .comparison-cell { padding: 12px 16px; } .comparison-label { font-size: 13px; padding-top: 18px; padding-bottom: 10px; } .comparison-cell-with::before { margin-right: 6px; } } /* =========================================================================== PRICING TOGGLE + 3 TIER LAYOUT =========================================================================== */ .pricing-toggle { display: inline-flex; background: var(--bg); border: 1px solid var(--border-strong); border-radius: 100px; padding: 4px; margin: 0 auto 36px; position: relative; } .pricing-toggle-btn { background: transparent; border: none; color: var(--text-muted); padding: 10px 22px; border-radius: 100px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.15s; font-family: inherit; display: inline-flex; align-items: center; gap: 8px; } .pricing-toggle-btn:hover { color: var(--text); } .pricing-toggle-active { background: var(--accent); color: #fff !important; } .pricing-toggle-save { background: #3fb950; color: #fff; padding: 2px 8px; border-radius: 100px; font-size: 10px; font-weight: 700; letter-spacing: 0.3px; } .pricing-toggle-active .pricing-toggle-save { background: rgba(255, 255, 255, 0.25); } /* Wrap pricing toggle for centering inside the section inner */ .landing-section-inner > .pricing-toggle { display: flex; width: max-content; } /* 3-tier grid */ .pricing-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1100px; margin: 0 auto; } @media (max-width: 900px) { .pricing-grid-3 { grid-template-columns: 1fr; max-width: 480px; } } .pricing-annual-note { text-align: center; font-size: 12px; color: var(--text-muted); margin-top: 14px; min-height: 16px; display: none; } .pricing-footnote-global { text-align: center; margin-top: 32px; font-size: 13px; color: var(--text-muted); max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; } .pricing-toggle-wrapper { text-align: center; margin-bottom: 36px; } .pricing-toggle-wrapper .pricing-toggle { display: inline-flex; margin: 0; } /* =========================================================================== PACK LOGO STYLES Full logo lockups used on brief headers, archive pages, roadmap tracks =========================================================================== */ /* Brief page header */ .brief-pack-logo { max-width: 480px; width: 100%; height: auto; display: block; margin: 0 auto 12px; } /* Brief archive page */ .archive-pack-logo { max-width: 480px; width: 100%; height: auto; display: block; margin: 0 0 4px; } .archive-title-with-logo { font-size: 24px; color: var(--text-muted); font-weight: 400; margin: 0 0 8px; } /* Roadmap track pack attribution */ .roadmap-pack-logo-inline { max-height: 36px; width: auto; vertical-align: middle; margin-left: 4px; } .roadmap-attribution-label { font-size: 13px; color: var(--text-muted); margin-right: 4px; } @media (max-width: 660px) { .brief-pack-logo, .archive-pack-logo { max-width: 100%; } .roadmap-pack-logo-inline { max-height: 28px; } }