→ tokens dark dentro de página light

→ tokens light dentro de página dark → página inteiramente dark ===================================================== */ /* ===================================================== PRIMITIVOS — NÃO usar diretamente em componentes ===================================================== */ :root { /* --- BRAND: Deep Night Blue (escala 50–950) --- Âncora: night-600 = #1A2C3A Azul-marinho profundo, editorial, autoridade feminina */ --night-50: #EEF3F7; /* azul-névoa quase branco */ --night-100: #D8E4ED; /* azul-gelo */ --night-200: #B5C9D9; /* azul-pérola */ --night-300: #8AAFC5; /* azul-slate suave */ --night-400: #5E90AE; /* azul médio */ --night-500: #3B6E8C; /* azul slate */ --night-600: #1A2C3A; /* DEEP NIGHT BLUE — âncora */ --night-700: #243341; /* CTA sólida light — texto sobre branco */ --night-800: #162433; /* surface dark raised */ --night-900: #0F1E29; /* bg-base dark */ --night-950: #070E14; /* marinho quase-preto */ /* --- SECUNDÁRIO: Aged Quartz Pink (escala 50–950) --- Âncora: quartz-400 = #B8A1A6 Rosé amadurecido, calor feminino sem ser frágil */ --quartz-50: #FAF4F5; /* rosé quase branco */ --quartz-100: #F3E7E9; /* rosé pó claro */ --quartz-200: #E8D8DA; /* rosé pó */ --quartz-300: #D4B8BC; /* quartz claro */ --quartz-400: #B8A1A6; /* AGED QUARTZ — âncora */ --quartz-500: #9C8589; /* quartz médio */ --quartz-600: #7D666B; /* quartz profundo */ --quartz-700: #5E4A4E; /* quartz escuro */ --quartz-800: #3E3033; /* quartz noite */ --quartz-900: #211A1C; /* quartz sombra */ --quartz-950: #110D0E; /* quartz quase-preto */ /* --- ACENTO PREMIUM: Soft Champagne Gold (escala 50–950) --- Âncora: gold-400 = #D4B88D Champagne dourado, luz de fim de tarde, premium discreto */ --gold-50: #FBF6EE; /* creme quase branco */ --gold-100: #F4E9D4; /* champagne pálido */ --gold-200: #EAD5B0; /* champagne claro */ --gold-300: #DECA9F; /* champagne médio */ --gold-400: #D4B88D; /* SOFT CHAMPAGNE GOLD — âncora */ --gold-500: #C09A6A; /* gold médio */ --gold-600: #A87C4C; /* gold saturado */ --gold-700: #8A6236; /* gold profundo */ --gold-800: #6B4A1F; /* gold escuro */ --gold-900: #3D2A0F; /* gold sombra */ --gold-950: #1E1408; /* gold quase-preto */ /* --- NEUTROS QUENTES: Família Linen --- Ivory rosado que foge do branco frio fitness Usado como fundos no tema light */ --linen-50: #FAF6F3; /* linen quase branco — bg-base light */ --linen-100: #F4ECE8; /* linen principal */ --linen-200: #EAE0DB; /* linen médio */ --linen-300: #D9CECD; /* linen escuro suave */ --linen-400: #BDB2B0; /* linen mocha */ --linen-500: #9C908E; /* linen cinza rosado */ --linen-600: #786D6B; /* linen profundo */ --linen-700: #564D4B; /* linen escuro */ --linen-800: #363030; /* linen quase preto */ --linen-900: #1E1A1A; /* linen sombra */ --linen-950: #0F0D0D; /* linen preto */ /* --- ESTADOS SEMÂNTICOS --- Calibrados para harmonizar com azul-marinho/quartz/gold Sage para success, âmbar quente para warning, rosa-vinho para danger, azul empoeirado para info */ --success-300: #A3C9B5; /* sage suave (não verde-limão fitness) */ --success-400: #6FAD94; --success-500: #4A9178; --success-600: #337360; --success-700: #2F5C46; /* sage profundo — texto em light */ --warning-300: #F0C978; /* âmbar caloroso — harmoniza com champagne */ --warning-400: #E6AA4A; --warning-500: #C98C30; --warning-600: #A96F1C; --warning-700: #7D4F0E; /* âmbar escuro — texto em light */ --danger-300: #DDA0AC; /* rosa-vinho suave — evita vermelho clínico */ --danger-400: #C97B8C; --danger-500: #B05872; --danger-600: #8F3B58; --danger-700: #7B3242; /* rosa-vinho profundo — texto em light */ --info-300: #9BB5C8; /* azul empoeirado — harmoniza com night */ --info-400: #7499B5; --info-500: #527DA2; --info-600: #38618A; --info-700: #254870; /* azul empoeirado profundo — texto em light */ } /* ===================================================== TOKENS SEMÂNTICOS — LIGHT (padrão de página) ===================================================== */ :root, [data-theme="light"] { color-scheme: light; /* --- Superfícies --- */ --bg-base: var(--linen-50); /* #FAF6F3 — linen quente */ --bg-surface: #FFFFFF; --bg-surface-raised: var(--linen-100); /* #F4ECE8 */ --bg-surface-overlay: var(--linen-200); /* #EAE0DB */ --bg-hover: rgba(26, 44, 58, 0.04); --bg-active: rgba(26, 44, 58, 0.08); --bg-input: #FFFFFF; --bg-disabled: rgba(26, 44, 58, 0.04); /* --- Texto --- */ --text-primary: var(--night-700); /* #243341 — marinho escuro quente */ --text-secondary: rgba(36, 51, 65, 0.68); --text-muted: rgba(36, 51, 65, 0.48); --text-disabled: rgba(36, 51, 65, 0.28); --text-inverted: var(--linen-50); --text-accent: var(--night-700); /* CTA link = marinho */ --text-accent-hover: var(--night-600); --text-gold: var(--gold-700); /* gold legível em light */ --text-quartz: var(--quartz-700); /* quartz legível em light */ /* --- Bordas --- */ --border-default: rgba(26, 44, 58, 0.12); --border-subtle: rgba(26, 44, 58, 0.07); --border-focus: var(--night-600); --border-accent: rgba(26, 44, 58, 0.28); --border-gold: rgba(212, 184, 141, 0.55); --border-quartz: rgba(184, 161, 166, 0.45); --border-error: rgba(176, 88, 114, 0.45); --border-success: rgba(74, 145, 120, 0.40); /* --- Acento principal (CTA — night blue sólido) --- */ --accent-base: var(--night-700); /* #243341 — CTA sólida */ --accent-hover: var(--night-600); --accent-muted: rgba(26, 44, 58, 0.07); --accent-text: var(--linen-50); /* branco-linen sobre night */ --accent-shadow: 0 6px 20px rgba(26, 44, 58, 0.22); --accent-shadow-hover: 0 10px 32px rgba(26, 44, 58, 0.35); /* --- Acento secundário (Quartz / rosé) --- */ --quartz-base: var(--quartz-400); --quartz-hover: var(--quartz-500); --quartz-muted: rgba(184, 161, 166, 0.15); --quartz-text-on: var(--night-800); /* texto sobre quartz */ /* --- Acento premium (Gold) --- */ --gold-base: var(--gold-400); /* #D4B88D */ --gold-hover: var(--gold-500); --gold-muted: rgba(212, 184, 141, 0.18); --gold-text: var(--gold-800); /* #6B4A1F — legível em light */ /* --- Estados --- */ --success-bg: rgba(74, 145, 120, 0.09); --success-border: rgba(74, 145, 120, 0.32); --success-text: var(--success-700); /* #2F5C46 */ --warning-bg: rgba(201, 140, 48, 0.10); --warning-border: rgba(201, 140, 48, 0.32); --warning-text: var(--warning-700); /* #7D4F0E */ --danger-bg: rgba(176, 88, 114, 0.09); --danger-border: rgba(176, 88, 114, 0.32); --danger-text: var(--danger-700); /* #7B3242 */ --info-bg: rgba(82, 125, 162, 0.09); --info-border: rgba(82, 125, 162, 0.30); --info-text: var(--info-700); /* #254870 */ /* --- Shadows (single-layer, tinta azulada em vez de cinza puro) --- Levemente marinho: rgba(15, 30, 41, ...) = night-900 diluído */ --shadow-sm: 0 1px 4px rgba(15, 30, 41, 0.07); --shadow-md: 0 4px 16px rgba(15, 30, 41, 0.09); --shadow-lg: 0 8px 32px rgba(15, 30, 41, 0.11); --shadow-card: 0 2px 12px rgba(15, 30, 41, 0.08), 0 0 0 1px rgba(26, 44, 58, 0.05); --shadow-cta: var(--accent-shadow); /* --- Navbar (único elemento com backdrop-filter) --- */ --navbar-bg: rgba(250, 246, 243, 0.90); /* --- Gradientes brand --- */ --gradient-brand: linear-gradient(135deg, var(--night-600) 0%, var(--night-800) 100%); --gradient-gold: linear-gradient(135deg, var(--gold-300) 0%, var(--gold-500) 100%); --gradient-quartz: linear-gradient(135deg, var(--quartz-300) 0%, var(--quartz-500) 100%); --gradient-overlay: linear-gradient(to bottom, transparent 0%, var(--bg-base) 100%); } /* ===================================================== TOKENS SEMÂNTICOS — DARK (por seção ou página) Theme dark NÃO é inversão: tons próprios calibrados Fundo marinho profundo + acentos gold/quartz luminosos ===================================================== */ [data-theme="dark"] { color-scheme: dark; /* --- Superfícies --- */ --bg-base: var(--night-900); /* #0F1E29 — marinho profundo */ --bg-surface: var(--night-800); /* #162433 */ --bg-surface-raised: #1C2E3F; /* entre night-800 e night-700 */ --bg-surface-overlay: #243346; --bg-hover: rgba(250, 246, 243, 0.05); --bg-active: rgba(212, 184, 141, 0.12); --bg-input: var(--night-800); --bg-disabled: rgba(250, 246, 243, 0.04); /* --- Texto --- */ --text-primary: var(--linen-50); /* #FAF6F3 — linen quente */ --text-secondary: rgba(250, 246, 243, 0.68); --text-muted: rgba(250, 246, 243, 0.42); --text-disabled: rgba(250, 246, 243, 0.25); --text-inverted: var(--night-900); --text-accent: var(--gold-300); /* #DECA9F — ouro luminoso em dark */ --text-accent-hover: var(--gold-200); --text-gold: var(--gold-300); --text-quartz: var(--quartz-200); /* quartz luminoso em dark */ /* --- Bordas --- */ --border-default: rgba(250, 246, 243, 0.12); --border-subtle: rgba(250, 246, 243, 0.06); --border-focus: var(--gold-300); --border-accent: rgba(212, 184, 141, 0.38); --border-gold: rgba(222, 202, 159, 0.42); --border-quartz: rgba(212, 184, 188, 0.38); --border-error: rgba(221, 160, 172, 0.45); --border-success: rgba(111, 173, 148, 0.35); /* --- Acento principal (CTA — gold sólido sobre dark) --- */ --accent-base: var(--gold-400); /* #D4B88D — champagne sobre marinho */ --accent-hover: var(--gold-300); --accent-muted: rgba(212, 184, 141, 0.15); --accent-text: var(--night-900); /* marinho sobre gold */ --accent-shadow: 0 6px 20px rgba(212, 184, 141, 0.35); --accent-shadow-hover: 0 10px 32px rgba(212, 184, 141, 0.50); /* --- Acento secundário (Quartz luminoso) --- */ --quartz-base: var(--quartz-300); --quartz-hover: var(--quartz-200); --quartz-muted: rgba(212, 184, 188, 0.13); --quartz-text-on: var(--night-900); /* --- Acento premium (Gold) --- */ --gold-base: var(--gold-300); /* mais claro para dark */ --gold-hover: var(--gold-200); --gold-muted: rgba(222, 202, 159, 0.14); --gold-text: var(--gold-200); /* --- Estados --- */ --success-bg: rgba(111, 173, 148, 0.12); --success-border: rgba(111, 173, 148, 0.30); --success-text: var(--success-300); /* sage luminoso */ --warning-bg: rgba(230, 170, 74, 0.12); --warning-border: rgba(230, 170, 74, 0.30); --warning-text: var(--warning-300); /* âmbar luminoso */ --danger-bg: rgba(201, 123, 140, 0.12); --danger-border: rgba(201, 123, 140, 0.35); --danger-text: var(--danger-300); /* rosa-vinho luminoso */ --info-bg: rgba(116, 153, 181, 0.12); --info-border: rgba(116, 153, 181, 0.30); --info-text: var(--info-300); /* azul empoeirado luminoso */ /* --- Shadows (tinta marinho profunda) --- */ --shadow-sm: 0 1px 4px rgba(7, 14, 20, 0.35); --shadow-md: 0 4px 16px rgba(7, 14, 20, 0.45); --shadow-lg: 0 8px 32px rgba(7, 14, 20, 0.55); --shadow-card: 0 2px 12px rgba(7, 14, 20, 0.40), 0 0 0 1px rgba(250, 246, 243, 0.05); --shadow-cta: var(--accent-shadow); /* --- Navbar --- */ --navbar-bg: rgba(15, 30, 41, 0.90); /* --- Gradientes brand --- */ --gradient-brand: linear-gradient(135deg, var(--night-700) 0%, var(--night-950) 100%); --gradient-gold: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-600) 100%); --gradient-quartz: linear-gradient(135deg, var(--quartz-300) 0%, var(--quartz-500) 100%); --gradient-overlay: linear-gradient(to bottom, transparent 0%, var(--bg-base) 100%); } /* ===================================================== GRADIENTES EXPANDIDOS ===================================================== */ :root { --gradient-hero: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(26, 44, 58, 0.12) 0%, transparent 70%); --gradient-hero-dark: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(212, 184, 141, 0.10) 0%, transparent 70%); --gradient-text: linear-gradient(135deg, var(--night-600) 0%, var(--night-400) 100%); --gradient-text-gold: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-700) 100%); --gradient-card-highlight: linear-gradient(135deg, rgba(212, 184, 141, 0.06) 0%, rgba(212, 184, 141, 0.01) 100%); --gradient-divider: linear-gradient(to right, transparent, var(--border-default), transparent); --gradient-overlay-top: linear-gradient(to bottom, var(--bg-base) 0%, transparent 100%); --gradient-overlay-bottom: 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 ===================================================== */ :root { /* Announcement Bar */ --announcement-bg: var(--accent-base); --announcement-text: var(--linen-50); --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; /* Progress steps */ --step-size: 36px; --step-size-sm: 28px; --step-connector-h: 2px; /* Video play button */ --play-btn-size: 72px; --play-btn-bg: rgba(255, 255, 255, 0.96); --play-btn-icon: var(--accent-base); --play-btn-shadow: 0 8px 32px rgba(15, 30, 41, 0.28); /* Toast / Live Proof */ --toast-max-width: 320px; --toast-padding: var(--space-4); --toast-radius: var(--radius-xl); } /* ===================================================== TIPOGRAFIA Display: Montserrat (sans geométrica premium) Accent: Cormorant Garamond Regular (wordmark da marca) Body: Lora (serif editorial com charme itálico) Mono: system-ui mono ===================================================== */ :root { --font-heading: 'Montserrat', system-ui, -apple-system, sans-serif; --font-accent: 'Cormorant Garamond', 'Times New Roman', Georgia, serif; --font-body: 'Lora', Georgia, 'Times New Roman', serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; /* Display — clamp(mobile, fluid, desktop) */ --text-display-2xl: clamp(3.5rem, 9vw, 7rem); /* 56–112px (hero gigante) */ --text-display-xl: clamp(3rem, 8vw, 6rem); /* 48–96px */ --text-display-lg: clamp(2.5rem, 6vw, 4.5rem); /* 40–72px */ --text-display-md: clamp(2rem, 5vw, 3.25rem); /* 32–52px */ --text-display-sm: clamp(1.75rem,4vw, 2.5rem); /* 28–40px */ /* Conteúdo — escala estável */ --text-xs: 0.75rem; /* 12px — caption, overline */ --text-sm: 0.875rem; /* 14px — small text */ --text-base: 1rem; /* 16px — body padrão */ --text-lg: 1.125rem; /* 18px — body destaque */ --text-xl: 1.25rem; /* 20px — h6 */ --text-2xl: 1.5rem; /* 24px — h5 */ --text-3xl: 1.875rem; /* 30px — h4 */ --text-4xl: 2.25rem; /* 36px — h3 */ /* Line-heights */ --leading-none: 1; --leading-tight: 1.15; /* headlines display Montserrat */ --leading-snug: 1.30; /* h1–h3 */ --leading-normal: 1.5; /* body */ --leading-relaxed: 1.7; /* Lora texto corrido */ --leading-loose: 1.9; /* citação, prosa Lora */ /* Letter-spacing */ --tracking-display: -0.020em; /* Montserrat fica mais elegante levemente negativo */ --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-widest: 0.10em; /* overline, label uppercase */ /* Pesos — Montserrat: 400..800; Lora: 400, 500, 600 + italic */ --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; } /* ===================================================== ESPAÇAMENTO (grid 4px) ===================================================== */ :root { --space-0: 0; --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 — fluido com clamp */ --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-narrow: 720px; --container-wide: 1360px; --container-padding: clamp(1rem, 5vw, 2rem); } /* ===================================================== RAIOS DE BORDA ===================================================== */ :root { --radius-none: 0; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 24px; --radius-4xl: 32px; --radius-full: 9999px; } /* ===================================================== BREAKPOINTS (referência — usar via media queries) ===================================================== */ :root { --bp-xs: 360px; --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; } /* ===================================================== ANIMAÇÕES — Tokens ===================================================== */ :root { /* Duração */ --duration-xfast: 75ms; --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; --duration-hero: 800ms; /* Delay (para 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-dropdown: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400; --z-tooltip: 500; --z-navbar: 50; } /* ===================================================== 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; } .icon-container { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-lg); background: var(--accent-muted); color: var(--text-primary); 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--gold { background: var(--gold-muted); color: var(--gold-text); } .icon-container--quartz { background: var(--quartz-muted); color: var(--text-quartz); } /* ===================================================== UTILITÁRIOS DE ESPAÇAMENTO Formato: .{prop}{dir}-{escala} prop: m = margin | p = padding | gap dir: t = top | b = bottom | l = left | r = right x = horizontal | y = vertical | (vazio = todos) ===================================================== */ /* --- 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 --- */ .mx-0 { margin-left: 0; margin-right: 0; } .mx-auto { margin-left: auto; margin-right: auto; } .mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); } .mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); } .mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); } /* --- Margin vertical --- */ .my-0 { margin-top: 0; margin-bottom: 0; } .my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); } .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-2 { padding-left: var(--space-2); padding-right: var(--space-2); } .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 sides --- */ .p-0 { padding: 0; } .p-2 { padding: var(--space-2); } .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); } .p-10 { padding: var(--space-10); } /* --- Gap (flex/grid) --- */ .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 (entre seções de página) --- */ .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-xs { padding-top: var(--section-xs); } .section-pt-sm { padding-top: var(--section-sm); } .section-pt-md { padding-top: var(--section-md); } .section-pt-lg { padding-top: var(--section-lg); } .section-pt-xl { padding-top: var(--section-xl); } .section-pb-xs { padding-bottom: var(--section-xs); } .section-pb-sm { padding-bottom: var(--section-sm); } .section-pb-md { padding-bottom: var(--section-md); } .section-pb-lg { padding-bottom: var(--section-lg); } .section-pb-xl { padding-bottom: var(--section-xl); } /* --- Display utilities --- */ .flex { display: flex; } .inline-flex { display: inline-flex; } .grid { display: grid; } .block { display: block; } .inline-block{ display: inline-block; } .hidden { display: none; } .flex-col { flex-direction: column; } .flex-row { flex-direction: row; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1 1 0%; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .items-stretch { align-items: stretch; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .justify-around { justify-content: space-around; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .w-full { width: 100%; } .h-full { height: 100%; } .max-w-prose { max-width: 65ch; } .max-w-narrow { max-width: var(--container-narrow); } /* --- Overrides responsivos (mobile-first) --- */ @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); } .sm\:flex-col { flex-direction: column; } .sm\:text-center{ text-align: center; } } /* ===================================================== 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(212, 184, 141, 0); } 50% { box-shadow: 0 0 0 8px rgba(212, 184, 141, 0.20); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } } /* 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); } } /* ===================================================== ANIMAÇÕES DE ENTRADA — Scroll-triggered ===================================================== */ [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); } /* ===================================================== MICRO-INTERAÇÕES — Utilitários hover/focus ===================================================== */ .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); } /* ===================================================== SEQUÊNCIA HERO — Stagger automático por CSS ===================================================== */ .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; } /* ===================================================== SHIMMER + 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; } .skeleton, .skeleton-text, .skeleton-avatar, .skeleton-card { background: var(--bg-surface-raised); position: relative; overflow: hidden; } .skeleton::after, .skeleton-text::after, .skeleton-avatar::after, .skeleton-card::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.skeleton-text--lg { height: 1.5em; } .skeleton-text.skeleton-text--sm { height: 0.75em; } .skeleton-text.skeleton-text--w-full{ width: 100%; } .skeleton-text.skeleton-text--w-3-4 { width: 75%; } .skeleton-text.skeleton-text--w-1-2 { width: 50%; } .skeleton-avatar { border-radius: var(--radius-full); width: 44px; height: 44px; flex-shrink: 0; } .skeleton-avatar--lg { width: 64px; height: 64px; } .skeleton-card { border-radius: var(--radius-xl); height: 200px; } /* ===================================================== prefers-reduced-motion — Cirúrgico Mantém transições de estado (hover/focus — funcionais) Remove apenas decorativas e de entrada ===================================================== */ @media (prefers-reduced-motion: reduce) { [data-animate] { opacity: 1; transform: none; filter: none; transition: none; } .hero-sequence > * { opacity: 1; transform: none; animation: none; } .animate-pulse-soft, .animate-float, .animate-wiggle, .animate-spin, .shimmer, .skeleton::after, .skeleton-text::after, .skeleton-avatar::after, .skeleton-card::after { animation: none; } } /* ===================================================== RESET MÍNIMO + BASE TIPOGRÁFICA ===================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background-color: var(--bg-base); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-relaxed); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Seções com data-theme herdam o fundo automaticamente */ [data-theme] { background-color: var(--bg-base); color: var(--text-primary); } /* Headings (Montserrat) */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); color: var(--text-primary); margin: 0; } h1 { font-size: var(--text-display-lg); font-weight: var(--font-bold); } h2 { font-size: var(--text-display-md); } h3 { font-size: var(--text-display-sm); } h4 { font-size: var(--text-3xl); line-height: var(--leading-snug); } h5 { font-size: var(--text-2xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); } h6 { font-size: var(--text-xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); } p { margin: 0; color: var(--text-secondary); line-height: var(--leading-relaxed); font-family: var(--font-body); } a { color: var(--text-accent); text-decoration: none; transition: color var(--duration-fast) var(--ease-default); } a:hover { color: var(--text-accent-hover); } /* Eyebrow / overline label */ .overline { display: inline-block; font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--text-accent); } /* Lora itálico — acento editorial (citações, destaques poéticos) */ .italic-lora { font-family: var(--font-body); font-style: italic; font-weight: var(--font-normal); } /* Cormorant Garamond — wordmark da marca "Kathleen Santos" e taglines */ .font-accent { font-family: var(--font-accent); font-weight: var(--font-normal); letter-spacing: 0; } /* Citação editorial */ blockquote { font-family: var(--font-body); font-style: italic; font-size: var(--text-lg); line-height: var(--leading-loose); color: var(--text-secondary); border-left: 3px solid var(--border-gold); padding-left: var(--space-6); margin: 0; } /* ===================================================== CONTAINER ===================================================== */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-padding); } .container--narrow { max-width: var(--container-narrow); } .container--wide { max-width: var(--container-wide); }