/* ========================================================================= Coffee Log — Identidade Visual / Design Tokens Marca: Coffee Log | Cafés Especiais · por Ellen Domingos (Rio de Janeiro) Estilo: editorial-rústico-quente, premium acessível, ritmo lento Base: paleta real extraída do feed @coffee_log_, refinada para WCAG AA ========================================================================= */ /* ------------------------------------------------------------------------- 1. FONTES — Google Fonts Display: Fraunces (serif editorial, com alma artesanal, opsz variável) Texto: Inter Tight (sans com personalidade, ótimo em tamanho pequeno) Italic sensorial: Fraunces italic (com opsz alto para hero) ------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..900,0..100,0..1;1,9..144,300..900,0..100,0..1&family=Inter+Tight:ital,wght@0,300..800;1,300..800&display=swap'); :root { /* ===================================================================== 2. PALETA REFINADA (validada WCAG AA contra fundos principais) ===================================================================== */ /* --- Ink / texto principal --- */ --cl-ink: #2A1605; /* Café escuro profundo. Texto, headlines. contraste em bg: 15.12 (AAA) */ --cl-ink-strong: #1A0E03; /* Quase preto-café. Display oversize, hero. contraste em bg: 16.58 (AAA) */ --cl-ink-soft: #4A2D14; /* Body secundário, eyebrow. contraste em bg: 10.4 (AAA) */ /* --- Marrons editoriais --- */ --cl-deep: #3F2208; /* Marrom café profundo. Background dark, faixa de CTA. */ --cl-roast: #6B3F1E; /* Torrado. Link em fundo claro, divisores, números display. AA 7.80 */ --cl-caramel: #9A5A2B; /* Caramelo. Background de CTA primário (texto creme em cima). */ /* --- Acento vibrante (USO RESERVADO) --- */ --cl-amber: #C77A2B; /* Âmbar. Apenas como background de destaque/CTA hover, badge. NÃO usar como texto em fundo claro. */ --cl-amber-dark: #A55F1C; /* Variante para hover sutil sobre amber. */ /* --- Neutros quentes --- */ --cl-sand: #D9C1A0; /* Bege areia. Blocos secundários, fills suaves. */ --cl-cream: #EFE2CD; /* Creme. Cards, contraste sobre bg principal. */ --cl-bg: #F6EFE3; /* OFF-WHITE QUENTE. Fundo dominante de página. Nunca usar #FFFFFF. */ --cl-bg-alt: #FBF6EC; /* Off-white mais claro. Cards elevados, modais. */ --cl-hairline: #D6C4A8; /* Linha 1px decorativa, divisor editorial. */ --cl-hairline-soft: rgba(64, 32, 0, 0.10); /* --- Utilitários --- */ --cl-overlay-warm: linear-gradient(180deg, rgba(42, 22, 5, 0.55) 0%, rgba(42, 22, 5, 0.20) 60%, rgba(42, 22, 5, 0.65) 100%); --cl-overlay-soft: rgba(42, 22, 5, 0.30); --cl-paper-grain: rgba(64, 32, 0, 0.025); /* Para textura sutil em backgrounds. */ /* ===================================================================== 3. TIPOGRAFIA ===================================================================== */ --cl-font-display: 'Fraunces', 'Cormorant Garamond', 'Playfair Display', Georgia, serif; --cl-font-body: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif; /* Escala fluida (clamp min/preferido/max). Mobile-first. */ --cl-fs-hero: clamp(3rem, 5.5vw + 1rem, 5.25rem); /* 48 → 84px : H1 hero */ --cl-fs-display: clamp(2.5rem, 4.2vw + 1rem, 4rem); /* 40 → 64px : H1 secundário */ --cl-fs-h2: clamp(2rem, 2.8vw + 1rem, 3.5rem); /* 32 → 56px : seção */ --cl-fs-h3: clamp(1.5rem, 1.6vw + 0.9rem, 2.25rem); /* 24 → 36px : sub-seção */ --cl-fs-h4: clamp(1.25rem, 0.6vw + 1rem, 1.5rem); /* 20 → 24px : títulos de card */ --cl-fs-lead: clamp(1.125rem,0.5vw + 0.95rem, 1.375rem); /* 18 → 22px : lead sob hero */ --cl-fs-body: clamp(1rem, 0.15vw + 0.95rem, 1.0625rem); /* 16 → 17px : corpo */ --cl-fs-small: clamp(0.875rem,0.1vw + 0.83rem, 0.9375rem); /* 14 → 15px : caption */ --cl-fs-eyebrow: 0.75rem; /* 12px : kicker / eyebrow */ --cl-fs-number: clamp(4rem, 8vw + 1rem, 8rem); /* 64 → 128px : número display oversize de card */ --cl-lh-tight: 1.05; --cl-lh-snug: 1.18; --cl-lh-normal: 1.45; --cl-lh-relaxed: 1.65; --cl-tracking-tight: -0.02em; --cl-tracking-normal: 0; --cl-tracking-wide: 0.14em; /* eyebrow / caps */ --cl-weight-thin: 300; --cl-weight-normal: 400; --cl-weight-medium: 500; --cl-weight-semibold: 600; --cl-weight-bold: 700; /* ===================================================================== 4. ESPAÇAMENTO (escala 1–11, base 4px → comportamento editorial) ===================================================================== */ --cl-space-1: 4px; --cl-space-2: 8px; --cl-space-3: 12px; --cl-space-4: 16px; --cl-space-5: 24px; --cl-space-6: 32px; --cl-space-7: 48px; --cl-space-8: 64px; --cl-space-9: 96px; --cl-space-10: 128px; --cl-space-11: 160px; /* Padding vertical de seção (clamp fluido) */ --cl-section-py: clamp(4rem, 7vw, 10rem); /* 64 → 160px */ --cl-section-py-sm: clamp(3rem, 5vw, 6rem); /* 48 → 96px */ --cl-container: min(1200px, calc(100% - 2 * var(--cl-space-5))); --cl-container-narrow: min(820px, calc(100% - 2 * var(--cl-space-5))); --cl-container-prose: min(680px, calc(100% - 2 * var(--cl-space-5))); /* ===================================================================== 5. RADIUS (pequenos/médios — NUNCA pill em tudo) ===================================================================== */ --cl-radius-xs: 4px; --cl-radius-sm: 8px; --cl-radius-md: 12px; --cl-radius-lg: 18px; /* card grande */ --cl-radius-xl: 24px; /* hero image */ --cl-radius-pill: 999px; /* APENAS para badge/eyebrow circular ou WhatsApp FAB */ /* ===================================================================== 6. SOMBRAS (sutis, tonalidade da marca — café em 4–10% opacidade) ===================================================================== */ --cl-shadow-xs: 0 1px 2px rgba(64, 32, 0, 0.06); --cl-shadow-sm: 0 2px 8px rgba(64, 32, 0, 0.07); --cl-shadow-md: 0 8px 24px rgba(64, 32, 0, 0.08); --cl-shadow-lg: 0 18px 48px rgba(64, 32, 0, 0.10); --cl-shadow-cta: 0 10px 28px rgba(154, 90, 43, 0.28); /* CTA caramelo */ --cl-shadow-cta-hover: 0 14px 36px rgba(154, 90, 43, 0.36); --cl-shadow-inset: inset 0 0 0 1px rgba(64, 32, 0, 0.06); /* ===================================================================== 7. ANIMAÇÃO ===================================================================== */ --cl-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* "ease-out-quint" suave */ --cl-ease-emphasis: cubic-bezier(0.65, 0.05, 0.36, 1); --cl-dur-1: 160ms; --cl-dur-2: 260ms; --cl-dur-3: 420ms; --cl-dur-4: 720ms; /* ===================================================================== 8. ALIASES RETROCOMPATIBILIDADE (para Lucas / templates existentes) ===================================================================== */ --color-primary: var(--cl-caramel); --color-primary-dark: var(--cl-amber-dark); --color-primary-hover: var(--cl-amber); --color-accent: var(--cl-amber); --color-ink: var(--cl-ink); --color-text: var(--cl-ink); --color-text-soft: var(--cl-ink-soft); --color-bg: var(--cl-bg); --color-bg-alt: var(--cl-bg-alt); --color-card: var(--cl-cream); --color-dark: var(--cl-deep); --color-border: var(--cl-hairline); --color-whatsapp: #25D366; --color-whatsapp-dark: #128C7E; --space-xs: var(--cl-space-2); --space-sm: var(--cl-space-4); --space-md: var(--cl-space-6); --space-lg: var(--cl-space-8); --space-xl: var(--cl-space-9); --radius-sm: var(--cl-radius-sm); --radius-md: var(--cl-radius-md); --radius-lg: var(--cl-radius-lg); --radius-pill: var(--cl-radius-pill); --shadow-sm: var(--cl-shadow-sm); --shadow-md: var(--cl-shadow-md); --shadow-lg: var(--cl-shadow-lg); --font-display: var(--cl-font-display); --font-body: var(--cl-font-body); } /* ========================================================================= BASE — aplicar no body de qualquer página que importar este arquivo ========================================================================= */ html { -webkit-text-size-adjust: 100%; } body { background: var(--cl-bg); color: var(--cl-ink); font-family: var(--cl-font-body); font-size: var(--cl-fs-body); line-height: var(--cl-lh-relaxed); font-feature-settings: 'ss01', 'cv11', 'kern'; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--cl-font-display); color: var(--cl-ink-strong); font-weight: var(--cl-weight-normal); /* Fraunces brilha em 400/500, não em 700 */ letter-spacing: var(--cl-tracking-tight); line-height: var(--cl-lh-tight); font-variation-settings: 'opsz' 80, 'SOFT' 50; margin: 0 0 var(--cl-space-5) 0; } h1 { font-size: var(--cl-fs-display); } h2 { font-size: var(--cl-fs-h2); } h3 { font-size: var(--cl-fs-h3); font-weight: var(--cl-weight-medium); } h4 { font-size: var(--cl-fs-h4); font-weight: var(--cl-weight-medium); font-family: var(--cl-font-body); letter-spacing: var(--cl-tracking-normal); } p { margin: 0 0 var(--cl-space-4) 0; max-width: 62ch; } a { color: var(--cl-roast); text-decoration: none; border-bottom: 1px solid currentColor; transition: color var(--cl-dur-2) var(--cl-ease); } a:hover { color: var(--cl-amber-dark); } ::selection { background: var(--cl-amber); color: var(--cl-bg); } /* Reveal-on-scroll padrão (Lucas pode ativar com IntersectionObserver) */ .cl-reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--cl-dur-4) var(--cl-ease), transform var(--cl-dur-4) var(--cl-ease); } .cl-reveal.is-in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .cl-reveal { opacity: 1; transform: none; transition: none; } }