/* ================================================================
LumaBaby AI — Site Design System
Mobile-first. Responsive. No image dependencies.
Aligned with DESIGN.MD token set.
================================================================ */
/* ── Fonts ──────────────────────────────────────────────────────
Loaded via in each page's for better performance.
Families: Plus Jakarta Sans (display/headings) + Manrope (body)
──────────────────────────────────────────────────────────────── */
/* ── Tokens ─────────────────────────────────────────────────── */
:root {
color-scheme: light;
/* Brand palette — aligned with app design system */
--primary: #056380;
--primary-end: #8fd5f7;
--accent: #b0f1c6;
--accent-text: #1d5d3c;
--rose-soft: #f3dde2;
/* Surfaces */
--surface: #f5f6f7;
--surface-container: #e6e8ea;
--surface-low: #eff1f2;
--surface-card: #ffffff;
--surface-highest: #dadddf;
/* Text */
--on-surface: #2c2f30;
--on-surface-variant: #595c5d;
/* Outline */
--outline-soft: rgba(184, 188, 190, 0.18);
/* Typography */
--font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Spacing */
--sp-xs: 8px;
--sp-sm: 12px;
--sp-md: 16px;
--sp-lg: 24px;
--sp-xl: 32px;
--sp-2xl: 48px;
--sp-3xl: 72px;
/* Radius */
--r-sm: 16px;
--r-md: 24px;
--r-lg: 32px;
--r-xl: 40px;
--r-full: 999px;
/* Layout */
--page-max: 1100px;
--page-pad: clamp(18px, 5vw, 52px);
/* Shadows — ambient method from DESIGN.MD */
--shadow-sm: 0 4px 12px rgba(44, 47, 48, 0.05);
--shadow-md: 0 8px 24px rgba(44, 47, 48, 0.07);
--shadow-lg: 0 16px 40px rgba(44, 47, 48, 0.09);
}
/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--surface);
color: var(--on-surface);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; max-width: 100%; }
/* ── Layout wrapper ─────────────────────────────────────────── */
.page-wrap {
width: 100%;
max-width: var(--page-max);
margin: 0 auto;
padding: 0 var(--page-pad);
}
/* ── Buttons ────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: var(--r-full);
font-family: var(--font-body);
font-weight: 700;
font-size: 15px;
padding: 13px 24px;
text-decoration: none;
cursor: pointer;
border: none;
transition: transform 110ms ease, opacity 110ms ease;
white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn-primary {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-end) 100%);
color: #ffffff;
box-shadow: var(--shadow-md);
}
.btn-secondary {
background: var(--surface-card);
color: var(--primary);
box-shadow: var(--shadow-sm);
}
.btn-sm { font-size: 13px; padding: 9px 18px; }
/* ── ─────────────────────────────────────────────────────────
HEADER
─────────────────────────────────────────────────────────── */
.site-header {
position: sticky;
top: 0;
z-index: 100;
padding: 14px 0;
background: rgba(245, 246, 247, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--outline-soft);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
flex-shrink: 0;
}
.brand:hover { text-decoration: none; }
.brand-mark {
width: 34px;
height: 34px;
border-radius: var(--r-full);
background: linear-gradient(135deg, #d9f0fa 0%, #daf4e6 100%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.brand-mark svg { width: 18px; height: 18px; }
.brand-name {
font-family: var(--font-display);
font-size: 17px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--primary);
}
.nav { display: flex; align-items: center; gap: 6px; }
.nav-links { display: none; align-items: center; gap: 2px; }
.nav-link {
color: var(--on-surface-variant);
font-size: 14px;
font-weight: 600;
padding: 6px 12px;
border-radius: var(--r-full);
transition: background 120ms;
}
.nav-link:hover { background: var(--surface-container); text-decoration: none; }
@media (min-width: 640px) {
.nav-links { display: flex; }
}
/* ── ─────────────────────────────────────────────────────────
HERO
─────────────────────────────────────────────────────────── */
.hero {
padding: clamp(52px, 9vw, 108px) 0 clamp(48px, 8vw, 88px);
}
.hero-inner {
display: grid;
grid-template-columns: 1fr;
gap: 56px;
align-items: center;
}
@media (min-width: 880px) {
.hero-inner {
grid-template-columns: 1fr 1fr;
gap: 72px;
}
}
.kicker {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 16px;
border-radius: var(--r-full);
background: var(--accent);
color: var(--accent-text);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.hero-title {
margin: 20px 0 0;
font-family: var(--font-display);
font-size: clamp(2.7rem, 6.5vw, 4.4rem);
font-weight: 800;
line-height: 1.0;
letter-spacing: -0.04em;
color: var(--on-surface);
}
.hero-title .g {
background: linear-gradient(135deg, var(--primary) 0%, #3bbce0 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero-sub {
margin: 20px 0 0;
color: var(--on-surface-variant);
font-size: clamp(1.05rem, 2.2vw, 1.18rem);
line-height: 1.72;
max-width: 40ch;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 34px;
}
/* ── Hero abstract visual ───────────────────────────────────── */
.hero-visual {
position: relative;
width: 100%;
max-width: 420px;
aspect-ratio: 4 / 4.6;
margin: 0 auto;
}
@media (min-width: 880px) {
.hero-visual {
max-width: none;
margin: 0;
}
}
/* Background gradient layer */
.hv-bg {
position: absolute;
inset: 0;
border-radius: var(--r-xl);
overflow: hidden;
background:
radial-gradient(circle at 28% 22%, rgba(143, 213, 247, 0.34), transparent 52%),
radial-gradient(circle at 78% 72%, rgba(176, 241, 198, 0.30), transparent 50%),
linear-gradient(160deg, #ecf8fd 0%, #edfaf3 100%);
}
/* Floating app-preview cards */
.hv-card {
position: absolute;
background: var(--surface-card);
border-radius: var(--r-lg);
box-shadow: var(--shadow-lg);
padding: 14px 16px;
}
.hv-card-weight { top: 8%; left: 6%; width: 50%; }
.hv-card-feed { top: 38%; right: 5%; width: 55%; }
.hv-card-ai { bottom: 7%; left: 8%; width: 74%; }
.hv-label {
margin: 0 0 5px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--on-surface-variant);
}
.hv-value {
margin: 0;
font-family: var(--font-display);
font-size: 1.8rem;
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
color: var(--on-surface);
}
.hv-meta {
margin: 4px 0 0;
font-size: 11px;
font-weight: 500;
color: var(--on-surface-variant);
}
.hv-badge {
display: inline-flex;
align-items: center;
gap: 3px;
margin-top: 9px;
padding: 3px 10px;
border-radius: var(--r-full);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
}
.hv-badge-blue { background: #daeef8; color: var(--primary); }
.hv-badge-green { background: #d8f3e6; color: #1f6645; }
.hv-feed-row { display: flex; align-items: center; gap: 10px; }
.hv-feed-dot {
width: 30px; height: 30px;
border-radius: var(--r-full);
background: var(--accent);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.hv-feed-dot svg { width: 14px; height: 14px; stroke: var(--accent-text); }
.hv-feed-title {
margin: 0;
font-family: var(--font-display);
font-size: 0.9rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--on-surface);
}
.hv-feed-sub { margin: 1px 0 0; font-size: 11px; color: var(--on-surface-variant); }
.hv-ai-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.hv-ai-dot {
width: 26px; height: 26px;
border-radius: var(--r-full);
background: linear-gradient(135deg, #d3ecf7, #d2f8e2);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.hv-ai-dot svg { width: 12px; height: 12px; }
.hv-ai-name {
margin: 0;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--primary);
}
.hv-ai-text {
margin: 0;
font-size: 12px;
line-height: 1.55;
color: var(--on-surface-variant);
}
/* ── ─────────────────────────────────────────────────────────
SECTION DEFAULTS
─────────────────────────────────────────────────────────── */
.section {
padding: clamp(52px, 8vw, 100px) 0;
}
.section-eyebrow {
margin: 0 0 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--primary);
}
.section-title {
margin: 0;
font-family: var(--font-display);
font-size: clamp(2rem, 4.5vw, 3.1rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.04em;
color: var(--on-surface);
}
.section-sub {
margin: 14px 0 0;
color: var(--on-surface-variant);
font-size: 1.05rem;
line-height: 1.72;
max-width: 44ch;
}
/* ── ─────────────────────────────────────────────────────────
FEATURES
─────────────────────────────────────────────────────────── */
.features-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin-top: 48px;
}
@media (min-width: 600px) {
.features-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
.features-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.feature-card {
background: var(--surface-card);
border-radius: var(--r-xl);
padding: clamp(26px, 4vw, 38px);
box-shadow: var(--shadow-sm);
}
.feature-icon {
width: 50px;
height: 50px;
border-radius: var(--r-full);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
}
.fi-blue { background: #daeef8; }
.fi-green { background: #d8f3e6; }
.fi-peach { background: #fde8da; }
.feature-icon svg { width: 22px; height: 22px; }
.feature-card h3 {
margin: 0 0 12px;
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--on-surface);
}
.feature-card p {
margin: 0;
color: var(--on-surface-variant);
font-size: 0.98rem;
line-height: 1.72;
}
/* ── ─────────────────────────────────────────────────────────
WHO IT'S FOR
─────────────────────────────────────────────────────────── */
.for-section {
background: var(--surface-card);
border-radius: var(--r-xl);
padding: clamp(32px, 5vw, 54px);
box-shadow: var(--shadow-sm);
}
.for-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
margin-top: 36px;
}
@media (min-width: 600px) {
.for-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.for-item { display: flex; gap: 14px; align-items: flex-start; }
.for-dot {
width: 9px;
height: 9px;
border-radius: var(--r-full);
background: linear-gradient(135deg, var(--primary), var(--primary-end));
flex-shrink: 0;
margin-top: 6px;
}
.for-item h4 {
margin: 0 0 7px;
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--on-surface);
}
.for-item p {
margin: 0;
color: var(--on-surface-variant);
font-size: 0.95rem;
line-height: 1.68;
}
/* ── ─────────────────────────────────────────────────────────
TRUST
─────────────────────────────────────────────────────────── */
.trust-section {
background: linear-gradient(148deg, #ecf6fb 0%, #edfaf4 100%);
border-radius: var(--r-xl);
padding: clamp(38px, 6vw, 68px) clamp(28px, 5vw, 72px);
text-align: center;
box-shadow: var(--shadow-sm);
}
.trust-icon {
width: 68px;
height: 68px;
background: var(--surface-card);
border-radius: var(--r-full);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
box-shadow: var(--shadow-sm);
}
.trust-icon svg { width: 26px; height: 26px; stroke: var(--primary); }
.trust-section h2 {
margin: 0;
font-family: var(--font-display);
font-size: clamp(1.8rem, 4vw, 2.8rem);
font-weight: 800;
letter-spacing: -0.04em;
color: var(--on-surface);
}
.trust-section p {
margin: 16px auto 0;
max-width: 52ch;
color: var(--on-surface-variant);
font-size: 1.04rem;
line-height: 1.78;
}
/* ── ─────────────────────────────────────────────────────────
FOOTER
─────────────────────────────────────────────────────────── */
.site-footer {
padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 4vw, 52px);
border-top: 1px solid var(--outline-soft);
}
.footer-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
text-align: center;
}
.footer-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px 22px;
}
.footer-links a {
color: var(--on-surface-variant);
font-size: 14px;
font-weight: 600;
}
.footer-links a:hover { color: var(--primary); }
.footer-copy {
margin: 0;
color: var(--on-surface-variant);
font-size: 13px;
}
/* ── ─────────────────────────────────────────────────────────
LEGAL / SUPPORT PAGES
─────────────────────────────────────────────────────────── */
.legal-wrap {
max-width: 780px;
margin: 0 auto;
padding: clamp(28px, 5vw, 56px) var(--page-pad) clamp(48px, 7vw, 96px);
}
.legal-back {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--on-surface-variant);
font-size: 14px;
font-weight: 600;
margin-bottom: 24px;
}
.legal-back:hover { color: var(--primary); text-decoration: none; }
.legal-back svg { width: 14px; height: 14px; stroke: currentColor; }
.legal-heading {
margin: 0 0 4px;
font-family: var(--font-display);
font-size: clamp(2rem, 5vw, 2.9rem);
font-weight: 800;
letter-spacing: -0.04em;
color: var(--on-surface);
}
.legal-meta {
color: var(--on-surface-variant);
font-size: 0.9rem;
margin: 0 0 32px;
}
.legal-section {
background: var(--surface-card);
border-radius: var(--r-lg);
padding: clamp(22px, 4vw, 36px);
margin-bottom: 16px;
box-shadow: var(--shadow-sm);
}
.legal-section + .legal-section { margin-top: 0; }
.legal-section h2 {
margin: 0 0 12px;
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--on-surface);
}
.legal-section p, .legal-section li {
margin: 0 0 10px;
color: var(--on-surface-variant);
font-size: 1rem;
line-height: 1.78;
}
.legal-section p:last-child, .legal-section li:last-child { margin-bottom: 0; }
.legal-section ul { margin: 0; padding-left: 1.3rem; }
.legal-section li + li { margin-top: 8px; }
/* Support page */
.support-intro {
background: var(--surface-card);
border-radius: var(--r-lg);
padding: clamp(22px, 4vw, 36px);
margin-bottom: 16px;
box-shadow: var(--shadow-sm);
}
.support-intro p {
margin: 0 0 10px;
color: var(--on-surface-variant);
font-size: 1rem;
line-height: 1.78;
}
.support-intro p:last-child { margin-bottom: 0; }
.faq-item {
padding: 18px 0;
border-bottom: 1px solid var(--surface-container);
}
.faq-item:first-child { padding-top: 0; }
.faq-item:last-child { padding-bottom: 0; border-bottom: none; }
.faq-q {
margin: 0 0 6px;
font-family: var(--font-display);
font-size: 0.97rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--on-surface);
}
.faq-a {
margin: 0;
color: var(--on-surface-variant);
font-size: 0.97rem;
line-height: 1.72;
}
/* Legal page footer nav */
.legal-footer {
padding: 32px 0;
border-top: 1px solid var(--outline-soft);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 12px;
max-width: 780px;
margin: 0 auto;
padding-left: var(--page-pad);
padding-right: var(--page-pad);
}
.legal-footer-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.legal-footer-links a {
color: var(--on-surface-variant);
font-size: 14px;
font-weight: 600;
}
.legal-footer-links a:hover { color: var(--primary); }
.legal-footer-copy {
color: var(--on-surface-variant);
font-size: 13px;
}
/* ── ─────────────────────────────────────────────────────────
AUTH REDIRECT OVERLAY (index.html only)
Shown by JS when auth params present; hidden otherwise.
─────────────────────────────────────────────────────────── */
.auth-overlay {
display: none; /* toggled by JS */
position: fixed;
inset: 0;
background: var(--surface);
z-index: 200;
align-items: center;
justify-content: center;
padding: 24px;
}
.auth-card {
width: min(460px, 100%);
background: var(--surface-card);
border-radius: var(--r-xl);
padding: 36px 30px;
box-shadow: var(--shadow-lg);
text-align: center;
}
.auth-card h1 {
margin: 14px 0 8px;
font-family: var(--font-display);
font-size: 1.45rem;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--on-surface);
}
.auth-card p {
margin: 0 0 22px;
color: var(--on-surface-variant);
font-size: 0.97rem;
line-height: 1.65;
}
.auth-hint {
font-size: 0.87rem !important;
margin-top: 14px !important;
}
================================================================ */
/* ── Fonts ──────────────────────────────────────────────────────
Loaded via in each page's for better performance.
Families: Plus Jakarta Sans (display/headings) + Manrope (body)
──────────────────────────────────────────────────────────────── */
/* ── Tokens ─────────────────────────────────────────────────── */