→ seção pontual em dark ===================================================== */ /* ===================================================== 1. PRIMITIVOS — paleta da marca Referência: --m1..m5 + --bg vindos do Figma ===================================================== */ :root { /* ── Brand: marrom/vinho/creme da Mônica ── */ --brand-50: #f9f3ec; /* creme quase branco */ --brand-100: #f1e9e1; /* creme/areia (bg-base light) */ --brand-200: #ebe3dc; /* bege claro (FAQ section) */ --brand-300: #ddc9b4; /* bege médio = m4 (script color light) */ --brand-400: #c6ad94; /* bege escuro = m5 */ --brand-500: #af1d1b; /* vermelho CTA (red-accent) */ --brand-600: #690500; /* vinho/bordô = m3 (primário) */ --brand-700: #452103; /* marrom escuro = m2 */ --brand-800: #210f04; /* marrom muito escuro = m1 */ --brand-900: #14080a; /* quase preto */ /* ── Vermelhos CTA (gradientes de botão) ── */ --red-300: #ff6b6b; --red-400: #c52323; /* gradient end */ --red-500: #af1d1b; /* red accent base */ --red-600: #89120c; /* gradient start */ --red-700: #690500; /* m3 */ /* ── Aliases legados (compatibilidade com figma-imports) ── */ --m1: var(--brand-800); --m2: var(--brand-700); --m3: var(--brand-600); --m4: var(--brand-300); --m5: var(--brand-400); /* ── Neutros (warm-tinted, alinhados ao creme) ── */ --gray-50: #faf7f3; --gray-100: #f3eee8; --gray-200: #e7e0d6; --gray-300: #d4cabd; --gray-400: #a89b8a; --gray-500: #7a6e5f; --gray-600: #574d40; --gray-700: #3d3528; --gray-800: #2a2218; --gray-900: #18120c; /* ── Semânticas fixas ── */ --green-400: #4ade80; --green-600: #16a34a; --green-700: #15803d; --yellow-400: #facc15; --yellow-500: #eab308; --amber-600: #d97706; --amber-700: #b45309; --red-error: #dc2626; --blue-400: #60a5fa; --blue-600: #2563eb; } /* ===================================================== 2. TOKENS SEMÂNTICOS — Light (padrão) Fundo creme/areia · texto vinho-marrom · acento vermelho ===================================================== */ :root, [data-theme="light"] { color-scheme: light; /* Superfícies */ --bg-base: #f1e9e1; /* areia — fundo principal */ --bg-surface: #fbf7f0; /* creme quente — cards */ --bg-surface-raised: #ebe3dc; /* bege FAQ */ --bg-surface-overlay: #e0d4c4; /* overlay neutro */ --bg-deep: #690500; /* m3 — destaque vinho pontual em light */ --bg-warm: #452103; /* m2 — destaque marrom pontual em light */ --bg-hover: rgba(33,15,4,0.04); --bg-active: rgba(105,5,0,0.08); --bg-input: #fbf7f0; --bg-disabled: rgba(33,15,4,0.05); /* Texto */ --text-primary: #210f04; /* m1 — marrom muito escuro */ --text-secondary: rgba(33,15,4,0.70); --text-muted: rgba(33,15,4,0.50); --text-disabled: rgba(33,15,4,0.30); --text-inverted: #f1e9e1; --text-accent: #690500; /* m3 — vinho */ --text-accent-hover: #452103; --text-script: #690500; /* cor do Parisienne em light */ /* Bordas */ --border-default: rgba(33,15,4,0.12); --border-subtle: rgba(33,15,4,0.07); --border-strong: rgba(33,15,4,0.22); --border-focus: var(--brand-500); --border-accent: rgba(105,5,0,0.30); --border-error: rgba(220,38,38,0.45); --border-success: rgba(22,163,74,0.35); /* Acento (CTA vermelho) */ --accent-base: var(--brand-500); /* #af1d1b */ --accent-hover: #c52323; --accent-deep: var(--brand-600); /* #690500 */ --accent-muted: rgba(175,29,27,0.10); --accent-text: #ffffff; --accent-shadow: 0 4px 18.8px rgba(255,92,92,0.25); --accent-shadow-hover: 0 8px 28px rgba(255,92,92,0.40); /* Estados */ --success-bg: rgba(22,163,74,0.08); --success-border: rgba(22,163,74,0.28); --success-text: #15803d; --warning-bg: rgba(217,119,6,0.10); --warning-border: rgba(217,119,6,0.30); --warning-text: #b45309; --danger-bg: rgba(220,38,38,0.08); --danger-border: rgba(220,38,38,0.28); --danger-text: #dc2626; --info-bg: rgba(37,99,235,0.08); --info-border: rgba(37,99,235,0.28); --info-text: #2563eb; /* Pills/labels (do Figma) */ --pill-bg: #ebe0d4; --pill-text: var(--brand-600); /* Shadows */ --shadow-sm: 0 1px 4px rgba(33,15,4,0.06); --shadow-md: 0 4px 16px rgba(33,15,4,0.10); --shadow-lg: 0 8px 32px rgba(33,15,4,0.14); --shadow-xl: 0 18px 39px rgba(33,15,4,0.10), 0 71px 71px rgba(33,15,4,0.09); --shadow-card: 0 2px 12px rgba(33,15,4,0.08), 0 0 0 1px rgba(33,15,4,0.05); --shadow-cta: var(--accent-shadow); /* Navbar */ --navbar-bg: rgba(241,233,225,0.92); /* Gradientes principais */ --gradient-brand: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-800) 100%); --gradient-cta: linear-gradient(90deg, #89120c 0%, #c52323 100%); --gradient-cta-deep:linear-gradient(-89deg, var(--brand-600) 18%, #cf0a00 122%); --gradient-overlay: linear-gradient(to bottom, transparent 0%, var(--bg-base) 100%); --gradient-divider: linear-gradient(to right, transparent, var(--border-default), transparent); } /* ===================================================== 2b. TOKENS SEMÂNTICOS — Dark Fundo vinho (m3 #690500) · texto creme · acento vermelho Hierarquia: base é o vinho do Figma; surfaces variam em torno dele (mais escuras = afundam, mais claras = elevam). ===================================================== */ [data-theme="dark"] { color-scheme: dark; /* Superfícies */ --bg-base: #690500; /* m3 — vinho/bordô (predominante) */ --bg-surface: #560400; /* afundado — cards dentro do vinho */ --bg-surface-raised: #7a1006; /* elevado — cards levemente mais claros */ --bg-surface-overlay: #8a1d13; /* overlay — chips/destaques sobre cards */ --bg-deep: #210f04; /* m1 — fundo extra-escuro pontual */ --bg-warm: #452103; /* m2 — superfície marrom de contraste */ --bg-hover: rgba(241,233,225,0.06); --bg-active: rgba(221,201,180,0.12); --bg-input: #560400; --bg-disabled: rgba(241,233,225,0.04); /* Texto */ --text-primary: #f1e9e1; /* areia */ --text-secondary: rgba(241,233,225,0.72); --text-muted: rgba(241,233,225,0.45); --text-disabled: rgba(241,233,225,0.28); --text-inverted: #210f04; --text-accent: #ddc9b4; /* m4 — bege claro */ --text-accent-hover: #f1e9e1; --text-script: #ddc9b4; /* Parisienne em dark vira bege */ /* Bordas */ --border-default: rgba(241,233,225,0.16); --border-subtle: rgba(241,233,225,0.08); --border-strong: rgba(241,233,225,0.32); --border-focus: var(--brand-300); --border-accent: rgba(221,201,180,0.40); --border-error: rgba(248,113,113,0.50); --border-success: rgba(74,222,128,0.32); /* Acento (CTA mantém vermelho) */ --accent-base: var(--brand-500); /* #af1d1b */ --accent-hover: #c52323; --accent-deep: #cf0a00; /* lado claro do gradient-cta-deep */ --accent-muted: rgba(255,12,0,0.22); --accent-text: #ffffff; --accent-shadow: 0 4px 18.8px rgba(255,92,92,0.30); --accent-shadow-hover: 0 8px 32px rgba(255,92,92,0.50); /* Estados */ --success-bg: rgba(74,222,128,0.10); --success-border: rgba(74,222,128,0.30); --success-text: #4ade80; --warning-bg: rgba(251,191,36,0.10); --warning-border: rgba(251,191,36,0.30); --warning-text: #fbbf24; --danger-bg: rgba(248,113,113,0.10); --danger-border: rgba(248,113,113,0.30); --danger-text: #f87171; --info-bg: rgba(96,165,250,0.10); --info-border: rgba(96,165,250,0.30); --info-text: #60a5fa; /* Pills/labels (do Figma — fundo translúcido sobre vinho) */ --pill-bg: rgba(241,233,225,0.10); --pill-text: var(--brand-100); /* Shadows (mais profundas para dar profundidade sobre o vinho) */ --shadow-sm: 0 1px 4px rgba(0,0,0,0.45); --shadow-md: 0 4px 16px rgba(0,0,0,0.55); --shadow-lg: 0 8px 32px rgba(0,0,0,0.65); --shadow-xl: 0 18px 39px rgba(0,0,0,0.55), 0 71px 71px rgba(0,0,0,0.45); --shadow-card: 0 2px 12px rgba(0,0,0,0.45), 0 0 0 1px rgba(241,233,225,0.06); --shadow-cta: var(--accent-shadow); /* Navbar — translúcida sobre o vinho */ --navbar-bg: rgba(105,5,0,0.92); /* Gradientes */ --gradient-brand: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-800) 100%); --gradient-cta: linear-gradient(90deg, #89120c 0%, #c52323 100%); --gradient-cta-deep:linear-gradient(-89deg, var(--brand-600) 18%, #cf0a00 122%); --gradient-overlay: linear-gradient(to bottom, transparent 0%, var(--bg-base) 100%); --gradient-divider: linear-gradient(to right, transparent, var(--border-default), transparent); } /* ===================================================== 3. SURFACES WARM — TOKENS FIXOS (ilhas claras) Cards e elementos "warm" são SEMPRE claros, em qualquer tema. Espelha o padrão do Figma: seção dark + card creme. Componentes que usam estes tokens criam contraste consistente seja em fundo light ou dark. ===================================================== */ :root { --bg-card: #fbf7f0; /* card principal */ --bg-card-deep: #ebe3dc; /* superfície dentro do card (FAQ aberto, raised) */ --bg-card-overlay: #f1e9e1; /* overlay subtle */ --text-on-card: #210f04; /* texto principal sobre card */ --text-on-card-muted: rgba(33,15,4,0.65); --text-on-card-faint: rgba(33,15,4,0.45); --accent-on-card: #af1d1b; /* CTA vermelho sobre card */ --accent-on-card-deep: #690500; /* títulos/script sobre card (vinho) */ --border-on-card: rgba(33,15,4,0.12); --border-on-card-subtle: rgba(33,15,4,0.07); --border-on-card-strong: rgba(33,15,4,0.22); } /* ===================================================== GRADIENTES EXPANDIDOS (independem de tema) ===================================================== */ :root { --gradient-hero-glow: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(105,5,0,0.18) 0%, transparent 70%); --gradient-text-script: linear-gradient(135deg, var(--brand-600) 0%, #c52323 100%); --gradient-card-warm: linear-gradient(135deg, var(--brand-100) 0%, var(--brand-200) 100%); --gradient-overlay-top: linear-gradient(to bottom, var(--bg-base) 0%, transparent 100%); --gradient-overlay-bot: linear-gradient(to top, var(--bg-base) 0%, transparent 100%); } /* ===================================================== FOCUS / OUTLINE ===================================================== */ :root { --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--border-default); --focus-ring-accent: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent-base); } /* ===================================================== TOKENS — Componentes Especiais (Mônica-specific) ===================================================== */ :root { /* Announcement Bar */ --announcement-bg: var(--accent-base); --announcement-text: #fff; --announcement-height: 44px; /* Sticky CTA Bar */ --sticky-cta-bg: var(--bg-surface); --sticky-cta-border-top: 1px solid var(--border-default); --sticky-cta-height: 72px; /* Selo sticky (badge "Método Negócio Previsível") */ --selo-size: 96px; --selo-size-sm: 64px; --selo-size-lg: 128px; /* Ticker (faixa marquee horizontal) */ --ticker-height: 60px; --ticker-speed: 28s; --ticker-text-size: 13px; --ticker-spacing: 3.9px; /* Progress steps */ --step-size: 36px; --step-size-sm: 28px; --step-connector-h: 2px; /* Toast / Live Proof */ --toast-max-width: 320px; --toast-padding: var(--space-4); --toast-radius: var(--radius-xl); /* CTA button (Figma exact) */ --cta-height: 70px; --cta-radius: 16px; --cta-padding-x: 32px; } /* ===================================================== 4. TIPOGRAFIA — Inter + Parisienne + DM Sans ===================================================== */ :root { --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-heading: 'Inter', system-ui, -apple-system, sans-serif; --font-script: 'Parisienne', 'Brush Script MT', cursive; /* destaque decorativo */ --font-alt: 'DM Sans', 'Inter', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; /* Display — clamp(mobile, fluid, desktop) */ --text-display-xl: clamp(3rem, 8vw, 6rem); /* hero h1 */ --text-display-lg: clamp(2.5rem, 6vw, 4.5rem); /* h2 destaque */ --text-display-md: clamp(2rem, 5vw, 3.25rem); /* section title */ --text-display-sm: clamp(1.75rem, 4vw, 2.5rem); /* Script (Parisienne) — sempre maior que o sans companion */ --text-script-xl: clamp(3.5rem, 9vw, 6.5rem); /* hero script */ --text-script-lg: clamp(2.75rem,7vw, 5.25rem); --text-script-md: clamp(2.25rem,5.5vw,4rem); --text-script-sm: clamp(1.75rem,4.5vw,3rem); /* Conteúdo */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; /* Line-heights */ --leading-tight: 1.15; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.7; --leading-script: 1.0; /* Parisienne praticamente colado */ /* Letter-spacing (do Figma: titles têm tracking negativo forte) */ --tracking-display: -0.040em; /* -1.68px @ 42px */ --tracking-tight: -0.030em; --tracking-snug: -0.020em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-widest: 0.30em; /* tickers */ /* Pesos */ --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; } /* ===================================================== 5. ESPAÇAMENTO (grid 4px) ===================================================== */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* Section spacing */ --section-xs: clamp(2rem, 5vw, 3rem); --section-sm: clamp(3rem, 6vw, 4.5rem); --section-md: clamp(4rem, 8vw, 6rem); --section-lg: clamp(5rem, 10vw, 8rem); --section-xl: clamp(6rem, 12vw, 10rem); /* Container */ --container-max: 1200px; --container-wide: 1440px; --container-padding: clamp(1rem, 5vw, 2rem); } /* ===================================================== 6. RAIOS DE BORDA ===================================================== */ :root { --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; /* CTA do Figma */ --radius-2xl: 20px; --radius-3xl: 24px; /* card antes/depois */ --radius-card: 27px; /* card "Estrutura do programa" */ --radius-full: 9999px; } /* ===================================================== 7. ANIMAÇÕES — Tokens ===================================================== */ :root { /* Duração */ --duration-xfast: 75ms; --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; --duration-hero: 800ms; --duration-ticker: 28s; /* Delay (stagger) */ --delay-1: 100ms; --delay-2: 200ms; --delay-3: 300ms; --delay-4: 400ms; --delay-5: 500ms; --delay-6: 600ms; /* Easing */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); --ease-sharp: cubic-bezier(0.4, 0, 0.6, 1); /* Transition shorthands */ --transition-colors: background-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default); --transition-transform: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); --transition-opacity: opacity var(--duration-base) var(--ease-out); --transition-all: all var(--duration-base) var(--ease-default); } /* ===================================================== Z-INDEX ===================================================== */ :root { --z-base: 0; --z-raised: 10; --z-navbar: 50; --z-dropdown: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400; --z-tooltip: 500; } /* ===================================================== 8. ICONOGRAFIA ===================================================== */ :root { --icon-xs: 12px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 32px; --icon-2xl: 48px; } .icon-inline { display: inline-flex; align-items: center; vertical-align: middle; flex-shrink: 0; } /* Container de ícone com fundo (feature cards, etc.) */ .icon-container { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--accent-base); color: #fff; flex-shrink: 0; } .icon-container--sm { width: 36px; height: 36px; border-radius: var(--radius-md); } .icon-container--lg { width: 64px; height: 64px; border-radius: var(--radius-xl); } .icon-container--soft { background: var(--accent-muted); color: var(--accent-base); } /* ===================================================== 9. UTILITÁRIOS DE ESPAÇAMENTO Formato: .{prop}{dir}-{escala} ===================================================== */ /* Margin top */ .mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mt-10 { margin-top: var(--space-10); } .mt-12 { margin-top: var(--space-12); } .mt-16 { margin-top: var(--space-16); } .mt-20 { margin-top: var(--space-20); } .mt-auto { margin-top: auto; } /* Margin bottom */ .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .mb-5 { margin-bottom: var(--space-5); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } .mb-10 { margin-bottom: var(--space-10); } .mb-12 { margin-bottom: var(--space-12); } .mb-16 { margin-bottom: var(--space-16); } .mb-20 { margin-bottom: var(--space-20); } .mb-auto { margin-bottom: auto; } /* Margin horizontal/vertical */ .mx-0 { margin-left: 0; margin-right: 0; } .mx-auto { margin-left: auto; margin-right: auto; } .mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); } .mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); } .my-0 { margin-top: 0; margin-bottom: 0; } .my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); } .my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); } .my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); } .my-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); } .my-12 { margin-top: var(--space-12); margin-bottom: var(--space-12); } /* Padding top */ .pt-0 { padding-top: 0; } .pt-1 { padding-top: var(--space-1); } .pt-2 { padding-top: var(--space-2); } .pt-3 { padding-top: var(--space-3); } .pt-4 { padding-top: var(--space-4); } .pt-5 { padding-top: var(--space-5); } .pt-6 { padding-top: var(--space-6); } .pt-8 { padding-top: var(--space-8); } .pt-10 { padding-top: var(--space-10); } .pt-12 { padding-top: var(--space-12); } .pt-16 { padding-top: var(--space-16); } .pt-20 { padding-top: var(--space-20); } /* Padding bottom */ .pb-0 { padding-bottom: 0; } .pb-1 { padding-bottom: var(--space-1); } .pb-2 { padding-bottom: var(--space-2); } .pb-3 { padding-bottom: var(--space-3); } .pb-4 { padding-bottom: var(--space-4); } .pb-5 { padding-bottom: var(--space-5); } .pb-6 { padding-bottom: var(--space-6); } .pb-8 { padding-bottom: var(--space-8); } .pb-10 { padding-bottom: var(--space-10); } .pb-12 { padding-bottom: var(--space-12); } .pb-16 { padding-bottom: var(--space-16); } .pb-20 { padding-bottom: var(--space-20); } /* Padding horizontal */ .px-0 { padding-left: 0; padding-right: 0; } .px-3 { padding-left: var(--space-3); padding-right: var(--space-3); } .px-4 { padding-left: var(--space-4); padding-right: var(--space-4); } .px-5 { padding-left: var(--space-5); padding-right: var(--space-5); } .px-6 { padding-left: var(--space-6); padding-right: var(--space-6); } .px-8 { padding-left: var(--space-8); padding-right: var(--space-8); } .px-10 { padding-left: var(--space-10); padding-right: var(--space-10); } /* Padding vertical */ .py-0 { padding-top: 0; padding-bottom: 0; } .py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); } .py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); } .py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); } .py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); } .py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); } .py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); } .py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); } .py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); } /* Padding all */ .p-0 { padding: 0; } .p-3 { padding: var(--space-3); } .p-4 { padding: var(--space-4); } .p-5 { padding: var(--space-5); } .p-6 { padding: var(--space-6); } .p-8 { padding: var(--space-8); } /* Gap */ .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-5 { gap: var(--space-5); } .gap-6 { gap: var(--space-6); } .gap-8 { gap: var(--space-8); } .gap-10 { gap: var(--space-10); } .gap-12 { gap: var(--space-12); } /* Section padding */ .section-py-xs { padding-top: var(--section-xs); padding-bottom: var(--section-xs); } .section-py-sm { padding-top: var(--section-sm); padding-bottom: var(--section-sm); } .section-py-md { padding-top: var(--section-md); padding-bottom: var(--section-md); } .section-py-lg { padding-top: var(--section-lg); padding-bottom: var(--section-lg); } .section-py-xl { padding-top: var(--section-xl); padding-bottom: var(--section-xl); } .section-pt-md { padding-top: var(--section-md); } .section-pt-lg { padding-top: var(--section-lg); } .section-pb-md { padding-bottom: var(--section-md); } .section-pb-lg { padding-bottom: var(--section-lg); } /* Mobile-first overrides */ @media (max-width: 767px) { .section-py-lg { padding-top: var(--section-md); padding-bottom: var(--section-md); } .section-py-xl { padding-top: var(--section-lg); padding-bottom: var(--section-lg); } .sm\:mt-0 { margin-top: 0; } .sm\:mb-0 { margin-bottom: 0; } .sm\:pt-4 { padding-top: var(--space-4); } .sm\:pb-4 { padding-bottom: var(--space-4); } .sm\:px-4 { padding-left: var(--space-4); padding-right: var(--space-4); } .sm\:py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); } .sm\:gap-4 { gap: var(--space-4); } } /* ===================================================== 10. KEYFRAMES ===================================================== */ /* Entrada */ @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes slide-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @keyframes slide-down { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: translateY(0); } } @keyframes slide-left { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: translateX(0); } } @keyframes slide-right { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: translateX(0); } } @keyframes scale-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } @keyframes blur-in { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0); } } /* Atenção / Urgência */ @keyframes pulse-soft { 0%, 100% { box-shadow: 0 0 0 0 rgba(175,29,27,0); } 50% { box-shadow: 0 0 0 10px rgba(175,29,27,0.18); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } } @keyframes selo-rotate { to { transform: rotate(360deg); } } /* Loading */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes skeleton-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } } @keyframes progress-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Ticker (faixa marquee horizontal — característico da marca) */ @keyframes ticker-run { 0% { transform: translateY(-50%) translateX(0); } 100% { transform: translateY(-50%) translateX(-50%); } } @keyframes ticker-run-reverse { 0% { transform: translateY(-50%) translateX(-50%); } 100% { transform: translateY(-50%) translateX(0); } } /* ===================================================== 11. SCROLL REVEAL — data-animate ===================================================== */ [data-animate] { opacity: 0; transition-duration: var(--duration-slower); transition-timing-function: var(--ease-out); transition-property: opacity, transform, filter; } [data-animate].is-visible { opacity: 1; transform: none; filter: none; } [data-animate="fade-in"] { } [data-animate="fade-up"] { transform: translateY(28px); } [data-animate="fade-down"] { transform: translateY(-28px); } [data-animate="slide-left"] { transform: translateX(32px); } [data-animate="slide-right"] { transform: translateX(-32px); } [data-animate="scale-in"] { transform: scale(0.92); } [data-animate="blur-in"] { filter: blur(8px); transform: translateY(12px); } [data-delay="1"] { transition-delay: var(--delay-1); } [data-delay="2"] { transition-delay: var(--delay-2); } [data-delay="3"] { transition-delay: var(--delay-3); } [data-delay="4"] { transition-delay: var(--delay-4); } [data-delay="5"] { transition-delay: var(--delay-5); } [data-delay="6"] { transition-delay: var(--delay-6); } [data-stagger] > *:nth-child(1) { transition-delay: 0ms; } [data-stagger] > *:nth-child(2) { transition-delay: var(--delay-1); } [data-stagger] > *:nth-child(3) { transition-delay: var(--delay-2); } [data-stagger] > *:nth-child(4) { transition-delay: var(--delay-3); } [data-stagger] > *:nth-child(5) { transition-delay: var(--delay-4); } [data-stagger] > *:nth-child(6) { transition-delay: var(--delay-5); } /* ===================================================== 12. MICRO-INTERAÇÕES ===================================================== */ .hover-lift { transition: var(--transition-transform); } .hover-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .hover-scale { transition: transform var(--duration-base) var(--ease-out); } .hover-scale:hover { transform: scale(1.02); } .hover-glow { transition: box-shadow var(--duration-base) var(--ease-out); } .hover-glow:hover { box-shadow: var(--accent-shadow-hover); } .active-press:active { transform: translateY(1px); } .focus-ring:focus-visible { outline: none; box-shadow: var(--focus-ring-accent); } /* Hero sequence (stagger automático sem JS) */ .hero-sequence > * { opacity: 0; transform: translateY(20px); animation: slide-up var(--duration-slower) var(--ease-out) forwards; } .hero-sequence > *:nth-child(1) { animation-delay: 0ms; } .hero-sequence > *:nth-child(2) { animation-delay: 120ms; } .hero-sequence > *:nth-child(3) { animation-delay: 240ms; } .hero-sequence > *:nth-child(4) { animation-delay: 380ms; } .hero-sequence > *:nth-child(5) { animation-delay: 520ms; } .hero-sequence > *:nth-child(6) { animation-delay: 650ms; } /* Atenção/Urgência */ .animate-pulse-soft { animation: pulse-soft 2.4s var(--ease-default) infinite; } .animate-float { animation: float 3s var(--ease-default) infinite; } .animate-wiggle { animation: wiggle 0.5s var(--ease-bounce); } .animate-spin { animation: spin 700ms linear infinite; } .animate-selo { animation: selo-rotate 16s linear infinite; } /* Skeleton */ .shimmer { background: linear-gradient(90deg, var(--bg-surface-raised) 25%, var(--bg-surface-overlay) 50%, var(--bg-surface-raised) 75% ); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; } .skeleton { border-radius: var(--radius-md); display: block; background: var(--bg-surface-raised); position: relative; overflow: hidden; } .skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 25%, var(--bg-surface-overlay) 50%, transparent 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; } .skeleton-text { height: 1em; border-radius: var(--radius-sm); margin-bottom: var(--space-2); } .skeleton-text--lg { height: 1.5em; } .skeleton-text--sm { height: 0.75em; } .skeleton-avatar { border-radius: var(--radius-full); width: 44px; height: 44px; flex-shrink: 0; } .skeleton-card { border-radius: var(--radius-xl); height: 200px; } /* prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { [data-animate] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } .hero-sequence > * { opacity: 1 !important; transform: none !important; animation: none !important; } .animate-pulse-soft, .animate-float, .animate-wiggle, .animate-spin, .animate-selo, .shimmer, .skeleton::after { animation: none !important; } /* Tickers respeitam reduced-motion: param */ .ticker-track { animation-play-state: paused !important; } } /* ===================================================== 13. RESET MÍNIMO ===================================================== */ *, *::before, *::after { box-sizing: border-box; } body { background-color: var(--bg-base); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0; } [data-theme] { background-color: var(--bg-base); color: var(--text-primary); } /* Container padrão */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-padding); } .container-wide { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--container-padding); } /* ===================================================== 14. COMPONENTES BASE — Botões, Inputs, Pills, Badges (estilo do Figma da Mônica) ===================================================== */ /* Botão CTA principal — gradiente vermelho do Figma */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: var(--font-semibold); font-size: var(--text-base); letter-spacing: -0.030em; text-transform: uppercase; line-height: 1; border: none; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), opacity var(--duration-fast), background var(--duration-fast); height: var(--cta-height); padding: 0 var(--cta-padding-x); border-radius: var(--cta-radius); } .btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--gradient-cta); color: #fff; border: 0.96px solid rgba(255,255,255,0.20); box-shadow: var(--accent-shadow); } .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--accent-shadow-hover); } .btn-outline { background: transparent; color: var(--text-primary); border: 0.96px solid var(--border-strong); } .btn-outline:hover { background: var(--bg-hover); } /* Modificador explícito para forçar versão "sobre fundo dark" quando o contexto não tem data-theme (ex: gradient solid) */ .btn-outline.on-dark { color: #fff; border-color: rgba(255,255,255,0.40); } .btn-outline.on-dark:hover { background: rgba(255,255,255,0.08); } .btn-ghost { background: transparent; color: var(--text-secondary); height: 48px; padding: 0 16px; text-transform: none; border-radius: var(--radius-md); } .btn-ghost:hover { color: var(--text-primary); background: var(--bg-hover); } .btn-sm { height: 44px; padding: 0 20px; font-size: var(--text-sm); border-radius: var(--radius-lg); } .btn-lg { height: 80px; padding: 0 40px; font-size: var(--text-lg); border-radius: var(--radius-xl); } .btn-pill{ border-radius: var(--radius-full); } /* Input */ .input { width: 100%; background: var(--bg-input); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px 16px; font-family: var(--font-body); font-size: var(--text-base); color: var(--text-primary); outline: none; min-height: 48px; transition: border-color var(--duration-fast), box-shadow var(--duration-fast); } .input::placeholder { color: var(--text-muted); } .input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-muted); } .input--error { border-color: var(--border-error); box-shadow: 0 0 0 3px var(--danger-bg); } .input--success { border-color: var(--border-success); } .input:disabled { background: var(--bg-disabled); opacity: 0.5; cursor: not-allowed; } /* Pill (label de seção do Figma) */ .pill { display: inline-flex; align-items: center; background: var(--pill-bg); border-radius: var(--radius-md); padding: 4px 12px; font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--font-medium); color: var(--pill-text); letter-spacing: -0.020em; white-space: nowrap; } .pill-sm { font-size: var(--text-sm); padding: 3px 10px; border-radius: var(--radius-sm); } /* Badge */ .badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: var(--font-medium); padding: 4px 10px; border-radius: var(--radius-full); border: 1px solid; } .badge-default { background: var(--bg-surface-raised); border-color: var(--border-default); color: var(--text-secondary); } .badge-accent { background: var(--accent-muted); border-color: var(--border-accent); color: var(--text-accent); } .badge-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); } .badge-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); } .badge-danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); } .badge-info { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); } /* Tag pill com ícone (do Figma seção "Quebra") */ .tag-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-muted); border: 1px solid var(--border-accent); border-radius: 11px; padding: 12px 16px; font-size: var(--text-base); color: var(--text-primary); letter-spacing: -0.020em; line-height: 1.5; } [data-theme="dark"] .tag-pill { background: rgba(255,12,0,0.18); color: #fff; border-color: rgba(255,255,255,0.12); } /* ===================================================== 15. HEADLINES PARES — Padrão Mônica .h-pair: combina sans-serif + script Parisienne ===================================================== */ .h-pair { display: block; font-family: var(--font-heading); } .h-pair-sans { font-family: var(--font-heading); font-weight: var(--font-light); color: var(--text-primary); letter-spacing: var(--tracking-display); line-height: var(--leading-snug); display: block; } .h-pair-script { font-family: var(--font-script); color: var(--text-script); line-height: var(--leading-script); display: block; font-weight: var(--font-normal); } /* Tamanhos: hero | h2 | h3 */ .h-pair-xl .h-pair-sans { font-size: var(--text-display-md); } .h-pair-xl .h-pair-script { font-size: var(--text-script-xl); } .h-pair-lg .h-pair-sans { font-size: var(--text-display-md); } .h-pair-lg .h-pair-script { font-size: var(--text-script-lg); } .h-pair-md .h-pair-sans { font-size: var(--text-display-sm); } .h-pair-md .h-pair-script { font-size: var(--text-script-md); } /* ===================================================== 16. TICKER — faixa horizontal animada (Mônica signature) Uso:

......

===================================================== */ .ticker { height: var(--ticker-height); background: var(--gradient-cta-deep); overflow: hidden; position: relative; } .ticker-track { display: flex; white-space: nowrap; animation: ticker-run var(--ticker-speed) linear infinite; position: absolute; top: 50%; transform: translateY(-50%); } .ticker-track span { font-family: var(--font-body); font-size: var(--ticker-text-size); font-weight: var(--font-semibold); letter-spacing: var(--ticker-spacing); text-transform: uppercase; color: #fff; } .ticker-reverse .ticker-track { animation: ticker-run-reverse var(--ticker-speed) linear infinite; } /* ===================================================== 17. SELO STICKY — badge circular "Método Negócio Previsível" ===================================================== */ .selo-sticky { width: var(--selo-size); height: var(--selo-size); border-radius: 50%; display: inline-block; flex-shrink: 0; } .selo-sticky--sm { width: var(--selo-size-sm); height: var(--selo-size-sm); } .selo-sticky--lg { width: var(--selo-size-lg); height: var(--selo-size-lg); } .selo-sticky img { width: 100%; height: 100%; object-fit: contain; } /* ===================================================== 18. ACORDEÃO (FAQ pattern do Figma) — sempre sobre card claro ===================================================== */ details.faq-item { background: var(--bg-card); color: var(--text-on-card); border: 1px solid var(--border-on-card); border-radius: var(--radius-xl); margin-bottom: var(--space-4); overflow: hidden; transition: background var(--duration-fast); } details.faq-item summary { list-style: none; cursor: pointer; padding: 24px 32px; display: flex; align-items: center; justify-content: space-between; font-size: var(--text-xl); font-weight: var(--font-medium); color: var(--text-on-card); letter-spacing: -0.020em; line-height: 1.4; } details.faq-item summary::-webkit-details-marker { display: none; } details.faq-item summary::after { content: '+'; font-size: 28px; font-weight: 300; color: currentColor; margin-left: 16px; flex-shrink: 0; transition: transform var(--duration-base) var(--ease-default); line-height: 1; } details.faq-item[open] { background: var(--accent-base); color: #fff; border-color: transparent; } details.faq-item[open] summary { color: #fff; } details.faq-item[open] summary::after { content: '−'; transform: rotate(0); } details.faq-item .faq-body { padding: 0 32px 24px; color: var(--text-on-card-muted); font-size: var(--text-base); line-height: var(--leading-relaxed); } details.faq-item[open] .faq-body { color: rgba(255,255,255,0.92); } /* ===================================================== 19. NAVBAR — único elemento com backdrop-filter ===================================================== */ .ds-nav { position: fixed; width: 100%; top: 0; z-index: var(--z-navbar); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); background: var(--navbar-bg); border-bottom: 1px solid var(--border-subtle); } .ds-nav a { color: var(--text-secondary); text-decoration: none; font-size: var(--text-sm); transition: color var(--duration-fast); } .ds-nav a:hover { color: var(--text-primary); } /* ===================================================== 20. CARDS — padrões Mônica .card → painel neutro, adapta ao tema da seção .card-warm → ilha clara fixa (creme em qualquer tema) .card-pillar → ilha clara fixa, com layout de pilar .surface-warm→ utility para qualquer container ilha-clara .compare-card→ par antes/depois, sempre claro ===================================================== */ /* Card neutro — segue o tema do contexto */ .card { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-card); } /* Cards "warm" e itens FAQ: override local dos tokens semânticos para que botões, pills, badges e ícones DENTRO desses containers usem contexto claro automaticamente (sem precisar de classes manuais). */ .card-warm, .card-pillar, .surface-warm, .compare-card, details.faq-item:not([open]) { --bg-base: var(--bg-card); --bg-surface: var(--bg-card); --bg-surface-raised: var(--bg-card-deep); --bg-surface-overlay: var(--bg-card-overlay); --bg-input: #ffffff; --bg-hover: rgba(33,15,4,0.04); --text-primary: var(--text-on-card); --text-secondary: var(--text-on-card-muted); --text-muted: var(--text-on-card-faint); --text-accent: var(--accent-on-card-deep); --text-script: var(--accent-on-card-deep); --border-default: var(--border-on-card); --border-subtle: var(--border-on-card-subtle); --border-strong: var(--border-on-card-strong); --pill-bg: #ebe0d4; --pill-text: var(--accent-on-card-deep); background: var(--bg-card); color: var(--text-on-card); } .card-warm { border-radius: var(--radius-3xl); padding: var(--space-8); box-shadow: var(--shadow-xl); overflow: hidden; } .card-pillar { border-radius: var(--radius-xl); padding: var(--space-8); height: 340px; display: flex; flex-direction: column; justify-content: space-between; } .card-pillar h3 { font-size: 28px; font-weight: var(--font-semibold); color: var(--accent-on-card-deep); letter-spacing: -0.040em; line-height: 0.92; margin-top: var(--space-6); } .card-pillar p { font-family: var(--font-alt); font-size: var(--text-base); color: var(--text-on-card); letter-spacing: -0.020em; line-height: 1.5; } /* Compare-card (Antes/Depois) — fundo card claro, head colorido */ .compare-card { border-radius: var(--radius-3xl); box-shadow: var(--shadow-xl); overflow: hidden; } /* ===================================================== 21. SCROLLBAR (estilizada com a paleta da marca) ===================================================== */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg-surface-raised); } ::-webkit-scrollbar-thumb { background: var(--brand-400); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--brand-600); } /* ===================================================== FIM ===================================================== */