/* ===================================================== DESIGN TOKENS · JATIÚCA HOTEL & RESORT · v3 (Edição 03) Fonte única de verdade · Maceió · Alagoas · Brasil ----------------------------------------------------- v3 (17/07/2026 · bancada DSv2 + vereditos Endrigo): merge com o Manual da Marca oficial 2018 recuperado do HD. Tipografia volta à família OFICIAL News Gothic BT (R4 · arquivos do próprio hotel · licença web pendente de formalização com a gestão). Símbolo: geometria do vetor OFICIAL 2018 (módulos de onda em degraus). Teal segue primária DIGITAL (R3); royal 653 PC é herança/ print. Grafismos: linguagem pontilhada 2018 (R9). Vereditos completos: BANCADA-DSV2-VEREDITOS.md. Dual-register: praia-sol (default) + cerimônia. ===================================================== */ /* ── FONTES · SELF-HOSTED (fonts/ · lição v1: nunca depender de webfont remoto pra PDF/screenshot). News Gothic BT (Bitstream) · TTFs do acervo do hotel convertidos pra woff2 · pesos estáticos ───────────── */ @font-face { font-family: 'News Gothic BT'; src: url('fonts/news-gothic-bt-light.woff2') format('woff2'); font-weight: 300; font-display: block; } @font-face { font-family: 'News Gothic BT'; src: url('fonts/news-gothic-bt-roman.woff2') format('woff2'); font-weight: 400; font-display: block; } @font-face { font-family: 'News Gothic BT'; src: url('fonts/news-gothic-bt-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: block; } @font-face { font-family: 'News Gothic BT'; src: url('fonts/news-gothic-bt-demi.woff2') format('woff2'); font-weight: 600; font-display: block; } @font-face { font-family: 'News Gothic BT'; src: url('fonts/news-gothic-bt-bold.woff2') format('woff2'); font-weight: 700; font-display: block; } @font-face { font-family: 'News Gothic BT'; src: url('fonts/news-gothic-bt-bold-italic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: block; } @font-face { font-family: 'News Gothic Cn BT'; src: url('fonts/news-gothic-bt-condensed.woff2') format('woff2'); font-weight: 400; font-display: block; } /* Fredoka segue disponível SÓ pro universo kids/Clubinho (pendência R4: decidir na peça 1 do Clubinho se o kids ganha display próprio ou fica em News Gothic). */ @font-face { font-family: 'Fredoka'; src: url('fonts/fredoka-var.woff2') format('woff2-variations'); font-weight: 300 700; font-display: block; } :root { /* ── CORES · AZUL-MAR (primária · ramp oficial) ── */ --jat-mar-50: #f8feff; --jat-mar-100: #eafafc; --jat-mar-200: #d2f3f6; --jat-mar-300: #acdee4; --jat-mar-400: #7dd1dc; --jat-mar-500: #46b4c2; --jat-mar-600: #3e9aa6; --jat-mar-700: #317b85; /* BASE · logo · CTA · header */ --jat-mar-800: #255d64; --jat-mar-900: #002732; /* mar funda */ --jat-mar: #317b85; /* ── CORES · DOURADO (acento sol) ── */ --jat-dourado-100: #fbf2cb; --jat-dourado-200: #fde57e; --jat-dourado-300: #ffd16a; --jat-dourado-400: #fbbc55; --jat-dourado-500: #e9a23b; /* BASE */ --jat-dourado-600: #c8811a; --jat-dourado-700: #a35c00; /* dourado como texto (AA claro) */ --jat-dourado: #e9a23b; /* ── CORES · CORAL (pop raro · assume o papel "promoção" do par laranja/vermelho 2018 · R3) ── */ --jat-coral: #eb5c44; --jat-coral-soft: #f6c4bb; /* ── CORES · HERANÇA 2018 (manual oficial · R3) ────── Royal 653 PC: cor do logo no manual 2018 · uso PRINT/ papelaria e convívio com peças físicas · NÃO é a primária digital (essa segue o teal mar-700). Amarelo kids: EXCLUSIVO do universo Clubinho do Jacaré · VETO permanente: nunca texto branco em cima (1.34:1) · sobre amarelo só tinta, marrom ou royal. Marrom: tinta oficial dos ícones 2018. Laranja/vermelho/turquesa 2018: SÓ documentais, fora da paleta ativa (vetos do auditor · deutan-safe). ── */ --jat-royal: #1C5E95; /* Pantone 653 PC · print */ --jat-kids-amarelo: #F8E000; /* Pantone 102 C · Clubinho */ --jat-marrom-2018: #5D5347; /* Pantone 7519 C · ícones */ --jat-icone-ink: var(--jat-marrom-2018); /* ── NEUTROS ── */ --jat-tinta: #212121; --jat-tinta-700: #424242; --jat-tinta-500: #616161; --jat-tinta-400: #757575; --jat-cinza-300: #9e9e9e; --jat-cinza-200: #bdbdbd; --jat-cinza-100: #e0e0e0; --jat-branco: #ffffff; --jat-off: #fafafa; --jat-cinza-bg: #f5f5f5; --jat-cream: #fefaf5; /* respiro quente */ --jat-areia: #FBF7F2; /* areia · neutro-mãe de superfícies (benchmark: nunca branco puro) */ /* ── TIPOGRAFIA v3 · NEWS GOTHIC BT (oficial 2018 · R4) Manual p30: "todas as comunicações impressas e digitais devem utilizar a família News Gothic BT". Bold = títulos e destaques · Roman = textos extensos · Demi = ênfase intermediária · Cn = condensada em tabela apertada. Clube 79 (Bricolage + Hanken) aposentado pra acervo de projeto (registro no README interno). Fredoka segue EXCLUSIVA do universo kids/Clubinho (pendência: peça 1 do Clubinho decide). */ --jat-font-display: 'News Gothic BT', 'Trebuchet MS', sans-serif; --jat-font-body: 'News Gothic BT', system-ui, -apple-system, sans-serif; --jat-font-kids: 'Fredoka', 'News Gothic BT', sans-serif; --jat-font: var(--jat-font-body); /* compat (NÃO usar em peça nova) */ --jat-font-mono: var(--jat-font-body); /* Escala fluida */ --jat-text-display: clamp(2.75rem, 6vw, 4.5rem); --jat-text-h1: clamp(2.25rem, 5vw, 3.5rem); --jat-text-h2: clamp(1.625rem, 3.5vw, 2.5rem); --jat-text-h3: clamp(1.25rem, 2.5vw, 1.75rem); --jat-text-sub: clamp(1rem, 2vw, 1.25rem); --jat-text-body: 1rem; --jat-text-body-sm: 0.9375rem; --jat-text-caption: 0.875rem; --jat-text-micro: 0.75rem; --jat-text-button: 0.95rem; --jat-text-badge: 0.75rem; /* Pesos (News Gothic é estática: 300/400/600/700 · medium mapeia pra demi, extra pra bold) */ --jat-weight-light: 300; --jat-weight-regular: 400; --jat-weight-medium: 600; --jat-weight-semibold: 600; --jat-weight-bold: 700; --jat-weight-extra: 700; --jat-display-weight: 700; /* cerimônia abaixa pra 400 */ /* Line-height */ --jat-leading-tight: 1.06; --jat-leading-snug: 1.3; --jat-leading-normal: 1.55; --jat-leading-relaxed: 1.75; /* Letter-spacing (caps SÓ no motor de reserva) */ --jat-tracking-tight: -0.015em; --jat-tracking-normal: 0em; --jat-tracking-wide: 0.04em; /* Números: sempre tabulares em tabela */ --jat-nums: lining-nums tabular-nums; /* ── ASSINATURAS GRÁFICAS · HERANÇA 2018 (R9) ───────── Linguagem pontilhada do manual p31: a micro-onda do eyebrow vira PONTILHADA (pista não-cromática) e o divisor segue o "detalhe onda" chapado. Data-URI pra peça funcionar offline. Arquivos ricos em patterns/ (splash, linha-onda-pontilhada, recorte de foto). */ --jat-onda-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 8'%3E%3Cpath d='M1 5.5C3.5 1.5 6 1.5 8.5 5.5S13.5 9.5 16 5.5 21 1.5 25 5.5' fill='none' stroke='%23e9a23b' stroke-width='2' stroke-linecap='round' stroke-dasharray='0.2 3.1'/%3E%3C/svg%3E"); --jat-onda-tick-claro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 8'%3E%3Cpath d='M1 5.5C3.5 1.5 6 1.5 8.5 5.5S13.5 9.5 16 5.5 21 1.5 25 5.5' fill='none' stroke='%23ffd16a' stroke-width='2' stroke-linecap='round' stroke-dasharray='0.2 3.1'/%3E%3C/svg%3E"); /* divisor "detalhe onda" (mask · pinta com background-color) */ --jat-divisor-onda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 40C120 8 240 8 360 32S600 64 720 44 960 8 1080 20s240 36 360 12V64H0Z'/%3E%3C/svg%3E"); /* ── ESPAÇAMENTO ── */ --jat-space-1: 0.25rem; --jat-space-2: 0.5rem; --jat-space-3: 0.75rem; --jat-space-4: 1rem; --jat-space-5: 1.25rem; --jat-space-6: 1.5rem; --jat-space-8: 2rem; --jat-space-10: 2.5rem; --jat-space-12: 3rem; --jat-space-16: 4rem; --jat-space-20: 5rem; --jat-space-24: 6rem; --jat-space-32: 8rem; --jat-section-y: var(--jat-space-20); --jat-section-x: var(--jat-space-16); --jat-card-pad: var(--jat-space-6); --jat-card-gap: var(--jat-space-6); --jat-btn-y: 0.9rem; --jat-btn-x: 1.9rem; /* ── GRID ── */ --jat-container: 1200px; --jat-container-narrow: 720px; --jat-gutter: 2rem; /* ── FORMA · SEIXO E VELA (assinatura v2) ───────────── Nada de pílula genérica: o raio orgânico assimétrico (seixo rolado) e o canto de vela são a forma da marca. */ --jat-radius-none: 0; --jat-radius-xs: 4px; --jat-radius-sm: 8px; --jat-radius-md: 14px; --jat-radius-lg: 24px; --jat-radius-xl: 32px; --jat-radius-full: 9999px; --jat-radius-seixo: 1.4rem 1.1rem 1.5rem 1rem / 1.1rem 1.5rem 1rem 1.4rem; --jat-radius-vela: 0.5rem 1.8rem 0.5rem 1.8rem / 0.5rem 1.8rem 0.5rem 1.8rem; /* ── BORDAS ── */ --jat-border: 1px solid rgba(33, 33, 33, 0.12); --jat-border-medium: 1px solid rgba(33, 33, 33, 0.22); --jat-border-mar: 1px solid rgba(49, 123, 133, 0.30); --jat-border-focus: 3px solid var(--jat-mar-700); /* ── SOMBRAS (tint azul-mar) ── */ --jat-shadow-none: none; --jat-shadow-subtle: 0 1px 4px rgba(0, 39, 50, 0.06), 0 2px 8px rgba(0, 39, 50, 0.04); --jat-shadow-card: 0 2px 10px rgba(0, 39, 50, 0.08), 0 6px 20px rgba(0, 39, 50, 0.06); --jat-shadow-elevated: 0 6px 20px rgba(0, 39, 50, 0.12), 0 14px 40px rgba(0, 39, 50, 0.08); /* ── TRANSIÇÕES ── */ --jat-transition-fast: 150ms ease; --jat-transition-base: 250ms ease; --jat-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); /* ── Z-INDEX ── */ --jat-z-dropdown: 100; --jat-z-sticky: 200; --jat-z-overlay: 300; --jat-z-modal: 400; /* ── SEMÂNTICOS · REGISTRO PRAIA-SOL (default) ──────── Benchmark: neutro = areia (nunca branco puro) · hover CLAREIA (luz, não sombra) · CTA fala como pessoa. */ --jat-bg: var(--jat-areia); --jat-bg-soft: var(--jat-cream); --jat-bg-cream: var(--jat-cream); --jat-surface: var(--jat-branco); --jat-text: var(--jat-tinta); --jat-text-soft: var(--jat-tinta-500); --jat-text-muted: var(--jat-tinta-400); --jat-line: rgba(33, 33, 33, 0.12); --jat-accent: var(--jat-mar-700); --jat-accent-hover: var(--jat-mar-600); /* clareia */ --jat-accent-2: var(--jat-dourado-500); --jat-accent-2-hover: var(--jat-dourado-300); /* clareia */ --jat-on-accent: var(--jat-branco); --jat-eyebrow-ink: var(--jat-dourado-700); /* sobre claro · AA */ } /* ── TEMA "MAR" (escuro · hero, rodapé, imersivo) ── */ .theme-mar, [data-theme="mar"] { --jat-bg: var(--jat-mar-900); --jat-bg-soft: #063039; --jat-bg-cream: #0a3843; --jat-surface: #0e404b; --jat-text: #eafafc; --jat-text-soft: #a9cfd4; --jat-text-muted: #7fb0b7; --jat-line: rgba(234, 250, 252, 0.16); --jat-accent: var(--jat-mar-300); --jat-accent-hover: var(--jat-mar-200); --jat-on-accent: var(--jat-mar-900); --jat-eyebrow-ink: var(--jat-dourado-300); /* sobre escuro */ } /* ── REGISTRO "CERIMÔNIA" (MICE · casamento) ────────── Mesma estrutura, temperatura contida: display leve, mar-funda + dourado fino, formas menos lúdicas. */ [data-register="cerimonia"] { --jat-display-weight: 400; /* News Gothic Roman */ --jat-accent: var(--jat-mar-800); --jat-accent-hover: var(--jat-mar-700); --jat-accent-2: var(--jat-dourado-600); --jat-accent-2-hover: var(--jat-dourado-500); /* fix bancada (auditor): dourado-600 sobre cream media 3.06:1 e reprova AA em texto pequeno · usar 700 */ --jat-eyebrow-ink: var(--jat-dourado-700); --jat-radius-seixo: var(--jat-radius-sm); --jat-radius-vela: var(--jat-radius-sm); --jat-bg: var(--jat-cream); } /* ── ACESSIBILIDADE · MOVIMENTO ── */ @media (prefers-reduced-motion: reduce) { :root { --jat-transition-fast: 0ms; --jat-transition-base: 0ms; --jat-transition-slow: 0ms; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }