/* Fontes auto-alojadas — só o subconjunto latino (skill page-performance). Os mesmos ficheiros do site da Equipa Pedro Ferreira. */ @font-face{font-family:"Inter Variable";font-style:normal;font-display:swap;font-weight:100 900; src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Krub";font-style:normal;font-display:swap;font-weight:600; src:url("../fonts/krub-latin-600-normal.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Krub";font-style:normal;font-display:swap;font-weight:700; src:url("../fonts/krub-latin-700-normal.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* ============================================================= TERRA MAR VILLAGE — Tokens do design system São Mateus da Calheta · Angra do Heroísmo · Ilha Terceira · Açores v2 · 30 set 2026 — cores e logótipo do "Logo Novo.ai": azul-escuro #164863 · azul-claro #6094A9 · dourado #8A6B4F (v1 arquivada em design-system/_v1-arquivo/) Tipografia alinhada com a Equipa Pedro Ferreira (mesmo proprietário). MOBILE-FIRST: os valores base são os de telemóvel. Só os tamanhos de display escalam, via clamp(). ============================================================= */ /* ---------- 1. FONTES ------------------------------------------------- Produção: auto-alojar com @fontsource (como no projeto Pedro Ferreira), nunca por CDN. Só o subconjunto latino. Máximo 2 famílias × 2 pesos. npm i @fontsource-variable/inter @fontsource/krub --------------------------------------------------------------------- */ :root { --fonte-corpo: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --fonte-titulo: "Krub", "Inter Variable", system-ui, sans-serif; /* ---------- 2. COR — escalas de marca ------------------------------ Fonte: "Logo Novo.ai" (30 set 2026). O logótipo tem exatamente três cores — #164863, #6094A9, #8A6B4F — e cada uma tem um papel fixo. OCEANO · azul-escuro do logótipo (#164863): círculo, "Terra Mar", "VILLAGE". Cor da marca: títulos, blocos escuros, rodapé. */ --oceano-50: #F1F6F9; --oceano-100: #E1ECF2; --oceano-200: #C3D6E1; --oceano-300: #9CB9CB; --oceano-400: #7196AE; --oceano-500: #4F7892; --oceano-600: #3A6782; --oceano-700: #2A5974; --oceano-800: #1F506B; --oceano-900: #164863; --oceano-950: #0C2F43; /* ONDA · azul-claro da onda do logótipo (#6094A9 = onda-500). Cor dos DETALHES PEQUENOS: fios, réguas, numeração, ícones, marcadores de lista, anel de foco. Dá 2,9:1 no creme — chega para elementos decorativos, não para texto. Texto pequeno em azul-claro usa onda-600 (4,6:1 no creme), que é a mesma cor um tom abaixo. */ --onda-50: #F1F7F9; --onda-100: #E0EEF3; --onda-200: #C2DDE7; --onda-300: #9CC4D4; --onda-400: #7AAABD; --onda-500: #6094A9; --onda-600: #427387; --onda-700: #2B5C6F; --onda-800: #1E4A5B; --onda-900: #173A47; --onda-950: #0F2731; /* DOURADO · o "T" do logótipo (#8A6B4F = dourado-600), amarelo torrado. Cor de AÇÃO: botão principal, etiquetas de destaque, preço. Branco sobre dourado-600 = 4,9:1. Nunca em áreas grandes. */ --dourado-50: #FAF6F1; --dourado-100: #F3EADF; --dourado-200: #E5D4C1; --dourado-300: #D0B79C; --dourado-400: #B8997A; --dourado-500: #A08064; --dourado-600: #8A6B4F; --dourado-700: #6F5540; --dourado-800: #574333; --dourado-900: #3E3025; --dourado-950: #282019; /* AREIA · creme quente. Fundo da apresentação (#F4F0E8). Mantém-se: é a página, e o dourado e os dois azuis assentam bem sobre ela. */ --areia-50: #FAF8F4; --areia-100: #F4F0E8; --areia-200: #D9D3C7; --areia-300: #C3BBAB; --areia-400: #A79E8E; --areia-500: #8C8579; --areia-600: #6F6961; --areia-700: #585349; --areia-800: #45413A; --areia-900: #2F2C27; --areia-950: #1E1C19; /* BASALTO · neutros para texto e bordas, arrefecidos para o azul. */ --basalto-50: #F7F8F9; --basalto-100: #EDEFF1; --basalto-200: #D8DCE1; --basalto-300: #B9BFC8; --basalto-400: #939BA7; --basalto-500: #6C7581; --basalto-600: #525A65; --basalto-700: #424852; --basalto-800: #343A42; --basalto-900: #1E2A36; --basalto-950: #13181E; /* Verde do WhatsApp — só para o ícone e o sublinhado da ligação */ --whatsapp: #52E086; /* Semânticos — mínimos. Só para feedback de formulário. */ --sucesso: #1A7F4B; --sucesso-fundo: #E8F5EE; --erro: #B3261E; --erro-fundo: #FCEBEA; /* ---------- 3. PAPÉIS SEMÂNTICOS (modo claro) ---------------------- A combinação vem das páginas claras da apresentação (13, 14, 18): a página é CREME, os cartões é que são brancos, e o azul-escuro entra só em blocos de acento — cabeçalho de tabela, cartão da gama Superior, etiqueta de "primeiras 6 reservas". Branco a toda a largura era mais frio do que a marca. */ --fundo: var(--areia-100); /* #F4F0E8 — a página */ --fundo-branco: #FFFFFF; /* secção que precisa de respirar */ --fundo-quente: var(--areia-50); /* alternância subtil */ --fundo-escuro: var(--oceano-900); /* blocos de acento e rodapé */ --superficie: #FFFFFF; /* cartões sobre creme */ --superficie-suave: var(--areia-50); --texto: var(--basalto-800); /* 10,1:1 s/ creme · 11,5:1 s/ branco */ --texto-suave: var(--basalto-600); /* 6,1:1 s/ creme · 7,0:1 s/ branco */ --texto-tenue: #6F6961; /* 4,8:1 s/ creme · 5,4:1 s/ branco cinzento QUENTE (areia-600): o frio basalto-500 caía para 4,1:1 no creme */ --texto-invertido: #FFFFFF; --titulo: var(--oceano-900); /* Botão principal = DOURADO (o "T"). O azul-escuro fica para o botão secundário e para os blocos de marca. */ --primaria: var(--dourado-600); /* branco por cima: 4,9:1 */ --primaria-hover: var(--dourado-700); /* 6,9:1 */ --primaria-texto: #FFFFFF; --secundaria: var(--oceano-900); /* 9,8:1 */ --secundaria-hover: var(--oceano-950); --destaque: var(--onda-600); /* links: 4,6:1 s/ creme */ --destaque-suave: var(--onda-100); --destaque-texto: #FFFFFF; /* DETALHES — o azul-claro da onda, tal e qual. --detalhe: fios, réguas, ícones, numeração grande, marcadores. --sobrelinha: o mesmo azul em texto pequeno, um tom abaixo (4,6:1). */ --detalhe: var(--onda-500); --sobrelinha: var(--onda-600); --borda: var(--areia-200); /* decorativa, quente */ --borda-forte: var(--areia-300); --borda-campo: #828A96; /* 3,5:1 s/ branco · 3,1:1 s/ creme */ --anel-foco: var(--onda-600); /* 4,6:1 s/ creme — o 500 dava 2,9:1 */ /* ---------- 4. ESPAÇO — escala de 4px ----------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* Ritmo vertical entre secções: 56px em mobile → 112px em desktop */ --secao-y: clamp(56px, 8vw, 112px); --gutter: var(--s-5); /* margem lateral em mobile — 24px (16px ficava colado ao ecrã) */ --max-w: 1200px; --max-w-texto: 65ch; /* ---------- 5. TIPOGRAFIA — escala 1.25 (major third) ------------- Igual à da Equipa Pedro Ferreira, para coerência entre os dois sites. Os três maiores escalam com o ecrã: em mobile seriam esmagadores. */ --t-xs: 0.8rem; /* 12.8px — legendas, nota legal */ --t-sm: 0.9rem; /* 14.4px — etiquetas, metadados */ --t-base: 1rem; /* 16px — corpo. Nunca abaixo disto. */ --t-lg: 1.25rem; /* 20px — subtítulo, lead */ --t-xl: 1.563rem; /* 25px — h3 */ --t-2xl: clamp(1.563rem, 1.30rem + 1.3vw, 1.953rem); /* h2 */ --t-3xl: clamp(1.953rem, 1.55rem + 2.0vw, 2.441rem); /* h1 de secção */ --t-4xl: clamp(2.129rem, 1.45rem + 3.4vw, 3.052rem); /* h1 do hero */ --lh-apertada: 1.12; /* títulos */ --lh-media: 1.35; /* subtítulos, leads */ --lh-corpo: 1.6; /* texto corrido */ --ls-titulo: -0.02em; /* títulos grandes fecham */ --ls-etiqueta: 0.08em; /* versaletes — como o "VILLAGE" do logótipo */ --peso-normal: 400; --peso-medio: 500; --peso-semi: 600; --peso-bold: 700; /* ---------- 6. RAIOS E SOMBRAS ------------------------------------ */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-full: 999px; /* Luz vinda de cima: deslocamento vertical > desfoque. Máx. 3 níveis. */ --sh-sm: 0 1px 2px rgb(12 47 67 / 0.06); --sh-md: 0 4px 12px rgb(12 47 67 / 0.08); --sh-lg: 0 12px 32px rgb(12 47 67 / 0.12); /* ---------- 7. MOVIMENTO ------------------------------------------ */ --dur-rapida: 150ms; --dur-media: 220ms; --dur-lenta: 300ms; --ease-entrada: cubic-bezier(0.16, 1, 0.3, 1); /* ease-out */ --ease-saida: cubic-bezier(0.4, 0, 1, 1); /* ease-in */ /* ---------- 8. ALVOS DE TOQUE ------------------------------------- */ --toque-min: 44px; /* mínimo absoluto */ --altura-controlo: 48px; /* botões e campos em mobile */ } /* ---------- 9. SÓ MODO CLARO ----------------------------------------- O sistema não tem modo escuro, por decisão (30 set 2026). A página é sempre creme; o azul-escuro entra só em blocos de acento e no rodapé. color-scheme: light impede o browser de escurecer formulários. */ :root { color-scheme: light; } /* ---------- 10. MOVIMENTO REDUZIDO — obrigatório --------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }