@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;500;600&display=swap');
:root {
--bg-primary: #0a1628;
--bg-secondary: #0f1d32;
--bg-card: #162640;
--border: #1e3050;
--border-accent: #c9a962;
--text-primary: #ffffff;
--text-secondary: #e5e7eb;
--text-muted: #a1a1aa;
--accent: #c9a962;
--accent-dark: #a8894e;
--accent-light: #e8c97a;
--danger: #ef4444;
--success: #22c55e;
--warning: #f59e0b;
--font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
--font-body: 'Inter', system-ui, sans-serif;
--font-mono: 'Courier New', monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background-color: var(--bg-primary);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
color: var(--text-primary);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
min-height: 100vh;
border-top: 3px solid var(--accent);
}
h1, h2, h3, h4 { font-family: var(--font-heading); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-light); text-decoration: underline; }
/* Layout */
.site-header {
background-color: var(--bg-secondary);
border-bottom: 2px solid var(--accent);
padding: 0 24px;
}
.site-header-inner {
max-width: 900px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 0;
}
.site-logo { font-size: 24px; font-weight: bold; letter-spacing: 0px; color: var(--text-primary); font-family: var(--font-heading); }
.site-logo span { color: var(--accent); }
.site-logo-gavel { font-size: 1.4em; vertical-align: middle; position: relative; top: -5px; color: inherit; }
.site-tagline { font-size: 14px; color: var(--text-muted); font-style: italic; margin-top: -5px; font-family: var(--font-body); }
.site-logo-group { display: flex; align-items: center; gap: 14px; }
.header-reggie { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--accent); object-fit: cover; object-position: center top; flex-shrink: 0; margin-top: 8px; }
.site-nav { display: flex; gap: 24px; align-items: center; }
.site-nav a { font-family: var(--font-body); color: var(--text-secondary); letter-spacing: 1px; text-transform: uppercase; font-size: 14px; }
.site-nav a:hover { color: var(--accent); text-decoration: none; }
.site-nav-cta {
background-color: var(--accent);
color: #0a1628 !important;
padding: 7px 16px;
border-radius: 2px;
font-weight: 700;
letter-spacing: 1px;
font-size: 13px !important;
box-shadow: 0 2px 0 #7a5e20, 0 4px 12px rgba(0,0,0,0.3);
transition: background-color 0.15s, transform 0.12s, box-shadow 0.12s !important;
display: inline-block;
}
.site-nav-cta:hover {
background-color: var(--accent-light) !important;
color: #0a1628 !important;
transform: translateY(1px);
box-shadow: 0 1px 0 #7a5e20, 0 2px 8px rgba(0,0,0,0.3) !important;
}
.container { max-width: 900px; margin: 0 auto; padding: 0 24px; }
.page-content { padding: 48px 24px; max-width: 900px; margin: 0 auto; }
/* Cards */
.card {
background-color: var(--bg-card);
border: 1px solid rgba(201,169,98,0.2);
box-shadow: 0 4px 24px rgba(0,0,0,0.4);
padding: 28px;
margin-bottom: 24px;
}
.card-header {
border-bottom: 1px solid var(--border);
padding-bottom: 16px;
margin-bottom: 20px;
}
/* Forms */
.form-group { margin-bottom: 20px; }
label { display: block; font-size: 14px; color: var(--text-muted); font-family: var(--font-body); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="time"], input[type="number"], input[type="url"], select, textarea {
width: 100%;
background-color: #07101e;
border: 1px solid var(--border);
color: var(--text-primary);
padding: 10px 14px;
font-size: 16px;
font-family: var(--font-body);
border-radius: 2px;
outline: none;
transition: border-color 0.2s;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea { resize: vertical; min-height: 120px; }
select { cursor: pointer; }
select option { background-color: var(--bg-card); }
.char-counter { font-size: 13px; color: var(--text-muted); text-align: right; margin-top: 4px; font-family: var(--font-body); }
.char-counter.near-limit { color: var(--warning); }
.char-counter.at-limit { color: var(--danger); }
.checkbox-group { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.checkbox-group input[type="checkbox"] { width: auto; margin-top: 3px; accent-color: var(--accent); }
.checkbox-group label { text-transform: none; letter-spacing: 0; font-size: 16px; color: var(--text-secondary); }
/* Buttons */
.btn {
display: inline-block;
padding: 10px 22px;
font-size: 15px;
font-family: var(--font-body);
letter-spacing: 1.5px;
text-transform: uppercase;
cursor: pointer;
border: none;
border-radius: 2px;
transition: background-color 0.2s, color 0.2s;
text-decoration: none;
font-weight: 600;
}
.btn-primary { background-color: var(--accent); color: #0a1628; font-weight: bold; }
.btn-primary:hover { background-color: var(--accent-light); color: #0a1628; text-decoration: none; }
.btn-secondary { background-color: #0a1628; border: 2px solid var(--accent); color: var(--accent); }
.btn-secondary:hover { background-color: var(--accent); color: #0a1628; text-decoration: none; }
.btn-danger { background-color: var(--danger); color: #fff; }
.btn-danger:hover { background-color: #a93226; text-decoration: none; }
.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-full { width: 100%; text-align: center; }
/* Alerts */
.alert { padding: 14px 18px; margin-bottom: 20px; font-family: var(--font-body); font-size: 16px; border-radius: 2px; }
.alert-success { background-color: rgba(39, 174, 96, 0.1); border: 1px solid var(--success); color: var(--success); }
.alert-error { background-color: rgba(192, 57, 43, 0.1); border: 1px solid var(--danger); color: var(--danger); }
.alert-warning { background-color: rgba(230, 126, 34, 0.1); border: 1px solid var(--warning); color: var(--warning); }
.alert-info { background-color: rgba(201, 148, 42, 0.1); border: 1px solid var(--accent); color: var(--accent); }
/* Badges */
.badge {
display: inline-block;
padding: 2px 8px;
font-size: 11px;
font-family: var(--font-body);
letter-spacing: 1px;
text-transform: uppercase;
font-weight: bold;
border-radius: 2px;
}
.badge-category { background-color: var(--accent); color: #0a1628; }
.badge-user { background-color: #2980b9; color: #fff; }
.badge-admin { background-color: #8e44ad; color: #fff; }
.badge-ai { background-color: #16a085; color: #fff; }
.badge-seeded { background-color: #555; color: #fff; }
.badge-pending { background-color: #555; color: #fff; }
.badge-approved { background-color: #27ae60; color: #fff; }
.badge-sent { background-color: var(--accent); color: #0a1628; }
.badge-rejected { background-color: var(--danger); color: #fff; }
.badge-flagged { background-color: var(--warning); color: #000; }
/* Confession display */
.confession-number { font-size: 17px; color: var(--accent); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; font-family: var(--font-body); font-weight: 700; }
.confession-text {
background-color: rgba(0,0,0,0.3);
border-left: 3px solid var(--accent);
padding: 20px;
font-style: italic;
line-height: 1.8;
color: #f5f5f5;
font-family: var(--font-body);
font-size: 20px;
}
.ruling-header { font-size: 30px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; color: var(--text-primary); font-family: var(--font-body); line-height: 1.2; }
.verdict-text { font-size: 18px; line-height: 1.8; color: var(--text-secondary); margin-bottom: 16px; font-style: italic; }
.scandal-rating { display: inline-block; background-color: var(--accent); color: #0a1628; padding: 6px 14px; font-weight: bold; font-size: 14px; font-family: var(--font-body); margin-right: 12px; margin-bottom: 8px; border-radius: 2px; }
.verdict-label { display: inline-block; border: 1px solid var(--accent); color: var(--accent); padding: 6px 14px; font-size: 14px; font-style: italic; font-family: var(--font-body); border-radius: 2px; margin-bottom: 8px; }
.divider { border: none; border-top: 1px solid rgba(201,169,98,0.4); margin: 24px 0; }
.expand-btn { display: none; background: none; border: none; padding: 6px 0; color: var(--accent); font-size: 15px; font-family: var(--font-body); font-weight: 600; letter-spacing: 0.5px; cursor: pointer; }
@keyframes reggiespin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.reggie-spinner { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--accent); object-fit: cover; object-position: center top; animation: reggiespin 1.2s linear infinite; display: block; margin: 0 auto 16px; }
/* Footer */
.site-footer {
background-color: var(--bg-secondary);
border-top: 1px solid rgba(201,169,98,0.3);
padding: 40px 24px;
margin-top: 64px;
text-align: center;
}
.site-footer p { font-size: 14px; color: var(--text-muted); font-family: var(--font-body); margin-bottom: 8px; }
.site-footer a { color: var(--text-muted); font-size: 14px; }
.site-footer a:hover { color: var(--accent); }
/* Admin */
.admin-header { background-color: #141210; border-bottom: 1px solid var(--border); padding: 12px 24px; }
.admin-header-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.admin-logo { font-size: 16px; font-weight: bold; color: var(--accent); font-family: var(--font-body); letter-spacing: 2px; }
.status-bar {
background-color: var(--bg-secondary);
border-bottom: 1px solid var(--border);
padding: 12px 24px;
font-family: var(--font-body);
font-size: 15px;
}
.status-bar-inner { max-width: 1200px; margin: 0 auto; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.status-item { color: var(--text-secondary); }
.status-item strong { color: var(--text-primary); }
.status-mode { font-size: 12px; font-weight: bold; letter-spacing: 1px; padding: 3px 8px; border-radius: 2px; }
.status-mode.manual { background-color: #555; color: #fff; }
.status-mode.auto { background-color: var(--success); color: #fff; }
.status-sent { color: var(--success); font-weight: bold; }
.status-not-sent { color: var(--text-muted); }
.low-queue-alert { background-color: rgba(192,57,43,0.15); border: 1px solid var(--danger); color: var(--danger); padding: 8px 14px; font-size: 15px; font-family: var(--font-body); margin-bottom: 16px; border-radius: 2px; }
.admin-shell { display: flex; min-height: calc(100vh - 94px); }
.admin-sidebar { width: 190px; min-width: 190px; background-color: #0d1a2e; border-right: 1px solid var(--border); padding: 20px 0; flex-shrink: 0; display: flex; flex-direction: column; }
.admin-nav-link { display: block; padding: 10px 20px; color: #ffffff; text-decoration: none; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; font-family: var(--font-body); border-left: 2px solid transparent; transition: color 0.12s, background-color 0.12s; }
.admin-nav-link:hover { color: var(--accent); text-decoration: none; background-color: rgba(201,169,98,0.04); }
.admin-nav-link.active { color: var(--accent); border-left-color: var(--accent); background-color: rgba(201,169,98,0.07); }
.admin-nav-link--queue { display: flex; align-items: center; justify-content: space-between; }
.queue-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background-color: #e53e3e; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0; line-height: 1; font-family: Arial, sans-serif; }
.admin-nav-link--system { color: #888; }
.admin-nav-link--system:hover { color: #bbb; }
.admin-nav-link--system.active { color: var(--text-muted); border-left-color: #555; }
.admin-nav-divider { height: 1px; background: var(--border); margin: 12px 20px; }
.admin-main { flex: 1; min-width: 0; overflow-x: auto; }
.admin-container { padding: 24px; }
/* Queue cards (used by contests, etc.) */
.queue-card { background-color: var(--bg-card); border: 1px solid rgba(201,169,98,0.15); box-shadow: 0 2px 12px rgba(0,0,0,0.3); margin-bottom: 24px; }
.queue-card-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.queue-card-body { padding: 20px; }
.queue-card-actions { padding: 16px 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; flex-wrap: wrap; }
/* Inbox-style queue rows */
.inbox-list { border: 1px solid rgba(201,169,98,0.15); background-color: var(--bg-card); box-shadow: 0 2px 12px rgba(0,0,0,0.3); }
.inbox-row { border-bottom: 1px solid rgba(255,255,255,0.04); cursor: pointer; transition: background-color 0.12s; }
.inbox-row:last-child { border-bottom: none; }
.inbox-row:hover { background-color: rgba(201,169,98,0.04); }
.inbox-row--flagged { opacity: 0.55; }
.inbox-row--flagged:hover { opacity: 0.75; }
.inbox-row-summary { display: flex; align-items: center; gap: 10px; padding: 10px 16px; min-height: 44px; }
.inbox-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.inbox-dot--pending { background-color: var(--text-muted); }
.inbox-dot--approved { background-color: var(--success); }
.inbox-dot--flagged { background-color: var(--danger); }
.inbox-dot--sent { background-color: var(--accent); }
.inbox-dot--rejected { background-color: var(--danger); }
.inbox-id { font-size: 13px; font-family: var(--font-mono); color: var(--text-muted); white-space: nowrap; min-width: 48px; }
.inbox-badge { font-size: 10px !important; padding: 1px 6px !important; flex-shrink: 0; }
.inbox-snippet { flex: 1; font-size: 15px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; min-width: 0; position: relative; -webkit-mask-image: linear-gradient(to right, #000 75%, transparent 100%); mask-image: linear-gradient(to right, #000 75%, transparent 100%); }
.inbox-rating { font-size: 13px; font-family: var(--font-body); font-weight: 700; color: var(--accent); background: rgba(201,169,98,0.12); padding: 2px 8px; border-radius: 2px; white-space: nowrap; flex-shrink: 0; }
.inbox-time { font-size: 13px; color: var(--text-muted); font-family: var(--font-body); white-space: nowrap; flex-shrink: 0; min-width: 50px; text-align: right; }
.inbox-expanded { display: none; padding: 0 16px 16px 36px; }
.inbox-expanded--open { display: block; }
.inbox-confession-text { background: rgba(0,0,0,0.25); border-left: 3px solid var(--accent); padding: 16px; font-style: italic; line-height: 1.7; color: #f0f0f0; font-family: var(--font-body); font-size: 17px; margin-bottom: 16px; }
.inbox-verdict { border-top: 1px solid var(--border); padding-top: 14px; }
.inbox-verdict-header { font-size: 12px; color: var(--text-muted); font-family: var(--font-body); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 8px; }
.inbox-ruling-header { font-size: 16px; font-weight: 700; color: var(--text-primary); font-family: var(--font-body); margin-bottom: 6px; }
.inbox-verdict-text { font-size: 15px; line-height: 1.7; color: var(--text-secondary); font-style: italic; margin-bottom: 10px; }
.inbox-verdict-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.inbox-actions { margin-top: 14px; display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.inbox-btn-flag { border: 1px solid var(--warning); color: var(--warning); background: transparent; }
.subject-lines { margin: 16px 0; }
.subject-option { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--border); margin-bottom: 6px; font-family: var(--font-body); font-size: 15px; cursor: pointer; border-radius: 2px; }
.subject-option:hover { border-color: var(--accent); }
.subject-option input { width: auto; accent-color: var(--accent); }
.subject-option label { cursor: pointer; color: var(--text-primary); }
/* Tables */
.data-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 15px; }
.data-table th { text-align: left; padding: 10px 12px; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.data-table td { padding: 12px; border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: middle; }
.data-table tr:hover td { background-color: rgba(201,169,98,0.03); }
.data-table .new-row td { background-color: rgba(201,169,98,0.05); }
/* Pagination */
.pagination { display: flex; gap: 8px; align-items: center; margin-top: 24px; font-family: var(--font-body); }
.pagination a, .pagination span { padding: 6px 12px; border: 1px solid var(--border); font-size: 15px; color: var(--text-secondary); border-radius: 2px; }
.pagination a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.pagination .current { background-color: var(--accent); color: #0a1628; border-color: var(--accent); font-weight: bold; }
/* Send mode toggle */
.mode-toggle-section { max-width: 600px; }
.mode-display { font-size: 36px; font-weight: bold; letter-spacing: 4px; margin: 24px 0; font-family: var(--font-body); }
.mode-display.manual { color: var(--text-muted); }
.mode-display.auto { color: var(--success); }
/* Progress bar */
.progress-container { margin: 20px 0; }
.progress-bar { height: 8px; background-color: var(--border); position: relative; border-radius: 2px; }
.progress-fill { height: 100%; background-color: var(--accent); transition: width 0.3s; border-radius: 2px; }
.progress-label { font-size: 15px; color: var(--text-secondary); font-family: var(--font-body); margin-top: 8px; }
/* Scan rating display */
.rating-big { font-size: 42px; font-weight: bold; color: var(--accent); font-family: var(--font-body); }
/* Archive */
.archive-entry { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(201,169,98,0.12); align-items: flex-start; }
.archive-num { font-size: 13px; color: var(--accent); font-family: var(--font-body); letter-spacing: 1px; white-space: nowrap; margin-top: 3px; }
.archive-info { flex: 1; }
.archive-title { font-size: 17px; color: var(--text-primary); margin-bottom: 4px; font-family: var(--font-heading); }
.archive-meta { font-size: 14px; color: var(--text-muted); font-family: var(--font-body); }
/* Subscribe form */
.subscribe-section { max-width: 500px; }
.sub-count { font-size: 16px; color: var(--text-secondary); font-family: var(--font-body); margin-bottom: 24px; }
.sub-count strong { color: var(--accent); }
/* Confession web page */
.confession-page { max-width: 780px; }
.confession-page-header { margin-bottom: 32px; }
.social-share { margin: 32px 0; }
.share-label { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); font-family: var(--font-body); margin-bottom: 12px; }
.share-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.share-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 16px;
font-size: 14px;
font-family: var(--font-body);
font-weight: 600;
letter-spacing: 0.5px;
cursor: pointer;
text-decoration: none;
border-radius: 3px;
border: none;
transition: transform 0.12s ease, opacity 0.12s ease, box-shadow 0.12s ease;
white-space: nowrap;
}
.share-btn:hover { opacity: 0.88; transform: translateY(-1px); text-decoration: none; }
.share-btn:active { transform: translateY(0); opacity: 1; }
.share-x { background: #1a1a1a; color: #ffffff; box-shadow: 0 2px 0 #000, 0 4px 10px rgba(0,0,0,0.35); }
.share-facebook { background: #1877f2; color: #ffffff; box-shadow: 0 2px 0 #0d5bbd, 0 4px 10px rgba(24,119,242,0.3); }
.share-linkedin { background: #0077b5; color: #ffffff; box-shadow: 0 2px 0 #005886, 0 4px 10px rgba(0,119,181,0.3); }
.share-email { background: var(--accent); color: #0a1628; box-shadow: 0 2px 0 #7a5e20, 0 4px 10px rgba(201,169,98,0.3); }
.share-copy { background: var(--bg-card); color: var(--text-secondary); border: 1px solid rgba(201,169,98,0.3); box-shadow: 0 2px 0 rgba(0,0,0,0.3); }
.share-copied { background: #1a3a1a !important; color: #4ade80 !important; border-color: #4ade80 !important; }
/* AdSense placeholders */
.ad-placeholder { border: 1px dashed rgba(201,169,98,0.3); padding: 20px; text-align: center; color: var(--text-muted); font-size: 14px; font-family: var(--font-body); margin: 24px 0; border-radius: 2px; }
.ad-slot { margin: 24px 0; min-height: 90px; display: block; }
/* Sponsor block in admin */
.sponsor-preview { border: 1px solid var(--accent); padding: 16px; background-color: rgba(201,169,98,0.05); margin: 16px 0; border-radius: 2px; }
/* Reggie images */
.reggie-hero {
width: 100%;
max-width: 480px;
display: block;
margin: 0 auto 40px;
border: 1px solid rgba(201,169,98,0.3);
box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.reggie-thumb {
width: 72px;
height: 72px;
border-radius: 50%;
border: 3px solid var(--accent);
object-fit: cover;
object-position: center top;
flex-shrink: 0;
}
/* ===== HOMEPAGE ===== */
.hp-hero {
text-align: center;
padding: 56px 24px 28px;
background: radial-gradient(ellipse 900px 500px at 50% -60px, #1a3060 0%, transparent 70%);
position: relative;
}
.hp-logo {
font-size: 52px;
font-weight: bold;
letter-spacing: 2px;
color: #ffffff;
margin-bottom: 14px;
font-family: var(--font-heading);
text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
.hp-logo span { color: var(--accent-light); }
.hp-logo-gavel { font-size: 1.4em; vertical-align: middle; position: relative; top: -12px; color: var(--accent-light); margin: 0 -10px; }
.hp-tagline {
font-size: 18px;
color: #d1d5db;
font-style: italic;
letter-spacing: 1px;
font-family: var(--font-body);
}
.hp-section {
max-width: 720px;
margin: 0 auto;
padding: 40px 24px;
}
.hp-divider {
max-width: 680px;
margin: 0 auto;
border: none;
border-top: 1px solid rgba(201,169,98,0.25);
}
.hp-social-proof {
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
}
.hp-social-proof p {
font-size: 18px;
color: var(--text-secondary);
font-family: var(--font-body);
}
.hp-social-proof strong {
color: var(--accent-light);
font-size: 19px;
}
/* Subscribe panel — card that lifts off the page */
.hp-subscribe-block {
text-align: center;
}
.hp-form-panel {
background: linear-gradient(160deg, #0f2040 0%, #162640 60%, #111d33 100%);
border: 1px solid rgba(201,169,98,0.35);
border-radius: 4px;
box-shadow:
0 0 0 1px rgba(255,255,255,0.04) inset,
0 1px 0 rgba(201,169,98,0.2) inset,
0 24px 64px rgba(0,0,0,0.55),
0 0 48px rgba(201,169,98,0.08);
padding: 48px 40px 40px;
position: relative;
overflow: hidden;
max-width: 560px;
margin: 0 auto;
}
.hp-form-panel::before {
content: '';
position: absolute;
top: 0; left: 10%; right: 10%;
height: 2px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.hp-form-headline {
font-size: 28px;
font-weight: bold;
margin-bottom: 28px;
line-height: 1.3;
font-family: var(--font-heading);
color: #ffffff;
}
.hp-form {
max-width: 480px;
margin: 0 auto;
}
.hp-form-row {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
/* Homepage form inputs — clearly visible, inset 3D */
.hp-form-row input[type="text"],
.hp-form-row input[type="email"] {
flex: 1;
padding: 14px 16px;
font-size: 16px;
background-color: #07101e;
border: 1px solid rgba(201,169,98,0.55);
border-radius: 3px;
color: #ffffff;
font-family: var(--font-body);
box-shadow: inset 0 2px 6px rgba(0,0,0,0.55), inset 0 1px 2px rgba(0,0,0,0.4);
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
width: auto;
}
.hp-form-row input[type="text"]::placeholder,
.hp-form-row input[type="email"]::placeholder {
color: #b0b8c4;
}
.hp-form-row input[type="text"]:focus,
.hp-form-row input[type="email"]:focus {
border-color: var(--accent-light);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 0 0 3px rgba(201,169,98,0.18);
}
/* 3D raised CTA button */
.hp-cta-btn {
padding: 16px 28px !important;
font-size: 15px !important;
letter-spacing: 2px;
box-shadow: 0 5px 0 #7a5e20, 0 8px 20px rgba(0,0,0,0.45) !important;
transform: translateY(0);
transition: transform 0.12s ease, box-shadow 0.12s ease !important;
position: relative;
}
.hp-cta-btn:hover {
box-shadow: 0 3px 0 #7a5e20, 0 5px 14px rgba(0,0,0,0.4) !important;
transform: translateY(2px);
text-decoration: none;
}
.hp-cta-btn:active {
box-shadow: 0 1px 0 #7a5e20, 0 2px 6px rgba(0,0,0,0.35) !important;
transform: translateY(4px);
}
.hp-disclaimer {
font-size: 15px;
color: var(--text-muted);
font-family: var(--font-body);
margin-top: 14px;
}
.hp-what-you-get {
text-align: center;
padding-top: 48px;
padding-bottom: 48px;
}
.hp-what-you-get p {
font-size: 18px;
color: var(--text-secondary);
margin-bottom: 16px;
line-height: 1.7;
font-family: var(--font-body);
}
.hp-what-you-get p:last-child { margin-bottom: 0; }
.hp-docket-label {
font-size: 13px;
font-family: var(--font-body);
letter-spacing: 4px;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 20px;
text-align: center;
font-weight: 600;
}
/* Confession box — 3D depth, gold top accent */
.hp-confession-box {
background: linear-gradient(170deg, #1a2d50 0%, #162640 50%, #111d33 100%);
border: 1px solid rgba(201,169,98,0.2);
border-top: 3px solid var(--accent);
border-radius: 3px;
box-shadow:
0 2px 0 rgba(201,169,98,0.25),
0 24px 60px rgba(0,0,0,0.55),
inset 0 1px 0 rgba(255,255,255,0.04);
padding: 40px 36px;
position: relative;
}
.hp-confession-box::before {
content: '\201C';
position: absolute;
top: 28px; right: 32px;
font-size: 120px;
line-height: 1;
font-family: var(--font-heading);
color: rgba(201,169,98,0.08);
pointer-events: none;
}
.hp-confession-num {
font-size: 17px;
font-family: var(--font-body);
letter-spacing: 2px;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 20px;
font-weight: 700;
}
.hp-confession-text {
font-size: 20px;
line-height: 2;
color: #ffffff;
font-style: italic;
font-family: var(--font-body);
border: none;
padding: 0;
margin: 0 0 28px 0;
position: relative;
z-index: 1;
}
.hp-ruling {
border-top: 1px solid rgba(201,169,98,0.3);
padding-top: 24px;
margin-top: 8px;
}
.hp-judge-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.hp-judge-label {
font-size: 13px;
font-family: var(--font-body);
letter-spacing: 2px;
text-transform: uppercase;
color: var(--accent);
font-weight: 600;
}
.hp-ruling-text {
font-size: 18px;
line-height: 1.9;
color: #d1d5db;
font-style: italic;
font-family: var(--font-body);
margin-bottom: 20px;
}
.hp-verdict-meta {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
/* ── Homepage docket rank labels ── */
.hp-docket-section { display: flex; flex-direction: column; gap: 0; }
.hp-docket-rank-label {
font-size: 13px;
font-family: var(--font-body);
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 12px;
margin-top: 36px;
}
.hp-docket-rank-label:first-of-type { margin-top: 0; }
.hp-rank-1 { color: #f0c040; }
.hp-rank-2 { color: #b0b8c8; }
.hp-rank-3 { color: #a07850; }
/* ── Expandable confessions (#2 and #3) ── */
.hp-confession-expandable { cursor: pointer; }
.hp-confession-expandable summary {
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
cursor: pointer;
outline: none;
}
.hp-confession-expandable summary::-webkit-details-marker { display: none; }
.hp-confession-expandable summary .hp-confession-text,
.hp-confession-expandable summary .hp-ruling { display: none; }
.hp-expand-preview {
font-size: 16px;
color: var(--text-secondary);
font-style: italic;
font-family: var(--font-body);
line-height: 1.7;
margin-top: 4px;
}
.hp-expand-toggle {
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--accent);
font-weight: 600;
font-family: var(--font-body);
margin-top: 4px;
}
.hp-confession-expandable .collapse-label { display: none; }
.hp-confession-expandable[open] .expand-label { display: none; }
.hp-confession-expandable[open] .collapse-label { display: inline; }
.hp-confession-expandable[open] .hp-expand-preview { display: none; }
/* ── No contest fallback ── */
.hp-no-contest {
text-align: center;
padding: 48px 36px;
}
.hp-no-contest-text {
font-size: 18px;
color: var(--text-secondary);
font-family: var(--font-body);
font-style: italic;
}
.hp-nudge { padding-top: 56px; padding-bottom: 56px; }
.hp-nudge-headline {
font-size: 28px;
font-weight: bold;
margin-bottom: 10px;
font-family: var(--font-heading);
color: #ffffff;
}
.hp-nudge-sub {
font-size: 18px;
color: var(--text-secondary);
margin-bottom: 28px;
font-family: var(--font-body);
}
.hp-meet-judge { text-align: center; padding-top: 56px; padding-bottom: 56px; }
.hp-section-headline {
font-size: 30px;
font-weight: bold;
margin-bottom: 28px;
font-family: var(--font-heading);
color: #ffffff;
}
.hp-bio {
max-width: 580px;
margin: 0 auto 32px;
text-align: left;
}
.hp-bio p {
font-size: 18px;
line-height: 1.8;
color: var(--text-secondary);
margin-bottom: 14px;
font-family: var(--font-body);
}
.hp-pull-quote {
font-size: 24px;
font-style: italic;
color: var(--accent-light);
line-height: 1.6;
max-width: 520px;
margin: 0 auto;
padding: 28px 32px;
border: 1px solid rgba(201,169,98,0.25);
background: linear-gradient(135deg, rgba(201,169,98,0.06) 0%, transparent 100%);
border-radius: 3px;
font-family: var(--font-heading);
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.hp-pull-quote span {
display: block;
font-size: 14px;
color: #b0b0b0;
margin-top: 12px;
font-style: normal;
font-family: var(--font-body);
letter-spacing: 1px;
}
.hp-submit-cta {
text-align: center;
padding-top: 56px;
padding-bottom: 56px;
}
.hp-submit-sub {
font-size: 18px;
color: var(--text-secondary);
margin-bottom: 28px;
font-family: var(--font-body);
}
.hp-submit-btn {
padding: 14px 40px !important;
font-size: 15px !important;
}
.hp-final-cta { padding-top: 64px; padding-bottom: 80px; text-align: center; }
.hp-final-headline {
font-size: 28px;
font-weight: bold;
margin-bottom: 8px;
line-height: 1.4;
font-family: var(--font-heading);
color: #ffffff;
}
.hp-final-sub {
font-size: 20px;
color: var(--text-secondary);
margin-bottom: 36px;
font-family: var(--font-heading);
font-style: italic;
}
.footer-tagline { font-size: 15px !important; color: var(--text-secondary) !important; margin-bottom: 12px !important; font-family: var(--font-body) !important; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin-bottom: 12px !important; }
.footer-nav a { font-size: 14px; color: var(--text-muted); font-family: var(--font-body); white-space: nowrap; }
.footer-nav a:hover { color: var(--accent); text-decoration: none; }
.footer-legal { font-size: 13px !important; color: var(--text-muted) !important; line-height: 1.7 !important; font-family: var(--font-body) !important; }
.footer-reggie { font-size: 13px !important; color: #b0b8c4 !important; font-style: italic !important; margin-top: 14px !important; font-family: var(--font-body) !important; }
/* Responsive */
@media (max-width: 640px) {
.hp-logo { display: none; }
.site-header-inner { flex-direction: column; gap: 12px; text-align: center; }
.site-logo { font-size: 18px; letter-spacing: -1px; }
.site-logo-group { justify-content: center; }
.site-nav { flex-wrap: wrap; justify-content: center; gap: 16px; }
.site-nav a { font-size: 15px; }
.status-bar-inner { gap: 8px 14px; }
.queue-card-actions { flex-direction: column; }
.hp-hero { padding-top: 36px; }
.site-nav-cta { display: none; }
.arch-col-rating, .arch-col-date, .arch-col-link,
.arch-col-hm, .arch-col-lam { display: none; }
.arch-row { transition: background-color 0.12s; }
.arch-row:active { background-color: rgba(201,169,98,0.08); }
.hp-tagline { font-size: 17px; }
.hp-form-panel { padding: 32px 24px 28px; }
.hp-form-headline { font-size: 22px; }
.hp-form-row { flex-direction: column; gap: 10px; }
.hp-disclaimer { font-size: 15px; }
.hp-social-proof p { font-size: 18px; }
.hp-what-you-get p { font-size: 17px; }
.hp-confession-box { padding: 28px 20px; }
.hp-confession-box::before { font-size: 80px; top: 16px; right: 16px; }
.hp-confession-num { font-size: 15px; }
.hp-judge-label { font-size: 15px; }
.hp-section-headline { font-size: 24px; }
.hp-pull-quote { font-size: 19px; padding: 20px 24px; }
.hp-final-headline { font-size: 22px; }
.hp-nudge-headline { font-size: 22px; }
.footer-nav { gap: 4px 16px; }
.footer-nav a { font-size: 15px; padding: 4px 0; }
.reggie-hero { max-width: 100%; }
.confession-text { font-size: 20px; }
.verdict-text { font-size: 18px; }
.ruling-header { font-size: 22px; }
.confession-number { font-size: 16px; }
.scandal-rating { font-size: 15px; }
.verdict-label { font-size: 15px; }
.btn { font-size: 15px; }
p { font-size: 17px; }
.confession-text.collapsible:not(.expanded) {
max-height: 200px;
overflow: hidden;
position: relative;
}
.confession-text.collapsible:not(.expanded)::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 70px;
background: linear-gradient(transparent, #071120);
pointer-events: none;
}
.verdict-text.collapsible:not(.expanded) {
max-height: 190px;
overflow: hidden;
position: relative;
}
.verdict-text.collapsible:not(.expanded)::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 70px;
background: linear-gradient(transparent, #0a1628);
pointer-events: none;
}
.expand-btn { display: block; }
}
/* ===== ADMIN MOBILE ELEMENTS (hidden on desktop) ===== */
/* Hamburger button — three-bar icon in admin header */
.admin-hamburger {
display: none;
background: none;
border: 1px solid rgba(201,169,98,0.35);
border-radius: 4px;
width: 38px;
height: 38px;
padding: 8px;
cursor: pointer;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
flex-shrink: 0;
}
.admin-hamburger span {
display: block;
width: 18px;
height: 2px;
background: var(--accent);
border-radius: 1px;
}
/* Sidebar backdrop overlay */
.admin-sidebar-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
z-index: 1099;
}
.admin-sidebar-backdrop.open { display: block; }
/* Close button inside sidebar (mobile only) */
.admin-sidebar-close {
display: none;
background: none;
border: none;
color: var(--text-muted);
font-size: 22px;
line-height: 1;
cursor: pointer;
padding: 14px 20px 10px;
text-align: right;
width: 100%;
}
.admin-sidebar-close:hover { color: var(--text-primary); }
/* Logo segments — short version hidden on desktop */
.admin-logo-short { display: none; }
.admin-logo-long { display: inline; }
/* "← Public Site" link — full text on desktop */
.admin-publink { color: #666; font-size: 12px; white-space: nowrap; }
/* ===== ADMIN RESPONSIVE — 768px ===== */
@media (max-width: 768px) {
/* Show hamburger */
.admin-hamburger { display: flex; }
/* Sidebar becomes a fixed drawer */
.admin-sidebar {
position: fixed;
top: 0;
left: -260px;
bottom: 0;
z-index: 1100;
width: 240px !important;
min-width: 240px !important;
padding-top: 0;
transition: left 0.25s ease;
overflow-y: auto;
box-shadow: 4px 0 32px rgba(0,0,0,0.6);
}
.admin-sidebar.open { left: 0; }
/* Show close button */
.admin-sidebar-close { display: block; }
/* Shell stacks vertically */
.admin-shell { display: block; min-height: unset; }
.admin-main { width: 100%; overflow-x: hidden; }
/* Reduced container padding */
.admin-container { padding: 14px 14px 32px; }
/* Header */
.admin-header { padding: 10px 14px; }
.admin-header-inner { gap: 10px; }
.admin-logo { font-size: 13px; letter-spacing: 1px; }
.admin-logo-short { display: inline; }
.admin-logo-long { display: none; }
.admin-publink { display: none; }
/* Status bar */
.status-bar { padding: 10px 14px; }
.status-bar-inner { gap: 6px 12px; font-size: 13px; flex-wrap: wrap; }
.status-item { font-size: 13px; }
/* Queue card actions: full-width stacked buttons */
.queue-card-actions { flex-direction: column; gap: 8px; }
.queue-card-actions .btn { width: 100%; text-align: center; display: block; }
.queue-card-header { padding: 12px 14px; }
.queue-card-body { padding: 14px; }
/* Inbox rows — give snippet maximum space */
.inbox-row-summary { padding: 10px 12px; gap: 7px; }
.inbox-id { min-width: 36px; font-size: 12px; }
.inbox-time { min-width: 40px; font-size: 12px; }
.inbox-rating { display: none; }
.inbox-expanded { padding: 0 12px 14px 12px; }
.inbox-confession-text { font-size: 15px; padding: 12px; }
.inbox-actions { flex-wrap: wrap; gap: 6px; }
.inbox-actions .btn { flex: 1; min-width: 120px; text-align: center; }
/* Mode toggle page */
.mode-toggle-section { max-width: 100%; }
.mode-display { font-size: 26px; }
/* Table responsive wrapper */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -14px; padding: 0 14px; }
.data-table { min-width: 520px; font-size: 14px; }
/* Subject line options */
.subject-option { font-size: 14px; padding: 8px; }
/* Sponsor preview */
.sponsor-preview { padding: 12px; }
/* Send settings: test form stacks */
.send-test-row { flex-direction: column !important; align-items: stretch !important; }
.send-test-row > * { width: 100% !important; }
/* Card padding */
.card { padding: 18px 14px; }
/* Archive entries */
.archive-entry { gap: 10px; }
.archive-title { font-size: 15px; }
}
/* ===== ADMIN RESPONSIVE — 480px ===== */
@media (max-width: 480px) {
/* Admin header: "AC — ADMIN" at very small sizes */
.admin-logo { font-size: 12px; }
/* Stat cards in analytics: 2 columns */
.stat-grid-2 { grid-template-columns: 1fr 1fr !important; }
/* Inbox: hide source badge to give snippet more room */
.inbox-badge-source { display: none; }
/* Buttons: allow full-width in forms */
.queue-card-actions .btn { font-size: 13px; }
}
/* ===== PUBLIC ARCHIVE — MOBILE CARD LAYOUT ===== */
@media (max-width: 640px) {
/* Reduce page padding on mobile for more reading room */
.page-content { padding: 32px 16px; }
/* Filter form: stack controls full-width */
.arch-filter-form { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
.arch-filter-form > div { width: 100%; }
.arch-filter-form select { width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 15px; }
.arch-filter-form .btn { width: 100%; padding: 10px; font-size: 15px; }
.arch-filter-form a.btn { width: 100%; padding: 10px; font-size: 15px; box-sizing: border-box; text-align: center; display: block; }
/* ── Convert archive tables to cards ── */
/* Remove horizontal scroll: override min-width set at 768px */
.arch-conf-tbl,
.arch-res-tbl { min-width: 0 !important; }
/* Hide table chrome — we render as cards */
.arch-conf-tbl thead,
.arch-res-tbl thead { display: none; }
.arch-conf-tbl tbody,
.arch-res-tbl tbody { display: block; }
/* Each row is now a card */
.arch-conf-tbl tr.arch-row,
.arch-res-tbl tr.arch-row {
display: block;
position: relative;
border: 1px solid var(--border);
background: var(--bg-secondary);
padding: 14px 44px 14px 16px; /* right pad for arrow */
margin-bottom: 8px;
cursor: pointer;
-webkit-tap-highlight-color: rgba(201,169,98,0.12);
transition: background 0.12s;
}
.arch-conf-tbl tr.arch-row:active,
.arch-res-tbl tr.arch-row:active { background: rgba(201,169,98,0.08); }
/* Tap arrow indicator */
.arch-conf-tbl tr.arch-row::after,
.arch-res-tbl tr.arch-row::after {
content: '→';
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--accent);
font-size: 18px;
line-height: 1;
}
/* All cells become blocks */
.arch-conf-tbl tr.arch-row td,
.arch-res-tbl tr.arch-row td {
display: block;
padding: 0;
border: none;
}
/* ── Confessions card internals ── */
/* Row 1: number + badge inline */
.arch-conf-tbl tr.arch-row td:nth-child(1) {
display: inline;
font-size: 11px;
color: var(--text-muted);
font-family: sans-serif;
letter-spacing: 0.5px;
}
.arch-conf-tbl tr.arch-row td:nth-child(2) {
display: inline;
margin-left: 8px;
}
/* force a line break after the badge row */
.arch-conf-tbl tr.arch-row td:nth-child(2)::after {
content: '';
display: block;
height: 8px;
}
/* Verdict label: main prominent line */
.arch-conf-tbl tr.arch-row td:nth-child(3) {
font-size: 16px;
font-style: italic;
color: var(--text-primary);
line-height: 1.35;
margin-bottom: 6px;
}
/* Show rating on mobile card (was hidden before) */
.arch-conf-tbl tr.arch-row td.arch-col-rating {
display: block !important;
font-size: 12px;
color: var(--text-muted);
font-family: sans-serif;
}
.arch-conf-tbl tr.arch-row td.arch-col-rating::before {
content: 'Scandal rating: ';
}
.arch-conf-tbl tr.arch-row td.arch-col-rating {
color: var(--accent);
font-weight: 700;
font-size: 12px;
}
/* Hide date — not needed on card */
.arch-conf-tbl tr.arch-row td.arch-col-date { display: none !important; }
/* Stretched link: make the real an invisible overlay covering the whole card */
.arch-conf-tbl tr.arch-row td.arch-col-link {
display: block !important;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
padding: 0;
border: none;
z-index: 2;
}
.arch-conf-tbl tr.arch-row td.arch-col-link a {
display: block;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
text-indent: -9999px;
overflow: hidden;
color: transparent;
}
/* ── Results card internals ── */
/* Date: card header */
.arch-res-tbl tr.arch-row td:nth-child(1) {
font-size: 15px;
font-weight: 700;
color: var(--accent);
font-family: sans-serif;
margin-bottom: 6px;
}
/* Winner section: keep, slightly smaller */
.arch-res-tbl tr.arch-row td:nth-child(2) {
font-size: 13px;
}
/* winner label: add a subtle marker */
.arch-res-tbl tr.arch-row td:nth-child(2)::before {
content: '🥇 ';
font-size: 12px;
}
/* Hide HM and lameo columns */
.arch-res-tbl tr.arch-row td.arch-col-hm,
.arch-res-tbl tr.arch-row td.arch-col-lam { display: none !important; }
/* Stretched link: make the real an invisible overlay covering the whole card */
.arch-res-tbl tr.arch-row td.arch-col-link {
display: block !important;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
padding: 0;
border: none;
z-index: 2;
}
.arch-res-tbl tr.arch-row td.arch-col-link a {
display: block;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
text-indent: -9999px;
overflow: hidden;
color: transparent;
}
}