150 lines
6.1 KiB
CSS
150 lines
6.1 KiB
CSS
/* ============================================================
|
|
THEME: PETAL
|
|
Soft, airy, romantic — lavender and blush on white cloud
|
|
Gentle curves, whisper shadows, nothing harsh
|
|
============================================================ */
|
|
|
|
[data-theme="petal"] {
|
|
/* ── Core palette ──────────────────────────────────────── */
|
|
--color-bg: #fdf8ff;
|
|
--color-surface: #f5effe;
|
|
--color-surface-2: #ede0fc;
|
|
--color-border: #e8d9f8;
|
|
--color-border-light: #f0e6fb;
|
|
|
|
/* ── Brand / Accent ────────────────────────────────────── */
|
|
--color-primary: #9b5de5;
|
|
--color-primary-hover: #7c3acd;
|
|
--color-accent: #f72585;
|
|
--color-accent-soft: rgba(247, 37, 133, 0.1);
|
|
--color-primary-soft: rgba(155, 93, 229, 0.1);
|
|
|
|
/* ── Text ──────────────────────────────────────────────── */
|
|
--color-heading: #2d1b4e;
|
|
--color-text: #4a3568;
|
|
--color-text-muted: #9b85b8;
|
|
--color-btn-text: #ffffff;
|
|
|
|
/* ── Shadows ───────────────────────────────────────────── */
|
|
--color-shadow: rgba(155, 93, 229, 0.22);
|
|
--color-card-shadow: 0 4px 24px rgba(155, 93, 229, 0.08);
|
|
--color-glow: 0 0 0 transparent;
|
|
|
|
/* ── Typography ────────────────────────────────────────── */
|
|
--font-heading: 'Cormorant Garamond', serif;
|
|
--font-body: 'Nunito', sans-serif;
|
|
|
|
/* ── Shape — very round, soft ──────────────────────────── */
|
|
--radius-sm: 8px;
|
|
--radius-md: 14px;
|
|
--radius-lg: 22px;
|
|
--radius-xl: 32px;
|
|
|
|
/* ── Nav specific ──────────────────────────────────────── */
|
|
--nav-bg: rgba(253, 248, 255, 0.92);
|
|
--nav-border: rgba(232, 217, 248, 0.8);
|
|
|
|
/* ── Hero specific ─────────────────────────────────────── */
|
|
--hero-bg: #fdf8ff;
|
|
--hero-gradient: radial-gradient(ellipse 80% 60% at 30% 0%, rgba(247,37,133,0.07) 0%, transparent 60%),
|
|
radial-gradient(ellipse 60% 50% at 90% 80%, rgba(155,93,229,0.09) 0%, transparent 60%);
|
|
|
|
/* ── Feature card ──────────────────────────────────────── */
|
|
--card-bg: #ffffff;
|
|
--card-border: #e8d9f8;
|
|
--card-hover-border: #9b5de5;
|
|
|
|
/* ── CTA section ───────────────────────────────────────── */
|
|
--cta-bg: #f5effe;
|
|
--cta-gradient: linear-gradient(135deg, rgba(247,37,133,0.05) 0%, rgba(155,93,229,0.06) 100%);
|
|
|
|
/* ── Footer ────────────────────────────────────────────── */
|
|
--footer-bg: #2d1b4e;
|
|
--footer-text: #9b85b8;
|
|
}
|
|
|
|
/* ── Petal-specific overrides ──────────────────────────── */
|
|
|
|
/* Extra rounded nav */
|
|
[data-theme="petal"] .site-header {
|
|
border-bottom-color: var(--color-border);
|
|
}
|
|
|
|
/* Hero badge — pill with blush tint */
|
|
[data-theme="petal"] .hero-badge {
|
|
background-color: rgba(247, 37, 133, 0.08);
|
|
border-color: rgba(247, 37, 133, 0.3);
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
[data-theme="petal"] .hero-badge-dot {
|
|
background-color: var(--color-accent);
|
|
}
|
|
|
|
/* Buttons — soft shadow, very round */
|
|
[data-theme="petal"] .btn-primary {
|
|
background: linear-gradient(135deg, #9b5de5, #f72585);
|
|
border-color: transparent;
|
|
box-shadow: 0 4px 18px rgba(155, 93, 229, 0.3);
|
|
}
|
|
|
|
[data-theme="petal"] .btn-primary:hover {
|
|
background: linear-gradient(135deg, #7c3acd, #d91f72);
|
|
box-shadow: 0 8px 28px rgba(155, 93, 229, 0.4);
|
|
}
|
|
|
|
/* Feature card — very round, petal shadow */
|
|
[data-theme="petal"] .feature-card {
|
|
box-shadow: 0 2px 16px rgba(155, 93, 229, 0.06);
|
|
}
|
|
|
|
[data-theme="petal"] .feature-card:hover {
|
|
box-shadow: 0 8px 32px rgba(155, 93, 229, 0.14);
|
|
}
|
|
|
|
/* Feature card bottom bar — gradient */
|
|
[data-theme="petal"] .feature-card::after {
|
|
background: linear-gradient(90deg, #9b5de5, #f72585);
|
|
}
|
|
|
|
/* Feature icon hover — gradient bg */
|
|
[data-theme="petal"] .feature-card:hover .feature-icon {
|
|
background: linear-gradient(135deg, #9b5de5, #f72585);
|
|
}
|
|
|
|
/* Hero card gradient top line */
|
|
[data-theme="petal"] .hero-card::before {
|
|
background: linear-gradient(90deg, #f72585, #9b5de5);
|
|
}
|
|
|
|
/* Float badge — accent pink */
|
|
[data-theme="petal"] .hero-float-badge {
|
|
background: linear-gradient(135deg, #9b5de5, #f72585);
|
|
box-shadow: 0 8px 24px rgba(247, 37, 133, 0.3);
|
|
}
|
|
|
|
/* CTA title gradient */
|
|
[data-theme="petal"] .cta-title em {
|
|
background: linear-gradient(90deg, #9b5de5, #f72585);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* Hero em gradient */
|
|
[data-theme="petal"] .hero-title em {
|
|
background: linear-gradient(90deg, #9b5de5, #f72585);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* Section label — accent */
|
|
[data-theme="petal"] .section-label {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
/* Footer — deep plum bg already in vars */
|
|
[data-theme="petal"] .site-footer {
|
|
border-top: none;
|
|
} |