/* ============================================================================ BOULEVARD CURITIBANO — DESIGN TOKENS (:root) Estilo: Linear / Vercel — P&B premium, glassmorphism predominante. Stack: CSS3 vanilla. Sem build, sem pre-processador. Carregar SEMPRE primeiro: tokens.css -> base.css -> components.css ============================================================================ */ :root { /* -------------------------------------------------------------------------- 1. CORES — Paleta P&B (identidade) + escala de grafite (boa pratica). Fundos NUNCA preto chapado em areas amplas: usar grafite escuro. -------------------------------------------------------------------------- */ /* Tons puros da marca (uso pontual: logo, alto contraste, textos) */ --blv-black: #000000; --blv-white: #ffffff; /* Escala de grafite/neutros (do mais escuro ao mais claro) — base do tema */ --gray-950: #050506; /* fundo mais profundo (atras de tudo) */ --gray-925: #0a0a0b; /* FUNDO PADRAO da pagina (grafite escuro) */ --gray-900: #101012; /* superficies elevadas base */ --gray-850: #161618; /* cards solidos / secoes alternadas */ --gray-800: #1d1d20; /* hover de superficies */ --gray-700: #2a2a2e; /* bordas fortes / divisores */ --gray-600: #3a3a40; /* bordas medias */ --gray-500: #5b5b63; /* SO decorativo/desabilitado (2.9:1 — NAO p/ leitura)*/ --gray-450: #9b9ba3; /* texto muted legivel (7.2:1 no fundo; ok em glass) */ --gray-400: #8a8a93; /* cinza medio (icones sutis) */ --gray-300: #b4b4bd; /* texto secundario (9.6:1) */ --gray-200: #d4d4db; /* texto secundario claro */ --gray-100: #ececef; /* quase branco */ --gray-050: #f6f6f7; /* fundo claro (secoes light, se houver) */ /* Papeis semanticos de cor (referencie SEMPRE estes, nao o hex cru) */ --color-bg: var(--gray-925); /* fundo da pagina */ --color-bg-deep: var(--gray-950); /* fundo do hero / mais profundo */ --color-surface: var(--gray-900); /* superficie base */ --color-surface-2: var(--gray-850); /* superficie elevada (cards) */ --color-surface-3: var(--gray-800); /* hover de superficie */ --color-text: #f7f7f8; /* texto principal (off-white,18:1) */ --color-text-secondary:var(--gray-300); /* texto secundario (9.6:1) */ --color-text-muted: var(--gray-450); /* legendas/captions (7.2:1 — AA ok)*/ --color-text-inverse: var(--gray-950); /* texto sobre fundo claro */ --color-border: rgba(255,255,255,.08); /* borda padrao (sutil) */ --color-border-strong: rgba(255,255,255,.16); /* borda em hover/foco */ /* Acento: P&B nao tem cor de marca; "acento" = branco puro de alto contraste. CTAs principais usam branco solido sobre escuro (estilo Vercel). */ --color-accent: var(--blv-white); --color-accent-text: var(--gray-950); /* texto sobre o acento branco */ /* Cores funcionais (uso minimo: feedback de formularios/avisos) */ --color-success: #34d399; --color-warning: #fbbf24; --color-error: #f87171; --color-info: #93c5fd; /* Verde WhatsApp (so para o botao flutuante) */ --color-whatsapp: #25d366; /* -------------------------------------------------------------------------- 2. GLASSMORPHISM — EFEITO PREDOMINANTE. 3 niveis padronizados. Cada nivel define: blur, fundo translucido, borda, brilho de topo. Tema escuro: vidro = leve clareamento (rgba branco baixo) sobre o fundo. Use as CLASSES utilitarias .glass-* (em components.css) — nao recrie. -------------------------------------------------------------------------- */ /* Niveis de BLUR (backdrop-filter) */ --blur-xs: 6px; /* detalhe sutil, badges */ --blur-sm: 12px; /* glass sutil — popups pequenos, chips */ --blur-md: 20px; /* glass medio — cards, header (PADRAO) */ --blur-lg: 32px; /* glass forte — modais, hero overlay */ --blur-xl: 48px; /* glass intenso — overlays full / fundos desfocados */ /* Saturacao que acompanha o blur (da vivacidade ao vidro sobre fotos) */ --glass-saturate: 130%; /* Preenchimentos translucidos do vidro (sobre fundo ESCURO = clarear) */ --glass-fill-subtle: rgba(255, 255, 255, .04); --glass-fill: rgba(255, 255, 255, .06); /* PADRAO */ --glass-fill-strong: rgba(255, 255, 255, .09); --glass-fill-solid: rgba(10, 10, 11, .42); /* vidro escuro harmonico (sobre video)*/ /* Bordas do vidro — clareada em cima, sutil em volta (efeito de luz) */ --glass-border: rgba(255, 255, 255, .10); --glass-border-strong: rgba(255, 255, 255, .18); /* Brilho de topo (highlight) — linha de luz na borda superior do vidro */ --glass-highlight: rgba(255, 255, 255, .14); /* Composto pronto de backdrop-filter (clarear + blur + saturar) */ --glass-backdrop: blur(var(--blur-md)) saturate(var(--glass-saturate)); --glass-backdrop-strong: blur(var(--blur-lg)) saturate(var(--glass-saturate)); /* -------------------------------------------------------------------------- 3. TIPOGRAFIA Display: "Fraunces" (Google Fonts, variable, optical sizing) — titulos. Corpo: "DM Sans" (Google Fonts, variable) — texto, UI. Fallbacks elegantes para evitar FOIT/quebra de layout. -------------------------------------------------------------------------- */ --font-display: "Fraunces", "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Eixos da Fraunces (variable): optical size alto = mais contraste/elegancia, SOFT = acabamento tatil. Aplicados via font-variation-settings em base.css. */ --fraunces-opsz: 144; /* display: max contraste de hastes */ --fraunces-soft: 60; /* leve suavidade nas terminacoes */ --fraunces-wonk: 0; /* sem "wonky" — manter elegante e legivel */ /* Pesos (Fraunces variable: 300-900 | DM Sans variable: 400-700) */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900; /* so display, titulos hero */ /* Escala tipografica fluida (clamp): min mobile -> max desktop. Base 16px. Razao ~1.25 (maior nos displays). */ --fs-overline: 0.75rem; /* 12px — kicker/label */ --fs-caption: 0.8125rem; /* 13px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px — corpo */ --fs-lg: 1.125rem; /* 18px — corpo grande */ --fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); /* 20->24 */ --fs-2xl: clamp(1.5rem, 1.25rem + 1.1vw, 2rem); /* 24->32 */ --fs-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem); /* 30->44 */ --fs-4xl: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem); /* 36->60 */ --fs-5xl: clamp(2.75rem, 1.6rem + 5vw, 5rem); /* 44->80 — hero */ /* Alturas de linha */ --lh-tight: 1.05; /* displays grandes */ --lh-snug: 1.2; /* titulos */ --lh-normal: 1.5; /* corpo */ --lh-relaxed: 1.7; /* textos longos */ /* Espacamento entre letras */ --tracking-tighter: -0.03em; /* hero display */ --tracking-tight: -0.015em; /* titulos */ --tracking-normal: 0; /* corpo */ --tracking-wide: 0.08em; /* overline/kicker maiusculo */ --tracking-widest: 0.18em; /* labels espacadas (estilo editorial) */ /* -------------------------------------------------------------------------- 4. ESPACAMENTO — escala base 4px (use multiplos, nunca valores soltos) -------------------------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px — padding padrao de card */ --space-8: 2rem; /* 32px — padding generoso de card/section */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px — espacamento entre secoes (mobile) */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px — espacamento entre secoes (desktop) */ /* Padding vertical de secao (fluido) e padding horizontal de borda da tela */ --section-py: clamp(4rem, 2.5rem + 6vw, 8rem); --page-gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem); /* Larguras de container */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1200px; /* PADRAO do site */ --container-2xl: 1320px; /* secoes largas */ --container-prose: 68ch; /* leitura confortavel (textos legais/sobre) */ /* -------------------------------------------------------------------------- 5. RAIO DE BORDA (radius) Regra Frame: 2xl em cards, lg em botoes. -------------------------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; /* BOTOES */ --radius-xl: 18px; --radius-2xl: 24px; /* CARDS */ --radius-3xl: 32px; /* paineis grandes / hero glass */ --radius-full: 9999px; /* pills, avatares, botao circular */ /* -------------------------------------------------------------------------- 6. SOMBRAS — discretas no tema escuro + sombras de "vidro" (glow suave) -------------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(0,0,0,.40); --shadow-sm: 0 2px 8px rgba(0,0,0,.40); --shadow-md: 0 8px 24px rgba(0,0,0,.45); --shadow-lg: 0 16px 48px rgba(0,0,0,.55); --shadow-xl: 0 28px 70px rgba(0,0,0,.60); /* Sombra de cartao de vidro: profundidade + brilho interno de topo */ --shadow-glass: 0 8px 32px rgba(0,0,0,.45), inset 0 1px 0 var(--glass-highlight); --shadow-glass-lg: 0 24px 64px rgba(0,0,0,.55), inset 0 1px 0 var(--glass-highlight); /* Halo de foco (acessibilidade) — anel branco translucido */ --ring-focus: 0 0 0 3px rgba(255,255,255,.55); /* -------------------------------------------------------------------------- 6b. HEADER — altura real do site-header__inner. Mobile: 72px | Desktop (>=1024px): 96px — ver override abaixo. Usar SEMPRE este token para padding-top do body nas paginas internas e para scroll-padding-top do html (ancoras nao ficam sob a navbar). -------------------------------------------------------------------------- */ --header-h: 72px; /* -------------------------------------------------------------------------- 7. Z-INDEX — camadas (use os tokens, nunca numeros magicos) -------------------------------------------------------------------------- */ --z-base: 1; --z-raised: 10; --z-sticky: 100; /* header sticky */ --z-dropdown: 200; /* menus, submenus */ --z-overlay: 300; /* backdrop de modal */ --z-modal: 400; /* modal/dialog */ --z-popup: 500; /* popup LGPD */ --z-float: 600; /* botao WhatsApp flutuante */ --z-toast: 700; /* notificacoes */ /* -------------------------------------------------------------------------- 8. MOVIMENTO — duracoes e curvas (micro-interacoes suaves) -------------------------------------------------------------------------- */ --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 360ms; --dur-slower: 600ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* saida suave (padrao) */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* leve overshoot */ /* Transicao padrao para interativos */ --transition: color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); /* -------------------------------------------------------------------------- 9. ELEMENTO GRAFICO — Petit Pave (textura art-deco sutil de fundo) -------------------------------------------------------------------------- */ --pave-src: url("../img/petit-pave.png"); --pave-opacity: 0.06; /* bem sutil — textura, nao protagonista */ } /* -------------------------------------------------------------------------- BREAKPOINTS (referencia — CSS vanilla nao tem variaveis em @media). Use estes valores literais nos @media de base.css / components.css: sm: 640px | md: 768px | lg: 1024px | xl: 1200px | 2xl: 1320px Site e MOBILE-FIRST: escreva o base para mobile, suba com min-width. -------------------------------------------------------------------------- */ /* Header maior no desktop — sobrescreve o token para compensar padding-top e scroll-padding */ @media (min-width: 1024px) { :root { --header-h: 96px; } } /* Respeita usuarios que pedem menos movimento (acessibilidade) */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-slower: 0ms; } }