/* ===================================================================== aparencia.css — eixos de variação Sete eixos independentes, aplicados como classes no . Cada um mexe só nas variáveis do que lhe diz respeito, por isso combinam-se livremente sem se estorvarem. 8 modelos × 3 densidades × 3 cantos × 4 botões × 4 títulos × 4 cartões × 3 fundos = mais de 13 mil combinações. Escolhem-se em Administração → Aparência. ===================================================================== */ /* --------------------------------------------------------------------- DENSIDADE — quanto respira o site --------------------------------------------------------------------- */ .d-compacta{ --sec-y:clamp(38px,5vw,64px); --gap:clamp(12px,1.6vw,20px); --escala:.94; } .d-normal{ --sec-y:clamp(56px,8vw,110px); --gap:clamp(18px,2.4vw,32px); --escala:1; } .d-ampla{ --sec-y:clamp(80px,11vw,170px); --gap:clamp(26px,3.4vw,48px); --escala:1.06; } .d-compacta,.d-normal,.d-ampla{font-size:calc(1rem * var(--escala))} .d-compacta .sec,.d-normal .sec,.d-ampla .sec{padding-top:var(--sec-y);padding-bottom:var(--sec-y)} .d-compacta .grelha,.d-normal .grelha,.d-ampla .grelha{gap:var(--gap)} .d-compacta .cabeca{margin-bottom:calc(var(--gap) * 1.1)} .d-ampla .cabeca{margin-bottom:calc(var(--gap) * 1.6)} /* --------------------------------------------------------------------- CANTOS — o quanto as formas são arredondadas --------------------------------------------------------------------- */ .r-retos{--raio:0px;--raio-s:0px;--raio-btn:0px;--raio-img:0px} .r-suaves{--raio:14px;--raio-s:10px;--raio-btn:10px;--raio-img:12px} .r-redondos{--raio:26px;--raio-s:18px;--raio-btn:100px;--raio-img:22px} .r-retos img,.r-suaves img,.r-redondos img{border-radius:var(--raio-img)} .r-retos .hero img,.r-suaves .hero img,.r-redondos .hero img, .r-retos .hero-slide .fundo,.r-suaves .hero-slide .fundo,.r-redondos .hero-slide .fundo{border-radius:0} /* --------------------------------------------------------------------- BOTÕES — o mesmo botão, quatro personalidades --------------------------------------------------------------------- */ .b-solido .btn{border-radius:var(--raio-btn)} .b-contorno .btn{background:transparent;color:var(--c1);border:1.5px solid var(--c1); border-radius:var(--raio-btn)} .b-contorno .btn:hover{background:var(--c1);color:#fff} .b-contorno .btn-ouro{color:var(--c3);border-color:var(--c3);background:transparent} .b-contorno .btn-ouro:hover{background:var(--c3);color:#20180a} .b-contorno .sec-escura .btn{color:#fff;border-color:rgba(255,255,255,.55)} .b-contorno .sec-escura .btn:hover{background:#fff;color:var(--c2)} .b-pilula .btn{border-radius:100px;padding-left:1.9em;padding-right:1.9em} .b-bloco .btn{border-radius:0;letter-spacing:.1em;text-transform:uppercase; font-size:.78rem;font-weight:800;padding:1.05em 2em} /* --------------------------------------------------------------------- TÍTULOS — o tratamento dos cabeçalhos de secção --------------------------------------------------------------------- */ .t-maiusculas .cabeca h2,.t-maiusculas .sec > .env > h2{ text-transform:uppercase;letter-spacing:.04em;font-size:clamp(1.3rem,2.6vw,2.1rem)} .t-traco .cabeca h2::after,.t-traco .sec > .env > h2::after{ content:"";display:block;width:56px;height:3px;background:var(--c3); margin:16px 0 0;border-radius:2px} .t-traco .cabeca.centro h2::after{margin-left:auto;margin-right:auto} .t-grandes .cabeca h2,.t-grandes .sec > .env > h2{ font-size:clamp(2rem,5vw,3.6rem);letter-spacing:-.03em;line-height:1.02} .t-grandes .cabeca .chamada{font-size:1.08rem} /* --------------------------------------------------------------------- CARTÕES — como se destacam do fundo --------------------------------------------------------------------- */ .c-sombra .serv,.c-sombra .produto,.c-sombra .ficha,.c-sombra .doc,.c-sombra .obito, .c-sombra .cartao{box-shadow:0 14px 40px -28px rgba(9,24,18,.55);border:1px solid var(--linha)} .c-linha .serv,.c-linha .produto,.c-linha .ficha,.c-linha .doc,.c-linha .obito, .c-linha .cartao{box-shadow:none;border:1.5px solid var(--linha)} .c-linha .serv:hover,.c-linha .produto:hover,.c-linha .ficha:hover{border-color:var(--c1);transform:none} .c-liso .serv,.c-liso .produto,.c-liso .ficha,.c-liso .doc,.c-liso .obito, .c-liso .cartao{box-shadow:none;border:0;background:transparent} .c-liso .produto .produto-corpo,.c-liso .ficha .ficha-corpo{padding-left:0;padding-right:0} .c-liso .serv:hover,.c-liso .produto:hover,.c-liso .ficha:hover{transform:none;box-shadow:none} .c-liso .produto-img,.c-liso .ficha-img{border-radius:var(--raio-img);overflow:hidden} .c-elevado .serv,.c-elevado .produto,.c-elevado .ficha,.c-elevado .doc,.c-elevado .obito, .c-elevado .cartao{box-shadow:0 26px 60px -30px rgba(9,24,18,.55),0 3px 10px -6px rgba(9,24,18,.3); border:0} .c-elevado .serv:hover,.c-elevado .produto:hover,.c-elevado .ficha:hover{ transform:translateY(-6px);box-shadow:0 40px 80px -34px rgba(9,24,18,.6)} /* --------------------------------------------------------------------- FUNDOS — o ritmo claro/escuro das secções --------------------------------------------------------------------- */ .f-claro .sec-areia,.f-claro .sec-papel{background:var(--papel,#fff)} .f-claro .sec:nth-of-type(even){background:var(--fundo)} .f-faixas .sec-areia{background:var(--c2);color:#e6ece7} .f-faixas .sec-areia h2,.f-faixas .sec-areia h3{color:#fff} .f-faixas .sec-areia .olho{color:var(--c4)} .f-faixas .sec-areia p{color:#c6d2c8} /* --------------------------------------------------------------------- ANIMAÇÃO — quanto se mexe ao aparecer --------------------------------------------------------------------- */ .a-nenhuma .rev{opacity:1!important;transform:none!important;transition:none!important} .a-subtil .rev{transition:opacity .6s ease,transform .6s ease} .a-marcada .rev{transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)} .a-marcada .rev:not(.visivel){transform:translateY(34px) scale(.985)} .a-marcada .rev-d1{transition-delay:.06s} .a-marcada .rev-d2{transition-delay:.16s} .a-marcada .rev-d3{transition-delay:.26s} /* Quem pediu menos movimento no sistema tem sempre a última palavra */ @media (prefers-reduced-motion:reduce){ .rev{opacity:1!important;transform:none!important;transition:none!important} }