/* ═══════════════════════════════════════════════════════════════════════════
front.css — Unified styles for landing.html, home.html, home-product.html
───────────────────────────────────────────────────────────────────────────
Architecture:
1. Design tokens (CSS variables) — single source of truth
2. Global reset / base — applies to ALL pages
3. Page-scoped sections — each component scoped to body[data-page="X"]
to prevent cross-page collisions on shared class names like
.profile, .tabs, .promo-*, .sc-* etc.
Required HTML setup:
← landing.html
← home.html
← home-product.html
Tailwind utilities load via CDN in each HTML file and coexist with this CSS.
═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
1. DESIGN TOKENS
Unified set: all variables used across the three pages, including legacy
aliases preserved for product page compatibility.
═══════════════════════════════════════════════════════════════════════════ */
:root {
/* ─── Brand ─── */
--purple-from: #7c6dfb;
--purple-to: #5b48e8;
--cta: #0f766e; /* deep teal — primary action */
--cta-hover: #115e59;
/* ─── Text ─── */
--text: #0f172a; /* slate-900 */
--text-2: #334155; /* slate-700 */
--muted: #475569; /* slate-600 — AA on white */
--muted-2: #64748b; /* slate-500 */
--muted-3: #94a3b8; /* slate-400 — decorative */
/* ─── Surfaces ─── */
--bg: #ffffff;
--surface-1: #f8fafc; /* inputs, subtle tints */
--surface-2: #f1f5f9; /* bg-tag, tab-bg */
--border: #e5e7eb;
--border-light: #f1f5f9;
/* ─── Legacy bg aliases (kept for compat with product page) ─── */
--tab-bg: var(--surface-2);
--bg-tag: var(--surface-2);
/* ─── Legacy text/accent aliases (product-page internal naming) ─── */
--accent: var(--purple-to);
--accent-hover: var(--purple-from);
--dark: var(--text);
--dark-hover: var(--text-2);
--text-main: var(--text);
--text-sec: var(--muted);
--text-meta: var(--muted-2);
/* ─── Semantic ─── */
--success: #059669;
--warning: #d97706;
--focus: #5b48e8;
/* ─── Radius scale ─── */
--r-xs: 6px;
--r-sm: 10px;
--r-md: 12px;
--r-lg: 18px;
--r-pill: 100px;
/* ─── Elevation ─── */
--shadow-sm: 0 1px 3px rgba(15,23,42,.05);
--shadow-md: 0 6px 16px -6px rgba(15,23,42,.12);
--shadow-lg: 0 10px 30px -10px rgba(15,23,42,.15);
--shadow-xl: 0 40px 80px -20px rgba(15,23,42,.25);
--shadow-brand: 0 10px 30px -10px rgba(91,72,232,.4);
/* Legacy shadow aliases */
--shadow-card: var(--shadow-sm);
--shadow-hover: var(--shadow-lg);
/* ─── Motion ─── */
--t-fast: 150ms;
--t-med: 200ms;
--t-slow: 280ms cubic-bezier(.4, 0, .2, 1);
}
/* ═══════════════════════════════════════════════════════════════════════════
2. GLOBAL RESET / BASE
Shared by all pages. Coexists with Tailwind's preflight (loaded via CDN).
═══════════════════════════════════════════════════════════════════════════ */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
}
html {
scroll-behavior: smooth;
}
html, body {
background: var(--bg);
max-width: 100%;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
color: var(--text);
line-height: 1.55;
overflow-x: clip; /* clip > hidden — keeps position:sticky working */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ─── Focus-visible (a11y) ─── */
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
border-radius: 6px;
}
/* ─── Screen-reader-only ─── */
.sr-only {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ═══════════════════════════════════════════════════════════════════════════
3a. LANDING PAGE — scoped to body[data-page="landing"]
═══════════════════════════════════════════════════════════════════════════ */
body[data-page="landing"] .container{max-width:1180px;margin:0 auto;padding:0 24px}
/* ═══════════════ NAV ═══════════════ */
body[data-page="landing"] .nav{
position:sticky;top:0;z-index:50;
background:rgba(255,255,255,.85);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border-bottom:1px solid var(--border);
}
body[data-page="landing"] .nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
body[data-page="landing"] .logo{
font-size:18px;font-weight:800;letter-spacing:-.02em;
color:var(--text);text-decoration:none;
display:inline-flex;align-items:center;gap:8px;
}
body[data-page="landing"] .logo-mark{
width:28px;height:28px;border-radius:8px;
background:linear-gradient(135deg,var(--purple-from),var(--purple-to));
display:inline-flex;align-items:center;justify-content:center;
color:white;font-size:14px;font-weight:800;
box-shadow:var(--shadow-brand);
}
body[data-page="landing"] .nav-links{display:flex;gap:28px;align-items:center}
body[data-page="landing"] .nav-links a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:500;transition:color var(--t-fast)}
body[data-page="landing"] .nav-links a:hover{color:var(--text)}
body[data-page="landing"] .nav-links a.nav-cta,
body[data-page="landing"] .nav-cta{
background:linear-gradient(135deg,var(--purple-from),var(--purple-to));
color:white;
padding:10px 18px;border-radius:var(--r-pill);
font-size:14px;font-weight:600;text-decoration:none;
transition:opacity var(--t-fast),transform var(--t-fast),box-shadow var(--t-med);
}
body[data-page="landing"] .nav-links a.nav-cta:hover,
body[data-page="landing"] .nav-cta:hover{opacity:.92;color:white;transform:translateY(-1px);box-shadow:var(--shadow-brand)}
/* ─── Mobile hamburger ─── */
body[data-page="landing"] .nav-toggle{
display:none;
width:44px;height:44px;
background:transparent;border:1px solid var(--border);
border-radius:var(--r-md);
align-items:center;justify-content:center;
cursor:pointer;font-family:inherit;
transition:border-color var(--t-fast),background var(--t-fast);
}
body[data-page="landing"] .nav-toggle:hover{border-color:var(--text);background:var(--surface-1)}
body[data-page="landing"] .nav-toggle svg{width:20px;height:20px;color:var(--text)}
/* ─── Mobile drawer ─── */
body[data-page="landing"] .nav-backdrop{
position:fixed;inset:0;
background:rgba(15,23,42,.5);
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
opacity:0;pointer-events:none;
transition:opacity var(--t-med);
z-index:99;
}
body[data-page="landing"] .nav-backdrop.open{opacity:1;pointer-events:auto}
body[data-page="landing"] .nav-drawer{
position:fixed;top:0;right:0;
width:min(320px,85vw);height:100vh;
background:white;
box-shadow:var(--shadow-xl);
transform:translateX(100%);
transition:transform var(--t-med) cubic-bezier(.4,0,.2,1);
z-index:100;
display:flex;flex-direction:column;
padding:20px;
}
body[data-page="landing"] .nav-drawer.open{transform:translateX(0)}
body[data-page="landing"] .nav-drawer-head{
display:flex;align-items:center;justify-content:flex-end;
margin-bottom:24px;
}
body[data-page="landing"] .nav-drawer-close{
width:44px;height:44px;
background:var(--surface-1);border:none;
border-radius:var(--r-md);
display:flex;align-items:center;justify-content:center;
cursor:pointer;color:var(--text);
transition:background var(--t-fast);
}
body[data-page="landing"] .nav-drawer-close:hover{background:var(--surface-2)}
body[data-page="landing"] .nav-drawer-links{
display:flex;flex-direction:column;gap:4px;
margin-bottom:24px;
}
body[data-page="landing"] .nav-drawer-links a{
display:block;
padding:14px 16px;
color:var(--text);text-decoration:none;
font-size:16px;font-weight:600;
border-radius:var(--r-md);
transition:background var(--t-fast);
}
body[data-page="landing"] .nav-drawer-links a:hover{background:var(--surface-1)}
body[data-page="landing"] .nav-drawer-cta{
display:flex;align-items:center;justify-content:center;gap:8px;
background:linear-gradient(135deg,var(--purple-from),var(--purple-to));
color:white;text-decoration:none;
padding:14px 20px;border-radius:var(--r-pill);
font-size:15px;font-weight:600;
transition:opacity var(--t-fast),transform var(--t-fast),box-shadow var(--t-med);
margin-top:auto;
}
body[data-page="landing"] .nav-drawer-cta:hover{opacity:.92;transform:translateY(-1px);box-shadow:var(--shadow-brand)}
body[data-page="landing"].menu-open{overflow:hidden}
/* ═══════════════ HERO ═══════════════ */
body[data-page="landing"] .hero{padding:80px 0 96px;position:relative;overflow:hidden}
body[data-page="landing"] .hero::before{
content:'';position:absolute;
top:-100px;right:-150px;width:600px;height:600px;
background:radial-gradient(circle,rgba(124,109,251,.18) 0%,transparent 60%);
z-index:-1;filter:blur(40px);
}
body[data-page="landing"] .hero::after{
content:'';position:absolute;
top:50%;left:-200px;width:500px;height:500px;
background:radial-gradient(circle,rgba(15,118,110,.10) 0%,transparent 60%);
z-index:-1;filter:blur(40px);
}
body[data-page="landing"] .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
body[data-page="landing"] .hero-content{text-align:left}
body[data-page="landing"] .hero-badge{
display:inline-flex;align-items:center;gap:8px;
background:#ede9fe;color:var(--purple-to);
font-size:12px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;
padding:6px 14px;border-radius:var(--r-pill);
margin-bottom:24px;
}
body[data-page="landing"] .hero-badge::before{
content:'';width:6px;height:6px;background:var(--purple-to);
border-radius:50%;animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}
body[data-page="landing"] .hero h1{
font-size:clamp(36px,4.8vw,58px);
font-weight:800;letter-spacing:-.035em;line-height:1.05;
margin-bottom:24px;color:var(--text);
}
body[data-page="landing"] .hero h1 .accent{
background:linear-gradient(135deg,var(--purple-from),var(--purple-to));
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
font-style:italic;
}
body[data-page="landing"] .hero p.lead{
font-size:18px;color:var(--text-2);
margin-bottom:32px;line-height:1.6;max-width:540px;
}
body[data-page="landing"] .hero-cta-group{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
body[data-page="landing"] .btn{
display:inline-flex;align-items:center;gap:8px;
padding:14px 24px;border-radius:var(--r-pill);
font-size:15px;font-weight:600;
text-decoration:none;cursor:pointer;border:none;
font-family:inherit;
transition:transform var(--t-fast),box-shadow var(--t-med);
}
body[data-page="landing"] .btn-primary{
background:linear-gradient(135deg,var(--purple-from),var(--purple-to));
color:white;
}
body[data-page="landing"] .btn-primary:hover{
opacity:.92;
transform:translateY(-1px);
box-shadow:var(--shadow-brand);
}
body[data-page="landing"] .btn-secondary{background:white;color:var(--text);border:1px solid var(--border)}
body[data-page="landing"] .btn-secondary:hover{transform:translateY(-1px);border-color:var(--text)}
body[data-page="landing"] .btn-arrow{width:16px;height:16px;transition:transform var(--t-fast)}
body[data-page="landing"] .btn:hover .btn-arrow{transform:translateX(2px)}
body[data-page="landing"] .hero-meta{font-size:13px;color:var(--muted);display:flex;gap:20px;flex-wrap:wrap}
body[data-page="landing"] .hero-meta span{display:inline-flex;align-items:center;gap:6px}
body[data-page="landing"] .hero-meta svg{color:var(--success)}
/* ═══ Phone mockup ═══ */
body[data-page="landing"] .phone-stage{display:flex;justify-content:center;align-items:center;position:relative}
body[data-page="landing"] .phone-stage::before{
content:'';position:absolute;
width:100%;height:90%;
background:linear-gradient(135deg,rgba(124,109,251,.10),rgba(15,118,110,.06));
border-radius:50%;filter:blur(60px);z-index:-1;
}
body[data-page="landing"] .phone{
width:320px;height:660px;background:#0f172a;
border-radius:48px;padding:12px;
box-shadow:0 0 0 2px #1e293b,var(--shadow-xl);
position:relative;transform:rotate(-2deg);
animation:phoneFloat 6s ease-in-out infinite;
}
@keyframes phoneFloat{
0%,100%{transform:rotate(-2deg) translateY(0)}
50%{transform:rotate(-2deg) translateY(-12px)}
}
body[data-page="landing"] .phone-notch{
position:absolute;top:12px;left:50%;
transform:translateX(-50%);
width:110px;height:28px;background:#0f172a;
border-radius:0 0 18px 18px;z-index:10;
}
body[data-page="landing"] .phone-notch::after{
content:'';position:absolute;
top:8px;right:16px;width:10px;height:10px;
background:#1e293b;border-radius:50%;
}
body[data-page="landing"] .phone-screen{
width:100%;height:100%;background:#fff;
border-radius:36px;overflow:hidden;position:relative;
}
body[data-page="landing"] .phone-status{
display:flex;justify-content:space-between;align-items:center;
padding:14px 28px 6px;font-size:13px;font-weight:600;
color:var(--text);
}
body[data-page="landing"] .phone-status .icons{display:flex;gap:4px;align-items:center;font-size:11px}
body[data-page="landing"] .phone-content{padding:8px 18px 0;height:calc(100% - 50px);overflow:hidden;position:relative}
body[data-page="landing"] .store-header{
display:flex;flex-direction:column;align-items:center;text-align:center;
padding:16px 0 20px;border-bottom:1px solid var(--border-light);
margin-bottom:16px;
}
body[data-page="landing"] .store-avatar{
width:64px;height:64px;border-radius:50%;
background:linear-gradient(135deg,var(--purple-from),var(--purple-to));
margin-bottom:10px;
display:flex;align-items:center;justify-content:center;
font-size:30px;border:2px solid #fff;
box-shadow:0 4px 12px rgba(91,72,232,.25);
}
body[data-page="landing"] .store-name{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--text);margin-bottom:2px}
body[data-page="landing"] .store-handle{font-size:11px;color:var(--muted-2);margin-bottom:8px}
body[data-page="landing"] .store-bio{font-size:11px;color:var(--text-2);line-height:1.45;max-width:230px}
body[data-page="landing"] .store-section-title{
font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;
color:var(--muted);margin-bottom:10px;
}
body[data-page="landing"] .product-list{display:flex;flex-direction:column;gap:10px}
body[data-page="landing"] .product-item{
display:flex;align-items:center;gap:10px;
padding:10px;background:#fff;
border:1px solid var(--border);border-radius:12px;
}
body[data-page="landing"] .product-thumb{
width:40px;height:40px;border-radius:10px;
background:linear-gradient(135deg,var(--purple-from),var(--purple-to));
display:flex;align-items:center;justify-content:center;
font-size:18px;flex-shrink:0;
}
body[data-page="landing"] .product-info{flex:1;min-width:0}
body[data-page="landing"] .product-title{
font-size:11px;font-weight:600;color:var(--text);
line-height:1.3;margin-bottom:2px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
body[data-page="landing"] .product-meta{font-size:9px;color:var(--muted-2);font-weight:500}
body[data-page="landing"] .product-price{
font-size:12px;font-weight:700;color:var(--cta);
flex-shrink:0;
}
body[data-page="landing"] .store-footer{
position:absolute;bottom:14px;left:0;right:0;
text-align:center;font-size:10px;
color:var(--muted-2);font-weight:500;
}
/* Floaters */
body[data-page="landing"] .floater{
position:absolute;display:flex;align-items:center;gap:10px;
background:white;padding:10px 14px;
border-radius:var(--r-pill);
box-shadow:var(--shadow-lg);
border:1px solid var(--border);
font-size:12px;font-weight:600;color:var(--text);
z-index:2;
}
body[data-page="landing"] .floater-icon{
width:32px;height:32px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:14px;font-weight:800;color:white;flex-shrink:0;
}
body[data-page="landing"] .floater-text{display:flex;flex-direction:column;line-height:1.2}
body[data-page="landing"] .floater-text .small{font-size:10px;color:var(--muted-2);font-weight:500;margin-top:2px}
body[data-page="landing"] .floater-1{top:14%;left:-10%;animation:floatA 5s ease-in-out infinite}
body[data-page="landing"] .floater-1 .floater-icon{background:linear-gradient(135deg,#10b981,var(--cta))}
body[data-page="landing"] .floater-2{bottom:18%;right:-12%;animation:floatB 6s ease-in-out infinite}
body[data-page="landing"] .floater-2 .floater-icon{background:linear-gradient(135deg,#f59e0b,#d97706)}
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
/* ═══════════════ TRUST STRIP ═══════════════ */
body[data-page="landing"] .trust-strip{
padding:32px 0;
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
background:var(--surface-1);
}
body[data-page="landing"] .trust-grid{
display:grid;grid-template-columns:repeat(4,1fr);
gap:24px;text-align:center;
}
body[data-page="landing"] .trust-stat{display:flex;flex-direction:column;gap:4px}
body[data-page="landing"] .trust-stat .num{
font-size:36px;font-weight:800;letter-spacing:-.025em;
background:linear-gradient(135deg,var(--purple-from),var(--purple-to));
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;line-height:1;
}
body[data-page="landing"] .trust-stat .label{font-size:13px;color:var(--muted);font-weight:500}
/* ═══════════════ SECTIONS ═══════════════ */
body[data-page="landing"] .section{padding:96px 0}
body[data-page="landing"] .section-subtle{background:var(--surface-1)}
body[data-page="landing"] .section-dark{background:var(--text);color:#f1f5f9}
body[data-page="landing"] .section-dark h2,body[data-page="landing"] .section-dark h3{color:white}
body[data-page="landing"] .section-dark .section-eyebrow{color:var(--muted-3)}
body[data-page="landing"] .section-dark .section-header p{color:#cbd5e1}
body[data-page="landing"] .section-header{
text-align:center;max-width:680px;margin:0 auto 56px;
}
body[data-page="landing"] .section-eyebrow{
display:inline-block;
font-size:12px;font-weight:700;letter-spacing:.18em;
text-transform:uppercase;color:var(--muted);
margin-bottom:14px;
}
body[data-page="landing"] .section-header h2{
font-size:clamp(28px,3.6vw,42px);
font-weight:800;letter-spacing:-.025em;line-height:1.15;
margin-bottom:14px;
}
body[data-page="landing"] .section-header h2 .accent{
background:linear-gradient(135deg,var(--purple-from),var(--purple-to));
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
font-style:italic;
}
body[data-page="landing"] .section-dark .section-header h2 .accent{
background:linear-gradient(135deg,#a78bfa,#7c6dfb);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
}
body[data-page="landing"] .section-header p{
font-size:16px;color:var(--muted);line-height:1.6;
}
/* ═══════════════ WHY GRID ═══════════════ */
body[data-page="landing"] .why-grid{
display:grid;grid-template-columns:repeat(3,1fr);
gap:20px;
}
body[data-page="landing"] .why-card{
background:#fff;
border:1px solid var(--border);
border-radius:var(--r-lg);
padding:28px;
display:flex;flex-direction:column;
transition:transform var(--t-med),box-shadow var(--t-med),border-color var(--t-med);
}
body[data-page="landing"] .why-card:hover{
transform:translateY(-2px);
box-shadow:var(--shadow-md);
border-color:#cbd5e1;
}
body[data-page="landing"] .why-icon{
width:48px;height:48px;border-radius:14px;
background:linear-gradient(135deg,var(--purple-from),var(--purple-to));
color:white;
display:flex;align-items:center;justify-content:center;
margin-bottom:18px;
box-shadow:var(--shadow-brand);
}
body[data-page="landing"] .why-card h3{
font-size:17px;font-weight:700;letter-spacing:-.01em;
margin-bottom:8px;color:var(--text);
}
body[data-page="landing"] .why-card p{
font-size:14px;color:var(--muted);line-height:1.6;
margin-bottom:14px;flex:1;
}
body[data-page="landing"] .why-highlight{
display:inline-flex;align-self:flex-start;
font-size:11px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;
color:var(--cta);background:#ccfbf1;
padding:5px 11px;border-radius:var(--r-pill);
}
/* ═══════════════ STEPS GRID (dark section) ═══════════════ */
body[data-page="landing"] .steps-grid{
display:grid;grid-template-columns:repeat(4,1fr);
gap:18px;
}
body[data-page="landing"] .step-card{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.10);
border-radius:var(--r-lg);
padding:26px;
transition:background var(--t-med),border-color var(--t-med),transform var(--t-med);
}
body[data-page="landing"] .step-card:hover{
background:rgba(255,255,255,.08);
border-color:rgba(167,139,250,.4);
transform:translateY(-2px);
}
body[data-page="landing"] .step-num{
display:inline-block;
font-size:11px;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;
color:#a78bfa;margin-bottom:14px;
}
body[data-page="landing"] .step-card h3{
font-size:18px;font-weight:700;letter-spacing:-.01em;
margin-bottom:8px;color:white;
}
body[data-page="landing"] .step-card p{
font-size:14px;color:#cbd5e1;line-height:1.6;
}
/* ═══════════════ PRODUCTS GRID ═══════════════ */
body[data-page="landing"] .products-grid{
display:grid;grid-template-columns:repeat(2,1fr);
gap:24px;
}
body[data-page="landing"] .product-card{
display:flex;align-items:stretch;gap:0;
background:#fff;
border:1px solid var(--border);
border-radius:var(--r-lg);
overflow:hidden;
transition:transform var(--t-med),box-shadow var(--t-med);
}
body[data-page="landing"] .product-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
body[data-page="landing"] .product-illustration{
width:140px;min-width:140px;
background:linear-gradient(135deg,var(--purple-from),var(--purple-to));
display:flex;align-items:center;justify-content:center;
font-size:48px;flex-shrink:0;position:relative;
}
body[data-page="landing"] .product-illustration::after{
content:'';position:absolute;inset:0;
background:
radial-gradient(circle at 20% 30%,rgba(255,255,255,.12),transparent 50%),
radial-gradient(circle at 80% 70%,rgba(255,255,255,.08),transparent 50%);
}
body[data-page="landing"] .product-content{padding:24px 26px;flex:1;display:flex;flex-direction:column}
body[data-page="landing"] .product-content h3{
font-size:18px;font-weight:700;letter-spacing:-.01em;
margin-bottom:8px;color:var(--text);
}
body[data-page="landing"] .product-content p{
font-size:14px;color:var(--muted);line-height:1.6;
margin-bottom:14px;flex:1;
}
body[data-page="landing"] .product-tag{
display:inline-flex;align-self:flex-start;
font-size:11px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;
color:var(--purple-to);background:#ede9fe;
padding:5px 11px;border-radius:var(--r-pill);
}
/* ═══════════════ CASES GRID ═══════════════ */
body[data-page="landing"] .cases-grid{
display:grid;grid-template-columns:repeat(2,1fr);
gap:20px;
}
body[data-page="landing"] .case-card{
background:#fff;
border:1px solid var(--border);
border-radius:var(--r-lg);
padding:28px;
transition:box-shadow var(--t-med),transform var(--t-med);
}
body[data-page="landing"] .case-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
body[data-page="landing"] .case-tag{
display:inline-flex;
font-size:11px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;
color:var(--cta);background:#ccfbf1;
padding:5px 11px;border-radius:var(--r-pill);
margin-bottom:14px;
}
body[data-page="landing"] .case-card h3{
font-size:18px;font-weight:700;letter-spacing:-.01em;
margin-bottom:10px;color:var(--text);
}
body[data-page="landing"] .case-quote{
font-size:14px;color:var(--text-2);
line-height:1.6;font-style:italic;
padding:14px 0;margin-bottom:14px;
border-top:1px dashed var(--border);
border-bottom:1px dashed var(--border);
}
body[data-page="landing"] .case-features{list-style:none;padding:0;margin:0}
body[data-page="landing"] .case-features li{
display:flex;align-items:flex-start;gap:8px;
font-size:13px;color:var(--text-2);
margin-bottom:8px;line-height:1.5;
}
body[data-page="landing"] .case-features li::before{
content:'';width:16px;height:16px;
background:#dcfce7;border-radius:50%;flex-shrink:0;margin-top:2px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:center;
}
/* ═══════════════ PRICING ═══════════════ */
body[data-page="landing"] .plans{
display:grid;grid-template-columns:repeat(2,1fr);
gap:20px;max-width:840px;margin:0 auto 32px;
}
body[data-page="landing"] .plan{
background:#fff;
border:1px solid var(--border);
border-radius:var(--r-lg);
padding:32px;position:relative;
display:flex;flex-direction:column;
}
body[data-page="landing"] .plan-popular{
border-color:var(--purple-to);
border-width:2px;
box-shadow:var(--shadow-brand);
}
body[data-page="landing"] .popular-badge{
position:absolute;top:-12px;left:50%;
transform:translateX(-50%);
background:linear-gradient(135deg,var(--purple-from),var(--purple-to));
color:white;
font-size:11px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;
padding:6px 14px;border-radius:var(--r-pill);
white-space:nowrap;
}
body[data-page="landing"] .plan-name{
font-size:13px;font-weight:700;letter-spacing:.18em;
text-transform:uppercase;color:var(--muted);
margin-bottom:14px;
}
body[data-page="landing"] .plan-price{display:flex;align-items:baseline;gap:6px;margin-bottom:6px}
body[data-page="landing"] .plan-price .amount{
font-size:42px;font-weight:800;letter-spacing:-.025em;color:var(--text);
}
body[data-page="landing"] .plan-price .period{font-size:14px;color:var(--muted);font-weight:500}
body[data-page="landing"] .plan-fee-note{font-size:12px;color:var(--muted-2);margin-bottom:14px}
body[data-page="landing"] .plan-trial{
display:inline-flex;align-items:center;gap:6px;
font-size:12px;font-weight:600;color:var(--success);
margin-bottom:14px;
}
body[data-page="landing"] .plan-recommend{
font-size:13px;color:var(--text-2);line-height:1.55;
margin-bottom:20px;
padding:12px 14px;background:var(--surface-1);
border-radius:var(--r-md);
}
body[data-page="landing"] .plan-cta{
display:block;width:100%;
padding:14px 20px;
background:white;color:var(--text);
border:1px solid var(--border);border-radius:var(--r-pill);
font-size:15px;font-weight:600;font-family:inherit;
cursor:pointer;
transition:transform var(--t-fast),box-shadow var(--t-med),border-color var(--t-med);
margin-bottom:24px;
}
body[data-page="landing"] .plan-cta:hover{transform:translateY(-1px);border-color:var(--text)}
body[data-page="landing"] .plan-cta-primary{
background:linear-gradient(135deg,var(--purple-from),var(--purple-to));
color:white;
border-color:transparent;
}
body[data-page="landing"] .plan-cta-primary:hover{
opacity:.92;
border-color:transparent;
box-shadow:var(--shadow-brand);
}
body[data-page="landing"] .plan-features{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
body[data-page="landing"] .plan-features li{
display:flex;align-items:flex-start;gap:10px;
font-size:14px;color:var(--text-2);line-height:1.5;
}
body[data-page="landing"] .plan-features li.sub{
padding-left:26px;font-size:12px;color:var(--muted-2);
margin-top:-4px;
}
body[data-page="landing"] .feat-check{
width:16px;height:16px;flex-shrink:0;margin-top:3px;
color:var(--success);
}
body[data-page="landing"] .compare-toggle-wrap{text-align:center;margin-bottom:20px}
body[data-page="landing"] .compare-toggle{
display:inline-flex;align-items:center;gap:8px;
background:white;border:1px solid var(--border);
padding:10px 20px;border-radius:var(--r-pill);
font-size:14px;font-weight:600;color:var(--text);
cursor:pointer;font-family:inherit;
transition:border-color var(--t-fast),transform var(--t-fast);
}
body[data-page="landing"] .compare-toggle:hover{border-color:var(--text);transform:translateY(-1px)}
body[data-page="landing"] .compare-icon{width:14px;height:14px;transition:transform var(--t-med)}
body[data-page="landing"] .compare-toggle[aria-expanded="true"] .compare-icon{transform:rotate(180deg)}
body[data-page="landing"] .compare-content{
max-height:0;overflow:hidden;
transition:max-height var(--t-med);
}
body[data-page="landing"] .compare-content.open{max-height:3000px}
body[data-page="landing"] .table-wrap{
background:white;border:1px solid var(--border);
border-radius:var(--r-lg);overflow:hidden;
margin-top:20px;
}
body[data-page="landing"] .ptable{width:100%;border-collapse:collapse;font-size:14px}
body[data-page="landing"] .ptable th,body[data-page="landing"] .ptable td{
padding:12px 18px;text-align:left;
border-bottom:1px solid var(--border-light);
}
body[data-page="landing"] .ptable th{
font-weight:700;font-size:13px;
color:var(--text);background:var(--surface-1);
}
body[data-page="landing"] .ptable td:nth-child(2),body[data-page="landing"] .ptable td:nth-child(3),
body[data-page="landing"] .ptable th:nth-child(2),body[data-page="landing"] .ptable th:nth-child(3){
text-align:center;width:140px;
}
body[data-page="landing"] .ptable .price-row td{font-weight:700;color:var(--text)}
body[data-page="landing"] .ptable .price-cell{font-size:18px;font-weight:800;color:var(--text)}
body[data-page="landing"] .ptable .price-cell .period{font-size:12px;font-weight:500;color:var(--muted)}
body[data-page="landing"] .ptable .highlight-row{background:#ccfbf1}
body[data-page="landing"] .ptable .highlight-row td{font-weight:700;color:var(--cta)}
body[data-page="landing"] .ptable .section-row td{
background:var(--surface-2);
font-size:11px;font-weight:700;letter-spacing:.18em;
text-transform:uppercase;color:var(--muted);
padding:10px 18px;
}
body[data-page="landing"] .ptable .subtype-row td{
font-size:12px;color:var(--muted-2);
padding:6px 18px 6px 32px;border-bottom:none;
}
body[data-page="landing"] .ptable .subtype-row.last td{padding-bottom:12px}
body[data-page="landing"] .value-yes{color:var(--success);font-weight:700;font-size:16px}
body[data-page="landing"] .value-no{color:var(--muted-3);font-weight:500}
body[data-page="landing"] .value-text{color:var(--text);font-weight:600;font-size:13px}
body[data-page="landing"] .value-text.unlimited{color:var(--purple-to)}
body[data-page="landing"] .feature-name{display:inline-flex;align-items:center;gap:6px}
body[data-page="landing"] .help{
display:inline-flex;align-items:center;justify-content:center;
width:16px;height:16px;border-radius:50%;
background:var(--surface-2);color:var(--muted);
font-size:11px;font-weight:700;cursor:help;
position:relative;
}
body[data-page="landing"] .help:hover{color:var(--text)}
body[data-page="landing"] .help::after{
content:attr(data-tooltip);
position:absolute;bottom:calc(100% + 8px);left:50%;
transform:translateX(-50%);
background:var(--text);color:white;
font-size:12px;font-weight:500;letter-spacing:0;
text-transform:none;padding:8px 12px;
border-radius:var(--r-sm);
white-space:normal;width:240px;
opacity:0;pointer-events:none;
transition:opacity var(--t-fast);
z-index:10;line-height:1.5;
}
body[data-page="landing"] .help:hover::after{opacity:1}
body[data-page="landing"] .footnote{
font-size:13px;color:var(--muted);
text-align:center;max-width:680px;margin:20px auto 0;
line-height:1.6;
}
/* ═══════════════ FAQ ═══════════════ */
body[data-page="landing"] .faq-list{
max-width:760px;margin:0 auto;
display:flex;flex-direction:column;gap:10px;
}
body[data-page="landing"] .faq-item{
background:white;border:1px solid var(--border);
border-radius:var(--r-md);overflow:hidden;
transition:border-color var(--t-fast);
}
body[data-page="landing"] .faq-item[open]{border-color:#cbd5e1}
body[data-page="landing"] .faq-item summary{
display:flex;align-items:center;justify-content:space-between;
gap:16px;padding:16px 20px;
font-size:15px;font-weight:600;color:var(--text);
cursor:pointer;list-style:none;user-select:none;
}
body[data-page="landing"] .faq-item summary::-webkit-details-marker{display:none}
body[data-page="landing"] .faq-icon{
width:18px;height:18px;flex-shrink:0;
color:var(--muted);transition:transform var(--t-med);
}
body[data-page="landing"] .faq-item[open] .faq-icon{transform:rotate(45deg);color:var(--cta)}
body[data-page="landing"] .faq-answer{
padding:0 20px 18px;
font-size:14px;color:var(--text-2);line-height:1.7;
}
/* ═══════════════ FINAL CTA ═══════════════ */
body[data-page="landing"] .final-cta{
padding:96px 0;text-align:center;
background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 100%);
color:white;position:relative;overflow:hidden;
}
body[data-page="landing"] .final-cta::before{
content:'';position:absolute;
top:-50%;left:-20%;width:140%;height:200%;
background:radial-gradient(ellipse at center,rgba(124,109,251,.15) 0%,transparent 50%);
pointer-events:none;
}
body[data-page="landing"] .final-cta .container{position:relative;z-index:1}
body[data-page="landing"] .final-cta h2{
font-size:clamp(32px,4vw,48px);
font-weight:800;letter-spacing:-.025em;line-height:1.15;
margin-bottom:14px;color:white;
}
body[data-page="landing"] .final-cta h2 .accent{
background:linear-gradient(135deg,#a78bfa,var(--purple-from));
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
font-style:italic;
}
body[data-page="landing"] .final-cta p{
font-size:17px;color:#cbd5e1;
margin-bottom:32px;max-width:540px;margin-left:auto;margin-right:auto;
}
body[data-page="landing"] .final-cta .btn-primary{
background:white;color:var(--text);
font-size:16px;padding:16px 28px;
}
body[data-page="landing"] .final-cta .btn-primary:hover{background:#f1f5f9;box-shadow:0 10px 30px -10px rgba(255,255,255,.4)}
body[data-page="landing"] .final-cta-meta{
display:flex;justify-content:center;gap:24px;
flex-wrap:wrap;margin-top:24px;
font-size:13px;color:#cbd5e1;
}
body[data-page="landing"] .final-cta-meta span{display:inline-flex;align-items:center;gap:6px}
body[data-page="landing"] .final-cta-meta svg{color:#a78bfa}
/* ═══════════════ SAVINGS / SIMPLER SOLUTION ═══════════════ */
body[data-page="landing"] .savings-card{
max-width:680px;
margin:0 auto;
background:white;
border-radius:var(--r-lg);
padding:36px 40px;
box-shadow:0 20px 50px -20px rgba(15,23,42,.12), 0 8px 16px -8px rgba(15,23,42,.06);
border:1px solid var(--border);
}
body[data-page="landing"] .savings-row{
display:flex;align-items:center;gap:20px;
padding:18px 0;
border-bottom:1px solid var(--border);
}
body[data-page="landing"] .savings-row:last-of-type{border-bottom:none}
body[data-page="landing"] .savings-row-icon{
width:38px;height:38px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
font-size:22px;
}
body[data-page="landing"] .savings-row-content{flex:1;min-width:0}
body[data-page="landing"] .savings-row-title{
font-size:16px;font-weight:700;
color:var(--text);
margin:0 0 4px;
}
body[data-page="landing"] .savings-row-replaces{
font-size:13px;color:var(--muted-2);
}
body[data-page="landing"] .savings-row-replaces span{color:var(--muted);font-weight:500}
body[data-page="landing"] .savings-row-price{
font-size:18px;font-weight:700;
color:var(--text);
flex-shrink:0;
}
body[data-page="landing"] .savings-row-total{
display:flex;align-items:center;gap:20px;
padding:18px 0;
}
body[data-page="landing"] .savings-row-total .savings-row-icon{color:#dc2626}
body[data-page="landing"] .savings-row-total .savings-row-title{
color:var(--muted-2);
font-weight:600;
text-decoration:line-through;
text-decoration-color:rgba(220,38,38,.4);
}
body[data-page="landing"] .savings-row-total .savings-row-price{
color:#dc2626;
text-decoration:line-through;
text-decoration-color:rgba(220,38,38,.5);
}
body[data-page="landing"] .savings-row-final{
display:flex;align-items:center;gap:20px;
padding:18px 0 8px;
margin-top:8px;
border-top:2px solid var(--border);
}
body[data-page="landing"] .savings-row-final .savings-row-icon{
background:linear-gradient(135deg,var(--purple-from),var(--purple-to));
color:white;
border-radius:50%;
font-size:18px;font-weight:700;
}
body[data-page="landing"] .savings-row-final .savings-row-title{
font-size:18px;font-weight:800;
color:var(--text);
}
body[data-page="landing"] .savings-row-final .savings-row-price{
font-size:24px;font-weight:800;
background:linear-gradient(135deg,var(--purple-from),var(--purple-to));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
body[data-page="landing"] .savings-row-final .savings-row-price small{
font-size:14px;font-weight:600;
-webkit-text-fill-color:var(--muted);
color:var(--muted);
}
body[data-page="landing"] .savings-cta-wrap{
display:flex;justify-content:center;
margin-top:40px;
}
@media (max-width:600px){
body[data-page="landing"] .savings-card{padding:24px 20px;border-radius:18px}
body[data-page="landing"] .savings-row,body[data-page="landing"] .savings-row-total,body[data-page="landing"] .savings-row-final{gap:14px;padding:14px 0}
body[data-page="landing"] .savings-row-icon{width:32px;height:32px;font-size:18px}
body[data-page="landing"] .savings-row-title{font-size:14px}
body[data-page="landing"] .savings-row-replaces{font-size:12px}
body[data-page="landing"] .savings-row-price{font-size:15px}
body[data-page="landing"] .savings-row-final .savings-row-title{font-size:15px}
body[data-page="landing"] .savings-row-final .savings-row-price{font-size:20px}
body[data-page="landing"] .savings-row-final .savings-row-price small{font-size:12px}
}
/* ═══════════════ FOOTER ═══════════════ */
body[data-page="landing"] .footer{
padding:40px 0;
border-top:1px solid var(--border);
background:white;
}
body[data-page="landing"] .footer-inner{
display:flex;align-items:center;justify-content:space-between;
flex-wrap:wrap;gap:20px;
}
body[data-page="landing"] .footer-text{font-size:13px;color:var(--muted-2)}
body[data-page="landing"] .footer-links{display:flex;gap:24px}
body[data-page="landing"] .footer-links a{
color:var(--muted);text-decoration:none;font-size:14px;font-weight:500;
transition:color var(--t-fast);
}
body[data-page="landing"] .footer-links a:hover{color:var(--text)}
/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width:900px){
body[data-page="landing"] .container{padding:0 20px}
body[data-page="landing"] .hero{padding:48px 0 64px}
body[data-page="landing"] .hero-grid{grid-template-columns:1fr;gap:48px;text-align:center}
body[data-page="landing"] .hero-content{text-align:center}
body[data-page="landing"] .hero p.lead{margin-left:auto;margin-right:auto}
body[data-page="landing"] .hero-cta-group{justify-content:center}
body[data-page="landing"] .hero-meta{justify-content:center}
body[data-page="landing"] .phone{transform:rotate(0);width:280px;height:580px}
@keyframes phoneFloat{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(0) translateY(-8px)}}
body[data-page="landing"] .floater-1{left:-5%;top:8%}
body[data-page="landing"] .floater-2{right:-5%;bottom:12%}
body[data-page="landing"] .nav-links{display:none}
body[data-page="landing"] .nav-toggle{display:inline-flex}
body[data-page="landing"] .section{padding:64px 0}
body[data-page="landing"] .section-header{margin-bottom:40px}
body[data-page="landing"] .trust-grid{grid-template-columns:repeat(2,1fr);gap:20px}
body[data-page="landing"] .trust-stat .num{font-size:28px}
body[data-page="landing"] .why-grid{grid-template-columns:1fr;gap:14px}
body[data-page="landing"] .steps-grid{grid-template-columns:1fr;gap:14px}
body[data-page="landing"] .products-grid{grid-template-columns:1fr;gap:14px}
body[data-page="landing"] .product-card{flex-direction:column}
body[data-page="landing"] .product-illustration{width:100%;min-width:0;height:120px}
body[data-page="landing"] .cases-grid{grid-template-columns:1fr;gap:14px}
body[data-page="landing"] .plans{grid-template-columns:1fr;gap:24px}
body[data-page="landing"] .footer-inner{flex-direction:column;text-align:center}
}
@media (max-width:600px){
body[data-page="landing"] .hero h1{font-size:36px}
body[data-page="landing"] .ptable{font-size:13px}
body[data-page="landing"] .ptable th,body[data-page="landing"] .ptable td{padding:10px 12px}
body[data-page="landing"] .ptable td:nth-child(2),body[data-page="landing"] .ptable td:nth-child(3),
body[data-page="landing"] .ptable th:nth-child(2),body[data-page="landing"] .ptable th:nth-child(3){width:auto}
}
/* ═══════════════════════════════════════════════════════════════════════════
3b. HOME (CREATOR STOREFRONT) — scoped to body[data-page="home"]
═══════════════════════════════════════════════════════════════════════════ */
/* ══════════════ LAYOUT ══════════════ */
body[data-page="home"] .shell{
max-width: 1400px;
margin: 0 auto;
padding: 0 40px 0 calc(40px + 380px + 40px); /* reserve space for fixed profile */
min-height: 100vh;
position: relative;
}
/* ══════════════ LEFT — PROFILE (fixed, hides near footer via JS) ══════════════ */
body[data-page="home"] .profile{
position: fixed;
top: 0;
left: max(40px, calc((100vw - 1400px) / 2 + 40px));
width: 380px;
height: 100vh;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: 40px 20px;
text-align: center;
transition: opacity .2s ease, visibility .2s ease;
z-index: 1;
}
body[data-page="home"] .profile.hidden{
opacity: 0;
visibility: hidden;
pointer-events: none;
}
body[data-page="home"] .avatar{
width: 100px; height: 100px; border-radius: 50%;
background: linear-gradient(135deg, var(--purple-from), var(--purple-to));
display: flex; align-items: center; justify-content: center;
color: white; font-size: 46px; font-weight: 700;
margin-bottom: 22px;
overflow: hidden;
}
body[data-page="home"] .avatar img{ width: 100%; height: 100%; object-fit: cover; }
body[data-page="home"] .role-tag{
font-size: 12px; font-weight: 700; letter-spacing: .14em;
color: var(--purple-to); text-transform: uppercase; /* ↑ contrast & hierarchy — brand color */
margin-bottom: 10px;
}
body[data-page="home"] .name{
font-size: 26px; font-weight: 800; letter-spacing: -.02em;
margin-bottom: 6px;
}
body[data-page="home"] .handle{
font-size: 14px; color: var(--muted); /* ↑ contrast: was var(--muted-2) */
margin-bottom: 22px;
}
body[data-page="home"] .bio{
font-size: 15px; color: #334155;
max-width: 280px; line-height: 1.55;
margin-bottom: 26px;
}
body[data-page="home"] .profile-divider{
width: 100%; max-width: 280px;
height: 1px; background: var(--border);
margin-bottom: 20px;
}
body[data-page="home"] .socials{
display: flex; gap: 6px; margin-bottom: 32px;
}
body[data-page="home"] .social{
width: 44px; height: 44px; border-radius: 50%; /* ↑ 44px Apple HIG */
background: #f1f5f9; color: var(--muted);
display: inline-flex; align-items: center; justify-content: center;
text-decoration: none;
transition: background .15s, color .15s;
}
body[data-page="home"] .social:hover{ background: #e2e8f0; color: var(--text); }
body[data-page="home"] .social svg{ width: 18px; height: 18px; }
/* ─── Page footer: full viewport width ─── */
body[data-page="home"] .page-footer{
width: 100%;
padding: 48px 20px 32px;
margin-top: 60px;
background: #ffffff;
border-top: 1px solid var(--border);
text-align: center;
position: relative;
z-index: 2; /* above fixed profile when they overlap */
}
body[data-page="home"] .promo-block{
max-width: 480px;
margin: 0 auto 28px;
}
body[data-page="home"] .promo-icon{
width: 56px; height: 56px;
border-radius: 16px;
background: linear-gradient(135deg, var(--purple-from), var(--purple-to));
color: white;
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 18px;
box-shadow: 0 10px 30px -10px rgba(91,72,232,.4);
}
body[data-page="home"] .promo-icon svg{ width: 28px; height: 28px; }
body[data-page="home"] .promo-title{
font-size: 24px;
font-weight: 800;
letter-spacing: -.02em;
margin-bottom: 10px;
color: var(--text);
}
body[data-page="home"] .promo-sub{
font-size: 14px;
color: var(--muted);
line-height: 1.6;
margin-bottom: 22px;
max-width: 420px;
margin-left: auto; margin-right: auto;
}
body[data-page="home"] .promo-btn{
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
background: var(--text);
color: white;
text-decoration: none;
font-weight: 600;
font-size: 15px;
border-radius: 100px;
transition: transform .15s, box-shadow .2s;
margin-bottom: 14px;
}
body[data-page="home"] .promo-btn:hover{
transform: translateY(-1px);
box-shadow: 0 10px 30px -10px rgba(15,23,42,.4);
}
body[data-page="home"] .footer-mini{
padding-top: 24px;
border-top: 1px solid var(--border);
font-size: 13px;
color: var(--muted-2);
}
body[data-page="home"] .footer-mini p{
margin: 0;
}
body[data-page="home"] .footer-mini a{
color: var(--muted);
text-decoration: none;
font-weight: 500;
}
body[data-page="home"] .footer-mini a:hover{
color: var(--purple-to);
text-decoration: underline;
}
/* Hide promo on paid plans — creator can toggle via data-plan on body */
body[data-page="home"][data-plan="pro"] .promo-block,
body[data-page="home"][data-plan="starter"] .promo-block{
display: none;
}
/* ══════════════ RIGHT — CONTENT ══════════════ */
body[data-page="home"] .content{
padding: 28px 0 80px;
max-width: 960px;
min-width: 0;
}
/* ─── Floating menu button (mobile only) ─── */
body[data-page="home"] .floating-menu{ display: none; }
/* Tabs */
body[data-page="home"] .tabs{
display: inline-flex;
background: var(--tab-bg);
padding: 6px;
border-radius: 14px;
gap: 2px;
margin-bottom: 32px;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
body[data-page="home"] .tabs::-webkit-scrollbar{ display: none; }
body[data-page="home"] .tab{
padding: 10px 20px;
border-radius: 10px;
font-size: 15px; font-weight: 500;
color: var(--muted); cursor: pointer;
border: none; background: transparent;
transition: background .15s, color .15s;
white-space: nowrap;
}
body[data-page="home"] .tab[aria-selected="true"]{
background: white; color: var(--text);
box-shadow: 0 1px 3px rgba(0,0,0,.08);
font-weight: 600;
}
/* ─── Tab panels ─── */
body[data-page="home"] .tab-panel{ display: none; }
body[data-page="home"] .tab-panel.active{ display: block; }
/* Section divider + heading */
body[data-page="home"] .section-head{
display: flex;
align-items: center;
gap: 16px;
font-weight: 600;
margin: 60px 0 20px;
}
body[data-page="home"] .section-head:first-child{ margin-top: 0; }
body[data-page="home"] .section-head .line{
flex: 1; height: 1px; background: var(--border);
}
body[data-page="home"] .section-head .label{
font-size: 12px; font-weight: 700; letter-spacing: .18em;
color: var(--muted); text-transform: uppercase;
white-space: nowrap;
}
/* Product grid */
body[data-page="home"] .cards{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
/* ═══ Masonry layout (for mixed variants like Digital Product) ═══ */
/* Uses CSS columns — items flow top-to-bottom, then next column */
body[data-page="home"] .cards.mixed{
display: block; /* override grid */
column-count: 2;
column-gap: 30px;
}
body[data-page="home"] .cards.mixed .mix-item{
break-inside: avoid; /* never split an item between columns */
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
display: block;
margin-bottom: 30px;
width: 100%;
}
body[data-page="home"] .cards.mixed .mix-item > .card,
body[data-page="home"] .cards.mixed .mix-item > .btn-variant{
width: 100%;
}
/* ═══ Full-width stack (no grid, no masonry) ═══
Used for "Digital Product 2" — every card spans full width
of the content column. Callout and button variants only. */
body[data-page="home"] .cards.stack{
display: flex;
flex-direction: column;
gap: 20px;
column-count: initial;
grid-template-columns: none;
max-width: none;
}
body[data-page="home"] .cards.stack > .card,
body[data-page="home"] .cards.stack > .btn-variant,
body[data-page="home"] .cards.stack > .tm-card,
body[data-page="home"] .cards.stack > .gl-card,
body[data-page="home"] .cards.stack > .lb-card,
body[data-page="home"] .cards.stack > .tb-card,
body[data-page="home"] .cards.stack > .vb-card,
body[data-page="home"] .cards.stack > .about-card{
width: 100%;
max-width: none;
}
/* Callout in stack — larger photo for a premium banner-like look */
body[data-page="home"] .cards.stack > .card.callout .card-img{
width: 430px;
min-width: 430px;
}
body[data-page="home"] .cards.stack > .card.callout .card-img svg{ width: 72px; height: 72px; }
/* In full-width mode there's room for features & testimonial — bring them back */
body[data-page="home"] .cards.stack > .card.callout .features{ display: block; }
body[data-page="home"] .cards.stack > .card.callout .card-body{ padding: 24px 28px; }
body[data-page="home"] .cards.stack > .card.callout .card-title{ font-size: 20px; margin-bottom: 8px; }
body[data-page="home"] .cards.stack > .card.callout .card-desc{ font-size: 14px; margin-bottom: 14px; }
body[data-page="home"] .cards.stack > .card.callout .price{ font-size: 24px; }
/* ─── CARD: Callout variant (horizontal) ─── */
body[data-page="home"] .card.callout{
flex-direction: row;
align-items: stretch;
}
/* Reverse layout: text left, photo right — applied to every 2nd Callout (idx 1,3,5)
for zigzag visual rhythm across the section. */
body[data-page="home"] .card.callout.callout-reverse{
flex-direction: row-reverse;
}
body[data-page="home"] .card.callout .card-img{
width: 150px; min-width: 150px;
min-height: auto;
}
body[data-page="home"] .card.callout .card-img svg{ width: 44px; height: 44px; }
body[data-page="home"] .card.callout .card-body{ padding: 18px 20px; flex: 1; }
body[data-page="home"] .card.callout .card-title{ font-size: 16px; margin-bottom: 6px; }
body[data-page="home"] .card.callout .card-desc{ font-size: 13px; margin-bottom: 10px; }
body[data-page="home"] .card.callout .features{ display: none; } /* hide heavy list in compact mode */
body[data-page="home"] .card.callout .mini-testim{ display: none; }
body[data-page="home"] .card.callout .social-proof{
font-size: 13px;
margin-bottom: 10px;
padding-bottom: 10px;
}
body[data-page="home"] .card.callout .slots{ margin-bottom: 10px; }
body[data-page="home"] .card.callout .slot{ padding: 8px 12px; }
body[data-page="home"] .card.callout .slot .s-date{ font-size: 13px; }
body[data-page="home"] .card.callout .slot .s-time{ font-size: 13px; }
body[data-page="home"] .card.callout .price{ font-size: 20px; }
body[data-page="home"] .card.callout .trust-line{ display: none; }
/* ─── CARD: Button variant (compact card, same family as Callout/Preview) ─── */
body[data-page="home"] .btn-variant{
display: flex; align-items: stretch; gap: 0;
width: 100%; padding: 0;
background: white;
color: var(--text); border: 1px solid var(--border); border-radius: 18px;
cursor: pointer; font-family: inherit;
transition: transform .15s, box-shadow .2s;
text-align: left;
position: relative;
overflow: hidden;
}
body[data-page="home"] .btn-variant:hover{
/* hover-lift removed */
}
body[data-page="home"] .btn-variant .b-icon{
width: 100px; height: 100px;
min-width: 100px;
border-radius: 0;
background: linear-gradient(135deg, var(--purple-from), var(--purple-to));
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
color: white;
overflow: hidden;
position: relative;
}
body[data-page="home"] .btn-variant .b-icon svg{ width: 36px; height: 36px; opacity: .92; }
body[data-page="home"] .btn-variant .b-icon .card-photo{
width: 100%; height: 100%;
object-fit: cover;
border-radius: 0;
position: absolute;
inset: 0;
}
body[data-page="home"] .btn-variant .b-text{
flex: 1;
min-width: 0;
overflow: hidden;
padding: 22px 90px 16px 18px; /* top ↑ + right reserved for badge */
display: flex; flex-direction: column; justify-content: center;
}
/* When there's no badge, revert to normal padding */
body[data-page="home"] .btn-variant:not(:has(.b-badge)) .b-text{
padding: 16px 16px 16px 18px;
}
body[data-page="home"] .btn-variant .b-title{
font-size: 16px; font-weight: 700;
color: var(--text);
line-height: 1.3;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body[data-page="home"] .btn-variant .b-sub{
font-size: 13px; color: var(--muted); margin-top: 4px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
overflow-wrap: anywhere;
}
body[data-page="home"] .btn-variant .b-arrow{
font-size: 20px; color: var(--muted);
padding: 0 18px 0 8px;
display: flex; align-items: center;
flex-shrink: 0;
transition: transform .15s, color .15s;
}
body[data-page="home"] .btn-variant:hover .b-arrow{
transform: translateX(2px);
color: var(--cta);
}
body[data-page="home"] .btn-variant .b-badge{
position: absolute; top: 4px; right: 8px;
background: var(--cta); color: white;
font-size: 9px; font-weight: 700; letter-spacing: .05em;
padding: 3px 8px; border-radius: 100px;
text-transform: uppercase;
z-index: 2;
}
body[data-page="home"] .btn-variant .b-badge.free{
background: #ffffff;
color: var(--purple-to);
border: 1px solid var(--border);
}
/* ─── CARD ─── */
body[data-page="home"] .card{
background: white;
border: 1px solid var(--border);
border-radius: 18px;
overflow: hidden;
transition: box-shadow .2s, transform .2s;
display: flex; flex-direction: column;
}
body[data-page="home"] .card:hover{
/* hover-lift removed */
}
/* Banner replaces emoji — tasteful SVG icon on gradient */
body[data-page="home"] .card-img{
background: linear-gradient(135deg, var(--purple-from), var(--purple-to));
display: flex; align-items: center; justify-content: center;
position: relative;
min-height: 200px;
color: white;
}
body[data-page="home"] .card-img svg{ width: 64px; height: 64px; opacity: .92; }
/* Photo variant — replaces SVG icon, fills the entire banner/thumb/button-icon.
Gradient background stays as fallback while image loads (or if it fails). */
body[data-page="home"] .card-photo{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
position: absolute;
inset: 0;
z-index: 0;
}
/* Banner container needs a fixed aspect so position:absolute photos fill it */
body[data-page="home"] .card-img{ position: relative; }
body[data-page="home"] .card-img::after{
/* subtle pattern overlay for depth — no more emoji flatness */
content: '';
position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 30%, rgba(255,255,255,.08), transparent 50%),
radial-gradient(circle at 80% 70%, rgba(255,255,255,.06), transparent 50%);
pointer-events: none;
}
/* ── Preview card: fixed banner height 250px, always ── */
body[data-page="home"] .card.preview .card-img{
height: 250px;
min-height: 250px;
flex-shrink: 0;
}
body[data-page="home"] .card.preview .card-img svg{ width: 80px; height: 80px; }
body[data-page="home"] .badge{
position: absolute; top: 14px; left: 14px;
background: var(--cta); color: white;
font-size: 10px; font-weight: 700; letter-spacing: .06em;
padding: 5px 11px; border-radius: 100px;
text-transform: uppercase;
display: inline-flex; align-items: center; gap: 6px;
z-index: 1;
}
body[data-page="home"] .badge .live-dot{
width: 6px; height: 6px; border-radius: 50%;
background: white;
animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .5; transform: scale(.8); }
}
body[data-page="home"] .badge.free{ background: #7c3aed; }
body[data-page="home"] .badge.bestseller{ background: var(--warning); }
body[data-page="home"] .card-body{
padding: 22px 22px 22px;
display: flex; flex-direction: column;
flex: 1;
}
body[data-page="home"] .card-title{
font-size: 18px; font-weight: 700;
letter-spacing: -.01em; line-height: 1.3;
margin-bottom: 8px;
}
body[data-page="home"] .card-desc{
font-size: 13px; color: var(--muted);
line-height: 1.5; margin-bottom: 14px;
word-break: break-word;
overflow-wrap: anywhere;
}
/* Features list — what's inside */
body[data-page="home"] .features{
list-style: none;
margin-bottom: 14px;
padding: 0;
}
body[data-page="home"] .features li{
display: flex; align-items: flex-start; gap: 8px;
font-size: 13px; color: #334155;
margin-bottom: 6px;
line-height: 1.45;
}
body[data-page="home"] .features li::before{
content: '';
width: 16px; height: 16px;
background: #dcfce7;
border-radius: 50%;
flex-shrink: 0;
margin-top: 2px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
}
/* Social proof row — downloads, registered, rating */
body[data-page="home"] .social-proof{
display: flex; flex-wrap: wrap;
gap: 6px 16px;
font-size: 13px; color: var(--muted);
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px dashed var(--border);
}
body[data-page="home"] .social-proof .sp-item{
display: inline-flex; align-items: center; gap: 5px;
}
body[data-page="home"] .social-proof .sp-item strong{
color: var(--text); font-weight: 700;
}
body[data-page="home"] .social-proof .rating{
color: #f59e0b;
}
/* Mini testimonial inside card */
body[data-page="home"] .mini-testim{
background: #f8fafc;
border-left: 3px solid var(--purple-to);
padding: 10px 12px;
border-radius: 0 8px 8px 0;
margin-bottom: 14px;
font-size: 13px;
color: #334155;
font-style: italic;
line-height: 1.5;
}
body[data-page="home"] .mini-testim .t-author{
font-style: normal;
font-size: 13px;
color: var(--muted);
font-weight: 600;
margin-top: 4px;
display: block;
}
/* Urgency band — limited time / seats */
body[data-page="home"] .urgency{
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 600;
color: var(--cta);
background: #fef2f2;
padding: 5px 10px;
border-radius: 6px;
margin-bottom: 12px;
align-self: flex-start;
}
body[data-page="home"] .urgency-icon{ width: 12px; height: 12px; }
/* Price + CTA */
body[data-page="home"] .price-row{
display: flex; align-items: baseline; gap: 10px;
margin-top: auto; margin-bottom: 12px;
}
body[data-page="home"] .price{
font-size: 24px; font-weight: 800;
letter-spacing: -.01em;
}
body[data-page="home"] .price.free-price{ color: var(--text); }
body[data-page="home"] .price .old{
font-size: 15px; color: var(--muted);
text-decoration: line-through;
font-weight: 500; margin-left: 4px;
}
body[data-page="home"] .save-badge{
font-size: 13px; font-weight: 700;
color: var(--success);
background: #d1fae5;
padding: 3px 8px; border-radius: 100px;
}
body[data-page="home"] .btn-cta{
width: 100%;
padding: 14px 16px;
background: linear-gradient(135deg, var(--purple-from), var(--purple-to));
color: white;
border: none; border-radius: 10px;
font-size: 14px; font-weight: 600;
cursor: pointer;
transition: opacity .15s, transform .15s, box-shadow .2s;
display: flex; align-items: center; justify-content: center;
gap: 8px;
}
body[data-page="home"] .btn-cta:hover{
opacity: .92;
transform: translateY(-1px);
box-shadow: 0 8px 20px -8px rgba(91,72,232,.5);
}
body[data-page="home"] .btn-cta .price-inline{
font-weight: 800;
}
body[data-page="home"] .btn-cta .price-inline .old{
text-decoration: line-through;
opacity: .6; font-weight: 500;
margin-right: 4px;
}
/* Trust line under CTA */
body[data-page="home"] .trust-line{
display: flex; align-items: center; justify-content: center;
gap: 6px 14px; flex-wrap: wrap;
margin-top: 10px;
font-size: 13px;
color: var(--muted);
}
body[data-page="home"] .trust-line .t-item{
display: inline-flex; align-items: center; gap: 4px;
}
body[data-page="home"] .trust-line svg{ width: 12px; height: 12px; }
/* Webinar — upcoming sessions (informational, not selectable) */
body[data-page="home"] .slots-label{
font-size: 13px;
font-weight: 700;
letter-spacing: .12em;
color: var(--muted);
text-transform: uppercase;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
body[data-page="home"] .slots-label::after{
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
body[data-page="home"] .slots{
display: flex; flex-direction: column; gap: 2px;
margin-bottom: 16px;
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
}
body[data-page="home"] .slot{
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: white;
border-bottom: 1px solid var(--border);
}
body[data-page="home"] .slot:last-child{ border-bottom: none; }
body[data-page="home"] .slot-text{ flex: 1; min-width: 0; }
body[data-page="home"] .slot .s-date{
font-size: 13px; font-weight: 600;
color: var(--text);
line-height: 1.3;
}
body[data-page="home"] .slot .s-time{
font-size: 13px; color: var(--muted);
margin-top: 2px;
}
body[data-page="home"] .slot .s-status{
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10px;
font-weight: 700;
padding: 3px 8px;
border-radius: 100px;
letter-spacing: .02em;
white-space: nowrap;
flex-shrink: 0;
}
body[data-page="home"] .slot .s-status.low{
background: #fef2f2; color: #b91c1c;
}
body[data-page="home"] .slot .s-status.ok{
background: #f0f9ff; color: #0369a1;
}
body[data-page="home"] .slot .s-status.full{
background: #f1f5f9; color: var(--muted);
}
body[data-page="home"] .slot .s-status .s-dot{
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
}
body[data-page="home"] .slot .s-status.low .s-dot{
animation: pulse 1.8s ease-in-out infinite;
}
/* Email form */
body[data-page="home"] .form-body label{
display: block;
font-size: 13px; font-weight: 600;
color: var(--muted);
margin-bottom: 4px;
}
body[data-page="home"] .form-body .input{
width: 100%;
padding: 11px 14px;
border: 1px solid var(--border);
border-radius: 9px;
font-size: 14px;
margin-bottom: 12px;
font-family: inherit;
background: #f8fafc;
transition: all .15s;
}
body[data-page="home"] .form-body .input:focus{
outline: none;
border-color: var(--purple-to);
background: white;
box-shadow: 0 0 0 3px rgba(91,72,232,.1);
}
body[data-page="home"] .form-body .privacy-note{
font-size: 13px; color: var(--muted);
margin-top: 8px; text-align: center;
}
/* ─── Secondary CTA variant (for second email form) ─── */
body[data-page="home"] .btn-cta.secondary{
background: white;
color: var(--purple-to);
border: 1.5px solid var(--purple-to);
}
body[data-page="home"] .btn-cta.secondary:hover{
background: #faf9ff;
}
/* Coming-soon placeholder for empty tab panels */
body[data-page="home"] .coming-soon{
text-align: center;
padding: 80px 20px;
color: var(--muted);
}
body[data-page="home"] .coming-soon-icon{
width: 64px; height: 64px;
margin: 0 auto 20px;
background: #f1f5f9;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--muted);
}
body[data-page="home"] .coming-soon h2{
font-size: 20px; font-weight: 700;
color: var(--text);
margin-bottom: 8px;
}
body[data-page="home"] .coming-soon p{
font-size: 14px;
max-width: 360px;
margin: 0 auto;
}
/* Empty links list (stub content for Links tab) */
body[data-page="home"] .link-list{
display: flex; flex-direction: column; gap: 10px;
max-width: 500px;
margin: 0 auto; /* center the list horizontally */
}
body[data-page="home"] .link-item{
display: flex; align-items: center; gap: 14px;
padding: 14px 18px;
border: 1px solid var(--border);
border-radius: 12px;
text-decoration: none;
color: var(--text);
transition: all .15s;
font-weight: 500;
}
/* Single-item case — center the card itself too */
body[data-page="home"] .link-item:only-child{
justify-content: center;
text-align: center;
}
body[data-page="home"] .link-item:hover{
border-color: var(--purple-to);
background: #faf9ff;
transform: translateX(4px);
}
body[data-page="home"] .link-item:only-child:hover{
transform: translateY(-2px); /* no horizontal slide for centered item */
}
body[data-page="home"] .link-item svg{ width: 20px; height: 20px; flex-shrink: 0; }
/* About panel */
body[data-page="home"] .about-card{
background: white;
border: 1px solid var(--border);
border-radius: 18px;
padding: 32px;
width: 100%;
}
body[data-page="home"] .about-card h2{
font-size: 22px; font-weight: 700;
margin-bottom: 16px;
}
body[data-page="home"] .about-card p{
font-size: 15px; color: #334155;
line-height: 1.65; margin-bottom: 14px;
}
body[data-page="home"] .about-stats{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
padding: 20px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
margin: 20px 0;
}
body[data-page="home"] .about-stats .stat-num{
font-size: 22px; font-weight: 800;
color: var(--purple-to);
}
body[data-page="home"] .about-stats .stat-label{
font-size: 13px; color: var(--muted);
margin-top: 2px;
}
/* ══════════════════════════════════════════════════════════════════
═══ NEW BLOCK TYPES — Video / Testimonials / Gallery / Links / Text ═══
══════════════════════════════════════════════════════════════════ */
/* Shared container styles for all new block variants — aligned with .card */
body[data-page="home"] .nb-card{
background: white;
border: 1px solid var(--border);
border-radius: 18px;
overflow: hidden;
transition: box-shadow .2s, transform .2s;
}
body[data-page="home"] .nb-card:hover{
/* hover-lift removed */
}
body[data-page="home"] .nb-title{
font-size: 18px; font-weight: 700;
letter-spacing: -.01em; line-height: 1.3;
color: var(--text);
margin-bottom: 8px;
}
body[data-page="home"] .nb-sub{
font-size: 13px;
color: var(--muted);
line-height: 1.5;
word-break: break-word;
overflow-wrap: anywhere;
}
/* ─── VIDEO BLOCK ─── */
/* Global fallback — all play icons get a safe default size */
body[data-page="home"] .vb-btn-icon svg{ width: 22px; height: 22px; }
/* Photo fills thumb — gradient stays as fallback while loading / on error */
body[data-page="home"] .vb-photo{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 0;
display: block;
}
/* Play button floats on top of photo */
body[data-page="home"] .vb-callout .vb-thumb, body[data-page="home"] .vb-preview .vb-thumb{ position: relative; overflow: hidden; }
/* Button-variant photo — fills 100×100 icon, edge-to-edge (matches card style) */
body[data-page="home"] .vb-btn-photo{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 0;
}
body[data-page="home"] .vb-button .vb-btn-icon{ position: relative; overflow: hidden; }
/* Style 1 — Button (matches .btn-variant family: white card, 100×100 photo left, same hierarchy) */
body[data-page="home"] .vb-button{
display: flex;
align-items: stretch;
gap: 0;
width: 100%;
padding: 0;
background: white;
color: var(--text);
border: 1px solid var(--border);
border-radius: 18px;
cursor: pointer; font-family: inherit;
text-align: left;
overflow: hidden;
position: relative;
transition: transform .15s, box-shadow .2s;
}
body[data-page="home"] .vb-button:hover{
/* hover-lift removed */
}
body[data-page="home"] .vb-button .vb-btn-icon{
width: 100px; height: 100px;
min-width: 100px;
border-radius: 0;
background: linear-gradient(135deg, var(--purple-from), var(--purple-to));
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
color: white;
overflow: hidden;
position: relative;
}
body[data-page="home"] .vb-button .vb-btn-text{
flex: 1;
min-width: 0;
overflow: hidden;
padding: 16px 16px 16px 18px;
display: flex; flex-direction: column; justify-content: center;
}
body[data-page="home"] .vb-button .vb-btn-title{
display: block;
font-size: 16px; font-weight: 700;
color: var(--text);
line-height: 1.3;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body[data-page="home"] .vb-button .vb-btn-sub{
display: -webkit-box;
font-size: 13px; color: var(--muted); margin-top: 4px;
line-height: 1.4;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
overflow-wrap: anywhere;
}
body[data-page="home"] .vb-button .vb-btn-arrow{
font-size: 20px;
color: var(--muted);
padding: 0 18px 0 8px;
display: flex; align-items: center;
flex-shrink: 0;
transition: transform .15s, color .15s;
}
body[data-page="home"] .vb-button:hover .vb-btn-arrow{
transform: translateX(2px);
color: var(--cta);
}
/* Style 2 — Callout (matches DP Callout: 150px banner + body) */
body[data-page="home"] .vb-callout{
display: flex;
background: white;
border: 1px solid var(--border);
border-radius: 18px;
overflow: hidden;
transition: box-shadow .2s, transform .2s;
}
/* Reverse Video Callout — mirror the .card.callout zigzag behavior */
body[data-page="home"] .vb-callout.callout-reverse{
flex-direction: row-reverse;
}
body[data-page="home"] .vb-callout:hover{
/* hover-lift removed */
}
body[data-page="home"] .vb-callout .vb-thumb{
width: 150px; min-width: 150px;
background: linear-gradient(135deg, var(--purple-from), var(--purple-to));
position: relative;
display: flex; align-items: center; justify-content: center;
}
body[data-page="home"] .vb-callout .vb-thumb::after{
content: '';
position: absolute; inset: 0;
background: radial-gradient(circle at 30% 40%, rgba(255,255,255,.1), transparent 50%);
pointer-events: none;
}
body[data-page="home"] .vb-callout .vb-body{
flex: 1;
padding: 18px 20px;
display: flex; flex-direction: column;
justify-content: center;
gap: 10px;
}
body[data-page="home"] .vb-callout .nb-title{ font-size: 16px; margin-bottom: 6px; }
body[data-page="home"] .vb-callout .nb-sub{ font-size: 13px; margin-bottom: 10px; }
body[data-page="home"] .vb-callout .vb-cta{
background: linear-gradient(135deg, var(--purple-from), var(--purple-to));
color: white;
border: none; border-radius: 10px;
font-size: 13px; font-weight: 600;
padding: 10px 14px;
cursor: pointer;
align-self: flex-start;
transition: opacity .15s, transform .15s, box-shadow .2s;
}
body[data-page="home"] .vb-callout .vb-cta:hover{
opacity: .92;
transform: translateY(-1px);
box-shadow: 0 8px 20px -8px rgba(91,72,232,.5);
}
/* Style 3 — Preview (matches DP Preview: 250px banner full-width) */
body[data-page="home"] .vb-preview .vb-thumb{
height: 250px;
background: linear-gradient(135deg, var(--purple-from), var(--purple-to));
position: relative;
display: flex; align-items: center; justify-content: center;
}
body[data-page="home"] .vb-preview .vb-thumb::after{
content: '';
position: absolute; inset: 0;
background: radial-gradient(circle at 30% 40%, rgba(255,255,255,.1), transparent 50%);
}
body[data-page="home"] .vb-preview .vb-body{
padding: 22px 22px 22px;
}
/* ─── TESTIMONIALS BLOCK (slider) ─── */
body[data-page="home"] .tm-slider{
background: white;
border: 1px solid var(--border);
border-radius: 18px;
padding: 22px 22px 18px;
transition: box-shadow .2s, transform .2s;
}
body[data-page="home"] .tm-slider:hover{
/* hover-lift removed */
}
body[data-page="home"] .tm-header{
text-align: center;
font-size: 18px;
font-weight: 700;
letter-spacing: -.01em;
color: var(--text);
margin-bottom: 16px;
}
body[data-page="home"] .tm-slides{
position: relative;
min-height: 140px;
touch-action: pan-y; /* allow vertical scroll, JS handles horizontal swipe */
cursor: grab;
user-select: none;
-webkit-user-select: none;
}
body[data-page="home"] .tm-slides:active{ cursor: grabbing; }
body[data-page="home"] .tm-slide-wrap{
display: none;
animation: tmFade .25s ease;
}
body[data-page="home"] .tm-slide-wrap.active{ display: block; }
@keyframes tmFade {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
body[data-page="home"] .tm-dots{
display: flex;
justify-content: center;
gap: 6px;
margin-top: 14px;
}
body[data-page="home"] .tm-dot{
width: 7px; height: 7px;
border-radius: 50%;
background: #cbd5e1;
border: none;
padding: 0;
cursor: pointer;
transition: background .15s, transform .15s;
}
body[data-page="home"] .tm-dot:hover{ background: #94a3b8; }
body[data-page="home"] .tm-dot.active{
background: var(--purple-to);
width: 20px;
border-radius: 4px;
}
/* Slide variant: Compact */
body[data-page="home"] .tm-compact .tm-text{
font-size: 13px;
color: var(--muted);
font-style: italic;
margin-bottom: 10px;
line-height: 1.5;
}
body[data-page="home"] .tm-compact .tm-author{
font-size: 13px;
color: #334155;
font-weight: 500;
}
/* Slide variant: Standard (stars + avatar) */
body[data-page="home"] .tm-standard .tm-stars{
color: #fbbf24;
font-size: 15px;
letter-spacing: 2px;
margin-bottom: 12px;
}
body[data-page="home"] .tm-standard .tm-text{
font-size: 14px;
color: var(--muted);
line-height: 1.5;
margin-bottom: 16px;
}
body[data-page="home"] .tm-standard .tm-meta{
display: flex; align-items: center; gap: 12px;
}
body[data-page="home"] .tm-standard .tm-avatar{
width: 40px; height: 40px; border-radius: 50%;
background: linear-gradient(135deg, var(--purple-from), var(--purple-to));
color: white; font-weight: 700; font-size: 14px;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
body[data-page="home"] .tm-standard .tm-info-name{
font-size: 14px; font-weight: 600; color: var(--text);
line-height: 1.2;
}
body[data-page="home"] .tm-standard .tm-info-role{
font-size: 13px; color: var(--muted);
margin-top: 2px;
}
/* Slide variant: Prominent */
body[data-page="home"] .tm-prominent{
text-align: center;
padding: 8px 4px;
}
body[data-page="home"] .tm-prominent .tm-quote-mark{
font-size: 56px; line-height: .6;
color: #e2e8f0;
font-family: Georgia, serif;
margin-bottom: 10px;
user-select: none;
}
body[data-page="home"] .tm-prominent .tm-text{
font-size: 15px;
color: var(--muted);
line-height: 1.5;
font-style: italic;
margin-bottom: 14px;
}
body[data-page="home"] .tm-prominent .tm-stars{
color: #fbbf24;
font-size: 15px;
letter-spacing: 2px;
margin-bottom: 8px;
}
body[data-page="home"] .tm-prominent .tm-author{
font-size: 14px; font-weight: 700; color: var(--text);
}
/* ─── GALLERY BLOCK ─── */
body[data-page="home"] .gl-card{
background: white;
border: 1px solid var(--border);
border-radius: 18px;
padding: 22px;
transition: box-shadow .2s, transform .2s;
}
body[data-page="home"] .gl-card:hover{
/* hover-lift removed */
}
body[data-page="home"] .gl-header{
text-align: center;
font-size: 18px;
font-weight: 700;
letter-spacing: -.01em;
color: var(--text);
margin-bottom: 16px;
}
/* Tiles, heros, thumbs — always contain an ![]()
that fills the frame,
with a gradient background as fallback if the image fails to load. */
body[data-page="home"] .gl-tile, body[data-page="home"] .gl-hero, body[data-page="home"] .gl-thumb{
position: relative;
overflow: hidden;
background-size: cover;
background-position: center;
}
body[data-page="home"] .gl-tile img, body[data-page="home"] .gl-hero img, body[data-page="home"] .gl-thumb img{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
display: block;
pointer-events: none; /* prevent image drag-ghost from hijacking swipe */
-webkit-user-drag: none;
user-drag: none;
}
/* Style 1 — Grid (3 cols of squares) */
body[data-page="home"] .gl-grid .gl-items{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
body[data-page="home"] .gl-grid .gl-tile{
aspect-ratio: 1;
border-radius: 10px;
}
/* Style 2 — Masonry (2 cols, variable heights) */
body[data-page="home"] .gl-masonry .gl-items{
column-count: 2;
column-gap: 8px;
}
body[data-page="home"] .gl-masonry .gl-tile{
width: 100%;
border-radius: 10px;
break-inside: avoid;
margin-bottom: 8px;
display: block;
}
/* Gallery slider (carousel/spotlight) — slide container */
body[data-page="home"] .gl-slider .gl-slides{
position: relative;
min-height: 160px;
touch-action: pan-y; /* allow vertical scroll, JS handles horizontal swipe */
cursor: grab;
user-select: none;
-webkit-user-select: none;
}
body[data-page="home"] .gl-slider .gl-slides:active{ cursor: grabbing; }
body[data-page="home"] .gl-slider .gl-slide-wrap{
display: none;
animation: tmFade .25s ease;
}
body[data-page="home"] .gl-slider .gl-slide-wrap.active{ display: block; }
body[data-page="home"] .gl-slider .gl-slide-inner{ display: block; }
body[data-page="home"] .gl-slider:focus-visible{ outline: 2px solid var(--purple-to); outline-offset: 2px; }
/* Style 3 — Carousel (wide hero + dots) */
body[data-page="home"] .gl-carousel .gl-hero{
aspect-ratio: 16 / 10;
border-radius: 12px;
margin-bottom: 14px;
}
body[data-page="home"] .gl-carousel .gl-caption{
text-align: center;
font-size: 13px;
font-weight: 600;
color: var(--muted);
margin-bottom: 12px;
}
/* Shared gallery dots (carousel + spotlight) — clickable buttons */
body[data-page="home"] .gl-slider .gl-dots{
display: flex; justify-content: center; gap: 6px;
margin-top: 12px;
}
body[data-page="home"] .gl-slider .gl-dot{
width: 7px; height: 7px;
border-radius: 50%;
background: #cbd5e1;
border: none;
padding: 0;
cursor: pointer;
transition: background .15s, width .2s, transform .15s;
}
body[data-page="home"] .gl-slider .gl-dot:hover{ background: #94a3b8; }
body[data-page="home"] .gl-slider .gl-dot.active{
background: var(--purple-to);
width: 20px;
border-radius: 4px;
}
/* Style 4 — Spotlight (hero + thumb strip) */
body[data-page="home"] .gl-spotlight .gl-hero{
aspect-ratio: 16 / 10;
border-radius: 12px;
margin-bottom: 10px;
position: relative;
}
body[data-page="home"] .gl-spotlight .gl-star{
position: absolute; top: 12px; right: 14px;
color: #fbbf24;
font-size: 20px;
z-index: 2;
text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
body[data-page="home"] .gl-spotlight .gl-caption{
text-align: center;
font-size: 13px;
font-weight: 600;
color: var(--muted);
margin-bottom: 12px;
}
body[data-page="home"] .gl-spotlight .gl-thumbs{
display: flex; gap: 8px;
overflow-x: auto;
}
body[data-page="home"] .gl-spotlight .gl-thumb{
width: 60px; height: 60px;
border-radius: 10px;
flex-shrink: 0;
}
/* ─── LINK BLOCK ─── */
body[data-page="home"] .lb-card{
background: white;
border: 1px solid var(--border);
border-radius: 18px;
padding: 22px;
transition: box-shadow .2s, transform .2s;
}
body[data-page="home"] .lb-card:hover{
/* hover-lift removed */
}
body[data-page="home"] .lb-header{
text-align: center;
font-size: 18px;
font-weight: 700;
letter-spacing: -.01em;
color: var(--text);
margin-bottom: 16px;
}
/* Style 1 — Simple list (stacked wide buttons) */
body[data-page="home"] .lb-simple .lb-items{
display: flex; flex-direction: column;
gap: 10px;
}
body[data-page="home"] .lb-simple .lb-item{
display: flex; align-items: center; gap: 12px;
padding: 14px 16px;
border-radius: 12px;
color: white;
font-size: 14px; font-weight: 600;
text-decoration: none;
transition: transform .15s;
}
body[data-page="home"] .lb-simple .lb-item:hover{ transform: translateY(-1px); }
body[data-page="home"] .lb-simple .lb-item svg{ width: 20px; height: 20px; flex-shrink: 0; }
body[data-page="home"] .lb-simple .lb-item .lb-label{ flex: 1; }
body[data-page="home"] .lb-simple .lb-item .lb-arrow{ opacity: .9; font-size: 15px; }
/* Style 2 — Icon row (circles only) */
body[data-page="home"] .lb-iconrow .lb-items{
display: flex; justify-content: center; gap: 12px;
flex-wrap: wrap;
}
body[data-page="home"] .lb-iconrow .lb-item{
width: 48px; height: 48px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
color: white;
text-decoration: none;
transition: transform .15s;
}
body[data-page="home"] .lb-iconrow .lb-item:hover{ transform: translateY(-2px); }
body[data-page="home"] .lb-iconrow .lb-item svg{ width: 22px; height: 22px; }
/* Style 3 — Grid (2-col tiles with label) */
body[data-page="home"] .lb-grid .lb-items{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
body[data-page="home"] .lb-grid .lb-item{
display: flex; flex-direction: column; align-items: center;
gap: 8px;
padding: 16px 10px;
border: 1px solid var(--border);
border-radius: 12px;
background: white;
text-decoration: none;
transition: transform .15s, box-shadow .15s;
}
body[data-page="home"] .lb-grid .lb-item:hover{
transform: translateY(-2px);
box-shadow: 0 6px 16px -6px rgba(15,23,42,.12);
}
body[data-page="home"] .lb-grid .lb-icon{
width: 44px; height: 44px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
color: white;
}
body[data-page="home"] .lb-grid .lb-icon svg{ width: 22px; height: 22px; }
body[data-page="home"] .lb-grid .lb-label{
font-size: 13px; font-weight: 600;
color: var(--text);
}
/* ─── TEXT BLOCK ─── */
body[data-page="home"] .tb-card{
background: white;
border: 1px solid var(--border);
border-radius: 18px;
padding: 22px;
transition: box-shadow .2s, transform .2s;
}
body[data-page="home"] .tb-card:hover{
/* hover-lift removed */
}
/* Style 1 — About (avatar + bio) */
body[data-page="home"] .tb-about{
text-align: center;
}
body[data-page="home"] .tb-about .tb-avatar{
width: 72px; height: 72px; border-radius: 50%;
background: linear-gradient(135deg, var(--purple-from), var(--purple-to));
color: white; font-weight: 700; font-size: 28px;
display: inline-flex; align-items: center; justify-content: center;
margin: 0 auto 12px;
}
body[data-page="home"] .tb-about .tb-name{
font-size: 18px; font-weight: 700;
letter-spacing: -.01em;
color: var(--text);
margin-bottom: 4px;
}
body[data-page="home"] .tb-about .tb-role{
font-size: 13px;
color: var(--muted);
margin-bottom: 14px;
}
body[data-page="home"] .tb-about .tb-bio{
font-size: 13px;
color: var(--muted);
line-height: 1.5;
text-align: left;
}
body[data-page="home"] .tb-about .tb-bio strong{ color: var(--text); }
/* Style 2 — Announcement (colored banners) */
body[data-page="home"] .tb-announce .tb-banner{
padding: 14px 16px;
border-radius: 12px;
font-size: 13px;
display: flex; align-items: flex-start; gap: 10px;
line-height: 1.5;
}
body[data-page="home"] .tb-announce .tb-banner + .tb-banner{ margin-top: 10px; }
body[data-page="home"] .tb-announce .tb-banner.amber{
background: #fef3c7; color: #78350f;
}
body[data-page="home"] .tb-announce .tb-banner.blue{
background: #dbeafe; color: #1e40af;
}
body[data-page="home"] .tb-announce .tb-banner-text{ flex: 1; font-weight: 500; }
body[data-page="home"] .tb-announce .tb-dismiss{
background: none; border: none;
color: currentColor; opacity: .5;
font-size: 18px; line-height: 1; cursor: pointer;
padding: 0 2px;
}
body[data-page="home"] .tb-announce .tb-dismiss:hover{ opacity: 1; }
/* Style 3 — FAQ (accordion) */
body[data-page="home"] .tb-faq .tb-q{
border-radius: 12px;
margin-bottom: 10px;
overflow: hidden;
}
body[data-page="home"] .tb-faq .tb-q:last-child{ margin-bottom: 0; }
body[data-page="home"] .tb-faq .tb-q-head{
display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
color: var(--text);
}
body[data-page="home"] .tb-faq .tb-q-caret{
color: #94a3b8;
font-size: 13px;
transition: transform .2s;
}
body[data-page="home"] .tb-faq .tb-q.open .tb-q-caret{ transform: rotate(90deg); }
body[data-page="home"] .tb-faq .tb-q-body{
padding: 0 16px 14px;
font-size: 13px;
color: var(--muted);
line-height: 1.5;
display: none;
}
body[data-page="home"] .tb-faq .tb-q.open .tb-q-body{ display: block; }
/* ══════════════ MEDIUM SCREENS (1024 - 901) ══════════════ */
@media (max-width: 1024px) and (min-width: 901px) {
body[data-page="home"] .shell{
padding: 0 28px 0 calc(28px + 320px + 28px);
}
body[data-page="home"] .profile{
left: max(28px, calc((100vw - 1400px) / 2 + 28px));
width: 320px;
}
}
/* ══════════════ TABLET (900 - 641) ══════════════ */
/* Layout collapses to single column but masonry stays 2-col */
@media (max-width: 900px) {
body[data-page="home"] .shell{
display: block;
padding: 0;
}
/* ─── Floating hamburger button ─── */
/* Always fixed top-right with subtle background so it stays visible on white. */
body[data-page="home"] .floating-menu{
display: inline-flex;
align-items: center; justify-content: center;
position: fixed;
top: max(20px, env(safe-area-inset-top));
right: max(20px, env(safe-area-inset-right));
width: 44px; height: 44px;
border-radius: 50%; /* circle — native mobile feel */
background: white;
color: var(--text);
border: none; cursor: pointer;
z-index: 45;
box-shadow: 0 2px 8px rgba(15,23,42,.08), 0 0 0 1px rgba(15,23,42,.06);
transition: background .2s, box-shadow .2s, backdrop-filter .2s;
}
/* State: page is scrolled — hamburger has stronger elevation */
body[data-page="home"].scrolled .floating-menu{
background: rgba(255,255,255,.88);
-webkit-backdrop-filter: saturate(180%) blur(12px);
backdrop-filter: saturate(180%) blur(12px);
box-shadow: 0 6px 20px rgba(15,23,42,.15), 0 0 0 1px rgba(15,23,42,.08);
}
/* Hide when drawer is open (close button inside drawer takes over) */
body[data-page="home"].menu-open .floating-menu{
opacity: 0;
pointer-events: none;
}
/* Hide sticky bottom bar when drawer is open (prevents overlap) */
body[data-page="home"].menu-open .sticky-cta{
display: none;
}
/* Profile — COMPACT HORIZONTAL on mobile (avatar 40px + name + role only) */
body[data-page="home"] .profile{
display: grid !important;
grid-template-columns: 40px 1fr;
grid-template-rows: auto auto;
gap: 2px 12px;
align-items: center;
position: static;
left: auto;
width: auto;
height: auto;
text-align: left;
/* Top padding respects safe-area; right padding leaves room for floating ☰ */
padding: max(20px, calc(env(safe-area-inset-top) + 16px)) 70px 12px 20px;
}
body[data-page="home"] .avatar{
grid-column: 1;
grid-row: 1 / span 2;
width: 40px; height: 40px;
font-size: 17px;
margin-bottom: 0;
align-self: center;
}
/* Name — top row, role-tag — bottom row */
body[data-page="home"] .name{
grid-column: 2;
grid-row: 1;
font-size: 16px;
font-weight: 700;
margin-bottom: 0;
line-height: 1.2;
align-self: end;
}
body[data-page="home"] .role-tag{
grid-column: 2;
grid-row: 2;
margin-bottom: 0;
font-size: 9px;
letter-spacing: .14em;
line-height: 1.2;
align-self: start;
}
/* Hide bio + socials + handle + profile-divider on mobile — all in drawer */
body[data-page="home"] .bio,
body[data-page="home"] .socials,
body[data-page="home"] .handle,
body[data-page="home"] .profile-divider{
display: none;
}
body[data-page="home"] .content{
padding: 8px 20px 60px;
max-width: 100%;
}
/* Grid sizing — always 1 col on mobile */
body[data-page="home"] .cards{ grid-template-columns: 1fr; gap: 30px; max-width: none; }
/* Masonry — 1 column on tablet/phone (2 skinny columns squash Preview) */
body[data-page="home"] .cards.mixed{ column-count: 1; column-gap: 30px; max-width: none; }
body[data-page="home"] .cards.mixed .mix-item{ margin-bottom: 30px; }
/* Stack callout on mobile — photo on top, text below (native callout responsive) */
body[data-page="home"] .cards.stack > .card.callout{
flex-direction: column;
}
body[data-page="home"] .cards.stack > .card.callout .card-img{
width: 100%;
min-width: auto;
min-height: 180px;
}
body[data-page="home"] .cards.stack > .card.callout .card-body{
padding: 18px 20px;
}
body[data-page="home"] .cards.stack > .card.callout .card-title{ font-size: 17px; }
body[data-page="home"] .cards.stack > .card.callout .price{ font-size: 20px; }
/* Tabs — hidden on mobile, replaced by drawer menu */
body[data-page="home"] .tabs{ display: none; }
/* Card banners smaller on mobile (non-preview variants only) */
body[data-page="home"] .card:not(.preview) .card-img{ min-height: 140px; }
body[data-page="home"] .card:not(.preview) .card-img svg{ width: 52px; height: 52px; }
/* Preview card — hide heavy features but KEEP testimonials (strongest conversion trigger) */
body[data-page="home"] .card.preview .features{ display: none; }
body[data-page="home"] .card.preview .mini-testim{
font-size: 13px;
padding: 8px 10px;
margin-bottom: 10px;
line-height: 1.4;
}
body[data-page="home"] .card.preview .mini-testim .t-author{
font-size: 10px;
margin-top: 2px;
}
body[data-page="home"] .card.preview .trust-line{
flex-direction: row;
font-size: 10px;
}
/* Callout stays horizontal but more compact */
body[data-page="home"] .card.callout .card-img{ width: 96px; min-width: 96px; }
body[data-page="home"] .card.callout .card-img svg{ width: 32px; height: 32px; }
body[data-page="home"] .card.callout .card-body{ padding: 12px 14px; }
body[data-page="home"] .card.callout .card-title{ font-size: 14px; }
/* Button variant (card-style) — compact on phone */
body[data-page="home"] .btn-variant{ padding: 0; gap: 0; }
body[data-page="home"] .btn-variant .b-icon{ width: 80px; height: 80px; min-width: 80px; }
body[data-page="home"] .btn-variant .b-icon svg{ width: 28px; height: 28px; }
body[data-page="home"] .btn-variant .b-text{ padding: 12px 12px 12px 14px; }
body[data-page="home"] .btn-variant .b-title{ font-size: 14px; }
body[data-page="home"] .btn-variant .b-sub{ font-size: 13px; }
body[data-page="home"] .btn-variant .b-arrow{ padding: 0 12px 0 6px; font-size: 18px; }
/* Video Button — same as btn-variant on mobile */
body[data-page="home"] .vb-button{ padding: 0; gap: 0; }
body[data-page="home"] .vb-button .vb-btn-icon{ width: 80px; height: 80px; min-width: 80px; }
body[data-page="home"] .vb-button .vb-btn-text{ padding: 12px 12px 12px 14px; }
body[data-page="home"] .vb-button .vb-btn-title{ font-size: 14px; }
body[data-page="home"] .vb-button .vb-btn-sub{ font-size: 13px; }
body[data-page="home"] .vb-button .vb-btn-arrow{ padding: 0 12px 0 6px; font-size: 18px; }
/* Slot with status — wrap on narrow */
body[data-page="home"] .slot{ flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
body[data-page="home"] .slot .s-status{ font-size: 9px; }
/* Webinar slots label */
body[data-page="home"] .slots-label{ font-size: 10px; }
/* Social proof smaller */
body[data-page="home"] .social-proof{ font-size: 13px; gap: 4px 10px; }
body[data-page="home"] .section-head{ margin: 40px 0 16px; }
/* Footer on mobile — tighter padding */
body[data-page="home"] .page-footer{
padding: 40px 20px 32px;
margin-top: 40px;
}
body[data-page="home"] .promo-title{ font-size: 20px; }
body[data-page="home"] .promo-sub{ font-size: 13px; }
body[data-page="home"] .promo-btn{ padding: 13px 24px; font-size: 14px; }
body[data-page="home"].has-sticky-cta .page-footer{
padding-bottom: 100px;
}
body[data-page="home"] .about-card{ padding: 20px; }
body[data-page="home"] .about-card h2{ font-size: 18px; }
body[data-page="home"] .about-stats{ grid-template-columns: 1fr; gap: 12px; }
}
/* ══════════════ PHONE (≤ 640px) ══════════════ */
@media (max-width: 640px) {
/* ═══ Callout on mobile — same horizontal layout as desktop ═══
Thumb on left, body on right — same as desktop, slightly compressed.
Below 380px this layout becomes too cramped and stacks vertically. */
body[data-page="home"] .card.callout{
/* flex-direction stays row (inherited from desktop) */
}
body[data-page="home"] .card.callout .card-img{
width: 130px; min-width: 130px; /* slightly smaller thumb than desktop (150px) */
}
body[data-page="home"] .card.callout .card-img svg{ width: 40px; height: 40px; }
body[data-page="home"] .card.callout .card-body{ padding: 14px 16px; }
body[data-page="home"] .card.callout .card-title{
font-size: 15px;
margin-bottom: 4px;
}
body[data-page="home"] .card.callout .card-desc{
font-size: 13px;
margin-bottom: 8px;
}
/* Hidden elements stay hidden on mobile Callout (same as desktop compact) */
/* Compact badge stays in top-left of thumb */
body[data-page="home"] .card.callout .badge.badge-compact{
top: 8px; left: 8px;
}
/* Video Callout — keep horizontal on mobile too (mirror .card.callout) */
body[data-page="home"] .vb-callout .vb-thumb{
width: 130px; min-width: 130px;
min-height: auto;
}
body[data-page="home"] .vb-callout .vb-body{
padding: 14px 16px;
}
body[data-page="home"] .vb-callout .nb-title{ font-size: 15px; margin-bottom: 4px; }
body[data-page="home"] .vb-callout .nb-sub{ font-size: 13px; margin-bottom: 8px; }
body[data-page="home"] .vb-callout .vb-cta{
padding: 8px 14px;
font-size: 13px;
}
/* Preview — body padding fine-tuned for small screens */
body[data-page="home"] .card.preview .card-body{ padding: 18px 18px 18px; }
body[data-page="home"] .card.preview .card-title{ font-size: 17px; }
/* Trust-line — allow 2 rows but centered */
body[data-page="home"] .card.preview .trust-line{
flex-wrap: wrap;
justify-content: center;
gap: 4px 12px;
}
/* Profile on small phone — keep compact size, just tighten padding */
body[data-page="home"] .profile{ padding: max(18px, calc(env(safe-area-inset-top) + 14px)) 64px 10px 18px; }
body[data-page="home"] .name{ font-size: 15px; }
body[data-page="home"] .role-tag{ font-size: 8px; }
/* Content sides tighter */
body[data-page="home"] .content{ padding: 8px 20px 48px; }
}
/* ══════════════ SMALL PHONE (≤ 380px) — iPhone SE etc. ══════════════ */
@media (max-width: 380px) {
body[data-page="home"] .content{ padding: 6px 20px 40px; }
body[data-page="home"] .card.preview .card-body{ padding: 16px 14px; }
body[data-page="home"] .card.preview .card-title{ font-size: 16px; }
/* Callout collapses to vertical on very small phones — horizontal is too cramped */
body[data-page="home"] .card.callout{ flex-direction: column; }
body[data-page="home"] .card.callout .card-img{
width: 100%; min-width: 0;
min-height: 160px;
}
body[data-page="home"] .card.callout .card-img svg{ width: 52px; height: 52px; }
body[data-page="home"] .card.callout .card-body{ padding: 16px 16px; }
body[data-page="home"] .card.callout .card-title{ font-size: 16px; }
/* Video Callout — same vertical behavior on very small phones */
body[data-page="home"] .vb-callout{ flex-direction: column; }
body[data-page="home"] .vb-callout .vb-thumb{
width: 100%; min-width: 0;
min-height: 160px;
}
body[data-page="home"] .vb-callout .vb-body{ padding: 16px 16px; }
body[data-page="home"] .vb-callout .nb-title{ font-size: 16px; }
body[data-page="home"] .vb-callout .vb-cta{
align-self: stretch;
padding: 10px 14px;
font-size: 13px;
text-align: center; justify-content: center;
}
/* Save-badge can wrap below price — keep flexible */
body[data-page="home"] .price-row{ flex-wrap: wrap; row-gap: 4px; }
/* Social proof — one item per line if needed */
body[data-page="home"] .social-proof{ font-size: 10.5px; }
/* CTA — price inline gets smaller */
body[data-page="home"] .btn-cta{ font-size: 13px; padding: 12px 14px; }
/* Tabs slightly tighter */
body[data-page="home"] .tab{ padding: 8px 12px; font-size: 13px; }
}
/* ══════════════ MOBILE MENU DRAWER ══════════════ */
body[data-page="home"] .backdrop{
position: fixed; inset: 0;
background: rgba(15,23,42,.4);
backdrop-filter: blur(2px);
z-index: 50;
opacity: 0; pointer-events: none;
transition: opacity .2s;
}
body[data-page="home"] .backdrop.open{ opacity: 1; pointer-events: auto; }
body[data-page="home"] .drawer{
position: fixed;
top: 0; right: 0; bottom: 0;
width: min(340px, 88vw);
max-width: 100vw;
height: 100vh;
height: 100dvh; /* dynamic viewport — iOS bottom cutoff fix */
background: white;
z-index: 60;
transform: translate3d(100%, 0, 0);
will-change: transform;
transition: transform .28s cubic-bezier(.4,0,.2,1);
display: flex; flex-direction: column;
box-shadow: -10px 0 30px rgba(0,0,0,.1);
overflow-y: auto;
}
body[data-page="home"] .drawer.open{ transform: translate3d(0, 0, 0); }
body[data-page="home"] .drawer-head{
padding: 16px 20px 0;
display: flex; align-items: center; justify-content: flex-end;
/* No border — visual flow into author block below */
}
body[data-page="home"] .drawer-head h3{ display: none; }
body[data-page="home"] .close-btn{
width: 36px; height: 36px; border-radius: 50%;
background: #f1f5f9; border: none; cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: var(--text);
}
body[data-page="home"] .close-btn:hover{ background: #e2e8f0; }
/* Author intro inside drawer */
body[data-page="home"] .drawer-author{
padding: 8px 24px 20px;
text-align: center;
}
body[data-page="home"] .drawer-author-name{
font-size: 22px;
font-weight: 800;
color: var(--text);
letter-spacing: -.02em;
margin-bottom: 8px;
}
body[data-page="home"] .drawer-author-bio{
font-size: 13px;
color: var(--muted);
line-height: 1.5;
margin: 0 0 14px;
}
/* Socials inside drawer-author block */
body[data-page="home"] .drawer-socials{
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
body[data-page="home"] .drawer-social{
width: 40px; height: 40px;
border-radius: 50%;
background: #f8fafc;
display: inline-flex;
align-items: center; justify-content: center;
transition: background .15s, transform .15s;
}
body[data-page="home"] .drawer-social:hover{
background: #e2e8f0;
transform: translateY(-1px);
}
body[data-page="home"] .drawer-social svg{
width: 18px; height: 18px;
}
body[data-page="home"] .drawer-nav{
padding: 12px;
flex: 1; overflow-y: auto;
border-top: 1px solid var(--border);
}
body[data-page="home"] .drawer-nav a{
display: block;
padding: 14px 16px; border-radius: 10px;
font-size: 15px; font-weight: 500;
color: var(--text); text-decoration: none;
transition: background .15s;
}
body[data-page="home"] .drawer-nav a:hover, body[data-page="home"] .drawer-nav a[aria-current="page"]{
background: #f1f5f9;
}
body[data-page="home"] .drawer-nav a[aria-current="page"]{ font-weight: 600; color: var(--purple-to); }
body[data-page="home"] .drawer-foot{
padding: 14px 16px;
padding-bottom: max(14px, calc(env(safe-area-inset-bottom) + 14px));
flex-shrink: 0; /* CTA button never collapses */
}
body[data-page="home"] .drawer-cta{
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 12px 14px;
background: white;
color: var(--text);
text-decoration: none;
border: 1px solid var(--border);
border-radius: 12px;
transition: transform .15s, box-shadow .2s;
}
body[data-page="home"] .drawer-cta:hover{
transform: translateY(-1px);
box-shadow: 0 8px 20px -6px rgba(15,23,42,.12);
}
/* Hide drawer CTA on paid plans (starter/pro) — same rule as footer promo */
body[data-page="home"][data-plan="starter"] .drawer-foot,
body[data-page="home"][data-plan="pro"] .drawer-foot{
display: none;
}
body[data-page="home"].no-scroll{ overflow: hidden; }
/* ══════════════ STICKY BOTTOM BAR (mobile, context-aware) ══════════════ */
body[data-page="home"] .sticky-cta{
display: none;
}
@media (max-width: 900px) {
body[data-page="home"] .sticky-cta{
display: block;
position: fixed;
left: 0; right: 0; bottom: 0;
width: 100%;
max-width: 100vw;
z-index: 35;
background: rgba(255,255,255,.94);
-webkit-backdrop-filter: saturate(180%) blur(14px);
backdrop-filter: saturate(180%) blur(14px);
border-top: 1px solid var(--border);
transform: translateY(100%);
transition: transform .25s cubic-bezier(.4,0,.2,1);
overflow: hidden;
}
body[data-page="home"] .sticky-cta.visible{ transform: translateY(0); }
/* Shared layout for both modes */
body[data-page="home"] .sc-mode{
display: none; /* only one mode visible at a time */
align-items: center;
gap: 12px;
padding: 10px 16px;
padding-bottom: max(10px, env(safe-area-inset-bottom));
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
}
body[data-page="home"] .sticky-cta[data-mode="product"] .sc-product{ display: flex; }
body[data-page="home"] .sticky-cta[data-mode="ad"] .sc-ad{ display: flex; }
/* ── Mode 1: Product CTA ── */
body[data-page="home"] .sc-product .sc-info{
flex: 1 1 0;
min-width: 0;
overflow: hidden;
}
body[data-page="home"] .sc-product .sc-title{
font-size: 13px; font-weight: 600;
color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
max-width: 100%;
}
body[data-page="home"] .sc-product .sc-price{
font-size: 15px; font-weight: 800;
color: var(--text);
letter-spacing: -.01em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
max-width: 100%;
}
body[data-page="home"] .sc-product .sc-price .old{
font-size: 13px; color: var(--muted);
text-decoration: line-through;
font-weight: 500; margin-left: 4px;
}
body[data-page="home"] .sc-product .sc-btn{
background: linear-gradient(135deg, var(--purple-from), var(--purple-to));
color: white;
padding: 12px 18px;
border: none; border-radius: 10px;
font-size: 14px; font-weight: 600;
cursor: pointer;
white-space: nowrap;
display: inline-flex; align-items: center; gap: 6px;
flex-shrink: 0;
max-width: 50%;
transition: opacity .15s, transform .15s;
}
body[data-page="home"] .sc-product .sc-btn:hover{
opacity: .92;
transform: translateY(-1px);
}
/* ── Mode 2: CreatorStore ad ── */
body[data-page="home"] .sc-ad{
text-decoration: none;
color: inherit;
}
body[data-page="home"] .sc-ad-icon{
width: 36px; height: 36px;
border-radius: 10px;
background: linear-gradient(135deg, var(--purple-from), var(--purple-to));
color: white;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
body[data-page="home"] .sc-ad-icon svg{ width: 18px; height: 18px; }
body[data-page="home"] .sc-ad-text{
flex: 1 1 0;
min-width: 0;
overflow: hidden;
}
body[data-page="home"] .sc-ad-title{
font-size: 13px; font-weight: 700;
color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body[data-page="home"] .sc-ad-sub{
font-size: 13px;
color: var(--muted);
margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body[data-page="home"] .sc-ad-arrow{
font-size: 18px;
color: var(--purple-to);
flex-shrink: 0;
margin-right: 4px;
}
/* Reserve space at page bottom so content isn't hidden when bar is up */
body[data-page="home"].has-sticky-cta .content{ padding-bottom: 100px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
3c. PRODUCT PAGE — scoped to body[data-page="product"]
═══════════════════════════════════════════════════════════════════════════ */
/* ── Breadcrumb ── */
body[data-page="product"] .breadcrumb{
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--text-meta);
margin-bottom: 24px;
}
body[data-page="product"] .breadcrumb a{
color: var(--text-sec);
text-decoration: none;
transition: color .15s;
}
body[data-page="product"] .breadcrumb a:hover{ color: var(--text-main); }
body[data-page="product"] .breadcrumb .sep{ color: var(--text-meta); font-size: 13px; }
body[data-page="product"] .breadcrumb .current{ color: var(--text-main); font-weight: 500; }
/* ── Layout ── */
/* ═══════════ SHELL + FIXED PROFILE (ported from home.html) ═══════════ */
body[data-page="product"] .page-wrap{
max-width: 1400px;
margin: 0 auto;
padding: 40px 40px 120px calc(40px + 380px + 40px); /* reserve space for fixed profile */
min-height: 100vh;
position: relative;
}
/* Fixed profile column — always visible on desktop */
body[data-page="product"] .profile{
position: fixed;
top: 0;
left: max(40px, calc((100vw - 1400px) / 2 + 40px));
width: 380px;
height: 100vh;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: 40px 20px;
text-align: center;
z-index: 1;
}
body[data-page="product"] .profile .avatar{
width: 100px; height: 100px; border-radius: 50%;
background: linear-gradient(135deg, var(--purple-from), var(--purple-to));
display: flex; align-items: center; justify-content: center;
color: white; font-size: 46px; font-weight: 700;
margin-bottom: 22px;
overflow: hidden;
}
body[data-page="product"] .profile .role-tag{
font-size: 12px; font-weight: 700; letter-spacing: .14em;
color: var(--purple-to); text-transform: uppercase;
margin-bottom: 10px;
}
body[data-page="product"] .profile .name{
font-size: 26px; font-weight: 800; letter-spacing: -.02em;
margin-bottom: 6px; color: var(--text);
}
body[data-page="product"] .profile .bio{
font-size: 15px; color: #334155;
max-width: 280px; line-height: 1.55;
margin-bottom: 26px;
}
body[data-page="product"] .profile .socials{
display: flex; gap: 6px;
}
body[data-page="product"] .profile .social{
width: 44px; height: 44px; border-radius: 50%;
background: #f1f5f9;
display: inline-flex; align-items: center; justify-content: center;
text-decoration: none;
transition: background .15s;
}
body[data-page="product"] .profile .social:hover{ background: #e2e8f0; }
body[data-page="product"] .profile .social svg{ width: 18px; height: 18px; }
body[data-page="product"] .content-grid{
display: block; /* single column — buy box moved inline into col-main */
}
body[data-page="product"] .col-main{
max-width: 900px;
}
/* ── Tabs (ported from home.html) ── */
body[data-page="product"] .tabs{
display: inline-flex;
background: var(--tab-bg);
padding: 6px;
border-radius: 14px;
gap: 2px;
margin-bottom: 24px;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
body[data-page="product"] .tabs::-webkit-scrollbar{ display: none; }
body[data-page="product"] .tab{
padding: 10px 20px;
border-radius: 10px;
font-size: 15px; font-weight: 500;
color: var(--muted); cursor: pointer;
border: none; background: transparent;
transition: background .15s, color .15s;
white-space: nowrap;
font-family: inherit;
}
body[data-page="product"] .tab[aria-selected="true"]{
background: white; color: var(--text);
box-shadow: 0 1px 3px rgba(0,0,0,.08);
font-weight: 600;
}
body[data-page="product"] .tab:hover{ color: var(--text); }
/* ── Hero image ── */
body[data-page="product"] .hero-img{
width: 100%;
aspect-ratio: 16/9;
border-radius: var(--r-lg);
background: #f1f5f9;
background-size: cover;
background-position: center;
margin-bottom: 14px;
overflow: hidden;
box-shadow: var(--shadow-card);
transition: all .2s ease;
}
body[data-page="product"] .hero-img:hover{
/* hover-lift removed — per home.html style */
}
/* ── Gallery ── */
body[data-page="product"] .gallery-strip{
display: flex;
gap: 8px;
margin-bottom: 24px;
}
body[data-page="product"] .gallery-thumb{
width: 80px;
height: 80px;
border-radius: var(--r-md);
overflow: hidden;
border: 1px solid var(--border);
cursor: pointer;
flex-shrink: 0;
background-size: cover;
background-position: center;
transition: all .2s ease;
box-shadow: var(--shadow-card);
}
body[data-page="product"] .gallery-thumb:hover{
border-color: #bbb;
transform: translateY(-2px);
}
body[data-page="product"] .gallery-thumb.active{ border: 2px solid var(--dark); }
/* ── Author eyebrow ── */
body[data-page="product"] .author-eyebrow{
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
flex-wrap: wrap;
}
body[data-page="product"] .author-eyebrow-avatar{
width: 28px; height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--purple-from), var(--purple-to));
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0;
}
body[data-page="product"] .author-eyebrow-name{
font-size: 13px; font-weight: 600; color: var(--text-main);
text-decoration: none; transition: color .15s;
}
body[data-page="product"] .author-eyebrow-name:hover{ color: var(--accent); }
body[data-page="product"] .author-eyebrow-sep{
width: 1px; height: 12px; background: var(--border); flex-shrink: 0;
}
body[data-page="product"] .author-eyebrow-social{
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 13px; color: var(--text-meta);
text-decoration: none; transition: color .15s;
}
body[data-page="product"] .author-eyebrow-social svg{
width: 14px; height: 14px;
flex-shrink: 0;
}
body[data-page="product"] .author-eyebrow-social:hover{ color: var(--text-main); }
/* ── Author card (right col, legacy — kept for mobile) ── */
body[data-page="product"] .author-card{
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--r-lg);
margin-bottom: 12px;
transition: border-color .15s, box-shadow .2s, transform .15s;
}
body[data-page="product"] .author-card:hover{
/* hover-lift removed */
}
body[data-page="product"] .author-avatar{
width: 48px; height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, var(--purple-from), var(--purple-to));
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: 700; color: #fff; flex-shrink: 0;
}
body[data-page="product"] .author-name{ font-size: 14px; font-weight: 700; color: var(--text-main); margin-bottom: 5px; }
body[data-page="product"] .author-socials{ display: flex; gap: 6px; }
body[data-page="product"] .author-social{
font-size: 13px; color: var(--text-sec);
background: var(--bg-tag); border: 1px solid var(--border-light);
padding: 3px 10px; border-radius: var(--r-pill);
text-decoration: none; transition: all .2s ease;
}
body[data-page="product"] .author-social:hover{ background: var(--purple-to); color: #fff; border-color: var(--purple-to); }
/* ── Title ── */
body[data-page="product"] .product-title{
font-size: 28px; font-weight: 800; color: var(--text);
line-height: 1.25; letter-spacing: -0.02em; margin-bottom: 8px;
}
body[data-page="product"] .product-subline{ font-size: 15px; color: var(--text-sec); line-height: 1.65; margin-bottom: 16px; }
/* ── Rating summary ── */
body[data-page="product"] .rating-summary{
display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;
}
body[data-page="product"] .rating-stars-big{ color: #ffc107; font-size: 15px; letter-spacing: 1px; }
body[data-page="product"] .rating-score{ font-size: 15px; font-weight: 700; color: var(--text-main); }
body[data-page="product"] .rating-count{ font-size: 13px; color: var(--text-meta); }
/* ── Meta badges ── */
body[data-page="product"] .meta-row{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
body[data-page="product"] .meta-badge{
font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
background: var(--bg-tag); border: 1px solid var(--border-light);
color: var(--text-main); padding: 4px 12px; border-radius: var(--r-pill);
}
/* ── Bonus banner ── */
/* Inner content of a section-card — no own border/padding/shadow */
body[data-page="product"] .bonus-banner{
display: flex; align-items: flex-start; gap: 12px;
}
body[data-page="product"] .bonus-banner:hover{ /* no hover on inner content */ }
body[data-page="product"] .bonus-tag{
font-size: 13px; font-weight: 600;
background: var(--bg-tag); border: 1px solid var(--border-light);
color: var(--text-sec); padding: 3px 10px; border-radius: var(--r-pill);
display: inline-block; margin: 2px;
}
/* ── Sections ── */
/* Each logical section is wrapped in a card — same style as .buy-box
(white bg, border, 18px radius, 24px padding) + light shadow.
Port from home.html design language. */
body[data-page="product"] .section-block{
background: #fff;
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 24px;
margin-bottom: 16px;
}
body[data-page="product"] .section-title{
font-size: 13px; font-weight: 700; letter-spacing: .18em;
text-transform: uppercase; color: var(--muted); margin-bottom: 16px;
}
body[data-page="product"] .section-divider{
display: flex; align-items: center; gap: 12px; margin: 44px 0 14px;
}
body[data-page="product"] .section-divider::before,
body[data-page="product"] .section-divider::after{
content: ''; flex: 1; height: 1px; background: var(--border);
}
/* ── Included ── */
body[data-page="product"] .included-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body[data-page="product"] .included-item{
display: flex; align-items: center; gap: 8px;
font-size: 14px; color: var(--text-sec);
font-weight: 500; line-height: 1.4;
}
body[data-page="product"] .included-check{ color: var(--accent); font-weight: 700; flex-shrink: 0; }
body[data-page="product"] .included-text{ /* no flex:1 — tag sits right after text */ }
body[data-page="product"] .included-format{
flex-shrink: 0;
font-size: 11px; font-weight: 700; letter-spacing: .4px;
text-transform: uppercase;
color: var(--text-meta);
background: var(--surface-2);
padding: 3px 8px; border-radius: var(--r-sm);
white-space: nowrap;
}
/* ── Description ── */
body[data-page="product"] .desc-text{ font-size: 14px; color: var(--text-sec); line-height: 1.75; }
/* ── Who it's for ── */
body[data-page="product"] .whofor-list{ display: flex; flex-direction: column; gap: 8px; }
body[data-page="product"] .whofor-item{
display: flex; align-items: center; gap: 10px;
font-size: 14px; color: var(--text-sec);
}
body[data-page="product"] .whofor-arrow{ color: var(--accent); flex-shrink: 0; font-weight: 700; }
/* ── Video ── */
body[data-page="product"] .video-embed{
aspect-ratio: 16/9; overflow: hidden;
background: linear-gradient(135deg, var(--text) 0%, #2d1a2e 100%);
display: flex; align-items: center; justify-content: center;
cursor: pointer; position: relative;
transition: all .2s ease;
}
body[data-page="product"] .video-embed:hover{ /* hover-lift removed */ }
body[data-page="product"] .video-embed:hover .video-play-btn{ background: var(--accent); transform: scale(1.1); }
body[data-page="product"] .video-placeholder{ text-align: center; }
body[data-page="product"] .video-play-btn{
width: 64px; height: 64px; border-radius: 50%;
background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.3);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 12px; font-size: 24px;
transition: all .2s ease; backdrop-filter: blur(4px);
}
body[data-page="product"] .video-title{ font-size: 15px; color: #fff; font-weight: 600; margin-bottom: 4px; }
body[data-page="product"] .video-label{ font-size: 13px; color: rgba(255,255,255,.6); font-weight: 500; }
/* ── Testimonials ── */
body[data-page="product"] .rating-header{
display: flex; align-items: center; gap: 16px;
padding: 16px 20px; background: var(--bg-tag);
margin-bottom: 12px;
}
body[data-page="product"] .rating-big-num{ font-size: 40px; font-weight: 700; line-height: 1; color: var(--text-main); }
body[data-page="product"] .rating-stars-row{ color: #ffc107; font-size: 16px; margin-bottom: 2px; }
body[data-page="product"] .rating-total{ font-size: 13px; color: var(--text-meta); }
/* ── Testimonials slider ── */
body[data-page="product"] .testimonials-slider-wrap{
overflow: hidden;
}
body[data-page="product"] .testimonials-slider{
display: grid;
grid-template-columns: repeat(auto-fill, calc(50% - 6px));
grid-auto-flow: column;
grid-auto-columns: calc(50% - 6px);
gap: 12px;
transition: transform .35s ease;
will-change: transform;
}
body[data-page="product"] .testimonial-card{
padding: 20px; background: var(--surface-1);
min-width: 0;
}
/* ── Slider nav ── */
body[data-page="product"] .slider-nav{
display: flex;
align-items: center;
gap: 8px;
}
body[data-page="product"] .slider-btn{
width: 30px; height: 30px;
border: 1px solid var(--border);
border-radius: var(--r-md);
background: #fff;
font-size: 13px;
color: var(--text-sec);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all .15s ease;
font-family: inherit;
}
body[data-page="product"] .slider-btn:hover:not(:disabled){ border-color: #bbb; color: var(--text-main); }
body[data-page="product"] .slider-btn:disabled{ opacity: .35; cursor: default; }
body[data-page="product"] .slider-counter{
font-size: 13px;
color: var(--text-meta);
min-width: 32px;
text-align: center;
}
/* ── Dots ── */
body[data-page="product"] .slider-dots{
display: flex;
justify-content: center;
gap: 6px;
margin-top: 14px;
}
body[data-page="product"] .slider-dot{
width: 6px; height: 6px;
border-radius: 50%;
background: var(--border);
cursor: pointer;
transition: all .2s ease;
border: none;
padding: 0;
}
body[data-page="product"] .slider-dot.active{
background: var(--text-main);
width: 18px;
border-radius: 3px;
}
/* ── Testimonials grid (keep for mobile fallback) ── */
body[data-page="product"] .testimonials-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body[data-page="product"] .testimonial-stars{ color: #ffc107; font-size: 13px; margin-bottom: 8px; }
body[data-page="product"] .testimonial-text{ font-size: 13px; color: var(--text-sec); line-height: 1.6; font-style: italic; margin-bottom: 12px; }
body[data-page="product"] .testimonial-author{ display: flex; align-items: center; gap: 8px; }
body[data-page="product"] .testimonial-avatar{
width: 28px; height: 28px; border-radius: 50%;
background: linear-gradient(135deg, var(--purple-from), var(--purple-to));
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0;
}
body[data-page="product"] .testimonial-name{ font-size: 13px; font-weight: 600; color: var(--text-main); }
/* ── Guarantee ── */
body[data-page="product"] .guarantee-box{
display: flex; gap: 16px; align-items: flex-start;
}
body[data-page="product"] .guarantee-title{ font-size: 15px; font-weight: 700; color: var(--text-main); margin-bottom: 4px; }
body[data-page="product"] .guarantee-text{ font-size: 14px; color: var(--text-sec); line-height: 1.6; }
/* ── FAQ ── */
body[data-page="product"] .faq-item{
border-bottom: 1px solid var(--border-light);
overflow: hidden;
}
body[data-page="product"] .faq-item:last-child{ border-bottom: none; }
body[data-page="product"] .faq-q{
display: flex; align-items: center; justify-content: space-between;
padding: 10px 0px; cursor: pointer; background: #fff;
font-size: 14px; font-weight: 500; color: var(--text-main);
transition: background .15s; user-select: none;
}
body[data-page="product"] .faq-q:hover{ background: #f9f9f9; }
body[data-page="product"] .faq-a{
padding: 0; max-height: 0; overflow: hidden;
transition: all .25s; font-size: 14px; color: var(--text-sec); line-height: 1.7;
}
body[data-page="product"] .faq-a.open{ max-height: 200px; padding: 0 0px 14px; }
body[data-page="product"] .faq-chevron{ transition: transform .2s; color: var(--text-meta); flex-shrink: 0; font-style: normal; }
body[data-page="product"] .faq-chevron.open{ transform: rotate(45deg); }
/* ── Urgency badge ── */
body[data-page="product"] .urgency-badge{
font-size: 13px; font-weight: 600;
color: #c05c00;
background: #fff4e6;
border: 1px solid #ffd8a8;
padding: 3px 10px;
border-radius: var(--r-pill);
}
/* ── Price + Save badge (home.html style — inline new+old, save badge next) ── */
body[data-page="product"] .price-row{
display: flex; align-items: baseline; gap: 10px;
margin-bottom: 12px;
}
body[data-page="product"] .price{
font-size: 24px; font-weight: 800;
letter-spacing: -.01em;
color: var(--text-main);
}
body[data-page="product"] .price .old{
font-size: 15px; color: var(--text-meta);
text-decoration: line-through;
font-weight: 500; margin-left: 6px;
}
body[data-page="product"] .save-badge{
font-size: 13px; font-weight: 700;
color: #065f46; /* darker green */
background: #d1fae5; /* light green */
padding: 3px 8px; border-radius: 100px;
}
/* Urgency as a pill (orange highlighted, sits under price) */
body[data-page="product"] .price-urgency{
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: var(--r-pill);
background: #fff4e6; color: #c05c00;
font-size: 12px; font-weight: 700; letter-spacing: .3px;
margin-bottom: 14px;
}
/* ── Buyer avatars ── */
body[data-page="product"] .buyer-avatars{
display: flex; align-items: center; gap: 10px;
margin-bottom: 16px; flex-wrap: wrap;
}
body[data-page="product"] .buyer-avatars-stack{
display: flex;
}
body[data-page="product"] .buyer-av{
width: 28px; height: 28px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 9px; font-weight: 700; color: #fff;
border: 2px solid #fff;
margin-left: -8px; flex-shrink: 0;
}
body[data-page="product"] .buyer-av:first-child{ margin-left: 0; }
body[data-page="product"] .buyer-avatars-text{
font-size: 13px; color: var(--text-meta);
}
/* ── File details + Preview ── */
body[data-page="product"] .file-details-row{
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-bottom: 20px; flex-wrap: wrap;
}
body[data-page="product"] .file-details{
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
body[data-page="product"] .file-detail-item{ font-size: 13px; color: var(--text-meta); }
body[data-page="product"] .file-detail-sep{ font-size: 13px; color: var(--border); }
body[data-page="product"] .preview-btn{
font-size: 13px; font-weight: 600;
color: var(--text-sec);
background: var(--bg-tag);
border: 1px solid var(--border-light);
padding: 5px 12px; border-radius: var(--r-pill);
text-decoration: none; white-space: nowrap;
transition: all .2s ease;
}
body[data-page="product"] .preview-btn:hover{ border-color: #bbb; color: var(--text-main); }
/* ── More from author CSS REMOVED — block deleted from page ── */
/* ── Express pay buttons ── */
body[data-page="product"] .express-btns{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 14px;
}
/* Transaction area — 2-col layout: price left, buttons right */
body[data-page="product"] .transaction-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
align-items: center;
margin-bottom: 14px;
}
body[data-page="product"] .transaction-price{
display: flex; flex-direction: column; gap: 4px;
}
body[data-page="product"] .transaction-price .price-row{ margin-bottom: 8px; }
body[data-page="product"] .transaction-price .price-urgency{ margin-bottom: 0; align-self: flex-start; }
body[data-page="product"] .transaction-buttons{
display: flex; flex-direction: column; gap: 8px;
}
body[data-page="product"] .transaction-buttons .express-btn{
width: 100%;
}
body[data-page="product"] .transaction-buttons .buy-btn{
margin-top: 0;
}
/* Mobile fallback — collapse to 1 column under 600px */
@media (max-width: 600px) {
body[data-page="product"] .transaction-grid{
grid-template-columns: 1fr;
gap: 16px;
}
}
/* ── Variant C: 1-col layout — price + inline urgency, big PURCHASE primary CTA ── */
body[data-page="product"] .price-block{
margin-bottom: 18px;
}
/* PURCHASE — bigger primary CTA */
body[data-page="product"] .buy-btn-primary{
font-size: 16px !important;
padding: 18px 24px !important;
letter-spacing: .5px !important;
margin-top: 0 !important;
}
body[data-page="product"] .express-btn{
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 11px 10px;
border-radius: var(--r-md);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all .2s ease;
font-family: inherit;
}
body[data-page="product"] .express-apple,
body[data-page="product"] .express-google{
background: #fff;
color: var(--text-main);
border: 1px solid var(--border);
}
body[data-page="product"] .express-apple:hover,
body[data-page="product"] .express-google:hover{ border-color: #bbb; background: #fafafa; }
/* ── Or divider ── */
body[data-page="product"] .or-divider{
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
body[data-page="product"] .or-line{
flex: 1;
height: 1px;
background: var(--border);
}
body[data-page="product"] .or-text{
font-size: 13px;
font-weight: 500;
color: var(--text-meta);
white-space: nowrap;
}
/* ── Buy box ── */
body[data-page="product"] .col-buy{ /* col-buy removed — buy box is now inline inside col-main */ }
body[data-page="product"] .buy-box{
background: #fff; border: 1px solid var(--border);
border-radius: var(--r-lg); padding: 24px;
margin-bottom: 16px;
}
body[data-page="product"] .buy-box-title{ font-size: 26px; font-weight: 600; letter-spacing: -0.4px; color: var(--text-main); margin-bottom: 8px; line-height: 1.25; }
body[data-page="product"] .buy-box-subline{ font-size: 14px; color: var(--text-sec); margin-bottom: 16px; line-height: 1.55; }
/* Old price-* rules — replaced by new hierarchy above */
body[data-page="product"] .buy-box-divider{ height: 1px; background: var(--border); margin: 16px 0; }
/* ── Form fields — floating label ── */
body[data-page="product"] .form-group{ margin-bottom: 10px; position: relative; }
body[data-page="product"] .form-label{
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
font-weight: 400;
color: var(--text-meta);
pointer-events: none;
transition: all .18s ease;
background: transparent;
line-height: 1;
z-index: 1;
}
/* When input has value or is focused — label floats up */
body[data-page="product"] .form-input:focus + .form-label,
body[data-page="product"] .form-input:not(:placeholder-shown) + .form-label,
body[data-page="product"] .form-input.has-value + .form-label{
top: 8px;
transform: translateY(0);
font-size: 10px;
font-weight: 600;
color: #888;
letter-spacing: 0.4px;
text-transform: uppercase;
}
body[data-page="product"] .form-input{
width: 100%;
padding: 20px 14px 7px;
border: 1px solid var(--border);
border-radius: var(--r-md);
font-size: 14px;
color: var(--text-main);
outline: none;
transition: border-color .15s;
background: #fff;
font-family: inherit;
}
body[data-page="product"] .form-input:focus{ border-color: var(--dark); }
body[data-page="product"] .form-input::placeholder{ color: transparent; }
body[data-page="product"] .card-number-wrap{ position: relative; }
body[data-page="product"] .card-number-wrap .form-label{
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
font-weight: 400;
color: var(--text-meta);
pointer-events: none;
transition: all .18s ease;
z-index: 1;
}
body[data-page="product"] .card-number-wrap .form-input:focus ~ .form-label,
body[data-page="product"] .card-number-wrap .form-input:not(:placeholder-shown) ~ .form-label,
body[data-page="product"] .card-number-wrap .form-input.has-value ~ .form-label{
top: 8px;
transform: translateY(0);
font-size: 10px;
font-weight: 600;
color: #888;
letter-spacing: 0.4px;
text-transform: uppercase;
}
body[data-page="product"] .card-badges{ position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; gap: 4px; }
body[data-page="product"] .card-badges span{ font-size: 9px; font-weight: 800; padding: 2px 5px; border-radius: 3px; }
/* total-row removed — Total: was duplicate of $27 on PURCHASE button */
body[data-page="product"] .buy-btn{
width: 100%; padding: 14px 24px;
background: linear-gradient(135deg, var(--purple-from), var(--purple-to));
border: none; border-radius: var(--r-md); font-size: 15px; font-weight: 600;
color: #fff; cursor: pointer; margin-top: 14px; letter-spacing: .02em;
transition: opacity .15s, transform .15s, box-shadow .2s; font-family: inherit;
}
body[data-page="product"] .buy-btn:hover{
opacity: .92;
box-shadow: 0 8px 20px -8px rgba(91,72,232,.5);
transform: translateY(-1px);
}
/* ── Trust line under button ── */
body[data-page="product"] .buy-trust{
display: flex; align-items: center; justify-content: center;
gap: 6px; margin-top: 14px; flex-wrap: wrap;
}
body[data-page="product"] .buy-trust-item{
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 10px;
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--r-pill);
font-size: 11px; font-weight: 600;
color: var(--text-sec);
letter-spacing: .2px;
}
body[data-page="product"] .buy-trust-item svg{
width: 12px; height: 12px;
flex-shrink: 0;
}
body[data-page="product"] .legal-note{ text-align: center; font-size: 13px; color: var(--text-meta); margin-top: 10px; }
body[data-page="product"] .legal-note a{ color: var(--text-meta); text-decoration: underline; }
/* ── Mobile sticky bottom bar (matches home.html sticky-cta style) ── */
body[data-page="product"] .sticky-cta{
display: none;
}
@media (max-width: 900px) {
body[data-page="product"] .sticky-cta{
display: block;
position: fixed;
left: 0; right: 0; bottom: 0;
width: 100%;
max-width: 100vw;
z-index: 35;
background: rgba(255,255,255,.94);
-webkit-backdrop-filter: saturate(180%) blur(14px);
backdrop-filter: saturate(180%) blur(14px);
border-top: 1px solid var(--border);
transform: translateY(100%);
transition: transform .25s cubic-bezier(.4,0,.2,1);
overflow: hidden;
}
body[data-page="product"] .sticky-cta.visible{ transform: translateY(0); }
/* Layout */
body[data-page="product"] .sc-mode{
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
padding-bottom: max(10px, env(safe-area-inset-bottom));
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
}
/* Product info — title + price */
body[data-page="product"] .sc-product .sc-info{
flex: 1 1 0;
min-width: 0;
overflow: hidden;
}
body[data-page="product"] .sc-product .sc-title{
font-size: 13px; font-weight: 600;
color: var(--text-main);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
max-width: 100%;
}
body[data-page="product"] .sc-product .sc-price{
font-size: 15px; font-weight: 800;
color: var(--text-main);
letter-spacing: -.01em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
max-width: 100%;
}
body[data-page="product"] .sc-product .sc-price .old{
font-size: 13px; color: var(--text-meta);
text-decoration: line-through;
font-weight: 500; margin-left: 4px;
}
/* CTA button */
body[data-page="product"] .sc-product .sc-btn{
background: linear-gradient(135deg, var(--purple-from), var(--purple-to));
color: white;
padding: 12px 18px;
border: none; border-radius: 10px;
font-size: 14px; font-weight: 600;
cursor: pointer;
white-space: nowrap;
display: inline-flex; align-items: center; gap: 6px;
flex-shrink: 0;
max-width: 50%;
transition: opacity .15s, transform .15s;
}
body[data-page="product"] .sc-product .sc-btn:hover{
opacity: .92;
transform: translateY(-1px);
}
}
/* ── Responsive ── */
@media (max-width: 860px) {
/* Profile — turned static via dedicated mobile drawer rule below */
body[data-page="product"] .page-wrap{ padding: 40px 20px 120px; }
body[data-page="product"] .content-grid{ grid-template-columns: 1fr; }
body[data-page="product"] .col-buy{ position: static; display: none; }
body[data-page="product"] .page-wrap{ padding-bottom: 100px; }
}
@media (max-width: 640px) {
body[data-page="product"] .page-wrap{ padding: 16px 16px 100px; }
body[data-page="product"] .breadcrumb{ margin-bottom: 16px; }
body[data-page="product"] .product-title{ font-size: 22px; }
body[data-page="product"] .product-subline{ font-size: 14px; }
body[data-page="product"] .included-grid{ grid-template-columns: 1fr; }
body[data-page="product"] .testimonials-grid{ grid-template-columns: 1fr; }
body[data-page="product"] .gallery-strip{ overflow-x: auto; padding-bottom: 4px; }
body[data-page="product"] .gallery-strip::-webkit-scrollbar{ height: 4px; }
body[data-page="product"] .gallery-strip::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 4px; }
body[data-page="product"] .rating-header{ flex-direction: column; align-items: flex-start; gap: 8px; }
body[data-page="product"] .rating-big-num{ font-size: 32px; }
body[data-page="product"] .section-divider{ margin: 28px 0 10px; }
}
@media (max-width: 400px) {
body[data-page="product"] .author-socials{ flex-wrap: wrap; }
body[data-page="product"] .meta-row{ gap: 4px; }
body[data-page="product"] .meta-badge{ font-size: 10px; padding: 3px 8px; }
}
/* ═══════════ PAGE FOOTER (ported from home.html style) ═══════════ */
body[data-page="product"] .page-footer{
width: 100%;
padding: 48px 20px 32px;
margin-top: 60px;
background: #ffffff;
text-align: center;
position: relative;
z-index: 2;
}
body[data-page="product"] .promo-block{
max-width: 480px;
margin: 0 auto 28px;
}
body[data-page="product"] .promo-title{
font-size: 24px;
font-weight: 800;
letter-spacing: -.02em;
margin-bottom: 10px;
color: var(--text);
}
body[data-page="product"] .promo-sub{
font-size: 14px;
color: var(--muted);
line-height: 1.6;
margin-bottom: 22px;
max-width: 420px;
margin-left: auto; margin-right: auto;
}
body[data-page="product"] .promo-btn{
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
background: var(--text);
color: white;
text-decoration: none;
font-weight: 600;
font-size: 15px;
border-radius: 100px;
transition: transform .15s, box-shadow .2s;
margin-bottom: 14px;
}
body[data-page="product"] .promo-btn:hover{
transform: translateY(-1px);
box-shadow: 0 10px 30px -10px rgba(15,23,42,.4);
}
body[data-page="product"] .footer-mini{
padding-top: 24px;
border-top: 1px solid var(--border);
font-size: 12px;
color: var(--muted-2);
text-align: center;
}
body[data-page="product"] .footer-mini p{ margin: 0; }
/* Creator copyright — primary identification line */
body[data-page="product"] .footer-copy{
font-size: 14px;
font-weight: 400;
color: #0A0A0B;
letter-spacing: -0.005em;
margin-bottom: 10px;
}
/* Legal links: Privacy · Cookies · Seller Terms — fine-print style */
body[data-page="product"] .footer-legal{
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
margin-top: 10px;
}
body[data-page="product"] .footer-legal a,
body[data-page="product"] .footer-cookies{
color: var(--text-faint, #A1A1AA);
text-decoration: none;
font-weight: 400;
font-size: 14px;
font-family: 'Inter', system-ui, sans-serif;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
line-height: 1;
}
body[data-page="product"] .footer-legal a:hover,
body[data-page="product"] .footer-cookies:hover{
color: #0A0A0B;
text-decoration: underline;
}
body[data-page="product"] .footer-legal a:focus-visible,
body[data-page="product"] .footer-cookies:focus-visible{
outline: 2px solid #3DDC97;
outline-offset: 2px;
border-radius: 2px;
}
body[data-page="product"] .footer-sep{
color: var(--muted-3);
user-select: none;
}
@media (max-width: 860px) {
body[data-page="product"] .page-footer{
/* Bottom padding reserves space for: sticky buy-bar (~70px) + cs-badge (~50px) */
padding: 40px 20px 140px;
margin-top: 40px;
}
body[data-page="product"] .promo-title{ font-size: 20px; }
body[data-page="product"] .promo-sub{ font-size: 13px; }
body[data-page="product"] .promo-btn{ padding: 13px 24px; font-size: 14px; }
}
/* ════════════════════════════════════════════════════════════════════
MOBILE DRAWER + FLOATING HAMBURGER MENU (ported from home.html)
════════════════════════════════════════════════════════════════════ */
/* Floating button — hidden on desktop, visible on mobile */
body[data-page="product"] .floating-menu{ display: none; }
/* Backdrop (shared with drawer) — desktop hidden */
body[data-page="product"] .backdrop{
position: fixed; inset: 0;
background: rgba(15,23,42,.45);
backdrop-filter: blur(2px);
opacity: 0; pointer-events: none;
transition: opacity .22s ease;
z-index: 50;
}
body[data-page="product"] .backdrop.open{ opacity: 1; pointer-events: auto; }
/* Drawer — slide-in from right */
body[data-page="product"] .drawer{
position: fixed; top: 0; right: 0;
width: min(320px, 88vw);
height: 100vh;
height: 100dvh; /* dynamic viewport — fixes iOS bottom cutoff */
background: white;
display: flex; flex-direction: column;
transform: translateX(100%);
transition: transform .28s cubic-bezier(.4,0,.2,1);
z-index: 60;
box-shadow: -8px 0 24px rgba(15,23,42,.1);
-webkit-backdrop-filter: saturate(180%) blur(14px);
backdrop-filter: saturate(180%) blur(14px);
overflow-y: auto; /* if content too tall — scroll inside */
}
body[data-page="product"] .drawer.open{ transform: translateX(0); }
body[data-page="product"] .drawer-head{
display: flex; align-items: center; justify-content: flex-end;
padding: 16px 20px 0;
/* No border — visual flow into author block below */
}
body[data-page="product"] .drawer-head h3{ display: none; }
/* Author intro inside drawer */
body[data-page="product"] .drawer-author{
padding: 8px 24px 20px;
text-align: center;
}
body[data-page="product"] .drawer-author-name{
font-size: 22px;
font-weight: 800;
color: var(--text);
letter-spacing: -.02em;
margin-bottom: 8px;
}
body[data-page="product"] .drawer-author-bio{
font-size: 13px;
color: var(--text-sec);
line-height: 1.5;
margin: 0 0 14px;
}
body[data-page="product"] .drawer .close-btn{
width: 36px; height: 36px;
border-radius: 50%;
background: var(--surface-1);
border: none; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
color: var(--text);
}
body[data-page="product"] .drawer .close-btn:hover{ background: var(--surface-2); }
body[data-page="product"] .drawer-nav{
flex: 1;
padding: 12px 16px;
display: flex; flex-direction: column; gap: 2px;
border-top: 1px solid var(--border);
}
body[data-page="product"] .drawer-nav a{
display: block;
padding: 14px 16px;
border-radius: var(--r-md);
text-decoration: none;
color: var(--text-sec);
font-size: 15px; font-weight: 500;
transition: background .15s, color .15s;
}
body[data-page="product"] .drawer-nav a:hover, body[data-page="product"] .drawer-nav a[aria-current="page"]{
background: var(--surface-1);
color: var(--text);
}
body[data-page="product"] .drawer-nav a[aria-current="page"]{ font-weight: 600; color: var(--purple-to); }
body[data-page="product"] .drawer-foot{
padding: 16px 20px max(24px, calc(env(safe-area-inset-bottom) + 16px));
flex-shrink: 0; /* CTA button never collapses */
}
/* Author socials inside drawer-author block */
body[data-page="product"] .drawer-socials{
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
body[data-page="product"] .drawer-social{
width: 40px; height: 40px;
border-radius: 50%;
background: var(--surface-1);
display: inline-flex;
align-items: center; justify-content: center;
transition: background .15s, transform .15s;
}
body[data-page="product"] .drawer-social:hover{
background: var(--surface-2);
transform: translateY(-1px);
}
body[data-page="product"] .drawer-social svg{
width: 18px; height: 18px;
}
/* ─── Drawer CTA · brand-aligned (matches the bottom-left badge) ─── */
body[data-page="product"] .drawer-cta{
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
border-radius: 14px;
background: #FFFFFF;
border: 1px solid #E4E4E7;
color: #0A0A0B;
text-decoration: none;
transition: transform .15s ease, border-color .15s ease;
}
body[data-page="product"] .drawer-cta:hover{
transform: translateY(-1px);
border-color: #D4D4D8;
}
body[data-page="product"] .drawer-cta:hover .drawer-cta-arrow{
transform: translateX(2px);
}
/* Brand icon — same as the badge (ink outer, mint inner stack) */
body[data-page="product"] .drawer-cta-icon{
width: 40px;
height: 40px;
border-radius: 8px;
flex-shrink: 0;
display: block;
}
/* Text block */
body[data-page="product"] .drawer-cta-text{
flex: 1;
line-height: 1.3;
display: flex;
flex-direction: column;
gap: 6px;
}
body[data-page="product"] .drawer-cta-name{
font-size: 16px;
font-weight: 700;
color: #0A0A0B;
letter-spacing: -0.01em;
}
body[data-page="product"] .drawer-cta-cta{
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #0A0A0B;
white-space: nowrap;
}
body[data-page="product"] .drawer-cta-cta b{
color: #0A0A0B;
font-weight: 600;
position: relative;
}
body[data-page="product"] .drawer-cta-cta b::after{
content: "";
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 2px;
background: #3DDC97;
border-radius: 1px;
}
/* Arrow */
body[data-page="product"] .drawer-cta-arrow{
font-family: 'Inter', system-ui, sans-serif;
font-size: 18px;
color: #0A0A0B;
flex-shrink: 0;
transition: transform .15s ease;
}
/* Body scroll lock when drawer is open */
body[data-page="product"].no-scroll{ overflow: hidden; }
/* ─── Mobile breakpoint — show floating menu, profile becomes static ─── */
@media (max-width: 860px) {
/* Floating hamburger — fixed top-right */
body[data-page="product"] .floating-menu{
display: inline-flex;
align-items: center; justify-content: center;
position: fixed;
top: max(20px, env(safe-area-inset-top));
right: max(20px, env(safe-area-inset-right));
width: 44px; height: 44px;
border-radius: 50%;
background: white;
color: var(--text);
border: none; cursor: pointer;
z-index: 45;
box-shadow: 0 2px 8px rgba(15,23,42,.08), 0 0 0 1px rgba(15,23,42,.06);
transition: background .2s, box-shadow .2s, backdrop-filter .2s;
}
/* When scrolled — stronger elevation + blur */
body[data-page="product"].scrolled .floating-menu{
background: rgba(255,255,255,.88);
-webkit-backdrop-filter: saturate(180%) blur(12px);
backdrop-filter: saturate(180%) blur(12px);
box-shadow: 0 6px 20px rgba(15,23,42,.15), 0 0 0 1px rgba(15,23,42,.08);
}
/* Hide when drawer is open */
body[data-page="product"].menu-open .floating-menu{
opacity: 0;
pointer-events: none;
}
/* Hide sticky bottom buy-bar when drawer is open (prevents overlap) */
body[data-page="product"].menu-open .sticky-cta{
display: none;
}
/* Profile — COMPACT HORIZONTAL on mobile (avatar 40px + name + role only) */
body[data-page="product"] .profile{
display: grid !important;
grid-template-columns: 40px 1fr;
grid-template-rows: auto auto;
gap: 2px 12px;
align-items: center;
position: static;
left: auto;
width: auto;
height: auto;
text-align: left;
/* Top padding respects safe-area; right padding leaves room for floating ☰ */
padding: max(20px, calc(env(safe-area-inset-top) + 16px)) 70px 12px 20px;
}
body[data-page="product"] .profile .avatar{
grid-column: 1;
grid-row: 1 / span 2;
width: 40px; height: 40px;
font-size: 17px;
margin-bottom: 0;
align-self: center;
}
/* Name — top row, role-tag — bottom row */
body[data-page="product"] .profile .name{
grid-column: 2;
grid-row: 1;
font-size: 16px;
font-weight: 700;
margin-bottom: 0;
line-height: 1.2;
align-self: end;
}
body[data-page="product"] .profile .role-tag{
grid-column: 2;
grid-row: 2;
margin-bottom: 0;
font-size: 9px;
letter-spacing: .14em;
line-height: 1.2;
align-self: start;
}
/* Hide bio + socials on mobile — both available in drawer */
body[data-page="product"] .profile .bio,
body[data-page="product"] .profile .socials{
display: none;
}
/* Hide tabs on mobile — replaced by drawer */
body[data-page="product"] .tabs{ display: none; }
}
/* ═══════════════════════════════════════════════════════════════════════════
CREATOR STORE BADGE
───────────────────────────────────────────────────────────────────────────
"Powered by Creator Store" badge — fixed bottom-left on every creator-page
(free plan). Self-contained component: brand tokens scoped via CSS variables
on .cs-badge, so the badge can be lifted into any page without touching
host variables (--purple-*, etc.).
Required HTML structure:
← stack icon (ink + mint)
Creator Store
14 Days Free · No Card
→
═══════════════════════════════════════════════════════════════════════════ */
.cs-badge{
/* Self-contained brand tokens — independent of host CSS variables */
--cs-ink: #0A0A0B;
--cs-paper: #FAFAF7;
--cs-mint: #3DDC97;
--cs-border: #E4E4E7;
--cs-tld: #A1A1AA;
position: fixed;
left: max(20px, env(safe-area-inset-left));
bottom: max(20px, env(safe-area-inset-bottom));
z-index: 50;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px 8px 8px;
background: #ebebeb;
border: none;
border-radius: 100px;
text-decoration: none;
font-family: 'Inter', system-ui, sans-serif;
line-height: 1;
/* Soft elevation — visible on any background without a colored fill */
transition: transform .18s ease, border-color .18s ease;
cursor: pointer;
will-change: transform;
}
.cs-badge:hover{
transform: translateY(-2px);
}
.cs-badge:hover .cs-badge-arrow{ transform: translateX(2px); }
.cs-badge:focus-visible{
outline: 2px solid var(--cs-mint);
outline-offset: 3px;
}
.cs-badge-icon{
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 8px;
display: block;
}
.cs-badge-name{
font-size: 13px;
font-weight: 700;
color: var(--cs-ink);
letter-spacing: -.01em;
white-space: nowrap;
}
.cs-badge-sep{
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--cs-tld);
flex-shrink: 0;
}
.cs-badge-cta{
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cs-ink);
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 6px;
}
.cs-badge-cta b{
color: var(--cs-ink);
font-weight: 600;
position: relative;
}
.cs-badge-cta b::after{
/* Mint underline under "14 DAYS FREE" — the value-prop accent */
content: "";
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 2px;
background: var(--cs-mint);
border-radius: 1px;
}
.cs-badge-arrow{
font-family: 'Inter', system-ui, sans-serif;
font-weight: 600;
font-size: 12px;
color: var(--cs-ink);
transition: transform .18s ease;
margin-left: 2px;
}
/* Mobile (≤640px): tighter sizing to fit narrow screens.
Full text "Creator Store · 14 Days Free · No Card →" stays intact. */
@media (max-width: 640px){
.cs-badge{ padding: 8px 14px 8px 8px; gap: 8px; }
.cs-badge-icon{ width: 26px; height: 26px; border-radius: 7px; }
.cs-badge-name{ font-size: 12.5px; }
.cs-badge-cta{ font-size: 9.5px; letter-spacing: 0.05em; gap: 4px; }
.cs-badge-arrow{ font-size: 11px; }
}
/* Sticky buy-bar removed — badge stays at base bottom position on all viewports */
/* Hide when drawer or modal is open — prevents UI stacking */
body.no-scroll .cs-badge,
body.terms-modal-open .cs-badge{ display: none; }
/* Hide on paid plans (server-side toggle via ) */
body[data-plan="pro"] .cs-badge,
body[data-plan="business"] .cs-badge{ display: none; }