/* * ═══════════════════════════════════════════════════════════════ * RAQUEL MENEZES — DESIGN TOKENS * Para uso no Claude Code / WordPress Child Theme * Gerado em: junho de 2026 * Baseado em: Briefing + Design Premium Directives * ═══════════════════════════════════════════════════════════════ */ :root { /* ── CORES ──────────────────────────────────────────────────── */ /* Paleta principal */ --color-ameixa: #5C1E3A; /* Fundo hero, navbar, footer, seções escuras */ --color-rosa: #9E3B6B; /* Subtítulos, hover states, ícones ativos */ --color-ouro: #C9923A; /* CTAs, linhas, citações, cursor, destaques */ --color-creme: #FDF8F4; /* Backgrounds claros, cards, texto sobre escuro */ --color-noite: #1A1018; /* Textos, backgrounds modo escuro, footer */ --color-rosa-nevoa: #E8A4BF; /* Backgrounds depoimentos, gradientes suaves */ /* Derivadas com opacidade */ --color-ameixa-glass: rgba(92, 30, 58, 0.88); /* Navbar glassmorphism */ --color-ameixa-light: rgba(92, 30, 58, 0.18); /* Cards glassmorphism */ --color-ouro-glass: rgba(201, 146, 58, 0.18); /* Bordas douradas */ --color-ouro-line: rgba(201, 146, 58, 0.25); /* Linhas separadoras */ --color-creme-muted: rgba(253, 248, 244, 0.92); /* Texto secundário */ --color-creme-subtle: rgba(253, 248, 244, 0.35); /* Texto terciário */ /* Gradientes */ --gradient-hero-name: linear-gradient(140deg, #ffffff 0%, #FDF8F4 25%, #E8C87A 55%, #C9923A 75%, #9E3B6B 100%); --gradient-gold-line: linear-gradient(to right, transparent, #C9923A, transparent); --gradient-hero-overlay: linear-gradient(to top, rgba(26,16,24,0.97) 0%, rgba(92,30,58,0.6) 45%, rgba(92,30,58,0.2) 75%, transparent 100%); --gradient-card-overlay: linear-gradient(to top, rgba(26,16,24,0.92) 0%, rgba(92,30,58,0.5) 45%, transparent 100%); --gradient-dark-fade: linear-gradient(180deg, #3a1228 0%, #1A1018 100%); /* ── TIPOGRAFIA ─────────────────────────────────────────────── */ --font-serif: Georgia, 'Times New Roman', Times, serif; --font-sans: 'Calibri', 'Gill Sans', 'Trebuchet MS', sans-serif; /* Tamanhos — Títulos (fluid com clamp) */ --text-h1-hero: clamp(58px, 6.2vw, 88px); /* Nome Raquel Menezes no hero */ --text-h1-page: clamp(48px, 6vw, 84px); /* Títulos de página */ --text-h2-section: clamp(28px, 3.2vw, 44px); /* Títulos de seção */ --text-h2-book: clamp(28px, 3.5vw, 46px); /* Título do livro */ --text-h3-card: clamp(16px, 1.8vw, 24px); /* Títulos de cards */ /* Tamanhos — Corpo */ --text-body-lg: 18px; /* Poemas, citações importantes */ --text-body: 16px; /* Texto corrido, bio */ --text-body-sm: 14px; /* Legendas, detalhes */ --text-label: 11px; /* Labels uppercase, categorias */ --text-nav: 12px; /* Links de navegação */ /* Pesos */ --weight-bold: 700; --weight-regular: 400; --weight-light: 300; /* Letter-spacing */ --tracking-tight: -0.04em; /* Nome da autora no hero */ --tracking-normal: 0em; /* Texto corrido */ --tracking-wide: 0.16em; /* Links de nav */ --tracking-wider: 0.22em; /* Botões CTA */ --tracking-widest: 0.38em; /* Labels uppercase */ /* Line-height */ --leading-tight: 0.95; /* H1 hero cinemático */ --leading-snug: 1.2; /* Títulos de seção */ --leading-normal: 1.65; /* Cards, citações */ --leading-relaxed: 1.85; /* Corpo de texto */ --leading-poem: 2.0; /* Poemas (máximo respiro) */ /* ── ESPAÇAMENTO ────────────────────────────────────────────── */ /* Padding entre seções */ --space-section: 120px; /* Padding top/bottom padrão de seção */ --space-section-lg: 140px; /* Seções de destaque (hero, poema) */ --space-section-sm: 80px; /* Seções compactas (social, divider) */ /* Padding interno de página */ --space-page-h: 80px; /* Padding horizontal das seções */ --space-page-h-sm: 40px; /* Padding em viewports menores */ /* Espaçamentos componentes */ --space-gap-grid: 14px; /* Gap do bento grid do blog */ --space-gap-cards: 24px; /* Gap entre cards de depoimentos */ --space-gap-nav: 40px; /* Espaçamento entre links da nav */ --space-label-mb: 24px; /* Margem abaixo de section-label */ --space-title-mb: 32px; /* Margem abaixo de títulos de seção */ /* ── COMPONENTES ────────────────────────────────────────────── */ /* Navbar */ --nav-height: 80px; --nav-height-scrolled: 60px; --nav-transition: all 0.4s ease; --nav-bg-scrolled: rgba(92, 30, 58, 0.88); --nav-blur: blur(22px); /* Botões */ --btn-radius: 2px; --btn-padding-v: 16px; --btn-padding-h: 38px; --btn-font-size: 11px; --btn-tracking: 0.22em; --btn-transition: box-shadow 0.3s ease, transform 0.2s ease; /* Cards (glassmorphism) */ --card-bg: rgba(92, 30, 58, 0.18); --card-border: 1px solid rgba(201, 146, 58, 0.14); --card-blur: blur(12px); --card-radius: 2px; --card-hover-shadow: 0 24px 64px rgba(92, 30, 58, 0.35); --card-hover-translate: translateY(-10px); /* Cursor customizado */ --cursor-size: 14px; --cursor-size-hover: 44px; --cursor-color: #C9923A; --cursor-blend: difference; --cursor-lerp: 0.13; /* Fator de interpolação do lerp */ /* Linha separadora dourada */ --divider-height: 1px; --divider-bg: linear-gradient(to right, transparent, #C9923A, transparent); --divider-transition: width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* ── ANIMAÇÕES ───────────────────────────────────────────────── */ /* Reveal ao scroll */ --reveal-initial: translateY(28px); --reveal-duration: 0.8s; --reveal-easing: ease; --reveal-delay-1: 0.12s; --reveal-delay-2: 0.24s; --reveal-delay-3: 0.36s; --reveal-delay-4: 0.48s; /* Livro 3D */ --book-rotate-initial: rotateY(28deg) rotateX(4deg); --book-rotate-final: rotateY(0deg) rotateX(0deg); --book-transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Cards blog hover */ --card-img-zoom: scale(1.08); --card-img-transition: transform 0.55s ease; --card-content-hover: translateY(-10px); --card-content-transition: transform 0.4s ease; /* Poem words */ --word-reveal-delay: 75ms; /* Delay entre cada palavra no reveal */ --word-transform: translateY(14px); --word-duration: 0.45s; /* Botão fill (::before scaleX) */ --btn-fill-transition: transform 0.4s ease; --btn-fill-bg: rgba(255, 255, 255, 0.18); /* Mesh glow */ --mesh-duration: 18s; --mesh-bg: rgba(158, 59, 107, 0.22); /* ── BREAKPOINTS ─────────────────────────────────────────────── */ /* Usar em @media queries: */ /* Desktop large: 1440px */ /* Desktop: 1280px */ /* Tablet: 768px */ /* Mobile: 375px */ /* ── SOMBRAS ─────────────────────────────────────────────────── */ --shadow-book: -28px 28px 80px rgba(0, 0, 0, 0.7), -8px 8px 24px rgba(0, 0, 0, 0.5), 22px 0 44px rgba(201, 146, 58, 0.12); --shadow-card-hover: 0 24px 64px rgba(92, 30, 58, 0.35); --shadow-btn-hover: 0 8px 32px rgba(201, 146, 58, 0.4); --shadow-img-hover: inset 0 0 0 4px rgba(201, 146, 58, 0.3); } /* * ═══════════════════════════════════════════════════════════════ * CLASSES UTILITÁRIAS * ═══════════════════════════════════════════════════════════════ */ /* Tipografia */ .text-serif { font-family: var(--font-serif); } .text-sans { font-family: var(--font-sans); } .text-italic { font-style: italic; } .text-ouro { color: var(--color-ouro); } .text-creme { color: var(--color-creme); } .text-ameixa { color: var(--color-ameixa); } .text-muted { color: var(--color-creme-muted); } /* Label uppercase padrão */ .section-label { display: block; font-family: var(--font-sans); font-size: var(--text-label); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-ouro); margin-bottom: var(--space-label-mb); } /* Linha separadora dourada animada */ .gold-divider { height: var(--divider-height); background: var(--gradient-gold-line); width: 0; transition: var(--divider-transition); } .gold-divider.visible { width: 100%; } /* Reveal ao scroll */ .reveal { opacity: 0; transform: var(--reveal-initial); transition: opacity var(--reveal-duration) var(--reveal-easing), transform var(--reveal-duration) var(--reveal-easing); } .reveal.vis { opacity: 1; transform: translateY(0); } .reveal-d1 { transition-delay: var(--reveal-delay-1); } .reveal-d2 { transition-delay: var(--reveal-delay-2); } .reveal-d3 { transition-delay: var(--reveal-delay-3); } .reveal-d4 { transition-delay: var(--reveal-delay-4); } /* Gradiente tipográfico no nome */ .text-gradient-brand { background: var(--gradient-hero-name); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Glassmorphism card */ .card-glass { background: var(--card-bg); border: var(--card-border); backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur); border-radius: var(--card-radius); transition: transform 0.45s ease, box-shadow 0.45s ease; } .card-glass:hover { transform: var(--card-hover-translate); box-shadow: var(--card-hover-shadow); } /* * ═══════════════════════════════════════════════════════════════ * NOTAS PARA O CLAUDE CODE * ═══════════════════════════════════════════════════════════════ * * 1. CURSOR CUSTOMIZADO * Criar
no body. * CSS: position:fixed, width/height var(--cursor-size), * background var(--cursor-color), border-radius 50%, * mix-blend-mode var(--cursor-blend), pointer-events:none, z-index:9999. * JS: lerp com fator var(--cursor-lerp) no mousemove. * Expandir para var(--cursor-size-hover) em links/botões. * * 2. NAVBAR GLASSMORPHISM * Ao scroll > 60px: background var(--nav-bg-scrolled), * backdrop-filter var(--nav-blur), height var(--nav-height-scrolled). * Transition: var(--nav-transition). * * 3. POEMA PALAVRA-POR-PALAVRA * Split innerHTML por palavras em . * IntersectionObserver dispara classe 'vis' com delay * de var(--word-reveal-delay) * índice. * * 4. LIVRO 3D * CSS perspective:1200px + transform var(--book-rotate-initial). * IntersectionObserver (threshold 0.3) adiciona classe 'in-view': * transform var(--book-rotate-final), transition var(--book-transition). * * 5. SCROLL REVEAL * IntersectionObserver (threshold 0.12) em .reveal: * adiciona classe 'vis'. Ver vars acima para timing. * * 6. LINHA OURO * IntersectionObserver (threshold 0.5) em .gold-divider: * adiciona classe 'visible' → width: 100%. * * 7. WORDPRESS — DECLARAR NO CHILD THEME * Adicionar este arquivo como: wp-content/themes/[theme]-child/tokens.css * Enqueue via functions.php antes do style.css principal. * * ═══════════════════════════════════════════════════════════════ */