/* ============================================================================ BOULEVARD CURITIBANO — BASE Reset + fontes + tipografia base + FUNDO (glows + textura) + utilitarios. Requer tokens.css carregado ANTES. ============================================================================ */ /* ---------------------------------------------------------------------------- FONTES — Google Fonts (livres). Fraunces (display) + DM Sans (corpo). @import no topo do CSS. Para producao, recomenda-se tambem precarregar no (ver STYLEGUIDE.md) para evitar flash de fonte. ---------------------------------------------------------------------------- */ /* Google Fonts carregadas via no head.php (evita bloqueio de render). @import removido: o navegador precisava baixar base.css para descobrir a URL da fonte, adicionando uma RTT extra antes de qualquer texto aparecer. */ /* ---------------------------------------------------------------------------- RESET (moderno, enxuto) ---------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; /* Ancora interna nunca fica escondida sob a navbar fixed */ scroll-padding-top: var(--header-h); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { min-height: 100vh; min-height: 100dvh; font-family: var(--font-body); font-size: var(--fs-base); font-weight: var(--fw-regular); line-height: var(--lh-normal); color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-synthesis: none; overflow-x: hidden; } /* ── Navbar fixed: compensacao de deslocamento ─────────────────────────────── Home: navbar transparente sobre o hero fullscreen (video) — sem padding. Internas: navbar cobre o topo, body empurra o conteudo para baixo. A classe e injetada pelo PHP em head.php via $pagina. --------------------------------------------------------------------------- */ body.has-fixed-header { padding-top: var(--header-h); } body.is-home { padding-top: 0; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } :where(h1, h2, h3, h4, h5, h6) { overflow-wrap: break-word; } p { overflow-wrap: break-word; } /* Foco visivel: outline REAL (sobrevive a overflow:hidden/mascara/borda translucida) + halo. O box-shadow sozinho some quando ha clip; o outline nao. */ :focus-visible { outline: 2px solid var(--blv-white); outline-offset: 2px; box-shadow: var(--ring-focus); border-radius: var(--radius-sm); } ::selection { background: var(--blv-white); color: var(--blv-black); } /* ── Scrollbars estilizadas — tema dark, elegante e coerente com o glass ────── Firefox: scrollbar-width + scrollbar-color (thumb track). Webkit/Blink: pseudo-elementos ::-webkit-scrollbar-*. Aplicado globalmente (html/body) + containers com overflow:auto/scroll. thumb: grafite claro translúcido com borda "respirante" contra o fundo escuro. ─────────────────────────────────────────────────────────────────────────── */ html, body, * { scrollbar-width: thin; scrollbar-color: rgba(90, 90, 100, 0.55) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(90, 90, 100, 0.45); border-radius: var(--radius-full); /* borda cria o efeito de "flutuação" do thumb sobre o track */ border: 2.5px solid var(--color-bg); transition: background var(--dur-base) var(--ease-out); } ::-webkit-scrollbar-thumb:hover { background: rgba(120, 120, 132, 0.70); } ::-webkit-scrollbar-corner { background: transparent; } /* ---------------------------------------------------------------------------- FUNDO DA PAGINA — base do glassmorphism. IMPORTANTE: o vidro so funciona se houver luz/textura por tras. Por isso o body recebe: (1) gradientes radiais de "glow" sutis + (2) textura Petit Pave. Camada fixa atras de todo o conteudo via ::before. ---------------------------------------------------------------------------- */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: /* glow superior direito (luz quente sutil, ecoa a fachada noturna) */ radial-gradient(60% 50% at 85% -5%, rgba(255,255,255,.07), transparent 60%), /* glow inferior esquerdo (frio, profundidade) */ radial-gradient(50% 45% at 0% 100%, rgba(255,255,255,.05), transparent 55%), /* base grafite */ var(--color-bg-deep); pointer-events: none; } /* Textura Petit Pave por cima do glow, bem sutil */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; background-image: var(--pave-src); background-size: 720px auto; background-repeat: repeat; opacity: var(--pave-opacity); /* desbota a textura nas bordas pra nao competir com o conteudo */ -webkit-mask-image: radial-gradient(120% 90% at 50% 10%, #000 35%, transparent 95%); mask-image: radial-gradient(120% 90% at 50% 10%, #000 35%, transparent 95%); pointer-events: none; } /* ---------------------------------------------------------------------------- TIPOGRAFIA BASE ---------------------------------------------------------------------------- */ /* Titulos = Fraunces, com optical sizing alto e leve suavidade */ h1, h2, h3, h4, .display { font-family: var(--font-display); font-optical-sizing: auto; font-variation-settings: "opsz" var(--fraunces-opsz), "SOFT" var(--fraunces-soft), "WONK" var(--fraunces-wonk); font-weight: var(--fw-regular); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--color-text); text-wrap: balance; } h1, .h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tighter); } h2, .h2 { font-size: var(--fs-3xl); } h3, .h3 { font-size: var(--fs-2xl); font-weight: var(--fw-medium); } h4, .h4 { font-size: var(--fs-xl); font-weight: var(--fw-medium); } h5, h6 { font-family: var(--font-body); font-weight: var(--fw-semibold); } /* Hero display (maior) */ .display-hero { font-family: var(--font-display); font-optical-sizing: auto; font-variation-settings: "opsz" 144, "SOFT" var(--fraunces-soft), "WONK" 0; font-size: var(--fs-5xl); font-weight: var(--fw-light); /* leve = sofisticado (recomendacao) */ line-height: var(--lh-tight); letter-spacing: var(--tracking-tighter); text-wrap: balance; } p { line-height: var(--lh-relaxed); color: var(--color-text-secondary); } p + p { margin-top: var(--space-4); } strong, b { font-weight: var(--fw-semibold); color: var(--color-text); } small { font-size: var(--fs-sm); } /* Links inline (em textos) */ .link { color: var(--color-text); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .link:hover { background-size: 100% 1px; } /* Kicker / overline (label editorial maiusculo) */ .overline { font-family: var(--font-body); font-size: var(--fs-overline); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-muted); } /* Lead (paragrafo de abertura, maior) */ .lead { font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--color-text-secondary); } /* ---------------------------------------------------------------------------- UTILITARIOS DE LAYOUT ---------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--page-gutter); } .container--wide { max-width: var(--container-2xl); } .container--narrow{ max-width: var(--container-md); } .container--prose { max-width: var(--container-prose); } .section { padding-block: var(--section-py); } /* Stack vertical com gap consistente */ .stack > * + * { margin-top: var(--space-4); } .stack-sm > * + * { margin-top: var(--space-2); } .stack-lg > * + * { margin-top: var(--space-8); } /* Cluster horizontal que quebra linha */ .cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; } /* Grids responsivos auto-fit (cards/lojas) */ .grid { display: grid; gap: var(--space-6); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .center-text { text-align: center; } .mx-auto { margin-inline: auto; } /* Cor de texto utilitaria */ .text-muted { color: var(--color-text-muted); } .text-secondary { color: var(--color-text-secondary); } /* Acessibilidade: esconder visualmente, manter para leitores de tela */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Pular para conteudo (link de acessibilidade) */ .skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: var(--z-toast); padding: var(--space-2) var(--space-4); background: var(--blv-white); color: var(--blv-black); border-radius: var(--radius-md); font-weight: var(--fw-semibold); transition: top var(--dur-base) var(--ease-out); } .skip-link:focus { top: var(--space-4); } /* Divisor sutil */ .divider { height: 1px; border: 0; background: var(--color-border); } /* Textura Petit Pave como elemento decorativo pontual (ex: dentro de um bloco) */ .pave-texture { background-image: var(--pave-src); background-size: 480px auto; opacity: var(--pave-opacity); } /* ---------------------------------------------------------------------------- SCROLL REVEAL — estado inicial (JS adiciona .is-visible quando entra na tela) Sem JS / reduced-motion: conteudo aparece normalmente (degrada bem). ---------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { /* FALHA-SEGURA: so esconde se o JS marcou . Sem JS (ou se o script falhar), .reveal nunca fica invisivel — conteudo aparece. */ .js-ready .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); will-change: opacity, transform; } .js-ready .reveal.is-visible { opacity: 1; transform: none; } /* Atrasos em cascata (aplicar em itens irmaos) */ .reveal-delay-1 { transition-delay: 80ms; } .reveal-delay-2 { transition-delay: 160ms; } .reveal-delay-3 { transition-delay: 240ms; } .reveal-delay-4 { transition-delay: 320ms; } }