/* ============================================================ La Maior - design.css CSS do design aprovado (html-puro/lamaior-completo_4_com_responsive.html). As cores e fontes vem dos presets do theme.json via o :root abaixo, entao editar em Aparencia > Editor > Estilos recolore o site todo. ============================================================ */ /* ============================================================ DESIGN TOKENS — edite aqui para mudar cores e fontes ============================================================ */ :root { /* As cores agora vêm dos presets do theme.json (Aparência > Editor > Estilos). Mudar a paleta no painel recolore o site inteiro — não edite os hex aqui. Os fallbacks (após a vírgula) cobrem o caso de o tema não estar carregado. */ --verde: var(--wp--preset--color--verde, #1B3D2C); --verde2: var(--wp--preset--color--verde2, #265A3F); --gold: var(--wp--preset--color--gold, #C4851A); --gold2: var(--wp--preset--color--gold2, #9E6A0C); --brasa: var(--wp--preset--color--brasa, #8B3A2F); --linho: var(--wp--preset--color--linho, #F3EDE1); --linho2: var(--wp--preset--color--linho2, #EAE0CE); --text: var(--wp--preset--color--texto, #1C2518); --mid: var(--wp--preset--color--mid, #7A6A50); --light: var(--wp--preset--color--light, #A89878); --bdr: rgba(28,37,24,.1); /* bordas */ --white: var(--wp--preset--color--branco, #FFFFFF); /* Fontes idem: vêm das fontFamilies do theme.json */ --f-title: var(--wp--preset--font-family--body, 'DM Sans', sans-serif); --f-display: var(--wp--preset--font-family--display, 'Playfair Display', serif); --f-body: var(--wp--preset--font-family--body, 'DM Sans', sans-serif); } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--linho); color: var(--text); font-family: var(--f-body); font-size: 18px; line-height: 1.65; -webkit-font-smoothing: antialiased; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } /* ============================================================ HEADER — fixo, sempre visível ============================================================ */ #hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 500; height: 70px; padding: 0 72px; display: flex; align-items: center; background: var(--verde); /* fallback; cor real vem do atributo do block tnm/header */ box-shadow: 0 2px 28px rgba(0,0,0,.18); transition: box-shadow .3s; } /* Logo do site (get_custom_logo) dentro do header */ #hdr .custom-logo-link { display: inline-flex; align-items: center; line-height: 0; } #hdr .custom-logo { height: var(--hdr-logo-h, 42px); width: auto; max-width: none; } .nav { display: flex; align-items: center; justify-content: space-between; width: 100%; } .nav-links { display: flex; gap: 36px; list-style: none; } .nav-links a { font-family: var(--f-title); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.58); cursor: pointer; transition: color .2s; } .nav-links a:hover, .nav-links a.active { color: var(--gold); } .nav-cta { background: var(--gold); color: #fff; font-family: var(--f-title); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: 11px 24px; border-radius: 3px; cursor: pointer; transition: background .2s, transform .15s; } .nav-cta:hover { background: var(--gold2); transform: translateY(-1px); } /* Nav (base): .nav-collapse agrupa menu + CTA à direita (flex em linha), tanto no editor quanto no desktop. No mobile (.js-reveal ≤900px) vira o painel/drawer. O hambúrguer fica oculto e só aparece nas media queries do site. */ .nav-collapse { display: contents; } .nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 9px 8px; background: transparent; border: 0; cursor: pointer; margin-left: auto; } .nav-burger span { display: block; height: 2px; width: 100%; border-radius: 2px; background: #fff; transition: transform .3s ease, opacity .2s ease; } .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================================ (REMOVIDO) sistema de roteamento SPA .page/.page.active No WordPress o recebe a classe "page", então .page{display:none} escondia a página inteira. As páginas reais do WP cuidam disso. ============================================================ */ /* ============================================================ COMPONENTES COMPARTILHADOS ============================================================ */ /* Kicker (label acima dos títulos) */ .kicker { font-family: var(--f-title); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .22em; color: var(--gold); display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .kicker::before { content: ''; width: 20px; height: 2px; background: var(--gold); flex-shrink: 0; } .kicker.lht { color: var(--gold); } /* Garante a margem do kicker mesmo quando é um parágrafo do core (que zera margens via layout) */ p.kicker { margin-bottom: 14px; } /* Títulos de seção */ .sec-h { font-family: var(--f-title); font-size: clamp(28px, 3.5vw, 44px); font-weight: 800; letter-spacing: -1.5px; line-height: 1.0; color: var(--text); overflow: visible; padding-bottom: 4px; margin-bottom: 16px; } .sec-h.lht { color: #fff; } .sec-sub { font-size: 18px; color: #4A5E40; line-height: 1.8; max-width: 560px; } .sec-sub.lht { color: rgba(255,255,255,.5); } /* Seção base */ .sec { padding: 88px; } /* Botões */ .btn { font-family: var(--f-title); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: 16px 28px; border-radius: 3px; display: inline-block; cursor: pointer; transition: all .2s; } .btn-p { background: var(--gold); color: #fff; border: none; } .btn-p:hover { background: var(--gold2); transform: translateY(-2px); } .btn-s { border: 1.5px solid rgba(255,255,255,.32); color: #fff; background: none; } .btn-s:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.08); } .btn-dk { background: var(--verde); color: #fff; border: none; } .btn-dk:hover { background: var(--verde2); transform: translateY(-1px); } /* O theme.json define cor de link:hover global (gold). Como nossos botões são , garantimos aqui que o texto continua branco no hover (igual ao layout aprovado). */ .btn:hover, .btn-p:hover, .btn-s:hover, .btn-dk:hover, .btn-wpp:hover, .nav-cta:hover, .det-btn:hover, .ov-btn:hover, .mc-btn:hover, .btn-wpp-sm:hover, .form-btn:hover, .btn-outline:hover { color: #fff; } /* Botão com ícone (WhatsApp): alinha ícone + texto verticalmente e dá espaçamento. */ .tnm-btn-ico { display: inline-flex; align-items: center; justify-content: center; gap: 9px; } .tnm-btn-ico svg { flex-shrink: 0; } /* WhatsApp button */ .btn-wpp { background: #25D366; color: #fff; font-family: var(--f-title); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 16px 24px; border-radius: 3px; border: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: background .2s, transform .15s; } .btn-wpp:hover { background: #1DAA55; transform: translateY(-2px); } /* Hero de páginas internas */ .page-hero { padding: 72px 88px 60px; position: relative; overflow: hidden; } /* fundo vem do atributo do block tnm/page-hero (editável) */ .page-hero .ph-content { position: relative; z-index: 2; } .page-hero .ph-content .ph1 { margin-bottom: 16px; } .page-hero.dark::after { content: '𝄞'; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); font-size: 320px; color: rgba(196,133,26,.05); font-family: serif; line-height: 1; pointer-events: none; } .ph1 { font-family: var(--f-title); font-size: clamp(36px, 5.5vw, 64px); font-weight: 800; line-height: .96; letter-spacing: -2.5px; overflow: visible; padding-bottom: 6px; margin-bottom: 16px; } .ph1.lht { color: #fff; } .ph1 em { color: var(--gold); font-style: normal; } .ph-sub { font-family: var(--f-body); font-style: italic; font-size: 19px; line-height: 1.65; max-width: 560px; } .ph-sub.lht { color: rgba(255,255,255,.5); } /* Staff lines (pentagrama decorativo) */ .staff { position: absolute; right: 0; top: 0; bottom: 0; width: 42%; pointer-events: none; } .sl { position: absolute; left: 0; right: 0; height: 1px; background: rgba(196,133,26,.13); } .sn { position: absolute; color: rgba(196,133,26,.09); font-family: serif; line-height: 1; user-select: none; } /* Grids */ .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } .g4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; } /* Card base */ .card { background: var(--white); border: 1px solid var(--bdr); border-radius: 8px; padding: 22px 24px; box-shadow: 0 2px 10px rgba(28,37,24,.04); } /* ============================================================ FADE UP / REVEAL ON SCROLL - O estado "escondido" só vale no front (html.js-reveal). No editor, sem essa classe, tudo fica visível para edição. - O theme.js adiciona .is-revealed (com stagger) quando o item entra na tela. ============================================================ */ .js-reveal .fu { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s ease; } .js-reveal .fu.vis { opacity: 1; transform: translateY(0); } .fu.d1 { transition-delay: .1s; } .fu.d2 { transition-delay: .2s; } .fu.d3 { transition-delay: .3s; } /* Reveal por elemento (fiel ao layout): números do stats, título/marcos/citação da história */ .js-reveal .wp-block-tnm-stats .stat, .js-reveal .wp-block-tnm-historia .story-h, .js-reveal .wp-block-tnm-historia .beat, .js-reveal .wp-block-tnm-historia .story-foot, .js-reveal .wp-block-tnm-espaco .espaco-intro > *, .js-reveal .wp-block-tnm-espaco .espaco-grid, .js-reveal .wp-block-tnm-depoimentos .depos-hd, .js-reveal .wp-block-tnm-depoimentos .depo, .js-reveal .wp-block-tnm-cta .cta-head, .js-reveal .wp-block-tnm-cta .cta-btns, .js-reveal .wp-block-tnm-cta2 .cta-head, .js-reveal .wp-block-tnm-cta2 .cta-btns, .js-reveal .wp-block-tnm-proposta .prop-intro, .js-reveal .wp-block-tnm-proposta .prop-grid, .js-reveal .wp-block-tnm-programacao .prog-intro, .js-reveal .wp-block-tnm-programacao .prog-list, .js-reveal .wp-block-tnm-programacao .prog-note, .js-reveal .wp-block-tnm-galeria-cultural .gal-txt, .js-reveal .wp-block-tnm-galeria-cultural .gal-photos, .js-reveal .wp-block-tnm-locacao .loc-col, .js-reveal .wp-block-tnm-locacao .loc-img, .js-reveal .wp-block-tnm-intro-band .intro-stat, .js-reveal .wp-block-tnm-intro-band .intro-txt, .js-reveal .wp-block-tnm-professores .kicker, .js-reveal .wp-block-tnm-professores .sec-h, .js-reveal .wp-block-tnm-professores .prof-card, .js-reveal .wp-block-tnm-team-note .tn-qt, .js-reveal .wp-block-tnm-team-note .tn-txt, .js-reveal .wp-block-tnm-metodologia .kicker, .js-reveal .wp-block-tnm-metodologia .sec-h, .js-reveal .wp-block-tnm-metodologia .m-card { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; } .js-reveal .is-revealed { opacity: 1 !important; transform: none !important; } /* ============================================================ FOOTER ============================================================ */ /* fundo/padding numa classe (vale no editor e no site, mesmo sem o elemento