/* ========================================================================== Voar Sem Asas — Kit de Componentes 2026 (pacote novo, so adiciona) ========================================================================== O QUE E ISSO O ds-2026-core.css trouxe so as CORES/FONTES do redesign 2026 pro site inteiro. Os componentes da documentacao viva (botao, chip, card, vidro sobre foto) nunca chegaram a virar CSS de verdade. Este arquivo fecha essa lacuna: cada bloco abaixo e uma peca que ainda NAO EXISTIA no site. REGRA DE OURO Nada aqui redefine ".button", ".path-card" ou qualquer classe que ja funciona hoje. So adiciona classe nova (.chip, .badge-outline, .ghost-link, .icon-button, .glass-panel, .course-card...) ou modificador novo do botao (.tonal, .glass, .compact, .block) que ainda nao existia. DUAS FAMILIAS DE VARIAVEL — nao trocar uma pela outra - "De pagina" (--ink, --paper, --rust, --muted, --line, --serif, --sans): vem do tema configurado no painel admin (config.php > header.php) e HOJE e sempre a versao clara ("paper"). Use nos componentes que ficam direto no fundo da pagina: chip, badge, ghost-link, icon-button, cards. - "De vidro sobre foto" (--glass-bg, --glass-border, --duna...): vem do ds-2026-core.css e sao sempre escuras, de proposito — servem pra qualquer foto/video, nao pro fundo da pagina (que o site nunca deixou escuro por padrao: nao existe ). So usar em coisas que ficam POR CIMA de imagem/video (glass-panel, botao .glass). Nao usar --text-primary/--text-muted/--bg-primary do core em nada que fica direto no fundo da pagina — eles assumem tema escuro e o texto ficaria claro sobre fundo claro (ilegivel). SE UM DIA TROCAR O ESTILO DO BOTAO INTEIRO O visual atual (canto dobrado, faiscas, brilho) vem de duas fontes: 1. a regra base ".button" em assets/site-bundle.css (por volta da linha 9, onde tem "--btn-fold" e o "isolation:isolate") 2. o script assets/button-fx.js, que injeta .fold/.points_wrapper/.shine Pra trocar TUDO por um estilo novo, e so reescrever essa regra base e desligar (ou trocar) o button-fx.js. Os modificadores .tonal/.glass/ .compact/.block deste arquivo continuam funcionando por cima, porque so cuidam de cor/borda/tamanho — nunca da geometria ou da decoracao. ORDEM DE CARGA Este arquivo deve ser o ULTIMO do , depois de site-bundle.css e cards.css, pra ganhar empate de especificidade sem precisar de !important — mesma logica ja usada pro cards.css hoje. ========================================================================== */ /* --------------------------------------------------------------------- 1. BOTOES — variantes novas da "familia de acoes" (.primario, .ghost-light e .small ja existem; isso completa o catalogo) --------------------------------------------------------------------- */ /* O .button padrao tem um brilho rosa decorativo (::before/::after e o .fold no canto) desenhado pro botao solido de sempre — em fundo mais claro, mais largo ou mais fino ele vira uma mancha em vez de um brilho sutil. As 4 variantes abaixo desligam esse brilho (mesma receita que o .ghost-light ja usa) e definem o proprio preenchimento, limpo. */ .button.tonal::before, .button.glass::before, .button.compact::before, .button.block::before, .button.tonal::after, .button.glass::after, .button.compact::after, .button.block::after{ content: none; } .button.tonal .fold, .button.glass .fold, .button.compact .fold, .button.block .fold{ display: none; } /* Tonal: CTA intermediario, accent diluido, presenca menor que o primario */ .button.tonal{ background: color-mix(in srgb, var(--rust) 18%, var(--paper)); color: var(--ink); border: 1px solid color-mix(in srgb, var(--rust) 48%, transparent); } /* Vai pro mesmo preenchimento do Primario no hover, entao usa a MESMA tinta ja calculada por contraste pra ele (--button-ink) — nao um branco fixo, que erra quando o accent do tema for claro. */ .button.tonal:hover{ background: var(--rust); color: var(--button-ink, var(--ink)); } /* Glass: pra hero, foto e cards imersivos — usa a familia "vidro sobre foto". Usa o nivel Soft (nao o Clear): um botao precisa ser legivel sempre, nao pode depender de dar sorte com o que esta atras dele na foto. Alem disso, so usar sobre foto/video que ja tem scrim (.hero-scrim, .path-card::after) — vidro sozinho, sem escurecer a base, nao garante contraste. */ .button.glass{ background: var(--glass-bg, rgba(44,32,28,.42)); color: var(--duna, #fff); border: 1px solid var(--glass-border, rgba(236,229,220,.38)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .button.glass:hover{ background: var(--glass-frosted, rgba(44,32,28,.58)); } /* Compacto e Largura total: so tamanho — mesmo preenchimento solido do Primario, sem o radial rosa que nao acompanha bem tamanhos diferentes. */ .button.compact, .button.block{ background: var(--button-fill, var(--rust)); } .button.compact{ min-height: 2.6rem; padding: .68rem 1rem; font-size: 11px; } .button.block{ width: 100%; } /* Icone: acao sem texto — exige aria-label descritivo no HTML */ .icon-button{ width: 3.4rem; height: 3.4rem; display: inline-grid; place-items: center; flex: none; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); cursor: pointer; transition: transform .3s ease, background .25s ease, border-color .25s ease, color .25s ease; } .icon-button:hover{ transform: translateY(-3px); border-color: var(--rust); background: var(--rust); color: #fff; } .icon-button svg{ width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* Estados reais: disabled hoje nao tem NENHUM estilo no site — o botao parece clicavel mesmo desativado. Isso corrige pros dois tipos. */ .button:disabled, .button[aria-disabled="true"], .icon-button:disabled, .icon-button[aria-disabled="true"]{ opacity: .42; pointer-events: none; filter: grayscale(.4); } /* --------------------------------------------------------------------- 2. CHIPS, TAGS E BADGES — nao existiam no site --------------------------------------------------------------------- */ .chip-row{ display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; } .chip{ min-height: 2.35rem; display: inline-flex; align-items: center; gap: .5rem; padding: .6rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--muted); font: 700 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: color .25s ease, background .25s ease, border-color .25s ease, transform .3s ease; } .chip:hover{ transform: translateY(-2px); color: var(--ink); border-color: var(--rust); } .chip.is-selected, .chip[aria-pressed="true"]{ color: #fff; background: var(--rust); border-color: var(--rust); } /* Tag: informativa, nao clicavel */ .chip--tag{ cursor: default; border-style: dashed; color: var(--ink); } .badge-outline{ width: max-content; display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .68rem; border: 1px solid currentColor; border-radius: 999px; color: inherit; font: 700 10px var(--sans); letter-spacing: .12em; text-transform: uppercase; } /* --------------------------------------------------------------------- 3. LINKS EDITORIAIS — a seta ja e automatica (button-fx.js converte qualquer "->" em SVG animado); aqui so o estilo do texto/sublinhado. --------------------------------------------------------------------- */ .ghost-link{ display: inline-flex; gap: .55rem; align-items: center; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: .38rem; font: 700 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; transition: color .25s ease, border-color .25s ease; } .ghost-link:hover{ color: var(--rust); border-color: var(--rust); } /* --------------------------------------------------------------------- 4. CARDS ESTRUTURAIS — course-card, video-card e agenda-card (testimonial-card ja existe no site; mari-card e level-card tambem) --------------------------------------------------------------------- */ .course-card{ position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--radius-soft, 26px); border: 1px solid var(--line); background: var(--paper); } .course-card > img{ width: 100%; aspect-ratio: 16/10; object-fit: cover; } .course-card__content{ padding: 1.6rem; display: flex; flex-direction: column; gap: 1rem; } .course-card__content h3{ font: 400 clamp(1.4rem,2vw,1.85rem)/1.1 var(--serif); margin: 0; } .course-card__content p{ margin: 0; color: var(--muted); } .course-card .benefit-list-inline{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; color: var(--muted); font-size: 14px; } .course-card .benefit-list-inline li{ display: flex; align-items: center; gap: .5rem; } .course-card .benefit-list-inline svg{ width: 16px; height: 16px; flex: none; color: var(--rust); } .video-card{ position: relative; overflow: hidden; border-radius: var(--radius-soft, 26px); isolation: isolate; min-height: 320px; display: flex; align-items: flex-end; } .video-card video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } .video-card::after{ content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(0deg, rgba(20,12,10,.86), transparent 60%); } .video-card__content{ position: relative; z-index: 1; padding: 1.6rem; color: #fff; } .video-card__content h3{ font: 400 clamp(1.3rem,2vw,1.7rem)/1.1 var(--serif); margin: .5rem 0 0; } .agenda-card{ display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; padding: 1.6rem; border: 1px solid var(--line); border-radius: var(--radius-soft, 26px); background: var(--paper); } .agenda-card__date{ display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: .6rem; border-right: 1px solid var(--line); min-width: 84px; } .agenda-card__date strong{ font: 400 1.8rem var(--serif); } .agenda-card__date span{ font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .agenda-card__copy h3{ font: 400 clamp(1.3rem,2vw,1.7rem)/1.15 var(--serif); margin: .6rem 0; } .agenda-card__copy p{ margin: 0 0 1rem; color: var(--muted); } .agenda-card__details{ display: flex; flex-wrap: wrap; gap: .8rem; font-size: 12px; color: var(--muted); margin-bottom: 1rem; } /* --------------------------------------------------------------------- 5. VIDRO REAL SOBRE FOTOGRAFIA — os 4 niveis da proposta. Use so em cima de foto/video (hero, path-card, mari-card...), nunca direto no fundo da pagina — por isso as cores vem sempre escuras. --------------------------------------------------------------------- */ .glass-panel{ border-radius: var(--radius-soft, 28px); border: 1px solid var(--glass-border, rgba(236,229,220,.38)); color: var(--duna, #fff); } .glass-panel--clear{ background: var(--glass-clear, rgba(44,32,28,.18)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .glass-panel--soft{ background: var(--glass-bg, rgba(44,32,28,.42)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .glass-panel--frosted{ background: var(--glass-frosted, rgba(44,32,28,.58)); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); } .glass-panel--elevated{ background: var(--glass-elevated, rgba(44,32,28,.72)); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: var(--shadow-atmospheric, 0 32px 90px rgba(10,6,5,.28)); } /* --------------------------------------------------------------------- 6. CTA IMERSIVO — foto de fundo + botao glass, pra banners de recrutamento (ex: "leve o Voar pra sua escola"). A foto recebe blur+escurecimento direto (nao so um scrim numa borda), pra garantir leitura em qualquer parte da imagem — e so assim que um botao .glass fica seguro por cima. --------------------------------------------------------------------- */ .immersive-cta{ position: relative; min-height: 480px; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius-soft, 28px); text-align: center; isolation: isolate; color: #fff; } .immersive-cta > img{ position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(6px) saturate(.85) brightness(.55); transform: scale(1.02); z-index: 0; } .immersive-cta::after{ content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,12,10,.35), rgba(20,12,10,.72)); pointer-events: none; } .immersive-cta__copy{ position: relative; z-index: 2; width: min(640px, calc(100% - 3rem)); padding: 3rem 1rem; } .immersive-cta__copy h3{ font: 400 clamp(2.2rem,5vw,3.6rem)/1.05 var(--serif); margin: .8rem 0 1.2rem; } .immersive-cta__copy p{ color: rgba(255,255,255,.78); max-width: 460px; margin: 0 auto 1.8rem; } /* --------------------------------------------------------------------- 7. MOSAICO DE DESENVOLVIMENTO — grade de fotos com legenda curta (uma palavra), pra comunicar qualidades gerais (forca, fluidez, seguranca). 3 colunas de mesma altura (a proposta original tinha a 1a foto ocupando 2 linhas, mas isso so alinha direito com mais de 3 fotos preenchendo a segunda linha — com exatamente 3, o resultado ficava desalinhado). A legenda usa vidro real (glass-bg), por estar sempre sobre foto. O filtro na foto e o mesmo tratamento ja usado em outros cards do site (editorial-card, module-card), pra as 3 fotos lerem como um conjunto, mesmo vindo de sessoes de fotografia diferentes. */ .development-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; } .development-card{ position: relative; min-height: clamp(340px, 34vw, 480px); margin: 0; border-radius: var(--radius-soft, 26px); overflow: hidden; border: 1px solid var(--line); transition: transform .5s ease, box-shadow .5s ease; } .development-card:hover, .development-card:focus-within{ transform: translateY(-7px); box-shadow: 0 24px 60px rgba(44,32,28,.22); } .development-card img{ width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.04) brightness(.94); transform: scale(1.015); transition: transform .75s ease; } .development-card:hover img, .development-card:focus-within img{ transform: scale(1.06); } .development-card figcaption{ position: absolute; inset: auto .8rem .8rem .8rem; margin: 0; padding: 1rem 1.2rem; border: 1px solid var(--glass-border, rgba(236,229,220,.38)); border-radius: var(--radius-soft, 20px); background: var(--glass-bg, rgba(44,32,28,.42)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: var(--duna, #fff); } .development-card strong{ font: 500 clamp(1.5rem,2.4vw,2.6rem) var(--serif); } @media (max-width: 900px){ .development-grid{ grid-template-columns: 1fr 1fr; } .development-card:first-child{ grid-column: 1 / -1; min-height: 380px; } } @media (max-width: 560px){ .development-grid{ grid-template-columns: 1fr; } } /* --------------------------------------------------------------------- Reduz movimento: os componentes novos nao tem animacao propria alem do que ja e global (button-fx.js/reveal ja respeitam isso sozinhos). --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ .chip, .icon-button, .button.tonal, .button.glass{ transition: none !important; } }