/* ════════════════════════════════════════════════ PresentAI - Theme System Default (Indigo/SaaS) ↔ Airbnb (True Replica) Applied via data-theme="airbnb" on ════════════════════════════════════════════════ */ /* ═══════════════════════════════════ DEFAULT THEME - Indigo / BetterUp ═══════════════════════════════════ */ :root { /* Colors */ --blue:#5B4FE8;--blue-l:#EDE9FE;--blue-m:#C4B5FD;--blue-d:#4338CA; --green:#059669;--green-l:#ECFDF5; --red:#DC2626;--red-l:#FEF2F2; --amber:#D97706;--amber-l:#FFFBEB; --text:#111827;--muted:#6B7280;--border:#E5E7EB;--bg:#F9FAFB;--white:#fff; /* Shadows */ --shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04); --shadow-md:0 4px 12px rgba(0,0,0,.08); /* Shape */ --r:12px; /* Typography */ --font-head:'Plus Jakarta Sans',system-ui,sans-serif; /* Spacing */ --section-py:72px; --section-px:32px; --card-pad:24px; --gap-cards:16px; --nav-height:64px; /* Images */ --img-r:8px; --img-filter:none; /* Interaction */ --card-transition:box-shadow .18s ease, transform .18s ease; --hover-lift:translateY(-2px); --hover-shadow:0 8px 20px rgba(0,0,0,.11); /* Layout */ --layout-max:1280px; --content-max:720px; --hero-align:center; --hero-mx:auto; } /* Apply image tokens */ img, video, .thumb, .session-thumb, .avatar-img { border-radius:var(--img-r); filter:var(--img-filter); } /* ═══════════════════════════════════════════════════════════ AIRBNB THEME - True Replica Source: airbnb.com design language (2024) Manrope font, pure white surfaces, #F7F7F7 accents, #FF5A5F coral, tight functional shadows, left-aligned hero ═══════════════════════════════════════════════════════════ */ [data-theme='airbnb'] { /* ── Brand palette ── */ --blue:#FF5A5F; --blue-l:#FFF0EF; --blue-m:#FFD3D4; --blue-d:#D43B51; --green:#008489; --green-l:#E6F4F4; --red:#FF5A5F; --red-l:#FFF0EF; --amber:#FFB400; --amber-l:#FFF8E6; /* ── Surfaces - pure white + light grey, never cream ── */ --text:#222222; --muted:#717171; --border:#DDDDDD; --bg:#FFFFFF; --white:#FFFFFF; /* ── Functional shadows - precise, not dramatic ── */ --shadow:0 2px 4px rgba(0,0,0,.08); --shadow-md:0 6px 16px rgba(0,0,0,.12); /* ── Shape ── */ --r:16px; /* ── Manrope - closest to Airbnb Cereal ── */ --font-head:'Manrope',system-ui,sans-serif; /* ── Spacing - generous but not extreme ── */ --section-py:96px; --section-px:40px; --card-pad:32px; --gap-cards:24px; --nav-height:80px; /* ── Images - crystal clear, no filter ── */ --img-r:16px; --img-filter:none; /* ── Interaction - smooth, precise ── */ --card-transition:all 0.25s cubic-bezier(0.2,0.8,0.2,1); --hover-lift:translateY(-4px); --hover-shadow:0 12px 28px rgba(0,0,0,.15); /* ── Layout ── */ --layout-max:1440px; --content-max:680px; --hero-align:left; --hero-mx:0; } /* ───────────────────────────────── GLOBAL: body, typography, images ───────────────────────────────── */ [data-theme='airbnb'] body { background:#FFFFFF; font-family:'Manrope',system-ui,sans-serif; font-size:16px; line-height:1.7; color:#222222; } [data-theme='airbnb'] h1, [data-theme='airbnb'] h2, [data-theme='airbnb'] h3, [data-theme='airbnb'] .section-title, [data-theme='airbnb'] .card-title, [data-theme='airbnb'] .hero-headline, [data-theme='airbnb'] .welcome-title, [data-theme='airbnb'] .cta-title, [data-theme='airbnb'] .empty-title, [data-theme='airbnb'] .sess-title { font-family:var(--font-head); letter-spacing:-0.02em; } [data-theme='airbnb'] img, [data-theme='airbnb'] video, [data-theme='airbnb'] .thumb, [data-theme='airbnb'] .session-thumb, [data-theme='airbnb'] .avatar-img { border-radius:var(--img-r); filter:none; /* crystal clear */ } /* ───────────────────────────────── NAV backdrop-blur + pure white + tight shadow ───────────────────────────────── */ [data-theme='airbnb'] .top-nav { background:rgba(255,255,255,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid #EBEBEB; box-shadow:0 2px 8px rgba(0,0,0,.06); height:var(--nav-height); } [data-theme='airbnb'] .nav-logo { font-family:var(--font-head); font-size:20px; font-weight:800; letter-spacing:-0.04em; color:var(--blue); } [data-theme='airbnb'] .nav-tab { font-size:14px; font-weight:600; color:#484848; letter-spacing:0; } [data-theme='airbnb'] .nav-tab:hover { color:var(--blue); } [data-theme='airbnb'] .nav-tab.active { color:var(--blue); border-bottom:2px solid var(--blue); font-weight:700; } /* ───────────────────────────────── HERO - left-aligned, #F7F7F7 bg ───────────────────────────────── */ [data-theme='airbnb'] .hero-section { background:#F7F7F7; padding:var(--section-py) var(--section-px); border-bottom:none; text-align:left; } [data-theme='airbnb'] .hero-inner { text-align:left; } [data-theme='airbnb'] .hero-cta-row { justify-content:flex-start; } [data-theme='airbnb'] .trust-row { justify-content:flex-start; font-size:13px; color:#717171; } [data-theme='airbnb'] h1 { font-family:var(--font-head); font-size:clamp(40px,6vw,64px); font-weight:800; letter-spacing:-0.04em; line-height:1.1; color:#222222; } [data-theme='airbnb'] h1 .grad { background:none; -webkit-background-clip:initial; -webkit-text-fill-color:initial; background-clip:initial; color:var(--blue); } [data-theme='airbnb'] .hero-pill { background:#FFFFFF; border:1px solid #DDDDDD; color:#222222; padding:8px 16px; font-size:13px; font-weight:600; border-radius:99px; margin-bottom:32px; box-shadow:0 2px 8px rgba(0,0,0,.08); display:inline-flex; align-items:center; gap:6px; } [data-theme='airbnb'] .hero-pill-dot { background:var(--blue); } [data-theme='airbnb'] .hero-sub { font-size:18px; line-height:1.75; color:#717171; max-width:var(--content-max); margin:0 0 40px 0; font-family:var(--font-head); } /* ───────────────────────────────── BUTTONS - Airbnb: rounded rect (r:12px), NOT pills ───────────────────────────────── */ [data-theme='airbnb'] .btn-hero { background:var(--blue); border-radius:12px; padding:16px 36px; font-size:16px; font-weight:700; font-family:var(--font-head); letter-spacing:0; box-shadow:none; transition:transform 0.2s cubic-bezier(0.2,0.8,0.2,1), background-color 0.15s; } [data-theme='airbnb'] .btn-hero:hover { background:color-mix(in srgb, var(--blue), black 10%); transform:translateY(-2px) scale(1.02); box-shadow:0 4px 12px rgba(255,90,95,.30); } [data-theme='airbnb'] .btn-hero-ghost { border-radius:12px; padding:15px 32px; font-size:16px; font-weight:600; font-family:var(--font-head); border:1px solid #DDDDDD; color:#222222; background:#FFFFFF; transition:all 0.2s; } [data-theme='airbnb'] .btn-hero-ghost:hover { border-color:#222222; background:#F7F7F7; } [data-theme='airbnb'] .btn { border-radius:12px; padding:13px 28px; font-size:15px; font-weight:700; font-family:var(--font-head); transition:var(--card-transition); } [data-theme='airbnb'] .btn:hover { transform:translateY(-2px) scale(1.02); } /* ── color-mix() hover - no hardcoded hover colors needed ── */ .btn-primary:hover, .btn-hero:hover, [class*="btn"]:not(.btn-hero-ghost):not(.gate-btn-demo):hover { background-color:color-mix(in srgb, var(--blue), black 10%); } .btn-hero-ghost:hover, .gate-btn-demo:hover { border-color:#222222; color:#222222; background:#F7F7F7; } /* ───────────────────────────────── CARDS ───────────────────────────────── */ [data-theme='airbnb'] .card { background:#FFFFFF; border:1px solid #EBEBEB; border-radius:var(--r); box-shadow:var(--shadow); padding:var(--card-pad); transition:var(--card-transition); } [data-theme='airbnb'] .card:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); border-color:#DDDDDD; } [data-theme='airbnb'] .card-title { font-family:var(--font-head); font-size:18px; font-weight:700; color:#222222; } /* ───────────────────────────────── UPLOAD SECTION ───────────────────────────────── */ [data-theme='airbnb'] .upload-section { padding:var(--section-py) var(--section-px); background:#FFFFFF; } [data-theme='airbnb'] .card-header { padding:28px 32px 0; border-bottom:none; } [data-theme='airbnb'] .card-body { padding:24px 32px 32px; } [data-theme='airbnb'] .card-sub-text { font-size:14px; color:#717171; margin-top:4px; } [data-theme='airbnb'] .tab-bar { border:1px solid #EBEBEB; background:#F7F7F7; border-radius:99px; padding:4px; gap:4px; } [data-theme='airbnb'] .tab-btn { border-radius:99px; font-size:14px; font-weight:600; } [data-theme='airbnb'] .tab-btn.active { border-radius:99px; box-shadow:var(--shadow); background:#FFFFFF; font-weight:700; } [data-theme='airbnb'] .dropzone { border-radius:12px; border:2px dashed #DDDDDD; padding:72px 24px; background:#FAFAFA; transition:all 0.2s; } [data-theme='airbnb'] .dropzone:hover { border-color:var(--blue); background:#FFF0EF; } [data-theme='airbnb'] .dz-main { font-family:var(--font-head); font-size:18px; font-weight:700; color:#222222; } [data-theme='airbnb'] .dz-hint { font-size:14px; color:#717171; margin-top:6px; } [data-theme='airbnb'] .field input, [data-theme='airbnb'] .field select { border-radius:12px; border:1px solid #DDDDDD; padding:14px 16px; background:#FFFFFF; font-size:15px; font-family:var(--font-head); transition:border-color .15s; } [data-theme='airbnb'] .field input:focus, [data-theme='airbnb'] .field select:focus { border-color:#222222; outline:none; } [data-theme='airbnb'] .field label { font-size:12px; font-weight:700; letter-spacing:.03em; color:#222222; margin-bottom:8px; display:block; } [data-theme='airbnb'] .loom-url-field { border-radius:12px; border:1px solid #DDDDDD; padding:14px 16px; font-family:var(--font-head); } [data-theme='airbnb'] .ctx-grid { gap:20px; } /* ───────────────────────────────── HOW IT WORKS - White + bordered cards (NOT dark) ───────────────────────────────── */ [data-theme='airbnb'] .hiw-section { background:#FFFFFF; padding:var(--section-py) var(--section-px); border-top:1px solid #EBEBEB; border-bottom:1px solid #EBEBEB; color:#222222; } [data-theme='airbnb'] .hiw-section .section-title { color:#222222; font-size:clamp(28px,4vw,44px); font-weight:800; } [data-theme='airbnb'] .hiw-section .section-sub { color:#717171; font-size:17px; } [data-theme='airbnb'] .hiw-step { background:#FFFFFF; border:1px solid #EBEBEB; box-shadow:var(--shadow); border-radius:var(--r); padding:40px 32px; color:#222222; transition:var(--card-transition); } [data-theme='airbnb'] .hiw-step:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); border-color:#DDDDDD; } [data-theme='airbnb'] .hiw-step .step-num, [data-theme='airbnb'] .hiw-num-label { font-family:var(--font-head); font-size:40px; font-weight:800; color:var(--blue); line-height:1; margin-bottom:16px; display:block; letter-spacing:-0.04em; } [data-theme='airbnb'] .hiw-step-title { font-family:var(--font-head); font-size:18px; font-weight:700; color:#222222; margin-bottom:10px; } [data-theme='airbnb'] .hiw-step-desc { font-size:15px; line-height:1.7; color:#717171; } [data-theme='airbnb'] .section-eyebrow { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); margin-bottom:14px; } /* ───────────────────────────────── SECTION TITLE (generic) ───────────────────────────────── */ [data-theme='airbnb'] .section-title { font-family:var(--font-head); font-size:clamp(26px,4vw,40px); font-weight:800; letter-spacing:-0.03em; color:#222222; } /* ───────────────────────────────── MARKERS ───────────────────────────────── */ [data-theme='airbnb'] .markers-section { padding:var(--section-py) var(--section-px); background:#F7F7F7; } [data-theme='airbnb'] .marker-chip { background:#FFFFFF; border:1px solid #EBEBEB; border-radius:12px; box-shadow:var(--shadow); padding:20px; transition:var(--card-transition); } [data-theme='airbnb'] .marker-chip:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); border-color:#DDDDDD; } [data-theme='airbnb'] .mc-icon.visual { background:color-mix(in srgb,#FF5A5F,transparent 88%); color:#FF5A5F; border-radius:10px; } [data-theme='airbnb'] .mc-icon.prosody { background:color-mix(in srgb,#008489,transparent 88%); color:#008489; border-radius:10px; } [data-theme='airbnb'] .mc-icon.advanced { background:color-mix(in srgb,#FFB400,transparent 88%); color:#8F6600; border-radius:10px; } [data-theme='airbnb'] .mc-name { font-size:14px; font-weight:600; color:#222222; font-family:var(--font-head); } [data-theme='airbnb'] .mc-type { font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:#717171; } /* ───────────────────────────────── PROGRESS / PROCESSING ───────────────────────────────── */ [data-theme='airbnb'] .prog-card { background:#FFFFFF; border:1px solid #EBEBEB; border-radius:var(--r); box-shadow:var(--shadow-md); padding:var(--card-pad); } [data-theme='airbnb'] .step { border-radius:10px; padding:12px 16px; } [data-theme='airbnb'] .err-box { border-radius:10px; } /* ───────────────────────────────── GATE / PAYMENT CARD ───────────────────────────────── */ [data-theme='airbnb'] .gate-card { background:#FFFFFF; border:1px solid #EBEBEB; border-radius:var(--r); box-shadow:var(--shadow-md); padding:var(--card-pad); } [data-theme='airbnb'] .gate-btn-primary { border-radius:12px; font-family:var(--font-head); font-weight:700; padding:16px 32px; } [data-theme='airbnb'] .gate-btn-demo { border-radius:12px; border:1px solid #DDDDDD; color:#222222; background:#FFFFFF; font-weight:600; } [data-theme='airbnb'] .gate-btn { border-radius:12px; } [data-theme='airbnb'] .gate-input { border-radius:12px; border:1px solid #DDDDDD; padding:14px 16px; background:#FFFFFF; font-family:var(--font-head); } /* ═══════════════════════════════════ AIRBNB THEME - DASHBOARD ═══════════════════════════════════ */ [data-theme='airbnb'] .dash-body, [data-theme='airbnb'] .dash-page { background:#FFFFFF; } /* Welcome hero - light grey, functional */ [data-theme='airbnb'] .welcome-hero { background:#F7F7F7; border:1px solid #EBEBEB; border-radius:var(--r); padding:40px 40px; box-shadow:none; color:#222222; } [data-theme='airbnb'] .welcome-hero h2, [data-theme='airbnb'] .welcome-hero .welcome-title { font-family:var(--font-head); font-size:clamp(24px,3vw,34px); font-weight:800; letter-spacing:-0.03em; color:#222222; } [data-theme='airbnb'] .welcome-hero .welcome-hero-sub, [data-theme='airbnb'] .welcome-hero .welcome-hero-meta { color:#717171; } [data-theme='airbnb'] .welcome-cta { background:var(--blue); color:#FFFFFF; border-radius:12px; padding:12px 24px; font-size:14px; font-weight:700; font-family:var(--font-head); border:none; transition:var(--card-transition); } [data-theme='airbnb'] .welcome-cta:hover { background:color-mix(in srgb,var(--blue),black 10%); transform:translateY(-2px) scale(1.02); } /* Stat cards */ [data-theme='airbnb'] .stat-card { background:#FFFFFF; border:1px solid #EBEBEB; border-radius:var(--r); box-shadow:var(--shadow); padding:28px 24px; transition:var(--card-transition); } [data-theme='airbnb'] .stat-card:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); border-color:#DDDDDD; } [data-theme='airbnb'] .stat-n, [data-theme='airbnb'] .stat-card .stat-value { font-family:var(--font-head); font-size:40px; font-weight:800; letter-spacing:-0.04em; color:#222222; line-height:1; } [data-theme='airbnb'] .stat-l, [data-theme='airbnb'] .stat-card .stat-label { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#717171; margin-top:6px; } [data-theme='airbnb'] .stat-icon { border-radius:12px; } /* Session cards */ [data-theme='airbnb'] .sessions-grid { gap:var(--gap-cards); } [data-theme='airbnb'] .sess-card { background:#FFFFFF; border:1px solid #EBEBEB; border-left:none; border-radius:var(--r); box-shadow:var(--shadow); padding:var(--card-pad); position:relative; overflow:hidden; transition:var(--card-transition); } [data-theme='airbnb'] .sess-card:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); border-color:#DDDDDD; } /* Subtle top accent on hover */ [data-theme='airbnb'] .sess-card::before { content:''; position:absolute; top:0;left:0;right:0; height:2px; background:var(--blue); opacity:0; transition:opacity .2s; } [data-theme='airbnb'] .sess-card:hover::before { opacity:1; } [data-theme='airbnb'] .sess-num { font-family:var(--font-head); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); } [data-theme='airbnb'] .sess-topic { font-family:var(--font-head); font-size:17px; font-weight:700; letter-spacing:-0.02em; color:#222222; line-height:1.3; margin-top:6px; } [data-theme='airbnb'] .sess-date { font-size:13px; color:#717171; font-weight:500; } [data-theme='airbnb'] .status-pill { border-radius:99px; font-size:11px; font-weight:700; letter-spacing:.03em; padding:4px 12px; } [data-theme='airbnb'] .score-chip { font-family:var(--font-head); font-size:20px; font-weight:800; letter-spacing:-0.03em; color:#222222; } /* Chart + Marker cards */ [data-theme='airbnb'] .chart-card { background:#FFFFFF; border:1px solid #EBEBEB; border-radius:var(--r); box-shadow:var(--shadow); padding:var(--card-pad); transition:var(--card-transition); } [data-theme='airbnb'] .chart-card:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); border-color:#DDDDDD; } [data-theme='airbnb'] .chart-card h3, [data-theme='airbnb'] .chart-card .card-title { font-family:var(--font-head); font-size:18px; font-weight:700; color:#222222; } [data-theme='airbnb'] .marker-card { background:#FFFFFF; border:1px solid #EBEBEB; border-radius:var(--r); box-shadow:var(--shadow); transition:var(--card-transition); } [data-theme='airbnb'] .marker-card:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); border-color:#DDDDDD; } [data-theme='airbnb'] .improvement-banner { background:var(--blue-l); border:1px solid var(--blue-m); border-radius:12px; } /* CTA card - dark #222222, editorial contrast */ [data-theme='airbnb'] .cta-card { background:#222222; border-radius:var(--r); padding:64px; box-shadow:none; border:none; } [data-theme='airbnb'] .cta-card h2, [data-theme='airbnb'] .cta-card .cta-title { font-family:var(--font-head); font-size:clamp(24px,3.5vw,38px); letter-spacing:-0.03em; font-weight:800; color:#FFFFFF; } [data-theme='airbnb'] .cta-card p, [data-theme='airbnb'] .cta-card .cta-sub { color:#B0B0B0; } [data-theme='airbnb'] .cta-btn { background:var(--blue); border-radius:12px; font-weight:700; font-size:15px; font-family:var(--font-head); padding:14px 32px; box-shadow:none; border:none; transition:var(--card-transition); } [data-theme='airbnb'] .cta-btn:hover { background:color-mix(in srgb,var(--blue),black 10%); transform:translateY(-2px) scale(1.02); } /* Empty state */ [data-theme='airbnb'] .empty-state-card { background:#FFFFFF; border:1px solid #EBEBEB; border-radius:var(--r); box-shadow:var(--shadow-md); padding:64px 40px; } [data-theme='airbnb'] .empty-state-card h2, [data-theme='airbnb'] .empty-state-card .empty-title { font-family:var(--font-head); font-size:26px; font-weight:800; letter-spacing:-0.03em; color:#222222; } [data-theme='airbnb'] .empty-state-btn { border-radius:12px; padding:14px 32px; font-weight:700; font-family:var(--font-head); } /* Sidebar */ [data-theme='airbnb'] .sidebar { background:#FFFFFF; border-right:1px solid #EBEBEB; } [data-theme='airbnb'] .sidebar .logo-text { font-family:var(--font-head); color:var(--blue); font-size:20px; font-weight:800; } [data-theme='airbnb'] .sidebar-link { border-radius:10px; font-size:14px; font-weight:500; color:#484848; font-family:var(--font-head); transition:all .15s; } [data-theme='airbnb'] .sidebar-link:hover, [data-theme='airbnb'] .sidebar-link.active { background:var(--blue-l); color:var(--blue); font-weight:700; } /* ═══════════════════════════════════ AIRBNB THEME - REPORT PAGE ═══════════════════════════════════ */ [data-theme='airbnb'] .report-body, [data-theme='airbnb'] .report-page { background:#FFFFFF; } [data-theme='airbnb'] .report-nav, [data-theme='airbnb'] .rep-nav { background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border-bottom:1px solid #EBEBEB; box-shadow:0 2px 8px rgba(0,0,0,.06); } [data-theme='airbnb'] .sec-title { font-family:var(--font-head); font-size:clamp(20px,2.5vw,26px); font-weight:800; letter-spacing:-0.03em; color:#222222; margin-bottom:16px; } [data-theme='airbnb'] .stat-pill { border-radius:99px; font-weight:700; font-size:13px; padding:6px 16px; background:#FFFFFF; border:1px solid #EBEBEB; box-shadow:var(--shadow); color:#222222; font-family:var(--font-head); } [data-theme='airbnb'] .stats-row { gap:10px; } /* All analysis cards */ [data-theme='airbnb'] .arc-card, [data-theme='airbnb'] .b60-card, [data-theme='airbnb'] .filler-card, [data-theme='airbnb'] .sent-card, [data-theme='airbnb'] .ch-card, [data-theme='airbnb'] .topic-card, [data-theme='airbnb'] .bs-card, [data-theme='airbnb'] .strength-card, [data-theme='airbnb'] .closing-card, [data-theme='airbnb'] .priority-section { background:#FFFFFF; border:1px solid #EBEBEB; border-radius:var(--r); box-shadow:var(--shadow); transition:var(--card-transition); } [data-theme='airbnb'] .arc-card:hover, [data-theme='airbnb'] .b60-card:hover, [data-theme='airbnb'] .filler-card:hover, [data-theme='airbnb'] .sent-card:hover, [data-theme='airbnb'] .ch-card:hover, [data-theme='airbnb'] .topic-card:hover, [data-theme='airbnb'] .bs-card:hover, [data-theme='airbnb'] .strength-card:hover, [data-theme='airbnb'] .closing-card:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); border-color:#DDDDDD; } /* Pause quality */ [data-theme='airbnb'] .pq-cell { border-radius:10px; padding:18px 14px; background:#F7F7F7; border:none; } [data-theme='airbnb'] .pq-count { font-family:var(--font-head); font-size:32px; font-weight:800; letter-spacing:-0.04em; color:#222222; } [data-theme='airbnb'] .pq-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#717171; margin-top:4px; } /* Best 60s */ [data-theme='airbnb'] .b60-badge { border-radius:99px; font-size:11px; font-weight:700; background:var(--blue-l); color:var(--blue); border:none; padding:4px 12px; } [data-theme='airbnb'] .b60-head { font-family:var(--font-head); font-size:17px; font-weight:700; letter-spacing:-0.02em; color:#222222; } [data-theme='airbnb'] .b60-time { font-family:var(--font-head); font-size:26px; font-weight:800; letter-spacing:-0.04em; color:var(--blue); } /* Filler chips */ [data-theme='airbnb'] .filler-chip { border-radius:99px; font-size:13px; font-weight:600; padding:5px 14px; background:#F7F7F7; border:1px solid #EBEBEB; color:#222222; font-family:var(--font-head); } /* Sentiment */ [data-theme='airbnb'] .sent-bar { border-radius:99px; overflow:hidden; } /* Chapters */ [data-theme='airbnb'] .ch-item { padding:14px 0; border-bottom:1px solid #F2F2F2; } [data-theme='airbnb'] .ch-item:last-child { border-bottom:none; } [data-theme='airbnb'] .ch-time { font-family:var(--font-head); font-weight:700; color:var(--blue); font-size:13px; } [data-theme='airbnb'] .ch-headline { font-size:15px; font-weight:600; color:#222222; font-family:var(--font-head); } /* Topics */ [data-theme='airbnb'] .topic-pill { border-radius:99px; font-size:13px; font-weight:600; padding:6px 16px; background:#F7F7F7; border:1px solid #EBEBEB; color:#222222; font-family:var(--font-head); } /* Blind spots */ [data-theme='airbnb'] .bs-grid { gap:var(--gap-cards); } [data-theme='airbnb'] .bs-card { padding:24px; } /* Strengths */ [data-theme='airbnb'] .strength-item { padding:14px 0; border-bottom:1px solid #F2F2F2; } [data-theme='airbnb'] .strength-item:last-child { border-bottom:none; } /* Priority */ [data-theme='airbnb'] .priority-section { padding:28px; } [data-theme='airbnb'] .priority-section-title { font-family:var(--font-head); font-size:18px; font-weight:700; letter-spacing:-0.02em; color:#222222; } /* Drill card - WHITE with dark text (not dark bg) */ [data-theme='airbnb'] .drill-card { background:#FFFFFF; border:1px solid #EBEBEB; border-radius:var(--r); box-shadow:var(--shadow); padding:32px; color:#222222; transition:var(--card-transition); } [data-theme='airbnb'] .drill-card:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); border-color:#DDDDDD; } [data-theme='airbnb'] .drill-head { font-family:var(--font-head); font-size:20px; font-weight:700; letter-spacing:-0.025em; color:#222222; } [data-theme='airbnb'] .drill-badge { border-radius:99px; background:var(--blue); color:#FFFFFF; font-size:11px; font-weight:700; letter-spacing:.04em; padding:4px 12px; border:none; } /* Closing / coach */ [data-theme='airbnb'] .closing-card { padding:32px; } [data-theme='airbnb'] .cl-av { width:52px; height:52px; border-radius:50%; filter:none; } [data-theme='airbnb'] .cl-name { font-family:var(--font-head); font-size:15px; font-weight:700; letter-spacing:-0.01em; color:#222222; } /* CTA row */ [data-theme='airbnb'] .cta-row { gap:12px; } /* Limitation box */ [data-theme='airbnb'] .limitation-box { background:#F7F7F7; border:1px solid #DDDDDD; border-radius:10px; box-shadow:none; padding:16px 20px; font-size:13px; color:#717171; } /* ═══════════════════════════════════════ LAYOUT GRID VARIABLES ═══════════════════════════════════════ */ :root { --layout-max:1280px; --content-max:720px; --hero-align:center; --hero-mx:auto; } [data-theme='airbnb'] { --layout-max:1440px; --content-max:680px; --hero-align:left; --hero-mx:0; } .page-wrap,.hero-inner,.upload-inner,.hiw-inner,.markers-inner,.dash-inner { max-width:var(--layout-max); margin-left:auto; margin-right:auto; } .hero-sub, .hero-headline + p { max-width:var(--content-max); text-align:var(--hero-align); margin-left:var(--hero-mx); } [data-theme='airbnb'] .hero-inner, [data-theme='airbnb'] .hero-cta-row, [data-theme='airbnb'] .trust-row { text-align:left; align-items:flex-start; } /* ═══════════════════════════════════════════════════════════ HEADSPACE THEME - Joyful Replica Nunito font, warm pastel surfaces, bouncy animations, orange #F87006 brand, zero hard borders, pill everything ═══════════════════════════════════════════════════════════ */ [data-theme='headspace'] { /* Brand */ --blue:#F87006; --blue-l:#FFF7F0; --blue-m:#FED7B0; --blue-d:#D85F00; --green:#4CAF82; --green-l:#E8F6EE; --red:#E05C5C; --red-l:#FDEAEA; --amber:#F87006; --amber-l:#FFF7F0; /* Surfaces - warm off-white, zero harsh whites */ --text:#413D45; --muted:#656269; --border:transparent; --bg:#FFFDF7; --white:#FFFFFF; /* Soft lifted shadows, tinted with brand */ --shadow:0 4px 12px rgba(65,61,69,.05); --shadow-md:0 12px 32px rgba(65,61,69,.08); /* Very round */ --r:24px; /* Nunito - closest to Headspace Aperçu */ --font-head:'Nunito',system-ui,sans-serif; /* Comfortable, generous */ --section-py:96px; --section-px:24px; --card-pad:32px; --gap-cards:24px; --nav-height:76px; /* Images clean */ --img-r:24px; --img-filter:none; /* Bouncy spring physics */ --card-transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1); --hover-lift:translateY(-6px) scale(1.02); --hover-shadow:0 20px 48px rgba(65,61,69,.12); /* Layout */ --layout-max:1280px; --content-max:640px; --hero-align:center; --hero-mx:auto; } /* ── Global ── */ [data-theme='headspace'] body { background:#FFFDF7; font-family:'Nunito',system-ui,sans-serif; font-size:16px; line-height:1.75; color:#413D45; } [data-theme='headspace'] h1, [data-theme='headspace'] h2, [data-theme='headspace'] h3, [data-theme='headspace'] .section-title, [data-theme='headspace'] .card-title, [data-theme='headspace'] .hero-headline, [data-theme='headspace'] .welcome-title, [data-theme='headspace'] .cta-title, [data-theme='headspace'] .empty-title, [data-theme='headspace'] .sess-title { font-family:var(--font-head); letter-spacing:-0.02em; color:#413D45; } [data-theme='headspace'] img, [data-theme='headspace'] video, [data-theme='headspace'] .thumb, [data-theme='headspace'] .session-thumb, [data-theme='headspace'] .avatar-img { border-radius:var(--img-r); filter:none; } /* ── NAV - borderless, warm off-white ── */ [data-theme='headspace'] .top-nav { background:#FFFDF7; border-bottom:none; box-shadow:none; height:var(--nav-height); } [data-theme='headspace'] .nav-logo { font-family:var(--font-head); font-size:22px; font-weight:800; letter-spacing:-0.03em; color:var(--blue); } [data-theme='headspace'] .nav-tab { font-size:14px; font-weight:700; color:#656269; } [data-theme='headspace'] .nav-tab:hover { color:var(--blue); } [data-theme='headspace'] .nav-tab.active { color:var(--blue); border-bottom:2px solid var(--blue); font-weight:800; } /* ── HERO - centered, soft blue calm ── */ [data-theme='headspace'] .hero-section { background:#EBF1F4; padding:var(--section-py) var(--section-px); border-bottom:none; text-align:center; } [data-theme='headspace'] .hero-inner { text-align:center; } [data-theme='headspace'] .hero-cta-row { justify-content:center; } [data-theme='headspace'] .trust-row { justify-content:center; font-size:13px; color:#656269; } [data-theme='headspace'] h1 { font-family:var(--font-head); font-size:clamp(36px,5vw,56px); font-weight:800; letter-spacing:-0.02em; line-height:1.15; color:#413D45; } [data-theme='headspace'] h1 .grad { background:none; -webkit-background-clip:initial; -webkit-text-fill-color:initial; background-clip:initial; color:var(--blue); } [data-theme='headspace'] .hero-pill { background:rgba(248,112,6,.12); border:none; color:var(--blue); padding:8px 20px; font-size:13px; font-weight:700; border-radius:999px; margin-bottom:32px; display:inline-flex; align-items:center; gap:6px; } [data-theme='headspace'] .hero-pill-dot { background:var(--blue); } [data-theme='headspace'] .hero-sub { font-size:18px; line-height:1.8; color:#656269; max-width:var(--content-max); margin:0 auto 40px; font-family:var(--font-head); } /* ── BUTTONS - full pill, bouncy ── */ [data-theme='headspace'] .btn-hero { background:var(--blue); border-radius:999px; padding:16px 40px; font-size:16px; font-weight:800; font-family:var(--font-head); box-shadow:0 6px 16px rgba(248,112,6,.25); transition:var(--card-transition); border:none; } [data-theme='headspace'] .btn-hero:hover { background:color-mix(in srgb,var(--blue),black 8%); transform:translateY(-3px) scale(1.04); box-shadow:0 12px 28px rgba(248,112,6,.35); } [data-theme='headspace'] .btn-hero-ghost { border-radius:999px; padding:15px 36px; font-size:16px; font-weight:700; font-family:var(--font-head); border:2px solid var(--blue); color:var(--blue); background:transparent; transition:var(--card-transition); } [data-theme='headspace'] .btn-hero-ghost:hover { background:var(--blue-l); transform:translateY(-2px) scale(1.03); } [data-theme='headspace'] .btn { border-radius:999px; padding:13px 28px; font-size:15px; font-weight:700; font-family:var(--font-head); transition:var(--card-transition); } [data-theme='headspace'] .btn:hover { transform:translateY(-3px) scale(1.04); } /* ── CARDS - borderless, shadow-only separation ── */ [data-theme='headspace'] .card { background:#FFFFFF; border:none; border-radius:var(--r); box-shadow:var(--shadow-md); padding:var(--card-pad); transition:var(--card-transition); } [data-theme='headspace'] .card:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); } [data-theme='headspace'] .card-title { font-family:var(--font-head); font-size:18px; font-weight:800; color:#413D45; } /* ── UPLOAD SECTION ── */ [data-theme='headspace'] .upload-section { padding:var(--section-py) var(--section-px); background:#FFFDF7; } [data-theme='headspace'] .card-header { padding:28px 32px 0; border-bottom:none; } [data-theme='headspace'] .card-body { padding:24px 32px 36px; } [data-theme='headspace'] .card-sub-text { font-size:14px; color:#656269; margin-top:4px; } [data-theme='headspace'] .tab-bar { border:none; background:#F0EDE8; border-radius:999px; padding:4px; gap:4px; } [data-theme='headspace'] .tab-btn { border-radius:999px; font-size:14px; font-weight:700; font-family:var(--font-head); } [data-theme='headspace'] .tab-btn.active { border-radius:999px; box-shadow:var(--shadow); background:#FFFFFF; font-weight:800; } [data-theme='headspace'] .dropzone { border-radius:20px; border:2.5px dashed var(--blue-m); padding:72px 24px; background:#FFFDF7; transition:var(--card-transition); } [data-theme='headspace'] .dropzone:hover { border-color:var(--blue); background:var(--blue-l); transform:scale(1.01); } [data-theme='headspace'] .dz-main { font-family:var(--font-head); font-size:18px; font-weight:800; color:#413D45; } [data-theme='headspace'] .dz-hint { font-size:14px; color:#656269; margin-top:6px; } [data-theme='headspace'] .field input, [data-theme='headspace'] .field select { border-radius:16px; border:none; padding:14px 16px; background:#F5F3EE; font-size:15px; font-family:var(--font-head); color:#413D45; transition:all .2s; } [data-theme='headspace'] .field input:focus, [data-theme='headspace'] .field select:focus { background:#FFFFFF; box-shadow:0 0 0 2px var(--blue); outline:none; } [data-theme='headspace'] .field label { font-size:12px; font-weight:800; letter-spacing:.04em; color:#413D45; margin-bottom:8px; display:block; text-transform:uppercase; } [data-theme='headspace'] .loom-url-field { border-radius:16px; border:none; padding:14px 16px; background:#F5F3EE; font-family:var(--font-head); } [data-theme='headspace'] .ctx-grid { gap:20px; } /* ── HOW IT WORKS - soft sage green, borderless cards ── */ [data-theme='headspace'] .hiw-section { background:#F2F4EB; padding:var(--section-py) var(--section-px); border:none; color:#413D45; } [data-theme='headspace'] .hiw-section .section-title { color:#413D45; font-size:clamp(28px,4vw,42px); font-weight:800; } [data-theme='headspace'] .hiw-section .section-sub { color:#656269; font-size:17px; } [data-theme='headspace'] .hiw-step { background:#FFFFFF; border:none; box-shadow:var(--shadow); border-radius:var(--r); padding:32px; color:#413D45; transition:var(--card-transition); } [data-theme='headspace'] .hiw-step:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); } [data-theme='headspace'] .hiw-step .step-num, [data-theme='headspace'] .hiw-num-label { font-family:var(--font-head); font-size:32px; font-weight:800; color:var(--blue); line-height:1; margin-bottom:14px; display:block; letter-spacing:-0.02em; } [data-theme='headspace'] .hiw-step-title { font-family:var(--font-head); font-size:17px; font-weight:800; color:#413D45; margin-bottom:10px; } [data-theme='headspace'] .hiw-step-desc { font-size:15px; line-height:1.7; color:#656269; } [data-theme='headspace'] .section-eyebrow { font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); margin-bottom:14px; } /* ── SECTION TITLE ── */ [data-theme='headspace'] .section-title { font-family:var(--font-head); font-size:clamp(26px,4vw,40px); font-weight:800; letter-spacing:-0.02em; color:#413D45; } /* ── MARKERS ── */ [data-theme='headspace'] .markers-section { padding:var(--section-py) var(--section-px); background:#FFFDF7; } [data-theme='headspace'] .marker-chip { background:#FFFFFF; border:none; border-radius:20px; box-shadow:var(--shadow); padding:20px; transition:var(--card-transition); } [data-theme='headspace'] .marker-chip:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); } [data-theme='headspace'] .mc-icon.visual { background:color-mix(in srgb,#F87006,transparent 85%); color:#F87006; border-radius:12px; } [data-theme='headspace'] .mc-icon.prosody { background:color-mix(in srgb,#4CAF82,transparent 85%); color:#2E8A5F; border-radius:12px; } [data-theme='headspace'] .mc-icon.advanced { background:color-mix(in srgb,#7B87D4,transparent 85%); color:#4A56B0; border-radius:12px; } [data-theme='headspace'] .mc-name { font-size:14px; font-weight:700; color:#413D45; font-family:var(--font-head); } [data-theme='headspace'] .mc-type { font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:#656269; } /* ── PROGRESS / PROCESSING ── */ [data-theme='headspace'] .prog-card { background:#FFFFFF; border:none; border-radius:var(--r); box-shadow:var(--shadow-md); padding:var(--card-pad); } [data-theme='headspace'] .step { border-radius:16px; padding:12px 16px; } [data-theme='headspace'] .err-box { border-radius:16px; } /* ── GATE / PAYMENT ── */ [data-theme='headspace'] .gate-card { background:#FFFFFF; border:none; border-radius:var(--r); box-shadow:var(--shadow-md); padding:var(--card-pad); } [data-theme='headspace'] .gate-btn-primary { border-radius:999px; font-family:var(--font-head); font-weight:800; padding:16px 36px; box-shadow:0 6px 16px rgba(248,112,6,.25); } [data-theme='headspace'] .gate-btn-demo { border-radius:999px; border:2px solid var(--blue); color:var(--blue); background:transparent; font-weight:700; } [data-theme='headspace'] .gate-btn { border-radius:999px; } [data-theme='headspace'] .gate-input { border-radius:16px; border:none; padding:14px 16px; background:#F5F3EE; font-family:var(--font-head); } /* ═══════════════════════════ HEADSPACE - DASHBOARD ═══════════════════════════ */ [data-theme='headspace'] .dash-body, [data-theme='headspace'] .dash-page { background:#FFFDF7; } /* Welcome hero - warm off-white, no gradient */ [data-theme='headspace'] .welcome-hero { background:#FFFDF7; border:none; border-radius:var(--r); padding:44px; box-shadow:var(--shadow-md); color:#413D45; } [data-theme='headspace'] .welcome-hero h2, [data-theme='headspace'] .welcome-hero .welcome-title { font-family:var(--font-head); font-size:clamp(24px,3vw,32px); font-weight:800; letter-spacing:-0.02em; color:#413D45; } [data-theme='headspace'] .welcome-hero .welcome-hero-sub, [data-theme='headspace'] .welcome-hero .welcome-hero-meta { color:#656269; } [data-theme='headspace'] .welcome-cta { background:var(--blue); color:#FFFFFF; border-radius:999px; padding:12px 28px; font-size:14px; font-weight:800; font-family:var(--font-head); border:none; box-shadow:0 6px 16px rgba(248,112,6,.25); transition:var(--card-transition); } [data-theme='headspace'] .welcome-cta:hover { background:color-mix(in srgb,var(--blue),black 8%); transform:translateY(-2px) scale(1.04); } /* Stat cards */ [data-theme='headspace'] .stat-card { background:#FFFFFF; border:none; border-radius:var(--r); box-shadow:var(--shadow-md); padding:28px 24px; transition:var(--card-transition); } [data-theme='headspace'] .stat-card:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); } [data-theme='headspace'] .stat-n, [data-theme='headspace'] .stat-card .stat-value { font-family:var(--font-head); font-size:36px; font-weight:800; letter-spacing:-0.03em; color:#413D45; line-height:1; } [data-theme='headspace'] .stat-l, [data-theme='headspace'] .stat-card .stat-label { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#656269; margin-top:6px; } [data-theme='headspace'] .stat-icon { border-radius:16px; } /* Session cards */ [data-theme='headspace'] .sessions-grid { gap:var(--gap-cards); } [data-theme='headspace'] .sess-card { background:#FFFFFF; border:none; border-left:none; border-radius:var(--r); box-shadow:var(--shadow); padding:var(--card-pad); transition:var(--card-transition); } [data-theme='headspace'] .sess-card:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); } [data-theme='headspace'] .sess-num { font-family:var(--font-head); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); } [data-theme='headspace'] .sess-topic { font-family:var(--font-head); font-size:17px; font-weight:800; letter-spacing:-0.02em; color:#413D45; line-height:1.3; margin-top:6px; } [data-theme='headspace'] .sess-date { font-size:13px; color:#656269; font-weight:600; } [data-theme='headspace'] .status-pill { border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.03em; padding:4px 14px; } [data-theme='headspace'] .score-chip { font-family:var(--font-head); font-size:20px; font-weight:800; letter-spacing:-0.03em; color:var(--blue); } /* Chart + Marker cards */ [data-theme='headspace'] .chart-card { background:#FFFFFF; border:none; border-radius:var(--r); box-shadow:var(--shadow-md); padding:var(--card-pad); transition:var(--card-transition); } [data-theme='headspace'] .chart-card:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); } [data-theme='headspace'] .chart-card h3, [data-theme='headspace'] .chart-card .card-title { font-family:var(--font-head); font-size:18px; font-weight:800; color:#413D45; } [data-theme='headspace'] .marker-card { background:#FFFFFF; border:none; border-radius:var(--r); box-shadow:var(--shadow); transition:var(--card-transition); } [data-theme='headspace'] .marker-card:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); } [data-theme='headspace'] .improvement-banner { background:var(--blue-l); border:none; border-radius:16px; } /* CTA card - warm orange, brand moment */ [data-theme='headspace'] .cta-card { background:var(--blue); border-radius:var(--r); padding:56px; box-shadow:0 20px 48px rgba(248,112,6,.25); border:none; } [data-theme='headspace'] .cta-card h2, [data-theme='headspace'] .cta-card .cta-title { font-family:var(--font-head); font-size:clamp(24px,3.5vw,36px); letter-spacing:-0.02em; font-weight:800; color:#FFFFFF; } [data-theme='headspace'] .cta-card p, [data-theme='headspace'] .cta-card .cta-sub { color:rgba(255,255,255,.90); } [data-theme='headspace'] .cta-btn { background:#FFFFFF; color:var(--blue); border-radius:999px; font-weight:800; font-size:15px; font-family:var(--font-head); padding:14px 36px; border:none; box-shadow:0 4px 16px rgba(0,0,0,.12); transition:var(--card-transition); } [data-theme='headspace'] .cta-btn:hover { transform:translateY(-3px) scale(1.04); box-shadow:0 10px 28px rgba(0,0,0,.18); } /* Empty state */ [data-theme='headspace'] .empty-state-card { background:#FFFFFF; border:none; border-radius:var(--r); box-shadow:var(--shadow-md); padding:64px 40px; } [data-theme='headspace'] .empty-state-card h2, [data-theme='headspace'] .empty-state-card .empty-title { font-family:var(--font-head); font-size:26px; font-weight:800; letter-spacing:-0.02em; color:#413D45; } [data-theme='headspace'] .empty-state-btn { border-radius:999px; padding:14px 36px; font-weight:800; font-family:var(--font-head); } /* Sidebar */ [data-theme='headspace'] .sidebar { background:#FFFDF7; border-right:none; box-shadow:var(--shadow); } [data-theme='headspace'] .sidebar .logo-text { font-family:var(--font-head); color:var(--blue); font-size:20px; font-weight:800; } [data-theme='headspace'] .sidebar-link { border-radius:16px; font-size:14px; font-weight:600; color:#656269; font-family:var(--font-head); transition:all .2s; } [data-theme='headspace'] .sidebar-link:hover, [data-theme='headspace'] .sidebar-link.active { background:var(--blue-l); color:var(--blue); font-weight:800; } /* ═══════════════════════════ HEADSPACE - REPORT PAGE ═══════════════════════════ */ [data-theme='headspace'] .report-body, [data-theme='headspace'] .report-page { background:#FFFDF7; } [data-theme='headspace'] .report-nav, [data-theme='headspace'] .rep-nav { background:#FFFDF7; border-bottom:none; box-shadow:none; } [data-theme='headspace'] .sec-title { font-family:var(--font-head); font-size:clamp(20px,2.5vw,26px); font-weight:800; letter-spacing:-0.02em; color:#413D45; margin-bottom:16px; } [data-theme='headspace'] .stat-pill { border-radius:999px; font-weight:700; font-size:13px; padding:6px 18px; background:#FFFFFF; border:none; box-shadow:var(--shadow); color:#413D45; font-family:var(--font-head); } [data-theme='headspace'] .stats-row { gap:10px; } /* All analysis cards - borderless white on warm off-white */ [data-theme='headspace'] .arc-card, [data-theme='headspace'] .b60-card, [data-theme='headspace'] .filler-card, [data-theme='headspace'] .sent-card, [data-theme='headspace'] .ch-card, [data-theme='headspace'] .topic-card, [data-theme='headspace'] .bs-card, [data-theme='headspace'] .strength-card, [data-theme='headspace'] .closing-card, [data-theme='headspace'] .drill-card, [data-theme='headspace'] .priority-section { background:#FFFFFF; border:none; border-radius:var(--r); box-shadow:var(--shadow); transition:var(--card-transition); } [data-theme='headspace'] .arc-card:hover, [data-theme='headspace'] .b60-card:hover, [data-theme='headspace'] .filler-card:hover, [data-theme='headspace'] .sent-card:hover, [data-theme='headspace'] .ch-card:hover, [data-theme='headspace'] .topic-card:hover, [data-theme='headspace'] .bs-card:hover, [data-theme='headspace'] .strength-card:hover, [data-theme='headspace'] .closing-card:hover, [data-theme='headspace'] .drill-card:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); } /* Pause quality */ [data-theme='headspace'] .pq-cell { border-radius:16px; padding:20px; background:#F5F3EE; border:none; } [data-theme='headspace'] .pq-count { font-family:var(--font-head); font-size:32px; font-weight:800; letter-spacing:-0.03em; color:#413D45; } [data-theme='headspace'] .pq-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#656269; margin-top:4px; } /* Best 60s */ [data-theme='headspace'] .b60-badge { border-radius:999px; font-size:11px; font-weight:700; background:var(--blue-l); color:var(--blue); border:none; padding:5px 14px; } [data-theme='headspace'] .b60-head { font-family:var(--font-head); font-size:17px; font-weight:800; letter-spacing:-0.02em; color:#413D45; } [data-theme='headspace'] .b60-time { font-family:var(--font-head); font-size:26px; font-weight:800; letter-spacing:-0.04em; color:var(--blue); } /* Filler */ [data-theme='headspace'] .filler-chip { border-radius:999px; font-size:13px; font-weight:700; padding:6px 16px; background:#F5F3EE; border:none; color:#413D45; font-family:var(--font-head); } /* Chapters */ [data-theme='headspace'] .ch-item { padding:14px 0; border-bottom:1px solid #F0EDE8; } [data-theme='headspace'] .ch-item:last-child { border-bottom:none; } [data-theme='headspace'] .ch-time { font-family:var(--font-head); font-weight:800; color:var(--blue); font-size:13px; } [data-theme='headspace'] .ch-headline { font-size:15px; font-weight:700; color:#413D45; font-family:var(--font-head); } /* Topics */ [data-theme='headspace'] .topic-pill { border-radius:999px; font-size:13px; font-weight:700; padding:7px 18px; background:#F5F3EE; border:none; color:#413D45; font-family:var(--font-head); } /* Blind spots */ [data-theme='headspace'] .bs-grid { gap:var(--gap-cards); } [data-theme='headspace'] .bs-card { padding:24px; } [data-theme='headspace'] .strength-item { padding:14px 0; border-bottom:1px solid #F0EDE8; } [data-theme='headspace'] .strength-item:last-child { border-bottom:none; } /* Priority */ [data-theme='headspace'] .priority-section { padding:28px; } [data-theme='headspace'] .priority-section-title { font-family:var(--font-head); font-size:18px; font-weight:800; letter-spacing:-0.02em; color:#413D45; } /* Drill */ [data-theme='headspace'] .drill-card { padding:32px; } [data-theme='headspace'] .drill-head { font-family:var(--font-head); font-size:20px; font-weight:800; letter-spacing:-0.02em; color:#413D45; } [data-theme='headspace'] .drill-badge { border-radius:999px; background:var(--blue); color:#FFFFFF; font-size:11px; font-weight:700; letter-spacing:.04em; padding:5px 14px; border:none; } /* Closing */ [data-theme='headspace'] .closing-card { padding:32px; } [data-theme='headspace'] .cl-av { width:52px; height:52px; border-radius:50%; filter:none; } [data-theme='headspace'] .cl-name { font-family:var(--font-head); font-size:15px; font-weight:800; letter-spacing:-0.01em; color:#413D45; } [data-theme='headspace'] .cta-row { gap:12px; } /* Limitation box - borderless, zart orange */ [data-theme='headspace'] .limitation-box { background:#FFF7F0; border:none; border-radius:16px; box-shadow:none; padding:16px 20px; font-size:13px; color:#656269; } /* Layout */ [data-theme='headspace'] { --layout-max:1280px; --content-max:640px; --hero-align:center; --hero-mx:auto; } [data-theme='headspace'] .hero-inner, [data-theme='headspace'] .hero-cta-row, [data-theme='headspace'] .trust-row { text-align:center; align-items:center; } /* ═══════════════════════════════════════════════════════════ GUMROAD THEME - Neo-Brutalist Replica Space Grotesk, hard black borders, offset solid shadows, no blur, #FF90E8 pink hero, #FFC900 yellow HIW, click-physics on buttons via :active ═══════════════════════════════════════════════════════════ */ [data-theme='gumroad'] { /* Brand - Gumroad pink */ --blue:#FF90E8; --blue-l:#FFE8FB; --blue-m:#FFBDF4; --blue-d:#E060C8; --green:#00C170; --green-l:#D6F5E9; --red:#FF4F4F; --red-l:#FFE5E5; --amber:#FFC900; --amber-l:#FFF8D6; /* Surfaces - brutally pure */ --text:#000000; --muted:#333333; --border:#000000; --bg:#FFFFFF; --white:#FFFFFF; /* Offset solid shadows - zero blur, always */ --shadow:2px 2px 0px #000000; --shadow-md:6px 6px 0px #000000; /* Sharp corners everywhere */ --r:4px; /* Space Grotesk - slightly quirky, brutalist character */ --font-head:'Space Grotesk',system-ui,sans-serif; /* Generous but structured spacing */ --section-py:120px; --section-px:24px; --card-pad:32px; --gap-cards:24px; --nav-height:80px; /* High-contrast images */ --img-r:4px; --img-filter:contrast(110%); /* Snappy - no spring, pure mechanical */ --card-transition:transform 0.1s linear, box-shadow 0.1s linear; --hover-lift:translate(-2px,-2px); --hover-shadow:8px 8px 0px #000000; /* Layout */ --layout-max:1280px; --content-max:640px; --hero-align:left; --hero-mx:0; /* Brutalist border system */ --brd:2px solid #000000; --brd-thick:3px solid #000000; } /* ── Global ── */ [data-theme='gumroad'] body { background:#FFFFFF; font-family:'Space Grotesk',system-ui,sans-serif; font-size:16px; line-height:1.6; color:#000000; } [data-theme='gumroad'] h1, [data-theme='gumroad'] h2, [data-theme='gumroad'] h3, [data-theme='gumroad'] .section-title, [data-theme='gumroad'] .card-title, [data-theme='gumroad'] .hero-headline, [data-theme='gumroad'] .welcome-title, [data-theme='gumroad'] .cta-title, [data-theme='gumroad'] .empty-title, [data-theme='gumroad'] .sess-title { font-family:var(--font-head); letter-spacing:-0.03em; color:#000000; } [data-theme='gumroad'] img, [data-theme='gumroad'] video, [data-theme='gumroad'] .thumb, [data-theme='gumroad'] .session-thumb, [data-theme='gumroad'] .avatar-img { border-radius:var(--img-r); filter:var(--img-filter); border:var(--brd); } /* ── NAV - hard border bottom, no blur ── */ [data-theme='gumroad'] .top-nav { background:#FFFFFF; border-bottom:var(--brd-thick); box-shadow:0px 3px 0px #000000; height:var(--nav-height); backdrop-filter:none; } [data-theme='gumroad'] .nav-logo { font-family:var(--font-head); font-size:20px; font-weight:700; letter-spacing:-0.04em; color:#000000; } [data-theme='gumroad'] .nav-tab { font-size:14px; font-weight:600; color:#000000; letter-spacing:0; } [data-theme='gumroad'] .nav-tab:hover { color:var(--blue); } [data-theme='gumroad'] .nav-tab.active { color:#000000; border-bottom:3px solid #000000; font-weight:700; } /* ── HERO - hot pink background, left-aligned ── */ [data-theme='gumroad'] .hero-section { background:#FF90E8; padding:var(--section-py) var(--section-px); border-bottom:var(--brd-thick); text-align:left; } [data-theme='gumroad'] .hero-inner { text-align:left; } [data-theme='gumroad'] .hero-cta-row { justify-content:flex-start; } [data-theme='gumroad'] .trust-row { justify-content:flex-start; color:#000000; font-size:13px; font-weight:600; } [data-theme='gumroad'] h1 { font-family:var(--font-head); font-size:clamp(48px,6vw,80px); font-weight:700; letter-spacing:-0.05em; line-height:1.0; color:#000000; } [data-theme='gumroad'] h1 .grad { background:none; -webkit-background-clip:initial; -webkit-text-fill-color:initial; background-clip:initial; color:#000000; text-decoration:underline; text-decoration-color:var(--blue); text-underline-offset:6px; } [data-theme='gumroad'] .hero-pill { background:#000000; border:2px solid #000000; color:#FFFFFF; padding:6px 14px; font-size:12px; font-weight:700; border-radius:4px; margin-bottom:32px; display:inline-flex; align-items:center; gap:6px; text-transform:uppercase; letter-spacing:.06em; } [data-theme='gumroad'] .hero-pill-dot { background:#FF90E8; } [data-theme='gumroad'] .hero-sub { font-size:18px; line-height:1.65; color:#000000; max-width:560px; margin:0 0 40px 0; font-weight:500; } /* ── BUTTONS - square, offset shadow, click physics ── */ [data-theme='gumroad'] .btn-hero { background:var(--blue); border:var(--brd); border-radius:4px; padding:16px 36px; font-size:16px; font-weight:700; font-family:var(--font-head); color:#000000; box-shadow:4px 4px 0px #000000; transition:var(--card-transition); letter-spacing:0; } [data-theme='gumroad'] .btn-hero:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0px #000000; } [data-theme='gumroad'] .btn-hero:active { transform:translate(4px,4px); box-shadow:0 0 0 #000000; } [data-theme='gumroad'] .btn-hero-ghost { background:#FFFFFF; border:var(--brd); border-radius:4px; padding:15px 32px; font-size:16px; font-weight:700; font-family:var(--font-head); color:#000000; box-shadow:4px 4px 0px #000000; transition:var(--card-transition); } [data-theme='gumroad'] .btn-hero-ghost:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0px #000000; } [data-theme='gumroad'] .btn-hero-ghost:active { transform:translate(4px,4px); box-shadow:0 0 0 #000000; } [data-theme='gumroad'] .btn { border-radius:4px; border:var(--brd); padding:12px 24px; font-size:15px; font-weight:700; font-family:var(--font-head); box-shadow:4px 4px 0px #000000; transition:var(--card-transition); } [data-theme='gumroad'] .btn:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0px #000000; } [data-theme='gumroad'] .btn:active { transform:translate(4px,4px); box-shadow:0 0 0 #000000; } /* Universal button :active for all theme buttons */ [data-theme='gumroad'] button:active, [data-theme='gumroad'] [role="button"]:active { transform:translate(4px,4px) !important; box-shadow:0 0 0 #000000 !important; } /* ── CARDS - hard border, offset shadow ── */ [data-theme='gumroad'] .card { background:#FFFFFF; border:var(--brd); border-radius:4px; box-shadow:var(--shadow-md); padding:var(--card-pad); transition:var(--card-transition); } [data-theme='gumroad'] .card:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); } [data-theme='gumroad'] .card-title { font-family:var(--font-head); font-size:18px; font-weight:700; color:#000000; } /* ── UPLOAD SECTION ── */ [data-theme='gumroad'] .upload-section { padding:var(--section-py) var(--section-px); background:#FFFFFF; } [data-theme='gumroad'] .card-header { padding:28px 32px 0; border-bottom:var(--brd); } [data-theme='gumroad'] .card-body { padding:24px 32px 36px; } [data-theme='gumroad'] .card-sub-text { font-size:14px; color:#333333; margin-top:4px; } [data-theme='gumroad'] .tab-bar { border:var(--brd); background:#FFFFFF; border-radius:4px; padding:4px; gap:4px; box-shadow:var(--shadow); } [data-theme='gumroad'] .tab-btn { border-radius:4px; font-size:14px; font-weight:600; font-family:var(--font-head); border:none; transition:var(--card-transition); } [data-theme='gumroad'] .tab-btn.active { border-radius:4px; background:var(--blue); border:var(--brd); box-shadow:2px 2px 0px #000000; font-weight:700; color:#000000; } [data-theme='gumroad'] .dropzone { border-radius:4px; border:var(--brd-thick); border-style:dashed; padding:72px 24px; background:#FFFFFF; transition:var(--card-transition); } [data-theme='gumroad'] .dropzone:hover { border-style:solid; background:#FF90E8; transform:translate(-2px,-2px); box-shadow:var(--shadow-md); } [data-theme='gumroad'] .dz-main { font-family:var(--font-head); font-size:20px; font-weight:700; color:#000000; } [data-theme='gumroad'] .dz-hint { font-size:14px; color:#333333; margin-top:6px; font-weight:500; } [data-theme='gumroad'] .field input, [data-theme='gumroad'] .field select { border-radius:4px; border:var(--brd); padding:13px 16px; background:#FFFFFF; font-size:15px; font-family:var(--font-head); color:#000000; box-shadow:var(--shadow); transition:var(--card-transition); } [data-theme='gumroad'] .field input:focus, [data-theme='gumroad'] .field select:focus { outline:none; box-shadow:4px 4px 0px #000000; transform:translate(-1px,-1px); } [data-theme='gumroad'] .field label { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#000000; margin-bottom:8px; display:block; } [data-theme='gumroad'] .loom-url-field { border-radius:4px; border:var(--brd); padding:13px 16px; font-family:var(--font-head); box-shadow:var(--shadow); } [data-theme='gumroad'] .ctx-grid { gap:16px; } /* ── HOW IT WORKS - screaming yellow, black text ── */ [data-theme='gumroad'] .hiw-section { background:#FFC900; padding:var(--section-py) var(--section-px); border-top:var(--brd-thick); border-bottom:var(--brd-thick); color:#000000; } [data-theme='gumroad'] .hiw-section .section-title { color:#000000; font-size:clamp(32px,5vw,56px); font-weight:700; letter-spacing:-0.04em; } [data-theme='gumroad'] .hiw-section .section-sub { color:#000000; font-size:17px; font-weight:500; opacity:.75; } [data-theme='gumroad'] .hiw-step { background:#FFFFFF; border:var(--brd); box-shadow:var(--shadow-md); border-radius:4px; padding:32px; color:#000000; transition:var(--card-transition); } [data-theme='gumroad'] .hiw-step:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); } [data-theme='gumroad'] .hiw-step .step-num, [data-theme='gumroad'] .hiw-num-label { font-family:var(--font-head); font-size:48px; font-weight:700; color:var(--blue); line-height:1; margin-bottom:14px; display:block; letter-spacing:-0.05em; } [data-theme='gumroad'] .hiw-step-title { font-family:var(--font-head); font-size:17px; font-weight:700; color:#000000; margin-bottom:10px; } [data-theme='gumroad'] .hiw-step-desc { font-size:15px; line-height:1.65; color:#333333; } [data-theme='gumroad'] .section-eyebrow { font-size:11px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:#000000; margin-bottom:14px; background:var(--blue); display:inline-block; padding:3px 10px; border:var(--brd); border-radius:4px; } /* ── SECTION TITLE ── */ [data-theme='gumroad'] .section-title { font-family:var(--font-head); font-size:clamp(28px,4vw,48px); font-weight:700; letter-spacing:-0.04em; color:#000000; } /* ── MARKERS ── */ [data-theme='gumroad'] .markers-section { padding:var(--section-py) var(--section-px); background:#FFFFFF; } [data-theme='gumroad'] .marker-chip { background:#FFFFFF; border:var(--brd); border-radius:4px; box-shadow:var(--shadow); padding:20px; transition:var(--card-transition); } [data-theme='gumroad'] .marker-chip:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); } [data-theme='gumroad'] .mc-icon.visual { background:#FF90E8; color:#000000; border-radius:4px; border:1px solid #000000; } [data-theme='gumroad'] .mc-icon.prosody { background:#FFC900; color:#000000; border-radius:4px; border:1px solid #000000; } [data-theme='gumroad'] .mc-icon.advanced { background:#00C170; color:#000000; border-radius:4px; border:1px solid #000000; } [data-theme='gumroad'] .mc-name { font-size:14px; font-weight:700; color:#000000; font-family:var(--font-head); } [data-theme='gumroad'] .mc-type { font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:#333333; } /* ── PROGRESS / PROCESSING ── */ [data-theme='gumroad'] .prog-card { background:#FFFFFF; border:var(--brd); border-radius:4px; box-shadow:var(--shadow-md); padding:var(--card-pad); } [data-theme='gumroad'] .step { border-radius:4px; border:1px solid #DDDDDD; padding:12px 16px; } [data-theme='gumroad'] .err-box { border-radius:4px; border:2px solid #FF4F4F; } /* ── GATE / PAYMENT ── */ [data-theme='gumroad'] .gate-card { background:#FFFFFF; border:var(--brd); border-radius:4px; box-shadow:var(--shadow-md); padding:var(--card-pad); } [data-theme='gumroad'] .gate-btn-primary { border-radius:4px; border:var(--brd); font-family:var(--font-head); font-weight:700; padding:16px 32px; background:var(--blue); color:#000000; box-shadow:4px 4px 0px #000000; transition:var(--card-transition); } [data-theme='gumroad'] .gate-btn-primary:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0px #000000; } [data-theme='gumroad'] .gate-btn-primary:active { transform:translate(4px,4px); box-shadow:0 0 0; } [data-theme='gumroad'] .gate-btn-demo { border-radius:4px; border:var(--brd); color:#000000; background:#FFFFFF; font-weight:700; box-shadow:var(--shadow); } [data-theme='gumroad'] .gate-btn { border-radius:4px; border:var(--brd); } [data-theme='gumroad'] .gate-input { border-radius:4px; border:var(--brd); padding:13px 16px; background:#FFFFFF; font-family:var(--font-head); box-shadow:var(--shadow); } /* ═══════════════════════════ GUMROAD - DASHBOARD ═══════════════════════════ */ [data-theme='gumroad'] .dash-body, [data-theme='gumroad'] .dash-page { background:#FFFFFF; } /* Welcome hero - full black, pink CTA */ [data-theme='gumroad'] .welcome-hero { background:#000000; border:var(--brd); border-radius:4px; padding:48px 48px; box-shadow:var(--shadow-md); color:#FFFFFF; } [data-theme='gumroad'] .welcome-hero h2, [data-theme='gumroad'] .welcome-hero .welcome-title { font-family:var(--font-head); font-size:clamp(24px,3vw,36px); font-weight:700; letter-spacing:-0.04em; color:#FFFFFF; } [data-theme='gumroad'] .welcome-hero .welcome-hero-sub, [data-theme='gumroad'] .welcome-hero .welcome-hero-meta { color:rgba(255,255,255,.65); } [data-theme='gumroad'] .welcome-cta { background:var(--blue); color:#000000; border-radius:4px; border:var(--brd); padding:12px 28px; font-size:14px; font-weight:700; font-family:var(--font-head); box-shadow:4px 4px 0px rgba(255,255,255,.4); transition:var(--card-transition); } [data-theme='gumroad'] .welcome-cta:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0px rgba(255,255,255,.5); } [data-theme='gumroad'] .welcome-cta:active { transform:translate(4px,4px); box-shadow:0 0 0; } /* Stat cards */ [data-theme='gumroad'] .stat-card { background:#FFFFFF; border:var(--brd); border-radius:4px; box-shadow:var(--shadow-md); padding:28px 24px; transition:var(--card-transition); } [data-theme='gumroad'] .stat-card:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); } [data-theme='gumroad'] .stat-n, [data-theme='gumroad'] .stat-card .stat-value { font-family:var(--font-head); font-size:48px; font-weight:700; letter-spacing:-0.05em; color:#000000; line-height:1; } [data-theme='gumroad'] .stat-l, [data-theme='gumroad'] .stat-card .stat-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#333333; margin-top:6px; } [data-theme='gumroad'] .stat-icon { border-radius:4px; border:1px solid #000000; } /* Session cards */ [data-theme='gumroad'] .sessions-grid { gap:var(--gap-cards); } [data-theme='gumroad'] .sess-card { background:#FFFFFF; border:var(--brd); border-left:var(--brd); /* override default colored left border */ border-radius:4px; box-shadow:var(--shadow-md); padding:var(--card-pad); transition:var(--card-transition); } [data-theme='gumroad'] .sess-card:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); } [data-theme='gumroad'] .sess-num { font-family:var(--font-head); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#333333; } [data-theme='gumroad'] .sess-topic { font-family:var(--font-head); font-size:17px; font-weight:700; letter-spacing:-0.03em; color:#000000; line-height:1.25; margin-top:6px; } [data-theme='gumroad'] .sess-date { font-size:13px; color:#333333; font-weight:500; } [data-theme='gumroad'] .status-pill { border-radius:4px; border:1px solid #000000; font-size:11px; font-weight:700; letter-spacing:.04em; padding:3px 10px; background:#FFFFFF; color:#000000; } [data-theme='gumroad'] .score-chip { font-family:var(--font-head); font-size:20px; font-weight:700; letter-spacing:-0.04em; color:#000000; } /* Chart + Marker cards */ [data-theme='gumroad'] .chart-card { background:#FFFFFF; border:var(--brd); border-radius:4px; box-shadow:var(--shadow-md); padding:var(--card-pad); transition:var(--card-transition); } [data-theme='gumroad'] .chart-card:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); } [data-theme='gumroad'] .chart-card h3, [data-theme='gumroad'] .chart-card .card-title { font-family:var(--font-head); font-size:18px; font-weight:700; color:#000000; } [data-theme='gumroad'] .marker-card { background:#FFFFFF; border:var(--brd); border-radius:4px; box-shadow:var(--shadow); transition:var(--card-transition); } [data-theme='gumroad'] .marker-card:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); } [data-theme='gumroad'] .improvement-banner { background:var(--blue-l); border:var(--brd); border-radius:4px; } /* CTA card - full black, pink subtext */ [data-theme='gumroad'] .cta-card { background:#000000; border:var(--brd); border-radius:4px; padding:64px; box-shadow:var(--shadow-md); } [data-theme='gumroad'] .cta-card h2, [data-theme='gumroad'] .cta-card .cta-title { font-family:var(--font-head); font-size:clamp(28px,4vw,48px); letter-spacing:-0.04em; font-weight:700; color:#FFFFFF; } [data-theme='gumroad'] .cta-card p, [data-theme='gumroad'] .cta-card .cta-sub { color:var(--blue); font-weight:600; } [data-theme='gumroad'] .cta-btn { background:var(--blue); color:#000000; border-radius:4px; border:var(--brd); font-weight:700; font-size:15px; font-family:var(--font-head); padding:14px 36px; box-shadow:4px 4px 0px rgba(255,255,255,.4); transition:var(--card-transition); } [data-theme='gumroad'] .cta-btn:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0px rgba(255,255,255,.5); } [data-theme='gumroad'] .cta-btn:active { transform:translate(4px,4px); box-shadow:0 0 0; } /* Empty state */ [data-theme='gumroad'] .empty-state-card { background:#FFFFFF; border:var(--brd); border-radius:4px; box-shadow:var(--shadow-md); padding:64px 40px; } [data-theme='gumroad'] .empty-state-card h2, [data-theme='gumroad'] .empty-state-card .empty-title { font-family:var(--font-head); font-size:26px; font-weight:700; letter-spacing:-0.04em; color:#000000; } [data-theme='gumroad'] .empty-state-btn { border-radius:4px; border:var(--brd); padding:13px 32px; font-weight:700; font-family:var(--font-head); box-shadow:var(--shadow-md); } /* Sidebar */ [data-theme='gumroad'] .sidebar { background:#FFFFFF; border-right:var(--brd); box-shadow:none; } [data-theme='gumroad'] .sidebar .logo-text { font-family:var(--font-head); color:#000000; font-size:20px; font-weight:700; } [data-theme='gumroad'] .sidebar-link { border-radius:4px; font-size:14px; font-weight:600; color:#000000; font-family:var(--font-head); transition:all .1s; } [data-theme='gumroad'] .sidebar-link:hover { background:var(--blue); color:#000000; } [data-theme='gumroad'] .sidebar-link.active { background:var(--blue); color:#000000; font-weight:700; box-shadow:var(--shadow); } /* ═══════════════════════════ GUMROAD - REPORT PAGE ═══════════════════════════ */ [data-theme='gumroad'] .report-body, [data-theme='gumroad'] .report-page { background:#FFFFFF; } [data-theme='gumroad'] .report-nav, [data-theme='gumroad'] .rep-nav { background:#FFFFFF; border-bottom:var(--brd-thick); box-shadow:0px 3px 0px #000000; } [data-theme='gumroad'] .sec-title { font-family:var(--font-head); font-size:clamp(20px,2.5vw,26px); font-weight:700; letter-spacing:-0.04em; color:#000000; margin-bottom:16px; } [data-theme='gumroad'] .stat-pill { border-radius:4px; border:var(--brd); font-weight:700; font-size:13px; padding:5px 14px; background:#FFFFFF; box-shadow:var(--shadow); color:#000000; font-family:var(--font-head); } [data-theme='gumroad'] .stats-row { gap:10px; } /* All analysis cards */ [data-theme='gumroad'] .arc-card, [data-theme='gumroad'] .b60-card, [data-theme='gumroad'] .filler-card, [data-theme='gumroad'] .sent-card, [data-theme='gumroad'] .ch-card, [data-theme='gumroad'] .topic-card, [data-theme='gumroad'] .bs-card, [data-theme='gumroad'] .strength-card, [data-theme='gumroad'] .closing-card, [data-theme='gumroad'] .drill-card, [data-theme='gumroad'] .priority-section { background:#FFFFFF; border:var(--brd); border-radius:4px; box-shadow:var(--shadow-md); transition:var(--card-transition); } [data-theme='gumroad'] .arc-card:hover, [data-theme='gumroad'] .b60-card:hover, [data-theme='gumroad'] .filler-card:hover, [data-theme='gumroad'] .sent-card:hover, [data-theme='gumroad'] .ch-card:hover, [data-theme='gumroad'] .topic-card:hover, [data-theme='gumroad'] .bs-card:hover, [data-theme='gumroad'] .strength-card:hover, [data-theme='gumroad'] .closing-card:hover, [data-theme='gumroad'] .drill-card:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); } /* Pause quality */ [data-theme='gumroad'] .pq-cell { border-radius:4px; border:var(--brd); padding:20px; background:#FFFFFF; box-shadow:var(--shadow); } [data-theme='gumroad'] .pq-count { font-family:var(--font-head); font-size:36px; font-weight:700; letter-spacing:-0.05em; color:#000000; } [data-theme='gumroad'] .pq-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#333333; margin-top:4px; } /* Best 60s */ [data-theme='gumroad'] .b60-badge { border-radius:4px; border:1px solid #000000; font-size:11px; font-weight:700; background:var(--blue); color:#000000; padding:3px 10px; text-transform:uppercase; letter-spacing:.05em; } [data-theme='gumroad'] .b60-head { font-family:var(--font-head); font-size:17px; font-weight:700; letter-spacing:-0.03em; color:#000000; } [data-theme='gumroad'] .b60-time { font-family:var(--font-head); font-size:28px; font-weight:700; letter-spacing:-0.05em; color:#000000; } /* Filler */ [data-theme='gumroad'] .filler-chip { border-radius:4px; border:1px solid #000000; font-size:13px; font-weight:700; padding:4px 12px; background:#FFFFFF; color:#000000; font-family:var(--font-head); box-shadow:var(--shadow); } /* Chapters */ [data-theme='gumroad'] .ch-item { padding:14px 0; border-bottom:2px solid #000000; } [data-theme='gumroad'] .ch-item:last-child { border-bottom:none; } [data-theme='gumroad'] .ch-time { font-family:var(--font-head); font-weight:700; color:#000000; font-size:13px; background:var(--blue); display:inline-block; padding:1px 8px; border:1px solid #000000; border-radius:4px; } [data-theme='gumroad'] .ch-headline { font-size:15px; font-weight:700; color:#000000; font-family:var(--font-head); } /* Topics */ [data-theme='gumroad'] .topic-pill { border-radius:4px; border:1px solid #000000; font-size:13px; font-weight:700; padding:5px 14px; background:#FFFFFF; box-shadow:var(--shadow); color:#000000; font-family:var(--font-head); } /* Blind spots */ [data-theme='gumroad'] .bs-grid { gap:var(--gap-cards); } [data-theme='gumroad'] .bs-card { padding:24px; } [data-theme='gumroad'] .strength-item { padding:14px 0; border-bottom:2px solid #000000; } [data-theme='gumroad'] .strength-item:last-child { border-bottom:none; } /* Priority */ [data-theme='gumroad'] .priority-section { padding:28px; } [data-theme='gumroad'] .priority-section-title { font-family:var(--font-head); font-size:18px; font-weight:700; letter-spacing:-0.03em; color:#000000; } /* Drill */ [data-theme='gumroad'] .drill-card { padding:32px; } [data-theme='gumroad'] .drill-head { font-family:var(--font-head); font-size:20px; font-weight:700; letter-spacing:-0.04em; color:#000000; } [data-theme='gumroad'] .drill-badge { border-radius:4px; background:var(--blue); color:#000000; border:1px solid #000000; font-size:11px; font-weight:700; letter-spacing:.05em; padding:4px 12px; text-transform:uppercase; } /* Closing */ [data-theme='gumroad'] .closing-card { padding:32px; } [data-theme='gumroad'] .cl-av { width:52px; height:52px; border-radius:4px; border:var(--brd); filter:var(--img-filter); } [data-theme='gumroad'] .cl-name { font-family:var(--font-head); font-size:15px; font-weight:700; letter-spacing:-0.02em; color:#000000; } [data-theme='gumroad'] .cta-row { gap:12px; } /* Limitation box - pink, hard border */ [data-theme='gumroad'] .limitation-box { background:var(--blue); border:3px solid #000000; border-radius:4px; box-shadow:var(--shadow); padding:16px 20px; font-size:13px; color:#000000; font-weight:600; } /* Layout */ [data-theme='gumroad'] { --layout-max:1280px; --content-max:640px; --hero-align:left; --hero-mx:0; } [data-theme='gumroad'] .hero-inner, [data-theme='gumroad'] .hero-cta-row, [data-theme='gumroad'] .trust-row { text-align:left; align-items:flex-start; } /* ═══════════════════════════════════════════════════════════ APPLE THEME - Cinematic Minimalism Replica System font stack (SF Pro on Apple, Inter elsewhere), glassmorphism nav, extreme whitespace, zero lift-hover, black HIW breakout, #0066CC Apple blue ═══════════════════════════════════════════════════════════ */ [data-theme='apple'] { /* Apple blue */ --blue:#0066CC; --blue-l:#E8F1FB; --blue-m:#B8D4F5; --blue-d:#004FA3; --green:#34C759; --green-l:#E9F8EE; --red:#FF3B30; --red-l:#FFF0EF; --amber:#FF9500; --amber-l:#FFF5E6; /* Surfaces - Apple's clinical whites and near-whites */ --text:#1D1D1F; --muted:#86868B; --border:rgba(0,0,0,.05); --bg:#FFFFFF; --white:#FFFFFF; /* Featherweight shadows */ --shadow:0 2px 8px rgba(0,0,0,.04); --shadow-md:0 4px 24px rgba(0,0,0,.06); /* Refined radius */ --r:18px; /* SF Pro on Apple devices, Inter everywhere else */ --font-head:-apple-system,BlinkMacSystemFont,'Inter',sans-serif; /* Cinematic breathing room */ --section-py:120px; --section-px:24px; --card-pad:40px; --gap-cards:24px; --nav-height:44px; /* Apple's iconic slim nav */ /* Brilliant unfiltered images */ --img-r:18px; --img-filter:none; /* No lift - Apple scales buttons only */ --card-transition:transform 0.3s ease-out; --hover-lift:none; --hover-shadow:var(--shadow-md); /* unchanged on card hover */ /* Layout */ --layout-max:1200px; --content-max:700px; --hero-align:center; --hero-mx:auto; } /* ── Global ── */ [data-theme='apple'] body { background:#FFFFFF; font-family:-apple-system,BlinkMacSystemFont,'Inter',sans-serif; font-size:17px; line-height:1.65; color:#1D1D1F; -webkit-font-smoothing:antialiased; } [data-theme='apple'] h1, [data-theme='apple'] h2, [data-theme='apple'] h3, [data-theme='apple'] .section-title, [data-theme='apple'] .card-title, [data-theme='apple'] .hero-headline, [data-theme='apple'] .welcome-title, [data-theme='apple'] .cta-title, [data-theme='apple'] .empty-title, [data-theme='apple'] .sess-title { font-family:var(--font-head); letter-spacing:-0.015em; color:#1D1D1F; } [data-theme='apple'] img, [data-theme='apple'] video, [data-theme='apple'] .thumb, [data-theme='apple'] .session-thumb, [data-theme='apple'] .avatar-img { border-radius:var(--img-r); filter:none; } /* ── NAV - Apple glassmorphism, 44px, borderless ── */ [data-theme='apple'] .top-nav { background:rgba(255,255,255,.72); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:none; box-shadow:0 1px 0 rgba(0,0,0,.05); height:var(--nav-height); } [data-theme='apple'] .nav-logo { font-family:var(--font-head); font-size:18px; font-weight:600; letter-spacing:-0.01em; color:#1D1D1F; } [data-theme='apple'] .nav-tab { font-size:13px; font-weight:400; color:#1D1D1F; letter-spacing:0; opacity:.85; } [data-theme='apple'] .nav-tab:hover { opacity:1; color:var(--blue); } [data-theme='apple'] .nav-tab.active { color:var(--blue); border-bottom:none; font-weight:500; opacity:1; } /* ── HERO - centered, vast, cinematic ── */ [data-theme='apple'] .hero-section { background:#FFFFFF; padding:var(--section-py) var(--section-px); border-bottom:none; text-align:center; } [data-theme='apple'] .hero-inner { text-align:center; } [data-theme='apple'] .hero-cta-row { justify-content:center; } [data-theme='apple'] .trust-row { justify-content:center; font-size:13px; color:#86868B; } [data-theme='apple'] h1 { font-family:var(--font-head); font-size:clamp(48px,8vw,80px); font-weight:600; letter-spacing:-0.015em; line-height:1.05; color:#1D1D1F; } [data-theme='apple'] h1 .grad { background:none; -webkit-background-clip:initial; -webkit-text-fill-color:initial; background-clip:initial; color:var(--blue); } [data-theme='apple'] .hero-pill { background:var(--blue); border:none; color:#FFFFFF; padding:6px 16px; font-size:13px; font-weight:500; border-radius:99px; margin-bottom:28px; display:inline-flex; align-items:center; gap:6px; } [data-theme='apple'] .hero-pill-dot { background:rgba(255,255,255,.7); } [data-theme='apple'] .hero-sub { font-size:19px; line-height:1.7; color:#86868B; max-width:var(--content-max); margin:0 auto 44px; font-weight:400; letter-spacing:-0.005em; } /* ── BUTTONS - pill, Apple blue, no shadow, scale on hover ── */ [data-theme='apple'] .btn-hero { background:var(--blue); border:none; border-radius:99px; padding:14px 26px; font-size:15px; font-weight:500; font-family:var(--font-head); color:#FFFFFF; box-shadow:none; letter-spacing:-0.005em; transition:var(--card-transition); } [data-theme='apple'] .btn-hero:hover { transform:scale(1.02); background:color-mix(in srgb,var(--blue),black 8%); } [data-theme='apple'] .btn-hero:active { transform:scale(0.98); } [data-theme='apple'] .btn-hero-ghost { background:transparent; border:none; border-radius:99px; padding:14px 26px; font-size:15px; font-weight:500; font-family:var(--font-head); color:var(--blue); box-shadow:none; letter-spacing:-0.005em; transition:var(--card-transition); } [data-theme='apple'] .btn-hero-ghost:hover { background:var(--blue-l); transform:scale(1.02); } [data-theme='apple'] .btn-hero-ghost:active { transform:scale(0.98); } [data-theme='apple'] .btn { border-radius:99px; border:none; padding:11px 22px; font-size:15px; font-weight:500; font-family:var(--font-head); box-shadow:none; letter-spacing:-0.005em; transition:var(--card-transition); } [data-theme='apple'] .btn:hover { transform:scale(1.02); } [data-theme='apple'] .btn:active { transform:scale(0.98); } /* ── CARDS - featherlight shadow, no border, no lift ── */ [data-theme='apple'] .card { background:#F5F5F7; border:none; border-radius:var(--r); box-shadow:none; padding:var(--card-pad); transition:var(--card-transition); } /* Apple cards don't lift - only subtle shadow deepens */ [data-theme='apple'] .card:hover { box-shadow:var(--shadow-md); } [data-theme='apple'] .card-title { font-family:var(--font-head); font-size:19px; font-weight:600; letter-spacing:-0.01em; color:#1D1D1F; } /* ── UPLOAD SECTION ── */ [data-theme='apple'] .upload-section { padding:var(--section-py) var(--section-px); background:#FFFFFF; } [data-theme='apple'] .card-header { padding:32px 40px 0; border-bottom:none; } [data-theme='apple'] .card-body { padding:28px 40px 40px; } [data-theme='apple'] .card-sub-text { font-size:15px; color:#86868B; margin-top:4px; letter-spacing:-0.005em; } [data-theme='apple'] .tab-bar { border:none; background:#E8E8ED; border-radius:99px; padding:3px; gap:2px; } [data-theme='apple'] .tab-btn { border-radius:99px; font-size:14px; font-weight:400; font-family:var(--font-head); color:#1D1D1F; } [data-theme='apple'] .tab-btn.active { border-radius:99px; background:#FFFFFF; box-shadow:0 1px 4px rgba(0,0,0,.1); font-weight:500; color:#1D1D1F; } [data-theme='apple'] .dropzone { border-radius:14px; border:1.5px dashed rgba(0,0,0,.12); padding:80px 24px; background:#F5F5F7; transition:all 0.3s ease-out; } [data-theme='apple'] .dropzone:hover { border-color:var(--blue); background:var(--blue-l); } [data-theme='apple'] .dz-main { font-family:var(--font-head); font-size:19px; font-weight:500; color:#1D1D1F; letter-spacing:-0.01em; } [data-theme='apple'] .dz-hint { font-size:14px; color:#86868B; margin-top:6px; } [data-theme='apple'] .field input, [data-theme='apple'] .field select { border-radius:12px; border:none; padding:13px 16px; background:#F5F5F7; font-size:15px; font-family:var(--font-head); color:#1D1D1F; transition:all 0.2s ease-out; } [data-theme='apple'] .field input:focus, [data-theme='apple'] .field select:focus { background:#FFFFFF; outline:none; box-shadow:0 0 0 3px rgba(0,102,204,.25); } [data-theme='apple'] .field label { font-size:13px; font-weight:500; color:#1D1D1F; margin-bottom:8px; display:block; letter-spacing:-0.005em; } [data-theme='apple'] .loom-url-field { border-radius:12px; border:none; padding:13px 16px; background:#F5F5F7; font-family:var(--font-head); } [data-theme='apple'] .ctx-grid { gap:16px; } /* ── HOW IT WORKS - pitch black breakout, dark cards ── */ [data-theme='apple'] .hiw-section { background:#000000; padding:var(--section-py) var(--section-px); border:none; color:#F5F5F7; } [data-theme='apple'] .hiw-section .section-title { color:#F5F5F7; font-size:clamp(36px,6vw,56px); font-weight:600; letter-spacing:-0.02em; } [data-theme='apple'] .hiw-section .section-sub { color:#86868B; font-size:19px; } [data-theme='apple'] .hiw-step { background:#1D1D1F; border:none; box-shadow:none; border-radius:var(--r); padding:48px; color:#F5F5F7; transition:var(--card-transition); } [data-theme='apple'] .hiw-step:hover { box-shadow:0 8px 32px rgba(0,0,0,.6); } [data-theme='apple'] .hiw-step .step-num, [data-theme='apple'] .hiw-num-label { font-family:var(--font-head); font-size:56px; font-weight:600; color:var(--blue); line-height:1; margin-bottom:20px; display:block; letter-spacing:-0.03em; } [data-theme='apple'] .hiw-step-title { font-family:var(--font-head); font-size:19px; font-weight:600; color:#F5F5F7; margin-bottom:10px; letter-spacing:-0.01em; } [data-theme='apple'] .hiw-step-desc { font-size:15px; line-height:1.7; color:#86868B; } [data-theme='apple'] .section-eyebrow { font-size:13px; font-weight:500; letter-spacing:.03em; text-transform:uppercase; color:var(--blue); margin-bottom:16px; display:block; } /* ── SECTION TITLE ── */ [data-theme='apple'] .section-title { font-family:var(--font-head); font-size:clamp(32px,5vw,48px); font-weight:600; letter-spacing:-0.02em; color:#1D1D1F; } /* ── MARKERS ── */ [data-theme='apple'] .markers-section { padding:var(--section-py) var(--section-px); background:#F5F5F7; } [data-theme='apple'] .marker-chip { background:#FFFFFF; border:none; border-radius:14px; box-shadow:var(--shadow); padding:20px; transition:var(--card-transition); } [data-theme='apple'] .marker-chip:hover { box-shadow:var(--shadow-md); } [data-theme='apple'] .mc-icon.visual { background:color-mix(in srgb,#0066CC,transparent 88%); color:#0066CC; border-radius:10px; } [data-theme='apple'] .mc-icon.prosody { background:color-mix(in srgb,#34C759,transparent 88%); color:#248A3D; border-radius:10px; } [data-theme='apple'] .mc-icon.advanced { background:color-mix(in srgb,#FF9500,transparent 88%); color:#C93400; border-radius:10px; } [data-theme='apple'] .mc-name { font-size:14px; font-weight:500; color:#1D1D1F; font-family:var(--font-head); letter-spacing:-0.005em; } [data-theme='apple'] .mc-type { font-size:11px; text-transform:uppercase; letter-spacing:.04em; font-weight:500; color:#86868B; } /* ── PROGRESS / PROCESSING ── */ [data-theme='apple'] .prog-card { background:#F5F5F7; border:none; border-radius:var(--r); box-shadow:none; padding:var(--card-pad); } [data-theme='apple'] .step { border-radius:12px; padding:12px 16px; } [data-theme='apple'] .err-box { border-radius:12px; } /* ── GATE / PAYMENT ── */ [data-theme='apple'] .gate-card { background:#F5F5F7; border:none; border-radius:var(--r); box-shadow:var(--shadow-md); padding:var(--card-pad); } [data-theme='apple'] .gate-btn-primary { border-radius:99px; border:none; font-family:var(--font-head); font-weight:500; padding:14px 28px; background:var(--blue); color:#FFFFFF; box-shadow:none; transition:var(--card-transition); } [data-theme='apple'] .gate-btn-primary:hover { transform:scale(1.02); background:color-mix(in srgb,var(--blue),black 8%); } [data-theme='apple'] .gate-btn-primary:active { transform:scale(0.98); } [data-theme='apple'] .gate-btn-demo { border-radius:99px; border:none; color:var(--blue); background:transparent; font-weight:500; } [data-theme='apple'] .gate-btn { border-radius:99px; border:none; } [data-theme='apple'] .gate-input { border-radius:12px; border:none; padding:13px 16px; background:#FFFFFF; font-family:var(--font-head); box-shadow:0 0 0 1px rgba(0,0,0,.08); } /* ═══════════════════════════ APPLE - DASHBOARD ═══════════════════════════ */ [data-theme='apple'] .dash-body, [data-theme='apple'] .dash-page { background:#FFFFFF; } /* Welcome hero - white, clean, Apple blue CTA */ [data-theme='apple'] .welcome-hero { background:#FFFFFF; border:none; border-radius:var(--r); padding:48px; box-shadow:var(--shadow-md); color:#1D1D1F; } [data-theme='apple'] .welcome-hero h2, [data-theme='apple'] .welcome-hero .welcome-title { font-family:var(--font-head); font-size:clamp(22px,3vw,32px); font-weight:600; letter-spacing:-0.015em; color:#1D1D1F; } [data-theme='apple'] .welcome-hero .welcome-hero-sub, [data-theme='apple'] .welcome-hero .welcome-hero-meta { color:#86868B; } [data-theme='apple'] .welcome-cta { background:var(--blue); color:#FFFFFF; border-radius:99px; border:none; padding:11px 22px; font-size:14px; font-weight:500; font-family:var(--font-head); box-shadow:none; letter-spacing:-0.005em; transition:var(--card-transition); } [data-theme='apple'] .welcome-cta:hover { transform:scale(1.02); background:color-mix(in srgb,var(--blue),black 8%); } [data-theme='apple'] .welcome-cta:active { transform:scale(0.98); } /* Stat cards */ [data-theme='apple'] .stat-card { background:#F5F5F7; border:none; border-radius:var(--r); box-shadow:none; padding:32px 28px; transition:var(--card-transition); } [data-theme='apple'] .stat-card:hover { box-shadow:var(--shadow-md); } [data-theme='apple'] .stat-n, [data-theme='apple'] .stat-card .stat-value { font-family:var(--font-head); font-size:56px; font-weight:600; letter-spacing:-0.03em; color:#1D1D1F; line-height:1; } [data-theme='apple'] .stat-l, [data-theme='apple'] .stat-card .stat-label { font-size:13px; font-weight:400; letter-spacing:-0.005em; color:#86868B; margin-top:6px; } [data-theme='apple'] .stat-icon { border-radius:12px; background:var(--blue-l); } /* Session cards */ [data-theme='apple'] .sessions-grid { gap:var(--gap-cards); } [data-theme='apple'] .sess-card { background:#F5F5F7; border:none; border-left:none; border-radius:var(--r); box-shadow:none; padding:var(--card-pad); transition:var(--card-transition); } [data-theme='apple'] .sess-card:hover { box-shadow:var(--shadow-md); background:#FFFFFF; } [data-theme='apple'] .sess-num { font-family:var(--font-head); font-size:11px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:#86868B; } [data-theme='apple'] .sess-topic { font-family:var(--font-head); font-size:17px; font-weight:600; letter-spacing:-0.01em; color:#1D1D1F; line-height:1.3; margin-top:6px; } [data-theme='apple'] .sess-date { font-size:13px; color:#86868B; font-weight:400; } [data-theme='apple'] .status-pill { border-radius:99px; font-size:11px; font-weight:500; letter-spacing:.02em; padding:4px 12px; border:none; } [data-theme='apple'] .score-chip { font-family:var(--font-head); font-size:20px; font-weight:600; letter-spacing:-0.02em; color:#1D1D1F; } /* Chart + Marker cards */ [data-theme='apple'] .chart-card { background:#F5F5F7; border:none; border-radius:var(--r); box-shadow:none; padding:var(--card-pad); transition:var(--card-transition); } [data-theme='apple'] .chart-card:hover { box-shadow:var(--shadow-md); } [data-theme='apple'] .chart-card h3, [data-theme='apple'] .chart-card .card-title { font-family:var(--font-head); font-size:19px; font-weight:600; color:#1D1D1F; letter-spacing:-0.01em; } [data-theme='apple'] .marker-card { background:#F5F5F7; border:none; border-radius:var(--r); box-shadow:none; transition:var(--card-transition); } [data-theme='apple'] .marker-card:hover { box-shadow:var(--shadow-md); background:#FFFFFF; } [data-theme='apple'] .improvement-banner { background:var(--blue-l); border:none; border-radius:12px; } /* CTA card - light grey, dark text - Apple rarely uses dark CTAs */ [data-theme='apple'] .cta-card { background:#F5F5F7; border:none; border-radius:var(--r); padding:80px; box-shadow:none; text-align:center; } [data-theme='apple'] .cta-card h2, [data-theme='apple'] .cta-card .cta-title { font-family:var(--font-head); font-size:clamp(32px,5vw,52px); letter-spacing:-0.02em; font-weight:600; color:#1D1D1F; } [data-theme='apple'] .cta-card p, [data-theme='apple'] .cta-card .cta-sub { color:#86868B; font-size:17px; } [data-theme='apple'] .cta-btn { background:var(--blue); color:#FFFFFF; border-radius:99px; border:none; font-weight:500; font-size:15px; font-family:var(--font-head); padding:14px 28px; box-shadow:none; letter-spacing:-0.005em; transition:var(--card-transition); } [data-theme='apple'] .cta-btn:hover { transform:scale(1.02); background:color-mix(in srgb,var(--blue),black 8%); } [data-theme='apple'] .cta-btn:active { transform:scale(0.98); } /* Empty state */ [data-theme='apple'] .empty-state-card { background:#F5F5F7; border:none; border-radius:var(--r); box-shadow:none; padding:80px 48px; text-align:center; } [data-theme='apple'] .empty-state-card h2, [data-theme='apple'] .empty-state-card .empty-title { font-family:var(--font-head); font-size:24px; font-weight:600; letter-spacing:-0.015em; color:#1D1D1F; } [data-theme='apple'] .empty-state-btn { border-radius:99px; border:none; padding:13px 28px; font-weight:500; font-family:var(--font-head); transition:var(--card-transition); } [data-theme='apple'] .empty-state-btn:hover { transform:scale(1.02); } [data-theme='apple'] .empty-state-btn:active { transform:scale(0.98); } /* Sidebar */ [data-theme='apple'] .sidebar { background:rgba(255,255,255,.72); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-right:1px solid rgba(0,0,0,.06); } [data-theme='apple'] .sidebar .logo-text { font-family:var(--font-head); color:#1D1D1F; font-size:18px; font-weight:600; letter-spacing:-0.01em; } [data-theme='apple'] .sidebar-link { border-radius:10px; font-size:14px; font-weight:400; color:#1D1D1F; font-family:var(--font-head); transition:all .2s ease-out; } [data-theme='apple'] .sidebar-link:hover { background:rgba(0,0,0,.04); color:#1D1D1F; } [data-theme='apple'] .sidebar-link.active { background:rgba(0,102,204,.1); color:var(--blue); font-weight:500; } /* ═══════════════════════════ APPLE - REPORT PAGE ═══════════════════════════ */ [data-theme='apple'] .report-body, [data-theme='apple'] .report-page { background:#FFFFFF; } [data-theme='apple'] .report-nav, [data-theme='apple'] .rep-nav { background:rgba(255,255,255,.72); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:none; box-shadow:0 1px 0 rgba(0,0,0,.05); } [data-theme='apple'] .sec-title { font-family:var(--font-head); font-size:clamp(22px,3vw,28px); font-weight:600; letter-spacing:-0.015em; color:#1D1D1F; margin-bottom:20px; } [data-theme='apple'] .stat-pill { border-radius:99px; font-weight:500; font-size:13px; padding:5px 14px; background:#F5F5F7; border:none; box-shadow:none; color:#1D1D1F; font-family:var(--font-head); letter-spacing:-0.005em; } [data-theme='apple'] .stats-row { gap:8px; } /* All analysis cards */ [data-theme='apple'] .arc-card, [data-theme='apple'] .b60-card, [data-theme='apple'] .filler-card, [data-theme='apple'] .sent-card, [data-theme='apple'] .ch-card, [data-theme='apple'] .topic-card, [data-theme='apple'] .bs-card, [data-theme='apple'] .strength-card, [data-theme='apple'] .closing-card, [data-theme='apple'] .drill-card, [data-theme='apple'] .priority-section { background:#F5F5F7; border:none; border-radius:var(--r); box-shadow:none; transition:var(--card-transition); } [data-theme='apple'] .arc-card:hover, [data-theme='apple'] .b60-card:hover, [data-theme='apple'] .filler-card:hover, [data-theme='apple'] .sent-card:hover, [data-theme='apple'] .ch-card:hover, [data-theme='apple'] .topic-card:hover, [data-theme='apple'] .bs-card:hover, [data-theme='apple'] .strength-card:hover, [data-theme='apple'] .closing-card:hover, [data-theme='apple'] .drill-card:hover { box-shadow:var(--shadow-md); background:#FFFFFF; } /* Pause quality */ [data-theme='apple'] .pq-cell { border-radius:12px; padding:20px; background:#FFFFFF; border:none; } [data-theme='apple'] .pq-count { font-family:var(--font-head); font-size:36px; font-weight:600; letter-spacing:-0.03em; color:#1D1D1F; } [data-theme='apple'] .pq-label { font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.04em; color:#86868B; margin-top:4px; } /* Best 60s */ [data-theme='apple'] .b60-badge { border-radius:99px; font-size:11px; font-weight:500; background:var(--blue); color:#FFFFFF; border:none; padding:4px 12px; } [data-theme='apple'] .b60-head { font-family:var(--font-head); font-size:17px; font-weight:600; letter-spacing:-0.01em; color:#1D1D1F; } [data-theme='apple'] .b60-time { font-family:var(--font-head); font-size:28px; font-weight:600; letter-spacing:-0.03em; color:var(--blue); } /* Filler */ [data-theme='apple'] .filler-chip { border-radius:99px; font-size:13px; font-weight:400; padding:5px 14px; background:#FFFFFF; border:none; color:#1D1D1F; font-family:var(--font-head); box-shadow:var(--shadow); } /* Chapters */ [data-theme='apple'] .ch-item { padding:14px 0; border-bottom:1px solid rgba(0,0,0,.06); } [data-theme='apple'] .ch-item:last-child { border-bottom:none; } [data-theme='apple'] .ch-time { font-family:var(--font-head); font-weight:500; color:var(--blue); font-size:13px; } [data-theme='apple'] .ch-headline { font-size:15px; font-weight:500; color:#1D1D1F; font-family:var(--font-head); letter-spacing:-0.005em; } /* Topics */ [data-theme='apple'] .topic-pill { border-radius:99px; font-size:13px; font-weight:400; padding:6px 16px; background:#FFFFFF; border:none; box-shadow:var(--shadow); color:#1D1D1F; font-family:var(--font-head); } /* Blind spots */ [data-theme='apple'] .bs-grid { gap:var(--gap-cards); } [data-theme='apple'] .bs-card { padding:24px; } [data-theme='apple'] .strength-item { padding:14px 0; border-bottom:1px solid rgba(0,0,0,.06); } [data-theme='apple'] .strength-item:last-child { border-bottom:none; } /* Priority */ [data-theme='apple'] .priority-section { padding:32px; } [data-theme='apple'] .priority-section-title { font-family:var(--font-head); font-size:18px; font-weight:600; letter-spacing:-0.01em; color:#1D1D1F; } /* Drill card - white, clean */ [data-theme='apple'] .drill-card { background:#FFFFFF; padding:36px; } [data-theme='apple'] .drill-head { font-family:var(--font-head); font-size:20px; font-weight:600; letter-spacing:-0.015em; color:#1D1D1F; } [data-theme='apple'] .drill-badge { border-radius:99px; background:var(--blue); color:#FFFFFF; font-size:11px; font-weight:500; letter-spacing:.02em; padding:4px 12px; border:none; } /* Closing */ [data-theme='apple'] .closing-card { padding:36px; } [data-theme='apple'] .cl-av { width:52px; height:52px; border-radius:50%; filter:none; } [data-theme='apple'] .cl-name { font-family:var(--font-head); font-size:15px; font-weight:500; letter-spacing:-0.01em; color:#1D1D1F; } [data-theme='apple'] .cta-row { gap:12px; justify-content:center; } /* Limitation box - borderless, light grey */ [data-theme='apple'] .limitation-box { background:#F5F5F7; border:none; border-radius:12px; box-shadow:none; padding:16px 20px; font-size:13px; color:#86868B; } /* Layout */ [data-theme='apple'] { --layout-max:1200px; --content-max:700px; --hero-align:center; --hero-mx:auto; } [data-theme='apple'] .hero-inner, [data-theme='apple'] .hero-cta-row, [data-theme='apple'] .trust-row { text-align:center; align-items:center; } /* ═══════════════════════════════════════════════════════════ MINDVALLEY THEME - Mystical Premium (Dark-Mode First) Outfit + Playfair Display, deep night blue #0B0B10, gold #FACC15 CTAs, purple glow shadows, moody image filter, serif gold step numbers, purple gradient CTA card ═══════════════════════════════════════════════════════════ */ [data-theme='mindvalley'] { /* Gold primary, purple accent */ --blue:#FACC15; --blue-l:rgba(250,204,21,.12); --blue-m:rgba(250,204,21,.25); --blue-d:#D4A800; --green:#34D399; --green-l:rgba(52,211,153,.12); --red:#F87171; --red-l:rgba(248,113,113,.12); --amber:#FACC15; --amber-l:rgba(250,204,21,.12); /* Dark surfaces */ --text:#FFFFFF; --muted:#A1A1AA; --border:rgba(255,255,255,.08); --bg:#0B0B10; --white:#111118; /* "white" in dark = dark surface */ /* Glow shadows - not grey, atmospheric */ --shadow:0 4px 12px rgba(0,0,0,.5); --shadow-md:0 10px 40px rgba(138,43,226,.12); /* Shape */ --r:16px; /* Outfit + Playfair accent */ --font-head:'Outfit',system-ui,sans-serif; --font-accent:'Playfair Display',serif; /* Generous */ --section-py:100px; --section-px:24px; --card-pad:40px; --gap-cards:24px; --nav-height:72px; /* Moody images */ --img-r:16px; --img-filter:brightness(.85) contrast(1.1); /* Smooth */ --card-transition:all 0.5s ease; --hover-lift:translateY(-4px); --hover-shadow:0 20px 60px rgba(138,43,226,.20); /* Layout */ --layout-max:1280px; --content-max:680px; --hero-align:center; --hero-mx:auto; } /* ── Global - force dark everywhere ── */ [data-theme='mindvalley'] body { background:#0B0B10; font-family:'Outfit',system-ui,sans-serif; font-size:16px; line-height:1.7; color:#A1A1AA; -webkit-font-smoothing:antialiased; } [data-theme='mindvalley'] h1, [data-theme='mindvalley'] h2, [data-theme='mindvalley'] h3, [data-theme='mindvalley'] .section-title, [data-theme='mindvalley'] .card-title, [data-theme='mindvalley'] .hero-headline, [data-theme='mindvalley'] .welcome-title, [data-theme='mindvalley'] .cta-title, [data-theme='mindvalley'] .empty-title, [data-theme='mindvalley'] .sess-title { font-family:var(--font-head); color:#FFFFFF; letter-spacing:-0.02em; } /* Hard override - prevent any inherited light-mode text colors */ [data-theme='mindvalley'] p, [data-theme='mindvalley'] span:not(.ts-sublabel):not(.ts-label), [data-theme='mindvalley'] li, [data-theme='mindvalley'] label { color:#A1A1AA; } [data-theme='mindvalley'] strong, [data-theme='mindvalley'] b { color:#FFFFFF; } [data-theme='mindvalley'] img, [data-theme='mindvalley'] video, [data-theme='mindvalley'] .thumb, [data-theme='mindvalley'] .session-thumb, [data-theme='mindvalley'] .avatar-img { border-radius:var(--img-r); filter:var(--img-filter); } /* ── NAV - dark glass, gold logo ── */ [data-theme='mindvalley'] .top-nav { background:rgba(11,11,16,.80); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid rgba(255,255,255,.05); box-shadow:none; height:var(--nav-height); } [data-theme='mindvalley'] .nav-logo { font-family:var(--font-head); font-size:20px; font-weight:700; letter-spacing:-0.03em; color:#FFFFFF; } [data-theme='mindvalley'] .nav-tab { font-size:14px; font-weight:500; color:#A1A1AA; } [data-theme='mindvalley'] .nav-tab:hover { color:#FFFFFF; } [data-theme='mindvalley'] .nav-tab.active { color:var(--blue); border-bottom:2px solid var(--blue); font-weight:700; } /* ── HERO - deep night, centered, gold gradient headline ── */ [data-theme='mindvalley'] .hero-section { background:#0B0B10; padding:var(--section-py) var(--section-px); border-bottom:1px solid rgba(255,255,255,.05); text-align:center; } [data-theme='mindvalley'] .hero-inner { text-align:center; } [data-theme='mindvalley'] .hero-cta-row { justify-content:center; } [data-theme='mindvalley'] .trust-row { justify-content:center; font-size:13px; color:#71717A; } [data-theme='mindvalley'] h1 { font-family:var(--font-head); font-size:clamp(40px,6vw,72px); font-weight:700; letter-spacing:-0.03em; line-height:1.1; color:#FFFFFF; } /* Gold gradient on the accented word */ [data-theme='mindvalley'] h1 .grad { background:linear-gradient(90deg,#FACC15,#FDE68A); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } [data-theme='mindvalley'] .hero-pill { background:transparent; border:1px solid rgba(250,204,21,.40); color:var(--blue); padding:7px 18px; font-size:13px; font-weight:600; border-radius:99px; margin-bottom:32px; display:inline-flex; align-items:center; gap:6px; box-shadow:0 0 16px rgba(250,204,21,.10); } [data-theme='mindvalley'] .hero-pill-dot { background:var(--blue); } [data-theme='mindvalley'] .hero-sub { font-size:18px; line-height:1.8; color:#A1A1AA; max-width:var(--content-max); margin:0 auto 44px; font-family:var(--font-head); } /* ── BUTTONS - gold filled, gold glow ── */ [data-theme='mindvalley'] .btn-hero { background:var(--blue); border:none; border-radius:8px; padding:16px 36px; font-size:16px; font-weight:700; font-family:var(--font-head); color:#000000; box-shadow:0 8px 24px rgba(250,204,21,.20); letter-spacing:.01em; transition:var(--card-transition); } [data-theme='mindvalley'] .btn-hero:hover { background:color-mix(in srgb,var(--blue),white 10%); transform:scale(1.05); box-shadow:0 12px 36px rgba(250,204,21,.35); } [data-theme='mindvalley'] .btn-hero:active { transform:scale(0.98); } [data-theme='mindvalley'] .btn-hero-ghost { background:transparent; border:1px solid rgba(250,204,21,.35); border-radius:8px; padding:15px 32px; font-size:16px; font-weight:600; font-family:var(--font-head); color:var(--blue); transition:var(--card-transition); } [data-theme='mindvalley'] .btn-hero-ghost:hover { background:rgba(250,204,21,.08); border-color:var(--blue); transform:scale(1.03); } [data-theme='mindvalley'] .btn { border-radius:8px; border:none; padding:13px 28px; font-size:15px; font-weight:700; font-family:var(--font-head); transition:var(--card-transition); } [data-theme='mindvalley'] .btn:hover { transform:scale(1.05); } /* ── CARDS - dark surface, purple glow on hover ── */ [data-theme='mindvalley'] .card { background:#111118; border:1px solid rgba(255,255,255,.07); border-radius:var(--r); box-shadow:var(--shadow); padding:var(--card-pad); transition:var(--card-transition); } [data-theme='mindvalley'] .card:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); border-color:rgba(138,43,226,.25); } [data-theme='mindvalley'] .card-title { font-family:var(--font-head); font-size:18px; font-weight:700; color:#FFFFFF; } /* ── UPLOAD SECTION ── */ [data-theme='mindvalley'] .upload-section { padding:var(--section-py) var(--section-px); background:#0B0B10; } [data-theme='mindvalley'] .card-header { padding:32px 40px 0; border-bottom:1px solid rgba(255,255,255,.06); } [data-theme='mindvalley'] .card-body { padding:28px 40px 40px; } [data-theme='mindvalley'] .card-sub-text { font-size:14px; color:#71717A; margin-top:4px; } [data-theme='mindvalley'] .tab-bar { border:1px solid rgba(255,255,255,.08); background:#1A1A24; border-radius:8px; padding:4px; gap:4px; } [data-theme='mindvalley'] .tab-btn { border-radius:6px; font-size:14px; font-weight:500; font-family:var(--font-head); color:#A1A1AA; } [data-theme='mindvalley'] .tab-btn.active { border-radius:6px; background:#FFFFFF; color:#000000; font-weight:700; box-shadow:0 2px 8px rgba(0,0,0,.4); } [data-theme='mindvalley'] .dropzone { border-radius:12px; border:1.5px dashed rgba(250,204,21,.25); padding:72px 24px; background:rgba(250,204,21,.03); transition:var(--card-transition); } [data-theme='mindvalley'] .dropzone:hover { border-color:var(--blue); background:rgba(250,204,21,.07); box-shadow:0 0 32px rgba(250,204,21,.08); } [data-theme='mindvalley'] .dz-main { font-family:var(--font-head); font-size:19px; font-weight:700; color:#FFFFFF; } [data-theme='mindvalley'] .dz-hint { font-size:14px; color:#71717A; margin-top:6px; } [data-theme='mindvalley'] .field input, [data-theme='mindvalley'] .field select { border-radius:8px; border:1px solid rgba(255,255,255,.10); padding:13px 16px; background:#1A1A24; font-size:15px; font-family:var(--font-head); color:#FFFFFF; transition:var(--card-transition); } [data-theme='mindvalley'] .field input:focus, [data-theme='mindvalley'] .field select:focus { outline:none; border-color:rgba(250,204,21,.50); box-shadow:0 0 0 3px rgba(250,204,21,.08); background:#1A1A24; } [data-theme='mindvalley'] .field label { font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#71717A; margin-bottom:8px; display:block; } [data-theme='mindvalley'] .loom-url-field { border-radius:8px; border:1px solid rgba(255,255,255,.10); padding:13px 16px; background:#1A1A24; font-family:var(--font-head); color:#FFFFFF; } [data-theme='mindvalley'] .ctx-grid { gap:16px; } /* ── HOW IT WORKS - dark purple, serif gold step numbers ── */ [data-theme='mindvalley'] .hiw-section { background:#1A1A24; padding:var(--section-py) var(--section-px); border-top:1px solid rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.05); color:#FFFFFF; } [data-theme='mindvalley'] .hiw-section .section-title { color:#FFFFFF; font-size:clamp(30px,5vw,48px); font-weight:700; } [data-theme='mindvalley'] .hiw-section .section-sub { color:#71717A; font-size:17px; } [data-theme='mindvalley'] .hiw-step { background:#111118; border:1px solid rgba(255,255,255,.07); box-shadow:var(--shadow); border-radius:var(--r); padding:48px; color:#FFFFFF; transition:var(--card-transition); } [data-theme='mindvalley'] .hiw-step:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); border-color:rgba(138,43,226,.25); } /* Serif gold step numbers - the editorial signature */ [data-theme='mindvalley'] .hiw-step .step-num, [data-theme='mindvalley'] .hiw-num-label { font-family:var(--font-accent); font-size:72px; font-weight:600; font-style:italic; color:var(--blue); line-height:1; margin-bottom:20px; display:block; letter-spacing:-0.02em; } [data-theme='mindvalley'] .hiw-step-title { font-family:var(--font-head); font-size:19px; font-weight:700; color:#FFFFFF; margin-bottom:10px; } [data-theme='mindvalley'] .hiw-step-desc { font-size:15px; line-height:1.75; color:#71717A; } [data-theme='mindvalley'] .section-eyebrow { font-size:11px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--blue); margin-bottom:14px; display:block; } /* ── SECTION TITLE ── */ [data-theme='mindvalley'] .section-title { font-family:var(--font-head); font-size:clamp(28px,4.5vw,44px); font-weight:700; letter-spacing:-0.025em; color:#FFFFFF; } /* ── MARKERS ── */ [data-theme='mindvalley'] .markers-section { padding:var(--section-py) var(--section-px); background:#0B0B10; } [data-theme='mindvalley'] .marker-chip { background:#111118; border:1px solid rgba(255,255,255,.07); border-radius:12px; box-shadow:var(--shadow); padding:20px; transition:var(--card-transition); } [data-theme='mindvalley'] .marker-chip:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); border-color:rgba(138,43,226,.25); } [data-theme='mindvalley'] .mc-icon.visual { background:rgba(250,204,21,.15); color:#FACC15; border-radius:10px; } [data-theme='mindvalley'] .mc-icon.prosody { background:rgba(138,43,226,.20); color:#C084FC; border-radius:10px; } [data-theme='mindvalley'] .mc-icon.advanced { background:rgba(52,211,153,.15); color:#34D399; border-radius:10px; } [data-theme='mindvalley'] .mc-name { font-size:14px; font-weight:600; color:#FFFFFF; font-family:var(--font-head); } [data-theme='mindvalley'] .mc-type { font-size:11px; text-transform:uppercase; letter-spacing:.07em; font-weight:600; color:#71717A; } /* ── PROGRESS ── */ [data-theme='mindvalley'] .prog-card { background:#111118; border:1px solid rgba(255,255,255,.07); border-radius:var(--r); box-shadow:var(--shadow); padding:var(--card-pad); } [data-theme='mindvalley'] .step { border-radius:8px; padding:12px 16px; background:rgba(255,255,255,.04); } [data-theme='mindvalley'] .err-box { border-radius:8px; } /* ── GATE / PAYMENT ── */ [data-theme='mindvalley'] .gate-card { background:#111118; border:1px solid rgba(255,255,255,.07); border-radius:var(--r); box-shadow:var(--shadow-md); padding:var(--card-pad); } [data-theme='mindvalley'] .gate-btn-primary { border-radius:8px; border:none; font-family:var(--font-head); font-weight:700; padding:15px 32px; background:var(--blue); color:#000000; box-shadow:0 8px 24px rgba(250,204,21,.20); transition:var(--card-transition); } [data-theme='mindvalley'] .gate-btn-primary:hover { transform:scale(1.05); box-shadow:0 12px 36px rgba(250,204,21,.35); } [data-theme='mindvalley'] .gate-btn-demo { border-radius:8px; border:1px solid rgba(255,255,255,.12); color:#A1A1AA; background:transparent; font-weight:500; } [data-theme='mindvalley'] .gate-btn { border-radius:8px; } [data-theme='mindvalley'] .gate-input { border-radius:8px; border:1px solid rgba(255,255,255,.10); padding:13px 16px; background:#1A1A24; font-family:var(--font-head); color:#FFFFFF; } /* ═══════════════════════════ MINDVALLEY - DASHBOARD ═══════════════════════════ */ [data-theme='mindvalley'] .dash-body, [data-theme='mindvalley'] .dash-page { background:#0B0B10; } /* Welcome hero - deep dark, gold CTA */ [data-theme='mindvalley'] .welcome-hero { background:#111118; border:1px solid rgba(255,255,255,.07); border-radius:var(--r); padding:48px; box-shadow:0 10px 40px rgba(138,43,226,.10); color:#FFFFFF; } [data-theme='mindvalley'] .welcome-hero h2, [data-theme='mindvalley'] .welcome-hero .welcome-title { font-family:var(--font-head); font-size:clamp(24px,3vw,34px); font-weight:700; letter-spacing:-0.025em; color:#FFFFFF; } [data-theme='mindvalley'] .welcome-hero .welcome-hero-sub, [data-theme='mindvalley'] .welcome-hero .welcome-hero-meta { color:#71717A; } [data-theme='mindvalley'] .welcome-cta { background:var(--blue); color:#000000; border-radius:8px; border:none; padding:12px 28px; font-size:14px; font-weight:700; font-family:var(--font-head); box-shadow:0 8px 24px rgba(250,204,21,.20); transition:var(--card-transition); } [data-theme='mindvalley'] .welcome-cta:hover { transform:scale(1.05); box-shadow:0 12px 36px rgba(250,204,21,.35); } /* Stat cards */ [data-theme='mindvalley'] .stat-card { background:#111118; border:1px solid rgba(255,255,255,.07); border-radius:var(--r); box-shadow:var(--shadow); padding:32px 28px; transition:var(--card-transition); } [data-theme='mindvalley'] .stat-card:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); border-color:rgba(138,43,226,.25); } /* Serif gold stat numbers */ [data-theme='mindvalley'] .stat-n, [data-theme='mindvalley'] .stat-card .stat-value { font-family:var(--font-accent); font-size:64px; font-weight:600; letter-spacing:-0.03em; color:var(--blue); line-height:1; } [data-theme='mindvalley'] .stat-l, [data-theme='mindvalley'] .stat-card .stat-label { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:#71717A; margin-top:8px; } [data-theme='mindvalley'] .stat-icon { border-radius:10px; background:rgba(250,204,21,.12); } /* Session cards */ [data-theme='mindvalley'] .sessions-grid { gap:var(--gap-cards); } [data-theme='mindvalley'] .sess-card { background:#111118; border:1px solid rgba(255,255,255,.07); border-left:none; border-radius:var(--r); box-shadow:var(--shadow); padding:var(--card-pad); transition:var(--card-transition); } [data-theme='mindvalley'] .sess-card:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); border-color:rgba(138,43,226,.25); } [data-theme='mindvalley'] .sess-num { font-family:var(--font-head); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#71717A; } [data-theme='mindvalley'] .sess-topic { font-family:var(--font-head); font-size:17px; font-weight:700; letter-spacing:-0.02em; color:#FFFFFF; line-height:1.3; margin-top:6px; } [data-theme='mindvalley'] .sess-date { font-size:13px; color:#71717A; font-weight:500; } [data-theme='mindvalley'] .status-pill { border-radius:99px; font-size:11px; font-weight:600; letter-spacing:.03em; padding:4px 12px; } [data-theme='mindvalley'] .score-chip { font-family:var(--font-accent); font-size:22px; font-weight:600; color:var(--blue); } /* Chart + Marker cards */ [data-theme='mindvalley'] .chart-card { background:#111118; border:1px solid rgba(255,255,255,.07); border-radius:var(--r); box-shadow:var(--shadow); padding:var(--card-pad); transition:var(--card-transition); } [data-theme='mindvalley'] .chart-card:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); } [data-theme='mindvalley'] .chart-card h3, [data-theme='mindvalley'] .chart-card .card-title { font-family:var(--font-head); font-size:18px; font-weight:700; color:#FFFFFF; } [data-theme='mindvalley'] .marker-card { background:#111118; border:1px solid rgba(255,255,255,.07); border-radius:var(--r); box-shadow:var(--shadow); transition:var(--card-transition); } [data-theme='mindvalley'] .marker-card:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); border-color:rgba(138,43,226,.25); } [data-theme='mindvalley'] .improvement-banner { background:rgba(250,204,21,.10); border:1px solid rgba(250,204,21,.20); border-radius:12px; } /* CTA card - deep purple gradient */ [data-theme='mindvalley'] .cta-card { background:linear-gradient(135deg,#2E1065,#4C1D95); border:1px solid rgba(138,43,226,.30); border-radius:var(--r); padding:80px; box-shadow:0 20px 60px rgba(138,43,226,.20); text-align:center; } [data-theme='mindvalley'] .cta-card h2, [data-theme='mindvalley'] .cta-card .cta-title { font-family:var(--font-head); font-size:clamp(28px,4vw,44px); letter-spacing:-0.025em; font-weight:700; color:#FFFFFF; } [data-theme='mindvalley'] .cta-card p, [data-theme='mindvalley'] .cta-card .cta-sub { color:rgba(255,255,255,.70); font-size:17px; } [data-theme='mindvalley'] .cta-btn { background:var(--blue); color:#000000; border-radius:8px; border:none; font-weight:700; font-size:15px; font-family:var(--font-head); padding:14px 36px; box-shadow:0 8px 24px rgba(250,204,21,.25); transition:var(--card-transition); } [data-theme='mindvalley'] .cta-btn:hover { transform:scale(1.05); box-shadow:0 14px 40px rgba(250,204,21,.40); } /* Empty state */ [data-theme='mindvalley'] .empty-state-card { background:#111118; border:1px solid rgba(255,255,255,.07); border-radius:var(--r); box-shadow:var(--shadow-md); padding:72px 48px; text-align:center; } [data-theme='mindvalley'] .empty-state-card h2, [data-theme='mindvalley'] .empty-state-card .empty-title { font-family:var(--font-head); font-size:26px; font-weight:700; letter-spacing:-0.025em; color:#FFFFFF; } [data-theme='mindvalley'] .empty-state-btn { border-radius:8px; border:none; padding:13px 32px; font-weight:700; font-family:var(--font-head); box-shadow:0 8px 24px rgba(250,204,21,.20); transition:var(--card-transition); } [data-theme='mindvalley'] .empty-state-btn:hover { transform:scale(1.05); } /* Sidebar */ [data-theme='mindvalley'] .sidebar { background:#111118; border-right:1px solid rgba(255,255,255,.06); } [data-theme='mindvalley'] .sidebar .logo-text { font-family:var(--font-head); color:#FFFFFF; font-size:20px; font-weight:700; } [data-theme='mindvalley'] .sidebar-link { border-radius:8px; font-size:14px; font-weight:500; color:#A1A1AA; font-family:var(--font-head); transition:all .2s; } [data-theme='mindvalley'] .sidebar-link:hover { background:rgba(255,255,255,.06); color:#FFFFFF; } [data-theme='mindvalley'] .sidebar-link.active { background:rgba(250,204,21,.12); color:var(--blue); font-weight:700; } /* ═══════════════════════════ MINDVALLEY - REPORT PAGE ═══════════════════════════ */ [data-theme='mindvalley'] .report-body, [data-theme='mindvalley'] .report-page { background:#0B0B10; } [data-theme='mindvalley'] .report-nav, [data-theme='mindvalley'] .rep-nav { background:rgba(11,11,16,.80); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid rgba(255,255,255,.05); box-shadow:none; } [data-theme='mindvalley'] .sec-title { font-family:var(--font-head); font-size:clamp(20px,2.5vw,26px); font-weight:700; letter-spacing:-0.025em; color:#FFFFFF; margin-bottom:16px; } [data-theme='mindvalley'] .stat-pill { border-radius:99px; font-weight:600; font-size:13px; padding:5px 16px; background:#111118; border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow); color:#A1A1AA; font-family:var(--font-head); } [data-theme='mindvalley'] .stats-row { gap:10px; } /* All analysis cards */ [data-theme='mindvalley'] .arc-card, [data-theme='mindvalley'] .b60-card, [data-theme='mindvalley'] .filler-card, [data-theme='mindvalley'] .sent-card, [data-theme='mindvalley'] .ch-card, [data-theme='mindvalley'] .topic-card, [data-theme='mindvalley'] .bs-card, [data-theme='mindvalley'] .strength-card, [data-theme='mindvalley'] .closing-card, [data-theme='mindvalley'] .drill-card, [data-theme='mindvalley'] .priority-section { background:#111118; border:1px solid rgba(255,255,255,.07); border-radius:var(--r); box-shadow:var(--shadow); transition:var(--card-transition); } [data-theme='mindvalley'] .arc-card:hover, [data-theme='mindvalley'] .b60-card:hover, [data-theme='mindvalley'] .filler-card:hover, [data-theme='mindvalley'] .sent-card:hover, [data-theme='mindvalley'] .ch-card:hover, [data-theme='mindvalley'] .topic-card:hover, [data-theme='mindvalley'] .bs-card:hover, [data-theme='mindvalley'] .strength-card:hover, [data-theme='mindvalley'] .closing-card:hover, [data-theme='mindvalley'] .drill-card:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); border-color:rgba(138,43,226,.25); } /* Pause quality */ [data-theme='mindvalley'] .pq-cell { border-radius:10px; padding:20px; background:#1A1A24; border:1px solid rgba(255,255,255,.05); } [data-theme='mindvalley'] .pq-count { font-family:var(--font-accent); font-size:36px; font-weight:600; color:var(--blue); } [data-theme='mindvalley'] .pq-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:#71717A; margin-top:4px; } /* Best 60s */ [data-theme='mindvalley'] .b60-badge { border-radius:99px; font-size:11px; font-weight:700; background:rgba(250,204,21,.12); border:1px solid rgba(250,204,21,.25); color:var(--blue); padding:4px 12px; } [data-theme='mindvalley'] .b60-head { font-family:var(--font-head); font-size:17px; font-weight:700; color:#FFFFFF; } [data-theme='mindvalley'] .b60-time { font-family:var(--font-accent); font-size:28px; font-weight:600; color:var(--blue); } /* Filler */ [data-theme='mindvalley'] .filler-chip { border-radius:99px; font-size:13px; font-weight:600; padding:5px 14px; background:#1A1A24; border:1px solid rgba(255,255,255,.08); color:#A1A1AA; font-family:var(--font-head); } /* Chapters */ [data-theme='mindvalley'] .ch-item { padding:14px 0; border-bottom:1px solid rgba(255,255,255,.06); } [data-theme='mindvalley'] .ch-item:last-child { border-bottom:none; } [data-theme='mindvalley'] .ch-time { font-family:var(--font-accent); font-weight:600; color:var(--blue); font-size:13px; font-style:italic; } [data-theme='mindvalley'] .ch-headline { font-size:15px; font-weight:600; color:#FFFFFF; font-family:var(--font-head); } /* Topics */ [data-theme='mindvalley'] .topic-pill { border-radius:99px; font-size:13px; font-weight:600; padding:6px 16px; background:#1A1A24; border:1px solid rgba(255,255,255,.08); color:#A1A1AA; font-family:var(--font-head); } /* Blind spots */ [data-theme='mindvalley'] .bs-grid { gap:var(--gap-cards); } [data-theme='mindvalley'] .bs-card { padding:24px; } [data-theme='mindvalley'] .strength-item { padding:14px 0; border-bottom:1px solid rgba(255,255,255,.06); } [data-theme='mindvalley'] .strength-item:last-child { border-bottom:none; } /* Priority */ [data-theme='mindvalley'] .priority-section { padding:28px; } [data-theme='mindvalley'] .priority-section-title { font-family:var(--font-head); font-size:18px; font-weight:700; color:#FFFFFF; } /* Drill card - dark */ [data-theme='mindvalley'] .drill-card { padding:32px; color:#FFFFFF; } [data-theme='mindvalley'] .drill-head { font-family:var(--font-head); font-size:20px; font-weight:700; letter-spacing:-0.025em; color:#FFFFFF; } [data-theme='mindvalley'] .drill-badge { border-radius:99px; background:rgba(250,204,21,.12); border:1px solid rgba(250,204,21,.25); color:var(--blue); font-size:11px; font-weight:700; letter-spacing:.05em; padding:4px 12px; } /* Closing */ [data-theme='mindvalley'] .closing-card { padding:32px; } [data-theme='mindvalley'] .cl-av { width:52px; height:52px; border-radius:50%; filter:var(--img-filter); } [data-theme='mindvalley'] .cl-name { font-family:var(--font-head); font-size:15px; font-weight:700; color:#FFFFFF; } [data-theme='mindvalley'] .cta-row { gap:12px; justify-content:center; } /* Limitation box - gold tint */ [data-theme='mindvalley'] .limitation-box { background:rgba(250,204,21,.08); border:1px solid rgba(250,204,21,.25); border-radius:10px; box-shadow:none; padding:16px 20px; font-size:13px; color:#A1A1AA; } /* Layout */ [data-theme='mindvalley'] { --layout-max:1280px; --content-max:680px; --hero-align:center; --hero-mx:auto; } [data-theme='mindvalley'] .hero-inner, [data-theme='mindvalley'] .hero-cta-row, [data-theme='mindvalley'] .trust-row { text-align:center; align-items:center; } /* ═══════════════════════════════════════════════════════════ STRIPE THEME - Fintech Perfection Source: stripe.com design language (2024) Inter font, #635BFF Blurple, #F6F9FC klinisch grau-blau, Multi-layer blaugetönte Schatten, 0.15s snappy transitions, Deep Navy #0A2540 contrast sections, extreme Präzision ═══════════════════════════════════════════════════════════ */ [data-theme='stripe'] { /* ── Brand palette - Blurple ── */ --blue:#635BFF; --blue-l:#F0EEFF; --blue-m:#D6D3FF; --blue-d:#4D45DB; --green:#0ABF53; --green-l:#EDFCF2; --red:#DF1B41; --red-l:#FFF0F3; --amber:#E68A00; --amber-l:#FFF8EB; /* ── Surfaces - klinisches Grau-Blau ── */ --text:#0A2540; --muted:#425466; --border:rgba(0,0,0,0.05); --bg:#F6F9FC; --white:#FFFFFF; /* ── Multi-layer Stripe shadows (CRITICAL) ── */ --shadow:0 2px 5px -1px rgba(50,50,93,0.25), 0 1px 3px -1px rgba(0,0,0,0.3); --shadow-md:0 13px 27px -5px rgba(50,50,93,0.25), 0 8px 16px -8px rgba(0,0,0,0.3); /* ── Shape ── */ --r:16px; /* ── Inter - Industry standard ── */ --font-head:'Inter',system-ui,sans-serif; /* ── Spacing - generous, professional ── */ --section-py:96px; --section-px:24px; --card-pad:32px; --gap-cards:24px; --nav-height:64px; /* ── Images ── */ --img-r:16px; --img-filter:contrast(1.02); /* ── Interaction - snappy, razor-sharp ── */ --card-transition:all 0.15s ease; --hover-lift:translateY(-2px); --hover-shadow:0 30px 60px -12px rgba(50,50,93,0.25), 0 18px 36px -18px rgba(0,0,0,0.3); /* ── Layout ── */ --layout-max:1280px; --content-max:680px; --hero-align:left; --hero-mx:0; } /* ───────────────────────────────── GLOBAL: body, typography, images ───────────────────────────────── */ [data-theme='stripe'] body { background:#F6F9FC; font-family:'Inter',system-ui,sans-serif; font-size:16px; line-height:1.7; color:#425466; } [data-theme='stripe'] h1, [data-theme='stripe'] h2, [data-theme='stripe'] h3, [data-theme='stripe'] .section-title, [data-theme='stripe'] .card-title, [data-theme='stripe'] .hero-headline, [data-theme='stripe'] .welcome-title, [data-theme='stripe'] .cta-title, [data-theme='stripe'] .empty-title, [data-theme='stripe'] .sess-title { font-family:'Inter',system-ui,sans-serif; color:#0A2540; letter-spacing:-0.03em; } [data-theme='stripe'] p, [data-theme='stripe'] .hero-sub, [data-theme='stripe'] .card-sub-text, [data-theme='stripe'] .section-sub { color:#425466; } [data-theme='stripe'] img, [data-theme='stripe'] video, [data-theme='stripe'] .thumb, [data-theme='stripe'] .session-thumb, [data-theme='stripe'] .avatar-img { border-radius:var(--img-r); filter:contrast(1.02); } /* ───────────────────────────────── NAV - Frosted glass, no border, no shadow ───────────────────────────────── */ [data-theme='stripe'] .top-nav { background:rgba(246,249,252,0.8); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:none; box-shadow:none; height:var(--nav-height); } [data-theme='stripe'] .nav-logo { font-family:'Inter',system-ui,sans-serif; font-size:18px; font-weight:800; letter-spacing:-0.03em; color:#0A2540; } [data-theme='stripe'] .nav-tab { font-size:14px; font-weight:500; color:#425466; letter-spacing:0; } [data-theme='stripe'] .nav-tab:hover { color:#635BFF; } [data-theme='stripe'] .nav-tab.active { color:#635BFF; border-bottom:2px solid #635BFF; font-weight:600; } /* ───────────────────────────────── HERO - #F6F9FC, left-aligned ───────────────────────────────── */ [data-theme='stripe'] .hero-section { background:#F6F9FC; padding:var(--section-py) var(--section-px); border-bottom:none; text-align:left; } [data-theme='stripe'] .hero-inner { text-align:left; } [data-theme='stripe'] .hero-cta-row { justify-content:flex-start; } [data-theme='stripe'] .trust-row { justify-content:flex-start; font-size:13px; color:#425466; } [data-theme='stripe'] h1 { font-family:'Inter',system-ui,sans-serif; font-size:clamp(44px,6vw,76px); font-weight:800; letter-spacing:-0.03em; line-height:1.05; color:#0A2540; } [data-theme='stripe'] h1 .grad { background:linear-gradient(135deg,#635BFF 0%,#A960EE 50%,#F8A03E 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } [data-theme='stripe'] .hero-pill { background:#635BFF; border:none; color:#FFFFFF; padding:8px 16px; font-size:13px; font-weight:600; border-radius:99px; margin-bottom:32px; box-shadow:0 4px 6px rgba(50,50,93,0.11), 0 1px 3px rgba(0,0,0,0.08); display:inline-flex; align-items:center; gap:6px; } [data-theme='stripe'] .hero-pill-dot { background:#FFFFFF; } [data-theme='stripe'] .hero-sub { font-size:20px; line-height:1.7; color:#425466; max-width:var(--content-max); margin:0 0 40px 0; font-family:'Inter',system-ui,sans-serif; } /* ───────────────────────────────── BUTTONS - Pill-shaped, Blurple, multi-layer shadows ───────────────────────────────── */ [data-theme='stripe'] .btn-hero { background:#635BFF; border-radius:99px; padding:14px 32px; font-size:16px; font-weight:600; font-family:'Inter',system-ui,sans-serif; letter-spacing:0; box-shadow:0 4px 6px rgba(50,50,93,0.11), 0 1px 3px rgba(0,0,0,0.08); transition:all 0.15s ease; border:none; } [data-theme='stripe'] .btn-hero:hover { background:color-mix(in srgb, #635BFF, black 8%); transform:translateY(-1px); box-shadow:0 7px 14px rgba(50,50,93,0.1), 0 3px 6px rgba(0,0,0,0.08); } [data-theme='stripe'] .btn-hero-ghost { border-radius:99px; padding:13px 28px; font-size:16px; font-weight:600; font-family:'Inter',system-ui,sans-serif; border:1px solid rgba(0,0,0,0.05); color:#0A2540; background:#FFFFFF; box-shadow:0 2px 5px -1px rgba(50,50,93,0.25), 0 1px 3px -1px rgba(0,0,0,0.3); transition:all 0.15s ease; } [data-theme='stripe'] .btn-hero-ghost:hover { box-shadow:0 7px 14px rgba(50,50,93,0.1), 0 3px 6px rgba(0,0,0,0.08); transform:translateY(-1px); } [data-theme='stripe'] .btn { border-radius:99px; padding:12px 24px; font-size:15px; font-weight:600; font-family:'Inter',system-ui,sans-serif; box-shadow:0 4px 6px rgba(50,50,93,0.11), 0 1px 3px rgba(0,0,0,0.08); transition:all 0.15s ease; } [data-theme='stripe'] .btn:hover { transform:translateY(-1px); box-shadow:0 7px 14px rgba(50,50,93,0.1), 0 3px 6px rgba(0,0,0,0.08); } /* ───────────────────────────────── CARDS - White, multi-layer shadows ───────────────────────────────── */ [data-theme='stripe'] .card { background:#FFFFFF; border:none; border-radius:var(--r); box-shadow:var(--shadow); padding:var(--card-pad); transition:var(--card-transition); } [data-theme='stripe'] .card:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); } [data-theme='stripe'] .card-title { font-family:'Inter',system-ui,sans-serif; font-size:18px; font-weight:700; color:#0A2540; } /* ───────────────────────────────── UPLOAD SECTION ───────────────────────────────── */ [data-theme='stripe'] .upload-section { padding:var(--section-py) var(--section-px); background:#F6F9FC; } [data-theme='stripe'] .card-header { padding:28px 32px 0; border-bottom:none; } [data-theme='stripe'] .card-body { padding:24px 32px 32px; } [data-theme='stripe'] .card-sub-text { font-size:14px; color:#425466; margin-top:4px; } [data-theme='stripe'] .tab-bar { border:none; background:#FFFFFF; border-radius:99px; padding:4px; gap:4px; box-shadow:var(--shadow); } [data-theme='stripe'] .tab-btn { border-radius:99px; font-size:14px; font-weight:500; color:#425466; } [data-theme='stripe'] .tab-btn.active { border-radius:99px; box-shadow:0 2px 5px -1px rgba(50,50,93,0.25), 0 1px 3px -1px rgba(0,0,0,0.3); background:#FFFFFF; font-weight:600; color:#0A2540; } [data-theme='stripe'] .dropzone { border-radius:12px; border:2px dashed rgba(0,0,0,0.1); padding:72px 24px; background:#FFFFFF; transition:all 0.15s ease; } [data-theme='stripe'] .dropzone:hover { border-color:#635BFF; background:#F0EEFF; } [data-theme='stripe'] .dz-main { font-family:'Inter',system-ui,sans-serif; font-size:18px; font-weight:700; color:#0A2540; } [data-theme='stripe'] .dz-hint { font-size:14px; color:#425466; margin-top:6px; } [data-theme='stripe'] .field input, [data-theme='stripe'] .field select { border-radius:8px; border:1px solid rgba(0,0,0,0.1); padding:12px 14px; background:#FFFFFF; font-size:15px; font-family:'Inter',system-ui,sans-serif; transition:border-color .15s, box-shadow .15s; box-shadow:0 1px 2px rgba(50,50,93,0.08), 0 1px 1px rgba(0,0,0,0.04); } [data-theme='stripe'] .field input:focus, [data-theme='stripe'] .field select:focus { border-color:#635BFF; box-shadow:0 0 0 3px rgba(99,91,255,0.15); outline:none; } [data-theme='stripe'] .field label { font-size:13px; font-weight:600; letter-spacing:0; color:#0A2540; margin-bottom:6px; display:block; } [data-theme='stripe'] .loom-url-field { border-radius:8px; border:1px solid rgba(0,0,0,0.1); padding:12px 14px; font-family:'Inter',system-ui,sans-serif; box-shadow:0 1px 2px rgba(50,50,93,0.08), 0 1px 1px rgba(0,0,0,0.04); } /* ───────────────────────────────── HOW IT WORKS - Deep Navy dark section (Layout-Bruch) ───────────────────────────────── */ [data-theme='stripe'] .hiw-section { background:#0A2540; padding:var(--section-py) var(--section-px); border-top:none; border-bottom:none; color:#FFFFFF; } [data-theme='stripe'] .hiw-section .section-title { color:#FFFFFF; font-size:clamp(28px,4vw,44px); font-weight:800; } [data-theme='stripe'] .hiw-section .section-sub { color:rgba(255,255,255,0.6); font-size:17px; } [data-theme='stripe'] .hiw-step { background:#FFFFFF; border:none; box-shadow:0 13px 27px -5px rgba(50,50,93,0.25), 0 8px 16px -8px rgba(0,0,0,0.3); border-radius:var(--r); padding:32px; color:#0A2540; transition:var(--card-transition); } [data-theme='stripe'] .hiw-step:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); } [data-theme='stripe'] .hiw-step .step-num, [data-theme='stripe'] .hiw-num-label { font-family:'Inter',system-ui,sans-serif; font-size:40px; font-weight:800; color:#635BFF; line-height:1; margin-bottom:16px; display:block; letter-spacing:-0.04em; } [data-theme='stripe'] .hiw-step-title { font-family:'Inter',system-ui,sans-serif; font-size:18px; font-weight:700; color:#0A2540; margin-bottom:10px; } [data-theme='stripe'] .hiw-step-desc { font-size:15px; line-height:1.7; color:#425466; } [data-theme='stripe'] .section-eyebrow { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#635BFF; margin-bottom:14px; } /* ───────────────────────────────── SECTION TITLE (generic) ───────────────────────────────── */ [data-theme='stripe'] .section-title { font-family:'Inter',system-ui,sans-serif; font-size:clamp(26px,4vw,40px); font-weight:800; letter-spacing:-0.03em; color:#0A2540; } /* ───────────────────────────────── MARKERS ───────────────────────────────── */ [data-theme='stripe'] .markers-section { padding:var(--section-py) var(--section-px); background:#F6F9FC; } [data-theme='stripe'] .marker-chip { background:#FFFFFF; border:none; border-radius:var(--r); box-shadow:var(--shadow); padding:20px; transition:var(--card-transition); } [data-theme='stripe'] .marker-chip:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); } [data-theme='stripe'] .mc-icon.visual { background:rgba(99,91,255,0.08); color:#635BFF; border-radius:12px; } [data-theme='stripe'] .mc-icon.prosody { background:rgba(10,191,83,0.08); color:#0ABF53; border-radius:12px; } [data-theme='stripe'] .mc-icon.advanced { background:rgba(230,138,0,0.08); color:#E68A00; border-radius:12px; } [data-theme='stripe'] .mc-name { font-size:14px; font-weight:600; color:#0A2540; font-family:'Inter',system-ui,sans-serif; } [data-theme='stripe'] .mc-type { font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:600; color:#425466; } /* ───────────────────────────────── PROGRESS / PROCESSING ───────────────────────────────── */ [data-theme='stripe'] .prog-card { background:#FFFFFF; border:none; border-radius:var(--r); box-shadow:var(--shadow-md); padding:var(--card-pad); } [data-theme='stripe'] .step { border-radius:10px; padding:12px 16px; } [data-theme='stripe'] .err-box { border-radius:10px; } /* ───────────────────────────────── GATE / PAYMENT CARD ───────────────────────────────── */ [data-theme='stripe'] .gate-card { background:#FFFFFF; border:none; border-radius:var(--r); box-shadow:var(--shadow-md); padding:var(--card-pad); } [data-theme='stripe'] .gate-btn-primary { border-radius:99px; font-family:'Inter',system-ui,sans-serif; font-weight:600; padding:14px 28px; box-shadow:0 4px 6px rgba(50,50,93,0.11), 0 1px 3px rgba(0,0,0,0.08); } [data-theme='stripe'] .gate-btn-demo { border-radius:99px; border:1px solid rgba(0,0,0,0.05); color:#0A2540; background:#FFFFFF; font-weight:600; box-shadow:var(--shadow); } [data-theme='stripe'] .gate-btn { border-radius:99px; } [data-theme='stripe'] .gate-input { border-radius:8px; border:1px solid rgba(0,0,0,0.1); padding:12px 14px; background:#FFFFFF; font-family:'Inter',system-ui,sans-serif; box-shadow:0 1px 2px rgba(50,50,93,0.08), 0 1px 1px rgba(0,0,0,0.04); } /* ═══════════════════════════════════ STRIPE THEME - DASHBOARD ═══════════════════════════════════ */ [data-theme='stripe'] .dash-body, [data-theme='stripe'] .dash-page { background:#F6F9FC; } /* Welcome hero - clean, no gradient */ [data-theme='stripe'] .welcome-hero { background:#FFFFFF; border:none; border-radius:var(--r); padding:40px; box-shadow:var(--shadow-md); color:#0A2540; } [data-theme='stripe'] .welcome-hero h2, [data-theme='stripe'] .welcome-hero .welcome-title { font-family:'Inter',system-ui,sans-serif; font-size:clamp(24px,3vw,34px); font-weight:800; letter-spacing:-0.03em; color:#0A2540; } [data-theme='stripe'] .welcome-hero .welcome-hero-sub, [data-theme='stripe'] .welcome-hero .welcome-hero-meta { color:#425466; } [data-theme='stripe'] .welcome-cta { background:#635BFF; color:#FFFFFF; border-radius:99px; padding:12px 24px; font-size:14px; font-weight:600; font-family:'Inter',system-ui,sans-serif; border:none; box-shadow:0 4px 6px rgba(50,50,93,0.11), 0 1px 3px rgba(0,0,0,0.08); transition:all 0.15s ease; } [data-theme='stripe'] .welcome-cta:hover { background:color-mix(in srgb,#635BFF,black 8%); transform:translateY(-1px); box-shadow:0 7px 14px rgba(50,50,93,0.1), 0 3px 6px rgba(0,0,0,0.08); } /* Stat cards */ [data-theme='stripe'] .stat-card { background:#FFFFFF; border:none; border-radius:var(--r); box-shadow:var(--shadow); padding:28px 24px; transition:var(--card-transition); } [data-theme='stripe'] .stat-card:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); } [data-theme='stripe'] .stat-n, [data-theme='stripe'] .stat-card .stat-value { font-family:'Inter',system-ui,sans-serif; font-size:48px; font-weight:800; letter-spacing:-0.04em; color:#0A2540; line-height:1; } [data-theme='stripe'] .stat-l, [data-theme='stripe'] .stat-card .stat-label { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:#425466; margin-top:6px; } [data-theme='stripe'] .stat-icon { border-radius:12px; } /* Session cards */ [data-theme='stripe'] .sessions-grid { gap:var(--gap-cards); } [data-theme='stripe'] .sess-card { background:#FFFFFF; border:none; border-left:none; border-radius:var(--r); box-shadow:var(--shadow); padding:var(--card-pad); position:relative; overflow:hidden; transition:var(--card-transition); } [data-theme='stripe'] .sess-card:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); } [data-theme='stripe'] .sess-card::before { content:''; position:absolute; top:0;left:0;right:0; height:2px; background:linear-gradient(90deg,#635BFF,#A960EE); opacity:0; transition:opacity 0.15s ease; } [data-theme='stripe'] .sess-card:hover::before { opacity:1; } [data-theme='stripe'] .sess-num { font-family:'Inter',system-ui,sans-serif; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#635BFF; } [data-theme='stripe'] .sess-topic { font-family:'Inter',system-ui,sans-serif; font-size:17px; font-weight:700; letter-spacing:-0.02em; color:#0A2540; line-height:1.3; margin-top:6px; } [data-theme='stripe'] .sess-date { font-size:13px; color:#425466; font-weight:500; } [data-theme='stripe'] .status-pill { border-radius:99px; font-size:11px; font-weight:600; letter-spacing:.03em; padding:4px 12px; } [data-theme='stripe'] .score-chip { font-family:'Inter',system-ui,sans-serif; font-size:20px; font-weight:800; letter-spacing:-0.03em; color:#0A2540; } /* Chart + Marker cards */ [data-theme='stripe'] .chart-card { background:#FFFFFF; border:none; border-radius:var(--r); box-shadow:var(--shadow); padding:var(--card-pad); transition:var(--card-transition); } [data-theme='stripe'] .chart-card:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); } [data-theme='stripe'] .chart-card h3, [data-theme='stripe'] .chart-card .card-title { font-family:'Inter',system-ui,sans-serif; font-size:18px; font-weight:700; color:#0A2540; } [data-theme='stripe'] .marker-card { background:#FFFFFF; border:none; border-radius:var(--r); box-shadow:var(--shadow); transition:var(--card-transition); } [data-theme='stripe'] .marker-card:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); } [data-theme='stripe'] .improvement-banner { background:var(--blue-l); border:1px solid var(--blue-m); border-radius:12px; } /* CTA card - Solid Blurple */ [data-theme='stripe'] .cta-card { background:#635BFF; border-radius:var(--r); padding:64px; box-shadow:0 13px 27px -5px rgba(99,91,255,0.35), 0 8px 16px -8px rgba(0,0,0,0.3); border:none; } [data-theme='stripe'] .cta-card h2, [data-theme='stripe'] .cta-card .cta-title { font-family:'Inter',system-ui,sans-serif; font-size:clamp(24px,3.5vw,38px); letter-spacing:-0.03em; font-weight:800; color:#FFFFFF; } [data-theme='stripe'] .cta-card p, [data-theme='stripe'] .cta-card .cta-sub { color:#E0E6ED; } [data-theme='stripe'] .cta-btn { background:#FFFFFF; color:#635BFF; border-radius:99px; font-weight:600; font-size:15px; font-family:'Inter',system-ui,sans-serif; padding:14px 32px; box-shadow:0 4px 6px rgba(50,50,93,0.11), 0 1px 3px rgba(0,0,0,0.08); border:none; transition:all 0.15s ease; } [data-theme='stripe'] .cta-btn:hover { background:#FFFFFF; color:#4D45DB; transform:translateY(-1px); box-shadow:0 7px 14px rgba(50,50,93,0.1), 0 3px 6px rgba(0,0,0,0.08); } /* Empty state */ [data-theme='stripe'] .empty-state-card { background:#FFFFFF; border:none; border-radius:var(--r); box-shadow:var(--shadow-md); padding:64px 40px; } [data-theme='stripe'] .empty-state-card h2, [data-theme='stripe'] .empty-state-card .empty-title { font-family:'Inter',system-ui,sans-serif; font-size:26px; font-weight:800; letter-spacing:-0.03em; color:#0A2540; } [data-theme='stripe'] .empty-state-btn { border-radius:99px; padding:14px 32px; font-weight:600; font-family:'Inter',system-ui,sans-serif; box-shadow:0 4px 6px rgba(50,50,93,0.11), 0 1px 3px rgba(0,0,0,0.08); } /* Sidebar */ [data-theme='stripe'] .sidebar { background:#FFFFFF; border-right:1px solid rgba(0,0,0,0.05); box-shadow:2px 0 5px -1px rgba(50,50,93,0.12); } [data-theme='stripe'] .sidebar .logo-text { font-family:'Inter',system-ui,sans-serif; color:#0A2540; font-size:18px; font-weight:800; } [data-theme='stripe'] .sidebar-link { border-radius:8px; font-size:14px; font-weight:500; color:#425466; font-family:'Inter',system-ui,sans-serif; transition:all 0.15s ease; } [data-theme='stripe'] .sidebar-link:hover, [data-theme='stripe'] .sidebar-link.active { background:var(--blue-l); color:#635BFF; font-weight:600; } /* ═══════════════════════════════════ STRIPE THEME - REPORT PAGE ═══════════════════════════════════ */ [data-theme='stripe'] .report-body, [data-theme='stripe'] .report-page { background:#F6F9FC; } [data-theme='stripe'] .report-nav, [data-theme='stripe'] .rep-nav { background:rgba(246,249,252,0.8); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:none; box-shadow:none; } [data-theme='stripe'] .sec-title { font-family:'Inter',system-ui,sans-serif; font-size:clamp(20px,2.5vw,26px); font-weight:800; letter-spacing:-0.03em; color:#0A2540; margin-bottom:16px; } [data-theme='stripe'] .stat-pill { border-radius:99px; font-weight:600; font-size:13px; padding:6px 16px; background:#FFFFFF; border:none; box-shadow:var(--shadow); color:#0A2540; font-family:'Inter',system-ui,sans-serif; } [data-theme='stripe'] .stats-row { gap:10px; } /* All analysis cards */ [data-theme='stripe'] .arc-card, [data-theme='stripe'] .b60-card, [data-theme='stripe'] .filler-card, [data-theme='stripe'] .sent-card, [data-theme='stripe'] .ch-card, [data-theme='stripe'] .topic-card, [data-theme='stripe'] .bs-card, [data-theme='stripe'] .strength-card, [data-theme='stripe'] .closing-card, [data-theme='stripe'] .priority-section { background:#FFFFFF; border:none; border-radius:var(--r); box-shadow:var(--shadow); transition:var(--card-transition); } [data-theme='stripe'] .arc-card:hover, [data-theme='stripe'] .b60-card:hover, [data-theme='stripe'] .filler-card:hover, [data-theme='stripe'] .sent-card:hover, [data-theme='stripe'] .ch-card:hover, [data-theme='stripe'] .topic-card:hover, [data-theme='stripe'] .bs-card:hover, [data-theme='stripe'] .strength-card:hover, [data-theme='stripe'] .closing-card:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); } /* Pause quality */ [data-theme='stripe'] .pq-cell { border-radius:10px; padding:18px 14px; background:#F6F9FC; border:none; } [data-theme='stripe'] .pq-count { font-family:'Inter',system-ui,sans-serif; font-size:32px; font-weight:800; letter-spacing:-0.04em; color:#0A2540; } [data-theme='stripe'] .pq-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:#425466; margin-top:4px; } /* Best 60s */ [data-theme='stripe'] .b60-badge { border-radius:99px; font-size:11px; font-weight:600; background:var(--blue-l); color:#635BFF; border:none; padding:4px 12px; } [data-theme='stripe'] .b60-head { font-family:'Inter',system-ui,sans-serif; font-size:17px; font-weight:700; letter-spacing:-0.02em; color:#0A2540; } [data-theme='stripe'] .b60-time { font-family:'Inter',system-ui,sans-serif; font-size:26px; font-weight:800; letter-spacing:-0.04em; color:#635BFF; } /* Filler chips */ [data-theme='stripe'] .filler-chip { border-radius:99px; font-size:13px; font-weight:500; padding:5px 14px; background:#FFFFFF; border:none; box-shadow:var(--shadow); color:#0A2540; font-family:'Inter',system-ui,sans-serif; } /* Sentiment */ [data-theme='stripe'] .sent-bar { border-radius:99px; overflow:hidden; } /* Chapters */ [data-theme='stripe'] .ch-item { padding:14px 0; border-bottom:1px solid rgba(0,0,0,0.05); } [data-theme='stripe'] .ch-item:last-child { border-bottom:none; } [data-theme='stripe'] .ch-time { font-family:'Inter',system-ui,sans-serif; font-weight:600; color:#635BFF; font-size:13px; } [data-theme='stripe'] .ch-headline { font-size:15px; font-weight:600; color:#0A2540; font-family:'Inter',system-ui,sans-serif; } /* Topics */ [data-theme='stripe'] .topic-pill { border-radius:99px; font-size:13px; font-weight:500; padding:6px 16px; background:#FFFFFF; border:none; box-shadow:var(--shadow); color:#0A2540; font-family:'Inter',system-ui,sans-serif; } /* Blind spots */ [data-theme='stripe'] .bs-grid { gap:var(--gap-cards); } [data-theme='stripe'] .bs-card { padding:24px; } /* Strengths */ [data-theme='stripe'] .strength-item { padding:14px 0; border-bottom:1px solid rgba(0,0,0,0.05); } [data-theme='stripe'] .strength-item:last-child { border-bottom:none; } /* Priority */ [data-theme='stripe'] .priority-section { padding:28px; } [data-theme='stripe'] .priority-section-title { font-family:'Inter',system-ui,sans-serif; font-size:18px; font-weight:700; letter-spacing:-0.02em; color:#0A2540; } /* Drill card - White with Blurple accents */ [data-theme='stripe'] .drill-card { background:#FFFFFF; border:none; border-radius:var(--r); box-shadow:var(--shadow); padding:32px; color:#0A2540; transition:var(--card-transition); } [data-theme='stripe'] .drill-card:hover { transform:var(--hover-lift); box-shadow:var(--hover-shadow); } [data-theme='stripe'] .drill-head { font-family:'Inter',system-ui,sans-serif; font-size:20px; font-weight:700; letter-spacing:-0.025em; color:#0A2540; } [data-theme='stripe'] .drill-badge { border-radius:99px; background:#635BFF; color:#FFFFFF; font-size:11px; font-weight:600; letter-spacing:.04em; padding:4px 12px; border:none; } /* Closing / coach */ [data-theme='stripe'] .closing-card { padding:32px; } [data-theme='stripe'] .cl-av { width:52px; height:52px; border-radius:50%; filter:none; } [data-theme='stripe'] .cl-name { font-family:'Inter',system-ui,sans-serif; font-size:15px; font-weight:700; letter-spacing:-0.01em; color:#0A2540; } /* CTA row */ [data-theme='stripe'] .cta-row { gap:12px; } /* Limitation box - Blurple tint */ [data-theme='stripe'] .limitation-box { background:rgba(99,91,255,0.1); border:1px solid rgba(99,91,255,0.2); border-radius:10px; box-shadow:none; padding:16px 20px; font-size:13px; color:#425466; } /* ═══════════════════════════════════════ STRIPE - LAYOUT GRID VARIABLES ═══════════════════════════════════════ */ [data-theme='stripe'] { --layout-max:1280px; --content-max:680px; --hero-align:left; --hero-mx:0; } /* ════════════════════════════════════════ THEME SWITCHER COMPONENT ════════════════════════════════════════ */ .theme-switcher { position:relative; margin-left:8px; flex-shrink:0; } .theme-switcher-btn { display:flex; align-items:center; gap:6px; padding:6px 14px; border:1.5px solid var(--border); border-radius:99px; background:var(--white); font-family:inherit; font-size:12px; font-weight:600; color:var(--text); cursor:pointer; transition:all .15s; white-space:nowrap; } [data-theme='airbnb'] .theme-switcher-btn { border:1px solid #DDDDDD; border-radius:99px; font-family:var(--font-head); font-size:12px; font-weight:600; color:#222222; } .theme-switcher-btn:hover { border-color:var(--blue); color:var(--blue); } .theme-switcher-btn [data-lucide] { width:14px; height:14px; } .theme-switcher-chevron { width:12px!important; height:12px!important; transition:transform .2s; } .theme-switcher-btn.open .theme-switcher-chevron { transform:rotate(180deg); } .theme-switcher-menu { display:none; position:absolute; top:calc(100% + 8px); right:0; background:var(--white); border:1px solid #E5E7EB; border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.06); overflow:hidden; min-width:220px; z-index:999; animation:tsMenuIn .12s ease; } [data-theme='airbnb'] .theme-switcher-menu { border:1px solid #EBEBEB; border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.06); } @keyframes tsMenuIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } } .theme-switcher-menu.open { display:block; } .ts-header { padding:10px 14px 6px; font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; } .theme-option { display:flex; align-items:center; gap:10px; padding:11px 14px; font-size:13px; font-weight:500; color:var(--text); cursor:pointer; transition:background .1s; border:none; background:none; width:100%; text-align:left; font-family:inherit; } .theme-option:hover { background:var(--bg); } .theme-option.ts-active { color:var(--blue); font-weight:700; } .theme-option.ts-active::after { content:'✓'; margin-left:auto; font-size:13px; color:var(--blue); } .ts-dot { width:14px; height:14px; border-radius:50%; flex-shrink:0; box-shadow:0 1px 3px rgba(0,0,0,.2); } .ts-dot-default { background:linear-gradient(135deg,#5B4FE8,#7C3AED); } .ts-dot-airbnb { background:linear-gradient(135deg,#FF5A5F,#D43B51); } .ts-dot-headspace { background:#F87006; } .ts-dot-gumroad { background:#FF90E8; border:2px solid #000000; } .ts-dot-apple { background:#000000; } [data-theme='apple'] .theme-switcher-btn { border:none; border-radius:99px; background:rgba(255,255,255,.72); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); box-shadow:0 1px 0 rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.06); font-family:var(--font-head); font-size:12px; font-weight:500; color:#1D1D1F; letter-spacing:-0.005em; } [data-theme='apple'] .theme-switcher-btn:hover { color:var(--blue); } [data-theme='apple'] .theme-switcher-menu { border:none; border-radius:14px; box-shadow:0 8px 32px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.06); background:rgba(255,255,255,.88); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); } [data-theme='gumroad'] .theme-switcher-btn { border:var(--brd); border-radius:4px; background:#FFFFFF; box-shadow:var(--shadow); font-family:var(--font-head); font-size:12px; font-weight:700; color:#000000; transition:var(--card-transition); } [data-theme='gumroad'] .theme-switcher-btn:hover { transform:translate(-1px,-1px); box-shadow:4px 4px 0px #000000; } [data-theme='gumroad'] .theme-switcher-menu { border:var(--brd); border-radius:4px; box-shadow:var(--shadow-md); } [data-theme='headspace'] .theme-switcher-btn { border:none; border-radius:999px; background:#FFFFFF; box-shadow:var(--shadow); font-family:var(--font-head); font-size:12px; font-weight:700; color:#413D45; } [data-theme='headspace'] .theme-switcher-menu { border:none; border-radius:20px; box-shadow:0 16px 40px rgba(65,61,69,.12); } .ts-label { flex:1; } .ts-sublabel { display:block; font-size:11px; font-weight:400; color:var(--muted); margin-top:1px; } .ts-dot-mindvalley { background:linear-gradient(135deg,#8A2BE2,#FACC15); } [data-theme='mindvalley'] .theme-switcher-btn { border:1px solid rgba(255,255,255,.12); border-radius:8px; background:rgba(11,11,16,.80); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); font-family:var(--font-head); font-size:12px; font-weight:600; color:#FFFFFF; } [data-theme='mindvalley'] .theme-switcher-btn:hover { border-color:rgba(250,204,21,.4); color:#FACC15; } [data-theme='mindvalley'] .theme-switcher-menu { border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(17,17,24,.95); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 16px 48px rgba(0,0,0,.6); } [data-theme='mindvalley'] .theme-option { color:#A1A1AA; } [data-theme='mindvalley'] .theme-option:hover { background:rgba(250,204,21,.08); color:#FACC15; } [data-theme='mindvalley'] .ts-sublabel { color:#6B7280; } .ts-dot-stripe { background:linear-gradient(135deg,#635BFF,#0A2540); } [data-theme='stripe'] .theme-switcher-btn { border:none; border-radius:99px; background:#FFFFFF; box-shadow:0 2px 5px -1px rgba(50,50,93,0.25), 0 1px 3px -1px rgba(0,0,0,0.3); font-family:'Inter',system-ui,sans-serif; font-size:12px; font-weight:600; color:#0A2540; transition:all 0.15s ease; } [data-theme='stripe'] .theme-switcher-btn:hover { box-shadow:0 7px 14px rgba(50,50,93,0.1), 0 3px 6px rgba(0,0,0,0.08); transform:translateY(-1px); color:#635BFF; } [data-theme='stripe'] .theme-switcher-menu { border:none; border-radius:16px; background:#FFFFFF; box-shadow:0 13px 27px -5px rgba(50,50,93,0.25), 0 8px 16px -8px rgba(0,0,0,0.3); } [data-theme='stripe'] .theme-option { color:#425466; } [data-theme='stripe'] .theme-option:hover { background:#F6F9FC; color:#635BFF; } [data-theme='stripe'] .ts-sublabel { color:#425466; }