/* ===================================
BLUEPRINTABLE DESIGN - DESIGN SYSTEM
=================================== */
/* CSS Variables - Design Tokens */
:root {
color-scheme: light; /* Disable browser auto dark mode */
/* Colors - Earthy, calm palette */
--color-primary: #54688a;
--color-primary-dark: #3d4f6e;
--color-primary-light: #7a8fad;
--color-accent: #b49575;
--color-accent-dark: #b88a5e;
--color-background: #fdfcfa;
--color-surface: #ffffff;
--color-surface-alt: #f7f5f2;
--color-text: #2c2c2c;
--color-text-light: #666666;
--color-text-lighter: #999999;
--color-border: #e8e6e3;
--color-border-light: #f0eeeb;
--color-success: #54688a;
--color-warning: #d4a574;
--color-error: #c85a54;
/* Typography */
--font-display: 'Crimson Pro', serif;
--font-body: 'Work Sans', sans-serif;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 2rem;
--font-size-4xl: 2.5rem;
--font-size-5xl: 3.5rem;
/* Spacing */
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2rem;
--space-xl: 3rem;
--space-2xl: 4rem;
--space-3xl: 6rem;
/* Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
/* Transitions */
--transition-fast: 150ms ease;
--transition-base: 250ms ease;
--transition-slow: 350ms ease;
}
/* ===================================
RESET & BASE STYLES
=================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px;
color-scheme: light;
}
body {
font-family: var(--font-body);
font-size: var(--font-size-base);
line-height: 1.6;
color: var(--color-text);
background-color: var(--color-background);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden; /* prevent horizontal scroll from any overflow */
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
line-height: 1.2;
font-weight: 700;
color: var(--color-text);
}
a {
color: inherit;
text-decoration: none;
transition: color var(--transition-fast);
}
button {
font-family: inherit;
cursor: pointer;
border: none;
background: none;
}
img {
max-width: 100%;
height: auto;
display: block;
}
ul, ol {
list-style: none;
}
/* ===================================
NAVIGATION
=================================== */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--color-border-light);
z-index: 100;
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.nav.scrolled {
box-shadow: var(--shadow-md);
}
.nav-container {
max-width: 1400px;
margin: 0 auto;
padding: var(--space-md) var(--space-lg);
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
gap: var(--space-xs);
font-family: var(--font-display);
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--color-primary);
}
.logo-icon {
font-size: var(--font-size-2xl);
line-height: 1;
}
.nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
padding: var(--space-xs);
}
.nav-toggle span {
width: 24px;
height: 2px;
background: var(--color-text);
transition: all var(--transition-base);
}
.nav-menu {
display: flex;
align-items: center;
gap: var(--space-lg);
}
.nav-menu a {
font-weight: 500;
font-size: var(--font-size-sm);
text-transform: uppercase;
letter-spacing: 0.05em;
transition: color var(--transition-fast);
}
.nav-menu a:hover {
color: var(--color-primary);
}
.nav-cta {
padding: var(--space-xs) var(--space-md);
background: var(--color-primary);
color: white !important;
border-radius: var(--radius-full);
transition: all var(--transition-base);
}
.nav-cta:hover {
background: var(--color-primary-dark);
transform: translateY(-1px);
}
/* ===================================
HERO SECTION
=================================== */
.hero {
padding: 140px var(--space-lg) var(--space-3xl);
background: linear-gradient(180deg, var(--color-surface-alt) 0%, var(--color-background) 100%);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 800px;
height: 800px;
background: radial-gradient(circle, rgba(90, 108, 87, 0.04) 0%, transparent 70%);
pointer-events: none;
}
.hero-container {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3xl);
align-items: center;
}
.hero-content {
animation: fadeInUp 0.8s ease;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-badge {
display: inline-block;
padding: var(--space-xs) var(--space-md);
background: var(--color-primary);
color: white;
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-lg);
}
.hero-title {
font-size: var(--font-size-5xl);
margin-bottom: var(--space-md);
line-height: 1.1;
}
.title-highlight {
color: var(--color-primary);
position: relative;
display: inline-block;
}
.title-highlight::after {
content: '';
position: absolute;
bottom: 8px;
left: 0;
right: 0;
height: 12px;
background: var(--color-accent);
opacity: 0.3;
z-index: -1;
}
.hero-subtitle {
font-size: var(--font-size-lg);
color: var(--color-text-light);
margin-bottom: var(--space-xl);
max-width: 560px;
line-height: 1.7;
}
.hero-trust {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
margin-bottom: var(--space-xl);
}
.trust-item {
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--font-size-sm);
color: var(--color-text-light);
}
.trust-item svg {
color: var(--color-success);
}
.hero-cta {
display: flex;
gap: var(--space-md);
flex-wrap: wrap;
}
.hero-disclaimer {
margin-top: var(--space-md);
font-size: var(--font-size-sm);
color: var(--color-text-lighter);
}
/* Button Styles */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: 16px 32px;
font-weight: 600;
font-size: var(--font-size-base);
border-radius: var(--radius-md);
transition: all var(--transition-base);
white-space: nowrap;
}
.btn-primary {
background: var(--color-primary);
color: white;
box-shadow: 0 2px 8px rgba(90, 108, 87, 0.2);
}
.btn-primary:hover {
background: var(--color-primary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(90, 108, 87, 0.3);
}
.btn-primary:active {
transform: translateY(0);
}
/* Notify me button — outline style */
.notify-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
padding: 11px 20px;
font-size: var(--font-size-sm);
font-weight: 600;
font-family: inherit;
border: 2px solid var(--color-primary);
border-radius: var(--radius-md);
background: transparent;
color: var(--color-primary);
cursor: pointer;
transition: all var(--transition-base);
white-space: nowrap;
flex-shrink: 0;
min-width: 180px; /* never too narrow */
}
.notify-btn:hover {
background: var(--color-primary);
color: white;
}
.btn-secondary {
background: white;
color: var(--color-primary);
border: 2px solid var(--color-primary);
}
.btn-secondary:hover {
background: var(--color-primary);
color: white;
}
/* Hero Visual / Planner Mockup */
.hero-visual {
position: relative;
animation: fadeIn 1s ease 0.3s both;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.planner-mockup {
background: #ffffff; /* explicit — not var() — for dark mode safety */
color: #2c2c2c;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
padding: var(--space-xl);
max-width: 480px;
margin: 0 auto;
border: 1px solid var(--color-border);
}
.mockup-header {
text-align: center;
border-bottom: 2px solid var(--color-border);
padding-bottom: var(--space-md);
margin-bottom: var(--space-lg);
}
.mockup-date {
font-size: var(--font-size-sm);
color: var(--color-text-light);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-xs);
}
.mockup-title {
font-family: var(--font-display);
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--color-primary);
}
.mockup-content {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.mockup-section {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.section-label {
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-light);
}
.section-line {
height: 2px;
background: var(--color-border);
border-radius: 2px;
}
.section-line.long {
height: 40px;
background: var(--color-surface-alt);
border: 1px solid var(--color-border);
}
.section-item {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.checkbox {
width: 20px;
height: 20px;
border: 2px solid var(--color-border);
border-radius: var(--radius-sm);
flex-shrink: 0;
}
.time-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-xs);
}
.time-block {
height: 60px;
background: var(--color-surface-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
}
.time-block.active {
background: var(--color-primary);
border-color: var(--color-primary);
}
/* Floating Badges */
.floating-badge {
position: absolute;
background: white;
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-full);
box-shadow: var(--shadow-lg);
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--font-size-sm);
font-weight: 600;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.badge-1 {
top: 10%;
right: -10%;
animation-delay: 0s;
}
.badge-2 {
bottom: 15%;
left: -5%;
animation-delay: 1.5s;
}
.badge-icon {
font-size: var(--font-size-lg);
}
/* ===================================
STATS SECTION
=================================== */
.stats {
padding: var(--space-2xl) var(--space-lg);
background: white;
border-top: 1px solid var(--color-border-light);
border-bottom: 1px solid var(--color-border-light);
}
.stats-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-xl);
}
.stat-item {
text-align: center;
}
.stat-number {
font-family: var(--font-display);
font-size: var(--font-size-4xl);
font-weight: 700;
color: var(--color-primary);
margin-bottom: var(--space-xs);
}
.stat-label {
font-size: var(--font-size-sm);
color: var(--color-text-light);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ===================================
PRODUCTS SECTION
=================================== */
.products {
padding: var(--space-3xl) var(--space-lg);
}
.products-container {
max-width: 1400px;
margin: 0 auto;
}
.section-header {
text-align: center;
margin-bottom: var(--space-3xl);
}
.section-title {
font-size: var(--font-size-4xl);
margin-bottom: var(--space-md);
color: var(--color-text);
}
.section-subtitle {
font-size: var(--font-size-lg);
color: var(--color-text-light);
max-width: 600px;
margin: 0 auto;
}
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
gap: var(--space-xl);
margin-bottom: var(--space-2xl);
}
/* Product Card */
.product-card {
background: white;
border-radius: var(--radius-lg);
overflow: hidden;
border: 2px solid var(--color-border-light);
transition: all var(--transition-base);
display: flex;
flex-direction: column;
position: relative;
z-index: 1; /* explicit low z-index — below sticky filter bar */
}
.product-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
border-color: var(--color-primary);
}
.product-card.featured {
border-color: var(--color-accent);
}
.product-card.bundle {
border-color: var(--color-primary);
}
/* Featured card that spans 2 columns on desktop */
.featured-span {
grid-column: span 2;
}
.product-badge {
position: absolute;
top: var(--space-md);
right: var(--space-md);
background: var(--color-accent);
color: white;
padding: var(--space-xs) var(--space-md);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
z-index: 10;
box-shadow: var(--shadow-md);
}
.product-badge.best-value {
background: var(--color-primary);
}
.product-image {
position: relative;
aspect-ratio: 4 / 3;
background: linear-gradient(135deg, var(--color-surface-alt) 0%, #f0eeeb 100%);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-xl);
overflow: hidden;
}
/* When product-image contains a real ![]()
tag */
.product-image > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
padding: 0;
}
.bundle-image {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}
.product-mockup {
max-width: 200px;
}
.mockup-mini {
background: white;
border-radius: var(--radius-md);
padding: var(--space-md);
box-shadow: var(--shadow-lg);
border: 2px solid var(--color-border);
}
.mini-header {
font-size: var(--font-size-xs);
font-weight: 700;
text-align: center;
padding: var(--space-xs);
background: var(--color-primary);
color: white;
border-radius: var(--radius-sm);
margin-bottom: var(--space-sm);
letter-spacing: 0.05em;
}
.mini-lines {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.mini-line {
height: 12px;
background: var(--color-surface-alt);
border-radius: 2px;
}
.mini-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-xs);
}
.mini-box {
aspect-ratio: 1;
background: var(--color-surface-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
}
.bundle-text {
text-align: center;
color: white;
}
.bundle-title {
font-family: var(--font-display);
font-size: var(--font-size-2xl);
font-weight: 700;
margin-bottom: var(--space-sm);
line-height: 1.2;
}
.bundle-items {
font-size: var(--font-size-sm);
opacity: 0.9;
}
.preview-trigger {
position: absolute;
bottom: var(--space-md);
left: 50%;
transform: translateX(-50%);
background: white;
color: var(--color-primary);
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: 600;
display: flex;
align-items: center;
gap: var(--space-xs);
opacity: 0;
transition: all var(--transition-base);
box-shadow: var(--shadow-md);
border: 2px solid var(--color-primary);
}
.product-card:hover .preview-trigger {
opacity: 1;
transform: translateX(-50%) translateY(-4px);
}
.product-content {
padding: var(--space-xl);
flex: 1;
display: flex;
flex-direction: column;
}
.product-category {
font-size: var(--font-size-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-accent);
margin-bottom: var(--space-xs);
}
.product-name {
font-size: var(--font-size-2xl);
font-weight: 700;
margin-bottom: var(--space-sm);
color: var(--color-text);
}
.product-description {
color: var(--color-text-light);
line-height: 1.7;
margin-bottom: var(--space-md);
}
.product-features {
margin-bottom: var(--space-lg);
flex: 1;
}
.product-features li {
padding: var(--space-xs) 0;
padding-left: var(--space-lg);
position: relative;
font-size: var(--font-size-sm);
color: var(--color-text);
line-height: 1.6;
}
.product-features li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--color-success);
font-weight: 700;
}
.product-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-md);
padding-top: var(--space-lg); /* more space above */
border-top: 2px solid var(--color-border-light);
margin-top: auto; /* push to bottom of card */
}
.product-price {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.price-main {
font-family: var(--font-display);
font-size: var(--font-size-3xl);
font-weight: 700;
color: var(--color-primary);
}
.price-original {
font-size: var(--font-size-lg);
color: var(--color-text-lighter);
text-decoration: line-through;
}
.price-save {
font-size: var(--font-size-xs);
font-weight: 700;
color: var(--color-accent-dark);
background: rgba(212, 165, 116, 0.1);
padding: 4px 8px;
border-radius: var(--radius-sm);
}
.view-all {
text-align: center;
margin-top: var(--space-2xl);
}
/* ===================================
TESTIMONIALS
=================================== */
.testimonials {
padding: var(--space-3xl) var(--space-lg);
background: var(--color-surface-alt);
}
.testimonials-container {
max-width: 1400px;
margin: 0 auto;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
gap: var(--space-xl);
}
.testimonial-card {
background: white;
padding: var(--space-xl);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
border: 1px solid var(--color-border-light);
transition: all var(--transition-base);
}
.testimonial-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-4px);
}
.testimonial-rating {
color: var(--color-accent);
font-size: var(--font-size-lg);
margin-bottom: var(--space-md);
}
.testimonial-text {
font-size: var(--font-size-base);
line-height: 1.7;
color: var(--color-text);
margin-bottom: var(--space-lg);
}
.testimonial-author {
display: flex;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-sm);
}
.author-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--color-primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: var(--font-size-sm);
}
.author-name {
font-weight: 700;
color: var(--color-text);
}
.author-role {
font-size: var(--font-size-sm);
color: var(--color-text-light);
}
.testimonial-verified {
font-size: var(--font-size-xs);
color: var(--color-success);
font-weight: 600;
display: flex;
align-items: center;
gap: 4px;
}
/* ===================================
LEAD MAGNET SECTION
=================================== */
.lead-magnet {
padding: var(--space-3xl) var(--space-lg);
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
color: white;
position: relative;
overflow: hidden;
}
.lead-magnet::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 800px;
height: 800px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
pointer-events: none;
}
.lead-magnet-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--space-3xl);
align-items: center;
position: relative;
z-index: 1;
}
.lead-magnet-badge {
display: inline-block;
background: var(--color-accent);
padding: var(--space-xs) var(--space-md);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-md);
}
.lead-magnet-title {
font-size: var(--font-size-4xl);
margin-bottom: var(--space-md);
color: white;
}
.lead-magnet-description {
font-size: var(--font-size-lg);
line-height: 1.7;
opacity: 0.95;
margin-bottom: var(--space-lg);
}
.lead-magnet-features {
margin-bottom: var(--space-xl);
}
.lead-magnet-features li {
padding: var(--space-sm) 0;
padding-left: var(--space-lg);
position: relative;
line-height: 1.6;
opacity: 0.95;
}
.lead-magnet-features li::before {
content: '✓';
position: absolute;
left: 0;
font-weight: 700;
color: var(--color-accent);
}
.lead-form {
display: flex;
gap: var(--space-sm);
max-width: 600px;
margin-bottom: var(--space-md);
}
.lead-form input {
flex: 1;
padding: 16px 20px;
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.1);
color: white;
font-size: var(--font-size-base);
font-family: inherit;
transition: all var(--transition-base);
}
.lead-form input::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.lead-form input:focus {
outline: none;
border-color: var(--color-accent);
background: rgba(255, 255, 255, 0.15);
}
.lead-form .btn-primary {
flex-shrink: 0;
background: var(--color-accent);
color: white;
}
.lead-form .btn-primary:hover {
background: var(--color-accent-dark);
}
.lead-disclaimer {
font-size: var(--font-size-sm);
opacity: 0.8;
line-height: 1.6;
}
.free-planner-preview {
background: white;
border-radius: var(--radius-lg);
padding: var(--space-xl);
box-shadow: var(--shadow-xl);
}
.preview-label {
text-align: center;
font-size: var(--font-size-xs);
font-weight: 700;
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.1em;
padding-bottom: var(--space-md);
border-bottom: 2px solid var(--color-border);
margin-bottom: var(--space-lg);
}
.preview-content {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.preview-section {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.preview-title {
font-size: var(--font-size-xs);
font-weight: 700;
color: var(--color-text-light);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.preview-line {
height: 32px;
background: var(--color-surface-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
}
.preview-line.short {
height: 24px;
}
.preview-item {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.preview-check {
width: 18px;
height: 18px;
border: 2px solid var(--color-border);
border-radius: var(--radius-sm);
flex-shrink: 0;
color: var(--color-text-lighter);
}
/* ===================================
HOW IT WORKS
=================================== */
.how-it-works {
padding: var(--space-3xl) var(--space-lg);
}
.how-container {
max-width: 1400px;
margin: 0 auto;
}
.steps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-xl);
}
.step-card {
text-align: center;
padding: var(--space-xl);
background: white;
border-radius: var(--radius-lg);
border: 2px solid var(--color-border-light);
transition: all var(--transition-base);
}
.step-card:hover {
border-color: var(--color-primary);
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.step-number {
font-family: var(--font-display);
font-size: var(--font-size-3xl);
font-weight: 700;
color: var(--color-accent);
opacity: 0.5;
margin-bottom: var(--space-md);
}
.step-icon {
color: var(--color-primary);
margin-bottom: var(--space-md);
}
.step-title {
font-size: var(--font-size-xl);
margin-bottom: var(--space-md);
color: var(--color-text);
}
.step-description {
color: var(--color-text-light);
line-height: 1.7;
}
/* ===================================
TRUST SECTION
=================================== */
.trust-section {
padding: var(--space-2xl) var(--space-lg);
background: var(--color-surface-alt);
border-top: 1px solid var(--color-border-light);
border-bottom: 1px solid var(--color-border-light);
}
.trust-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-lg);
}
.trust-badge-item {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-md);
background: white;
border-radius: var(--radius-md);
}
.trust-icon {
font-size: var(--font-size-3xl);
}
.trust-title {
font-weight: 700;
font-size: var(--font-size-base);
color: var(--color-text);
}
.trust-desc {
font-size: var(--font-size-sm);
color: var(--color-text-light);
}
/* ===================================
FOOTER
=================================== */
.footer {
background: var(--color-text);
color: rgba(255, 255, 255, 0.8);
padding: var(--space-xl) var(--space-lg) var(--space-md);
}
.footer-container {
max-width: 1400px;
margin: 0 auto;
}
.footer-main {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr;
gap: var(--space-2xl);
align-items: flex-start;
margin-bottom: var(--space-lg);
padding-bottom: var(--space-lg);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-brand {
/* width set by grid column */
}
.footer-brand .footer-logo {
display: flex;
align-items: center;
gap: var(--space-xs);
font-family: var(--font-display);
font-size: var(--font-size-lg);
font-weight: 700;
color: white;
margin-bottom: var(--space-xs);
}
.footer-tagline {
line-height: 1.5;
margin-bottom: var(--space-sm);
font-size: var(--font-size-sm);
max-width: 220px;
}
.footer-social {
display: flex;
gap: var(--space-md);
}
.footer-social a {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
transition: all var(--transition-base);
}
.footer-social a:hover {
background: var(--color-primary);
transform: translateY(-2px);
}
.footer-links {
display: contents; /* children become direct grid children */
}
.footer-heading {
color: white;
font-size: var(--font-size-sm);
font-weight: 700;
margin-bottom: var(--space-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.footer-column ul li {
margin-bottom: 6px;
}
.footer-column ul li a {
font-size: var(--font-size-sm);
transition: color var(--transition-fast);
}
.footer-column ul li a:hover {
color: white;
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--space-sm);
}
.footer-copyright {
font-size: var(--font-size-xs);
opacity: 0.7;
}
.footer-payment {
display: flex;
align-items: center;
gap: var(--space-md);
font-size: var(--font-size-sm);
}
.payment-icons {
display: flex;
gap: var(--space-xs);
}
.payment-icon {
background: rgba(255, 255, 255, 0.1);
padding: 4px 8px;
border-radius: var(--radius-sm);
font-size: var(--font-size-xs);
font-weight: 700;
}
/* ===================================
MODAL
=================================== */
.modal {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
padding: var(--space-lg);
}
.modal.active {
display: flex;
}
.modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(4px);
}
.modal-content {
position: relative;
background: white;
border-radius: var(--radius-xl);
max-width: 900px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
box-shadow: var(--shadow-xl);
animation: modalIn 0.3s ease;
}
@keyframes modalIn {
from {
opacity: 0;
transform: scale(0.95) translateY(20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.modal-close {
position: absolute;
top: var(--space-lg);
right: var(--space-lg);
width: 40px;
height: 40px;
background: var(--color-surface-alt);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-base);
z-index: 10;
}
.modal-close:hover {
background: var(--color-text);
color: white;
}
.modal-header {
padding: var(--space-2xl) var(--space-xl);
background: var(--color-surface-alt);
text-align: center;
}
.modal-title {
font-size: var(--font-size-3xl);
margin-bottom: var(--space-sm);
}
.modal-subtitle {
color: var(--color-text-light);
}
.modal-gallery {
padding: var(--space-xl);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space-lg);
}
.modal-gallery img,
.modal-gallery .preview-page {
width: 100%;
border-radius: var(--radius-md);
border: 2px solid var(--color-border);
}
.preview-page {
aspect-ratio: 8.5 / 11;
background: white;
padding: var(--space-md);
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.modal-footer {
padding: var(--space-xl);
background: var(--color-surface-alt);
text-align: center;
border-top: 2px solid var(--color-border-light);
}
.modal-cta-text {
font-size: var(--font-size-lg);
color: var(--color-text);
margin-bottom: var(--space-md);
}
/* ===================================
CART NOTIFICATION
=================================== */
.cart-notification {
position: fixed;
bottom: var(--space-lg);
right: var(--space-lg);
background: var(--color-success);
color: white;
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-md);
box-shadow: var(--shadow-xl);
display: none;
animation: slideIn 0.3s ease;
z-index: 1000;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.cart-notification.show {
display: block;
}
.notification-content {
display: flex;
align-items: center;
gap: var(--space-sm);
font-weight: 600;
}
/* ===================================
SHOP PAGE STYLES
=================================== */
.page-header {
padding: 120px var(--space-lg) var(--space-2xl);
background: linear-gradient(180deg, var(--color-surface-alt) 0%, var(--color-background) 100%);
text-align: center;
}
.page-header-container {
max-width: 800px;
margin: 0 auto;
}
.page-title {
font-size: var(--font-size-4xl);
margin-bottom: var(--space-md);
}
.page-subtitle {
font-size: var(--font-size-lg);
color: var(--color-text-light);
line-height: 1.7;
}
.filter-bar {
padding: var(--space-lg);
background: white;
border-bottom: 1px solid var(--color-border-light);
position: sticky;
top: 73px;
z-index: 95; /* above product cards (which are z-index auto) */
isolation: isolate; /* new stacking context so children don't bleed */
}
.filter-container {
max-width: 1400px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-lg);
flex-wrap: wrap;
}
.filter-group {
display: flex;
gap: var(--space-sm);
flex-wrap: wrap;
}
.filter-btn {
padding: var(--space-sm) var(--space-md);
background: var(--color-surface-alt);
color: var(--color-text);
border: 2px solid transparent;
border-radius: var(--radius-full);
font-weight: 600;
font-size: var(--font-size-sm);
transition: all var(--transition-base);
}
.filter-btn:hover {
background: var(--color-border-light);
}
.filter-btn.active {
background: var(--color-primary);
color: white;
border-color: var(--color-primary);
}
.filter-sort select {
padding: var(--space-sm) var(--space-md);
padding-right: var(--space-xl);
border: 2px solid var(--color-border);
border-radius: var(--radius-md);
background: white;
font-family: inherit;
font-weight: 600;
font-size: var(--font-size-sm);
cursor: pointer;
transition: all var(--transition-base);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%235a6c57' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
}
.filter-sort select:hover {
border-color: var(--color-primary);
}
.filter-sort select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(90, 108, 87, 0.1);
}
.shop-products {
padding: var(--space-3xl) var(--space-lg);
}
.shop-container {
max-width: 1400px;
margin: 0 auto;
}
.product-card.hidden {
display: none;
}
/* Active link style for navigation */
.nav-menu a.active {
color: var(--color-primary);
position: relative;
}
.nav-menu a.active::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
right: 0;
height: 2px;
background: var(--color-primary);
}
/* ===================================
FREE RESOURCES PAGE
=================================== */
.free-hero {
padding: 120px var(--space-lg) var(--space-3xl);
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
color: white;
position: relative;
overflow: hidden;
}
.free-hero::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 800px;
height: 800px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
}
.free-hero-container {
max-width: 900px;
margin: 0 auto;
text-align: center;
position: relative;
z-index: 1;
}
.free-hero-title {
font-size: var(--font-size-5xl);
margin-bottom: var(--space-md);
color: white;
}
.free-hero-subtitle {
font-size: var(--font-size-lg);
opacity: 0.95;
margin-bottom: var(--space-xl);
line-height: 1.7;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.free-stats {
display: flex;
justify-content: center;
gap: var(--space-2xl);
flex-wrap: wrap;
}
.free-stat {
font-size: var(--font-size-base);
opacity: 0.9;
}
.free-stat strong {
display: block;
font-size: var(--font-size-2xl);
font-family: var(--font-display);
margin-bottom: 4px;
}
.free-resources {
padding: var(--space-3xl) var(--space-lg);
}
/* .resource-visual first definition removed — see updated definition below */
.free-resources-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
gap: var(--space-xl);
}
.free-resource-card {
background: white;
border-radius: var(--radius-lg);
border: 2px solid var(--color-border-light);
overflow: hidden;
transition: all var(--transition-base);
position: relative;
}
.free-resource-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--color-primary);
}
.free-resource-card.featured {
border-color: var(--color-accent);
border-width: 3px;
}
.resource-badge {
position: absolute;
top: var(--space-md);
right: var(--space-md);
background: var(--color-accent);
color: white;
padding: 6px 12px;
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: 700;
text-transform: uppercase;
z-index: 10;
}
.resource-visual {
aspect-ratio: 3 / 4;
background: linear-gradient(135deg, var(--color-surface-alt) 0%, #f0eeeb 100%);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-lg);
overflow: hidden;
position: relative;
}
/* When resource-visual contains a real ![]()
tag */
.resource-visual > img,
.resource-visual .resource-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
padding: 0;
border-radius: 0;
}
.resource-mockup {
max-width: 160px;
}
.resource-content {
padding: var(--space-xl);
}
.resource-title {
font-size: var(--font-size-xl);
margin-bottom: var(--space-sm);
color: var(--color-text);
}
.resource-description {
color: var(--color-text-light);
margin-bottom: var(--space-md);
line-height: 1.6;
}
.resource-features {
margin-bottom: var(--space-lg);
}
.resource-features li {
padding: 6px 0;
padding-left: 24px;
position: relative;
font-size: var(--font-size-sm);
color: var(--color-text);
}
.resource-features li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--color-success);
font-weight: 700;
}
.resource-form {
display: flex;
gap: var(--space-sm);
flex-direction: column;
}
.resource-form input {
flex: 1;
padding: 14px 16px;
border: 2px solid var(--color-border);
border-radius: var(--radius-md);
font-family: inherit;
font-size: var(--font-size-base);
transition: all var(--transition-base);
}
.resource-form input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(90, 108, 87, 0.1);
}
.resource-form .btn {
width: 100%;
justify-content: center;
}
.bonus-section {
padding: var(--space-3xl) var(--space-lg);
background: var(--color-surface-alt);
}
.bonus-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: var(--space-3xl);
align-items: center;
}
.bonus-title {
font-size: var(--font-size-4xl);
margin-bottom: var(--space-md);
}
.bonus-description {
font-size: var(--font-size-lg);
color: var(--color-text-light);
margin-bottom: var(--space-lg);
line-height: 1.7;
}
.bonus-list {
list-style: none;
}
.bonus-list li {
padding: var(--space-sm) 0;
padding-left: var(--space-lg);
position: relative;
font-size: var(--font-size-base);
}
.bonus-list li::before {
content: '◆';
position: absolute;
left: 0;
color: var(--color-accent);
}
.bonus-mockup {
background: white;
padding: var(--space-xl);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
border: 3px solid var(--color-accent);
text-align: center;
position: relative;
}
.bonus-cover {
font-family: var(--font-display);
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--color-primary);
padding: var(--space-2xl);
background: linear-gradient(135deg, var(--color-surface-alt) 0%, #f0eeeb 100%);
border-radius: var(--radius-md);
margin-bottom: var(--space-md);
}
.bonus-label {
display: inline-block;
background: var(--color-accent);
color: white;
padding: 8px 16px;
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: 700;
text-transform: uppercase;
}
.free-cta {
padding: var(--space-3xl) var(--space-lg);
background: white;
text-align: center;
}
.free-cta-container {
max-width: 800px;
margin: 0 auto;
}
.free-cta-title {
font-size: var(--font-size-4xl);
margin-bottom: var(--space-md);
}
.free-cta-description {
font-size: var(--font-size-lg);
color: var(--color-text-light);
margin-bottom: var(--space-xl);
line-height: 1.7;
}
.btn-large {
font-size: var(--font-size-lg);
padding: 20px 40px;
}
/* ===================================
TEMPLATES PAGE
=================================== */
.template-categories {
padding: var(--space-2xl) var(--space-lg);
background: white;
}
.categories-container {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-lg);
}
.category-card {
background: var(--color-surface-alt);
padding: var(--space-xl);
border-radius: var(--radius-lg);
text-align: center;
cursor: pointer;
transition: all var(--transition-base);
border: 2px solid transparent;
}
.category-card:hover {
background: white;
border-color: var(--color-primary);
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.category-icon {
font-size: 48px;
margin-bottom: var(--space-sm);
}
.category-name {
font-size: var(--font-size-lg);
font-weight: 700;
margin-bottom: var(--space-xs);
}
.category-count {
font-size: var(--font-size-sm);
color: var(--color-text-light);
}
.template-section {
padding: var(--space-3xl) var(--space-lg);
}
.template-section.gray {
background: var(--color-surface-alt);
}
.template-section-container {
max-width: 1400px;
margin: 0 auto;
}
.templates-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--space-xl);
}
.template-item {
background: white;
border-radius: var(--radius-lg);
overflow: hidden;
border: 2px solid var(--color-border-light);
transition: all var(--transition-base);
}
.template-item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--color-primary);
}
.template-preview {
height: 200px;
background: linear-gradient(135deg, var(--color-surface-alt) 0%, #f0eeeb 100%);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-lg);
}
.preview-mockup {
width: 140px;
background: white;
border-radius: var(--radius-sm);
padding: var(--space-md);
box-shadow: var(--shadow-md);
}
.mockup-label {
font-size: var(--font-size-xs);
font-weight: 700;
text-align: center;
color: var(--color-primary);
margin-bottom: var(--space-sm);
letter-spacing: 0.05em;
}
.mockup-lines {
display: flex;
flex-direction: column;
gap: 6px;
}
.line {
height: 8px;
background: var(--color-surface-alt);
border-radius: 2px;
}
.line.short {
width: 70%;
}
.mockup-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
height: 80px;
}
.mockup-grid.weekly {
grid-template-columns: repeat(7, 1fr);
height: 60px;
}
.mockup-grid > div,
.mockup-grid::after {
background: var(--color-surface-alt);
border-radius: 2px;
}
.mockup-checklist {
display: flex;
flex-direction: column;
gap: 6px;
}
.check-item {
height: 12px;
background: var(--color-surface-alt);
border-radius: 2px;
}
.template-info {
padding: var(--space-md);
}
.template-title {
font-size: var(--font-size-base);
font-weight: 700;
margin-bottom: var(--space-xs);
}
.template-desc {
font-size: var(--font-size-sm);
color: var(--color-text-light);
margin-bottom: var(--space-sm);
line-height: 1.5;
}
.template-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-md);
padding: var(--space-sm) 0;
border-top: 1px solid var(--color-border-light);
}
.template-format {
font-size: var(--font-size-xs);
color: var(--color-text-lighter);
}
.template-price {
font-weight: 700;
color: var(--color-primary);
}
.btn-sm {
padding: 10px 20px;
font-size: var(--font-size-sm);
width: 100%;
justify-content: center;
}
.templates-cta {
padding: var(--space-3xl) var(--space-lg);
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
color: white;
text-align: center;
}
.templates-cta-container {
max-width: 900px;
margin: 0 auto;
}
.cta-title {
font-size: var(--font-size-4xl);
margin-bottom: var(--space-md);
color: white;
}
.cta-description {
font-size: var(--font-size-lg);
opacity: 0.95;
margin-bottom: var(--space-xl);
line-height: 1.7;
}
.cta-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-md);
margin-bottom: var(--space-xl);
text-align: left;
}
.cta-feature {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.cta-icon {
color: var(--color-accent);
font-weight: 700;
}
.cta-pricing {
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-xl);
}
.cta-price-main {
font-family: var(--font-display);
font-size: var(--font-size-5xl);
font-weight: 700;
}
.cta-price-original {
font-size: var(--font-size-2xl);
text-decoration: line-through;
opacity: 0.6;
}
.cta-price-save {
background: var(--color-accent);
padding: 8px 16px;
border-radius: var(--radius-full);
font-weight: 700;
font-size: var(--font-size-sm);
}
/* ===================================
BUSINESS PAGE
=================================== */
.business-hero {
padding: 120px var(--space-lg) var(--space-3xl);
background: linear-gradient(180deg, var(--color-surface-alt) 0%, var(--color-background) 100%);
}
.business-hero-container {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--space-3xl);
align-items: center;
}
.business-hero-title {
font-size: var(--font-size-5xl);
margin-bottom: var(--space-md);
}
.business-hero-subtitle {
font-size: var(--font-size-lg);
color: var(--color-text-light);
margin-bottom: var(--space-xl);
line-height: 1.7;
}
.business-stats-mini {
display: flex;
gap: var(--space-xl);
margin-bottom: var(--space-xl);
}
.stat-mini {
display: flex;
flex-direction: column;
gap: 4px;
}
.stat-mini strong {
font-size: var(--font-size-2xl);
font-family: var(--font-display);
color: var(--color-primary);
}
.stat-mini span {
font-size: var(--font-size-sm);
color: var(--color-text-light);
}
.business-cta {
display: flex;
gap: var(--space-md);
}
.business-mockup {
background: white;
border-radius: var(--radius-lg);
padding: var(--space-xl);
box-shadow: var(--shadow-xl);
border: 2px solid var(--color-border);
}
.business-screen {
background: var(--color-surface-alt);
border-radius: var(--radius-md);
padding: var(--space-lg);
}
.screen-header {
font-size: var(--font-size-xs);
font-weight: 700;
text-align: center;
color: var(--color-primary);
margin-bottom: var(--space-md);
padding-bottom: var(--space-sm);
border-bottom: 2px solid var(--color-border);
}
.screen-content {
min-height: 200px;
}
.team-section {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.team-label {
font-size: var(--font-size-xs);
font-weight: 600;
color: var(--color-text-light);
margin-bottom: var(--space-xs);
}
.team-item {
display: flex;
align-items: center;
gap: var(--space-sm);
background: white;
padding: var(--space-sm);
border-radius: var(--radius-sm);
}
.item-status {
width: 16px;
height: 16px;
border: 2px solid var(--color-border);
border-radius: 50%;
}
.item-status.active {
background: var(--color-success);
border-color: var(--color-success);
}
.item-text {
flex: 1;
height: 12px;
background: var(--color-surface-alt);
border-radius: 2px;
}
.business-benefits {
padding: var(--space-3xl) var(--space-lg);
}
.business-benefits-container {
max-width: 1400px;
margin: 0 auto;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--space-xl);
}
.benefit-card {
padding: var(--space-xl);
background: white;
border-radius: var(--radius-lg);
border: 2px solid var(--color-border-light);
transition: all var(--transition-base);
}
.benefit-card:hover {
border-color: var(--color-primary);
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.benefit-icon {
color: var(--color-primary);
margin-bottom: var(--space-md);
}
.benefit-title {
font-size: var(--font-size-xl);
margin-bottom: var(--space-sm);
}
.benefit-description {
color: var(--color-text-light);
line-height: 1.7;
}
.use-cases {
padding: var(--space-3xl) var(--space-lg);
background: var(--color-surface-alt);
}
.use-cases-container {
max-width: 1400px;
margin: 0 auto;
}
.use-cases-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-xl);
}
.use-case-card {
background: white;
padding: var(--space-xl);
border-radius: var(--radius-lg);
border: 2px solid var(--color-border-light);
}
.use-case-icon {
font-size: 48px;
margin-bottom: var(--space-md);
}
.use-case-title {
font-size: var(--font-size-xl);
margin-bottom: var(--space-sm);
}
.use-case-description {
color: var(--color-text-light);
margin-bottom: var(--space-md);
line-height: 1.7;
}
.use-case-features {
list-style: none;
}
.use-case-features li {
padding: 6px 0;
padding-left: var(--space-lg);
position: relative;
font-size: var(--font-size-sm);
color: var(--color-text);
}
.use-case-features li::before {
content: '→';
position: absolute;
left: 0;
color: var(--color-primary);
}
.business-pricing {
padding: var(--space-3xl) var(--space-lg);
}
.business-pricing-container {
max-width: 1400px;
margin: 0 auto;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-xl);
margin-bottom: var(--space-xl);
}
.pricing-card {
background: white;
border: 2px solid var(--color-border-light);
border-radius: var(--radius-lg);
padding: var(--space-xl);
position: relative;
}
.pricing-card.featured {
border-color: var(--color-primary);
border-width: 3px;
}
.pricing-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--color-accent);
color: white;
padding: 6px 16px;
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: 700;
}
.pricing-header {
text-align: center;
margin-bottom: var(--space-lg);
padding-bottom: var(--space-lg);
border-bottom: 2px solid var(--color-border-light);
}
.pricing-plan {
font-size: var(--font-size-2xl);
margin-bottom: var(--space-xs);
}
.pricing-team-size {
color: var(--color-text-light);
font-size: var(--font-size-sm);
}
.pricing-price {
text-align: center;
margin-bottom: var(--space-lg);
}
.price-amount {
font-family: var(--font-display);
font-size: var(--font-size-4xl);
font-weight: 700;
color: var(--color-primary);
}
.price-period {
font-size: var(--font-size-base);
color: var(--color-text-light);
}
.pricing-features {
list-style: none;
margin-bottom: var(--space-xl);
}
.pricing-features li {
padding: var(--space-sm) 0;
padding-left: var(--space-lg);
position: relative;
line-height: 1.6;
}
.pricing-features li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--color-success);
font-weight: 700;
}
.pricing-note {
text-align: center;
color: var(--color-text-light);
font-size: var(--font-size-sm);
max-width: 800px;
margin: 0 auto;
}
.business-testimonials {
padding: var(--space-3xl) var(--space-lg);
background: var(--color-surface-alt);
}
.business-testimonials-container {
max-width: 1400px;
margin: 0 auto;
}
.business-testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
gap: var(--space-xl);
}
.business-testimonial {
background: white;
padding: var(--space-xl);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.testimonial-stars {
color: var(--color-accent);
font-size: var(--font-size-lg);
margin-bottom: var(--space-md);
}
.testimonial-quote {
font-size: var(--font-size-base);
line-height: 1.7;
color: var(--color-text);
margin-bottom: var(--space-lg);
}
.author-company {
font-size: var(--font-size-sm);
color: var(--color-text-light);
}
.business-contact {
padding: var(--space-3xl) var(--space-lg);
}
.business-contact-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3xl);
align-items: start;
}
.contact-title {
font-size: var(--font-size-4xl);
margin-bottom: var(--space-md);
}
.contact-description {
font-size: var(--font-size-lg);
color: var(--color-text-light);
margin-bottom: var(--space-xl);
line-height: 1.7;
}
.contact-benefits {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.contact-benefit {
display: flex;
align-items: center;
gap: var(--space-sm);
color: var(--color-text);
}
.contact-benefit svg {
color: var(--color-success);
flex-shrink: 0;
}
.contact-form-wrapper {
background: white;
padding: var(--space-xl);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
border: 2px solid var(--color-border-light);
}
.business-form {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.form-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-group label {
font-weight: 600;
font-size: var(--font-size-sm);
color: var(--color-text);
}
.form-group input,
.form-group select,
.form-group textarea {
padding: 12px 16px;
border: 2px solid var(--color-border);
border-radius: var(--radius-md);
font-family: inherit;
font-size: var(--font-size-base);
transition: all var(--transition-base);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(90, 108, 87, 0.1);
}
.btn-full {
width: 100%;
justify-content: center;
}
/* ===================================
ABOUT PAGE
=================================== */
.about-hero {
padding: 120px var(--space-lg) var(--space-3xl);
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
color: white;
text-align: center;
}
.about-hero-container {
max-width: 900px;
margin: 0 auto;
}
.about-hero-title {
font-size: var(--font-size-5xl);
margin-bottom: var(--space-md);
color: white;
}
.about-hero-subtitle {
font-size: var(--font-size-xl);
opacity: 0.95;
line-height: 1.7;
}
.our-story {
padding: var(--space-3xl) var(--space-lg);
}
.our-story-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--space-3xl);
align-items: center;
}
/* story-content / story-image — missing from original CSS */
.story-content {
min-width: 0; /* prevent grid blowout */
}
.story-image {
min-width: 0;
}
.story-title {
font-size: var(--font-size-4xl);
margin-bottom: var(--space-xl);
}
.story-text p {
font-size: var(--font-size-lg);
line-height: 1.8;
color: var(--color-text);
margin-bottom: var(--space-lg);
}
.story-mockup {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
padding: var(--space-3xl);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
text-align: center;
}
.mockup-quote {
font-family: var(--font-display);
font-size: var(--font-size-3xl);
font-weight: 700;
color: white;
line-height: 1.3;
}
.our-values {
padding: var(--space-3xl) var(--space-lg);
background: var(--color-surface-alt);
}
.our-values-container {
max-width: 1400px;
margin: 0 auto;
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
gap: var(--space-xl);
}
.value-card {
background: white;
padding: var(--space-xl);
border-radius: var(--radius-lg);
border: 2px solid var(--color-border-light);
}
.value-number {
font-family: var(--font-display);
font-size: var(--font-size-3xl);
font-weight: 700;
color: var(--color-accent);
opacity: 0.5;
margin-bottom: var(--space-sm);
}
.value-title {
font-size: var(--font-size-xl);
margin-bottom: var(--space-sm);
}
.value-description {
color: var(--color-text-light);
line-height: 1.7;
}
.impact-stats {
padding: var(--space-3xl) var(--space-lg);
}
.impact-container {
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.impact-title {
font-size: var(--font-size-4xl);
margin-bottom: var(--space-2xl);
}
.impact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-xl);
}
.impact-stat {
padding: var(--space-xl);
background: var(--color-surface-alt);
border-radius: var(--radius-lg);
}
.impact-number {
font-family: var(--font-display);
font-size: var(--font-size-4xl);
font-weight: 700;
color: var(--color-primary);
margin-bottom: var(--space-xs);
}
.impact-label {
font-size: var(--font-size-sm);
color: var(--color-text-light);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.about-faq {
padding: var(--space-3xl) var(--space-lg);
background: var(--color-surface-alt);
}
.about-faq-container {
max-width: 1200px;
margin: 0 auto;
}
.faq-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
gap: var(--space-xl);
}
.faq-item {
background: white;
padding: var(--space-xl);
border-radius: var(--radius-lg);
}
.faq-question {
font-size: var(--font-size-lg);
margin-bottom: var(--space-sm);
color: var(--color-text);
}
.faq-answer {
color: var(--color-text-light);
line-height: 1.7;
}
.about-contact {
padding: var(--space-3xl) var(--space-lg);
}
.about-contact-container {
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.contact-section-title {
font-size: var(--font-size-4xl);
margin-bottom: var(--space-md);
}
.contact-section-subtitle {
font-size: var(--font-size-lg);
color: var(--color-text-light);
margin-bottom: var(--space-2xl);
}
.contact-methods {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-xl);
}
.contact-method {
padding: var(--space-xl);
background: var(--color-surface-alt);
border-radius: var(--radius-lg);
}
.contact-icon {
color: var(--color-primary);
margin-bottom: var(--space-md);
}
.contact-method-title {
font-size: var(--font-size-xl);
margin-bottom: var(--space-xs);
}
.contact-method-detail {
font-size: var(--font-size-base);
margin-bottom: var(--space-xs);
}
.contact-method-detail a {
color: var(--color-primary);
font-weight: 600;
}
.contact-method-note {
font-size: var(--font-size-sm);
color: var(--color-text-light);
}
.about-newsletter {
padding: var(--space-3xl) var(--space-lg);
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
color: white;
text-align: center;
}
.about-newsletter-container {
max-width: 700px;
margin: 0 auto;
}
.newsletter-title {
font-size: var(--font-size-4xl);
margin-bottom: var(--space-md);
color: white;
}
.newsletter-description {
font-size: var(--font-size-lg);
opacity: 0.95;
margin-bottom: var(--space-xl);
line-height: 1.7;
}
.newsletter-form {
display: flex;
gap: var(--space-sm);
margin-bottom: var(--space-md);
}
.newsletter-form input {
flex: 1;
padding: 16px 20px;
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.1);
color: white;
font-size: var(--font-size-base);
font-family: inherit;
}
.newsletter-form input::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.newsletter-form input:focus {
outline: none;
border-color: var(--color-accent);
background: rgba(255, 255, 255, 0.15);
}
.newsletter-note {
font-size: var(--font-size-sm);
opacity: 0.8;
}
/* ===================================
BLOG PAGE
=================================== */
.blog-hero {
padding: calc(80px + var(--space-3xl)) 0 var(--space-3xl);
background: var(--color-surface-alt);
text-align: center;
}
.blog-hero-container {
max-width: 700px;
margin: 0 auto;
padding: 0 var(--space-lg);
}
.blog-hero-title {
font-family: var(--font-display);
font-size: var(--font-size-4xl);
color: var(--color-text);
margin-bottom: var(--space-md);
line-height: 1.2;
}
.blog-hero-subtitle {
font-size: var(--font-size-lg);
color: var(--color-text-light);
line-height: 1.7;
}
/* Featured Article */
.blog-featured {
padding: var(--space-3xl) 0;
}
.blog-featured-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-lg);
}
.featured-badge {
display: inline-block;
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-accent);
margin-bottom: var(--space-md);
}
.featured-article {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
align-items: stretch;
text-decoration: none;
color: inherit;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
overflow: hidden;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.featured-article:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.featured-image {
min-height: 360px;
background: linear-gradient(135deg, var(--color-surface-alt) 0%, #ede8e1 100%);
display: flex;
align-items: center;
justify-content: center;
}
.featured-mockup {
text-align: center;
padding: var(--space-lg);
}
.featured-mockup .mockup-title {
font-family: var(--font-display);
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--color-primary);
margin-bottom: var(--space-xs);
line-height: 1.3;
}
.featured-mockup .mockup-subtitle {
font-size: var(--font-size-base);
color: var(--color-text-light);
}
.featured-content {
padding: var(--space-2xl);
display: flex;
flex-direction: column;
justify-content: center;
}
.featured-title {
font-family: var(--font-display);
font-size: var(--font-size-3xl);
color: var(--color-text);
margin-bottom: var(--space-md);
line-height: 1.3;
}
.featured-excerpt {
font-size: var(--font-size-lg);
color: var(--color-text-light);
line-height: 1.7;
margin-bottom: var(--space-lg);
}
.featured-cta {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-weight: 600;
color: var(--color-primary);
font-size: var(--font-size-base);
}
/* Article Meta */
.article-meta {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-sm);
flex-wrap: wrap;
}
.article-category {
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-accent-dark);
background: rgba(212, 165, 116, 0.12);
padding: 4px 10px;
border-radius: var(--radius-full);
}
.article-date,
.article-reading-time,
.reading-time {
font-size: var(--font-size-xs);
color: var(--color-text-lighter);
}
/* Article Grid */
.blog-articles {
padding: var(--space-3xl) 0;
background: var(--color-surface-alt);
}
.blog-articles-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-lg);
}
.articles-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
}
.article-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.article-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.article-link {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
height: 100%;
}
.article-image {
height: 180px;
background: linear-gradient(135deg, var(--color-surface-alt) 0%, #ede8e1 100%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.article-mockup {
text-align: center;
}
.mockup-icon {
font-size: 2.5rem;
}
.article-content {
padding: var(--space-md);
display: flex;
flex-direction: column;
flex: 1;
}
.article-title {
font-family: var(--font-display);
font-size: var(--font-size-xl);
color: var(--color-text);
margin-bottom: var(--space-xs);
line-height: 1.4;
}
.article-excerpt {
font-size: var(--font-size-sm);
color: var(--color-text-light);
line-height: 1.6;
margin-bottom: var(--space-sm);
flex: 1;
}
.article-footer {
padding-top: var(--space-sm);
border-top: 1px solid var(--color-border-light);
margin-top: auto;
}
/* Blog Newsletter */
.blog-newsletter {
padding: var(--space-3xl) 0;
background: var(--color-primary);
text-align: center;
}
.blog-newsletter-container {
max-width: 600px;
margin: 0 auto;
padding: 0 var(--space-lg);
}
.newsletter-title {
font-family: var(--font-display);
font-size: var(--font-size-3xl);
color: white;
margin-bottom: var(--space-sm);
}
.newsletter-description {
color: rgba(255, 255, 255, 0.85);
line-height: 1.7;
margin-bottom: var(--space-lg);
}
.newsletter-disclaimer {
font-size: var(--font-size-sm);
color: rgba(255, 255, 255, 0.6);
margin-top: var(--space-sm);
}
.newsletter-disclaimer a {
color: rgba(255, 255, 255, 0.8);
text-decoration: underline;
}
/* ===================================
BLOG POST / ARTICLE PAGE
=================================== */
.blog-post {
padding-top: 80px;
}
/* Post Header */
.post-header {
background: var(--color-surface-alt);
padding: var(--space-3xl) 0 var(--space-2xl);
border-bottom: 1px solid var(--color-border);
}
.post-header-container {
max-width: 760px;
margin: 0 auto;
padding: 0 var(--space-lg);
}
.back-link {
display: inline-block;
font-size: var(--font-size-sm);
color: var(--color-text-light);
text-decoration: none;
margin-bottom: var(--space-lg);
transition: color 0.2s ease;
}
.back-link:hover {
color: var(--color-primary);
}
.post-meta {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-md);
flex-wrap: wrap;
}
.post-category {
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-accent-dark);
background: rgba(212, 165, 116, 0.12);
padding: 4px 10px;
border-radius: var(--radius-full);
}
.post-date,
.post-reading-time {
font-size: var(--font-size-sm);
color: var(--color-text-lighter);
}
.post-title {
font-family: var(--font-display);
font-size: var(--font-size-4xl);
color: var(--color-text);
line-height: 1.2;
margin-bottom: var(--space-md);
}
.post-subtitle {
font-size: var(--font-size-lg);
color: var(--color-text-light);
line-height: 1.7;
}
/* Post Body */
.post-content {
padding: var(--space-3xl) 0;
}
.post-content-container {
max-width: 760px;
margin: 0 auto;
padding: 0 var(--space-lg);
}
.post-content-container p {
font-size: var(--font-size-lg);
line-height: 1.8;
color: var(--color-text);
margin-bottom: var(--space-md);
}
.lead-paragraph {
font-size: var(--font-size-xl);
line-height: 1.7;
color: var(--color-text);
margin-bottom: var(--space-lg);
font-style: italic;
}
.post-content-container h2 {
font-family: var(--font-display);
font-size: var(--font-size-3xl);
color: var(--color-text);
margin-top: var(--space-2xl);
margin-bottom: var(--space-md);
line-height: 1.3;
}
.post-content-container h3 {
font-family: var(--font-display);
font-size: var(--font-size-2xl);
color: var(--color-text);
margin-top: var(--space-xl);
margin-bottom: var(--space-sm);
line-height: 1.3;
}
.post-content-container h4 {
font-size: var(--font-size-base);
font-weight: 700;
color: var(--color-text);
margin-bottom: var(--space-xs);
}
.content-list {
margin: var(--space-md) 0;
padding-left: var(--space-lg);
}
.content-list li {
font-size: var(--font-size-lg);
line-height: 1.7;
color: var(--color-text);
margin-bottom: var(--space-sm);
}
/* Callout boxes */
.callout {
background: rgba(90, 108, 87, 0.06);
border-left: 4px solid var(--color-success);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
padding: var(--space-md) var(--space-lg);
margin: var(--space-xl) 0;
}
.callout.warning {
background: rgba(212, 165, 116, 0.08);
border-left-color: var(--color-warning);
}
.callout h4 {
margin-bottom: var(--space-xs);
}
.callout p {
margin-bottom: 0 !important;
font-size: var(--font-size-base) !important;
}
/* Example / data boxes */
.example-box {
background: var(--color-surface-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-lg);
margin: var(--space-xl) 0;
}
.example-box h4 {
font-size: var(--font-size-base);
font-weight: 700;
color: var(--color-primary);
margin-bottom: var(--space-md);
padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--color-border);
}
.example-box p,
.example-box li {
font-size: var(--font-size-base) !important;
}
/* CTA box */
.cta-box {
background: linear-gradient(135deg, var(--color-primary) 0%, #3d5070 100%);
border-radius: var(--radius-xl);
padding: var(--space-2xl);
margin: var(--space-2xl) 0;
text-align: center;
color: white;
}
.cta-box h3 {
font-family: var(--font-display);
font-size: var(--font-size-2xl);
color: white;
margin-top: 0;
margin-bottom: var(--space-sm);
}
.cta-box p {
color: rgba(255, 255, 255, 0.85);
margin-bottom: var(--space-lg);
font-size: var(--font-size-base) !important;
}
.final-note {
color: var(--color-text-light) !important;
font-style: italic;
}
/* Post Footer */
.post-footer {
background: var(--color-surface-alt);
border-top: 1px solid var(--color-border);
padding: var(--space-3xl) 0;
}
.post-footer-container {
max-width: 760px;
margin: 0 auto;
padding: 0 var(--space-lg);
display: flex;
flex-direction: column;
gap: var(--space-2xl);
}
/* Author bio */
.post-author {
display: flex;
align-items: flex-start;
gap: var(--space-lg);
padding: var(--space-lg);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
}
.author-avatar-large {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--color-primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: var(--font-size-lg);
flex-shrink: 0;
}
.author-details h4 {
font-size: var(--font-size-base);
font-weight: 700;
color: var(--color-text);
margin-bottom: var(--space-xs);
}
.author-details p {
font-size: var(--font-size-sm);
color: var(--color-text-light);
line-height: 1.6;
margin: 0;
}
/* Share buttons */
.post-share h4 {
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-text);
margin-bottom: var(--space-sm);
}
.share-buttons {
display: flex;
gap: var(--space-sm);
flex-wrap: wrap;
}
.share-btn {
display: inline-block;
padding: 8px 16px;
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--color-text);
text-decoration: none;
transition: border-color 0.2s ease, color 0.2s ease;
}
.share-btn:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
/* Related posts */
.related-posts h3 {
font-family: var(--font-display);
font-size: var(--font-size-2xl);
color: var(--color-text);
margin-bottom: var(--space-lg);
}
.related-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
}
.related-article {
display: block;
padding: var(--space-md);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
text-decoration: none;
color: inherit;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.related-article:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.related-article h4 {
font-family: var(--font-display);
font-size: var(--font-size-lg);
color: var(--color-text);
line-height: 1.4;
margin-bottom: var(--space-xs);
}
.related-meta {
font-size: var(--font-size-xs);
color: var(--color-text-lighter);
}
/* ===================================
LEGAL PAGES (Terms, Privacy, Refund)
=================================== */
.legal-page {
padding-top: 80px; /* nav height offset */
}
.legal-container {
max-width: 760px;
margin: 0 auto;
padding: var(--space-3xl) var(--space-lg);
}
.legal-title {
font-family: var(--font-display);
font-size: var(--font-size-4xl);
color: var(--color-text);
margin-bottom: var(--space-xs);
line-height: 1.2;
}
.legal-updated {
font-size: var(--font-size-sm);
color: var(--color-text-lighter);
margin-bottom: var(--space-2xl);
padding-bottom: var(--space-lg);
border-bottom: 1px solid var(--color-border);
}
.legal-content h2 {
font-family: var(--font-display);
font-size: var(--font-size-2xl);
color: var(--color-text);
margin-top: var(--space-2xl);
margin-bottom: var(--space-sm);
line-height: 1.3;
}
.legal-content h3 {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--color-text);
margin-top: var(--space-lg);
margin-bottom: var(--space-xs);
}
.legal-content p {
font-size: var(--font-size-base);
line-height: 1.8;
color: var(--color-text-light);
margin-bottom: var(--space-md);
}
.legal-content ul,
.legal-content ol {
padding-left: var(--space-lg);
margin-bottom: var(--space-md);
}
.legal-content li {
font-size: var(--font-size-base);
line-height: 1.7;
color: var(--color-text-light);
margin-bottom: var(--space-xs);
}
.legal-content strong {
color: var(--color-text);
font-weight: 600;
}
.legal-content a {
color: var(--color-primary);
text-decoration: underline;
}
/* ===================================
RESPONSIVE DESIGN
=================================== */
@media (max-width: 1024px) {
:root {
--font-size-5xl: 2.75rem;
--font-size-4xl: 2rem;
--font-size-3xl: 1.75rem;
}
.hero-container,
.lead-magnet-container {
grid-template-columns: 1fr;
gap: var(--space-2xl);
}
.hero-visual {
order: 1; /* keep below text on tablet */
transform: scale(0.85);
transform-origin: top center;
}
.stats-container {
grid-template-columns: repeat(2, 1fr);
}
.footer-main {
grid-template-columns: 1fr;
}
.footer-links {
grid-template-columns: repeat(2, 1fr);
}
.featured-article {
grid-template-columns: 1fr;
}
.featured-image {
min-height: 240px;
}
.articles-grid {
grid-template-columns: repeat(2, 1fr);
}
.post-title {
font-size: var(--font-size-3xl);
}
}
@media (max-width: 768px) {
.nav-toggle {
display: flex;
}
.nav-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
flex-direction: column;
padding: var(--space-lg);
box-shadow: var(--shadow-lg);
display: none;
}
.nav-menu.active {
display: flex;
}
.hero {
padding-top: 100px;
}
.hero-title {
font-size: var(--font-size-4xl);
}
.products-grid,
.testimonials-grid {
grid-template-columns: 1fr;
}
.steps-grid {
grid-template-columns: 1fr;
}
.trust-container {
grid-template-columns: 1fr;
}
.stats-container {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
.floating-badge {
display: none;
}
/* Hide planner mockup on mobile — clean text-only hero like desktop */
.hero-visual {
display: none;
}
/* Hero takes full width when visual is hidden */
.hero-container {
grid-template-columns: 1fr;
}
/* Left-align on mobile — prevents text overflow on right edge */
.hero-content {
text-align: left;
}
.hero-trust {
justify-content: flex-start;
flex-wrap: wrap;
gap: var(--space-sm);
}
.hero-cta {
align-items: flex-start;
}
/* Badge wraps cleanly instead of bleeding off-screen */
.hero-badge {
white-space: normal;
display: inline-block;
max-width: 100%;
}
/* Subtitle and trust items don't overflow */
.hero-subtitle {
max-width: 100%;
}
/* Reduce hero side padding on mobile */
.hero {
padding-left: var(--space-md);
padding-right: var(--space-md);
}
.lead-form {
flex-direction: column;
}
.footer-main {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
.footer-bottom {
flex-direction: column;
text-align: center;
}
.modal-gallery {
grid-template-columns: 1fr;
}
.articles-grid {
grid-template-columns: 1fr;
}
.newsletter-form {
flex-direction: column;
}
.post-author {
flex-direction: column;
}
.related-grid {
grid-template-columns: 1fr;
}
.post-title {
font-size: var(--font-size-2xl);
}
/* ── Shop — featured spanning card collapses to 1 col ── */
.featured-span {
grid-column: span 1 !important;
}
/* ── About page — collapse story grid ── */
.our-story-container {
grid-template-columns: 1fr;
gap: var(--space-2xl);
}
.story-image {
order: -1; /* show image above text on mobile */
}
.story-mockup {
padding: var(--space-2xl) var(--space-xl);
}
.mockup-quote {
font-size: var(--font-size-2xl);
}
/* ── Shop page — filter buttons ── */
.filter-bar {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.filter-container {
flex-direction: column;
align-items: flex-start;
gap: var(--space-sm);
}
.filter-group {
width: 100%;
overflow-x: auto;
padding-bottom: var(--space-xs);
-webkit-overflow-scrolling: touch;
}
.filter-btn {
white-space: nowrap;
flex-shrink: 0;
padding: 8px 16px;
font-size: var(--font-size-xs);
}
.filter-sort {
width: 100%;
}
.filter-sort select {
width: 100%;
}
/* ── Product card footer — prevent button overflow ── */
.product-footer {
flex-direction: column;
align-items: flex-start;
gap: var(--space-md);
}
.product-footer .btn {
width: 100%;
justify-content: center;
}
/* ── Hero buttons — stack vertically ── */
.hero-cta {
flex-direction: column;
align-items: stretch;
}
.hero-cta .btn {
width: 100%;
justify-content: center;
text-align: center;
}
/* ── Bonus section on free page ── */
.bonus-container {
grid-template-columns: 1fr;
gap: var(--space-2xl);
}
}
@media (max-width: 480px) {
:root {
--font-size-5xl: 2rem;
--font-size-4xl: 1.75rem;
}
.hero-cta {
flex-direction: column;
}
.btn {
width: 100%;
justify-content: center;
}
/* Images: switch to landscape ratio on narrow screens */
.product-image,
.resource-visual {
aspect-ratio: 4 / 3;
}
/* Shop featured card — override inline grid-column: span 2 */
.product-card.featured[style*="grid-column"] {
grid-column: span 1 !important;
}
/* Notify button — full width on small phones */
.product-footer {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.product-footer .notify-btn,
.product-footer .btn-primary,
.product-footer .btn {
width: 100%;
text-align: center;
justify-content: center;
padding: 13px 16px;
font-size: 14px;
box-sizing: border-box;
}
/* Prevent any element from causing horizontal scroll */
.our-story-container,
.values-grid,
.faq-grid,
.impact-grid {
overflow: hidden;
}
/* Planner mockup: scale down on small screens */
.planner-mockup {
transform: scale(0.82);
transform-origin: top center;
}
/* Featured card: force vertical stack */
.product-card.featured {
flex-direction: column !important;
grid-column: span 1 !important;
}
.product-card.featured .product-image {
width: 100% !important;
border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}
/* Filter bar: scrollable on mobile */
.filter-group {
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 4px;
}
/* Nav padding tighter */
.nav-container {
padding: var(--space-sm) var(--space-md);
}
}
/* ===================================
BACK TO TOP BUTTON
=================================== */
.back-to-top {
position: fixed;
bottom: 28px;
right: 24px;
width: 44px;
height: 44px;
background: var(--color-primary);
color: white;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background 0.2s ease;
box-shadow: var(--shadow-lg);
z-index: 500;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover {
background: var(--color-primary-dark);
transform: translateY(-2px);
}
/* ===================================
SITE SEARCH
=================================== */
.search-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(6px);
z-index: 10000;
display: none;
align-items: flex-start;
justify-content: center;
padding: 80px var(--space-lg) var(--space-lg);
}
.search-overlay.active {
display: flex;
}
.search-box {
background: white;
border-radius: var(--radius-xl);
width: 100%;
max-width: 640px;
box-shadow: var(--shadow-xl);
overflow: hidden;
}
.search-input-wrap {
display: flex;
align-items: center;
padding: 14px 20px;
border-bottom: 1px solid var(--color-border-light);
gap: var(--space-sm);
}
.search-input-wrap svg {
flex-shrink: 0;
color: var(--color-text-lighter);
}
.search-input {
flex: 1;
border: none;
outline: none;
font-family: var(--font-body);
font-size: var(--font-size-lg);
color: var(--color-text);
background: transparent;
}
.search-input::placeholder {
color: var(--color-text-lighter);
}
.search-close-btn {
width: 28px;
height: 28px;
border: none;
background: var(--color-surface-alt);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-light);
flex-shrink: 0;
font-size: 16px;
}
.search-results {
max-height: 60vh;
overflow-y: auto;
padding: var(--space-sm) 0;
}
.search-result-item {
display: flex;
align-items: center;
gap: var(--space-md);
padding: 12px 20px;
text-decoration: none;
color: var(--color-text);
transition: background 0.15s;
cursor: pointer;
}
.search-result-item:hover {
background: var(--color-surface-alt);
}
.search-result-icon {
width: 36px;
height: 36px;
border-radius: var(--radius-md);
background: var(--color-surface-alt);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 16px;
}
.search-result-text {
flex: 1;
min-width: 0;
}
.search-result-title {
font-weight: 600;
font-size: var(--font-size-sm);
color: var(--color-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-result-desc {
font-size: var(--font-size-xs);
color: var(--color-text-lighter);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-result-tag {
font-size: var(--font-size-xs);
font-weight: 600;
color: var(--color-primary);
background: rgba(84,104,138,0.1);
padding: 2px 8px;
border-radius: var(--radius-full);
flex-shrink: 0;
}
.search-empty {
text-align: center;
padding: var(--space-xl);
color: var(--color-text-lighter);
font-size: var(--font-size-sm);
}
.search-hint {
padding: 12px 20px;
font-size: var(--font-size-xs);
color: var(--color-text-lighter);
border-top: 1px solid var(--color-border-light);
}
/* Search trigger button in nav */
.nav-search-btn {
width: 36px;
height: 36px;
border: none;
background: var(--color-surface-alt);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-text-light);
transition: all var(--transition-fast);
flex-shrink: 0;
}
.nav-search-btn:hover {
background: var(--color-border);
color: var(--color-primary);
}