/* ============================================================ temas.css — 3 direções visuais para a landing Feitosa & Freitas. Todas respeitam a marca (bordô + dourado); mudam clima e forma. Cada ativa um bloco. base.css consome as vars. ============================================================ */ /* ---------- Tema 1 — Institucional Clássico (creme + serifada) ---------- */ html[data-tema="1"] { --fonte-titulo: "Cormorant Garamond", "Palatino Linotype", Georgia, serif; --fonte-corpo: "Inter", "Segoe UI", system-ui, sans-serif; --peso-titulo: 600; --fundo: #fbf8f3; --fundo-alt: #f3ebdf; --fundo-card: #ffffff; --fundo-escuro: #5a0e12; --fundo-rodape: #3a0a0d; --texto: #2a1a1b; --texto-suave: #6b5658; --texto-claro: #f7efe4; --texto-claro-suave: #d9c3b8; --destaque: #a97f1d; --destaque-texto: #8b1519; --destaque-claro: #d8ad3a; --hairline: #e7ddd2; --radius-botao: 4px; --radius-card: 8px; --borda-foto: 1px solid rgba(0, 0, 0, 0.06); } html[data-tema="1"] h1, html[data-tema="1"] h2 { letter-spacing: -0.01em; } /* ---------- Tema 2 — Moderno Editorial (branco + sans + dourado) ---------- */ html[data-tema="2"] { --fonte-titulo: "Inter", "Segoe UI", system-ui, sans-serif; --fonte-corpo: "Inter", "Segoe UI", system-ui, sans-serif; --peso-titulo: 700; --fundo: #ffffff; --fundo-alt: #faf5ee; --fundo-card: #fbf9f5; --fundo-escuro: #5a0e12; --fundo-rodape: #2c0709; --texto: #221012; --texto-suave: #6f5a5b; --texto-claro: #f8f0e6; --texto-claro-suave: #dcc7bc; --destaque: #b5872a; --destaque-texto: #9a1b20; --destaque-claro: #e2ba4d; --hairline: #ece3d8; --radius-botao: 999px; --radius-card: 16px; --borda-foto: none; } html[data-tema="2"] h1 { letter-spacing: -0.035em; } html[data-tema="2"] h2 { letter-spacing: -0.03em; } html[data-tema="2"] .hero-foto img { box-shadow: 0 24px 60px rgba(90, 14, 18, 0.18); } html[data-tema="2"] .adv-card { box-shadow: 0 12px 40px rgba(90, 14, 18, 0.08); } /* ---------- Tema 3 — Escuro Premium (fundo bordô + dourado + texto claro) ---------- */ html[data-tema="3"] { --fonte-titulo: "Cormorant Garamond", "Palatino Linotype", Georgia, serif; --fonte-corpo: "Inter", "Segoe UI", system-ui, sans-serif; --peso-titulo: 600; --fundo: #4a0b0f; --fundo-alt: #3e0a0d; --fundo-card: #611116; --fundo-escuro: #2c0709; --fundo-rodape: #1e0405; --texto: #f3e7dc; --texto-suave: #cbb2a8; --texto-claro: #f7efe4; --texto-claro-suave: #d3bab0; --destaque: #d8ad3a; --destaque-texto: #e2ba4d; --destaque-claro: #ecc766; --hairline: rgba(255, 255, 255, 0.13); --radius-botao: 4px; --radius-card: 10px; --borda-foto: 1px solid rgba(216, 173, 58, 0.3); } html[data-tema="3"] h1, html[data-tema="3"] h2 { letter-spacing: -0.005em; } /* No tema escuro o header precisa de contraste extra */ html[data-tema="3"] .topo { border-bottom-color: rgba(255, 255, 255, 0.1); } html[data-tema="3"] .card-dor, html[data-tema="3"] .adv-card { border-color: rgba(216, 173, 58, 0.18); } /* ---------- Tema 4 — Cinematográfico (paleta do hero seamless/V8) ---------- */ html[data-tema="4"] { --fonte-titulo: "Cormorant Garamond", "Palatino Linotype", Georgia, serif; --fonte-corpo: "Inter", "Segoe UI", system-ui, sans-serif; --peso-titulo: 600; --fundo: #2a0607; /* mesmo tom-base do hero — header funde sem emenda */ --fundo-alt: #230505; --fundo-card: #3a0a0b; --fundo-escuro: #1c0404; --fundo-rodape: #120202; --texto: #f3e7dc; --texto-suave: #c9b0a6; --texto-claro: #f7efe4; --texto-claro-suave: #d3bab0; --destaque: #d8ad3a; --destaque-texto: #e2ba4d; --destaque-claro: #ecc766; --hairline: rgba(255, 255, 255, 0.12); --radius-botao: 4px; --radius-card: 10px; --borda-foto: 1px solid rgba(216, 173, 58, 0.3); } html[data-tema="4"] h1, html[data-tema="4"] h2 { letter-spacing: -0.005em; } html[data-tema="4"] .topo { border-bottom-color: rgba(255, 255, 255, 0.09); } html[data-tema="4"] .card-dor, html[data-tema="4"] .adv-card { border-color: rgba(216, 173, 58, 0.18); }