/* ========================================================================== Alma Alentejana: Design tokens -------------------------------------------------------------------------- Fonte única de verdade para cores, tipografia, espaço, forma, materiais e movimento. Cada grupo indica o mapeamento para o Elementor Pro (Site Settings → Global Colors / Global Fonts / Layout) para a fase WP. Princípios (apple-design): - Tipografia com tracking e leading específicos por tamanho. - Espaços em rem para acompanhar o tamanho de texto do utilizador. - Materiais translúcidos para camadas flutuantes (header, barras). - Movimento por molas criticamente amortecidas; ressalto só com momento. - Respeito por reduced-motion / reduced-transparency / more-contrast. ========================================================================== */ /* Fontes (no WP: alojar localmente via Elementor → Custom Fonts, por RGPD) - Libre Caslon Display → títulos grandes (corte ótico para ≥ 32px) - Libre Caslon Text → títulos pequenos, citações (corte para texto) - Inter (eixo opsz) → texto corrido, interface */ @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..700;1,14..32,400&family=Libre+Caslon+Display&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap"); :root { /* ------------------------------------------------------------------------ 1. PALETA BASE: "direção terra" Cal (paredes caiadas), terra (logótipo), ocre (mantas, sol), anil (barras das casas alentejanas), oliva (olival). ------------------------------------------------------------------------ */ --cal-50: #FDFBF8; --cal-100: #FAF5EF; /* fundo do logótipo, fundo principal */ --cal-200: #F3ECE2; /* linho, superfícies alternadas */ --cal-300: #E7DCCD; /* linhas, placeholders */ --cal-400: #D4C4B0; --terra-900: #1F150E; --terra-800: #2C1E15; /* secções escuras */ --terra-700: #3D2A1D; --terra-600: #5D3D26; /* cor do logótipo, marca */ --terra-500: #7A5236; --terra-400: #9C7457; --terra-300: #C2A48B; --ocre-600: #A06F1F; --ocre-500: #C08A2E; /* mostarda das mantas, só decorativo sobre claro (2.8:1) */ --ocre-300: #E3C07A; --ocre-100: #F6EAD1; --anil-700: #1F4470; --anil-600: #2C5B8C; /* azul das barras */ --anil-100: #E3ECF5; --oliva-700: #4F5030; --oliva-600: #6B6B3D; --oliva-300: #B3B184; --ink-900: #2A1E16; /* texto principal (castanho quase negro, nunca #000) */ --ink-600: #6B5B4F; /* texto secundário, 6:1 sobre cal-100 */ --ink-400: #94857A; /* apenas decorativo, nunca texto essencial */ --white: #FFFFFF; /* Conteúdo inventado/provisório (a validar pelo cliente) */ --invented: #D7261E; --invented-on-dark: #FF7A6E; /* ------------------------------------------------------------------------ 2. CORES SEMÂNTICAS (o código usa estas, nunca a paleta base) Elementor → Global Colors: System Primary = --color-brand (#5D3D26) System Secondary = --color-highlight (#C08A2E) System Text = --color-text (#2A1E16) System Accent = --color-brand-soft (#7A5236) Custom Fundo = --color-bg (#FAF5EF) Custom Linho = --color-bg-alt (#F3ECE2) Custom Terra escuro = --color-bg-dark (#2C1E15) Custom Texto secundário = --color-text-muted (#6B5B4F) Custom Linha = --color-line (#E7DCCD) Custom Anil = --anil-600 (#2C5B8C) Custom Oliva = --oliva-600 (#6B6B3D) Custom Inventado = --invented (#D7261E) ------------------------------------------------------------------------ */ --color-bg: var(--cal-100); --color-bg-alt: var(--cal-200); --color-bg-raised: var(--cal-50); --color-bg-dark: var(--terra-800); --color-text: var(--ink-900); --color-text-muted: var(--ink-600); --color-heading: var(--terra-700); --color-brand: var(--terra-600); --color-brand-soft: var(--terra-500); --color-highlight: var(--ocre-500); --color-line: var(--cal-300); --color-line-strong: var(--cal-400); --color-placeholder: var(--cal-300); --color-placeholder-text: var(--ink-600); --color-focus: var(--anil-600); --color-invented: var(--invented); /* Botões */ --btn-primary-bg: var(--terra-600); --btn-primary-bg-hover: var(--terra-700); --btn-primary-text: var(--cal-50); --btn-ghost-border: var(--terra-600); --btn-ghost-text: var(--terra-600); /* ------------------------------------------------------------------------ 3. TIPOGRAFIA Elementor → Global Fonts: Primary = Libre Caslon Display 400 (Display, H1, H2) Secondary = Libre Caslon Text 400 (H3, H4, citações) Text = Inter 400 (corpo) Accent = Inter 500 (botões, sobretítulos, menu) Tamanhos fluidos entre 375px e 1440px de viewport (clamp). Regra: quanto maior o texto, menor o leading e mais negativo o tracking. ------------------------------------------------------------------------ */ --font-display: "Libre Caslon Display", "Libre Caslon Text", Georgia, "Times New Roman", serif; --font-serif: "Libre Caslon Text", Georgia, "Times New Roman", serif; --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; /* size leading tracking */ --text-display: clamp(2.75rem, 1.66rem + 4.65vw, 5.75rem); /* 44 → 92px */ --leading-display: 1.02; --tracking-display: -0.022em; --text-h1: clamp(2.375rem, 1.65rem + 3.1vw, 4.375rem); /* 38 → 70px */ --leading-h1: 1.05; --tracking-h1: -0.018em; --text-h2: clamp(2rem, 1.56rem + 1.88vw, 3.25rem); /* 32 → 52px */ --leading-h2: 1.1; --tracking-h2: -0.014em; --text-h3: clamp(1.375rem, 1.24rem + 0.56vw, 1.75rem); /* 22 → 28px */ --leading-h3: 1.22; --tracking-h3: -0.006em; --text-h4: clamp(1.125rem, 1.08rem + 0.19vw, 1.25rem); /* 18 → 20px */ --leading-h4: 1.3; --tracking-h4: 0em; --text-stat: clamp(2.5rem, 1.9rem + 2.6vw, 4.25rem); /* números grandes */ --leading-stat: 1; --tracking-stat: -0.02em; --text-lead: clamp(1.125rem, 1.08rem + 0.19vw, 1.25rem); /* 18 → 20px */ --leading-lead: 1.6; --tracking-lead: -0.006em; --text-body: 1.0625rem; /* 17px */ --leading-body: 1.65; --tracking-body: -0.003em; --text-small: 0.9375rem; /* 15px */ --leading-small: 1.55; --tracking-small: 0em; --text-caption: 0.8125rem; /* 13px */ --leading-caption: 1.45; --tracking-caption: 0.01em; --text-eyebrow: 0.75rem; /* 12px, maiúsculas */ --leading-eyebrow: 1.3; --tracking-eyebrow: 0.16em; /* eco de "ALENTEJANA" */ --text-button: 0.9375rem; --tracking-button: 0.005em; --measure: 62ch; /* largura máxima de leitura */ /* ------------------------------------------------------------------------ 4. ESPAÇO (rem: acompanha o tamanho de letra do utilizador) Elementor → usar como valores de padding/gap dos containers. ------------------------------------------------------------------------ */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 2.5rem; /* 40 */ --space-8: 3rem; /* 48 */ --space-9: 4rem; /* 64 */ --space-10: 5rem; /* 80 */ --space-11: 6rem; /* 96 */ --space-section: clamp(5rem, 3.6rem + 6vw, 9rem); /* 80 → 144 entre secções */ --space-block: clamp(2.5rem, 2rem + 2.2vw, 4rem); /* entre blocos numa secção */ --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem); /* margem lateral */ /* ------------------------------------------------------------------------ 5. LAYOUT Elementor → Site Settings → Layout: Content width 1240px. Breakpoints alinhados com o Elementor: mobile ≤ 767, tablet ≤ 1024. ------------------------------------------------------------------------ */ --container: 77.5rem; /* 1240px */ --container-narrow: 52rem; /* 832px */ --container-wide: 90rem; /* 1440px */ --header-height: 5rem; /* ------------------------------------------------------------------------ 6. FORMA ------------------------------------------------------------------------ */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; /* imagens e cartões */ --radius-lg: 22px; /* painéis grandes */ --radius-pill: 999px; /* botões */ --border-hairline: 1px solid var(--color-line); /* ------------------------------------------------------------------------ 7. PROFUNDIDADE E MATERIAIS Superfícies maiores = mais espessas (mais blur, sombra mais funda). Nunca sobrepor duas superfícies translúcidas claras. ------------------------------------------------------------------------ */ --shadow-sm: 0 1px 2px rgb(44 30 21 / 0.06), 0 2px 6px rgb(44 30 21 / 0.05); --shadow-md: 0 2px 6px rgb(44 30 21 / 0.06), 0 12px 28px rgb(44 30 21 / 0.10); --shadow-lg: 0 6px 16px rgb(44 30 21 / 0.08), 0 28px 64px rgb(44 30 21 / 0.18); /* Vidro claro: header após scroll, menus */ --material-light-bg: rgb(250 245 239 / 0.72); --material-light-blur: blur(20px) saturate(170%); --material-light-edge: rgb(255 255 255 / 0.55); /* Vidro escuro: sobre fotografia (barra de reserva, header no hero) */ --material-dark-bg: rgb(31 21 14 / 0.38); --material-dark-blur: blur(24px) saturate(150%); --material-dark-edge: rgb(255 255 255 / 0.16); /* Gradientes de legibilidade sobre fotografia */ --scrim-hero: linear-gradient(180deg, rgb(31 21 14 / 0.45) 0%, rgb(31 21 14 / 0) 22%, rgb(31 21 14 / 0) 42%, rgb(31 21 14 / 0.72) 100%); --scrim-side: linear-gradient(90deg, rgb(31 21 14 / 0.55) 0%, rgb(31 21 14 / 0) 60%); --scrim-bottom: linear-gradient(180deg, rgb(31 21 14 / 0) 45%, rgb(31 21 14 / 0.78) 100%); /* ------------------------------------------------------------------------ 8. MOVIMENTO Molas (JS) em linguagem Apple: damping ratio + response (s). CSS só para mudanças de estado não gestuais (hover, cor, opacidade). ------------------------------------------------------------------------ */ --spring-default-damping: 1; /* sem ressalto, interface por defeito */ --spring-default-response: 0.42; --spring-flick-damping: 0.86; /* só quando o gesto trouxe momento */ --spring-flick-response: 0.38; --spring-sheet-damping: 0.9; --spring-sheet-response: 0.34; --deceleration-rate: 0.998; /* projeção de momento (scroll normal) */ --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.64, 0, 0.78, 0); /* inverso de --ease-out */ --dur-press: 90ms; /* feedback no pointer-down */ --dur-fast: 180ms; --dur-base: 320ms; --dur-slow: 560ms; --press-scale: 0.97; /* ------------------------------------------------------------------------ 9. CAMADAS ------------------------------------------------------------------------ */ --z-base: 1; --z-raised: 10; --z-header: 100; --z-overlay: 200; --z-sheet: 300; } /* Tema escuro por secção (ex.: Experiências, rodapé). Elementor → classe CSS "theme-dark" no container. */ .theme-dark { --color-bg: var(--terra-800); --color-bg-alt: var(--terra-700); --color-bg-raised: var(--terra-700); --color-text: var(--cal-200); --color-text-muted: var(--terra-300); --color-heading: var(--cal-50); --color-brand: var(--cal-100); --color-highlight: var(--ocre-300); --color-line: rgb(250 245 239 / 0.14); --color-line-strong: rgb(250 245 239 / 0.28); --color-placeholder: var(--terra-700); --color-placeholder-text: var(--terra-300); --color-focus: var(--ocre-300); --color-invented: var(--invented-on-dark); --btn-primary-bg: var(--cal-100); --btn-primary-bg-hover: var(--white); --btn-primary-text: var(--terra-800); --btn-ghost-border: rgb(250 245 239 / 0.5); --btn-ghost-text: var(--cal-50); } /* Acessibilidade: preferências do sistema */ @media (prefers-reduced-motion: reduce) { :root { --dur-press: 0ms; --dur-fast: 120ms; /* mantém cross-fades curtos, sem deslocações */ --dur-base: 160ms; --dur-slow: 200ms; --press-scale: 1; } } @media (prefers-reduced-transparency: reduce) { :root { --material-light-bg: var(--cal-100); --material-light-blur: none; --material-dark-bg: var(--terra-800); --material-dark-blur: none; } } @media (prefers-contrast: more) { :root { --color-text-muted: var(--ink-900); --color-line: var(--terra-400); --material-light-bg: var(--cal-50); --material-dark-bg: var(--terra-900); } .theme-dark { --color-text-muted: var(--cal-100); --color-line: rgb(250 245 239 / 0.5); } }