/* ===================================================================== C. PASCARELLI — maquete v1 Paleta extraida da logo: azul #1E3A5F · bege #CFC7B6 · creme #FFFCF3 · ouro #96642A ===================================================================== */ :root{ --azul: #1E3A5F; --azul-fundo: #172E4C; --azul-claro: #2C5080; --bege: #CFC7B6; --bege-forte: #B9AF9A; --creme: #FFFCF3; --creme-2: #F7F2E6; --ouro: #96642A; --ouro-claro: #B98444; --ocre: #96642A; /* fundo das secoes a partir da 2a pagina */ --ocre-fundo: #7A5122; /* rodape */ --tinta: #1E3A5F; --texto: #4A5568; --texto-claro: rgba(var(--creme-rgb),.72); /* as mesmas cores em r,g,b — para transparências (sombras, véus, linhas). O editor de cores reescreve junto com a cor. */ --azul-rgb: 30,58,95; --azul-fundo-rgb: 23,46,76; --creme-rgb: 255,252,243; --bege-rgb: 207,199,182; --ouro-rgb: 150,100,42; --escuro-quente-rgb: 24,14,4; /* sombras e véus das seções ocre */ --brilho-rgb: 232,186,124; /* brilho no topo das páginas */ --linha: rgba(var(--azul-rgb),.12); --linha-clara: rgba(var(--bege-rgb),.22); --s1: 0 1px 2px rgba(var(--azul-fundo-rgb),.04), 0 4px 10px rgba(var(--azul-fundo-rgb),.05); --s2: 0 2px 6px rgba(var(--azul-fundo-rgb),.05), 0 14px 34px rgba(var(--azul-fundo-rgb),.09); --s3: 0 6px 18px rgba(var(--azul-fundo-rgb),.08), 0 30px 70px rgba(var(--azul-fundo-rgb),.14); --s4: 0 10px 30px rgba(var(--azul-fundo-rgb),.12), 0 48px 110px rgba(var(--azul-fundo-rgb),.20); --s-escura: 0 20px 60px rgba(8,18,32,.45); --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif; --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif; --header-h: 92px; --mx: clamp(24px, 6vw, 110px); --ease: cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top:var(--header-h); -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--creme); color:var(--texto); font-family:var(--sans); font-size:14px; font-weight:300; line-height:1.72; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } ::selection{ background:var(--bege); color:var(--azul); } h1,h2,h3,h4{ font-family:var(--serif); font-weight:300; color:var(--tinta); margin:0; line-height:1.14; } h1{ font-size:clamp(1.9rem,4vw,3.1rem); } h2{ font-size:clamp(1.55rem,2.9vw,2.3rem); } h3{ font-size:clamp(1.08rem,1.5vw,1.32rem); } p{ margin:0 0 1.15em; } /* ---------- utilitarios ---------- */ .wrap{ width:100%; max-width:1180px; margin-inline:auto; padding-inline:var(--mx); } .secao{ padding:clamp(62px,7.2vw,112px) 0; position:relative; } .olho{ font-family:var(--sans); font-size:.62rem; font-weight:400; letter-spacing:.3em; text-transform:uppercase; color:var(--ouro); display:flex; align-items:center; gap:12px; margin-bottom:20px; } .olho > cp-enfeite[data-pos="depois"]{ content:""; height:1px; width:44px; background:currentColor; opacity:.45; } .olho--claro{ color:var(--bege); } .lead{ font-family:var(--serif); font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:1.5; color:var(--tinta); } .fio{ height:1px; background:var(--linha); border:0; margin:0; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } .btn{ display:inline-flex; align-items:center; gap:12px; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; font-weight:400; padding:13px 26px; border:1px solid var(--azul); color:var(--azul); background:transparent; border-radius:2px; transition:.45s var(--ease); box-shadow:var(--s1); } .btn:hover{ background:var(--azul); color:var(--creme); box-shadow:var(--s3); transform:translateY(-2px); } .btn--claro{ border-color:var(--linha-clara); color:var(--bege); } .btn--claro:hover{ background:var(--bege); color:var(--azul); border-color:var(--bege); } .btn .seta{ transition:transform .45s var(--ease); } .btn:hover .seta{ transform:translateX(5px); } /* ===================================================================== HEADER ===================================================================== */ .header{ position:fixed; inset:0 0 auto 0; z-index:90; height:var(--header-h); background:var(--azul); color:var(--bege); display:flex; align-items:center; box-shadow:0 1px 0 rgba(var(--bege-rgb),.10), 0 18px 46px rgba(var(--azul-fundo-rgb),.30); transform:translateY(-100%); transition:transform .6s var(--ease); } .header.is-visivel{ transform:none; } .header--fixo{ transform:none; } .header__in{ width:100%; max-width:1440px; margin-inline:auto; padding-inline:var(--mx); display:flex; align-items:center; justify-content:space-between; gap:30px; } .header__logo{ display:flex; align-items:center; transition:opacity .4s var(--ease); } .header__logo:hover{ opacity:.82; } .header__logo img{ height:46px; width:auto; } .nav{ display:flex; align-items:center; gap:clamp(20px,2.6vw,42px); } .nav a{ position:relative; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; font-weight:300; color:var(--bege); opacity:.82; padding:6px 0; transition:opacity .3s; } .nav a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--ouro-claro); transition:width .45s var(--ease); } .nav a:hover{ opacity:1; } .nav a:hover::after,.nav a.is-ativo::after{ width:100%; } .nav a.is-ativo{ opacity:1; } .menu-btn{ display:none; width:34px; height:24px; position:relative; } .menu-btn span{ position:absolute; left:0; right:0; height:1px; background:var(--bege); transition:.4s var(--ease); } .menu-btn span:nth-child(1){ top:4px; } .menu-btn span:nth-child(2){ top:12px; } .menu-btn span:nth-child(3){ top:20px; } body.menu-on .menu-btn span:nth-child(1){ transform:translateY(8px) rotate(45deg); } body.menu-on .menu-btn span:nth-child(2){ opacity:0; } body.menu-on .menu-btn span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); } .menu-mobile{ position:fixed; inset:0; z-index:85; background:var(--azul); display:flex; flex-direction:column; justify-content:center; gap:8px; padding:0 var(--mx); opacity:0; visibility:hidden; transition:.5s var(--ease); } body.menu-on .menu-mobile{ opacity:1; visibility:visible; } .menu-mobile a{ font-family:var(--serif); font-size:1.7rem; color:var(--bege); padding:10px 0; border-bottom:1px solid var(--linha-clara); } .menu-mobile a span{ font-family:var(--sans); font-size:.58rem; letter-spacing:.24em; color:var(--ouro-claro); margin-right:16px; } /* ===================================================================== 1 · CAPA ===================================================================== */ .capa{ height:100svh; min-height:520px; display:grid; grid-template-columns:2fr 1fr; overflow:hidden; } .capa__esq{ background:var(--azul); position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:clamp(18px,3.2vh,56px) clamp(20px,4vw,64px); gap:clamp(14px,2.6vh,34px); } .capa__esq > cp-enfeite[data-pos="depois"]{ content:""; position:absolute; inset:auto -20% -30% -20%; height:60%; background:radial-gradient(60% 100% at 50% 100%, rgba(var(--ouro-rgb),.20), transparent 70%); pointer-events:none; } .capa__foto{ position:relative; height:clamp(230px,72vh,820px); width:auto; aspect-ratio:3/4; max-width:100%; overflow:hidden; flex:0 1 auto; border-radius:2px; box-shadow:var(--s-escura); background:var(--azul-fundo); } .capa__foto img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; transform:scale(1.02); transition:transform 1.4s var(--ease); } .capa__foto:hover img{ transform:scale(1.06); } .capa__foto > cp-enfeite[data-pos="depois"]{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top, rgba(var(--azul-fundo-rgb),.55), rgba(var(--azul-fundo-rgb),0) 45%); box-shadow:inset 0 0 0 1px rgba(var(--bege-rgb),.18); } .capa__marca{ position:relative; text-align:center; z-index:1; } .capa__marca img{ height:clamp(42px,9.6vh,142px); width:auto; margin-inline:auto; } .capa__cargo{ margin-top:clamp(8px,1.6vh,18px); font-size:.58rem; letter-spacing:.32em; text-transform:uppercase; color:var(--bege); opacity:.68; } .capa__dir{ background:var(--creme); display:flex; flex-direction:column; justify-content:center; padding:clamp(26px,5vh,90px) var(--mx); position:relative; overflow:hidden; } .capa__dir > cp-enfeite[data-pos="antes"]{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background:linear-gradient(to bottom, transparent, var(--linha), transparent); } .capa__titulo{ margin-bottom:10px; letter-spacing:-.01em; font-size:clamp(1.9rem,min(5.6vw,8.2vh),4.4rem); } .capa__sub{ font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ouro); margin-bottom:clamp(16px,3.4vh,56px); } .sumario{ list-style:none; margin:0; padding:0; border-top:1px solid var(--linha); max-width:560px; } .sumario li{ border-bottom:1px solid var(--linha); } .sumario a{ display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:2px 12px; padding:clamp(10px,1.9vh,24px) 4px; transition:.45s var(--ease); position:relative; } .sumario a::before{ content:""; position:absolute; inset:0 -22px; background:var(--creme-2); border-radius:2px; opacity:0; transform:scaleX(.96); transition:.45s var(--ease); box-shadow:var(--s2); z-index:0; } .sumario a:hover::before{ opacity:1; transform:none; } .sumario a > *{ position:relative; z-index:1; } .sumario .num{ font-size:.6rem; letter-spacing:.2em; color:var(--ouro); min-width:26px; } .sumario .nome{ font-family:var(--serif); font-size:clamp(1.05rem,min(2.1vw,3vh),1.6rem); color:var(--tinta); transition:transform .45s var(--ease); } .sumario a:hover .nome{ transform:translateX(10px); } .sumario .desc{ grid-column:2 / 3; grid-row:2; font-size:.62rem; letter-spacing:.08em; color:var(--texto); opacity:.58; margin-top:1px; } .sumario .mais{ grid-column:3; grid-row:1 / 3; align-self:center; justify-self:end; color:var(--ouro); opacity:0; transform:translateX(-8px); transition:.45s var(--ease); } .sumario a:hover .mais{ opacity:1; transform:none; } .capa__rodape{ margin-top:clamp(14px,3vh,54px); display:flex; flex-wrap:wrap; gap:6px 28px; font-size:.66rem; letter-spacing:.12em; color:var(--texto); opacity:.75; } .capa__rodape a:hover{ color:var(--ouro); } .rolar{ position:absolute; left:var(--mx); bottom:clamp(12px,2.4vh,34px); display:flex; align-items:center; gap:12px; font-size:.56rem; letter-spacing:.24em; text-transform:uppercase; color:var(--texto); opacity:.55; } .rolar i{ display:block; width:44px; height:1px; background:currentColor; transform-origin:left; animation:rolar 2.4s var(--ease) infinite; } @keyframes rolar{ 0%{transform:scaleX(0)} 55%{transform:scaleX(1)} 100%{transform:scaleX(0); transform-origin:right} } /* ===================================================================== 2 · CARROSSEL — tela cheia, full-bleed, navegacao por passos ===================================================================== */ .carrossel{ position:relative; z-index:2; height:100svh; min-height:520px; overflow:hidden; background:var(--ocre); color:var(--bege); box-shadow:0 26px 70px -18px rgba(var(--escuro-quente-rgb),.55); } /* a linha de sombra do pe do carrossel */ .carrossel > cp-enfeite[data-pos="depois"]{ content:""; position:absolute; inset:auto 0 0 0; height:1px; z-index:6; background:linear-gradient(to right, transparent, rgba(var(--creme-rgb),.42) 22%, rgba(var(--creme-rgb),.42) 78%, transparent); box-shadow:0 -14px 40px rgba(var(--escuro-quente-rgb),.55); } .carrossel__palco{ position:absolute; inset:0; } /* cabecalho de bloco (titulo a esquerda, acao a direita) */ .bloco-topo{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; position:relative; } .slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity 1s var(--ease); } .slide.is-ativo{ opacity:1; visibility:visible; } .slide__fundo{ position:absolute; inset:0; transform:scale(1.07); transition:transform 9s linear; } .slide.is-ativo .slide__fundo{ transform:scale(1); } .slide__scrim{ position:absolute; inset:0; background: linear-gradient(98deg, rgba(var(--escuro-quente-rgb),.90) 0%, rgba(var(--escuro-quente-rgb),.72) 36%, rgba(var(--escuro-quente-rgb),.26) 72%, rgba(var(--escuro-quente-rgb),.10) 100%), linear-gradient(to top, rgba(var(--escuro-quente-rgb),.58), rgba(var(--escuro-quente-rgb),0) 40%); } .slide__conteudo{ position:relative; height:100%; display:flex; flex-direction:column; justify-content:center; padding-top:var(--header-h); padding-bottom:clamp(92px,11.5vh,132px); text-shadow:0 1px 20px rgba(var(--escuro-quente-rgb),.6); } .slide__conteudo > *{ max-width:min(620px,54vw); } .slide__num{ font-family:var(--serif); font-size:clamp(1.4rem,2.4vw,2rem); color:rgba(var(--creme-rgb),.4); line-height:1; margin:0 0 12px; } .slide__cat{ font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ouro-claro); margin-bottom:14px; } .slide h3{ color:var(--creme); font-size:clamp(1.5rem,3vw,2.5rem); margin-bottom:16px; } .slide__resumo{ color:rgba(var(--creme-rgb),.88); max-width:min(52ch,50vw); } .slide__meta{ display:flex; gap:20px; flex-wrap:wrap; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(var(--creme-rgb),.66); margin:14px 0 22px; } .carrossel__olho{ position:absolute; inset:calc(var(--header-h) + clamp(20px,4vh,42px)) 0 auto 0; z-index:4; } .carrossel__barra{ position:absolute; inset:auto 0 0 0; z-index:5; padding-bottom:clamp(22px,3.6vh,40px); } .passos{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(10px,2vw,30px); } .passo{ position:relative; display:flex; align-items:baseline; gap:10px; min-width:0; text-align:left; padding:14px 0 0; border-top:1px solid rgba(var(--creme-rgb),.24); opacity:.5; transition:opacity .5s var(--ease); } .passo:hover{ opacity:.88; } .passo.is-ativo{ opacity:1; } .passo__num{ font-size:.56rem; letter-spacing:.2em; color:var(--ouro-claro); } .passo__rot{ font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--creme); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .passo__prog{ position:absolute; left:0; top:-1px; height:1px; width:0; background:var(--creme); } .passo.is-ativo .passo__prog{ animation:passo 8s linear forwards; } @keyframes passo{ from{ width:0 } to{ width:100% } } /* ===================================================================== 3 · SOBRE ===================================================================== */ .sobre__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(40px,6vw,96px); align-items:center; } .sobre__foto{ position:relative; } .sobre__foto img{ border-radius:2px; box-shadow:var(--s4); position:relative; z-index:1; } .sobre__foto > cp-enfeite[data-pos="antes"]{ content:""; position:absolute; inset:26px -26px -26px 26px; border:1px solid var(--bege-forte); opacity:.55; border-radius:2px; } .sobre__citacao{ margin-top:clamp(30px,4vw,44px); padding-left:26px; border-left:1px solid var(--ouro); font-family:var(--serif); font-size:1.08rem; line-height:1.5; color:var(--tinta); } .dados{ list-style:none; padding:0; margin:clamp(34px,4vw,50px) 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } .dados li{ border-top:1px solid var(--linha); padding-top:16px; } .dados dt,.dados .rot{ font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ouro); margin-bottom:8px; } .dados .val{ font-family:var(--serif); font-size:1rem; color:var(--tinta); line-height:1.35; } /* ===================================================================== 4 · PROJETOS / CARDS ===================================================================== */ .secao--creme2{ background:var(--creme-2); } .grid-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(288px,1fr)); gap:clamp(24px,3vw,40px); } .card{ background:var(--creme); border-radius:2px; overflow:hidden; box-shadow:var(--s2); display:flex; flex-direction:column; transition:.55s var(--ease); position:relative; } .card:hover{ transform:translateY(-8px) scale(1.022); box-shadow:var(--s4); } .card__media{ aspect-ratio:16/11; position:relative; overflow:hidden; } .card__media > cp-enfeite[data-pos="depois"]{ content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(var(--azul-fundo-rgb),.05), rgba(var(--azul-fundo-rgb),.35)); } .card__tag{ position:absolute; z-index:2; left:18px; top:18px; padding:7px 14px; background:rgba(var(--creme-rgb),.92); font-size:.55rem; letter-spacing:.22em; text-transform:uppercase; color:var(--azul); box-shadow:var(--s1); } .card__corpo{ padding:clamp(24px,2.4vw,32px); display:flex; flex-direction:column; flex:1; } .card__corpo h3{ margin-bottom:12px; } .card__corpo p{ font-size:.88rem; } .card__pe{ margin-top:auto; padding-top:20px; border-top:1px solid var(--linha); display:flex; justify-content:space-between; align-items:center; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ouro); } .card__pe .seta{ transition:transform .45s var(--ease); } .card:hover .card__pe .seta{ transform:translateX(6px); } /* texturas de apoio (placeholders elegantes ate entrarem as imagens reais) */ .tex-1{ background:linear-gradient(140deg,var(--azul),var(--azul-claro) 55%,var(--azul-fundo)); } .tex-2{ background:linear-gradient(140deg,var(--ouro),var(--ouro-claro) 50%,#7C5023); } .tex-3{ background:linear-gradient(140deg,var(--bege),#EDE7DA 55%,var(--bege-forte)); } .tex-4{ background:linear-gradient(140deg,var(--azul-fundo),#3A6491 60%,var(--azul)); } .tex-5{ background:linear-gradient(140deg,#6B7D93,var(--bege-forte) 62%,#46596F); } .tex-6{ background:linear-gradient(140deg,var(--bege-forte),var(--ouro) 70%,#5E3F1B); } .tex-marca{ position:relative; } .tex-marca > cp-enfeite[data-pos="antes"]{ content:""; position:absolute; inset:0; z-index:1; opacity:.16; background:url("../img/simbolo-creme.png") no-repeat center/auto 62%; } /* ===================================================================== 5 · GALERIA ===================================================================== */ .galeria{ display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:clamp(112px,12.2vw,172px); gap:clamp(12px,1.4vw,20px); } .gal{ position:relative; overflow:hidden; border-radius:2px; box-shadow:var(--s2); transition:.55s var(--ease); } .gal:hover{ box-shadow:var(--s4); transform:translateY(-5px) scale(1.012); } .gal img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); } .gal:hover img{ transform:scale(1.06); } .gal figcaption{ position:absolute; inset:auto 0 0 0; padding:18px 20px; z-index:2; background:linear-gradient(to top, rgba(var(--azul-fundo-rgb),.86), transparent); color:var(--creme); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; opacity:0; transform:translateY(8px); transition:.45s var(--ease); } .gal:hover figcaption{ opacity:1; transform:none; } .gal--hero{ grid-column:1 / span 8; grid-row:span 2; } .gal--foto{ grid-column:9 / span 4; grid-row:span 2; } .gal--p{ grid-column:span 3; grid-row:span 1; } /* ===================================================================== 6 · CONTATO + RODAPE ===================================================================== */ .contato{ background:var(--ocre); color:var(--bege); position:relative; overflow:hidden; } .contato > cp-enfeite[data-pos="antes"]{ content:""; position:absolute; left:-12%; bottom:-40%; width:60vw; height:60vw; background:radial-gradient(circle, rgba(var(--creme-rgb),.16), transparent 62%); } .contato__grid{ display:grid; grid-template-columns:1fr .9fr; gap:clamp(40px,6vw,90px); position:relative; } .contato h2{ color:var(--creme); margin-bottom:22px; } .contato p{ color:var(--texto-claro); max-width:46ch; } .canais{ list-style:none; padding:0; margin:clamp(30px,4vw,44px) 0 0; } .canais li{ border-top:1px solid var(--linha-clara); } .canais a,.canais span{ display:flex; align-items:baseline; gap:18px; padding:20px 0; transition:.4s var(--ease); } .canais a:hover{ padding-left:10px; } .canais .rot{ font-size:.56rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ouro-claro); min-width:86px; } .canais .val{ font-family:var(--serif); font-size:clamp(1.05rem,1.6vw,1.3rem); color:var(--creme); } .form{ background:rgba(var(--creme-rgb),.07); border:1px solid var(--linha-clara); padding:clamp(28px,3vw,40px); border-radius:2px; box-shadow:var(--s-escura); } .campo{ margin-bottom:22px; } .campo label{ display:block; font-size:.56rem; letter-spacing:.24em; text-transform:uppercase; color:var(--bege); opacity:.7; margin-bottom:9px; } .campo input,.campo textarea{ width:100%; background:transparent; border:0; border-bottom:1px solid var(--linha-clara); color:var(--creme); font-family:var(--sans); font-size:.9rem; font-weight:300; padding:10px 0; transition:.4s var(--ease); } .campo textarea{ resize:vertical; min-height:92px; } .campo input:focus,.campo textarea:focus{ outline:0; border-color:var(--ouro-claro); } .form .aviso{ font-size:.64rem; letter-spacing:.06em; color:var(--bege); opacity:.55; margin:14px 0 0; } .rodape{ background:var(--azul); color:var(--bege); padding:clamp(60px,7vw,90px) 0 32px; } .rodape__grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:clamp(34px,5vw,70px); align-items:start; } .rodape__logo img{ height:54px; margin-bottom:24px; } .rodape p{ color:var(--texto-claro); font-size:.86rem; max-width:40ch; } .rodape h4{ color:var(--bege); font-family:var(--sans); font-size:.58rem; letter-spacing:.26em; text-transform:uppercase; margin-bottom:20px; opacity:.75; } .rodape ul{ list-style:none; padding:0; margin:0; display:grid; gap:12px; } .rodape ul a{ font-size:.83rem; color:var(--texto-claro); transition:.3s; } .rodape ul a:hover{ color:var(--creme); } .rodape__base{ margin-top:clamp(44px,5vw,64px); padding-top:26px; border-top:1px solid var(--linha-clara); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.64rem; letter-spacing:.1em; color:var(--bege); opacity:.6; } /* --------------------------------------------------------------------- Secoes ocre: recalibra os tokens claros para manter contraste e troca o dourado de destaque por creme (dourado sobre ocre some). --------------------------------------------------------------------- */ .carrossel, .contato, .pagina-topo{ --bege: #F6EFE1; --bege-forte: #E6DAC4; --ouro-claro: #FFF3DF; --linha-clara: rgba(var(--creme-rgb),.26); --texto-claro: rgba(var(--creme-rgb),.82); --s-escura: 0 20px 60px rgba(var(--escuro-quente-rgb),.40); } .carrossel .slide__cat, .contato .canais .rot, .pagina-topo .migalha{ opacity:.78; } .btn--claro:hover{ background:var(--creme); color:var(--ocre); border-color:var(--creme); } /* ===================================================================== PAGINA TRABALHOS ===================================================================== */ .pagina-topo{ background:var(--ocre); color:var(--bege); padding:calc(var(--header-h) + clamp(70px,8vw,110px)) 0 clamp(60px,7vw,96px); position:relative; overflow:hidden; } .pagina-topo > cp-enfeite[data-pos="antes"]{ content:""; position:absolute; right:-10%; top:-40%; width:56vw; height:56vw; background:radial-gradient(circle, rgba(var(--brilho-rgb),.22), transparent 64%); } .pagina-topo h1{ color:var(--creme); position:relative; } .pagina-topo p{ color:var(--texto-claro); max-width:58ch; margin-top:18px; position:relative; } .migalha{ font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--bege); opacity:.6; margin-bottom:22px; position:relative; } .migalha a:hover{ color:var(--ouro-claro); } .filtros{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(34px,4vw,52px); } .filtros button{ font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; padding:9px 18px; border:1px solid var(--linha); color:var(--texto); border-radius:2px; transition:.4s var(--ease); background:var(--creme); } .filtros button:hover{ box-shadow:var(--s2); transform:translateY(-2px); } .filtros button.is-ativo{ background:var(--azul); color:var(--bege); border-color:var(--azul); box-shadow:var(--s2); } .lista-trab{ display:grid; gap:clamp(18px,2vw,26px); } .trab{ display:grid; grid-template-columns:150px 1fr auto; gap:clamp(20px,3vw,44px); align-items:center; background:var(--creme); padding:clamp(20px,2.2vw,28px); border-radius:2px; box-shadow:var(--s1); transition:.5s var(--ease); } .trab:hover{ box-shadow:var(--s3); transform:translateY(-4px) scale(1.008); } .trab__media{ aspect-ratio:4/3; border-radius:2px; overflow:hidden; box-shadow:var(--s1); } .trab__cat{ font-size:.56rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ouro); margin-bottom:10px; } .trab h3{ font-size:clamp(1.05rem,1.5vw,1.3rem); margin-bottom:9px; } .trab p{ font-size:.87rem; margin:0; max-width:64ch; } .trab__meta{ font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--texto); opacity:.6; margin-top:12px; } .trab__acao{ font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--azul); white-space:nowrap; display:flex; align-items:center; gap:10px; } .trab:hover .trab__acao .seta{ transform:translateX(6px); } .trab__acao .seta{ transition:transform .45s var(--ease); } /* ===================================================================== ANIMACAO DE ENTRADA ===================================================================== */ .rv{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); } .rv.is-vis{ opacity:1; transform:none; } .rv[data-d="1"]{ transition-delay:.09s } .rv[data-d="2"]{ transition-delay:.18s } .rv[data-d="3"]{ transition-delay:.27s } .rv[data-d="4"]{ transition-delay:.36s } /* ===================================================================== RESPONSIVO ===================================================================== */ @media (max-width:1080px){ .sobre__grid,.contato__grid{ grid-template-columns:1fr; } .slide__conteudo > *{ max-width:none; } .slide__resumo{ max-width:56ch; } .rodape__grid{ grid-template-columns:1fr 1fr; } .rodape__logo{ grid-column:1/-1; } } @media (max-width:900px){ :root{ --header-h:74px; } .header__logo img{ height:36px; } .nav{ display:none; } .menu-btn{ display:block; } .capa{ grid-template-columns:1fr; height:auto; min-height:100svh; overflow:visible; } .passos{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px; } .passo__rot{ font-size:.56rem; } .slide__scrim{ background:linear-gradient(to top, rgba(var(--escuro-quente-rgb),.92) 30%, rgba(var(--escuro-quente-rgb),.55) 70%, rgba(var(--escuro-quente-rgb),.35) 100%); } .capa__esq{ padding-top:clamp(56px,10vw,90px); } .capa__foto{ height:clamp(200px,36svh,380px); } .capa__marca img{ height:clamp(34px,6.4svh,78px); } .capa__dir{ padding-block:clamp(54px,9vw,80px); } .capa__dir > cp-enfeite[data-pos="antes"]{ display:none; } .rolar{ display:none; } .dados{ grid-template-columns:1fr 1fr; } .galeria{ grid-template-columns:repeat(6,1fr); } .gal--hero{ grid-column:1 / span 6; } .gal--foto{ grid-column:auto / span 3; } .gal--p{ grid-column:span 3; } .trab{ grid-template-columns:120px 1fr; } .trab__acao{ grid-column:2; justify-self:start; } } @media (max-width:560px){ .dados{ grid-template-columns:1fr; } .rodape__grid{ grid-template-columns:1fr; } .galeria{ grid-template-columns:1fr 1fr; grid-auto-rows:33vw; } .gal--hero{ grid-column:1 / span 2; } .gal--foto{ grid-column:auto / span 2; } .gal--p{ grid-column:span 1; grid-row:span 1; } .trab{ grid-template-columns:1fr; } .trab__acao{ grid-column:1; } .bloco-topo{ flex-direction:column; align-items:flex-start; } .passos{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } } @media (max-height:700px){ .rolar{ display:none; } } @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition-duration:.01ms !important; } html{ scroll-behavior:auto; } .rv{ opacity:1; transform:none; } } /* ===================================================================== TOGGLE DE IDIOMA (bandeiras redondas) ===================================================================== */ .lang{ display:flex; align-items:center; gap:10px; margin-left:clamp(8px,1.4vw,20px); } .lang__b{ width:30px; height:30px; border-radius:50%; overflow:hidden; display:grid; place-items:center; opacity:.42; filter:saturate(.55); transition:.45s var(--ease); box-shadow:0 0 0 1px rgba(var(--bege-rgb),.30), var(--s1); } .lang__b svg{ width:100%; height:100%; display:block; border-radius:50%; } .lang__b:hover{ opacity:.9; transform:translateY(-1px); } .lang__b.is-ativo{ opacity:1; filter:none; box-shadow:0 0 0 1px var(--ouro-claro), 0 0 0 4px rgba(var(--ouro-rgb),.20), var(--s2); } .lang--capa{ position:absolute; top:clamp(22px,4vw,44px); right:var(--mx); z-index:3; } .lang--capa .lang__b{ box-shadow:0 0 0 1px rgba(var(--azul-rgb),.16), var(--s1); } .lang--capa .lang__b.is-ativo{ box-shadow:0 0 0 1px var(--ouro), 0 0 0 4px rgba(var(--ouro-rgb),.14), var(--s2); } .lang--mobile{ margin:36px 0 0; } .lang--mobile .lang__b{ width:40px; height:40px; } /* menu mobile: numero + nome */ .menu-mobile a{ display:flex; align-items:baseline; } .menu-mobile a i{ font-style:normal; } /* preenchimento de midia (texturas e fotos) */ .preencher{ position:absolute; inset:0; } .card__media img,.gal .preencher,.trab__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .card__media img{ transition:transform 1s var(--ease); } .card:hover .card__media img{ transform:scale(1.07); } .gal img{ position:absolute; inset:0; } /* descricao do sumario (so em telas largas) */ /* ===================================================================== PAGINA SOBRE — percurso, temas e chamada final ===================================================================== */ .percurso{ list-style:none; margin:0; padding:0; border-top:1px solid var(--linha); counter-reset:p; } .percurso li{ display:grid; grid-template-columns:160px 1fr; gap:clamp(18px,3vw,44px); padding:clamp(20px,2.4vw,32px) 0; border-bottom:1px solid var(--linha); transition:.5s var(--ease); } .percurso li:hover{ background:var(--creme-2); box-shadow:var(--s1); } .percurso .ano{ font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ouro); padding-top:5px; } .percurso h3{ margin-bottom:5px; } .percurso .local{ font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--texto); opacity:.6; margin-bottom:11px; } .percurso p{ margin:0; max-width:64ch; font-size:.88rem; } .temas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(224px,1fr)); gap:clamp(16px,2vw,26px); } .tema{ background:var(--creme); border-radius:2px; padding:clamp(20px,2.2vw,28px); box-shadow:var(--s1); border-top:2px solid var(--ouro); transition:.5s var(--ease); } .tema:hover{ box-shadow:var(--s3); transform:translateY(-5px) scale(1.02); } .tema h3{ margin-bottom:9px; } .tema p{ margin:0; font-size:.85rem; } .cta{ background:var(--ocre); color:var(--bege); text-align:center; position:relative; overflow:hidden; } .cta > cp-enfeite[data-pos="antes"]{ content:""; position:absolute; left:50%; top:-60%; width:70vw; height:70vw; transform:translateX(-50%); background:radial-gradient(circle, rgba(var(--creme-rgb),.14), transparent 62%); pointer-events:none; } .cta h2{ color:var(--creme); margin-bottom:14px; position:relative; } .cta p{ color:var(--texto-claro); max-width:52ch; margin-inline:auto; position:relative; } .cta__acoes{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:clamp(24px,3vw,34px); position:relative; } /* meia-largura no mosaico da galeria completa */ .gal--m{ grid-column:span 6; grid-row:span 2; } /* ===================================================================== LIGHTBOX — pop-up de foto com zoom, arraste e navegação ===================================================================== */ .lightbox{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; background:rgba(var(--escuro-quente-rgb),.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); padding:clamp(66px,8vh,96px) clamp(54px,8vw,110px); opacity:0; transition:opacity .38s var(--ease); } .lightbox.is-aberto{ opacity:1; } /* sem isto o display:grid vence o [hidden] do navegador e o lightbox, invisivel, cobre a pagina inteira e bloqueia o header */ .lightbox[hidden]{ display:none; } .lightbox__fig{ margin:0; width:min(100%,1080px); max-height:100%; display:flex; flex-direction:column; gap:16px; } .lightbox__palco{ flex:1; min-height:0; display:grid; place-items:center; overflow:hidden; cursor:zoom-in; touch-action:none; } .lightbox.tem-zoom .lightbox__palco{ cursor:grab; } .lightbox.tem-zoom .lightbox__palco:active{ cursor:grabbing; } .lightbox__media{ position:relative; border-radius:3px; overflow:hidden; transform-origin:center; transition:transform .28s cubic-bezier(.22,.61,.36,1); box-shadow:0 40px 110px rgba(0,0,0,.6); opacity:0; animation:lb-entra .5s var(--ease) .04s forwards; } @keyframes lb-entra{ from{ opacity:0; transform:scale(.97) } to{ opacity:1 } } .lightbox.tem-zoom .lightbox__media{ transition:none; } .lightbox__media--tex{ width:min(100%, calc(58vh * 3 / 2)); aspect-ratio:3/2; } .lightbox__media img{ display:block; max-height:66vh; width:auto; max-width:100%; user-select:none; } .lightbox figcaption{ flex:0 0 auto; text-align:center; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--bege); } .lightbox figcaption i{ display:block; font-style:normal; letter-spacing:.05em; text-transform:none; font-family:var(--serif); font-size:1.02rem; color:var(--creme); margin-top:6px; } .lightbox__barra{ position:absolute; top:clamp(14px,2.2vw,26px); right:clamp(14px,2.2vw,26px); display:flex; align-items:center; gap:8px; z-index:2; } .lightbox__conta{ font-size:.6rem; letter-spacing:.2em; color:rgba(var(--creme-rgb),.6); margin-right:6px; } .lightbox__b{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(var(--creme-rgb),.24); color:var(--creme); font-size:1.05rem; line-height:1; display:grid; place-items:center; transition:.35s var(--ease); backdrop-filter:blur(6px); } .lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:46px; height:46px; border-radius:50%; border:1px solid rgba(var(--creme-rgb),.22); color:var(--creme); display:grid; place-items:center; transition:.35s var(--ease); backdrop-filter:blur(6px); } .lightbox__nav--ant{ left:clamp(12px,2.2vw,30px); } .lightbox__nav--prox{ right:clamp(12px,2.2vw,30px); } .lightbox--solo .lightbox__nav{ display:none; } .lightbox__b:hover,.lightbox__nav:hover{ background:var(--creme); color:rgb(var(--escuro-quente-rgb)); border-color:var(--creme); } body.lightbox-on{ overflow:hidden; } .galeria .gal{ cursor:zoom-in; } /* ===================================================================== PÁGINA DE LEITURA DO TRABALHO ===================================================================== */ .artigo__cat{ position:relative; font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ouro-claro); margin-bottom:14px; } .pagina-topo .artigo__meta{ font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(var(--creme-rgb),.7); margin-top:18px; } .artigo__secao{ padding-top:clamp(40px,5vw,70px); } .artigo__capa{ margin:0 0 clamp(34px,4.4vw,60px); } .artigo__foto{ position:relative; aspect-ratio:3/2; overflow:hidden; border-radius:2px; box-shadow:var(--s3); cursor:zoom-in; } .artigo__foto img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); } .artigo__foto:hover img{ transform:scale(1.03); } .artigo__capa figcaption{ margin-top:14px; font-size:.78rem; color:var(--texto); opacity:.7; max-width:62ch; } .artigo__corpo{ max-width:68ch; } .artigo__corpo p{ font-size:1rem; line-height:1.85; } .artigo__corpo .lead{ font-size:clamp(1.1rem,1.6vw,1.32rem); line-height:1.55; margin-bottom:1.4em; } .artigo__nav{ display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(16px,3vw,40px); align-items:start; margin-top:clamp(50px,6vw,84px); padding-top:clamp(24px,3vw,36px); border-top:1px solid var(--linha); } .artigo__ir{ display:block; transition:.4s var(--ease); } .artigo__ir .rot{ display:block; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ouro); } .artigo__ir .tit{ display:block; font-family:var(--serif); font-size:1.02rem; color:var(--tinta); margin-top:7px; max-width:26ch; } .artigo__ir--prox{ text-align:right; justify-self:end; } .artigo__ir--prox .tit{ margin-left:auto; } .artigo__ir:hover .tit{ color:var(--ouro); } @media (max-width:700px){ .artigo__nav{ grid-template-columns:1fr; gap:22px; } .artigo__ir--prox{ text-align:left; justify-self:start; } .artigo__ir--prox .tit{ margin-left:0; } .lightbox{ padding:64px 14px; } .lightbox__nav{ top:auto; bottom:16px; transform:none; } .lightbox__media img{ max-height:52vh; } } @media (max-width:700px){ .percurso li{ grid-template-columns:1fr; gap:8px; } .percurso .ano{ padding-top:0; } .lightbox{ padding:70px 16px; } .lightbox__nav{ top:auto; bottom:18px; transform:none; } .lightbox__media--tex{ width:100%; aspect-ratio:4/3; } .lightbox__media img{ max-height:54vh; } } @media (max-width:900px){ .gal--m{ grid-column:span 6; } } @media (max-width:560px){ .gal--m{ grid-column:span 2; grid-row:span 2; } } /* pausa o avanco automatico enquanto o visitante esta lendo o slide */ .carrossel:hover .passo.is-ativo .passo__prog, .carrossel:focus-within .passo.is-ativo .passo__prog{ animation-play-state:paused; } .slide__num span{ opacity:.55; } /* ===================================================================== FOTOS DO BANCO PROVISORIO ===================================================================== */ .slide__fundo--foto{ background-size:cover; background-position:center; } .trab__media{ position:relative; } .trab__media .preencher{ position:absolute; inset:0; } .prov{ position:absolute; z-index:4; right:9px; bottom:9px; padding:4px 8px; font-size:.46rem; letter-spacing:.16em; text-transform:uppercase; background:rgba(var(--escuro-quente-rgb),.5); color:rgba(var(--creme-rgb),.9); border-radius:2px; pointer-events:none; } .prov--slide{ right:var(--mx); bottom:auto; top:calc(var(--header-h) + 20px); z-index:5; } .gal figcaption{ z-index:3; } /* ===================================================================== HOME COMO DECK — uma seção por tela, com encaixe (scroll-snap) Mesmo mecanismo da apresentação de referência: o scroll encaixa numa seção por vez e o conteúdo da seção ativa sobe em cascata. ===================================================================== */ html.deck{ scroll-snap-type:y mandatory; scroll-padding-top:0; } html.deck .cap{ min-height:100dvh; scroll-snap-align:start; scroll-snap-stop:always; display:flex; align-items:center; position:relative; padding-block:calc(var(--header-h) + 2.2vh) 6vh; } html.deck .cap > .wrap{ width:100%; } html.deck #capa{ padding:0; display:grid; align-items:stretch; } html.deck #destaques{ padding:0; display:block; } html.deck .rodape{ scroll-snap-align:end; scroll-snap-stop:always; } /* entrada em cascata do conteúdo da seção ativa */ html.deck .cap .rv{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); transition-delay:calc(var(--d,0) * 85ms); } html.deck .cap.ativo .rv{ opacity:1; transform:none; } .rv[data-d="1"]{ --d:1 } .rv[data-d="2"]{ --d:2 } .rv[data-d="3"]{ --d:3 } .rv[data-d="4"]{ --d:4 } /* --- compactação para caber em uma tela --- */ html.deck #sobre .sobre__foto img{ max-height:56vh; width:100%; object-fit:cover; } html.deck #sobre .sobre__grid{ gap:clamp(32px,4.4vw,72px); } html.deck #trabalhos .grid-cards{ grid-template-columns:repeat(3,minmax(0,1fr)); } html.deck #trabalhos .card:nth-child(n+4){ display:none; } html.deck #trabalhos .card__media{ aspect-ratio:16/10; } html.deck #trabalhos .card__corpo{ padding:clamp(18px,1.8vw,24px); } html.deck #trabalhos .card__corpo p{ font-size:.84rem; } /* na home a galeria é só prévia: uma fileira de quadros de proporção inteira. O mosaico de 12 quadros fica em galeria.html. Vale de 901px para cima — abaixo o deck está desligado e o grid volta ao normal. */ @media (min-width:901px){ html.deck #galeria .galeria{ grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:auto; } /* proporção fixa: o quadro acompanha a largura e nunca achata */ html.deck #galeria .gal{ grid-column:auto / span 1; grid-row:auto / span 1; aspect-ratio:1/1; } html.deck #galeria .gal:nth-child(n+5){ display:none; } } html.deck #contato .canais a, html.deck #contato .canais span{ padding:clamp(10px,1.5vh,18px) 0; } html.deck #contato .campo{ margin-bottom:clamp(10px,1.7vh,20px); } html.deck #contato .campo textarea{ min-height:64px; } /* barra de progresso e trilho de pontos */ .progresso{ position:fixed; inset:0 0 auto 0; height:2px; z-index:95; background:rgba(var(--azul-rgb),.10); } .progresso i{ display:block; height:100%; width:0; background:var(--ouro); transition:width .12s linear; } .trilho{ position:fixed; right:clamp(14px,1.6vw,26px); top:50%; transform:translateY(-50%); z-index:88; display:flex; flex-direction:column; gap:13px; } .trilho button{ position:relative; width:8px; height:8px; padding:0; border-radius:50%; background:rgba(var(--azul-rgb),.26); transition:background .25s var(--ease), transform .25s var(--ease); } .trilho button:hover{ transform:scale(1.4); } .trilho button.on{ background:var(--ouro); transform:scale(1.4); } .trilho button span{ position:absolute; right:18px; top:50%; transform:translateY(-50%) translateX(6px); white-space:nowrap; font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; color:var(--creme); background:rgba(var(--azul-rgb),.92); padding:5px 10px; border-radius:2px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; box-shadow:var(--s2); } .trilho button:hover span{ opacity:1; transform:translateY(-50%) translateX(0); } /* sobre as seções escuras o trilho inverte */ body.secao-escura .trilho button{ background:rgba(var(--creme-rgb),.34); } body.secao-escura .trilho button.on{ background:var(--creme); } body.secao-escura .progresso{ background:rgba(var(--creme-rgb),.14); } body.secao-escura .progresso i{ background:var(--creme); } @media (max-width:900px){ html.deck{ scroll-snap-type:none; } html.deck .cap{ min-height:0; padding-block:clamp(56px,9vw,90px); } html.deck #capa{ min-height:100svh; } html.deck #destaques{ min-height:100svh; } html.deck #trabalhos .grid-cards{ grid-template-columns:1fr; } html.deck #trabalhos .card:nth-child(n+4){ display:flex; } html.deck .cap .rv{ opacity:1; transform:none; } .trilho{ display:none; } } @media (prefers-reduced-motion:reduce){ html.deck{ scroll-snap-type:none; } html.deck .cap .rv{ opacity:1; transform:none; transition:none; } } /* o nome no rodapé leva ao editor — discreto, parece só o nome */ .rodape__editor{ color:inherit; transition:color .3s var(--ease); } .rodape__editor:hover{ color:var(--creme); } /* página de créditos das imagens */ .creditos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:clamp(18px,2vw,28px); } .credito{ margin:0; background:var(--creme); border-radius:2px; overflow:hidden; box-shadow:var(--s1); transition:.4s var(--ease); } .credito:hover{ box-shadow:var(--s3); transform:translateY(-4px); } .credito img{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; } .credito figcaption{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:6px; font-size:.84rem; } .credito strong{ font-family:var(--serif); font-weight:500; font-size:1.08rem; color:var(--tinta); } .credito a{ color:var(--ouro); } .credito a:hover{ color:var(--tinta); } .rodape__cred{ color:inherit; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(var(--bege-rgb),.4); } .rodape__cred:hover{ color:var(--creme); } /* álbuns: cartões na galeria e página de cada álbum */ .grid-albuns{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); } .album .card__media{ aspect-ratio:3/2; } .album .card__media > .preencher{ position:absolute; inset:0; } .album .card__corpo p{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .album-pag__texto:empty{ display:none; } html.cp-editando .album-pag__texto:empty{ display:block; } .album-pag__vazio{ opacity:.6; font-size:.9rem; } #secAvulsas[hidden]{ display:none; } /* formulário: a isca para robôs fica fora da tela; o aviso de envio aparece forte */ .campo--isca{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; } .form .aviso--status{ opacity:1; font-size:.72rem; margin-top:10px; } .creditos__vazio{ opacity:.7; } /* links acadêmicos (contato e rodapé) e arquivos dos trabalhos */ .links-acad{ list-style:none; padding:0; margin:22px 0 0; display:flex; flex-wrap:wrap; gap:10px; } .links-acad a{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; border:1px solid var(--linha-clara); color:var(--bege); font-size:.72rem; letter-spacing:.06em; transition:.3s var(--ease); } .links-acad a:hover{ background:var(--creme); color:var(--ocre); border-color:var(--creme); } .rodape__links{ margin-top:14px !important; } .rodape__links a{ display:inline-flex; align-items:center; gap:8px; } .links-acad .is-vazio, .rodape__links .is-vazio{ opacity:.35; } .artigo__acoes{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(30px,4vw,48px); } .btn--vazado{ background:transparent; } .trab__pdf{ display:inline-block; margin-top:8px; font-size:.52rem; letter-spacing:.18em; padding:4px 7px; border-radius:2px; color:var(--ouro); border:1px solid rgba(var(--ouro-rgb),.45); } /* páginas novas: blocos em coluna de leitura, no ritmo do resto do site */ .blocos{ max-width:760px; margin-inline:auto; display:flex; flex-direction:column; gap:clamp(40px,5vw,64px); } .bloco__titulo{ margin:0 0 16px; } .bloco__corpo p{ font-size:1rem; line-height:1.75; } .bloco--imagem{ margin-inline:calc(-1 * clamp(0px, 6vw, 110px)); } .bloco__foto{ position:relative; margin:0; aspect-ratio:16/9; overflow:hidden; border-radius:2px; box-shadow:var(--s3); } .bloco__foto img, .bloco__foto .preencher{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .bloco__legenda{ margin:12px 0 0; font-size:.72rem; letter-spacing:.08em; color:var(--texto); opacity:.8; text-align:center; } .bloco--citacao blockquote{ margin:0; padding:clamp(20px,3vw,36px) 0 clamp(20px,3vw,36px) clamp(22px,3vw,40px); border-left:2px solid var(--ouro); } .bloco--citacao blockquote p{ font-family:var(--serif); font-size:clamp(1.35rem,2.4vw,1.9rem); line-height:1.35; color:var(--tinta); margin:0; } .bloco--citacao cite{ display:block; margin-top:14px; font-style:normal; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ouro); } .bloco--botao{ text-align:center; } .bloco--botao .bloco__titulo{ font-size:clamp(1.2rem,2vw,1.5rem); } .bloco__galeria{ margin-bottom:22px; } .bloco__vazio{ opacity:.6; font-style:italic; } /* Negrito e itálico escritos dentro do texto pelo editor. O peso é o mesmo que o editor já chama de negrito no resto do site — sem isso, um herdaria peso relativo e mal apareceria sobre um parágrafo de peso leve. */ strong, b{ font-weight:700; } em, i{ font-style:italic; } /* Respiro em volta da seção, escolhido no editor. Três degraus nomeados em vez de margem em pixels: a pessoa escolhe a intenção, não o número. */ section.secao--compacta{ padding-top:clamp(34px,3.6vw,56px); padding-bottom:clamp(34px,3.6vw,56px); } section.secao--espacosa{ padding-top:clamp(92px,10.5vw,168px); padding-bottom:clamp(92px,10.5vw,168px); } /* seção com foto de fundo: o texto precisa continuar legível por cima dela */ section.secao--comFoto{ background-attachment:scroll; color:var(--creme); } section.secao--comFoto .olho{ color:var(--bege); } /* Seção escondida pelo editor. Precisa de !important: as próprias seções declaram display (flex, grid), e isso venceria o atributo hidden. */ section[hidden]{ display:none !important; } /* Texto com foto ao lado. Inverte de lado a cada uso, para uma sequência deles não virar uma escada. */ .bloco__lado{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:center; } .bloco--textoFoto:nth-of-type(even) .bloco__lado{ direction:rtl; } .bloco--textoFoto:nth-of-type(even) .bloco__lado > *{ direction:ltr; } .bloco__lado-foto{ margin:0; } .bloco__lado-foto img{ width:100%; height:auto; display:block; border-radius:4px; } @media (max-width:780px){ .bloco__lado{ grid-template-columns:1fr; } .bloco--textoFoto:nth-of-type(even) .bloco__lado{ direction:ltr; } } /* Números em destaque. Só funciona quando os números são bons — e fica vazio quando não são, o que também é uma informação. */ /* ---- cartaz: proporção fixa, posições em % da caixa ------------------ A caixa é um container e os textos vão em cqw, então o cartaz encolhe inteiro no celular em vez de refluir. O preço é geometria: texto pensado para o computador fica pequeno no telefone, e a conferência avisa. */ .cartaz{ position:relative; container-type:inline-size; width:100%; margin-top:8px; overflow:hidden; border-radius:var(--raio,10px); isolation:isolate; } .cartaz--16-9{ aspect-ratio:16/9; } .cartaz--1-1 { aspect-ratio:1/1; } .cartaz--4-5 { aspect-ratio:4/5; } .cartaz__fundo{ position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; } /* o mesmo recurso do carrossel: sem o véu, texto claro sobre foto clara some */ .cartaz__veu{ position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(to top, rgba(var(--escuro-quente-rgb),.62), rgba(var(--escuro-quente-rgb),.18) 55%, rgba(var(--escuro-quente-rgb),.06) 100%); } .cartaz__peca{ position:absolute; z-index:1; color:#FFFCF3; text-shadow:0 1px 10px rgba(var(--escuro-quente-rgb),.45); } .cartaz__peca p{ margin:0; line-height:1.22; } .cartaz__peca img{ display:block; width:100%; height:auto; border-radius:calc(var(--raio,10px) * .6); } .cartaz__peca.t-pequeno p{ font-size:2.4cqw; } .cartaz__peca.t-medio p{ font-size:3.6cqw; } .cartaz__peca.t-grande p{ font-size:5.4cqw; } .cartaz__peca.t-enorme p{ font-size:8.4cqw; } .cartaz__peca.al-centro { text-align:center; } .cartaz__peca.al-direita{ text-align:right; } .bloco__numeros{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:clamp(20px,3vw,40px); margin-top:26px; } .numero{ text-align:center; } .numero strong{ display:block; font-family:var(--serif); font-weight:400; font-size:clamp(2.4rem,5vw,3.6rem); line-height:1; color:var(--ouro); } .numero span{ display:block; margin-top:8px; font-family:var(--sans); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; opacity:.82; } /* Sem espaço: opção do controle de respiro no editor. */ section.secao--sem-respiro{padding-block:0!important;margin-block:0!important;min-height:0!important} /* Logo opcional do cabeçalho; o nome e a marca do modelo continuam como padrão. */ .header__logo.tem-logo{gap:12px;min-width:0} .header__logo.tem-logo::before{display:none!important} .header__logo.tem-logo [data-logo-padrao]{display:none!important} .header__logo [data-logo-nome][hidden],.header__logo img.header__logo-img[hidden]{display:none!important} .header .header__logo img.header__logo-img{display:block;width:auto;height:clamp(34px,4vw,50px);max-width:min(220px,42vw);object-fit:contain;object-position:left center;flex:none} .header__logo.logo-com-nome img.header__logo-img{max-width:72px} .header__logo.logo-sem-nome img.header__logo-img{max-width:min(220px,54vw)} .header__logo .marca-txt--nova{color:var(--creme);font:500 .85rem/1.2 var(--sans);letter-spacing:.03em} @media(max-width:700px){.header .header__logo img.header__logo-img{height:38px}.header__logo.logo-com-nome img.header__logo-img{max-width:42px}} /* Imagem livre na seção. */ body > section { position: relative; } .imagem-livre { position: absolute; z-index: 2; left: 8%; top: 8%; width: min(280px, 42%); margin: 0; line-height: 0; } .imagem-livre img { display: block; width: 100%; height: auto; border-radius: 8px; } .imagem-livre--vazia { min-height: 140px; border: 2px dashed currentColor; border-radius: 8px; display: grid; place-items: center; line-height: 1.3; background: #fff; color: #445; } @media (max-width: 540px) { .imagem-livre { width: min(220px, 55%); } } /* Em tablet e celular a imagem solta não flutua por cima do texto: entra no fluxo da seção, centralizada. A posição escolhida para essa tela (arrastar no editor) continua valendo, como deslocamento a partir daí. */ @media (max-width: 900px) { .imagem-livre { position: relative; left: auto; top: auto; width: min(420px, 88%); margin: clamp(24px, 6vw, 40px) auto; } } /* Quem pode ser movido no editor não anima a própria posição nem o tamanho: a medida que grava o lugar novo depende do valor final, e uma transição "all" (como a dos botões) a falseava. */ [data-cp-mover], [data-cp-mover]:hover{ transition-property:color, background-color, border-color, box-shadow, opacity, transform, filter !important; } /* Marcadores do bloco de texto: cada parágrafo vira um item; a marca sai do CSS, o texto fica sem marcação */ .bloco__corpo--pontos .artigo__par, .bloco__corpo--numeros .artigo__par{ position:relative; padding-left:1.6em; } .bloco__corpo--pontos .artigo__par p::before{ content:"•"; position:absolute; left:.25em; color:var(--ouro, currentColor); font-weight:700; } .bloco__corpo--numeros{ counter-reset:cp-par; } .bloco__corpo--numeros .artigo__par p::before{ counter-increment:cp-par; content:counter(cp-par) "."; position:absolute; left:0; min-width:1.4em; text-align:right; color:var(--ouro, currentColor); font-weight:700; } /* Bloco de vídeo: arquivo do próprio site, sem autoplay */ .bloco__video{ margin:0; } .bloco__video-el{ display:block; width:100%; max-height:78vh; border-radius:10px; background:#000; } .bloco__video-vazio{ display:grid; place-items:center; aspect-ratio:16 / 9; border:2px dashed currentColor; border-radius:10px; opacity:.55; font-size:.95rem; text-align:center; padding:1rem; } /* Gráficos (bloco "grafico"): barras, linhas e pizza sem biblioteca; a tabela de dados fica escondida fora do editor */ .bloco__grafico{ margin:0; --g-cor:var(--ouro, #b98444); } .grafico__barras{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; } .grafico__barras li{ display:grid; grid-template-columns:minmax(5rem, 28%) 1fr auto; align-items:center; gap:.8rem; } .grafico__rot{ font-size:.92rem; overflow-wrap:anywhere; } .grafico__trilho{ display:block; height:14px; border-radius:7px; background:rgba(127,127,127,.18); overflow:hidden; } .grafico__barra{ display:block; height:100%; border-radius:7px; background:var(--g-cor); } .grafico__val{ font-weight:700; font-variant-numeric:tabular-nums; } .grafico__linhas{ display:block; width:100%; height:auto; max-height:320px; } .grafico__eixo{ stroke:rgba(127,127,127,.5); stroke-width:1; } .grafico__linha{ fill:none; stroke:var(--g-cor); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; } .grafico__ponto{ fill:var(--g-cor); } .grafico__tx{ fill:currentColor; font-size:11px; font-weight:700; } .grafico__tx--rot{ font-weight:400; opacity:.75; } .grafico__pizza{ display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; } .grafico__pizza svg{ width:min(240px, 100%); height:auto; transform:rotate(0deg); } .grafico__fundo{ fill:none; stroke:rgba(127,127,127,.15); stroke-width:6.5; } .grafico__fatia{ fill:none; stroke-width:6.5; } .grafico__fatia--0{ stroke:var(--g-cor); background:var(--g-cor); } .grafico__fatia--1{ stroke:var(--g-cor); background:var(--g-cor); opacity:.78; } .grafico__fatia--2{ stroke:var(--g-cor); background:var(--g-cor); opacity:.58; } .grafico__fatia--3{ stroke:var(--g-cor); background:var(--g-cor); opacity:.42; } .grafico__fatia--4{ stroke:var(--g-cor); background:var(--g-cor); opacity:.3; } .grafico__fatia--5{ stroke:var(--g-cor); background:var(--g-cor); opacity:.2; } .grafico__legenda{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; flex:1 1 12rem; } .grafico__legenda li{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.6rem; } .grafico__amostra{ width:14px; height:14px; border-radius:4px; } .grafico__vazio{ margin:0; padding:1.2rem; text-align:center; border:2px dashed currentColor; border-radius:10px; opacity:.55; } .grafico__tabela{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .grafico__tabela--edicao{ position:static; width:100%; height:auto; overflow:visible; clip:auto; margin-top:1.2rem; border-collapse:collapse; font-size:.9rem; white-space:normal; } .grafico__tabela--edicao th, .grafico__tabela--edicao td{ padding:.45rem .6rem; border-top:1px solid rgba(127,127,127,.3); text-align:left; } .grafico__tabela--edicao td{ font-variant-numeric:tabular-nums; } .bloco__video-iframe{ aspect-ratio:16 / 9; height:auto; border:0; } .grafico__trilho{ position:relative; } .grafico__barra{ position:absolute; top:0; } .grafico__barra--neg{ background:var(--g-cor); opacity:.55; } .grafico__zero{ position:absolute; top:-3px; bottom:-3px; width:1px; background:rgba(127,127,127,.7); } .grafico__grade{ stroke:rgba(127,127,127,.25); stroke-width:1; stroke-dasharray:3 3; } .grafico__tx--eixo{ font-weight:400; opacity:.65; font-size:10px; } /* Texto solto numa seção: um parágrafo da própria seção, que se move livremente */ .texto-livre{ margin:1.2rem auto; padding:0 var(--gutter, 1.5rem); max-width:min(46rem, 100%); font-size:1.05rem; line-height:1.6; } .imagem-livre--video video, .imagem-livre--video iframe{ display:block; width:100%; aspect-ratio:16 / 9; height:auto; border:0; border-radius:10px; background:#000; } /* Elementos soltos do painel Elementos: um bloco dentro da seção, sem criar seção nova */ .elemento-livre{ position:relative; margin-block:clamp(20px,3vw,40px); } .elemento-livre .bloco--imagem{ margin-inline:0; } .elemento-livre .bloco{ margin-block:0; } /* Formas e linhas (painel Elementos): um bloco de cor recortado; a cor é o fundo do item (--ouro é só o padrão) */ .bloco--forma{ display:flex; justify-content:center; } .forma{ width:clamp(80px,22vw,180px); aspect-ratio:1; background-color:var(--ouro,#96642A); } .forma--arredondado{ border-radius:18%; } .forma--circulo{ border-radius:50%; } .forma--triangulo{ clip-path:polygon(50% 4%,96% 92%,4% 92%); } .forma--losango{ clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); } .forma--hexagono{ clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%); } .forma--estrela{ clip-path:polygon(50% 2%,61% 36%,98% 36%,68% 57%,79% 92%,50% 71%,21% 92%,32% 57%,2% 36%,39% 36%); } .forma--seta{ aspect-ratio:2 / 1; clip-path:polygon(0 30%,60% 30%,60% 0,100% 50%,60% 100%,60% 70%,0 70%); } .forma--coracao{ -webkit-mask:url("data:image/svg+xml;utf8,") center / contain no-repeat; mask:url("data:image/svg+xml;utf8,") center / contain no-repeat; } .forma--linha, .forma--tracejada, .forma--pontilhada{ width:min(100%,520px); aspect-ratio:auto; height:6px; } .forma--linha{ border-radius:3px; } .forma--tracejada{ -webkit-mask:repeating-linear-gradient(90deg,#000 0 22px,transparent 22px 36px); mask:repeating-linear-gradient(90deg,#000 0 22px,transparent 22px 36px); } .forma--pontilhada{ -webkit-mask:repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 16px); mask:repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 16px); } /* Carrossel de imagens (elemento solto do painel Elementos): o formato (cvi--…) decide o desenho; --pos é a posição do slide em relação ao que está à vista */ .bloco--carrossel{ width:100%; } .cvi{ position:relative; width:100%; max-width:960px; margin-inline:auto; border-radius:inherit; --q:16/9; --qn:1.7778; } .cvi__palco{ position:relative; aspect-ratio:var(--q); overflow:hidden; border-radius:inherit; background:rgba(0,0,0,.05); } .cvi__trilho{ position:absolute; inset:0; } .cvi__slide{ position:absolute; inset:0; margin:0; border-radius:inherit; overflow:hidden; transition:transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s ease, filter .6s ease; } .cvi__slide img, .cvi__slide .preencher{ display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; } .cvi__slide figcaption{ position:absolute; left:0; right:0; bottom:0; padding:2.2rem 1.1rem .9rem; color:#fff; font-size:.95rem; line-height:1.4; background:linear-gradient(transparent, rgba(0,0,0,.62)); } .cvi__slide figcaption:empty{ display:none; } .cvi__seta{ position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:42px; height:42px; border-radius:50%; border:0; cursor:pointer; background:rgba(255,255,255,.92); color:#1E3A5F; font-size:24px; line-height:1; box-shadow:0 4px 14px rgba(0,0,0,.22); } .cvi__seta:hover{ background:#fff; } .cvi__seta--ant{ left:12px; } .cvi__seta--prox{ right:12px; } .cvi__pontos{ display:flex; justify-content:center; gap:8px; margin-top:12px; } .cvi__pontos button{ width:9px; height:9px; padding:0; border:0; border-radius:50%; background:currentColor; opacity:.28; cursor:pointer; transition:opacity .2s, transform .2s; } .cvi__pontos button.is-ativo{ opacity:.95; transform:scale(1.3); } .cvi[data-controles="setas"] .cvi__pontos, .cvi[data-controles="nenhum"] .cvi__pontos{ display:none; } .cvi[data-controles="pontos"] .cvi__seta, .cvi[data-controles="nenhum"] .cvi__seta{ display:none; } /* clássico: uma imagem, as outras esperam ao lado */ .cvi--classico .cvi__slide{ transform:translateX(calc(var(--pos, 0) * 100%)); } /* transição suave: as imagens se sobrepõem */ .cvi--fade .cvi__slide{ opacity:0; } .cvi--fade .cvi__slide.is-ativo{ opacity:1; } .cvi--fade .cvi__seta{ display:none; } /* destaque central: a imagem grande no meio e as vizinhas menores dos dois lados, como prévias */ .cvi--central .cvi__palco{ overflow:visible; background:none; } .cvi--central{ overflow-x:clip; overflow-y:visible; padding-block:clamp(14px,3.4%,40px); } /* clip só dos lados: a sombra da foto central não pode ser cortada embaixo */ .cvi--central .cvi__slide{ inset:0 auto 0 17%; width:66%; opacity:0; pointer-events:none; } .cvi--central .cvi__slide[data-pos="0"]{ opacity:1; z-index:3; pointer-events:auto; box-shadow:0 2px 6px rgba(0,0,0,.10), 0 14px 30px -10px rgba(0,0,0,.26), 0 30px 56px -24px rgba(0,0,0,.22); } .cvi--central .cvi__slide[data-pos="-1"]{ opacity:.7; z-index:2; transform:translateX(-76%) scale(.74); filter:saturate(.8); pointer-events:auto; } .cvi--central .cvi__slide[data-pos="1"]{ opacity:.7; z-index:2; transform:translateX(76%) scale(.74); filter:saturate(.8); pointer-events:auto; } /* três por vez */ .cvi--cartas .cvi__palco{ aspect-ratio:calc(var(--qn) * 3.06); background:none; overflow:hidden; } .cvi--cartas .cvi__slide{ inset:0 auto 0 0; width:32.6%; opacity:0; border-radius:10px; } .cvi--cartas .cvi__slide[data-pos="0"], .cvi--cartas .cvi__slide[data-pos="1"], .cvi--cartas .cvi__slide[data-pos="2"]{ opacity:1; } .cvi--cartas .cvi__slide{ transform:translateX(calc(var(--pos, 0) * 103%)); } /* miniaturas */ .cvi--miniaturas-baixo .cvi__slide, .cvi--miniaturas-dir .cvi__slide, .cvi--miniaturas-esq .cvi__slide{ opacity:0; } .cvi--miniaturas-baixo .cvi__slide.is-ativo, .cvi--miniaturas-dir .cvi__slide.is-ativo, .cvi--miniaturas-esq .cvi__slide.is-ativo{ opacity:1; } .cvi--miniaturas-baixo .cvi__pontos, .cvi--miniaturas-dir .cvi__pontos, .cvi--miniaturas-esq .cvi__pontos{ display:none; } .cvi__minis{ display:flex; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:2px; } .cvi__mini{ flex:0 0 auto; width:calc(64px * var(--qn)); aspect-ratio:var(--q); padding:0; border:0; border-radius:6px; overflow:hidden; cursor:pointer; opacity:.5; outline:2px solid transparent; outline-offset:2px; transition:opacity .2s, outline-color .2s; background:rgba(0,0,0,.08); } .cvi__mini img{ display:block; width:100%; height:100%; object-fit:cover; } .cvi__mini.is-ativo{ opacity:1; outline-color:currentColor; } .cvi--miniaturas-dir, .cvi--miniaturas-esq{ display:grid; grid-template-columns:minmax(0,1fr) 22%; gap:10px; align-items:stretch; } .cvi--miniaturas-esq{ grid-template-columns:22% minmax(0,1fr); } .cvi--miniaturas-esq .cvi__palco{ order:2; } .cvi--miniaturas-esq .cvi__minis{ order:1; } .cvi--miniaturas-dir .cvi__minis, .cvi--miniaturas-esq .cvi__minis{ flex-direction:column; margin-top:0; overflow-y:auto; height:0; min-height:100%; } /* a coluna tem a altura da imagem grande e rola */ .cvi--miniaturas-dir .cvi__mini, .cvi--miniaturas-esq .cvi__mini{ width:100%; } /* cartas empilhadas */ .cvi--empilhado{ padding:0 30px 30px 0; } .cvi--empilhado .cvi__palco{ overflow:visible; background:none; } .cvi--empilhado .cvi__slide{ opacity:0; box-shadow:0 10px 24px rgba(0,0,0,.25); } .cvi--empilhado .cvi__slide[data-pos="0"]{ opacity:1; z-index:4; } .cvi--empilhado .cvi__slide[data-pos="1"]{ opacity:1; z-index:3; transform:translate(15px,15px) scale(.97); filter:brightness(.92); } .cvi--empilhado .cvi__slide[data-pos="2"]{ opacity:1; z-index:2; transform:translate(30px,30px) scale(.94); filter:brightness(.84); } /* faixa contínua: as imagens correm sem parar */ .cvi--faixa .cvi__palco{ aspect-ratio:auto; background:none; } .cvi--faixa .cvi__trilho{ position:relative; inset:auto; display:flex; gap:12px; width:max-content; animation:cvi-faixa 36s linear infinite; } .cvi--faixa .cvi__slide{ position:relative; inset:auto; flex:0 0 auto; width:calc(190px * var(--qn)); aspect-ratio:var(--q); border-radius:10px; } .cvi--faixa .cvi__seta, .cvi--faixa .cvi__pontos{ display:none; } .cvi--faixa:hover .cvi__trilho{ animation-play-state:paused; } @keyframes cvi-faixa{ to{ transform:translateX(-50%); } } html.cp-editando .cvi--faixa .cvi__trilho{ animation:none; } @media (prefers-reduced-motion:reduce){ .cvi__slide{ transition:none; } .cvi--faixa .cvi__trilho{ animation:none; } } /* ---- Abas (elemento): rótulos finos sobre uma linha, a aba aberta sublinhada; o conteúdo troca sem animação pesada ---- */ .abas{ width:100%; } .abas__lista{ display:flex; gap:clamp(18px,3vw,36px); border-bottom:1px solid var(--linha, rgba(0,0,0,.14)); overflow-x:auto; scrollbar-width:none; } .abas__lista::-webkit-scrollbar{ display:none; } .abas__aba{ position:relative; flex:0 0 auto; padding:0 0 12px; font-size:.95rem; font-weight:500; letter-spacing:.01em; color:inherit; opacity:.55; cursor:pointer; white-space:nowrap; transition:opacity .2s; } .abas__aba:hover{ opacity:.85; } .abas__aba:focus-visible{ outline:2px solid currentColor; outline-offset:4px; border-radius:2px; } .abas__aba::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .25s cubic-bezier(.2,.7,.2,1); } .abas__aba.is-ativa{ opacity:1; } .abas__aba.is-ativa::after{ transform:scaleX(1); } .abas__painel{ padding-top:clamp(20px,3vw,32px); } .abas__painel[hidden]{ display:none; } .abas__texto{ max-width:62ch; margin:0 0 1.4rem; line-height:1.65; opacity:.85; } .abas__docs{ display:flex; flex-direction:column; gap:0; } .abas__docs .doc{ background:none; border:0; border-bottom:1px solid var(--linha, rgba(0,0,0,.12)); border-radius:0; box-shadow:none; padding:18px 0; } .abas__docs .doc:first-child{ border-top:0; } @media (prefers-reduced-motion:reduce){ .abas__aba, .abas__aba::after{ transition:none; } } /* ---- Dentro das abas: área livre para qualquer elemento; arquivo para baixar; pasta de documentos ---- */ .abas__livres{ display:flex; flex-direction:column; gap:clamp(20px,3vw,32px); margin-top:clamp(18px,2.5vw,28px); } .abas__livres:empty{ display:none; } .abas__livres .elemento-livre{ margin:0; padding:0; } .arquivo{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid var(--linha, rgba(0,0,0,.12)); } .arquivo__txt h3{ margin:0 0 .25rem; font-size:1.05rem; font-weight:600; } .arquivo__txt p{ margin:0; opacity:.7; line-height:1.5; } .arquivo__b{ flex:0 0 auto; } .arquivo__b--vazio{ opacity:.55; border-style:dashed; cursor:pointer; } .pasta{ border:1px solid var(--linha, rgba(0,0,0,.14)); border-radius:12px; overflow:hidden; } .pasta__nome{ display:flex; align-items:center; gap:10px; padding:14px 18px; background:rgba(0,0,0,.03); } .pasta__nome h3{ margin:0; font-size:1rem; font-weight:600; flex:1; } .pasta__nome small{ opacity:.55; } .pasta__doc{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 18px; border-top:1px solid var(--linha, rgba(0,0,0,.1)); } .pasta__txt{ display:grid; gap:2px; min-width:0; } .pasta__txt span{ opacity:.65; font-size:.9rem; } .pasta__b{ flex:0 0 auto; font-size:.85rem; padding:6px 12px; border:1px solid currentColor; border-radius:999px; text-decoration:none; color:inherit; white-space:nowrap; transition:opacity .2s; } .pasta__b:hover{ opacity:.7; } .pasta__b--vazio{ opacity:.5; border-style:dashed; cursor:pointer; } @media (max-width:560px){ .arquivo{ flex-direction:column; align-items:flex-start; } } /* ---- listas de cartões, perguntas, preços e linha do tempo (como nos modelos) ---- */ .bloco__lista{ margin-top:clamp(18px,2.4vw,30px); } .bloco__lista--cartoes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:clamp(14px,2vw,24px); } .itl{ margin:0; } .itl h3{ margin:0 0 6px; } .itl__corpo p{ margin:0; } .itl--cartao{ display:flex; flex-direction:column; gap:10px; } .itl__foto{ margin:0; position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--creme-2, rgba(0,0,0,.05)); } .itl__foto img, .itl__foto .preencher{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } /* pergunta e resposta: a sanfona é nativa do navegador, sem script */ .bloco__lista--perguntas{ border-top:1px solid var(--linha, rgba(0,0,0,.14)); } .itl--pergunta{ border-bottom:1px solid var(--linha, rgba(0,0,0,.14)); padding:4px 0; } .itl--pergunta summary{ cursor:pointer; padding:14px 0; list-style:none; display:flex; align-items:center; gap:10px; } .itl--pergunta summary::-webkit-details-marker{ display:none; } .itl--pergunta summary::after{ content:"+"; margin-left:auto; opacity:.5; font-size:1.2em; } .itl--pergunta[open] summary::after{ content:"−"; } .itl--pergunta .itl__corpo{ padding:0 0 16px; opacity:.85; } .bloco__lista--precos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:clamp(12px,1.8vw,20px); } .itl--preco{ border:1px solid var(--linha, rgba(0,0,0,.14)); padding:clamp(16px,2vw,22px); display:flex; flex-direction:column; gap:8px; } .itl--preco .itl__marca{ font-weight:700; font-size:clamp(1.3rem,2vw,1.7rem); color:var(--ouro, currentColor); } .bloco__lista--linha{ border-left:1px solid var(--linha, rgba(0,0,0,.14)); padding-left:clamp(16px,2.4vw,28px); } .itl--linha{ position:relative; padding:0 0 clamp(18px,2.4vw,28px); } .itl--linha .itl__marca{ display:block; font:600 10px/1 var(--sans, inherit); letter-spacing:.16em; text-transform:uppercase; color:var(--ouro, currentColor); margin-bottom:5px; } .itl--linha > cp-enfeite[data-pos="antes"]{ content:""; position:absolute; left:calc(clamp(16px,2.4vw,28px) * -1 - 4px); top:4px; width:7px; height:7px; border-radius:999px; background:var(--ouro, currentColor); } .bloco__lista--simples .itl--simples{ padding:14px 0; border-bottom:1px solid var(--linha, rgba(0,0,0,.14)); } /* cartões na horizontal (fileira que rola) e na vertical (um embaixo do outro, foto ao lado) */ .bloco__lista--cartoes-h{ display:flex; gap:clamp(14px,2vw,22px); overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:10px; scrollbar-width:thin; } .bloco__lista--cartoes-h .itl--cartao{ flex:0 0 min(280px,78%); scroll-snap-align:start; } .bloco__lista--cartoes-v{ display:flex; flex-direction:column; gap:clamp(14px,2vw,22px); } .bloco__lista--cartoes-v .itl--cartao{ flex-direction:row; align-items:center; gap:clamp(14px,2vw,22px); } .bloco__lista--cartoes-v .itl__foto{ flex:0 0 clamp(120px,22%,200px); } .bloco__lista--cartoes-v .itl__corpo{ flex:1; min-width:0; } @media (max-width:560px){ .bloco__lista--cartoes-v .itl--cartao{ flex-direction:column; align-items:stretch; } .bloco__lista--cartoes-v .itl__foto{ flex:none; } } /* ---- Enquete: opções que viram barras de resultado depois do voto ---- */ .enquete{ max-width:640px; } .enquete__pergunta{ margin:0 0 14px; font-size:1.15rem; font-weight:600; } .enquete__ops{ display:flex; flex-direction:column; gap:10px; } .enquete__op{ position:relative; display:flex; align-items:center; gap:12px; padding:12px 16px; border:1px solid var(--linha, rgba(0,0,0,.18)); border-radius:10px; overflow:hidden; cursor:pointer; transition:border-color .2s, background .2s; } .enquete__op:hover, .enquete__op:focus-visible{ border-color:currentColor; outline:none; } .enquete__barra{ position:absolute; inset:0 auto 0 0; width:var(--pct, 0%); background:currentColor; opacity:.08; transition:width .6s cubic-bezier(.2,.7,.2,1); } .enquete__rot{ position:relative; flex:1; } .enquete__pct{ position:relative; font-weight:600; font-variant-numeric:tabular-nums; opacity:.8; } .enquete.is-votada .enquete__op{ cursor:default; } .enquete.is-votada .enquete__op:hover{ border-color:var(--linha, rgba(0,0,0,.18)); } .enquete__op.is-escolhida{ border-color:currentColor; } .enquete__op.is-escolhida .enquete__barra{ opacity:.16; } .enquete.is-enviando{ opacity:.6; pointer-events:none; } .enquete__rodape{ margin:10px 0 0; font-size:.9rem; opacity:.65; min-height:1.2em; } @media (prefers-reduced-motion:reduce){ .enquete__barra{ transition:none; } } /* ---- Aviso de cookies e política de privacidade ---- */ .cookies{ position:fixed; z-index:9000; left:16px; bottom:16px; max-width:420px; display:grid; gap:12px; padding:16px 18px; background:#fff; color:#1d2a33; border-radius:12px; box-shadow:0 12px 36px rgba(10,20,30,.22); font-size:.92rem; line-height:1.45; } .cookies p{ margin:0; } .cookies a{ color:inherit; text-decoration:underline; } .cookies__acoes{ display:flex; gap:8px; justify-content:flex-end; } .cookies .btn, .privacidade .btn{ padding:9px 16px; font-size:.85rem; } @media (max-width:560px){ .cookies{ left:10px; right:10px; bottom:10px; max-width:none; } } .privacidade{ position:fixed; inset:0; z-index:9100; display:grid; place-items:center; padding:16px; background:rgba(10,20,30,.45); } .privacidade__caixa{ position:relative; width:min(640px,100%); max-height:86vh; overflow:auto; padding:clamp(20px,4vw,32px); background:#fff; color:#1d2a33; border-radius:14px; } .privacidade__caixa h2{ margin:0 0 12px; font-size:1.3rem; } .privacidade__texto p{ margin:0 0 .9em; line-height:1.6; font-size:.95rem; } .privacidade__acoes{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; margin-top:16px; } .privacidade__fechar{ position:absolute; top:10px; right:12px; width:34px; height:34px; border:0; background:none; font-size:1.5rem; line-height:1; cursor:pointer; color:inherit; } .rodape__cookies{ margin-left:auto; color:inherit; opacity:.7; font-size:.85em; text-decoration:underline; } /* Disposição do nome em relação à logo (Cabeçalho › Posição do nome) e distância entre os dois */ .header .header__logo.logo-com-nome[data-logo-pos="abaixo"]{flex-direction:column;align-items:center} .header .header__logo.logo-com-nome[data-logo-pos="acima"]{flex-direction:column-reverse;align-items:center} .header .header__logo.logo-com-nome[data-logo-pos="esquerda"]{flex-direction:row-reverse} .header .header__logo.logo-com-nome[data-logo-pos="abaixo"] img.header__logo-img, .header .header__logo.logo-com-nome[data-logo-pos="acima"] img.header__logo-img{max-width:min(220px,54vw)} .header .header__logo.logo-com-nome[data-logo-pos="abaixo"] [data-logo-nome], .header .header__logo.logo-com-nome[data-logo-pos="acima"] [data-logo-nome]{text-align:center} .header .header__logo[data-logo-espaco]{gap:var(--logo-espaco)!important} /* Colunas dentro da aba: cada elemento escolhe a largura (inteira, 2/3, metade, 1/3); no celular, todos inteiros */ .abas__livres{ --abas-g:clamp(20px,3vw,32px); flex-direction:row !important; flex-wrap:wrap; align-items:flex-start; gap:var(--abas-g) !important; } .abas__livres > *{ flex:0 0 100%; min-width:0; max-width:100%; } .abas__livres > .cp-add{ flex:0 0 auto; order:99; } .abas__livres::after{ content:""; flex:0 0 100%; order:98; height:0; margin-top:calc(-1 * var(--abas-g)); } /* o + Adicionar vai sempre para a linha de baixo */ .abas__livres > .elemento-livre[data-cp-dim-aplicada]{ flex-basis:auto; } /* largura dada pelas alças vale mais que a coluna */ .abas__livres > .elemento-livre[data-largura="1/2"]{ flex-basis:calc((100% - var(--abas-g)) / 2); } .abas__livres > .elemento-livre[data-largura="1/3"]{ flex-basis:calc((100% - 2 * var(--abas-g)) / 3); } .abas__livres > .elemento-livre[data-largura="2/3"]{ flex-basis:calc((100% - var(--abas-g)) * 2 / 3); } @media (max-width:540px){ .abas__livres > .elemento-livre[data-largura]{ flex-basis:100%; } } /* Elemento solto "por cima": fica sobre a seção, no centro, sem empurrar nada; a posição se ajusta arrastando */ body > section:has(> .elemento-livre[data-fluxo="sobre"]){ position:relative; } .elemento-livre[data-fluxo="sobre"]{ position:absolute; left:50%; top:50%; transform:translate(calc(-50% + var(--d,0px)), calc(-50% + var(--d,0px))); width:min(1100px,92%); max-width:92%; margin:0; z-index:5; } /* ---- Carrosséis novos: Destaque de página, Polaroides, Galeria giratória, Vertical e Mosaico ---- */ .cvi[data-autoplay="lento"]{ --dur:8s; } .cvi[data-autoplay="medio"]{ --dur:5s; } .cvi[data-autoplay="rapido"]{ --dur:3s; } /* Destaque de página: foto cheia escurecida, número, categoria, título, resumo, meta, botão e abas de progresso embaixo */ .cvi--destaque{ max-width:none; color:#fff; } .cvi--destaque .cvi__palco{ aspect-ratio:auto; min-height:clamp(440px,64vh,680px); background:#12262c; } .cvi--destaque .cvi__slide{ opacity:0; transition:opacity .8s ease; z-index:1; } .cvi--destaque .cvi__slide.is-ativo{ opacity:1; z-index:2; } .cvi--destaque .cvi__slide > cp-enfeite[data-pos="depois"]{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, rgba(8,24,30,.86) 0%, rgba(8,24,30,.45) 58%, rgba(8,24,30,.5) 100%), linear-gradient(transparent 55%, rgba(0,0,0,.5)); } .cvi--destaque .cvi__texto{ position:absolute; z-index:3; left:clamp(22px,7%,120px); right:clamp(22px,22%,320px); top:46%; transform:translateY(-50%); display:grid; gap:.85rem; justify-items:start; } .cvi--destaque .cvi__num{ font-size:clamp(1.8rem,4vw,3rem); font-weight:700; line-height:1; letter-spacing:-.02em; opacity:.92; } .cvi--destaque .cvi__num b{ font-weight:700; } .cvi--destaque .cvi__cat{ font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; opacity:.85; } .cvi--destaque .cvi__tit{ margin:0; font-size:clamp(1.9rem,5vw,4rem); line-height:1.02; letter-spacing:-.03em; color:#fff; max-width:18ch; } .cvi--destaque .cvi__res{ margin:0; max-width:56ch; font-size:clamp(.98rem,1.4vw,1.2rem); line-height:1.5; opacity:.92; } .cvi--destaque .cvi__meta{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; opacity:.75; } .cvi--destaque .cvi__bt{ color:#fff; border-color:rgba(255,255,255,.7); background:transparent; margin-top:.4rem; } .cvi--destaque .cvi__abas{ position:absolute; z-index:5; left:clamp(22px,7%,120px); right:clamp(22px,7%,120px); bottom:20px; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:clamp(12px,3vw,40px); } .cvi--destaque .cvi__aba{ position:relative; display:flex; gap:.9rem; align-items:baseline; padding:12px 0 0; border:0; border-top:2px solid rgba(255,255,255,.28); background:none; color:rgba(255,255,255,.66); font:inherit; font-size:.86rem; text-align:left; cursor:pointer; transition:color .2s; } .cvi--destaque .cvi__aba i{ font-style:normal; font-size:.7rem; letter-spacing:.08em; opacity:.7; } .cvi--destaque .cvi__aba span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cvi--destaque .cvi__aba.is-ativo{ color:#fff; } .cvi--destaque .cvi__aba.is-ativo::before{ content:""; position:absolute; left:0; top:-2px; height:2px; width:100%; background:#fff; transform-origin:left; } .cvi--destaque[data-autoplay="lento"] .cvi__aba.is-ativo::before, .cvi--destaque[data-autoplay="medio"] .cvi__aba.is-ativo::before, .cvi--destaque[data-autoplay="rapido"] .cvi__aba.is-ativo::before{ animation:cvi-progresso var(--dur,5s) linear; } html.cp-editando .cvi--destaque .cvi__aba.is-ativo::before{ animation:none; } .cvi--destaque .cvi__pontos{ display:none; } .cvi--destaque .cvi__seta{ top:44%; background:rgba(255,255,255,.14); color:#fff; backdrop-filter:blur(4px); } @keyframes cvi-progresso{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } } @media (max-width:700px){ .cvi--destaque .cvi__texto{ right:22px; } .cvi--destaque .cvi__aba span{ display:none; } .cvi--destaque .cvi__seta{ display:none; } } /* Polaroides: fotos de papel levemente giradas, jogadas uma sobre a outra */ .cvi--polaroide .cvi__palco{ overflow:visible; background:none; } .cvi--polaroide .cvi__slide{ inset:3% 19% 3% 19%; background:#fff; padding:12px 12px 52px; border-radius:4px; box-shadow:0 14px 34px rgba(0,0,0,.28); opacity:0; transform:translateX(calc(var(--pos,0) * 14%)) rotate(calc(var(--pos,0) * 5deg)); } .cvi--polaroide .cvi__slide img, .cvi--polaroide .cvi__slide .preencher{ border-radius:2px; height:100%; } .cvi--polaroide .cvi__slide[data-pos="0"]{ opacity:1; z-index:5; transform:rotate(-1.5deg); } .cvi--polaroide .cvi__slide[data-pos="-1"], .cvi--polaroide .cvi__slide[data-pos="1"]{ opacity:1; z-index:4; } .cvi--polaroide .cvi__slide[data-pos="-2"], .cvi--polaroide .cvi__slide[data-pos="2"]{ opacity:1; z-index:3; } .cvi--polaroide .cvi__slide figcaption{ background:none; color:#2b2b2b; padding:0 12px; bottom:14px; text-align:center; font-size:.9rem; } .cvi--polaroide{ padding-block:2%; } /* Galeria giratória: a imagem do meio de frente e as outras viradas em perspectiva */ .cvi--giratorio .cvi__palco{ overflow:hidden; background:none; perspective:1100px; } .cvi--giratorio .cvi__slide{ inset:4% 22%; opacity:0; border-radius:10px; transform:translateX(calc(var(--pos,0) * 58%)) rotateY(calc(var(--pos,0) * -48deg)) scale(.82); box-shadow:0 16px 36px rgba(0,0,0,.3); } .cvi--giratorio .cvi__slide[data-pos="0"]{ opacity:1; z-index:5; transform:none; } .cvi--giratorio .cvi__slide[data-pos="-1"], .cvi--giratorio .cvi__slide[data-pos="1"]{ opacity:.9; z-index:4; } .cvi--giratorio .cvi__slide[data-pos="-2"], .cvi--giratorio .cvi__slide[data-pos="2"]{ opacity:.5; z-index:3; } /* Vertical: as imagens sobem e descem, com os pontos na lateral */ .cvi--vertical .cvi__slide{ transform:translateY(calc(var(--pos,0) * 100%)); } .cvi--vertical .cvi__pontos{ position:absolute; right:14px; top:50%; transform:translateY(-50%); flex-direction:column; margin:0; color:#fff; z-index:6; } .cvi--vertical .cvi__seta{ left:50%; transform:translateX(-50%) rotate(90deg); } .cvi--vertical .cvi__seta--ant{ top:12px; } .cvi--vertical .cvi__seta--prox{ top:auto; bottom:12px; } /* Mosaico: uma imagem grande e duas prévias empilhadas; clicar numa prévia a traz para o destaque */ .cvi--mosaico .cvi__palco{ background:none; overflow:hidden; } .cvi--mosaico .cvi__slide{ inset:auto; left:101%; top:0; width:32%; height:49%; border-radius:10px; opacity:0; transition:left .6s cubic-bezier(.2,.7,.2,1), top .6s cubic-bezier(.2,.7,.2,1), width .6s cubic-bezier(.2,.7,.2,1), height .6s cubic-bezier(.2,.7,.2,1), opacity .5s; } .cvi--mosaico .cvi__slide[data-pos="0"]{ left:0; top:0; width:67%; height:100%; opacity:1; z-index:3; } .cvi--mosaico .cvi__slide[data-pos="1"]{ left:68%; top:0; width:32%; height:49%; opacity:1; cursor:pointer; filter:brightness(.92); } .cvi--mosaico .cvi__slide[data-pos="2"]{ left:68%; top:51%; width:32%; height:49%; opacity:1; cursor:pointer; filter:brightness(.92); } .cvi--mosaico .cvi__slide[data-pos="1"]:hover, .cvi--mosaico .cvi__slide[data-pos="2"]:hover{ filter:none; } .cvi--mosaico .cvi__seta{ display:none; } @media (prefers-reduced-motion:reduce){ .cvi--destaque .cvi__aba.is-ativo::before{ animation:none !important; } } /* pontos de navegação como elemento do editor: lado, altura, tamanho, formato, direção, cores e nome sempre à vista */ .trilho[hidden]{ display:none; } .trilho{ --tr-d:8px; } .trilho button{ width:var(--tr-d); height:var(--tr-d); } .trilho[data-tamanho="p"]{ --tr-d:6px; gap:10px; } .trilho[data-tamanho="g"]{ --tr-d:13px; gap:17px; } .trilho[data-lado="esquerda"]{ right:auto; left:clamp(14px,1.6vw,26px); } .trilho[data-lado="esquerda"] button span{ right:auto; left:18px; transform:translateY(-50%) translateX(-6px); } .trilho[data-lado="esquerda"] button:hover span{ transform:translateY(-50%) translateX(0); } .trilho[data-altura="topo"]{ top:24%; } .trilho[data-altura="base"]{ top:76%; } .trilho[data-formato="tracos"] button{ width:calc(var(--tr-d) * 2.6); height:3px; border-radius:2px; } .trilho[data-direcao="horizontal"]{ flex-direction:row; right:auto; left:50%; top:auto; bottom:22px; transform:translateX(-50%); } .trilho[data-direcao="horizontal"][data-altura="topo"]{ top:70px; bottom:auto; } .trilho[data-direcao="horizontal"] button span{ right:auto; left:50%; top:auto; bottom:18px; transform:translateX(-50%) translateY(6px); } .trilho[data-direcao="horizontal"] button:hover span{ transform:translateX(-50%) translateY(0); } .trilho[data-rotulos="sempre"] button span{ opacity:1; } .trilho[data-rotulos="sempre"][data-lado="direita"][data-direcao="vertical"] button span, .trilho[data-rotulos="sempre"][data-lado="esquerda"][data-direcao="vertical"] button span{ transform:translateY(-50%) translateX(0); } .trilho[data-rotulos="sempre"][data-direcao="horizontal"] button span{ transform:translateX(-50%) translateY(0); } body .trilho[data-tr-cor] button{ background:var(--tr-cor); } body .trilho[data-tr-ativa] button.on{ background:var(--tr-ativa); } body.secao-escura .trilho[data-tr-cor] button{ background:var(--tr-cor); } body.secao-escura .trilho[data-tr-ativa] button.on{ background:var(--tr-ativa); } /* modelos de card, escolhidos no editor para cada lista (atributo data-cartao na grade) */ [data-cartao="imagem-total"] .card{ position:relative; display:block !important; min-height:clamp(320px,32vw,440px); border:0 !important; overflow:hidden; isolation:isolate; } [data-cartao="imagem-total"] .card__media{ position:absolute !important; inset:0; height:100%; aspect-ratio:auto !important; } [data-cartao="imagem-total"] .card__media > cp-enfeite[data-pos="depois"]{ background:none !important; } [data-cartao="imagem-total"] .card__corpo{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(72px,9vw,112px) clamp(20px,2.2vw,28px) clamp(18px,2vw,24px); background:linear-gradient(to top, rgba(5,12,24,.93) 0%, rgba(5,12,24,.76) 40%, rgba(5,12,24,0) 100%); } [data-cartao="imagem-total"] .card__corpo h3{ color:#fff !important; margin-bottom:8px; } [data-cartao="imagem-total"] .card__corpo p{ color:rgba(255,255,255,.84) !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } [data-cartao="imagem-total"] .card__pe{ color:#fff !important; border-top-color:rgba(255,255,255,.26) !important; margin-top:14px; padding-top:12px; } [data-cartao="horizontal"]{ grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)) !important; } [data-cartao="horizontal"] .card{ display:flex !important; flex-direction:row; } [data-cartao="horizontal"] .card__media{ flex:0 0 42%; aspect-ratio:auto !important; min-height:220px; } [data-cartao="horizontal"] .card__corpo{ flex:1; justify-content:center; } [data-cartao="limpo"] .card{ background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; } [data-cartao="limpo"] .card:hover{ transform:none !important; box-shadow:none !important; } [data-cartao="limpo"] .card__media{ border-radius:16px; } [data-cartao="limpo"] .card__corpo{ padding:16px 2px 0 !important; } [data-cartao="limpo"] .card__pe{ border-top:0 !important; padding-top:10px; } [data-cartao="compacto"]{ grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)) !important; gap:14px !important; } [data-cartao="compacto"] .card{ display:flex !important; flex-direction:row; align-items:center; } [data-cartao="compacto"] .card__media{ flex:0 0 112px; width:112px; height:112px; aspect-ratio:auto !important; border-radius:14px; margin:12px 0 12px 12px; } [data-cartao="compacto"] .card__tag, [data-cartao="compacto"] .prov{ display:none; } [data-cartao="compacto"] .card__corpo{ padding:14px 18px !important; } [data-cartao="compacto"] .card__corpo p{ display:none; } [data-cartao="compacto"] .card__pe{ border-top:0 !important; padding-top:6px; } @media (max-width:640px){ [data-cartao="horizontal"] .card{ flex-direction:column; } [data-cartao="horizontal"] .card__media{ flex:none; aspect-ratio:16/10 !important; min-height:0; } } /* carrossel: novos formatos (minimalista, contador, histórias, cartão), transição à escolha, e pontos com lugar e forma à escolha */ .cvi--minimalista .cvi__slide, .cvi--contador .cvi__slide, .cvi--historias .cvi__slide, .cvi--cartao .cvi__slide{ transform:translateX(calc(var(--pos, 0) * 100%)); } :is(.cvi--classico, .cvi--minimalista, .cvi--contador, .cvi--historias, .cvi--cartao)[data-transicao="esmaecer"] .cvi__slide{ transform:none; opacity:0; transition:opacity .75s ease; z-index:1; } :is(.cvi--classico, .cvi--minimalista, .cvi--contador, .cvi--historias, .cvi--cartao)[data-transicao="esmaecer"] .cvi__slide.is-ativo{ opacity:1; z-index:2; } :is(.cvi--classico, .cvi--minimalista, .cvi--contador, .cvi--historias, .cvi--cartao)[data-transicao="zoom"] .cvi__slide{ transform:scale(1.1); opacity:0; transition:opacity .85s ease, transform 1.3s cubic-bezier(.2,.7,.2,1); z-index:1; } :is(.cvi--classico, .cvi--minimalista, .cvi--contador, .cvi--historias, .cvi--cartao)[data-transicao="zoom"] .cvi__slide.is-ativo{ transform:scale(1); opacity:1; z-index:2; } .cvi--minimalista .cvi__palco, .cvi--contador .cvi__palco, .cvi--historias .cvi__palco{ border-radius:20px; } .cvi--minimalista:not([data-controles="setas"]) .cvi__seta, .cvi--historias:not([data-controles="setas"]) .cvi__seta{ display:none; } .cvi--minimalista[data-pontos-pos="auto"] .cvi__pontos{ position:absolute; left:0; right:0; bottom:16px; margin:0; z-index:7; color:#fff; filter:drop-shadow(0 1px 3px rgba(0,0,0,.45)); } .cvi--contador[data-pontos-pos="auto"] .cvi__pontos{ display:none; } .cvi__contador{ position:absolute; right:14px; top:14px; z-index:7; padding:6px 12px; border-radius:999px; background:rgba(10,20,40,.55); color:#fff; font:600 12px/1 system-ui, sans-serif; letter-spacing:.08em; backdrop-filter:blur(6px); pointer-events:none; } .cvi--historias .cvi__pontos{ position:absolute; left:16px; right:16px; top:14px; margin:0; gap:5px; z-index:7; color:#fff; } .cvi--historias .cvi__pontos button{ flex:1; width:auto; height:3px; border-radius:2px; background:rgba(255,255,255,.4); opacity:1; transform:none; } .cvi--historias .cvi__pontos button.is-ativo{ background:#fff; transform:none; } .cvi--cartao{ padding:12px 12px 6px; background:#fff; border-radius:28px; box-shadow:0 24px 60px rgba(15,30,70,.16); } .cvi--cartao .cvi__palco{ border-radius:18px; } .cvi--cartao .cvi__seta{ width:36px; height:36px; } .cvi[data-pontos-pos="dentro"] .cvi__pontos, .cvi[data-pontos-pos="dentro-esq"] .cvi__pontos, .cvi[data-pontos-pos="dentro-dir"] .cvi__pontos, .cvi[data-pontos-pos="topo"] .cvi__pontos, .cvi[data-pontos-pos="lateral-dir"] .cvi__pontos, .cvi[data-pontos-pos="lateral-esq"] .cvi__pontos{ position:absolute; margin:0; z-index:7; color:#fff; filter:drop-shadow(0 1px 3px rgba(0,0,0,.45)); } .cvi[data-pontos-pos="dentro"] .cvi__pontos{ left:0; right:0; bottom:16px; } .cvi[data-pontos-pos="dentro-esq"] .cvi__pontos{ left:18px; bottom:16px; justify-content:flex-start; } .cvi[data-pontos-pos="dentro-dir"] .cvi__pontos{ right:18px; bottom:16px; justify-content:flex-end; } .cvi[data-pontos-pos="topo"] .cvi__pontos{ left:0; right:0; top:16px; } .cvi[data-pontos-pos="lateral-dir"] .cvi__pontos{ right:16px; top:50%; transform:translateY(-50%); flex-direction:column; } .cvi[data-pontos-pos="lateral-esq"] .cvi__pontos{ left:16px; top:50%; transform:translateY(-50%); flex-direction:column; } .cvi[data-pontos-forma="quadrado"] .cvi__pontos button{ border-radius:2px; } .cvi[data-pontos-forma="barra"] .cvi__pontos button{ width:22px; height:4px; border-radius:2px; } .cvi[data-pontos-forma="triangulo"] .cvi__pontos button{ width:12px; height:11px; border-radius:0; clip-path:polygon(50% 0, 100% 100%, 0 100%); } .cvi[data-pontos-forma="losango"] .cvi__pontos button{ width:11px; height:11px; border-radius:0; clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } /* carrossel: para onde as imagens andam (esquerda, direita, cima, baixo) e a barrinha de progresso do destaque com qualquer tempo */ :is(.cvi--classico, .cvi--minimalista, .cvi--contador, .cvi--historias, .cvi--cartao)[data-transicao="deslizar"][data-direcao="direita"] .cvi__slide{ transform:translateX(calc(var(--pos, 0) * -100%)); } :is(.cvi--classico, .cvi--minimalista, .cvi--contador, .cvi--historias, .cvi--cartao)[data-transicao="deslizar"][data-direcao="cima"] .cvi__slide{ transform:translateY(calc(var(--pos, 0) * 100%)); } :is(.cvi--classico, .cvi--minimalista, .cvi--contador, .cvi--historias, .cvi--cartao)[data-transicao="deslizar"][data-direcao="baixo"] .cvi__slide{ transform:translateY(calc(var(--pos, 0) * -100%)); } .cvi--destaque:not([data-autoplay="parado"]) .cvi__aba.is-ativo::before{ animation:cvi-progresso var(--dur,5s) linear; } /* carrossel: os cantos valem para o carrossel inteiro (moldura e todas as imagens), não para uma imagem só */ .cvi[data-cantos="reto"]{ --cantos:0px; } .cvi[data-cantos="suave"]{ --cantos:14px; } .cvi[data-cantos="redondo"]{ --cantos:28px; } .cvi[data-cantos="grande"]{ --cantos:48px; } .cvi[data-cantos="reto"], .cvi[data-cantos="suave"], .cvi[data-cantos="redondo"], .cvi[data-cantos="grande"]{ border-radius:var(--cantos); } .cvi[data-cantos="reto"] .cvi__palco, .cvi[data-cantos="suave"] .cvi__palco, .cvi[data-cantos="redondo"] .cvi__palco, .cvi[data-cantos="grande"] .cvi__palco, .cvi[data-cantos="reto"] .cvi__slide, .cvi[data-cantos="suave"] .cvi__slide, .cvi[data-cantos="redondo"] .cvi__slide, .cvi[data-cantos="grande"] .cvi__slide, .cvi[data-cantos="reto"] .cvi__slide img, .cvi[data-cantos="suave"] .cvi__slide img, .cvi[data-cantos="redondo"] .cvi__slide img, .cvi[data-cantos="grande"] .cvi__slide img, .cvi[data-cantos="reto"] .cvi__slide .preencher, .cvi[data-cantos="suave"] .cvi__slide .preencher, .cvi[data-cantos="redondo"] .cvi__slide .preencher, .cvi[data-cantos="grande"] .cvi__slide .preencher{ border-radius:var(--cantos); } /* escolhas por tipo de elemento: formato e tamanho do botão, colunas dos números, lado da foto no texto com foto */ .bloco[data-forma-botao="reto"] .btn{ border-radius:0; } .bloco[data-forma-botao="suave"] .btn{ border-radius:10px; } .bloco[data-forma-botao="pilula"] .btn{ border-radius:999px; } .bloco[data-tamanho-botao="pequeno"] .btn{ padding:9px 16px; font-size:.72rem; min-height:36px; } .bloco[data-tamanho-botao="grande"] .btn{ padding:17px 34px; font-size:.95rem; min-height:58px; } .bloco--numeros[data-colunas="2"] .bloco__numeros{ grid-template-columns:repeat(2, 1fr); } .bloco--numeros[data-colunas="3"] .bloco__numeros{ grid-template-columns:repeat(3, 1fr); } .bloco--numeros[data-colunas="4"] .bloco__numeros{ grid-template-columns:repeat(4, 1fr); } @media (max-width:640px){ .bloco--numeros[data-colunas="3"] .bloco__numeros, .bloco--numeros[data-colunas="4"] .bloco__numeros{ grid-template-columns:repeat(2, 1fr); } } .bloco--textoFoto[data-lado-foto="esquerda"] .bloco__lado{ direction:rtl; } .bloco--textoFoto[data-lado-foto="esquerda"] .bloco__lado > *{ direction:ltr; } .bloco--textoFoto[data-lado-foto="direita"] .bloco__lado{ direction:ltr; } @media (max-width:780px){ .bloco--textoFoto[data-lado-foto] .bloco__lado{ direction:ltr; } } /* lista em cartões: modelos de card (os mesmos das listas do modelo) e colunas da grade */ [data-cartao="imagem-total"] > .itl--cartao{ position:relative; display:block; min-height:clamp(300px,30vw,420px); overflow:hidden; isolation:isolate; } [data-cartao="imagem-total"] > .itl--cartao .itl__foto{ position:absolute; inset:0; aspect-ratio:auto; } [data-cartao="imagem-total"] > .itl--cartao .itl__corpo{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(72px,9vw,112px) clamp(18px,2vw,24px) clamp(16px,2vw,22px); background:linear-gradient(to top, rgba(5,12,24,.93) 0%, rgba(5,12,24,.76) 40%, rgba(5,12,24,0) 100%); } [data-cartao="imagem-total"] > .itl--cartao h3{ color:#fff !important; } [data-cartao="imagem-total"] > .itl--cartao .itl__corpo p{ color:rgba(255,255,255,.84) !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } [data-cartao="horizontal"] > .itl--cartao{ flex-direction:row; align-items:stretch; } [data-cartao="horizontal"] > .itl--cartao .itl__foto{ flex:0 0 42%; aspect-ratio:auto; min-height:180px; } [data-cartao="horizontal"] > .itl--cartao .itl__corpo{ flex:1; align-self:center; } [data-cartao="limpo"] > .itl--cartao{ background:transparent; border:0; box-shadow:none; border-radius:0; } [data-cartao="limpo"] > .itl--cartao .itl__foto{ border-radius:16px; } [data-cartao="compacto"] > .itl--cartao{ flex-direction:row; align-items:center; gap:14px; } [data-cartao="compacto"] > .itl--cartao .itl__foto{ flex:0 0 96px; width:96px; height:96px; aspect-ratio:auto; border-radius:14px; } [data-cartao="compacto"] > .itl--cartao .itl__corpo p{ display:none; } .bloco--lista[data-colunas="2"] .bloco__lista--cartoes{ grid-template-columns:repeat(2, 1fr); } .bloco--lista[data-colunas="3"] .bloco__lista--cartoes{ grid-template-columns:repeat(3, 1fr); } .bloco--lista[data-colunas="4"] .bloco__lista--cartoes{ grid-template-columns:repeat(4, 1fr); } @media (max-width:780px){ .bloco--lista[data-colunas="3"] .bloco__lista--cartoes, .bloco--lista[data-colunas="4"] .bloco__lista--cartoes{ grid-template-columns:repeat(2, 1fr); } [data-cartao="horizontal"] > .itl--cartao{ flex-direction:column; } [data-cartao="horizontal"] > .itl--cartao .itl__foto{ flex:none; aspect-ratio:16/10; } } @media (max-width:480px){ .bloco--lista[data-colunas] .bloco__lista--cartoes{ grid-template-columns:1fr; } } /* estilo da citação: linha ao lado (padrão), aspas grandes, centralizada ou em caixa */ .bloco--citacao[data-estilo-citacao="aspas"] blockquote{ border-left:0; padding-left:0; padding-top:clamp(56px,7vw,76px); position:relative; } .bloco--citacao[data-estilo-citacao="aspas"] blockquote::before{ content:"\201C"; position:absolute; top:0; left:-4px; font-family:var(--serif); font-size:clamp(4.5rem,8vw,6.5rem); line-height:1; color:var(--ouro); } .bloco--citacao[data-estilo-citacao="centro"] blockquote{ border-left:0; padding-left:0; padding-right:0; text-align:center; position:relative; padding-top:clamp(56px,7vw,76px); } .bloco--citacao[data-estilo-citacao="centro"] blockquote::before{ content:"\201C"; position:absolute; top:0; left:0; right:0; font-family:var(--serif); font-size:clamp(4.5rem,8vw,6.5rem); line-height:1; color:var(--ouro); } .bloco--citacao[data-estilo-citacao="caixa"] blockquote{ border-left:0; background:var(--creme-2); border-radius:18px; padding:clamp(22px,3.2vw,40px); } /* cor do gráfico: a cor do site (padrão) ou uma das cores à escolha */ .bloco[data-cor-grafico="azul"] .bloco__grafico{ --g-cor:#2F5FA8; } .bloco[data-cor-grafico="verde"] .bloco__grafico{ --g-cor:#2E8B57; } .bloco[data-cor-grafico="vermelho"] .bloco__grafico{ --g-cor:#C0392B; } .bloco[data-cor-grafico="laranja"] .bloco__grafico{ --g-cor:#E07B1F; } .bloco[data-cor-grafico="roxo"] .bloco__grafico{ --g-cor:#7B4FB5; } .bloco[data-cor-grafico="cinza"] .bloco__grafico{ --g-cor:#6B7280; } /* abas: estilo */ .bloco--abas[data-estilo-abas="pilulas"] .abas__lista{ border-bottom:0; gap:8px; } .bloco--abas[data-estilo-abas="pilulas"] .abas__aba{ padding:9px 18px; border-radius:999px; background:rgba(127,127,127,.14); } .bloco--abas[data-estilo-abas="pilulas"] .abas__aba::after{ display:none; } .bloco--abas[data-estilo-abas="pilulas"] .abas__aba.is-ativa{ background:var(--tinta); color:var(--fundo, #fff); } .bloco--abas[data-estilo-abas="caixa"] .abas__lista{ border:1px solid var(--linha, rgba(0,0,0,.14)); border-radius:12px; padding:4px; gap:4px; } .bloco--abas[data-estilo-abas="caixa"] .abas__aba{ padding:9px 18px; border-radius:9px; } .bloco--abas[data-estilo-abas="caixa"] .abas__aba::after{ display:none; } .bloco--abas[data-estilo-abas="caixa"] .abas__aba.is-ativa{ background:rgba(127,127,127,.18); } /* destaque central com mais prévias: duas imagens de cada lado (precisa de 5 ou mais; sempre simétrico), cada par menor e mais escuro que o anterior; camadas opacas, para uma não aparecer através da outra */ .cvi--central[data-nprev="2"] .cvi__slide{ inset:0 auto 0 25%; width:50%; } .cvi--central[data-nprev="2"] .cvi__slide[data-pos="-1"]{ opacity:1; transform:translateX(-34%) scale(.76); filter:saturate(.85) brightness(.86); } .cvi--central[data-nprev="2"] .cvi__slide[data-pos="1"]{ opacity:1; transform:translateX(34%) scale(.76); filter:saturate(.85) brightness(.86); } .cvi--central[data-nprev="2"] .cvi__slide[data-pos="-2"]{ opacity:1; z-index:1; transform:translateX(-70.5%) scale(.55); filter:saturate(.7) brightness(.72); pointer-events:auto; } .cvi--central[data-nprev="2"] .cvi__slide[data-pos="2"]{ opacity:1; z-index:1; transform:translateX(70.5%) scale(.55); filter:saturate(.7) brightness(.72); pointer-events:auto; } /* formulário solto: campos que seguem a cor do texto do site, com borda neutra */ .bloco--formulario .formlivre{ display:grid; gap:14px; max-width:560px; margin-top:12px; } .formlivre__campo{ display:grid; gap:6px; } .formlivre__campo label{ font-size:.82rem; letter-spacing:.02em; opacity:.85; } .formlivre__campo label small{ opacity:.6; } .formlivre input, .formlivre textarea{ font:inherit; color:inherit; background:transparent; border:1px solid rgba(127,127,127,.4); border-radius:10px; padding:.7rem .85rem; width:100%; box-sizing:border-box; } .formlivre input:focus-visible, .formlivre textarea:focus-visible{ outline:2px solid currentColor; outline-offset:2px; } .formlivre textarea{ resize:vertical; min-height:7rem; } .formlivre__isca{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .formlivre .btn{ justify-self:start; } .formlivre__st, .formlivre__ok{ margin:0; font-size:.9rem; } .formlivre__st.is-erro{ color:#b3261e; } .formlivre__ok{ padding:.9rem 1rem; border:1px solid rgba(127,127,127,.4); border-radius:10px; } /* celular e tablet: elemento "por cima" sem posição própria nessa tela segue o fluxo da seção; duas prévias de cada lado só em tela larga; formulário em seção clara */ .elemento-livre[data-fluxo="sobre"][data-cp-fluxo-tela]{ position:relative; left:auto; top:auto; transform:none; width:100%; max-width:100%; margin-block:clamp(20px,4vw,32px); z-index:auto; } @media (max-width:540px){ .cvi--central[data-nprev="2"] .cvi__slide{ inset:0 auto 0 17%; width:66%; } .cvi--central[data-nprev="2"] .cvi__slide[data-pos="-1"]{ opacity:.7; transform:translateX(-76%) scale(.74); filter:saturate(.8); } .cvi--central[data-nprev="2"] .cvi__slide[data-pos="1"]{ opacity:.7; transform:translateX(76%) scale(.74); filter:saturate(.8); } .cvi--central[data-nprev="2"] .cvi__slide[data-pos="-2"], .cvi--central[data-nprev="2"] .cvi__slide[data-pos="2"]{ opacity:0; pointer-events:none; } .abas__lista{ flex-wrap:wrap; row-gap:12px; overflow-x:visible; } } .secao--creme2 .form{ background:#fff; border-color:var(--linha); box-shadow:0 22px 44px -26px rgba(var(--azul-rgb),.3); } .secao--creme2 .campo label{ color:var(--tinta); opacity:.8; } .secao--creme2 .campo input, .secao--creme2 .campo textarea{ color:var(--tinta); border-bottom-color:rgba(var(--azul-rgb),.3); } .secao--creme2 .form__aviso, .secao--creme2 .form .aviso{ color:var(--tinta); opacity:.65; } #participar h2{ margin-bottom:clamp(18px,3vw,28px); } /* item escondido do menu do celular continua escondido (o display do link vencia o atributo hidden) */ .menu-mobile a[hidden]{ display:none !important; }