/* ═══════════════════════════════════════════════════════════
landing.css — Shared landing page styles for all apps
Include via:
Requires: theme.css loaded first
═══════════════════════════════════════════════════════════ */
/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body.lp { overflow-x: hidden; background: #08080f; color: #e2e2e8; font-family: var(--sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); padding: 0 !important; }
/* ═══════════════════════════════════════════════════════════
FIXED BACKGROUND
Apply .lp-bg-fixed to a div immediately after .
Customize the 5 radial-gradient colors via CSS custom properties:
--lp-glow-1 (top-left, default: amber)
--lp-glow-2 (top-right, default: violet)
--lp-glow-3 (center, default: blue)
--lp-glow-4 (bottom-left, default: pink)
--lp-glow-5 (bottom-right, default: green)
═══════════════════════════════════════════════════════════ */
.lp-bg-fixed {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(ellipse at 25% 40%, var(--lp-glow-1, rgba(245,158,11,.28)) 0%, transparent 50%),
radial-gradient(ellipse at 75% 35%, var(--lp-glow-2, rgba(124,58,237,.22)) 0%, transparent 45%),
radial-gradient(ellipse at 55% 55%, var(--lp-glow-3, rgba(59,130,246,.18)) 0%, transparent 45%),
radial-gradient(ellipse at 20% 60%, var(--lp-glow-4, rgba(236,72,153,.14)) 0%, transparent 40%),
radial-gradient(ellipse at 80% 55%, var(--lp-glow-5, rgba(34,197,94,.12)) 0%, transparent 40%),
#08080f;
}
/* ═══════════════════════════════════════════════════════════
GLASS UTILITIES
═══════════════════════════════════════════════════════════ */
.glass {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-radius: 20px;
}
.glass-strong {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
backdrop-filter: blur(32px);
-webkit-backdrop-filter: blur(32px);
border-radius: 24px;
}
/* ═══════════════════════════════════════════════════════════
NEON ICONS
Usage:
Sizes: .neon-icon (48px), .neon-icon-lg (80px), .cat-icon (44px)
Colors: neon-amber, neon-violet, neon-blue, neon-green, neon-pink, neon-cyan
═══════════════════════════════════════════════════════════ */
.neon-icon {
width: 48px; height: 48px; border-radius: 14px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 22px; position: relative;
}
.neon-icon svg { width: 22px; height: 22px; stroke-width: 1.8; }
.neon-icon::after {
content: ''; position: absolute; inset: -1px; border-radius: 14px;
opacity: .4; filter: blur(10px); z-index: -1;
}
.neon-icon-lg {
width: 80px; height: 80px; border-radius: 22px;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 40px; position: relative;
}
.neon-icon-lg svg { width: 36px; height: 36px; stroke-width: 1.5; }
.neon-icon-lg::after {
content: ''; position: absolute; inset: -2px; border-radius: 22px;
opacity: .35; filter: blur(16px); z-index: -1;
}
.cat-icon {
width: 44px; height: 44px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 14px;
}
.cat-icon svg { width: 20px; height: 20px; stroke-width: 1.8; }
/* Color variants */
.neon-amber { background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.2); color: #f59e0b; }
.neon-amber::after { background: rgba(245,158,11,.25); }
.neon-violet { background: rgba(124,58,237,.1); border: 1px solid rgba(124,58,237,.2); color: #a78bfa; }
.neon-violet::after { background: rgba(124,58,237,.25); }
.neon-blue { background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.2); color: #60a5fa; }
.neon-blue::after { background: rgba(59,130,246,.25); }
.neon-green { background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.2); color: #4ade80; }
.neon-green::after { background: rgba(34,197,94,.25); }
.neon-pink { background: rgba(236,72,153,.1); border: 1px solid rgba(236,72,153,.2); color: #f472b6; }
.neon-pink::after { background: rgba(236,72,153,.25); }
.neon-cyan { background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.2); color: #22d3ee; }
.neon-cyan::after { background: rgba(34,211,238,.25); }
/* ═══════════════════════════════════════════════════════════
LAYOUT
═══════════════════════════════════════════════════════════ */
.lp-section {
max-width: 1000px;
margin: 0 auto;
padding: 140px 32px;
}
.lp-divider {
max-width: 1000px;
margin: 0 auto;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
position: relative;
overflow: hidden;
}
@media (max-width: 1040px) {
.lp-divider {
max-width: calc(100vw - 64px);
}
}
@media (max-width: 768px) {
.lp-divider {
max-width: calc(100vw - 32px);
}
}
.lp-divider::after,
.lp-divider::before {
content: '';
position: absolute;
top: 0; width: 60%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
animation: lp-divider-shimmer 6s ease-in-out infinite;
}
.lp-divider::before {
animation-delay: -3s;
}
@keyframes lp-divider-shimmer {
0% { left: -60%; }
100% { left: 100%; }
}
/* ═══════════════════════════════════════════════════════════
TYPOGRAPHY
═══════════════════════════════════════════════════════════ */
.lp-eyebrow {
display: inline-block;
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 2.5px;
color: rgba(245,158,11,.8);
margin-bottom: 20px;
}
.lp-h1 {
font-family: var(--serif, Georgia, serif);
font-size: clamp(44px, 8vw, 80px); font-weight: 800;
line-height: 1.02; letter-spacing: -1.5px;
margin-bottom: 28px;
}
.lp-h2 {
font-family: var(--serif, Georgia, serif);
font-size: clamp(30px, 4.5vw, 48px); font-weight: 700;
line-height: 1.1; letter-spacing: -0.5px;
margin-bottom: 20px;
}
.lp-body {
font-size: 17px; line-height: 1.7;
color: rgba(255,255,255,.5); max-width: 520px;
}
.lp-body-lg {
font-size: 19px; line-height: 1.7;
color: rgba(255,255,255,.45); max-width: 560px;
}
/* ═══════════════════════════════════════════════════════════
HERO
═══════════════════════════════════════════════════════════ */
.hero-inner {
min-height: 75vh;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center;
padding: 0 32px;
position: relative;
}
.hero-inner .cc-hero {
padding-top: 120px;
padding-bottom: 120px;
}
.hero-ctas {
display: flex; gap: 16px; margin-top: 44px;
flex-wrap: wrap; justify-content: center;
}
/* ═══════════════════════════════════════════════════════════
BUTTONS
═══════════════════════════════════════════════════════════ */
.btn-primary {
padding: 16px 36px; border-radius: 14px;
font-weight: 700; font-size: 15px; text-decoration: none;
background: #f59e0b; color: #000;
transition: all .3s;
box-shadow: 0 0 40px rgba(245,158,11,.2);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 60px rgba(245,158,11,.35); }
.btn-ghost {
padding: 16px 36px; border-radius: 14px;
font-weight: 600; font-size: 15px; text-decoration: none;
color: rgba(255,255,255,.6);
border: 1px solid rgba(255,255,255,.1);
transition: all .3s;
}
.btn-ghost:hover { background: rgba(255,255,255,.05); color: #fff; transform: translateY(-2px); }
/* ═══════════════════════════════════════════════════════════
FEATURE CARDS — 3-column grid of glass cards
═══════════════════════════════════════════════════════════ */
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px; margin-top: 64px;
}
.feature-card {
padding: 36px 28px; transition: all .4s;
}
.feature-card:hover {
background: rgba(255,255,255,.07);
border-color: rgba(245,158,11,.2);
transform: translateY(-4px);
}
.feature-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 10px; color: #fff; }
.feature-card p { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.4); }
/* ═══════════════════════════════════════════════════════════
STEPS — Numbered vertical list (auto-counter)
═══════════════════════════════════════════════════════════ */
.steps-list {
display: flex; flex-direction: column;
margin-top: 72px; counter-reset: step;
}
.step-row {
display: grid; grid-template-columns: 80px 1fr;
gap: 32px; padding: 48px 0;
border-bottom: 1px solid rgba(255,255,255,.06);
align-items: start;
}
.step-row:last-child { border-bottom: none; }
.step-num {
counter-increment: step;
font-family: var(--serif, Georgia, serif);
font-size: 48px; font-weight: 800;
background: linear-gradient(180deg, rgba(245,158,11,.25), rgba(245,158,11,.06));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text; line-height: 1;
}
.step-num::before { content: counter(step); }
.step-row h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; color: #fff; }
.step-row p { font-size: 15px; color: rgba(255,255,255,.4); line-height: 1.6; max-width: 480px; }
/* ═══════════════════════════════════════════════════════════
SCORE VISUAL — Split layout: formula + bars
═══════════════════════════════════════════════════════════ */
.score-visual {
display: flex; align-items: center; gap: 48px;
margin-top: 64px; flex-wrap: wrap;
}
.score-formula { flex: 1; min-width: 280px; }
.score-formula-box {
padding: 32px;
font-family: 'SF Mono', 'Fira Code', monospace;
font-size: 14px; line-height: 2;
}
.score-bars { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 20px; }
.score-bar-label { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.5); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 1px; }
.score-bar-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; }
.score-bar-fill { height: 100%; border-radius: 3px; transition: width 1.5s ease; }
/* ═══════════════════════════════════════════════════════════
USE CASE CARDS — 3-column auto-fit grid
═══════════════════════════════════════════════════════════ */
.use-cases-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px; margin-top: 64px;
}
.use-case-card { padding: 36px 28px; }
.use-case-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 10px; color: #fff; }
.use-case-card p { font-size: 14px; color: rgba(255,255,255,.4); line-height: 1.65; }
/* ═══════════════════════════════════════════════════════════
CTA SECTION — Bottom call to action
═══════════════════════════════════════════════════════════ */
.cta-final {
text-align: center; padding: 160px 32px; position: relative;
}
.cta-glow {
position: absolute; width: 500px; height: 300px;
background: radial-gradient(ellipse, rgba(245,158,11,.08), transparent 70%);
left: 50%; top: 60%; transform: translate(-50%, -50%);
pointer-events: none;
}
/* ═══════════════════════════════════════════════════════════
FOOTER
═══════════════════════════════════════════════════════════ */
.lp-footer {
text-align: center; padding: 40px 32px;
font-size: 12px; color: rgba(255,255,255,.2);
border-top: 1px solid rgba(255,255,255,.05);
}
.lp-footer a { color: rgba(245,158,11,.5); text-decoration: none; }
.lp-footer a:hover { color: #f59e0b; }
/* ═══════════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.lp-section { padding: 100px 20px; }
.features-grid { grid-template-columns: 1fr; }
.step-row { grid-template-columns: 48px 1fr; gap: 20px; padding: 32px 0; }
.step-num { font-size: 36px; }
.score-visual { flex-direction: column; gap: 32px; }
.hero-inner { padding: 0 20px; }
.hero-inner .cc-hero { padding-top: 60px; padding-bottom: 80px; }
}
/* Blog post pages — clear fixed nav */
.blog-post-container { padding-top: 100px; max-width: 1000px; margin: 0 auto; padding-left: 32px; padding-right: 32px; padding-bottom: 80px; }