/* ============================================================ REAL SOCIETÀ — tokens no registro do Meridiano. A paleta, a tipografia e a escala vêm do Meridiano Design System (Site Meridiano Referência/Design Sistem/tokens/), adotados a pedido: "quero o site idêntico ao Meridiano". Três valores foram AJUSTADOS em relação ao original, porque a paleta do Meridiano reprova em contraste AA nesses pontos: --accent #B85436 -> #9E4228 (4,2:1 como texto sobre linho) --text-faint #B9A98E -> #695E4E (2,0:1 sobre linho; o stone original só serve sobre tinta, e virou --text-on-dark-muted) texto sobre o acento: linho sobre o terracota original dava 4,2:1 A diferença é imperceptível ao olho e mantém o registro terroso. Todo o resto é o Meridiano como está. ============================================================ */ :root { color-scheme: light; /* ---- Rampa neutra, do linho à tinta. Nada é branco ou preto puro ---- */ --linen: #f4efe6; /* superfície principal, off-white quente */ --paper: #fbf8f2; /* superfície elevada sobre o linho */ --bone: #e7dccb; /* areia, preenchimento silencioso */ --travertine: #d8c9b2; /* pedra, divisórias no claro */ --stone: #b9a98e; /* taupe: legenda SOBRE FUNDO ESCURO */ --graphite: #6a6052; /* texto secundário */ --umber: #3d352b; /* corpo de texto no claro */ --ink: #211c16; /* quase-preto quente: títulos, rodapé */ --ink-deep: #14110d; /* fundo mais profundo, full-bleed */ /* ---- Acento: terracota queimada ---- */ --terracotta: #9e4228; --terracotta-deep: #83351f; --terracotta-soft: #d98a6e; --foliage: #5e6b4c; /* ---- Superfícies ---- */ --surface-page: var(--linen); --surface-raised: var(--paper); --surface-sunken: var(--bone); --surface-inverse: var(--ink); --surface-paper: var(--ink); /* seções invertidas */ /* ---- Texto ---- */ --text-strong: var(--ink); /* 14,8:1 sobre linho */ --text-body: var(--umber); /* 10,5:1 */ --text-muted: var(--graphite); /* 5,4:1 */ --text-faint: #695e4e; /* 5,5:1 · o stone reprovava no claro */ --text-on-paper: var(--linen); /* texto nas seções invertidas */ --text-on-dark: var(--linen); --text-on-dark-muted: var(--stone); /* 7,4:1 sobre tinta */ /* ---- Marca e acento ---- */ --accent: var(--terracotta); --accent-soft: var(--terracotta-soft); --accent-tint: rgba(158, 66, 40, 0.10); --brand: var(--terracotta); --brand-deep: var(--terracotta-deep); --on-accent: var(--linen); /* 5,6:1 sobre o acento */ --on-brand: var(--linen); /* ---- Fotografia ---- */ --photo-white: var(--linen); /* o Meridiano não usa branco puro */ --photo-overlay: rgba(20, 17, 13, 0.55); /* Dois véus. O do Meridiano é só vertical, calibrado para a foto escura dele; a nossa é clara e de alto contraste, então entra também um véu lateral que escurece a coluna do texto e deixa o lado direito da casa intacto. Valores medidos, não estimados. */ --scrim-hero: linear-gradient(to bottom, rgba(20, 17, 13, 0.58) 0%, rgba(20, 17, 13, 0.52) 9%, rgba(20, 17, 13, 0.16) 20%, rgba(20, 17, 13, 0.14) 34%, rgba(20, 17, 13, 0.34) 52%, rgba(20, 17, 13, 0.46) 72%, rgba(20, 17, 13, 0.60) 100%); --scrim-hero-lado: linear-gradient(to right, rgba(20, 17, 13, 0.62) 0%, rgba(20, 17, 13, 0.50) 30%, rgba(20, 17, 13, 0.20) 58%, rgba(20, 17, 13, 0) 78%); /* A foto do interlúdio é clara: precisa de véu vertical E lateral, igual ao hero. O valor do Meridiano (0.1 a 0.55) deixava a citação ilegível, medido em 1,6:1. */ --scrim-full: linear-gradient(to bottom, rgba(20, 17, 13, 0.30) 0%, rgba(20, 17, 13, 0.46) 55%, rgba(20, 17, 13, 0.66) 100%); --scrim-full-lado: linear-gradient(to right, rgba(20, 17, 13, 0.62) 0%, rgba(20, 17, 13, 0.46) 34%, rgba(20, 17, 13, 0.12) 64%, rgba(20, 17, 13, 0) 82%); /* ---- Linhas ---- */ --line-hair: rgba(33, 28, 22, 0.12); --line-soft: rgba(33, 28, 22, 0.07); --line-strong: rgba(33, 28, 22, 0.30); --line-on-dark: rgba(244, 239, 230, 0.18); /* ---- Galeria de projetos (herdado da build anterior) ---- */ --gallery-paper: var(--paper); --gallery-ink: var(--ink); --gallery-muted: var(--graphite); --gallery-line: var(--line-hair); /* ---- Tipografia: duas vozes ---- Cormorant Garamond é a voz editorial, sempre leve e grande. Hanken Grotesk faz tudo que é funcional. A assinatura do registro é a caixa alta com tracking largo nos rótulos. */ --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-sans: "Hanken Grotesk", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: var(--font-sans); /* o Meridiano não tem mono */ --fs-display-xl: clamp(3.5rem, 7vw, 7rem); --fs-display-l: clamp(2.75rem, 5vw, 4.75rem); --fs-display-m: clamp(2rem, 3.4vw, 3.25rem); --fs-display-s: clamp(1.6rem, 2.4vw, 2.25rem); --fs-lead: 1.25rem; --fs-body: 1rem; --fs-small: 0.875rem; --fs-label: 0.75rem; --fs-micro: 0.6875rem; --fw-light: 300; --fw-medium: 500; --lh-display: 1.04; --lh-snug: 1.22; --lh-body: 1.6; --ls-display: -0.015em; --ls-wide: 0.18em; --ls-wider: 0.32em; /* ---- Espaço. A build anterior usava --sp-2 a --sp-8 sem defini-los ---- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --sp-11: 11rem; --gutter: clamp(1.5rem, 5vw, 6rem); --max-w: 1320px; --measure: 64ch; --measure-lead: 58ch; /* ---- Forma: quase quadrado. O raio maior é só a pílula ---- */ --r-sm: 2px; --r-md: 6px; --r-pill: 999px; /* ---- Movimento: lento e assentado, nunca elástico ---- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 240ms; --dur: 460ms; --dur-reveal: 900ms; --shadow-menu: 0 18px 44px rgba(33, 28, 22, 0.16); }