/*
Theme Name: Honeyindex
Theme URI: https://honeyindex.com
Description: Custom child theme for Honeyindex — the directory for everything AI. Refined editorial design optimized for directory/listing sites.
Author: Honeyindex
Version: 1.0.0
Template: blocksy
Text Domain: honeyindex
*/
/* ====================================================================
DESIGN TOKENS
Refined editorial: deep navy + amber accent, generous whitespace
==================================================================== */
:root {
/* Brand */
--hi-honey: #f59e0b; /* primary accent — buttons, links, badges */
--hi-honey-dark: #d97706; /* hover state */
--hi-honey-soft: #fef3c7; /* tinted backgrounds */
/* Neutrals */
--hi-ink: #0f172a; /* primary text, headlines */
--hi-ink-2: #1e293b; /* secondary headlines */
--hi-muted: #64748b; /* body text */
--hi-muted-2: #94a3b8; /* tertiary text, captions */
--hi-line: #e2e8f0; /* borders */
--hi-line-2: #f1f5f9; /* subtle dividers */
--hi-bg: #ffffff; /* main background */
--hi-bg-2: #fafbfc; /* section background (very subtle) */
--hi-bg-3: #f8fafc; /* card background on hover */
/* Semantic */
--hi-success: #10b981;
--hi-warning: #f59e0b;
--hi-info: #3b82f6;
/* Typography */
--hi-font-display: 'Fraunces', Georgia, serif;
--hi-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--hi-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
/* Spacing scale */
--hi-space-1: 4px;
--hi-space-2: 8px;
--hi-space-3: 12px;
--hi-space-4: 16px;
--hi-space-5: 24px;
--hi-space-6: 32px;
--hi-space-7: 48px;
--hi-space-8: 64px;
--hi-space-9: 96px;
/* Layout */
--hi-container: 1200px;
--hi-radius-sm: 6px;
--hi-radius: 10px;
--hi-radius-lg: 16px;
/* Shadows */
--hi-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
--hi-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.04);
--hi-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
/* Transitions */
--hi-trans: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* ====================================================================
IMPORT FONTS (Google Fonts via CSS — no extra HTTP requests)
==================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
/* ====================================================================
RESET & GLOBAL OVERRIDES
These override Blocksy's defaults where we want our own look
==================================================================== */
body {
font-family: var(--hi-font-sans);
color: var(--hi-ink);
background: var(--hi-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--hi-font-display);
color: var(--hi-ink);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.15;
}
a {
color: var(--hi-ink);
text-decoration: none;
transition: color var(--hi-trans);
}
a:hover {
color: var(--hi-honey-dark);
}
/* Hide Blocksy elements we replace with our own */
.ct-breadcrumbs { display: none; }
/* ====================================================================
LAYOUT — Container
==================================================================== */
.hi-container {
max-width: var(--hi-container);
margin: 0 auto;
padding: 0 var(--hi-space-5);
}
@media (min-width: 768px) {
.hi-container { padding: 0 var(--hi-space-6); }
}
/* ====================================================================
HEADER
Clean horizontal header: logo · nav · search · CTA
==================================================================== */
.hi-header {
background: var(--hi-bg);
border-bottom: 1px solid var(--hi-line);
position: sticky;
top: 0;
z-index: 100;
backdrop-filter: blur(8px);
background-color: rgba(255, 255, 255, 0.92);
}
.hi-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--hi-space-5);
padding: var(--hi-space-4) 0;
}
.hi-logo {
display: flex;
align-items: center;
gap: var(--hi-space-2);
font-family: var(--hi-font-display);
font-size: 22px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--hi-ink);
white-space: nowrap;
}
.hi-logo:hover { color: var(--hi-ink); }
.hi-logo-mark {
display: inline-flex;
width: 32px;
height: 32px;
align-items: center;
justify-content: center;
background: var(--hi-honey);
color: var(--hi-ink);
border-radius: var(--hi-radius-sm);
font-weight: 700;
font-family: var(--hi-font-sans);
font-size: 16px;
}
.hi-nav {
display: flex;
align-items: center;
gap: var(--hi-space-5);
}
.hi-nav-list {
display: flex;
align-items: center;
gap: var(--hi-space-5);
list-style: none;
padding: 0;
margin: 0;
}
.hi-nav-list a {
font-size: 14px;
font-weight: 500;
color: var(--hi-muted);
transition: color var(--hi-trans);
}
.hi-nav-list a:hover { color: var(--hi-ink); }
.hi-header-search {
flex: 1;
max-width: 320px;
position: relative;
}
.hi-header-search input {
width: 100%;
padding: 8px 12px 8px 36px;
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius-sm);
background: var(--hi-bg-2);
font-size: 14px;
font-family: var(--hi-font-sans);
color: var(--hi-ink);
transition: all var(--hi-trans);
}
.hi-header-search input:focus {
outline: none;
border-color: var(--hi-honey);
background: var(--hi-bg);
box-shadow: 0 0 0 3px var(--hi-honey-soft);
}
.hi-header-search::before {
content: "";
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
background-size: contain;
pointer-events: none;
}
.hi-header-cta {
padding: 8px 16px;
background: var(--hi-ink);
color: white !important;
border-radius: var(--hi-radius-sm);
font-size: 14px;
font-weight: 500;
white-space: nowrap;
}
.hi-header-cta:hover {
background: var(--hi-honey-dark);
color: white !important;
}
/* Mobile menu toggle */
.hi-menu-toggle {
display: none;
background: none;
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius-sm);
padding: 8px;
cursor: pointer;
}
.hi-menu-toggle svg { width: 20px; height: 20px; stroke: var(--hi-ink); }
@media (max-width: 900px) {
.hi-nav-list, .hi-header-search, .hi-header-cta { display: none; }
.hi-menu-toggle { display: inline-flex; }
.hi-nav-list.is-open {
display: flex;
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: flex-start;
padding: var(--hi-space-5);
background: var(--hi-bg);
border-bottom: 1px solid var(--hi-line);
box-shadow: var(--hi-shadow);
}
}
/* ====================================================================
AD SLOTS
Used in all banner positions — sponsored label + image link
==================================================================== */
.hi-ad-slot {
margin: 0 auto;
text-align: center;
padding: var(--hi-space-5) 0;
}
.hi-ad-slot-label {
font-size: 11px;
font-weight: 500;
color: var(--hi-muted-2);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: var(--hi-space-2);
}
.hi-ad-slot img {
max-width: 100%;
height: auto;
border-radius: var(--hi-radius);
display: inline-block;
transition: transform var(--hi-trans), box-shadow var(--hi-trans);
}
.hi-ad-slot a:hover img {
transform: translateY(-2px);
box-shadow: var(--hi-shadow-lg);
}
/* Hide desktop on mobile, show mobile alternative — using !important to ensure override */
.hi-ad-slot .hi-ad-desktop { display: inline-block !important; }
.hi-ad-slot .hi-ad-mobile { display: none !important; }
@media (max-width: 768px) {
.hi-ad-slot .hi-ad-desktop { display: none !important; }
.hi-ad-slot .hi-ad-mobile { display: inline-block !important; }
}
/* ====================================================================
HERO SECTION
==================================================================== */
.hi-hero {
padding: var(--hi-space-9) 0 var(--hi-space-8);
text-align: center;
background:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(245, 158, 11, 0.06), transparent 50%),
var(--hi-bg);
border-bottom: 1px solid var(--hi-line-2);
}
.hi-eyebrow {
display: inline-flex;
align-items: center;
gap: var(--hi-space-2);
padding: 6px 14px;
background: var(--hi-honey-soft);
color: var(--hi-honey-dark);
border-radius: 999px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--hi-space-5);
}
.hi-eyebrow .dot {
width: 6px;
height: 6px;
background: var(--hi-honey-dark);
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.hi-hero h1 {
font-size: clamp(40px, 6vw, 72px);
font-weight: 600;
margin: 0 0 var(--hi-space-4);
letter-spacing: -0.035em;
line-height: 1.05;
}
.hi-hero h1 em {
font-style: italic;
color: var(--hi-honey-dark);
font-weight: 500;
}
.hi-hero-sub {
font-size: clamp(16px, 2vw, 20px);
color: var(--hi-muted);
max-width: 640px;
margin: 0 auto var(--hi-space-6);
line-height: 1.5;
}
.hi-hero-search {
max-width: 600px;
margin: 0 auto var(--hi-space-5);
position: relative;
}
.hi-hero-search form {
display: flex;
gap: var(--hi-space-2);
background: var(--hi-bg);
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius);
padding: 6px;
box-shadow: var(--hi-shadow);
transition: all var(--hi-trans);
}
.hi-hero-search form:focus-within {
border-color: var(--hi-honey);
box-shadow: 0 0 0 4px var(--hi-honey-soft), var(--hi-shadow);
}
.hi-hero-search input {
flex: 1;
border: none;
background: transparent;
padding: 10px 14px;
font-size: 15px;
font-family: var(--hi-font-sans);
color: var(--hi-ink);
outline: none;
}
.hi-hero-search input::placeholder { color: var(--hi-muted-2); }
.hi-hero-search button {
background: var(--hi-ink);
color: white;
border: none;
padding: 10px 20px;
border-radius: var(--hi-radius-sm);
font-size: 14px;
font-weight: 600;
font-family: var(--hi-font-sans);
cursor: pointer;
transition: background var(--hi-trans);
}
.hi-hero-search button:hover { background: var(--hi-honey-dark); }
.hi-hero-stats {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--hi-space-4);
font-size: 13px;
color: var(--hi-muted-2);
}
.hi-hero-stats strong {
color: var(--hi-ink);
font-weight: 600;
}
/* ====================================================================
SECTION — generic
==================================================================== */
.hi-section {
padding: var(--hi-space-9) 0;
}
.hi-section-tight {
padding: var(--hi-space-7) 0;
}
.hi-section-grey {
background: var(--hi-bg-2);
}
.hi-section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--hi-space-4);
margin-bottom: var(--hi-space-6);
flex-wrap: wrap;
}
.hi-section-head h2 {
font-size: clamp(28px, 3vw, 36px);
margin: 0 0 var(--hi-space-2);
letter-spacing: -0.02em;
}
.hi-section-head p {
color: var(--hi-muted);
font-size: 16px;
margin: 0;
}
.hi-section-head .hi-link-arrow {
color: var(--hi-honey-dark);
font-weight: 600;
font-size: 14px;
white-space: nowrap;
}
.hi-link-arrow::after {
content: " →";
transition: transform var(--hi-trans);
display: inline-block;
}
.hi-link-arrow:hover::after { transform: translateX(3px); }
/* ====================================================================
LISTING CARD — Used for featured LLMs, latest additions, etc.
==================================================================== */
.hi-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--hi-space-5);
max-width: 100%;
}
/* When few cards, keep them at a reasonable max-width so they don't stretch */
.hi-card-grid.hi-card-grid-3up {
grid-template-columns: repeat(auto-fill, minmax(280px, 360px));
justify-content: start;
}
.hi-card {
display: flex;
flex-direction: column;
background: var(--hi-bg);
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius);
padding: var(--hi-space-5);
transition: all var(--hi-trans);
position: relative;
color: inherit;
}
.hi-card:hover {
border-color: var(--hi-honey);
box-shadow: var(--hi-shadow-lg);
transform: translateY(-2px);
color: inherit;
}
.hi-card-featured-badge {
position: absolute;
top: var(--hi-space-3);
right: var(--hi-space-3);
background: var(--hi-honey);
color: var(--hi-ink);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 3px 8px;
border-radius: 4px;
}
.hi-card-logo {
width: 48px;
height: 48px;
border-radius: var(--hi-radius-sm);
background: var(--hi-bg-2);
border: 1px solid var(--hi-line);
object-fit: contain;
padding: 8px;
margin-bottom: var(--hi-space-4);
}
.hi-card-logo-placeholder {
width: 48px;
height: 48px;
border-radius: var(--hi-radius-sm);
background: var(--hi-honey-soft);
color: var(--hi-honey-dark);
border: 1px solid var(--hi-line);
margin-bottom: var(--hi-space-4);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 18px;
font-family: var(--hi-font-display);
}
.hi-card-title {
font-family: var(--hi-font-display);
font-size: 18px;
font-weight: 600;
color: var(--hi-ink);
margin: 0 0 2px;
letter-spacing: -0.01em;
}
.hi-card-developer {
font-size: 12px;
color: var(--hi-muted-2);
margin-bottom: var(--hi-space-3);
font-weight: 500;
}
.hi-card-tagline {
font-size: 14px;
color: var(--hi-muted);
line-height: 1.45;
margin: 0 0 var(--hi-space-4);
flex: 1;
}
.hi-card-meta {
display: flex;
gap: var(--hi-space-3);
padding-top: var(--hi-space-3);
border-top: 1px solid var(--hi-line-2);
font-size: 12px;
color: var(--hi-muted);
}
.hi-card-meta-item {
display: flex;
flex-direction: column;
}
.hi-card-meta-item strong {
color: var(--hi-ink);
font-weight: 600;
font-family: var(--hi-font-mono);
font-size: 13px;
}
.hi-card-meta-item span {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--hi-muted-2);
}
/* ====================================================================
CATEGORY TILES
==================================================================== */
.hi-cat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--hi-space-4);
}
.hi-cat-tile {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: var(--hi-space-5);
background: var(--hi-bg);
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius);
transition: all var(--hi-trans);
color: inherit;
position: relative;
overflow: hidden;
}
.hi-cat-tile::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent 60%, rgba(245, 158, 11, 0.08));
opacity: 0;
transition: opacity var(--hi-trans);
}
.hi-cat-tile:hover {
border-color: var(--hi-honey);
transform: translateY(-2px);
color: inherit;
box-shadow: var(--hi-shadow);
}
.hi-cat-tile:hover::before { opacity: 1; }
.hi-cat-icon {
width: 40px;
height: 40px;
border-radius: var(--hi-radius-sm);
background: var(--hi-honey-soft);
color: var(--hi-honey-dark);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--hi-space-4);
position: relative;
z-index: 1;
}
.hi-cat-icon svg { width: 22px; height: 22px; }
.hi-cat-tile h3 {
font-size: 17px;
font-weight: 600;
margin: 0 0 4px;
color: var(--hi-ink);
position: relative;
z-index: 1;
}
.hi-cat-count {
font-size: 13px;
color: var(--hi-muted);
margin: 0;
position: relative;
z-index: 1;
}
.hi-cat-count strong {
color: var(--hi-ink);
font-family: var(--hi-font-mono);
font-weight: 600;
}
/* ====================================================================
TWO-COLUMN with SIDEBAR (for categories + ad)
==================================================================== */
.hi-two-col {
display: grid;
grid-template-columns: 1fr 300px;
gap: var(--hi-space-7);
}
@media (max-width: 1024px) {
.hi-two-col {
grid-template-columns: 1fr;
}
}
.hi-sidebar-ad {
display: flex;
flex-direction: column;
align-items: center;
position: sticky;
top: 80px;
align-self: start;
}
/* ====================================================================
TABLE — Listings (LLM directory table view)
==================================================================== */
.hi-table-wrap {
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius);
overflow: hidden;
background: var(--hi-bg);
box-shadow: var(--hi-shadow-sm);
}
.hi-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.hi-table th {
background: var(--hi-bg-2);
color: var(--hi-muted);
font-weight: 600;
text-align: left;
padding: var(--hi-space-3) var(--hi-space-4);
border-bottom: 1px solid var(--hi-line);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.hi-table td {
padding: var(--hi-space-4);
border-bottom: 1px solid var(--hi-line-2);
vertical-align: middle;
}
.hi-table tbody tr {
transition: background var(--hi-trans);
}
.hi-table tbody tr:hover { background: var(--hi-bg-3); }
.hi-table tbody tr:last-child td { border-bottom: none; }
.hi-table-name {
display: flex;
align-items: center;
gap: var(--hi-space-3);
}
.hi-table-name img,
.hi-table-name .hi-card-logo-placeholder {
width: 36px;
height: 36px;
margin: 0;
flex-shrink: 0;
}
.hi-table-name .name-block strong {
display: block;
font-weight: 600;
color: var(--hi-ink);
}
.hi-table-name .name-block small {
color: var(--hi-muted-2);
font-size: 12px;
}
.hi-badge {
display: inline-block;
padding: 3px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.hi-badge-free { background: #d1fae5; color: #065f46; }
.hi-badge-paid { background: var(--hi-honey-soft); color: var(--hi-honey-dark); }
.hi-badge-open { background: #dbeafe; color: #1e40af; }
.hi-badge-default { background: var(--hi-bg-2); color: var(--hi-muted); }
.hi-mono { font-family: var(--hi-font-mono); font-size: 13px; }
@media (max-width: 768px) {
.hi-table thead { display: none; }
.hi-table, .hi-table tbody, .hi-table tr, .hi-table td { display: block; width: 100%; }
.hi-table tr {
margin-bottom: var(--hi-space-3);
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius);
padding: var(--hi-space-3);
}
.hi-table td { border: none; padding: 4px var(--hi-space-2); }
.hi-table td::before {
content: attr(data-label);
display: inline-block;
width: 100px;
font-weight: 600;
color: var(--hi-muted-2);
font-size: 11px;
text-transform: uppercase;
}
}
/* ====================================================================
CTA SECTIONS
==================================================================== */
.hi-cta-banner {
background: var(--hi-ink);
color: white;
border-radius: var(--hi-radius-lg);
padding: var(--hi-space-7);
text-align: center;
position: relative;
overflow: hidden;
}
.hi-cta-banner::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at top right, rgba(245, 158, 11, 0.2), transparent 50%),
radial-gradient(ellipse at bottom left, rgba(245, 158, 11, 0.1), transparent 50%);
pointer-events: none;
}
.hi-cta-banner > * { position: relative; z-index: 1; }
.hi-cta-banner h2 {
color: white;
font-size: clamp(24px, 3vw, 36px);
margin: 0 0 var(--hi-space-3);
}
.hi-cta-banner p {
color: rgba(255, 255, 255, 0.7);
font-size: 17px;
max-width: 520px;
margin: 0 auto var(--hi-space-5);
}
.hi-btn-primary {
display: inline-flex;
align-items: center;
gap: var(--hi-space-2);
padding: 12px 24px;
background: var(--hi-honey);
color: var(--hi-ink) !important;
border-radius: var(--hi-radius-sm);
font-weight: 600;
font-size: 15px;
transition: all var(--hi-trans);
border: none;
cursor: pointer;
}
.hi-btn-primary:hover {
background: white;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}
.hi-btn-secondary {
display: inline-flex;
align-items: center;
gap: var(--hi-space-2);
padding: 11px 23px;
background: transparent;
color: var(--hi-ink) !important;
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius-sm);
font-weight: 500;
font-size: 15px;
transition: all var(--hi-trans);
cursor: pointer;
}
.hi-btn-secondary:hover {
border-color: var(--hi-honey);
background: var(--hi-honey-soft);
}
/* ====================================================================
NEWSLETTER
==================================================================== */
.hi-newsletter {
background: linear-gradient(135deg, var(--hi-bg-2), var(--hi-honey-soft) 200%);
border-radius: var(--hi-radius-lg);
padding: var(--hi-space-7);
text-align: center;
border: 1px solid var(--hi-line);
}
.hi-newsletter h2 {
font-size: clamp(24px, 3vw, 32px);
margin: 0 0 var(--hi-space-3);
}
.hi-newsletter p {
color: var(--hi-muted);
margin: 0 auto var(--hi-space-5);
max-width: 480px;
}
.hi-newsletter-form {
display: flex;
gap: var(--hi-space-2);
max-width: 460px;
margin: 0 auto;
}
.hi-newsletter-form input {
flex: 1;
padding: 12px 16px;
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius-sm);
background: white;
font-size: 15px;
font-family: var(--hi-font-sans);
}
.hi-newsletter-form input:focus {
outline: none;
border-color: var(--hi-honey);
box-shadow: 0 0 0 3px var(--hi-honey-soft);
}
@media (max-width: 600px) {
.hi-newsletter-form { flex-direction: column; }
}
/* ====================================================================
FOOTER
==================================================================== */
.hi-footer {
background: var(--hi-ink);
color: rgba(255, 255, 255, 0.7);
padding: var(--hi-space-8) 0 var(--hi-space-5);
margin-top: var(--hi-space-9);
}
.hi-footer a {
color: rgba(255, 255, 255, 0.7);
transition: color var(--hi-trans);
font-size: 14px;
}
.hi-footer a:hover { color: var(--hi-honey); }
.hi-footer-grid {
display: grid;
grid-template-columns: 2fr repeat(3, 1fr);
gap: var(--hi-space-7);
margin-bottom: var(--hi-space-7);
}
@media (max-width: 768px) {
.hi-footer-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--hi-space-5);
}
.hi-footer-brand { grid-column: 1 / -1; }
}
.hi-footer-brand .hi-logo {
color: white;
margin-bottom: var(--hi-space-3);
}
.hi-footer-brand p {
font-size: 14px;
line-height: 1.5;
max-width: 320px;
}
.hi-footer h4 {
color: white;
font-family: var(--hi-font-sans);
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 0 0 var(--hi-space-4);
}
.hi-footer ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--hi-space-2);
}
.hi-footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: var(--hi-space-5);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--hi-space-3);
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
}
/* ====================================================================
SINGLE LISTING PAGE (used by single-llms.php etc.)
==================================================================== */
.hi-single-header {
padding: var(--hi-space-7) 0 var(--hi-space-5);
border-bottom: 1px solid var(--hi-line-2);
}
.hi-breadcrumb {
font-size: 13px;
color: var(--hi-muted-2);
margin-bottom: var(--hi-space-4);
}
.hi-breadcrumb a { color: var(--hi-muted); }
.hi-single-head {
display: flex;
align-items: flex-start;
gap: var(--hi-space-5);
flex-wrap: wrap;
}
.hi-single-logo {
width: 80px;
height: 80px;
border-radius: var(--hi-radius);
border: 1px solid var(--hi-line);
background: var(--hi-bg);
object-fit: contain;
padding: 12px;
flex-shrink: 0;
}
.hi-single-info { flex: 1; min-width: 0; }
.hi-single-info h1 {
font-size: clamp(28px, 4vw, 40px);
margin: 0 0 var(--hi-space-2);
}
.hi-single-tagline {
color: var(--hi-muted);
font-size: 17px;
margin: 0 0 var(--hi-space-3);
}
.hi-single-actions {
display: flex;
gap: var(--hi-space-3);
flex-wrap: wrap;
}
/* ====================================================================
UTILITY
==================================================================== */
.hi-text-mono { font-family: var(--hi-font-mono); }
.hi-text-muted { color: var(--hi-muted); }
.hi-mb-0 { margin-bottom: 0 !important; }
.hi-mt-7 { margin-top: var(--hi-space-7); }
/* ====================================================================
PHASE 2 — ARCHIVE & SINGLE PAGE STYLES
Append these to the bottom of style.css
==================================================================== */
/* ARCHIVE HEADER (e.g. "LLMs · Foundation models") */
.hi-archive-header {
padding: var(--hi-space-7) 0 var(--hi-space-5);
border-bottom: 1px solid var(--hi-line-2);
}
.hi-archive-header h1 {
font-size: clamp(36px, 5vw, 56px);
margin: 0 0 var(--hi-space-3);
letter-spacing: -0.025em;
}
.hi-archive-header p.hi-archive-desc {
font-size: 17px;
color: var(--hi-muted);
margin: 0;
max-width: 640px;
}
.hi-archive-stats {
margin-top: var(--hi-space-5);
display: flex;
gap: var(--hi-space-5);
font-size: 14px;
color: var(--hi-muted-2);
}
.hi-archive-stats strong {
color: var(--hi-ink);
font-family: var(--hi-font-mono);
font-weight: 600;
}
/* FILTER BAR */
.hi-filter-bar {
background: var(--hi-bg);
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius);
padding: var(--hi-space-3) var(--hi-space-4);
margin: var(--hi-space-5) 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--hi-space-3);
}
.hi-filter-label {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--hi-muted-2);
margin-right: var(--hi-space-2);
}
.hi-chip {
display: inline-flex;
align-items: center;
padding: 6px 12px;
background: var(--hi-bg-2);
border: 1px solid var(--hi-line);
border-radius: 999px;
font-size: 13px;
font-weight: 500;
color: var(--hi-muted);
transition: all var(--hi-trans);
cursor: pointer;
}
.hi-chip:hover {
border-color: var(--hi-honey);
color: var(--hi-ink);
}
.hi-chip.is-active {
background: var(--hi-ink);
color: white;
border-color: var(--hi-ink);
}
.hi-chip-count {
margin-left: 6px;
font-size: 11px;
opacity: 0.7;
font-family: var(--hi-font-mono);
}
/* TABLE — sortable + zebra (archive view) */
.hi-archive-table th a {
color: inherit;
display: inline-flex;
align-items: center;
gap: 4px;
cursor: pointer;
white-space: nowrap;
}
.hi-archive-table th a:hover { color: var(--hi-ink); }
.hi-archive-table th .sort-indicator {
opacity: 0.3;
transition: opacity var(--hi-trans);
font-size: 10px;
}
.hi-archive-table th a:hover .sort-indicator { opacity: 0.7; }
.hi-archive-table th.is-sorted .sort-indicator,
.hi-archive-table th a.is-sorted .sort-indicator {
opacity: 1;
color: var(--hi-honey-dark);
}
.hi-table-rank {
color: var(--hi-muted-2);
font-family: var(--hi-font-mono);
font-size: 13px;
font-weight: 500;
width: 40px;
}
.hi-link-subtle {
color: var(--hi-ink);
transition: color var(--hi-trans);
}
.hi-link-subtle:hover {
color: var(--hi-honey-dark);
}
/* PAGINATION */
.hi-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: var(--hi-space-2);
margin-top: var(--hi-space-6);
flex-wrap: wrap;
}
.hi-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding: 0 12px;
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius-sm);
font-size: 14px;
font-weight: 500;
color: var(--hi-muted);
transition: all var(--hi-trans);
}
.hi-pagination .page-numbers:hover {
border-color: var(--hi-honey);
color: var(--hi-ink);
}
.hi-pagination .page-numbers.current {
background: var(--hi-ink);
color: white;
border-color: var(--hi-ink);
}
.hi-pagination .dots {
border: none;
background: none;
}
/* EMPTY STATE */
.hi-empty {
text-align: center;
padding: var(--hi-space-9) var(--hi-space-5);
background: var(--hi-bg-2);
border: 1px dashed var(--hi-line);
border-radius: var(--hi-radius-lg);
}
.hi-empty h3 {
font-size: 24px;
margin: 0 0 var(--hi-space-2);
color: var(--hi-ink);
}
.hi-empty p {
color: var(--hi-muted);
margin: 0 0 var(--hi-space-4);
}
/* ====================================================================
SINGLE LISTING PAGE
==================================================================== */
.hi-single {
padding-bottom: var(--hi-space-8);
}
/* Hero block of single page */
.hi-single-hero {
background: linear-gradient(180deg, var(--hi-bg-2), transparent);
padding: var(--hi-space-6) 0 var(--hi-space-6);
border-bottom: 1px solid var(--hi-line-2);
}
.hi-single-hero-inner {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--hi-space-5);
align-items: center;
}
@media (max-width: 768px) {
.hi-single-hero-inner {
grid-template-columns: auto 1fr;
}
.hi-single-actions {
grid-column: 1 / -1;
}
}
.hi-single-logo,
.hi-single-logo-placeholder {
width: 96px;
height: 96px;
border-radius: var(--hi-radius);
border: 1px solid var(--hi-line);
background: white;
object-fit: contain;
padding: 12px;
}
.hi-single-logo-placeholder {
display: flex;
align-items: center;
justify-content: center;
background: var(--hi-honey-soft);
color: var(--hi-honey-dark);
font-family: var(--hi-font-display);
font-size: 40px;
font-weight: 600;
}
.hi-single-info h1 {
font-size: clamp(28px, 4vw, 44px);
margin: 0 0 var(--hi-space-2);
letter-spacing: -0.025em;
line-height: 1.1;
}
.hi-verified-badge {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 8px;
color: var(--hi-info);
font-size: 18px;
vertical-align: middle;
}
.hi-single-tagline {
color: var(--hi-muted);
font-size: 18px;
margin: 0 0 var(--hi-space-3);
line-height: 1.4;
}
.hi-single-byline {
display: flex;
align-items: center;
gap: var(--hi-space-3);
font-size: 13px;
color: var(--hi-muted-2);
flex-wrap: wrap;
}
.hi-single-byline .sep {
color: var(--hi-line);
}
.hi-single-actions {
display: flex;
flex-direction: column;
gap: var(--hi-space-2);
}
/* QUICK FACTS strip */
.hi-quickfacts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1px;
background: var(--hi-line);
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius);
overflow: hidden;
margin: var(--hi-space-6) 0;
}
.hi-quickfact {
background: var(--hi-bg);
padding: var(--hi-space-4);
}
.hi-quickfact-label {
font-size: 11px;
color: var(--hi-muted-2);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
margin-bottom: 4px;
}
.hi-quickfact-value {
font-family: var(--hi-font-mono);
font-size: 17px;
font-weight: 600;
color: var(--hi-ink);
line-height: 1.2;
}
.hi-quickfact-value-text {
font-family: var(--hi-font-sans);
font-size: 15px;
}
/* CONTENT LAYOUT — two column on desktop */
.hi-single-layout {
display: grid;
grid-template-columns: 1fr 300px;
gap: var(--hi-space-7);
margin-top: var(--hi-space-6);
}
@media (max-width: 1024px) {
.hi-single-layout { grid-template-columns: 1fr; }
}
.hi-single-content {
font-size: 16px;
line-height: 1.7;
color: var(--hi-ink-2);
}
.hi-single-content h2 {
font-size: 26px;
margin: var(--hi-space-7) 0 var(--hi-space-4);
}
.hi-single-content h3 {
font-size: 20px;
margin: var(--hi-space-6) 0 var(--hi-space-3);
}
.hi-single-content p { margin: 0 0 var(--hi-space-4); }
.hi-single-content ul,
.hi-single-content ol {
margin: 0 0 var(--hi-space-4);
padding-left: var(--hi-space-5);
}
.hi-single-content li { margin-bottom: var(--hi-space-2); }
.hi-single-content a {
color: var(--hi-honey-dark);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
/* SPECS TABLE */
.hi-specs {
margin: var(--hi-space-6) 0;
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius);
overflow: hidden;
}
.hi-specs-head {
background: var(--hi-bg-2);
padding: var(--hi-space-3) var(--hi-space-4);
border-bottom: 1px solid var(--hi-line);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--hi-muted);
}
.hi-specs-row {
display: grid;
grid-template-columns: 200px 1fr;
padding: var(--hi-space-3) var(--hi-space-4);
border-bottom: 1px solid var(--hi-line-2);
align-items: center;
gap: var(--hi-space-3);
}
.hi-specs-row:last-child { border-bottom: none; }
.hi-specs-label {
font-size: 13px;
color: var(--hi-muted);
font-weight: 500;
}
.hi-specs-value {
font-size: 14px;
color: var(--hi-ink);
font-family: var(--hi-font-mono);
word-break: break-word;
}
.hi-specs-value-text {
font-family: var(--hi-font-sans);
}
@media (max-width: 600px) {
.hi-specs-row {
grid-template-columns: 1fr;
gap: 4px;
}
}
/* SIDEBAR */
.hi-single-sidebar {
display: flex;
flex-direction: column;
gap: var(--hi-space-5);
}
.hi-sidebar-card {
background: var(--hi-bg);
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius);
padding: var(--hi-space-5);
}
.hi-sidebar-card h4 {
font-family: var(--hi-font-sans);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--hi-muted);
margin: 0 0 var(--hi-space-3);
}
.hi-tag-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.hi-tag {
display: inline-block;
padding: 4px 10px;
background: var(--hi-bg-2);
border: 1px solid var(--hi-line);
border-radius: 999px;
font-size: 12px;
color: var(--hi-muted);
transition: all var(--hi-trans);
}
a.hi-tag:hover {
border-color: var(--hi-honey);
color: var(--hi-ink);
}
/* RELATED PROJECTS */
.hi-related {
margin-top: var(--hi-space-7);
padding-top: var(--hi-space-6);
border-top: 1px solid var(--hi-line-2);
}
/* ====================================================================
PAYWALL COMPONENT
Hidden by default — only shown when members_only is set and user is not Pro
==================================================================== */
.hi-paywall {
margin: var(--hi-space-6) 0;
padding: var(--hi-space-7);
background: linear-gradient(135deg, var(--hi-bg-2), var(--hi-honey-soft));
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius-lg);
text-align: center;
position: relative;
overflow: hidden;
}
.hi-paywall::before {
content: "";
position: absolute;
top: -40px;
left: 0;
right: 0;
height: 80px;
background: linear-gradient(180deg, var(--hi-bg), transparent);
}
.hi-paywall-icon {
display: inline-flex;
width: 56px;
height: 56px;
align-items: center;
justify-content: center;
background: var(--hi-honey);
color: var(--hi-ink);
border-radius: 50%;
margin-bottom: var(--hi-space-4);
}
.hi-paywall-icon svg { width: 26px; height: 26px; }
.hi-paywall h3 {
font-size: 26px;
margin: 0 0 var(--hi-space-2);
}
.hi-paywall p {
color: var(--hi-muted);
max-width: 480px;
margin: 0 auto var(--hi-space-5);
font-size: 16px;
}
.hi-paywall-features {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--hi-space-3);
margin-bottom: var(--hi-space-5);
font-size: 14px;
color: var(--hi-muted);
}
.hi-paywall-features li {
list-style: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.hi-paywall-features li::before {
content: "✓";
color: var(--hi-honey-dark);
font-weight: bold;
}
/* Pro badge for users (when logged in) */
.hi-pro-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
background: var(--hi-honey);
color: var(--hi-ink);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
border-radius: 4px;
}
/* ====================================================================
PHASE 3 — STATIC PAGES, SHARE, NEWSLETTER, PRO LANDING
Append to bottom of style.css
==================================================================== */
/* GENERIC PAGE HEADER (used by Submit, Advertise, About, etc.) */
.hi-page-header {
padding: var(--hi-space-8) 0 var(--hi-space-7);
text-align: center;
background:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(245, 158, 11, 0.06), transparent 50%),
url("data:image/svg+xml;utf8,"),
var(--hi-bg);
background-repeat: no-repeat, repeat, no-repeat;
border-bottom: 1px solid var(--hi-line-2);
}
.hi-page-header h1 {
font-size: clamp(36px, 5vw, 64px);
margin: 0 0 var(--hi-space-3);
letter-spacing: -0.025em;
}
.hi-page-header h1 em {
font-style: italic;
color: var(--hi-honey-dark);
font-weight: 500;
}
.hi-page-header .hi-page-lead {
font-size: clamp(17px, 2vw, 21px);
color: var(--hi-muted);
max-width: 640px;
margin: 0 auto;
line-height: 1.5;
}
.hi-page-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: var(--hi-honey-soft);
color: var(--hi-honey-dark);
border-radius: 999px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--hi-space-4);
}
/* PROSE — for long-form pages (About, Privacy, Terms) */
.hi-prose {
max-width: 720px;
margin: 0 auto;
padding: var(--hi-space-7) 0;
font-size: 16px;
line-height: 1.7;
color: var(--hi-ink-2);
}
.hi-prose h2 {
font-size: 28px;
margin: var(--hi-space-7) 0 var(--hi-space-4);
color: var(--hi-ink);
}
.hi-prose h3 {
font-size: 20px;
margin: var(--hi-space-6) 0 var(--hi-space-3);
color: var(--hi-ink);
}
.hi-prose p {
margin: 0 0 var(--hi-space-4);
}
.hi-prose ul, .hi-prose ol {
margin: 0 0 var(--hi-space-4);
padding-left: var(--hi-space-5);
}
.hi-prose li {
margin-bottom: var(--hi-space-2);
}
.hi-prose a {
color: var(--hi-honey-dark);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.hi-prose strong {
color: var(--hi-ink);
font-weight: 600;
}
.hi-prose blockquote {
margin: var(--hi-space-5) 0;
padding: var(--hi-space-3) var(--hi-space-5);
border-left: 3px solid var(--hi-honey);
background: var(--hi-bg-2);
border-radius: 0 var(--hi-radius-sm) var(--hi-radius-sm) 0;
font-style: italic;
color: var(--hi-ink-2);
}
.hi-prose code {
background: var(--hi-bg-2);
padding: 2px 6px;
border-radius: 4px;
font-family: var(--hi-font-mono);
font-size: 0.9em;
border: 1px solid var(--hi-line);
}
/* PRICING TIERS (Advertise + Pro pages) */
.hi-pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--hi-space-5);
margin: var(--hi-space-7) 0;
}
.hi-pricing-card {
background: var(--hi-bg);
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius-lg);
padding: var(--hi-space-6);
transition: all var(--hi-trans);
position: relative;
overflow: hidden;
}
.hi-pricing-card.is-featured {
border-color: var(--hi-honey);
background:
linear-gradient(180deg, var(--hi-honey-soft), white 50%),
url("data:image/svg+xml;utf8,");
transform: scale(1.02);
}
.hi-pricing-card:hover {
border-color: var(--hi-honey);
box-shadow: var(--hi-shadow-lg);
transform: translateY(-2px);
}
.hi-pricing-card.is-featured:hover { transform: translateY(-2px) scale(1.02); }
.hi-pricing-badge {
position: absolute;
top: 12px;
right: 12px;
background: var(--hi-honey);
color: var(--hi-ink);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 4px 10px;
border-radius: 4px;
}
.hi-pricing-card h3 {
font-size: 18px;
margin: 0 0 var(--hi-space-2);
font-family: var(--hi-font-sans);
font-weight: 600;
color: var(--hi-ink);
}
.hi-pricing-card .price {
font-family: var(--hi-font-display);
font-size: 40px;
font-weight: 600;
color: var(--hi-ink);
margin: var(--hi-space-3) 0 var(--hi-space-2);
line-height: 1;
}
.hi-pricing-card .price small {
font-size: 14px;
color: var(--hi-muted);
font-weight: 400;
font-family: var(--hi-font-sans);
}
.hi-pricing-card .price-desc {
color: var(--hi-muted);
font-size: 14px;
margin: 0 0 var(--hi-space-5);
min-height: 40px;
}
.hi-pricing-features {
list-style: none;
padding: 0;
margin: 0 0 var(--hi-space-5);
}
.hi-pricing-features li {
padding: 8px 0;
font-size: 14px;
color: var(--hi-ink-2);
border-bottom: 1px solid var(--hi-line-2);
display: flex;
align-items: flex-start;
gap: 8px;
}
.hi-pricing-features li::before {
content: "✓";
color: var(--hi-honey-dark);
font-weight: bold;
flex-shrink: 0;
}
.hi-pricing-features li.no::before {
content: "—";
color: var(--hi-muted-2);
}
.hi-pricing-features li:last-child {
border-bottom: none;
}
/* SHARE BUTTONS */
.hi-share {
display: flex;
align-items: center;
gap: var(--hi-space-2);
margin: var(--hi-space-5) 0;
flex-wrap: wrap;
}
.hi-share-label {
font-size: 12px;
font-weight: 600;
color: var(--hi-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-right: var(--hi-space-2);
}
.hi-share-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius-sm);
background: var(--hi-bg);
color: var(--hi-muted);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all var(--hi-trans);
text-decoration: none;
}
.hi-share-btn:hover {
border-color: var(--hi-honey);
color: var(--hi-ink);
background: var(--hi-honey-soft);
}
.hi-share-btn svg {
width: 16px;
height: 16px;
}
/* NEWSLETTER — Beehiiv form */
.hi-newsletter-beehiiv {
background:
linear-gradient(135deg, var(--hi-bg-2), var(--hi-honey-soft) 200%),
url("data:image/svg+xml;utf8,");
background-position: center, top right;
border-radius: var(--hi-radius-lg);
padding: var(--hi-space-7);
text-align: center;
border: 1px solid var(--hi-line);
}
.hi-newsletter-beehiiv iframe {
width: 100%;
max-width: 480px;
margin: 0 auto;
border: none;
background: transparent;
}
/* FOOTER NEWSLETTER (compact) */
.hi-footer-newsletter {
background: rgba(255, 255, 255, 0.06);
padding: var(--hi-space-5);
border-radius: var(--hi-radius);
margin-bottom: var(--hi-space-7);
}
.hi-footer-newsletter h4 {
color: white;
font-family: var(--hi-font-sans);
font-size: 14px;
font-weight: 600;
text-transform: none;
letter-spacing: 0;
margin: 0 0 8px;
}
.hi-footer-newsletter p {
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
margin: 0 0 var(--hi-space-3);
}
.hi-footer-newsletter form {
display: flex;
gap: 8px;
}
.hi-footer-newsletter input {
flex: 1;
padding: 8px 12px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--hi-radius-sm);
background: rgba(255, 255, 255, 0.05);
color: white;
font-family: var(--hi-font-sans);
font-size: 13px;
}
.hi-footer-newsletter input::placeholder { color: rgba(255, 255, 255, 0.4); }
.hi-footer-newsletter input:focus {
outline: none;
border-color: var(--hi-honey);
}
.hi-footer-newsletter button {
padding: 8px 14px;
background: var(--hi-honey);
color: var(--hi-ink);
border: none;
border-radius: var(--hi-radius-sm);
font-weight: 600;
font-size: 13px;
cursor: pointer;
transition: background var(--hi-trans);
}
.hi-footer-newsletter button:hover { background: #fbbf24; }
/* PRO WAITLIST CARD */
.hi-waitlist-card {
background: var(--hi-ink);
color: white;
border-radius: var(--hi-radius-lg);
padding: var(--hi-space-7);
text-align: center;
position: relative;
overflow: hidden;
margin: var(--hi-space-6) 0;
}
.hi-waitlist-card::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at top right, rgba(245, 158, 11, 0.3), transparent 50%),
radial-gradient(ellipse at bottom left, rgba(245, 158, 11, 0.15), transparent 50%),
url("data:image/svg+xml;utf8,");
background-repeat: no-repeat, no-repeat, repeat;
pointer-events: none;
}
.hi-waitlist-card > * { position: relative; z-index: 1; }
.hi-waitlist-card h2 {
color: white;
font-size: clamp(28px, 4vw, 40px);
margin: 0 0 var(--hi-space-3);
}
.hi-waitlist-card p {
color: rgba(255, 255, 255, 0.8);
margin: 0 auto var(--hi-space-5);
max-width: 520px;
font-size: 17px;
}
.hi-early-bird-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: var(--hi-honey);
color: var(--hi-ink);
border-radius: 999px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--hi-space-3);
}
.hi-waitlist-form {
display: flex;
gap: 8px;
max-width: 460px;
margin: 0 auto;
}
.hi-waitlist-form input {
flex: 1;
padding: 14px 18px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--hi-radius-sm);
background: rgba(255, 255, 255, 0.1);
color: white;
font-size: 15px;
font-family: var(--hi-font-sans);
}
.hi-waitlist-form input::placeholder { color: rgba(255, 255, 255, 0.5); }
.hi-waitlist-form input:focus {
outline: none;
border-color: var(--hi-honey);
background: rgba(255, 255, 255, 0.15);
}
@media (max-width: 600px) {
.hi-waitlist-form { flex-direction: column; }
}
/* CONTACT FORM */
.hi-form-card {
background: var(--hi-bg);
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius-lg);
padding: var(--hi-space-6);
max-width: 600px;
margin: 0 auto;
}
.hi-form-card label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--hi-ink);
margin-bottom: 6px;
}
.hi-form-card input,
.hi-form-card textarea,
.hi-form-card select {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius-sm);
background: var(--hi-bg);
font-size: 15px;
font-family: var(--hi-font-sans);
color: var(--hi-ink);
margin-bottom: var(--hi-space-4);
transition: border-color var(--hi-trans);
}
.hi-form-card textarea {
min-height: 140px;
resize: vertical;
}
.hi-form-card input:focus,
.hi-form-card textarea:focus,
.hi-form-card select:focus {
outline: none;
border-color: var(--hi-honey);
box-shadow: 0 0 0 3px var(--hi-honey-soft);
}
.hi-form-card .help-text {
font-size: 12px;
color: var(--hi-muted-2);
margin: -10px 0 var(--hi-space-3);
}
/* FAQ */
.hi-faq {
max-width: 720px;
margin: var(--hi-space-7) auto;
}
.hi-faq-item {
border-bottom: 1px solid var(--hi-line);
padding: var(--hi-space-4) 0;
}
.hi-faq-item summary {
font-weight: 600;
font-size: 16px;
cursor: pointer;
list-style: none;
color: var(--hi-ink);
padding-right: var(--hi-space-5);
position: relative;
}
.hi-faq-item summary::-webkit-details-marker { display: none; }
.hi-faq-item summary::after {
content: "+";
position: absolute;
right: 0;
top: 0;
font-size: 22px;
font-weight: 400;
color: var(--hi-honey-dark);
transition: transform var(--hi-trans);
}
.hi-faq-item[open] summary::after {
content: "−";
}
.hi-faq-item summary:hover { color: var(--hi-honey-dark); }
.hi-faq-item .faq-answer {
margin-top: var(--hi-space-3);
color: var(--hi-muted);
line-height: 1.6;
}
/* HOMEPAGE STATS ROW */
.hi-stats-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1px;
background: var(--hi-line);
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius);
overflow: hidden;
margin: var(--hi-space-7) 0;
}
.hi-stat-item {
background: var(--hi-bg);
padding: var(--hi-space-5);
text-align: center;
}
.hi-stat-number {
font-family: var(--hi-font-display);
font-size: 36px;
font-weight: 600;
color: var(--hi-honey-dark);
line-height: 1;
margin: 0 0 6px;
letter-spacing: -0.02em;
}
.hi-stat-label {
font-size: 13px;
color: var(--hi-muted);
font-weight: 500;
}
/* FIX HOMEPAGE EMPTY SPACE — category tiles use better grid */
.hi-cat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--hi-space-4);
}
/* On wide screens, ensure 5 tiles fit in one row when sidebar is present */
@media (min-width: 1200px) {
.hi-two-col .hi-cat-grid {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
}
}
/* AFFILIATE DISCLOSURE BANNER (footer + on relevant pages) */
.hi-affiliate-notice {
background: var(--hi-bg-2);
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius-sm);
padding: 10px 14px;
font-size: 12px;
color: var(--hi-muted);
margin: var(--hi-space-3) 0;
line-height: 1.5;
}
.hi-affiliate-notice a {
color: var(--hi-honey-dark);
text-decoration: underline;
}
/* ====================================================================
BEE / HONEYCOMB THEME ENHANCEMENTS
Append to bottom of style.css. Subtle, not cartoonish — uses
hexagonal motifs and warm honey tones as design language.
==================================================================== */
/* Honeycomb background pattern — used in hero and CTA sections */
.hi-hero {
background:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(245, 158, 11, 0.06), transparent 50%),
url("data:image/svg+xml;utf8,"),
var(--hi-bg);
background-position: center top, center top;
background-repeat: no-repeat, repeat;
}
/* Logo mark — make it look more bee-honeycomb-y */
.hi-logo-mark {
position: relative;
background: var(--hi-honey);
/* Subtle hexagon shape via clip-path on hover */
transition: clip-path var(--hi-trans), transform var(--hi-trans);
}
.hi-logo:hover .hi-logo-mark {
transform: rotate(15deg);
}
/* Featured badges — give them a hexagonal feel */
.hi-card-featured-badge {
background: var(--hi-honey);
position: relative;
}
/* Honeycomb cell pattern on CTA banner */
.hi-cta-banner {
background:
url("data:image/svg+xml;utf8,"),
var(--hi-ink);
background-repeat: repeat;
}
/* Quick-facts strip — subtle honeycomb pattern in the gap */
.hi-quickfacts {
background: var(--hi-line);
background-image:
linear-gradient(var(--hi-line), var(--hi-line)),
url("data:image/svg+xml;utf8,");
}
/* Eyebrow pill — make the dot look like a tiny honey drop */
.hi-eyebrow .dot {
background: radial-gradient(circle at 30% 30%, #fbbf24, var(--hi-honey-dark));
box-shadow: 0 1px 2px rgba(217, 119, 6, 0.3);
}
/* Hover on cards — gentle honey-glow */
.hi-card:hover {
border-color: var(--hi-honey);
box-shadow:
0 8px 24px rgba(15, 23, 42, 0.06),
0 0 0 1px var(--hi-honey),
0 4px 16px rgba(245, 158, 11, 0.08);
}
/* Newsletter section — honey gradient + subtle hexagons */
.hi-newsletter {
background:
linear-gradient(135deg, var(--hi-bg-2), var(--hi-honey-soft) 200%),
url("data:image/svg+xml;utf8,");
background-position: center, top right;
background-repeat: no-repeat, repeat;
}
/* Pro badge — hexagonal honey */
.hi-pro-badge {
background: linear-gradient(135deg, var(--hi-honey), #fbbf24);
box-shadow: 0 1px 3px rgba(217, 119, 6, 0.3);
}
/* Decorative bee divider — uses on empty states */
.hi-empty::before {
content: "🐝";
display: block;
font-size: 32px;
margin-bottom: var(--hi-space-3);
opacity: 0.5;
}
/* Paywall — make it feel premium with honey gradient */
.hi-paywall {
background:
linear-gradient(135deg, var(--hi-bg-2), var(--hi-honey-soft)),
url("data:image/svg+xml;utf8,");
background-position: center, top left;
}
/* Filter chips when active — honey gradient */
.hi-chip.is-active {
background: linear-gradient(135deg, var(--hi-ink), #1e293b);
color: white;
border-color: var(--hi-ink);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* Add a tiny honeycomb watermark to single page hero */
.hi-single-hero {
background:
linear-gradient(180deg, var(--hi-bg-2), transparent),
url("data:image/svg+xml;utf8,");
background-position: top center, bottom right;
background-repeat: no-repeat, no-repeat;
}
/* ====================================================================
PHASE 4 — PROSE FIX, PRICING TOGGLE, STRIPE FEEDBACK
Append to bottom of style.css.
Replaces hi-prose styles from Phase 3 with proper centering.
==================================================================== */
/* PROSE FIX — properly centered, generous spacing */
.hi-prose-section {
background: var(--hi-bg);
padding: var(--hi-space-8) var(--hi-space-4);
}
.hi-prose {
max-width: 680px;
margin: 0 auto;
padding: 0;
font-size: 17px;
line-height: 1.75;
color: var(--hi-ink-2);
}
.hi-prose > *:first-child { margin-top: 0; }
.hi-prose > *:last-child { margin-bottom: 0; }
.hi-prose h2 {
font-family: var(--hi-font-display);
font-size: 32px;
margin: var(--hi-space-7) 0 var(--hi-space-4);
color: var(--hi-ink);
letter-spacing: -0.02em;
line-height: 1.2;
font-weight: 600;
}
.hi-prose h2:first-child { margin-top: 0; }
.hi-prose h3 {
font-family: var(--hi-font-sans);
font-size: 20px;
font-weight: 600;
margin: var(--hi-space-6) 0 var(--hi-space-3);
color: var(--hi-ink);
}
.hi-prose p {
margin: 0 0 var(--hi-space-4);
color: var(--hi-ink-2);
}
.hi-prose p:last-child { margin-bottom: 0; }
.hi-prose ul,
.hi-prose ol {
margin: 0 0 var(--hi-space-5);
padding-left: var(--hi-space-5);
}
.hi-prose li {
margin-bottom: var(--hi-space-2);
color: var(--hi-ink-2);
}
.hi-prose li::marker { color: var(--hi-honey-dark); }
.hi-prose a {
color: var(--hi-honey-dark);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color var(--hi-trans);
}
.hi-prose a:hover {
color: var(--hi-ink);
text-decoration-thickness: 2px;
}
.hi-prose strong {
color: var(--hi-ink);
font-weight: 600;
}
.hi-prose code {
background: var(--hi-bg-2);
padding: 2px 7px;
border-radius: 5px;
font-family: var(--hi-font-mono);
font-size: 0.88em;
border: 1px solid var(--hi-line);
color: var(--hi-honey-dark);
}
.hi-prose blockquote {
margin: var(--hi-space-5) 0;
padding: var(--hi-space-4) var(--hi-space-5);
border-left: 3px solid var(--hi-honey);
background: var(--hi-bg-2);
border-radius: 0 var(--hi-radius-sm) var(--hi-radius-sm) 0;
font-style: italic;
color: var(--hi-ink-2);
}
.hi-prose hr {
border: none;
border-top: 1px solid var(--hi-line);
margin: var(--hi-space-7) 0;
}
/* SIMPLE PAGE HEADER — for prose pages (smaller than hi-page-header) */
.hi-prose-header {
background: var(--hi-bg);
padding: var(--hi-space-8) var(--hi-space-4) var(--hi-space-6);
text-align: center;
border-bottom: 1px solid var(--hi-line-2);
}
.hi-prose-header h1 {
font-size: clamp(34px, 4.5vw, 52px);
margin: 0 0 var(--hi-space-3);
letter-spacing: -0.025em;
line-height: 1.1;
}
.hi-prose-header h1 em {
font-style: italic;
color: var(--hi-honey-dark);
font-weight: 500;
}
.hi-prose-header .hi-prose-lead {
font-size: 18px;
color: var(--hi-muted);
max-width: 560px;
margin: 0 auto;
line-height: 1.5;
}
.hi-prose-header .hi-page-eyebrow {
margin-bottom: var(--hi-space-4);
}
/* PRICING TOGGLE — Monthly/Yearly switch */
.hi-pricing-toggle {
display: inline-flex;
align-items: center;
background: var(--hi-bg-2);
border: 1px solid var(--hi-line);
border-radius: 999px;
padding: 4px;
margin: var(--hi-space-3) auto var(--hi-space-5);
}
.hi-pricing-toggle button {
padding: 8px 22px;
background: transparent;
border: none;
color: var(--hi-muted);
font-size: 14px;
font-weight: 600;
cursor: pointer;
border-radius: 999px;
transition: all var(--hi-trans);
position: relative;
font-family: var(--hi-font-sans);
}
.hi-pricing-toggle button.is-active {
background: var(--hi-ink);
color: white;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
}
.hi-pricing-toggle button:not(.is-active):hover {
color: var(--hi-ink);
}
.hi-pricing-toggle .save-badge {
display: inline-block;
margin-left: 6px;
padding: 2px 8px;
background: var(--hi-honey);
color: var(--hi-ink);
font-size: 10px;
font-weight: 700;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Toggle-aware pricing display */
.hi-tier-price[data-period] { display: none; }
.hi-tier-price[data-period].is-visible { display: block; }
/* COMPARISON TABLE — clean 2-col layout */
.hi-comparison {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--hi-space-4);
margin: var(--hi-space-6) 0;
}
@media (max-width: 640px) {
.hi-comparison { grid-template-columns: 1fr; }
}
.hi-tier {
background: var(--hi-bg);
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius-lg);
padding: var(--hi-space-6);
position: relative;
transition: all var(--hi-trans);
}
.hi-tier:hover {
border-color: var(--hi-honey);
box-shadow: var(--hi-shadow-lg);
transform: translateY(-2px);
}
.hi-tier.is-recommended {
border-color: var(--hi-honey);
background:
linear-gradient(180deg, var(--hi-honey-soft), white 60%);
}
.hi-tier .tier-badge {
position: absolute;
top: 14px;
right: 14px;
background: var(--hi-honey);
color: var(--hi-ink);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 4px 10px;
border-radius: 999px;
}
.hi-tier .tier-name {
font-family: var(--hi-font-sans);
font-size: 14px;
font-weight: 600;
color: var(--hi-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 var(--hi-space-3);
}
.hi-tier .tier-price {
font-family: var(--hi-font-display);
font-size: 44px;
font-weight: 600;
color: var(--hi-ink);
line-height: 1;
margin: 0 0 var(--hi-space-2);
letter-spacing: -0.02em;
}
.hi-tier .tier-price small {
font-size: 16px;
color: var(--hi-muted);
font-weight: 400;
font-family: var(--hi-font-sans);
}
.hi-tier .tier-tagline {
color: var(--hi-muted);
font-size: 15px;
margin: 0 0 var(--hi-space-5);
min-height: 22px;
}
.hi-tier .tier-features {
list-style: none;
padding: 0;
margin: 0 0 var(--hi-space-5);
}
.hi-tier .tier-features li {
padding: 10px 0;
font-size: 14px;
color: var(--hi-ink-2);
border-bottom: 1px solid var(--hi-line-2);
display: flex;
align-items: flex-start;
gap: 10px;
}
.hi-tier .tier-features li:last-child { border-bottom: none; }
.hi-tier .tier-features li::before {
content: "✓";
color: var(--hi-honey-dark);
font-weight: bold;
flex-shrink: 0;
width: 16px;
}
.hi-tier .tier-features li.no::before {
content: "—";
color: var(--hi-muted-2);
}
.hi-tier .tier-cta {
width: 100%;
justify-content: center;
}
/* STRIPE FEEDBACK STATES */
.hi-stripe-message {
margin: var(--hi-space-4) 0;
padding: 14px 18px;
border-radius: var(--hi-radius);
font-size: 14px;
font-weight: 500;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.hi-stripe-message.success {
background: #d1fae5;
color: #065f46;
border: 1px solid #6ee7b7;
}
.hi-stripe-message.error {
background: #fee2e2;
color: #991b1b;
border: 1px solid #fca5a5;
}
.hi-stripe-message.info {
background: #dbeafe;
color: #1e40af;
border: 1px solid #93c5fd;
}
/* PAYMENT SUCCESS PAGE */
.hi-payment-success {
max-width: 560px;
margin: 0 auto;
text-align: center;
padding: var(--hi-space-8) var(--hi-space-4);
}
.hi-payment-success .success-icon {
width: 80px;
height: 80px;
margin: 0 auto var(--hi-space-5);
background: var(--hi-honey-soft);
border: 2px solid var(--hi-honey);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
}
.hi-payment-success h1 {
font-family: var(--hi-font-display);
font-size: 40px;
margin: 0 0 var(--hi-space-3);
letter-spacing: -0.02em;
}
.hi-payment-success p {
color: var(--hi-muted);
font-size: 17px;
margin-bottom: var(--hi-space-5);
line-height: 1.6;
}
.hi-payment-success .next-steps {
background: var(--hi-bg-2);
border-radius: var(--hi-radius-lg);
padding: var(--hi-space-5);
text-align: left;
margin: var(--hi-space-5) 0;
}
.hi-payment-success .next-steps h3 {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--hi-muted);
margin: 0 0 var(--hi-space-3);
}
.hi-payment-success .next-steps ol {
margin: 0;
padding-left: var(--hi-space-4);
}
.hi-payment-success .next-steps li {
padding: 6px 0;
color: var(--hi-ink-2);
}
/* RADIO TIER SELECTOR (for submit page) */
.hi-tier-selector {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--hi-space-3);
margin: var(--hi-space-4) 0;
}
@media (max-width: 600px) {
.hi-tier-selector { grid-template-columns: 1fr; }
}
.hi-tier-selector label {
display: block;
padding: var(--hi-space-4);
background: var(--hi-bg);
border: 2px solid var(--hi-line);
border-radius: var(--hi-radius);
cursor: pointer;
transition: all var(--hi-trans);
margin-bottom: 0 !important;
}
.hi-tier-selector label:hover {
border-color: var(--hi-honey);
background: var(--hi-honey-soft);
}
.hi-tier-selector input[type="radio"] {
margin-right: 8px;
accent-color: var(--hi-honey-dark);
}
.hi-tier-selector input[type="radio"]:checked + .tier-label {
color: var(--hi-honey-dark);
}
.hi-tier-selector label:has(input:checked) {
border-color: var(--hi-honey-dark);
background: var(--hi-honey-soft);
}
.hi-tier-selector .tier-label-row {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
font-size: 15px;
color: var(--hi-ink);
margin-bottom: 4px;
}
.hi-tier-selector .tier-price-tag {
font-family: var(--hi-font-display);
color: var(--hi-honey-dark);
font-size: 18px;
}
.hi-tier-selector .tier-desc {
font-size: 13px;
color: var(--hi-muted);
margin: 0;
margin-top: 2px;
}
/* MAKE EXISTING hi-page-header LESS TALL ON LONG PAGES (saves vertical space) */
.hi-page-header.is-compact {
padding: var(--hi-space-7) 0 var(--hi-space-5);
}
/* ====================================================================
PHASE 4 — SHARE BUTTONS REFINEMENT
Append to bottom of style.css. Overrides previous .hi-share styles
with a more refined, compact design.
==================================================================== */
.hi-share {
display: flex;
align-items: center;
gap: 8px;
margin: var(--hi-space-5) 0;
flex-wrap: wrap;
padding: var(--hi-space-3) 0;
border-top: 1px solid var(--hi-line-2);
border-bottom: 1px solid var(--hi-line-2);
}
.hi-share-label {
font-size: 11px;
font-weight: 600;
color: var(--hi-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-right: 4px;
flex-shrink: 0;
}
.hi-share-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 5px 10px;
border: 1px solid var(--hi-line);
border-radius: 6px;
background: var(--hi-bg);
color: var(--hi-muted);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 120ms ease;
text-decoration: none;
line-height: 1;
height: 28px;
}
.hi-share-btn:hover {
border-color: var(--hi-honey);
color: var(--hi-ink);
background: var(--hi-honey-soft);
transform: translateY(-1px);
}
.hi-share-btn svg {
width: 13px;
height: 13px;
flex-shrink: 0;
}
.hi-share-btn span {
display: inline-block;
line-height: 1;
}
/* On mobile, hide labels, just show icons */
@media (max-width: 540px) {
.hi-share-btn span:not(.hi-share-label) {
display: none;
}
.hi-share-btn {
width: 32px;
padding: 0;
}
.hi-share-btn svg {
width: 14px;
height: 14px;
}
}
/* ====================================================================
PHASE 4 — LAUNCH CALENDAR STYLES
Append to bottom of style.css.
==================================================================== */
.hi-launches {
margin: var(--hi-space-6) 0;
}
.hi-launch-month {
margin-bottom: var(--hi-space-7);
}
.hi-launch-month-label {
font-family: var(--hi-font-display);
font-size: 28px;
font-weight: 600;
color: var(--hi-ink);
margin: 0 0 var(--hi-space-4);
padding-bottom: var(--hi-space-2);
border-bottom: 1px solid var(--hi-line);
display: flex;
align-items: center;
gap: 10px;
letter-spacing: -0.015em;
}
.hi-launch-month-count {
background: var(--hi-honey-soft);
color: var(--hi-honey-dark);
font-family: var(--hi-font-sans);
font-size: 12px;
font-weight: 600;
padding: 3px 9px;
border-radius: 999px;
}
.hi-launch-list {
display: flex;
flex-direction: column;
gap: var(--hi-space-2);
}
.hi-launch-item {
display: grid;
grid-template-columns: 80px 1fr;
gap: var(--hi-space-4);
padding: var(--hi-space-4);
background: var(--hi-bg);
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius);
transition: all 150ms ease;
}
.hi-launch-item:hover {
border-color: var(--hi-honey);
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
transform: translateY(-1px);
}
.hi-launch-item.is-today {
border-color: var(--hi-honey);
background: var(--hi-honey-soft);
}
.hi-launch-item.is-soon {
border-left: 3px solid var(--hi-honey);
}
.hi-launch-date {
text-align: center;
padding: 8px 0;
border-right: 1px solid var(--hi-line-2);
padding-right: var(--hi-space-3);
}
.hi-launch-item.is-today .hi-launch-date {
color: var(--hi-honey-dark);
}
.hi-launch-day {
font-family: var(--hi-font-display);
font-size: 32px;
font-weight: 600;
line-height: 1;
color: var(--hi-ink);
letter-spacing: -0.02em;
}
.hi-launch-item.is-today .hi-launch-day {
color: var(--hi-honey-dark);
}
.hi-launch-weekday {
font-size: 11px;
font-weight: 600;
color: var(--hi-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 4px;
}
.hi-launch-body {
min-width: 0;
}
.hi-launch-title-row {
display: flex;
align-items: center;
gap: var(--hi-space-2);
flex-wrap: wrap;
margin-bottom: 6px;
}
.hi-launch-item h3 {
font-family: var(--hi-font-display);
font-size: 20px;
font-weight: 600;
margin: 0;
color: var(--hi-ink);
letter-spacing: -0.01em;
}
.hi-launch-cat {
background: var(--hi-bg-2);
color: var(--hi-muted);
font-size: 11px;
font-weight: 600;
padding: 3px 9px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.06em;
border: 1px solid var(--hi-line);
}
.hi-launch-tagline {
font-size: 15px;
color: var(--hi-ink-2);
margin: 0 0 var(--hi-space-2);
line-height: 1.5;
}
.hi-launch-meta {
display: flex;
gap: var(--hi-space-3);
font-size: 13px;
color: var(--hi-muted);
align-items: center;
}
.hi-launch-meta a {
color: var(--hi-honey-dark);
text-decoration: none;
font-weight: 500;
}
.hi-launch-meta a:hover {
text-decoration: underline;
}
/* Mobile */
@media (max-width: 600px) {
.hi-launch-item {
grid-template-columns: 64px 1fr;
gap: var(--hi-space-3);
padding: var(--hi-space-3);
}
.hi-launch-day {
font-size: 26px;
}
.hi-launch-item h3 {
font-size: 17px;
}
.hi-launch-month-label {
font-size: 22px;
}
}
/* Homepage upcoming launches teaser */
.hi-launches-teaser {
margin: var(--hi-space-5) 0;
}
.hi-launches-teaser-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--hi-space-3);
}
.hi-launch-teaser-item {
background: var(--hi-bg);
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius);
padding: var(--hi-space-4);
display: flex;
gap: var(--hi-space-3);
transition: all 150ms ease;
}
.hi-launch-teaser-item:hover {
border-color: var(--hi-honey);
transform: translateY(-1px);
}
.hi-launch-teaser-date {
text-align: center;
flex-shrink: 0;
padding-right: var(--hi-space-3);
border-right: 1px solid var(--hi-line-2);
}
.hi-launch-teaser-month {
font-size: 10px;
font-weight: 700;
color: var(--hi-honey-dark);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.hi-launch-teaser-day {
font-family: var(--hi-font-display);
font-size: 24px;
font-weight: 600;
line-height: 1;
color: var(--hi-ink);
margin-top: 4px;
}
/* ====================================================================
PHASE 4B — MOBILE MENU + MISC FIXES
Append to bottom of style.css
==================================================================== */
/* MOBILE MENU TOGGLE BUTTON — show only on mobile */
.hi-menu-toggle {
display: none;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
margin-left: 8px;
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius-sm);
background: var(--hi-bg);
color: var(--hi-ink);
cursor: pointer;
transition: all 150ms ease;
}
.hi-menu-toggle:hover {
border-color: var(--hi-honey);
background: var(--hi-honey-soft);
}
.hi-menu-toggle svg {
width: 22px;
height: 22px;
}
/* Mobile-only menu items: hidden on desktop, shown in mobile menu */
.hi-nav-mobile-only {
display: none;
}
/* MOBILE BREAKPOINT — show toggle, hide nav until opened */
@media (max-width: 900px) {
/* Show the hamburger */
.hi-menu-toggle {
display: inline-flex;
}
/* Hide the desktop nav and search by default */
.hi-nav {
position: fixed;
top: 64px; /* below header */
left: 0;
right: 0;
bottom: 0;
background: var(--hi-bg);
padding: var(--hi-space-5);
z-index: 99;
transform: translateY(-100vh);
transition: transform 250ms ease;
overflow-y: auto;
border-top: 1px solid var(--hi-line);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.hi-nav.is-open {
transform: translateY(0);
}
.hi-nav-list {
display: flex !important;
flex-direction: column;
gap: 0;
align-items: stretch;
}
.hi-nav-list li {
border-bottom: 1px solid var(--hi-line-2);
}
.hi-nav-list li:last-child {
border-bottom: none;
}
.hi-nav-list a {
display: block;
padding: var(--hi-space-4) var(--hi-space-2);
font-size: 17px;
font-weight: 500;
color: var(--hi-ink) !important;
}
.hi-nav-list a:hover {
background: var(--hi-bg-2);
color: var(--hi-honey-dark) !important;
}
.hi-nav-mobile-only {
display: block;
}
.hi-nav-mobile-only a {
color: var(--hi-muted) !important;
font-weight: 400;
}
/* Header layout adjusts on mobile */
.hi-header-search {
display: none;
}
.hi-header-cta {
display: none; /* The "Submit" button is in mobile menu instead */
}
/* Body scroll lock when menu is open */
body.hi-menu-open {
overflow: hidden;
}
}
/* TERMS CHECKBOX (submit form) */
.hi-terms-check {
display: flex;
gap: 10px;
align-items: flex-start;
padding: var(--hi-space-3) var(--hi-space-4);
background: var(--hi-bg-2);
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius-sm);
margin-bottom: var(--hi-space-4) !important;
cursor: pointer;
}
.hi-terms-check input[type="checkbox"] {
width: auto !important;
margin: 4px 0 0 0 !important;
flex-shrink: 0;
accent-color: var(--hi-honey-dark);
transform: scale(1.1);
}
.hi-terms-check-label {
font-size: 13px;
line-height: 1.5;
color: var(--hi-ink-2);
margin: 0 !important;
font-weight: 400 !important;
cursor: pointer;
}
.hi-terms-check-label a {
color: var(--hi-honey-dark);
text-decoration: underline;
font-weight: 500;
}
/* "OTHER - specify" reveal field */
.hi-other-reveal {
display: none;
margin-top: -8px;
margin-bottom: var(--hi-space-4);
padding-left: var(--hi-space-3);
border-left: 3px solid var(--hi-honey);
}
.hi-other-reveal.is-visible {
display: block;
}
.hi-other-reveal input {
margin-bottom: 0 !important;
}
/* HEADER on mobile keeps logo + hamburger visible */
@media (max-width: 900px) {
.hi-header-inner {
gap: 8px;
}
.hi-logo span:not(.hi-logo-mark) {
font-size: 18px;
}
}
/* ====================================================================
PHASE 4B — MOBILE MENU + MISC FIXES
Append to bottom of style.css
==================================================================== */
/* MOBILE MENU TOGGLE BUTTON — show only on mobile */
.hi-menu-toggle {
display: none;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
margin-left: 8px;
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius-sm);
background: var(--hi-bg);
color: var(--hi-ink);
cursor: pointer;
transition: all 150ms ease;
}
.hi-menu-toggle:hover {
border-color: var(--hi-honey);
background: var(--hi-honey-soft);
}
.hi-menu-toggle svg {
width: 22px;
height: 22px;
}
/* Mobile-only menu items: hidden on desktop, shown in mobile menu */
.hi-nav-mobile-only {
display: none;
}
/* MOBILE BREAKPOINT — show toggle, hide nav until opened */
@media (max-width: 900px) {
/* Show the hamburger */
.hi-menu-toggle {
display: inline-flex;
}
/* Hide the desktop nav and search by default */
.hi-nav {
position: fixed;
top: 64px; /* below header */
left: 0;
right: 0;
bottom: 0;
background: var(--hi-bg);
padding: var(--hi-space-5);
z-index: 99;
transform: translateY(-100vh);
transition: transform 250ms ease;
overflow-y: auto;
border-top: 1px solid var(--hi-line);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.hi-nav.is-open {
transform: translateY(0);
}
.hi-nav-list {
display: flex !important;
flex-direction: column;
gap: 0;
align-items: stretch;
}
.hi-nav-list li {
border-bottom: 1px solid var(--hi-line-2);
}
.hi-nav-list li:last-child {
border-bottom: none;
}
.hi-nav-list a {
display: block;
padding: var(--hi-space-4) var(--hi-space-2);
font-size: 17px;
font-weight: 500;
color: var(--hi-ink) !important;
}
.hi-nav-list a:hover {
background: var(--hi-bg-2);
color: var(--hi-honey-dark) !important;
}
.hi-nav-mobile-only {
display: block;
}
.hi-nav-mobile-only a {
color: var(--hi-muted) !important;
font-weight: 400;
}
/* Header layout adjusts on mobile */
.hi-header-search {
display: none;
}
.hi-header-cta {
display: none; /* The "Submit" button is in mobile menu instead */
}
/* Body scroll lock when menu is open */
body.hi-menu-open {
overflow: hidden;
}
}
/* TERMS CHECKBOX (submit form) */
.hi-terms-check {
display: flex;
gap: 10px;
align-items: flex-start;
padding: var(--hi-space-3) var(--hi-space-4);
background: var(--hi-bg-2);
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius-sm);
margin-bottom: var(--hi-space-4) !important;
cursor: pointer;
}
.hi-terms-check input[type="checkbox"] {
width: auto !important;
margin: 4px 0 0 0 !important;
flex-shrink: 0;
accent-color: var(--hi-honey-dark);
transform: scale(1.1);
}
.hi-terms-check-label {
font-size: 13px;
line-height: 1.5;
color: var(--hi-ink-2);
margin: 0 !important;
font-weight: 400 !important;
cursor: pointer;
}
.hi-terms-check-label a {
color: var(--hi-honey-dark);
text-decoration: underline;
font-weight: 500;
}
/* "OTHER - specify" reveal field */
.hi-other-reveal {
display: none;
margin-top: -8px;
margin-bottom: var(--hi-space-4);
padding-left: var(--hi-space-3);
border-left: 3px solid var(--hi-honey);
}
.hi-other-reveal.is-visible {
display: block;
}
.hi-other-reveal input {
margin-bottom: 0 !important;
}
/* HEADER on mobile keeps logo + hamburger visible */
@media (max-width: 900px) {
.hi-header-inner {
gap: 8px;
}
.hi-logo span:not(.hi-logo-mark) {
font-size: 18px;
}
}
/* ====================================================================
PHASE 5B — AVATAR FIX (AGGRESSIVE) + SIGNUP POLISH + ADVERTISE REBUILD
Append to bottom of style.css. Overrides earlier styles where needed.
==================================================================== */
/* ============================================================
AVATAR PLACEHOLDER — MAKE IT MATCH LLMs (HONEY GRADIENT)
This overrides the plain styles from earlier CSS.
============================================================ */
.hi-card-logo-placeholder {
width: 48px;
height: 48px;
border-radius: var(--hi-radius-sm);
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%) !important;
color: #d97706 !important;
border: 1px solid #fcd34d !important;
margin-bottom: var(--hi-space-4);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--hi-font-display);
font-size: 22px;
font-weight: 700;
line-height: 1;
box-shadow:
0 1px 2px rgba(217, 119, 6, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
transition: all 200ms ease;
flex-shrink: 0;
}
/* Inside a table row, make it appropriate size */
.hi-table-name .hi-card-logo-placeholder {
width: 40px !important;
height: 40px !important;
margin: 0 !important;
font-size: 17px !important;
}
/* Hover effect on table rows lifts the avatar */
.hi-table tbody tr {
transition: background 150ms ease;
}
.hi-table tbody tr:hover {
background: linear-gradient(90deg, transparent 0%, rgba(245, 158, 11, 0.04) 100%);
}
.hi-table tbody tr:hover .hi-card-logo-placeholder {
transform: scale(1.08);
background: linear-gradient(135deg, #fde68a 0%, #fbbf24 50%, #f59e0b 100%) !important;
border-color: #f59e0b !important;
color: #92400e !important;
box-shadow:
0 3px 8px rgba(217, 119, 6, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* Real logo images in tables */
.hi-table-name img.hi-card-logo {
width: 40px !important;
height: 40px !important;
margin: 0 !important;
border-radius: 8px;
border: 1px solid var(--hi-line);
object-fit: contain;
padding: 4px;
background: white;
transition: all 200ms ease;
flex-shrink: 0;
}
.hi-table tbody tr:hover .hi-card-logo {
border-color: var(--hi-honey);
transform: scale(1.05);
}
/* Ensure name-block has good vertical rhythm with strong + small */
.hi-table-name .name-block {
line-height: 1.35;
min-width: 0;
}
.hi-table-name .name-block strong {
display: block;
font-weight: 600;
color: var(--hi-ink);
font-size: 15px;
margin-bottom: 2px;
}
.hi-table-name .name-block strong a {
color: var(--hi-ink);
text-decoration: none;
}
.hi-table-name .name-block strong a:hover {
color: var(--hi-honey-dark);
}
.hi-table-name .name-block small {
color: var(--hi-muted-2);
font-size: 13px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 360px;
}
/* ============================================================
SIGNUP PAGE — PROPER CENTERING + POLISH
Override earlier loose styles
============================================================ */
.hi-signup-section {
background: var(--hi-bg);
padding: var(--hi-space-7) var(--hi-space-4);
}
.hi-signup-container {
max-width: 720px;
margin: 0 auto;
}
.hi-signup-tabs {
display: flex;
background: var(--hi-bg-2);
border: 1px solid var(--hi-line);
border-radius: 999px;
padding: 4px;
margin: 0 auto var(--hi-space-5);
max-width: 360px;
}
.hi-signup-tab {
flex: 1;
padding: 10px 18px;
background: transparent;
border: none;
color: var(--hi-muted);
font-size: 14px;
font-weight: 600;
cursor: pointer;
border-radius: 999px;
transition: all var(--hi-trans);
font-family: var(--hi-font-sans);
text-align: center;
}
.hi-signup-tab.is-active {
background: var(--hi-ink);
color: white;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
}
.hi-signup-panel {
display: none;
}
.hi-signup-panel.is-active {
display: block;
}
.hi-signup-panel-header {
text-align: center;
margin-bottom: var(--hi-space-5);
}
.hi-signup-panel-header h2 {
font-family: var(--hi-font-display);
font-size: clamp(24px, 3vw, 32px);
margin: 0 0 var(--hi-space-2);
color: var(--hi-ink);
letter-spacing: -0.02em;
}
.hi-signup-panel-header p {
color: var(--hi-muted);
margin: 0;
font-size: 16px;
max-width: 460px;
margin-left: auto;
margin-right: auto;
}
/* On the free signup panel, the form should be centered + max-width */
.hi-signup-panel-free .hi-form-card {
max-width: 520px;
margin: 0 auto;
}
/* Pro panel: comparison table looks similar to /pro/ page */
.hi-signup-panel-pro .hi-comparison {
grid-template-columns: 1fr 1fr;
max-width: 720px;
margin: 0 auto;
}
@media (max-width: 700px) {
.hi-signup-panel-pro .hi-comparison {
grid-template-columns: 1fr;
}
}
/* ============================================================
CUSTOM LOGIN PAGE
============================================================ */
.hi-login-card {
background: var(--hi-bg);
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius-lg);
padding: var(--hi-space-7);
max-width: 440px;
margin: 0 auto;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}
.hi-login-card h2 {
font-family: var(--hi-font-display);
font-size: 28px;
margin: 0 0 var(--hi-space-2);
color: var(--hi-ink);
text-align: center;
letter-spacing: -0.02em;
}
.hi-login-card .login-subtitle {
text-align: center;
color: var(--hi-muted);
margin: 0 0 var(--hi-space-5);
font-size: 15px;
}
.hi-login-card label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--hi-ink);
margin-bottom: 6px;
}
.hi-login-card input[type="text"],
.hi-login-card input[type="email"],
.hi-login-card input[type="password"] {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius-sm);
background: var(--hi-bg);
font-size: 15px;
font-family: var(--hi-font-sans);
color: var(--hi-ink);
margin-bottom: var(--hi-space-4);
transition: border-color var(--hi-trans);
box-sizing: border-box;
}
.hi-login-card input:focus {
outline: none;
border-color: var(--hi-honey);
box-shadow: 0 0 0 3px var(--hi-honey-soft);
}
.hi-login-card .remember-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--hi-space-4);
font-size: 13px;
}
.hi-login-card .remember-row label {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
font-weight: 400;
color: var(--hi-muted);
cursor: pointer;
}
.hi-login-card .remember-row input[type="checkbox"] {
width: auto;
margin: 0;
accent-color: var(--hi-honey-dark);
}
.hi-login-card .forgot-link {
color: var(--hi-honey-dark);
text-decoration: none;
font-size: 13px;
}
.hi-login-card .forgot-link:hover {
text-decoration: underline;
}
.hi-login-card button[type="submit"] {
width: 100%;
justify-content: center;
padding: 12px;
font-size: 15px;
}
.hi-login-footer {
text-align: center;
margin-top: var(--hi-space-5);
padding-top: var(--hi-space-4);
border-top: 1px solid var(--hi-line-2);
font-size: 14px;
color: var(--hi-muted);
}
.hi-login-footer a {
color: var(--hi-honey-dark);
text-decoration: none;
font-weight: 600;
}
.hi-login-footer a:hover {
text-decoration: underline;
}
/* Login error message */
.hi-login-error {
background: #fee2e2;
color: #991b1b;
border: 1px solid #fca5a5;
border-radius: var(--hi-radius-sm);
padding: 10px 14px;
font-size: 14px;
margin-bottom: var(--hi-space-4);
text-align: center;
}
/* ============================================================
HEADER — ADD LOGIN/SIGNUP LINKS
============================================================ */
.hi-header-auth {
display: flex;
align-items: center;
gap: 6px;
margin-right: 8px;
}
.hi-header-auth a {
padding: 6px 12px;
border-radius: var(--hi-radius-sm);
font-size: 13px;
font-weight: 600;
text-decoration: none;
color: var(--hi-ink);
transition: all var(--hi-trans);
}
.hi-header-auth a.hi-login-link {
color: var(--hi-muted);
}
.hi-header-auth a.hi-login-link:hover {
color: var(--hi-ink);
}
.hi-header-auth a.hi-signup-link {
background: var(--hi-bg-2);
border: 1px solid var(--hi-line);
}
.hi-header-auth a.hi-signup-link:hover {
background: var(--hi-honey-soft);
border-color: var(--hi-honey);
color: var(--hi-honey-dark);
}
.hi-header-account {
display: flex;
align-items: center;
gap: 8px;
margin-right: 8px;
padding: 4px 10px 4px 4px;
background: var(--hi-bg-2);
border: 1px solid var(--hi-line);
border-radius: 999px;
font-size: 13px;
color: var(--hi-ink);
text-decoration: none;
}
.hi-header-account:hover {
border-color: var(--hi-honey);
background: var(--hi-honey-soft);
}
.hi-header-account-avatar {
width: 26px;
height: 26px;
border-radius: 50%;
background: linear-gradient(135deg, #fde68a, #f59e0b);
color: var(--hi-ink);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 12px;
font-family: var(--hi-font-display);
}
.hi-header-account-tier {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--hi-honey-dark);
}
@media (max-width: 900px) {
.hi-header-auth { display: none; }
.hi-header-account { display: none; }
/* Mobile menu handles these via .hi-nav-mobile-only items */
}
/* ============================================================
ADVERTISE PAGE — UNIFIED WITH PRO PAGE STYLING
============================================================ */
/* The product grid uses the same .hi-comparison + .hi-tier components
as the Pro page. Below we add some advertise-specific extras. */
.hi-advertise-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--hi-space-4);
margin: var(--hi-space-6) 0;
}
@media (max-width: 980px) {
.hi-advertise-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.hi-advertise-grid {
grid-template-columns: 1fr;
}
}
/* Advertise tier reuses .hi-tier styling for consistency */
.hi-advertise-grid .hi-tier {
padding: var(--hi-space-5);
}
.hi-advertise-grid .hi-tier .tier-name {
font-size: 13px;
margin-bottom: var(--hi-space-2);
}
.hi-advertise-grid .hi-tier .tier-headline {
font-family: var(--hi-font-display);
font-size: 19px;
font-weight: 600;
color: var(--hi-ink);
margin: 0 0 var(--hi-space-2);
letter-spacing: -0.01em;
line-height: 1.2;
}
.hi-advertise-grid .hi-tier .tier-price {
font-size: 36px;
margin-bottom: var(--hi-space-2);
}
.hi-advertise-grid .hi-tier .tier-tagline {
font-size: 13px;
min-height: auto;
margin-bottom: var(--hi-space-4);
}
/* Selected state when user clicks a tier */
.hi-advertise-grid .hi-tier.is-selected {
border-color: var(--hi-honey-dark);
background: var(--hi-honey-soft);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(217, 119, 6, 0.15);
}
.hi-advertise-grid .hi-tier.is-selected .tier-cta {
background: var(--hi-honey-dark);
color: white;
}
/* The form below — uses standard hi-form-card */
.hi-advertise-order-section {
background: var(--hi-bg-2);
border-radius: var(--hi-radius-lg);
padding: var(--hi-space-7) var(--hi-space-5);
margin-top: var(--hi-space-7);
border: 1px solid var(--hi-line);
}
.hi-advertise-order-section .hi-form-card {
max-width: 600px;
margin: 0 auto;
}
.hi-advertise-order-section .selected-banner {
background: white;
border: 1px solid var(--hi-honey);
border-radius: var(--hi-radius);
padding: var(--hi-space-3) var(--hi-space-4);
margin-bottom: var(--hi-space-5);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--hi-space-3);
flex-wrap: wrap;
}
.hi-advertise-order-section .selected-banner-label {
font-size: 11px;
color: var(--hi-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
margin-bottom: 2px;
}
.hi-advertise-order-section .selected-banner-name {
font-family: var(--hi-font-display);
font-size: 18px;
font-weight: 600;
color: var(--hi-ink);
}
.hi-advertise-order-section .selected-banner-price {
font-family: var(--hi-font-display);
font-size: 22px;
font-weight: 600;
color: var(--hi-honey-dark);
}
.hi-advertise-order-section h2 {
text-align: center;
font-family: var(--hi-font-display);
font-size: 28px;
margin: 0 0 var(--hi-space-3);
letter-spacing: -0.02em;
}
.hi-advertise-order-section .form-intro {
text-align: center;
color: var(--hi-muted);
margin: 0 auto var(--hi-space-5);
max-width: 500px;
font-size: 15px;
}
/* Disabled form state — before product selection */
.hi-advertise-order-section.is-empty .hi-form-card {
opacity: 0.4;
pointer-events: none;
}
.hi-advertise-order-section.is-empty .selected-banner {
background: var(--hi-bg-2);
border-color: var(--hi-line);
}
.hi-advertise-order-section.is-empty .selected-banner-name {
color: var(--hi-muted-2);
}
.hi-advertise-order-section.is-empty .selected-banner-price {
color: var(--hi-muted-2);
}
/* On mobile order section shouldn't be too padded */
@media (max-width: 640px) {
.hi-advertise-order-section {
padding: var(--hi-space-5) var(--hi-space-3);
}
}
/* ====================================================================
PHASE 5B — AVATAR FIX (AGGRESSIVE) + SIGNUP POLISH + ADVERTISE REBUILD
Append to bottom of style.css. Overrides earlier styles where needed.
==================================================================== */
/* ============================================================
AVATAR PLACEHOLDER — MAKE IT MATCH LLMs (HONEY GRADIENT)
This overrides the plain styles from earlier CSS.
============================================================ */
.hi-card-logo-placeholder {
width: 48px;
height: 48px;
border-radius: var(--hi-radius-sm);
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%) !important;
color: #d97706 !important;
border: 1px solid #fcd34d !important;
margin-bottom: var(--hi-space-4);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--hi-font-display);
font-size: 22px;
font-weight: 700;
line-height: 1;
box-shadow:
0 1px 2px rgba(217, 119, 6, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
transition: all 200ms ease;
flex-shrink: 0;
}
/* Inside a table row, make it appropriate size */
.hi-table-name .hi-card-logo-placeholder {
width: 40px !important;
height: 40px !important;
margin: 0 !important;
font-size: 17px !important;
}
/* Hover effect on table rows lifts the avatar */
.hi-table tbody tr {
transition: background 150ms ease;
}
.hi-table tbody tr:hover {
background: linear-gradient(90deg, transparent 0%, rgba(245, 158, 11, 0.04) 100%);
}
.hi-table tbody tr:hover .hi-card-logo-placeholder {
transform: scale(1.08);
background: linear-gradient(135deg, #fde68a 0%, #fbbf24 50%, #f59e0b 100%) !important;
border-color: #f59e0b !important;
color: #92400e !important;
box-shadow:
0 3px 8px rgba(217, 119, 6, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* Real logo images in tables */
.hi-table-name img.hi-card-logo {
width: 40px !important;
height: 40px !important;
margin: 0 !important;
border-radius: 8px;
border: 1px solid var(--hi-line);
object-fit: contain;
padding: 4px;
background: white;
transition: all 200ms ease;
flex-shrink: 0;
}
.hi-table tbody tr:hover .hi-card-logo {
border-color: var(--hi-honey);
transform: scale(1.05);
}
/* Ensure name-block has good vertical rhythm with strong + small */
.hi-table-name .name-block {
line-height: 1.35;
min-width: 0;
}
.hi-table-name .name-block strong {
display: block;
font-weight: 600;
color: var(--hi-ink);
font-size: 15px;
margin-bottom: 2px;
}
.hi-table-name .name-block strong a {
color: var(--hi-ink);
text-decoration: none;
}
.hi-table-name .name-block strong a:hover {
color: var(--hi-honey-dark);
}
.hi-table-name .name-block small {
color: var(--hi-muted-2);
font-size: 13px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 360px;
}
/* ============================================================
SIGNUP PAGE — PROPER CENTERING + POLISH
Override earlier loose styles
============================================================ */
.hi-signup-section {
background: var(--hi-bg);
padding: var(--hi-space-7) var(--hi-space-4);
}
.hi-signup-container {
max-width: 720px;
margin: 0 auto;
}
.hi-signup-tabs {
display: flex;
background: var(--hi-bg-2);
border: 1px solid var(--hi-line);
border-radius: 999px;
padding: 4px;
margin: 0 auto var(--hi-space-5);
max-width: 360px;
}
.hi-signup-tab {
flex: 1;
padding: 10px 18px;
background: transparent;
border: none;
color: var(--hi-muted);
font-size: 14px;
font-weight: 600;
cursor: pointer;
border-radius: 999px;
transition: all var(--hi-trans);
font-family: var(--hi-font-sans);
text-align: center;
}
.hi-signup-tab.is-active {
background: var(--hi-ink);
color: white;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
}
.hi-signup-panel {
display: none;
}
.hi-signup-panel.is-active {
display: block;
}
.hi-signup-panel-header {
text-align: center;
margin-bottom: var(--hi-space-5);
}
.hi-signup-panel-header h2 {
font-family: var(--hi-font-display);
font-size: clamp(24px, 3vw, 32px);
margin: 0 0 var(--hi-space-2);
color: var(--hi-ink);
letter-spacing: -0.02em;
}
.hi-signup-panel-header p {
color: var(--hi-muted);
margin: 0;
font-size: 16px;
max-width: 460px;
margin-left: auto;
margin-right: auto;
}
/* On the free signup panel, the form should be centered + max-width */
.hi-signup-panel-free .hi-form-card {
max-width: 520px;
margin: 0 auto;
}
/* Pro panel: comparison table looks similar to /pro/ page */
.hi-signup-panel-pro .hi-comparison {
grid-template-columns: 1fr 1fr;
max-width: 720px;
margin: 0 auto;
}
@media (max-width: 700px) {
.hi-signup-panel-pro .hi-comparison {
grid-template-columns: 1fr;
}
}
/* ============================================================
CUSTOM LOGIN PAGE
============================================================ */
.hi-login-card {
background: var(--hi-bg);
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius-lg);
padding: var(--hi-space-7);
max-width: 440px;
margin: 0 auto;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}
.hi-login-card h2 {
font-family: var(--hi-font-display);
font-size: 28px;
margin: 0 0 var(--hi-space-2);
color: var(--hi-ink);
text-align: center;
letter-spacing: -0.02em;
}
.hi-login-card .login-subtitle {
text-align: center;
color: var(--hi-muted);
margin: 0 0 var(--hi-space-5);
font-size: 15px;
}
.hi-login-card label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--hi-ink);
margin-bottom: 6px;
}
.hi-login-card input[type="text"],
.hi-login-card input[type="email"],
.hi-login-card input[type="password"] {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius-sm);
background: var(--hi-bg);
font-size: 15px;
font-family: var(--hi-font-sans);
color: var(--hi-ink);
margin-bottom: var(--hi-space-4);
transition: border-color var(--hi-trans);
box-sizing: border-box;
}
.hi-login-card input:focus {
outline: none;
border-color: var(--hi-honey);
box-shadow: 0 0 0 3px var(--hi-honey-soft);
}
.hi-login-card .remember-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--hi-space-4);
font-size: 13px;
}
.hi-login-card .remember-row label {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
font-weight: 400;
color: var(--hi-muted);
cursor: pointer;
}
.hi-login-card .remember-row input[type="checkbox"] {
width: auto;
margin: 0;
accent-color: var(--hi-honey-dark);
}
.hi-login-card .forgot-link {
color: var(--hi-honey-dark);
text-decoration: none;
font-size: 13px;
}
.hi-login-card .forgot-link:hover {
text-decoration: underline;
}
.hi-login-card button[type="submit"] {
width: 100%;
justify-content: center;
padding: 12px;
font-size: 15px;
}
.hi-login-footer {
text-align: center;
margin-top: var(--hi-space-5);
padding-top: var(--hi-space-4);
border-top: 1px solid var(--hi-line-2);
font-size: 14px;
color: var(--hi-muted);
}
.hi-login-footer a {
color: var(--hi-honey-dark);
text-decoration: none;
font-weight: 600;
}
.hi-login-footer a:hover {
text-decoration: underline;
}
/* Login error message */
.hi-login-error {
background: #fee2e2;
color: #991b1b;
border: 1px solid #fca5a5;
border-radius: var(--hi-radius-sm);
padding: 10px 14px;
font-size: 14px;
margin-bottom: var(--hi-space-4);
text-align: center;
}
/* ============================================================
HEADER — ADD LOGIN/SIGNUP LINKS
============================================================ */
.hi-header-auth {
display: flex;
align-items: center;
gap: 6px;
margin-right: 8px;
}
.hi-header-auth a {
padding: 6px 12px;
border-radius: var(--hi-radius-sm);
font-size: 13px;
font-weight: 600;
text-decoration: none;
color: var(--hi-ink);
transition: all var(--hi-trans);
}
.hi-header-auth a.hi-login-link {
color: var(--hi-muted);
}
.hi-header-auth a.hi-login-link:hover {
color: var(--hi-ink);
}
.hi-header-auth a.hi-signup-link {
background: var(--hi-bg-2);
border: 1px solid var(--hi-line);
}
.hi-header-auth a.hi-signup-link:hover {
background: var(--hi-honey-soft);
border-color: var(--hi-honey);
color: var(--hi-honey-dark);
}
.hi-header-account {
display: flex;
align-items: center;
gap: 8px;
margin-right: 8px;
padding: 4px 10px 4px 4px;
background: var(--hi-bg-2);
border: 1px solid var(--hi-line);
border-radius: 999px;
font-size: 13px;
color: var(--hi-ink);
text-decoration: none;
}
.hi-header-account:hover {
border-color: var(--hi-honey);
background: var(--hi-honey-soft);
}
.hi-header-account-avatar {
width: 26px;
height: 26px;
border-radius: 50%;
background: linear-gradient(135deg, #fde68a, #f59e0b);
color: var(--hi-ink);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 12px;
font-family: var(--hi-font-display);
}
.hi-header-account-tier {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--hi-honey-dark);
}
@media (max-width: 900px) {
.hi-header-auth { display: none; }
.hi-header-account { display: none; }
/* Mobile menu handles these via .hi-nav-mobile-only items */
}
/* ============================================================
ADVERTISE PAGE — UNIFIED WITH PRO PAGE STYLING
============================================================ */
/* The product grid uses the same .hi-comparison + .hi-tier components
as the Pro page. Below we add some advertise-specific extras. */
.hi-advertise-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--hi-space-4);
margin: var(--hi-space-6) 0;
}
@media (max-width: 980px) {
.hi-advertise-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.hi-advertise-grid {
grid-template-columns: 1fr;
}
}
/* Advertise tier reuses .hi-tier styling for consistency */
.hi-advertise-grid .hi-tier {
padding: var(--hi-space-5);
}
.hi-advertise-grid .hi-tier .tier-name {
font-size: 13px;
margin-bottom: var(--hi-space-2);
}
.hi-advertise-grid .hi-tier .tier-headline {
font-family: var(--hi-font-display);
font-size: 19px;
font-weight: 600;
color: var(--hi-ink);
margin: 0 0 var(--hi-space-2);
letter-spacing: -0.01em;
line-height: 1.2;
}
.hi-advertise-grid .hi-tier .tier-price {
font-size: 36px;
margin-bottom: var(--hi-space-2);
}
.hi-advertise-grid .hi-tier .tier-tagline {
font-size: 13px;
min-height: auto;
margin-bottom: var(--hi-space-4);
}
/* Selected state when user clicks a tier */
.hi-advertise-grid .hi-tier.is-selected {
border-color: var(--hi-honey-dark);
background: var(--hi-honey-soft);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(217, 119, 6, 0.15);
}
.hi-advertise-grid .hi-tier.is-selected .tier-cta {
background: var(--hi-honey-dark);
color: white;
}
/* The form below — uses standard hi-form-card */
.hi-advertise-order-section {
background: var(--hi-bg-2);
border-radius: var(--hi-radius-lg);
padding: var(--hi-space-7) var(--hi-space-5);
margin-top: var(--hi-space-7);
border: 1px solid var(--hi-line);
}
.hi-advertise-order-section .hi-form-card {
max-width: 600px;
margin: 0 auto;
}
.hi-advertise-order-section .selected-banner {
background: white;
border: 1px solid var(--hi-honey);
border-radius: var(--hi-radius);
padding: var(--hi-space-3) var(--hi-space-4);
margin-bottom: var(--hi-space-5);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--hi-space-3);
flex-wrap: wrap;
}
.hi-advertise-order-section .selected-banner-label {
font-size: 11px;
color: var(--hi-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
margin-bottom: 2px;
}
.hi-advertise-order-section .selected-banner-name {
font-family: var(--hi-font-display);
font-size: 18px;
font-weight: 600;
color: var(--hi-ink);
}
.hi-advertise-order-section .selected-banner-price {
font-family: var(--hi-font-display);
font-size: 22px;
font-weight: 600;
color: var(--hi-honey-dark);
}
.hi-advertise-order-section h2 {
text-align: center;
font-family: var(--hi-font-display);
font-size: 28px;
margin: 0 0 var(--hi-space-3);
letter-spacing: -0.02em;
}
.hi-advertise-order-section .form-intro {
text-align: center;
color: var(--hi-muted);
margin: 0 auto var(--hi-space-5);
max-width: 500px;
font-size: 15px;
}
/* Disabled form state — before product selection */
.hi-advertise-order-section.is-empty .hi-form-card {
opacity: 0.4;
pointer-events: none;
}
.hi-advertise-order-section.is-empty .selected-banner {
background: var(--hi-bg-2);
border-color: var(--hi-line);
}
.hi-advertise-order-section.is-empty .selected-banner-name {
color: var(--hi-muted-2);
}
.hi-advertise-order-section.is-empty .selected-banner-price {
color: var(--hi-muted-2);
}
/* On mobile order section shouldn't be too padded */
@media (max-width: 640px) {
.hi-advertise-order-section {
padding: var(--hi-space-5) var(--hi-space-3);
}
}
/* ====================================================================
PHASE 5D — CALENDAR TABLE + BLOG SYSTEM
Append to bottom of style.css
==================================================================== */
/* ============================================================
CALENDAR TABLE STYLES (matches LLMs/Startups/etc archives)
============================================================ */
.hi-cal-toggle-wrap {
display: flex;
justify-content: center;
margin-bottom: var(--hi-space-5);
}
.hi-cal-toggle {
display: inline-flex;
background: var(--hi-bg-2);
border: 1px solid var(--hi-line);
border-radius: 999px;
padding: 4px;
gap: 2px;
}
.hi-cal-toggle-btn {
padding: 8px 22px;
font-size: 14px;
font-weight: 600;
color: var(--hi-muted);
text-decoration: none;
border-radius: 999px;
transition: all var(--hi-trans);
}
.hi-cal-toggle-btn:hover {
color: var(--hi-ink);
background: var(--hi-bg);
}
.hi-cal-toggle-btn.is-active {
background: var(--hi-ink);
color: white;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
}
/* Filter bar */
.hi-cal-filters {
display: grid;
grid-template-columns: repeat(4, 1fr) auto;
gap: var(--hi-space-3);
margin-bottom: var(--hi-space-5);
padding: var(--hi-space-4);
background: var(--hi-bg-2);
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius);
align-items: end;
}
@media (max-width: 900px) {
.hi-cal-filters { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
.hi-cal-filters { grid-template-columns: 1fr; }
}
.hi-cal-filter { display: flex; flex-direction: column; }
.hi-cal-filter label {
font-size: 11px;
font-weight: 700;
color: var(--hi-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 6px;
}
.hi-cal-filter select {
padding: 9px 12px;
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius-sm);
background: var(--hi-bg);
font-size: 14px;
font-family: var(--hi-font-sans);
color: var(--hi-ink);
cursor: pointer;
transition: border-color var(--hi-trans);
}
.hi-cal-filter select:hover {
border-color: var(--hi-honey);
}
.hi-cal-filter select:focus {
outline: none;
border-color: var(--hi-honey);
box-shadow: 0 0 0 3px var(--hi-honey-soft);
}
.hi-cal-clear {
padding: 9px 16px;
background: var(--hi-bg);
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius-sm);
font-size: 13px;
font-weight: 600;
color: var(--hi-muted);
text-decoration: none;
text-align: center;
transition: all var(--hi-trans);
}
.hi-cal-clear:hover {
background: var(--hi-honey-soft);
border-color: var(--hi-honey);
color: var(--hi-honey-dark);
}
/* Month divider row inside the table */
.hi-cal-table .hi-cal-month-row td {
background: var(--hi-bg-2);
font-family: var(--hi-font-display);
font-size: 16px;
font-weight: 600;
color: var(--hi-ink);
padding: var(--hi-space-3) var(--hi-space-4);
border-bottom: 2px solid var(--hi-line);
border-top: 1px solid var(--hi-line);
letter-spacing: -0.01em;
}
/* Date cell */
.hi-cal-table .hi-th-date { width: 90px; }
.hi-cal-table .hi-th-link { width: 40px; }
.hi-cal-table .hi-cal-date-cell {
text-align: left;
white-space: nowrap;
}
.hi-cal-table .hi-cal-date-cell strong {
display: block;
font-family: var(--hi-font-display);
font-size: 16px;
font-weight: 600;
color: var(--hi-ink);
letter-spacing: -0.01em;
line-height: 1.2;
}
.hi-cal-table .hi-cal-date-cell small {
display: block;
font-size: 11px;
color: var(--hi-muted-2);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 2px;
font-weight: 600;
}
/* Type badge in table — reuse the cal badges but slightly smaller */
.hi-cal-table .hi-cal-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
font-size: 11px;
font-weight: 600;
border-radius: 999px;
background: var(--hi-bg-2);
color: var(--hi-ink-2);
border: 1px solid var(--hi-line);
line-height: 1.6;
}
.hi-cal-table .hi-cal-badge-type {
background: var(--hi-ink);
color: white;
border-color: var(--hi-ink);
}
.hi-cal-table .hi-cal-badge-type[data-type="conference"] { background: #4338ca; border-color: #4338ca; }
.hi-cal-table .hi-cal-badge-type[data-type="summit"] { background: #be123c; border-color: #be123c; }
.hi-cal-table .hi-cal-badge-type[data-type="workshop"] { background: #0891b2; border-color: #0891b2; }
.hi-cal-table .hi-cal-badge-type[data-type="meetup"] { background: #16a34a; border-color: #16a34a; }
.hi-cal-table .hi-cal-badge-type[data-type="hackathon"] { background: #c2410c; border-color: #c2410c; }
.hi-cal-table .hi-cal-badge-type[data-type="product-launch"] { background: var(--hi-honey-dark); border-color: var(--hi-honey-dark); color: white; }
.hi-cal-table .hi-cal-badge-type[data-type="ai-day"] { background: #7c3aed; border-color: #7c3aed; }
.hi-cal-table .hi-cal-badge-type[data-type="webinar"] { background: #475569; border-color: #475569; }
.hi-cal-table .hi-cal-badge-pricing.is-free {
background: #d1fae5; color: #065f46; border-color: #6ee7b7;
}
.hi-cal-table .hi-cal-badge-pricing.is-paid {
background: #fef3c7; color: #92400e; border-color: #fcd34d;
}
.hi-cal-table .hi-cal-badge-pricing.is-mixed {
background: #ddd6fe; color: #5b21b6; border-color: #c4b5fd;
}
.hi-cal-cost-note {
display: block;
font-size: 11px;
color: var(--hi-muted-2);
margin-top: 4px;
line-height: 1.3;
}
.hi-cal-loc-online {
display: inline-block;
padding: 2px 8px;
background: #ddd6fe;
color: #5b21b6;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
}
/* External link button in last column */
.hi-cal-link-cell {
text-align: center;
}
.hi-cal-visit {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 6px;
background: var(--hi-bg-2);
color: var(--hi-muted);
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: all var(--hi-trans);
}
.hi-cal-visit:hover {
background: var(--hi-honey-soft);
color: var(--hi-honey-dark);
}
/* Mobile responsive table - stack rows */
@media (max-width: 768px) {
.hi-cal-table thead { display: none; }
.hi-cal-table tbody tr { display: block; padding: var(--hi-space-3); border-bottom: 1px solid var(--hi-line); }
.hi-cal-table tbody tr.hi-cal-month-row { background: var(--hi-bg-2); }
.hi-cal-table tbody tr.hi-cal-month-row td { padding: var(--hi-space-2) var(--hi-space-3); }
.hi-cal-table td { display: block; padding: 4px 0 !important; border: none !important; }
.hi-cal-table td[data-label]::before {
content: attr(data-label) ': ';
font-weight: 600;
color: var(--hi-muted);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-right: 6px;
}
.hi-cal-table td[data-label=""]:before { content: none; }
.hi-cal-date-cell { display: flex !important; gap: 6px; align-items: baseline; }
.hi-cal-date-cell strong, .hi-cal-date-cell small { display: inline !important; }
}
/* Form grid for calendar submission */
.hi-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--hi-space-3);
}
@media (max-width: 540px) {
.hi-form-grid { grid-template-columns: 1fr; gap: 0; }
}
/* ============================================================
BLOG INDEX / GRID
============================================================ */
/* Featured post (top of news page) */
.hi-blog-featured {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--hi-space-6);
margin-bottom: var(--hi-space-7);
padding-bottom: var(--hi-space-7);
border-bottom: 1px solid var(--hi-line);
align-items: center;
}
@media (max-width: 800px) {
.hi-blog-featured {
grid-template-columns: 1fr;
gap: var(--hi-space-4);
}
}
.hi-blog-featured-img {
display: block;
border-radius: var(--hi-radius-lg);
overflow: hidden;
aspect-ratio: 16/10;
background: var(--hi-bg-2);
}
.hi-blog-featured-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 300ms ease;
}
.hi-blog-featured-img:hover img {
transform: scale(1.03);
}
.hi-blog-featured-body h2 {
font-family: var(--hi-font-display);
font-size: clamp(24px, 3vw, 36px);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.02em;
margin: var(--hi-space-3) 0 var(--hi-space-3);
}
.hi-blog-featured-body h2 a {
color: var(--hi-ink);
text-decoration: none;
}
.hi-blog-featured-body h2 a:hover {
color: var(--hi-honey-dark);
}
/* Blog grid */
.hi-blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--hi-space-5);
}
@media (max-width: 900px) { .hi-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .hi-blog-grid { grid-template-columns: 1fr; } }
/* Blog card */
.hi-blog-card {
display: flex;
flex-direction: column;
gap: var(--hi-space-3);
}
.hi-blog-card-img {
display: block;
aspect-ratio: 16/10;
border-radius: var(--hi-radius);
overflow: hidden;
background: var(--hi-bg-2);
}
.hi-blog-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 300ms ease;
}
.hi-blog-card-img:hover img {
transform: scale(1.04);
}
.hi-blog-card-img-placeholder {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%);
}
.hi-blog-card-img-placeholder span {
font-family: var(--hi-font-display);
font-size: 72px;
font-weight: 700;
color: #d97706;
letter-spacing: -0.02em;
}
.hi-blog-card-body {
display: flex;
flex-direction: column;
gap: 6px;
}
.hi-blog-card h3 {
font-family: var(--hi-font-display);
font-size: 19px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.01em;
margin: 0;
}
.hi-blog-card h3 a {
color: var(--hi-ink);
text-decoration: none;
}
.hi-blog-card h3 a:hover {
color: var(--hi-honey-dark);
}
/* Category tag (small badge) */
.hi-blog-cat-tag {
display: inline-block;
padding: 3px 10px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
background: var(--hi-honey-soft);
color: var(--hi-honey-dark);
border-radius: 999px;
text-decoration: none;
align-self: flex-start;
transition: all var(--hi-trans);
}
.hi-blog-cat-tag:hover {
background: var(--hi-honey);
color: var(--hi-ink);
}
/* Excerpt */
.hi-blog-excerpt {
color: var(--hi-muted);
font-size: 14px;
line-height: 1.5;
margin: 0;
}
/* Meta line */
.hi-blog-meta {
color: var(--hi-muted-2);
font-size: 13px;
margin-top: 2px;
}
.hi-meta-sep {
margin: 0 6px;
color: var(--hi-line);
}
/* ============================================================
SINGLE BLOG POST
============================================================ */
.hi-blog-post {
padding-bottom: 0;
}
.hi-blog-post-header {
padding: var(--hi-space-7) 0 var(--hi-space-5);
text-align: center;
}
.hi-blog-post-header .hi-breadcrumb {
text-align: left;
margin-bottom: var(--hi-space-5);
}
.hi-blog-post-header .hi-blog-cat-tag {
margin-bottom: var(--hi-space-3);
align-self: center;
}
.hi-blog-post-title {
font-family: var(--hi-font-display);
font-size: clamp(28px, 4vw, 48px);
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.025em;
color: var(--hi-ink);
margin: 0 0 var(--hi-space-4);
}
.hi-blog-post-deck {
font-size: clamp(17px, 1.6vw, 20px);
line-height: 1.5;
color: var(--hi-muted);
max-width: 580px;
margin: 0 auto var(--hi-space-5);
}
.hi-blog-post-meta {
display: flex;
justify-content: center;
margin-top: var(--hi-space-5);
}
.hi-blog-author {
display: flex;
align-items: center;
gap: var(--hi-space-3);
}
.hi-blog-author-avatar {
border-radius: 50%;
flex-shrink: 0;
}
.hi-blog-author-name {
font-weight: 600;
color: var(--hi-ink);
font-size: 14px;
line-height: 1.2;
text-align: left;
}
.hi-blog-meta-line {
color: var(--hi-muted-2);
font-size: 13px;
margin-top: 2px;
text-align: left;
}
/* Featured image */
.hi-blog-post-image {
margin: 0 0 var(--hi-space-6);
}
.hi-blog-post-image img {
width: 100%;
height: auto;
border-radius: var(--hi-radius-lg);
display: block;
}
/* Post body */
.hi-blog-post-body {
padding-bottom: var(--hi-space-7);
}
.hi-blog-content {
font-family: var(--hi-font-sans);
font-size: 17px;
line-height: 1.7;
color: var(--hi-ink-2);
}
.hi-blog-content h2 {
font-family: var(--hi-font-display);
font-size: 28px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.02em;
color: var(--hi-ink);
margin: var(--hi-space-6) 0 var(--hi-space-3);
}
.hi-blog-content h3 {
font-family: var(--hi-font-display);
font-size: 22px;
font-weight: 600;
line-height: 1.3;
color: var(--hi-ink);
margin: var(--hi-space-5) 0 var(--hi-space-3);
}
.hi-blog-content h4 {
font-family: var(--hi-font-sans);
font-size: 18px;
font-weight: 700;
color: var(--hi-ink);
margin: var(--hi-space-4) 0 var(--hi-space-2);
}
.hi-blog-content p {
margin: 0 0 var(--hi-space-4);
}
.hi-blog-content a {
color: var(--hi-honey-dark);
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 3px;
}
.hi-blog-content a:hover {
color: var(--hi-ink);
}
.hi-blog-content ul, .hi-blog-content ol {
margin: 0 0 var(--hi-space-4);
padding-left: var(--hi-space-5);
}
.hi-blog-content li {
margin-bottom: var(--hi-space-2);
}
.hi-blog-content blockquote {
margin: var(--hi-space-5) 0;
padding: var(--hi-space-3) var(--hi-space-5);
border-left: 3px solid var(--hi-honey);
background: var(--hi-bg-2);
font-family: var(--hi-font-display);
font-size: 19px;
font-style: italic;
line-height: 1.5;
color: var(--hi-ink-2);
border-radius: 0 var(--hi-radius) var(--hi-radius) 0;
}
.hi-blog-content code {
background: var(--hi-bg-2);
border: 1px solid var(--hi-line);
padding: 1px 6px;
border-radius: 4px;
font-family: var(--hi-font-mono);
font-size: 14px;
color: var(--hi-honey-dark);
}
.hi-blog-content pre {
background: #0f172a;
color: #e2e8f0;
padding: var(--hi-space-4);
border-radius: var(--hi-radius);
overflow-x: auto;
font-size: 14px;
line-height: 1.6;
margin: var(--hi-space-4) 0;
}
.hi-blog-content pre code {
background: transparent;
border: none;
color: inherit;
padding: 0;
font-size: inherit;
}
.hi-blog-content img {
max-width: 100%;
height: auto;
border-radius: var(--hi-radius);
margin: var(--hi-space-4) 0;
display: block;
}
.hi-blog-content figure {
margin: var(--hi-space-5) 0;
}
.hi-blog-content figcaption {
font-size: 13px;
color: var(--hi-muted);
text-align: center;
margin-top: 6px;
font-style: italic;
}
.hi-blog-content hr {
border: none;
border-top: 1px solid var(--hi-line);
margin: var(--hi-space-6) 0;
}
/* Pro early access banner (for Pro readers) */
.hi-blog-pro-banner {
display: flex;
gap: var(--hi-space-3);
align-items: center;
padding: var(--hi-space-3) var(--hi-space-4);
background: linear-gradient(135deg, #fef3c7, #fde68a);
border: 1px solid var(--hi-honey);
border-radius: var(--hi-radius);
margin-bottom: var(--hi-space-5);
font-size: 14px;
color: var(--hi-ink);
font-weight: 500;
}
.hi-blog-pro-banner .lock {
font-size: 20px;
}
/* Tags */
.hi-blog-tags {
margin-top: var(--hi-space-5);
padding-top: var(--hi-space-4);
border-top: 1px solid var(--hi-line);
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.hi-blog-tag {
display: inline-block;
padding: 4px 10px;
background: var(--hi-bg-2);
border: 1px solid var(--hi-line);
border-radius: 999px;
font-size: 12px;
color: var(--hi-muted);
text-decoration: none;
transition: all var(--hi-trans);
}
.hi-blog-tag:hover {
background: var(--hi-honey-soft);
border-color: var(--hi-honey);
color: var(--hi-honey-dark);
}
/* Share buttons */
.hi-blog-share {
display: flex;
gap: 8px;
align-items: center;
margin-top: var(--hi-space-5);
padding-top: var(--hi-space-4);
border-top: 1px solid var(--hi-line);
}
.hi-blog-share-label {
font-size: 12px;
font-weight: 700;
color: var(--hi-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-right: 6px;
}
.hi-share-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: var(--hi-bg);
border: 1px solid var(--hi-line);
border-radius: 8px;
color: var(--hi-ink);
text-decoration: none;
font-weight: 700;
font-size: 14px;
transition: all var(--hi-trans);
}
.hi-share-btn:hover {
background: var(--hi-ink);
color: white;
border-color: var(--hi-ink);
transform: translateY(-1px);
}
/* Author bio */
.hi-blog-author-bio {
display: flex;
gap: var(--hi-space-4);
align-items: flex-start;
margin-top: var(--hi-space-6);
padding: var(--hi-space-5);
background: var(--hi-bg-2);
border-radius: var(--hi-radius-lg);
}
.hi-blog-author-bio-avatar {
border-radius: 50%;
flex-shrink: 0;
}
.hi-blog-author-bio h4 {
font-family: var(--hi-font-sans);
font-size: 16px;
font-weight: 700;
color: var(--hi-ink);
margin: 0 0 6px;
}
.hi-blog-author-bio p {
color: var(--hi-muted);
font-size: 14px;
line-height: 1.55;
margin: 0;
}
/* Newsletter CTA at bottom of post */
.hi-blog-newsletter-cta {
margin-top: var(--hi-space-6);
padding: var(--hi-space-6);
background: linear-gradient(135deg, var(--hi-ink) 0%, #1e293b 100%);
color: white;
border-radius: var(--hi-radius-lg);
text-align: center;
}
.hi-blog-newsletter-cta h3 {
font-family: var(--hi-font-display);
color: white;
font-size: 24px;
margin: 0 0 var(--hi-space-2);
letter-spacing: -0.01em;
}
.hi-blog-newsletter-cta p {
color: rgba(255, 255, 255, 0.7);
font-size: 15px;
margin: 0 0 var(--hi-space-4);
}
/* ====================================================================
PHASE 5E — CALENDAR TABLE FINAL POLISH + AD MANAGER
Append to bottom of style.css. Overrides earlier Phase 5D rules.
==================================================================== */
/* ============================================================
CALENDAR TABLE — MATCH LLMs EXACTLY
The .name-block pattern is now used in date AND event cells.
Make sure styling works whether or not it's inside .hi-table-name.
============================================================ */
/* Style .name-block universally (works in any table cell) */
.hi-cal-table .name-block {
line-height: 1.35;
min-width: 0;
}
.hi-cal-table .name-block strong {
display: block;
font-weight: 600;
color: var(--hi-ink);
font-size: 15px;
margin-bottom: 2px;
line-height: 1.2;
}
.hi-cal-table .name-block strong a {
color: var(--hi-ink);
text-decoration: none;
}
.hi-cal-table .name-block strong a:hover {
color: var(--hi-honey-dark);
}
.hi-cal-table .name-block small {
color: var(--hi-muted-2);
font-size: 12px;
display: block;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 360px;
}
/* Date column: keep narrow + nowrap */
.hi-cal-table .hi-th-date,
.hi-cal-table td:first-child + td .name-block {
width: 100px;
white-space: nowrap;
}
.hi-cal-table .hi-th-link { width: 40px; }
/* External link button */
.hi-cal-visit {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 6px;
background: var(--hi-bg-2);
color: var(--hi-muted);
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: all var(--hi-trans);
}
.hi-cal-visit:hover {
background: var(--hi-honey-soft);
color: var(--hi-honey-dark);
}
/* Month divider row */
.hi-cal-table .hi-cal-month-row td {
background: var(--hi-bg-2);
font-family: var(--hi-font-display);
font-size: 16px;
font-weight: 600;
color: var(--hi-ink);
padding: 10px 16px;
border-bottom: 2px solid var(--hi-line);
border-top: 1px solid var(--hi-line);
letter-spacing: -0.01em;
}
.hi-cal-table .hi-cal-cost-note {
display: block;
font-size: 11px;
color: var(--hi-muted-2);
margin-top: 3px;
line-height: 1.3;
}
.hi-cal-table .hi-cal-loc-online {
display: inline-block;
padding: 2px 8px;
background: #ddd6fe;
color: #5b21b6;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
}
/* Mobile responsive — stack rows */
@media (max-width: 768px) {
.hi-cal-table thead { display: none; }
.hi-cal-table tbody tr {
display: block;
padding: 12px;
border-bottom: 1px solid var(--hi-line);
}
.hi-cal-table tbody tr.hi-cal-month-row {
background: var(--hi-bg-2);
}
.hi-cal-table tbody tr.hi-cal-month-row td {
padding: 8px 12px;
}
.hi-cal-table td {
display: block;
padding: 4px 0 !important;
border: none !important;
}
.hi-cal-table td[data-label]::before {
content: attr(data-label) ': ';
font-weight: 700;
color: var(--hi-muted);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-right: 6px;
}
.hi-cal-table td[data-label=""]::before { content: none; }
.hi-cal-table .name-block strong,
.hi-cal-table .name-block small {
display: inline !important;
}
.hi-cal-table .name-block small {
margin-left: 6px;
}
}
/* ============================================================
AD SLOTS — CLEANER LABELING
Replaces the older "Sponsored · 970×90" label with just "Ad"
The plugin handles all of this, but make sure styling stays clean.
============================================================ */
.hi-ad-slot-label {
/* Already styled in earlier CSS — just ensure it says "Ad" cleanly */
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.1em;
color: var(--hi-muted-2);
font-weight: 700;
margin-bottom: 6px;
}
/* ====================================================================
PHASE 5F — SHARE BUTTONS + CALENDAR COLUMNS
Append to bottom of style.css. Overrides earlier rules where needed.
==================================================================== */
/* ============================================================
SHARE BUTTONS — fix overlapping/cramped layout
The button row needs proper gap + each button needs padding +
icon-text spacing.
============================================================ */
.hi-share {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: var(--hi-space-5) 0;
padding: var(--hi-space-4) 0;
border-top: 1px solid var(--hi-line);
}
.hi-share-label {
font-size: 11px;
font-weight: 700;
color: var(--hi-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-right: 8px;
flex-shrink: 0;
}
.hi-share-btn {
display: inline-flex !important;
align-items: center;
gap: 6px;
padding: 7px 12px;
background: var(--hi-bg);
border: 1px solid var(--hi-line);
border-radius: var(--hi-radius-sm);
color: var(--hi-ink-2);
font-size: 13px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: all var(--hi-trans);
font-family: var(--hi-font-sans);
line-height: 1;
white-space: nowrap;
}
.hi-share-btn:hover {
background: var(--hi-ink);
color: white;
border-color: var(--hi-ink);
transform: translateY(-1px);
}
.hi-share-btn svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.hi-share-btn span {
line-height: 1;
}
/* ============================================================
CALENDAR TABLE — FIX OVERFLOWING COLUMNS
Set explicit widths so badges don't bleed into next column.
============================================================ */
.hi-cal-table {
table-layout: fixed; /* Important: makes column widths sticky */
width: 100%;
}
.hi-cal-table th,
.hi-cal-table td {
vertical-align: top;
padding: 12px 14px;
overflow: hidden; /* Prevent overflow into neighbors */
}
/* Column widths (must sum well; total 100%) */
.hi-cal-table th:nth-child(1), .hi-cal-table td:nth-child(1) { width: 90px; } /* Date */
.hi-cal-table th:nth-child(2), .hi-cal-table td:nth-child(2) { width: auto; } /* Event — flexes */
.hi-cal-table th:nth-child(3), .hi-cal-table td:nth-child(3) { width: 120px; } /* Type */
.hi-cal-table th:nth-child(4), .hi-cal-table td:nth-child(4) { width: 170px; } /* Location */
.hi-cal-table th:nth-child(5), .hi-cal-table td:nth-child(5) { width: 160px; } /* Pricing */
.hi-cal-table th:nth-child(6), .hi-cal-table td:nth-child(6) { width: 50px; } /* Link */
/* Make sure event name + tagline fit and ellipsis if too long */
.hi-cal-table td:nth-child(2) .name-block strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.hi-cal-table td:nth-child(2) .name-block small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
display: block;
}
/* Badges shouldn't wrap */
.hi-cal-table .hi-cal-badge {
white-space: nowrap;
display: inline-flex;
}
/* Location cell — wrap if needed, but only after the column is full */
.hi-cal-table td:nth-child(4) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Pricing cell can hold badge + cost note (cost note can wrap to 2 lines) */
.hi-cal-table td:nth-child(5) {
overflow: visible; /* Allow cost note to show */
}
.hi-cal-table td:nth-child(5) .hi-cal-cost-note {
white-space: normal; /* cost note CAN wrap */
word-wrap: break-word;
font-size: 11px;
line-height: 1.3;
margin-top: 3px;
}
/* Date column: ensure name-block content stays small and bold */
.hi-cal-table td:nth-child(1) .name-block strong {
font-size: 14px;
white-space: nowrap;
}
.hi-cal-table td:nth-child(1) .name-block small {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
}
/* Mobile: revert to stacked layout (already in earlier CSS but ensure widths reset) */
@media (max-width: 768px) {
.hi-cal-table {
table-layout: auto;
}
.hi-cal-table th, .hi-cal-table td {
width: auto !important;
overflow: visible;
}
.hi-cal-table td:nth-child(4) {
white-space: normal;
}
}
/* ====================================================================
PHASE 5G — DEFINITIVE FIXES FOR SHARE BUTTONS + CALENDAR
Append to bottom of style.css. Overrides ALL earlier rules.
==================================================================== */
/* ============================================================
SHARE BUTTONS — KILL THE OLD SQUARE STYLING
An earlier rule set buttons to 36x36 fixed square, which crushed
the text labels. We force width:auto and padding-based sizing.
============================================================ */
.hi-share {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin: 32px 0 !important;
padding: 16px 0 !important;
border-top: 1px solid var(--hi-line) !important;
}
.hi-share-label {
font-size: 11px !important;
font-weight: 700 !important;
color: var(--hi-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
margin-right: 4px !important;
flex-shrink: 0 !important;
}
.hi-share-btn {
/* Force pill shape with content-based width */
width: auto !important;
height: auto !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 8px 14px !important;
background: var(--hi-bg) !important;
border: 1px solid var(--hi-line) !important;
border-radius: 8px !important;
color: var(--hi-ink-2) !important;
font-size: 13px !important;
font-weight: 600 !important;
text-decoration: none !important;
cursor: pointer !important;
transition: all 150ms ease !important;
font-family: var(--hi-font-sans) !important;
line-height: 1 !important;
white-space: nowrap !important;
box-shadow: none !important;
transform: none !important;
}
.hi-share-btn:hover {
background: var(--hi-ink) !important;
color: white !important;
border-color: var(--hi-ink) !important;
transform: translateY(-1px) !important;
}
.hi-share-btn svg {
width: 14px !important;
height: 14px !important;
flex-shrink: 0 !important;
}
.hi-share-btn span {
line-height: 1 !important;
font-size: 13px !important;
}
/* ============================================================
CALENDAR TABLE — FIX EVENT COLUMN WIDTH
Earlier CSS set Event to "auto" which with table-layout:fixed
shrinks instead of expanding. Give it a real width.
============================================================ */
.hi-cal-table {
table-layout: fixed !important;
width: 100% !important;
}
.hi-cal-table th,
.hi-cal-table td {
vertical-align: top !important;
padding: 12px 14px !important;
overflow: hidden !important;
}
/* Fixed column widths — Event takes the largest share */
.hi-cal-table th:nth-child(1), .hi-cal-table td:nth-child(1) { width: 90px !important; } /* Date */
.hi-cal-table th:nth-child(2), .hi-cal-table td:nth-child(2) { width: 38% !important; } /* Event — flex */
.hi-cal-table th:nth-child(3), .hi-cal-table td:nth-child(3) { width: 110px !important; } /* Type */
.hi-cal-table th:nth-child(4), .hi-cal-table td:nth-child(4) { width: 150px !important; } /* Location */
.hi-cal-table th:nth-child(5), .hi-cal-table td:nth-child(5) { width: 170px !important; } /* Pricing */
.hi-cal-table th:nth-child(6), .hi-cal-table td:nth-child(6) { width: 50px !important; } /* Link */
/* Event name cell — allow title to wrap if needed, ellipsis tagline */
.hi-cal-table td:nth-child(2) .name-block {
overflow: hidden;
}
.hi-cal-table td:nth-child(2) .name-block strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
display: block !important;
font-size: 15px !important;
}
.hi-cal-table td:nth-child(2) .name-block small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
display: block !important;
font-size: 13px !important;
}
/* Date cell — keep tidy */
.hi-cal-table td:nth-child(1) {
white-space: nowrap;
}
.hi-cal-table td:nth-child(1) .name-block strong {
font-size: 14px !important;
white-space: nowrap;
}
.hi-cal-table td:nth-child(1) .name-block small {
font-size: 11px !important;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
}
/* Badges shouldn't wrap */
.hi-cal-table .hi-cal-badge {
white-space: nowrap;
display: inline-flex;
}
/* Location truncates if too long */
.hi-cal-table td:nth-child(4) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Pricing cell allows cost note to wrap */
.hi-cal-table td:nth-child(5) {
overflow: visible;
}
.hi-cal-table td:nth-child(5) .hi-cal-cost-note {
white-space: normal;
word-wrap: break-word;
font-size: 11px;
line-height: 1.3;
margin-top: 3px;
display: block;
}
/* Mobile: reset to fluid layout */
@media (max-width: 768px) {
.hi-cal-table {
table-layout: auto !important;
}
.hi-cal-table th,
.hi-cal-table td {
width: auto !important;
overflow: visible !important;
}
.hi-cal-table td:nth-child(2) .name-block strong,
.hi-cal-table td:nth-child(2) .name-block small {
white-space: normal !important;
}
.hi-cal-table td:nth-child(4) {
white-space: normal;
}
}