/* * Identidade do Surfing4all: os tokens e os componentes que o site e o site de reserva compartilham * (TG-244; a decisão do Owner em 05/11/2026 é que o WordPress é o guia da identidade, sempre). * * Carregado em TODA página do WordPress (functions.php), DEPOIS de home.css e praca.css nas páginas de * venda: assim os componentes vencem o reset de `.s4a-home` (`.s4a-home :is(h1, h2, h3) { margin: 0 }`) * como venciam quando viviam naqueles arquivos, e home.css/praca.css ficam só com o layout das páginas * de venda (herói, grades, seções em espuma, promessa, chamada final). O site de reserva (/reservar/) * recebe este arquivo pela moldura (s4all-moldura.php, TG-179): o que está aqui vale lá sem cópia. * Por isso: * * - os tokens ficam em :root, não em .s4a-home; * - cada componente tem o seletor do bloco do WordPress (.wp-block-button__link, .wp-block-cover__inner-container…) * E uma classe própria (.s4a-botao__link, .s4a-praca__conteudo…) para a marcação sem blocos. * * Catálogo e regra de uso: docs/IDENTIDADE-SURFING4ALL.md. O que faltar ao site de reserva nasce AQUI, * com nome s4a-*, nunca em apps/reserva. */ :root { --s4a-azul: #326698; --s4a-azul-claro: #2a95d6; --s4a-azul-profundo: #1f4466; --s4a-espuma: #eef5fb; --s4a-areia: #f7f3ec; --s4a-texto: #111111; --s4a-texto-2: #555555; --s4a-raio-g: 32px; --s4a-raio-m: 22px; --s4a-sombra: 0 1px 2px rgba(17, 40, 70, .06), 0 12px 32px -12px rgba(17, 40, 70, .22); --s4a-titulos: var(--wp--preset--font-family--space-grotesk, "Space Grotesk", sans-serif); --s4a-corpo: var(--wp--preset--font-family--ibm-plex-sans, "IBM Plex Sans", sans-serif); /* Véu sobre foto para o texto branco ler (capas e cartões de foto) */ --s4a-veu-foto: linear-gradient(180deg, rgba(10, 30, 50, .15) 0%, rgba(10, 30, 50, .05) 35%, rgba(18, 45, 75, .8) 100%); --s4a-onda-branca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0,58 C200,96 400,98 600,76 C800,54 980,12 1160,16 C1300,20 1380,44 1440,62 L1440,100 L0,100 Z'/%3E%3C/svg%3E"); --s4a-onda-espuma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%23eef5fb' d='M0,48 C240,8 480,0 720,28 C960,56 1200,72 1440,40 L1440,80 L0,80 Z'/%3E%3C/svg%3E"); } /* Largura do conteúdo */ .s4a-contido { width: min(1160px, 100% - 40px); margin-inline: auto; } /* Títulos de seção: rótulo pequeno em maiúsculas, título grande, chamada em cinza; cabeça com ação à direita */ .s4a-eyebrow { color: var(--s4a-azul-claro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; } .s4a-titulo { font-family: var(--s4a-titulos); font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.05; letter-spacing: -.025em; margin: 12px 0 16px !important; } .s4a-lead { color: var(--s4a-texto-2); font-size: 1.15rem; max-width: 600px; } .s4a-secao { padding: clamp(64px, 9vw, 120px) 0; } .s4a-secao--sem-topo { padding-top: 0; } .s4a-cabeca { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 44px !important; } .s4a-migalha { font-size: .9rem; opacity: .85; } .s4a-migalha a:hover { text-decoration: underline; } /* * Botões em pílula: o retorno vem no toque, não no soltar. No WordPress é o bloco Botões com a classe * s4a-botao no botão (o link interno é .wp-block-button__link); no site de reserva, um ou