/* * ============================================================ * SPONSORRADAR — Stylesheet * ============================================================ * HOW TO INSTALL: * Option A: Paste into WP Admin → Appearance → Customize → Additional CSS * Option B: Paste at the bottom of your theme's style.css * Option C: Enqueue as a separate file from functions.php * * FONTS REQUIRED — add this to your theme's or functions.php: * * ============================================================ */ :root { --bg: #f2f2f0; --bg-white: #ffffff; --bg-panel: #eeecea; --orange: #e8571a; --orange-light: #fff0ea; --text: #1a1a1a; --text-mid: #4a4a4a; --muted: #8a8a8a; --border: #d8d6d2; --border-dark: #c4c2be; --green: #16a34a; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg); color: var(--text); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; line-height: 1.5; min-height: 100vh; } /* ── HEADER ── */ header { background: var(--bg-white); border-bottom: 1.5px solid var(--border); padding: 0 40px; display: flex; align-items: center; justify-content: space-between; height: 60px; position: sticky; top: 0; z-index: 100; } .logo-area { display: flex; align-items: center; gap: 10px; } .logo-wordmark { font-weight: 800; font-size: 17px; letter-spacing: -0.03em; color: var(--text); } .logo-wordmark span { color: var(--orange); } .logo-divider { width: 1px; height: 18px; background: var(--border); } .logo-sub { font-size: 12px; color: var(--muted); font-weight: 500; } .updated-badge { display: flex; align-items: center; gap: 6px; background: var(--orange-light); border: 1px solid rgba(232,87,26,0.2); border-radius: 100px; padding: 5px 12px; font-size: 11.5px; font-weight: 600; color: var(--orange); } .updated-dot { width: 6px; height: 6px; background: var(--orange); border-radius: 50%; animation: blink 2s infinite; } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} } /* ── HERO ── */ .hero-band { background: var(--bg-white); border-bottom: 1.5px solid var(--border); padding: 52px 40px 44px; } .hero-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 420px; gap: 72px; align-items: center; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); margin-bottom: 16px; } .eyebrow-line { width: 24px; height: 2px; background: var(--orange); border-radius: 2px; } h1 { font-weight: 800; font-size: clamp(30px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.04em; color: var(--text); margin-bottom: 16px; } .hero-desc { color: var(--text-mid); font-size: 15px; line-height: 1.7; max-width: 520px; margin-bottom: 36px; } .stats-row { display: flex; border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden; width: fit-content; background: var(--bg); } .stat { padding: 16px 28px; border-right: 1.5px solid var(--border); display: flex; flex-direction: column; gap: 2px; } .stat:last-child { border-right: none; } .stat-num { font-weight: 800; font-size: 24px; letter-spacing: -0.04em; } .stat-label { font-size: 11px; color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; } /* ── SUBSCRIBE CARD ── */ .subscribe-card { background: var(--bg-white); border: 1.5px solid var(--border); border-radius: 12px; padding: 32px; position: relative; overflow: hidden; } .subscribe-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--orange), #f97316); } .subscribe-card::after { content: ''; position: absolute; top: 0; right: 0; width: 140px; height: 140px; background: radial-gradient(circle at top right, rgba(232,87,26,0.07), transparent 70%); pointer-events: none; } .card-icon { width: 40px; height: 40px; background: var(--orange-light); border: 1.5px solid rgba(232,87,26,0.2); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 16px; } .card-title { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; margin-bottom: 6px; } .card-desc { font-size: 13px; color: var(--text-mid); line-height: 1.6; margin-bottom: 20px; } .what-youll-get { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; padding: 14px 16px; background: var(--bg); border: 1.5px solid var(--border); border-radius: 8px; } .get-item { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-mid); } .get-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--orange-light); border: 1.5px solid rgba(232,87,26,0.25); display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--orange); flex-shrink: 0; font-weight: 700; } .form-row { display: flex; flex-direction: column; gap: 10px; } .field { display: flex; flex-direction: column; gap: 5px; } .field label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; } .field input, .field select { background: var(--bg); border: 1.5px solid var(--border); border-radius: 7px; padding: 10px 13px; color: var(--text); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13.5px; outline: none; transition: border-color 0.18s, background 0.18s; width: 100%; -webkit-appearance: none; } .field input:focus, .field select:focus { border-color: var(--orange); background: #fff; } .field input::placeholder { color: var(--muted); } .sub-btn { background: var(--orange); color: #fff; border: none; border-radius: 7px; padding: 13px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 14px; cursor: pointer; transition: background 0.18s, transform 0.12s; width: 100%; margin-top: 4px; } .sub-btn:hover { background: #d14a14; transform: translateY(-1px); } .fine-print { text-align: center; font-size: 11px; color: var(--muted); margin-top: 8px; } /* ── CONTENT ── */ .content-area { max-width: 1280px; margin: 32px auto; padding: 0 40px; } /* ── TOOLBAR ── */ .toolbar { background: var(--bg-white); border: 1.5px solid var(--border); border-bottom: none; border-radius: 10px 10px 0 0; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .toolbar-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .toolbar-title { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; margin-right: 4px; } .month-chip { background: var(--orange-light); border: 1px solid rgba(232,87,26,0.25); border-radius: 6px; padding: 5px 10px; font-size: 12px; font-weight: 600; color: var(--orange); font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.04em; } .month-nav-btn { background: var(--bg); border: 1.5px solid var(--border); border-radius: 5px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 12px; color: var(--text-mid); transition: border-color 0.15s, color 0.15s; text-decoration: none; } .month-nav-btn:hover { border-color: var(--orange); color: var(--orange); } .month-nav-btn.disabled { opacity: 0.35; cursor: default; pointer-events: none; } .filter-pills { display: flex; gap: 6px; flex-wrap: wrap; } .pill { background: var(--bg); border: 1.5px solid var(--border); border-radius: 100px; padding: 4px 12px; font-size: 12px; font-weight: 500; color: var(--text-mid); cursor: pointer; transition: all 0.15s; white-space: nowrap; text-decoration: none; display: inline-block; } .pill:hover { border-color: var(--orange); color: var(--orange); background: var(--orange-light); } .pill.active { background: var(--orange); border-color: var(--orange); color: #fff; font-weight: 600; } .toolbar-right { display: flex; align-items: center; gap: 8px; } .sort-box { background: var(--bg); border: 1.5px solid var(--border); border-radius: 7px; padding: 7px 10px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px; color: var(--text-mid); outline: none; cursor: pointer; -webkit-appearance: none; } /* ── PLATFORM TABS ── */ .platform-bar { background: var(--bg-white); border-left: 1.5px solid var(--border); border-right: 1.5px solid var(--border); border-bottom: 1.5px solid var(--border-dark); padding: 0 16px; display: flex; align-items: center; gap: 0; } .platform-tab { padding: 9px 16px; font-size: 12.5px; font-weight: 500; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-bottom: -1.5px; } .platform-tab:hover { color: var(--text); } .platform-tab.active { color: var(--orange); border-bottom-color: var(--orange); font-weight: 600; } .tab-count { background: var(--bg-panel); border-radius: 100px; padding: 1px 7px; font-size: 10px; font-family: 'IBM Plex Mono', monospace; color: var(--muted); } .platform-tab.active .tab-count { background: var(--orange-light); color: var(--orange); } /* ── SPREADSHEET ── */ .sheet-wrapper { background: var(--bg-white); border: 1.5px solid var(--border); border-top: none; border-radius: 0 0 10px 10px; overflow: hidden; overflow-x: auto; } table { width: 100%; border-collapse: collapse; min-width: 900px; } thead tr { background: var(--bg-panel); border-bottom: 2px solid var(--border-dark); } thead th { padding: 9px 14px; text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); white-space: nowrap; border-right: 1px solid var(--border); user-select: none; cursor: pointer; transition: background 0.12s, color 0.12s; } thead th:hover { background: #e6e4e0; color: var(--text); } thead th:first-child { width: 44px; text-align: center; cursor: default; font-size: 10px; } thead th:last-child { border-right: none; } thead th.sorted { color: var(--orange); } thead th.sorted::after { content: ' ↓'; font-size: 10px; } tbody tr { border-bottom: 1px solid var(--border); transition: background 0.1s; } tbody tr:last-child { border-bottom: none; } tbody tr:hover { background: #fdf8f5; } tbody td { padding: 11px 14px; font-size: 13.5px; border-right: 1px solid var(--border); vertical-align: middle; white-space: nowrap; } tbody td:last-child { border-right: none; } .row-num { text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--muted); background: var(--bg-panel); border-right: 1px solid var(--border-dark) !important; min-width: 44px; } /* Brand cell */ .brand-cell { display: flex; align-items: center; gap: 9px; } .brand-logo { width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; font-family: 'IBM Plex Mono', monospace; } .brand-info { display: flex; flex-direction: column; gap: 1px; } .brand-name { font-weight: 600; font-size: 13.5px; color: var(--text); text-decoration: none; } .brand-name:hover { text-decoration: underline; color: var(--orange); } .brand-tier { font-size: 10px; color: var(--muted); font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: 0.06em; } /* Creator cell */ .creator-cell { display: flex; flex-direction: column; gap: 2px; } .creator-handle { font-weight: 500; font-size: 13px; color: var(--text); text-decoration: none; } .creator-handle:hover { color: var(--orange); text-decoration: underline; } .creator-meta { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; } .creator-stat { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--muted); } .creator-meta-dot { color: var(--border-dark); font-size: 9px; } .creator-agency { font-size: 10px; font-weight: 600; color: var(--orange); background: var(--orange-light); border: 1px solid rgba(232,87,26,0.2); border-radius: 3px; padding: 1px 5px; white-space: nowrap; } .top-badge { font-size: 9px; font-weight: 700; color: #b45309; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 3px; padding: 1px 5px; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.06em; } /* Category tags — multi select */ .tag-list { display: flex; gap: 4px; flex-wrap: wrap; } .tag { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; font-family: 'IBM Plex Mono', monospace; white-space: nowrap; letter-spacing: 0.02em; } .cat-beauty { background:#fdf2f8; color:#be185d; border:1px solid #f9a8d4; } .cat-tech { background:#eff6ff; color:#1d4ed8; border:1px solid #93c5fd; } .cat-fitness { background:#f0fdf4; color:#15803d; border:1px solid #86efac; } .cat-food { background:#fffbeb; color:#b45309; border:1px solid #fcd34d; } .cat-travel { background:#f5f3ff; color:#6d28d9; border:1px solid #c4b5fd; } .cat-fashion { background:#fff1f2; color:#be123c; border:1px solid #fda4af; } .cat-finance { background:#f0fdfa; color:#0f766e; border:1px solid #5eead4; } .cat-lifestyle{ background:#fff7ed; color:#c2410c; border:1px solid #fdba74; } .cat-home { background:#f8fafc; color:#475569; border:1px solid #cbd5e1; } /* Platform pill */ .platform-pill { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; font-family: 'IBM Plex Mono', monospace; background: #f0f9ff; color: #0369a1; border: 1px solid #bae6fd; white-space: nowrap; } .platform-pill.tiktok { background: #fdf4ff; color: #7e22ce; border-color: #e9d5ff; } .platform-pill.youtube { background: #fff1f2; color: #be123c; border-color: #fda4af; } /* Value */ .value-cell { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; font-weight: 500; color: var(--green); white-space: nowrap; } /* Date */ .date-cell { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--muted); } /* ── INLINE SUBSCRIBE BANNER ── */ .subscribe-row td { padding: 0 !important; border-right: none !important; } .inline-subscribe { background: linear-gradient(135deg, #fff8f5, #fff0e8); border-top: 1.5px solid rgba(232,87,26,0.18); border-bottom: 1.5px solid rgba(232,87,26,0.18); padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .inline-sub-left { display: flex; align-items: center; gap: 14px; } .inline-sub-icon { font-size: 26px; line-height: 1; } .inline-sub-text h4 { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; margin-bottom: 2px; } .inline-sub-text p { font-size: 12.5px; color: var(--text-mid); } .inline-sub-form { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .inline-input { background: #fff; border: 1.5px solid var(--border); border-radius: 7px; padding: 9px 14px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; color: var(--text); outline: none; width: 220px; transition: border-color 0.18s; } .inline-input:focus { border-color: var(--orange); } .inline-input::placeholder { color: var(--muted); } .inline-btn { background: var(--orange); color: #fff; border: none; border-radius: 7px; padding: 9px 18px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 13px; cursor: pointer; transition: background 0.15s; white-space: nowrap; } .inline-btn:hover { background: #d14a14; } /* ── SHEET FOOTER ── */ .sheet-footer { background: var(--bg-panel); border-top: 1.5px solid var(--border); padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); font-family: 'IBM Plex Mono', monospace; } .page-controls { display: flex; gap: 4px; } .page-btn { background: var(--bg-white); border: 1.5px solid var(--border); border-radius: 5px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--text-mid); transition: all 0.15s; text-decoration: none; } .page-btn:hover, .page-btn.active { border-color: var(--orange); color: var(--orange); background: var(--orange-light); } /* ── ABOUT ── */ .about-section { max-width: 1280px; margin: 32px auto; padding: 0 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .about-card { background: var(--bg-white); border: 1.5px solid var(--border); border-radius: 10px; padding: 24px; } .about-icon { width: 36px; height: 36px; background: var(--orange-light); border: 1.5px solid rgba(232,87,26,0.2); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; margin-bottom: 14px; } .about-card h4 { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; margin-bottom: 8px; } .about-card p { font-size: 13px; color: var(--text-mid); line-height: 1.65; } .about-card a { color: var(--orange); text-decoration: none; font-weight: 600; } .about-card a:hover { text-decoration: underline; } /* ── FOOTER ── */ footer { background: var(--bg-white); border-top: 1.5px solid var(--border); padding: 20px 40px; display: flex; align-items: center; justify-content: space-between; margin-top: 20px; } .footer-brand { font-weight: 700; font-size: 14px; letter-spacing: -0.02em; } .footer-brand span { color: var(--orange); } .footer-links { display: flex; gap: 24px; } .footer-links a { color: var(--muted); text-decoration: none; font-size: 13px; transition: color 0.15s; } .footer-links a:hover { color: var(--text); } .footer-copy { font-size: 12px; color: var(--muted); font-family: 'IBM Plex Mono', monospace; } /* ── TOAST ── */ .toast { position: fixed; bottom: 28px; right: 28px; background: #fff; border: 1.5px solid var(--orange); border-radius: 10px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.1); transform: translateY(70px); opacity: 0; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 999; max-width: 300px; } .toast.show { transform: translateY(0); opacity: 1; } .toast-msg { font-size: 13px; line-height: 1.5; } .toast-msg strong { color: var(--orange); font-weight: 700; } /* ── RESPONSIVE ── */ @media (max-width: 960px) { .hero-inner { grid-template-columns: 1fr; gap: 32px; } .hero-band, .content-area, header, footer { padding-left: 20px; padding-right: 20px; } .hero-band { padding-top: 32px; padding-bottom: 32px; } footer { flex-direction: column; gap: 12px; text-align: center; height: auto; padding: 16px 20px; } .about-section { grid-template-columns: 1fr; padding: 0 20px; } .inline-subscribe { flex-direction: column; align-items: flex-start; gap: 16px; } .inline-sub-form { width: 100%; } .inline-input { flex: 1; width: auto; } .stats-row { flex-wrap: wrap; } } @keyframes fadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } } .hero-band { animation: fadeUp 0.5s ease both; } .content-area { animation: fadeUp 0.5s 0.1s ease both; } .about-section { animation: fadeUp 0.5s 0.2s ease both; }