/* ========================================================================= IMERSÃO: TRÁFEGO PAGO COM CLAUDE Exposição digital — folha de estilo única ========================================================================= */ /* ---------------------------------------------------------------- tokens */ :root{ --tinta: #06060A; --tinta-2: #0A0A10; --papel: #F4F0EA; --papel-80: rgba(244,240,234,.80); --papel-60: rgba(244,240,234,.58); --papel-40: rgba(244,240,234,.38); --papel-14: rgba(244,240,234,.14); --papel-08: rgba(244,240,234,.08); --acento: #D97757; /* trocado por sala, via JS */ --acento-2: #E8C06A; --serif: 'Instrument Serif', 'Times New Roman', Georgia, serif; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --pad: clamp(20px, 5.4vw, 92px); --caixa: min(540px, 44vw); --ease: cubic-bezier(.22,.61,.36,1); --ease-2: cubic-bezier(.65,0,.35,1); } /* ---------------------------------------------------------------- reset */ *,*::before,*::after{ box-sizing:border-box } /* Atenção: não coloque overflow no . Com o em overflow, o overflow-x:hidden do deixa de propagar para a viewport, o body vira container de rolagem e o position:sticky das salas para de funcionar. */ html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth } body{ margin:0; background:var(--tinta); color:var(--papel); font-family:var(--sans); font-weight:400; font-size:clamp(15px,1.02vw,17px); line-height:1.62; letter-spacing:.004em; overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3,p,dl,dd,figure{ margin:0 } ul,ol{ margin:0; padding:0; list-style:none } img{ display:block; max-width:100% } a{ color:inherit; text-decoration:none } button{ font:inherit } ::selection{ background:var(--acento); color:#0A0A10 } .skip{ position:fixed; left:-9999px; top:12px; z-index:200; background:var(--papel); color:var(--tinta); padding:10px 16px; border-radius:4px; font-size:14px; } .skip:focus{ left:12px } :focus-visible{ outline:2px solid var(--acento); outline-offset:4px; border-radius:2px; } /* ============================================================= palco 3d */ #palco{ position:fixed; inset:0; z-index:0; background: radial-gradient(120% 80% at 50% 12%, #101018 0%, transparent 60%), linear-gradient(180deg,#08080E 0%,#06060A 55%,#050508 100%); } #gl{ position:absolute; inset:0; width:100%; height:100%; display:block } .fx{ position:absolute; inset:0; pointer-events:none } .fx-halo{ background:radial-gradient(46% 42% at 50% 46%, color-mix(in srgb, var(--acento) 16%, transparent) 0%, transparent 70%); opacity:.55; transition:background 1.2s var(--ease); mix-blend-mode:screen; } .fx-vinheta{ background:radial-gradient(122% 96% at 50% 44%, transparent 38%, rgba(0,0,0,.62) 100%); } .fx-grao{ opacity:.05; mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,"); } /* =============================================================== loader */ #loader{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; background:var(--tinta); transition:opacity .9s var(--ease), visibility .9s; } #loader.fora{ opacity:0; visibility:hidden } .loader-in{ text-align:center; padding:0 24px } .loader-mark svg{ width:52px; height:52px; display:block; margin:0 auto 26px } .loader-mark circle{ fill:none; stroke-width:2.2; transform-origin:32px 32px } .loader-mark .r1{ stroke:var(--acento); opacity:.45; animation:gira 5s linear infinite } .loader-mark .r2{ stroke:var(--acento-2); opacity:.8; animation:gira 3.2s linear infinite reverse } .loader-mark .r3{ fill:var(--acento); stroke:none } @keyframes gira{ to{ transform:rotate(360deg) } } .loader-tit{ font-family:var(--serif); font-size:clamp(18px,2.4vw,24px); color:var(--papel-80); letter-spacing:.01em; margin-bottom:22px; } .loader-bar{ width:min(240px,60vw); height:1px; margin:0 auto 14px; background:var(--papel-14); overflow:hidden; } .loader-bar i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--acento),var(--acento-2)); transition:width .4s var(--ease); } .loader-txt{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--papel-40); } /* ================================================================== hud */ .hud{ position:fixed; z-index:60; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px var(--pad); pointer-events:none; mix-blend-mode:difference; } .hud > *{ pointer-events:auto } .hud-marca{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--papel-80); } .hud-ponto{ width:6px; height:6px; border-radius:50%; background:var(--acento); box-shadow:0 0 12px var(--acento); animation:pulsa 2.6s var(--ease) infinite; } @keyframes pulsa{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } } .hud-dir{ display:flex; align-items:center; gap:22px } .hud-sala{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--papel-40); display:inline-flex; align-items:center; gap:8px; } .hud-sala b{ color:var(--papel-80); font-weight:500 } .hud-sala i{ color:var(--papel-14); font-style:normal } .hud-sala span{ max-width:22ch; overflow:hidden; white-space:nowrap; text-overflow:ellipsis } .hud-link{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--papel-80); padding-bottom:3px; border-bottom:1px solid var(--papel-14); transition:border-color .4s var(--ease), color .4s var(--ease); } .hud-link:hover{ color:var(--papel); border-color:var(--acento) } /* ------------------------------------------------------ barra de topo */ .progresso{ position:fixed; z-index:61; top:0; left:0; right:0; height:1px; background:transparent; } .progresso i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,transparent,var(--acento),var(--acento-2)); transition:background 1s var(--ease); } /* -------------------------------------------------- mapa da exposição */ .mapa{ position:fixed; z-index:60; left:20px; top:50%; transform:translateY(-50%); } .mapa ol{ display:flex; flex-direction:column; gap:11px } .mapa li{ display:flex; align-items:center; gap:10px } .mapa button{ appearance:none; background:none; border:0; padding:0; cursor:pointer; display:flex; align-items:center; gap:10px; } .mapa .traco{ display:block; width:14px; height:1px; background:var(--papel-14); transition:width .5s var(--ease), background .5s var(--ease); } .mapa .nome{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--papel-60); white-space:nowrap; padding:4px 9px; border-radius:2px; background:rgba(6,6,10,.9); border:1px solid var(--papel-08); opacity:0; transform:translateX(-6px); transition:opacity .35s var(--ease), transform .35s var(--ease); } .mapa li:hover .traco{ width:22px; background:var(--papel-40) } .mapa li:hover .nome{ opacity:1; transform:none } .mapa li.ativa .traco{ width:30px; background:var(--acento) } /* ----------------------------------------------------------- cta fixo */ .cta-fixo{ position:fixed; z-index:62; right:var(--pad); bottom:26px; display:inline-flex; align-items:center; gap:10px; padding:13px 20px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta); background:var(--papel); border-radius:2px; opacity:0; transform:translateY(14px); pointer-events:none; transition:opacity .6s var(--ease), transform .6s var(--ease), background .5s var(--ease); box-shadow:0 18px 48px rgba(0,0,0,.5); } .cta-fixo.vis{ opacity:1; transform:none; pointer-events:auto } .cta-fixo:hover{ background:var(--acento) } .cta-fixo svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8 } /* ============================================================ estrutura */ #conteudo{ position:relative; z-index:10 } .sala{ position:relative; min-height:172vh; padding-inline:var(--pad); } .sala > .box{ position:sticky; top:0; min-height:100vh; display:flex; flex-direction:column; justify-content:center; max-width:var(--caixa); padding-block:clamp(64px, 9vh, 96px); } .sala[data-lado="dir"] > .box{ margin-left:auto } .sala[data-lado="centro"] > .box{ margin-inline:auto; max-width:min(760px,86vw) } .box-centro{ text-align:center; align-items:center } /* véu de leitura atrás do texto: a escultura fica bonita, mas o texto manda. Os recuos laterais param exatamente na borda da janela, senão o pseudo elemento cria alguns pixels de rolagem horizontal. */ .box::before{ content:''; position:absolute; top:-6%; bottom:-6%; left:-34%; right:-34%; background: radial-gradient(48% 44% at 44% 50%, rgba(5,5,9,.94) 0%, rgba(5,5,9,.72) 52%, transparent 82%), radial-gradient(78% 62% at 44% 50%, rgba(5,5,9,.62) 0%, transparent 76%); z-index:-1; pointer-events:none; } .sala[data-lado="esq"] > .box::before{ left:calc(var(--pad) * -1) } .sala[data-lado="dir"] > .box::before{ right:calc(var(--pad) * -1) } .sala[data-lado="centro"] > .box::before{ left:-7vw; right:-7vw; background: radial-gradient(50% 40% at 50% 42%, rgba(5,5,9,.93) 0%, rgba(5,5,9,.70) 54%, transparent 84%), radial-gradient(80% 58% at 50% 44%, rgba(5,5,9,.58) 0%, transparent 78%); } .sala-hero{ min-height:118vh } .sala-hero > .box{ padding-block:76px 60px } .sala-manifesto{ min-height:150vh } .sala-requisitos{ min-height:150vh } .sala-final{ min-height:126vh } /* ========================================================= tipografia */ .kicker{ display:inline-flex; align-items:center; gap:12px; font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--acento); margin-bottom:26px; transition:color .8s var(--ease); } .kicker-linha{ display:block; width:34px; height:1px; background:currentColor; opacity:.6 } .box-centro .kicker{ justify-content:center } /* selo de posicionamento (abertura) */ .selo{ display:inline-flex; align-items:center; gap:10px; align-self:flex-start; padding:8px 16px 8px 13px; margin-bottom:26px; border:1px solid color-mix(in srgb, var(--acento) 40%, transparent); background:color-mix(in srgb, var(--acento) 9%, transparent); border-radius:999px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--papel-80); transition:border-color .8s var(--ease), background .8s var(--ease); } .box-centro .selo{ align-self:center } .selo b{ font-weight:500; color:var(--acento); transition:color .8s var(--ease) } .selo-ponto{ width:6px; height:6px; border-radius:50%; flex:none; background:var(--acento); box-shadow:0 0 10px var(--acento); animation:pulsa 2.6s var(--ease) infinite; } .display{ font-family:var(--serif); font-weight:400; font-size:clamp(3.0rem,8.6vw,7.4rem); line-height:.92; letter-spacing:-.022em; margin-bottom:28px; } .display span{ display:block } .display em{ font-style:italic; color:var(--acento); transition:color .8s var(--ease) } .display-sm{ font-size:clamp(2.6rem,6.6vw,5.4rem) } .grande{ font-family:var(--serif); font-weight:400; font-size:clamp(2.1rem,4.7vw,4.1rem); line-height:1.06; letter-spacing:-.016em; margin-bottom:26px; } .grande span{ display:block } .grande em{ font-style:italic; color:var(--acento); transition:color .8s var(--ease) } .titulo{ font-family:var(--serif); font-weight:400; font-size:clamp(2.4rem,5.4vw,4.6rem); line-height:1.0; letter-spacing:-.018em; margin-bottom:18px; } .titulo span{ display:block } .titulo em{ font-style:italic; color:var(--acento); transition:color .8s var(--ease) } .lede{ font-family:var(--serif); font-size:clamp(1.25rem,2.1vw,1.85rem); color:var(--papel-80); letter-spacing:.005em; margin-bottom:16px; } .lede em{ font-style:italic; color:var(--acento); transition:color .8s var(--ease) } .sub{ max-width:44ch; color:var(--papel-60); margin-bottom:34px; } .box-centro .sub{ margin-inline:auto } .corpo{ color:var(--papel-60); max-width:46ch; margin-bottom:30px } .corpo-centro{ margin-inline:auto; text-align:center; max-width:52ch } /* parágrafo de ênfase, com a régua de cor da sala */ .realce{ position:relative; max-width:46ch; margin-bottom:32px; padding:2px 0 2px 20px; color:var(--papel-80); font-size:.98em; } .realce::before{ content:''; position:absolute; left:0; top:3px; bottom:3px; width:2px; background:var(--acento); opacity:.75; transition:background .8s var(--ease); } .ficha{ font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:lowercase; color:var(--papel-40); padding-bottom:18px; margin-bottom:26px; border-bottom:1px solid var(--papel-08); max-width:100%; } /* ------------------------------------------------------ etiqueta museu */ .etiqueta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:22px; } .etiqueta b{ font-weight:500; color:var(--tinta); background:var(--acento); padding:4px 9px; border-radius:2px; letter-spacing:.16em; transition:background .8s var(--ease); } .etiqueta i{ display:block; width:22px; height:1px; background:var(--papel-14) } .etiqueta span{ color:var(--papel-40) } /* credencial: conexão pela API oficial da plataforma */ .selo-api{ display:inline-flex; align-items:center; gap:7px; font-style:normal; font-size:9.5px; letter-spacing:.18em; padding:5px 10px 5px 8px; border-radius:2px; color:var(--acento); border:1px solid color-mix(in srgb, var(--acento) 45%, transparent); background:color-mix(in srgb, var(--acento) 8%, transparent); transition:color .8s var(--ease), border-color .8s var(--ease), background .8s var(--ease); } .selo-api::before{ content:''; width:4px; height:4px; border-radius:50%; flex:none; background:currentColor; box-shadow:0 0 7px currentColor; } /* --------------------------------------------------------------- listas */ .saidas{ display:flex; flex-direction:column; gap:0 } .saidas li{ position:relative; padding:13px 0 13px 26px; border-top:1px solid var(--papel-08); color:var(--papel-80); font-size:.94em; } .saidas li:last-child{ border-bottom:1px solid var(--papel-08) } .saidas li::before{ content:''; position:absolute; left:2px; top:calc(50% - 2px); width:5px; height:5px; border-radius:50%; background:var(--acento); opacity:.85; transition:background .8s var(--ease); } /* a sala mais cheia da exposição: medida um pouco mais larga para caber */ .sala-publico .corpo{ max-width:56ch; margin-bottom:24px } .sala-publico .realce{ max-width:56ch; margin-bottom:26px } .publico{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--papel-08); border:1px solid var(--papel-08); } .publico li{ background:rgba(8,8,13,.72); padding:19px 19px; display:flex; flex-direction:column; gap:7px; transition:background .5s var(--ease); } .publico li:hover{ background:rgba(16,14,18,.9) } .publico b{ font-weight:500; font-size:.92em; letter-spacing:.01em; color:var(--papel); } .publico span{ color:var(--papel-40); font-size:.86em; line-height:1.55 } .checklist{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:8px auto 38px; max-width:640px; } .checklist li{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--papel-08); border-radius:999px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--papel-60); transition:border-color .5s var(--ease), color .5s var(--ease); } .checklist li::before{ content:'✓'; color:var(--acento); font-size:12px; transition:color .8s var(--ease); } .checklist li:hover{ border-color:var(--acento); color:var(--papel) } /* ------------------------------------------------------------- negação */ .nega{ font-family:var(--serif); font-weight:400; font-size:clamp(1.8rem,4.2vw,3.5rem); line-height:1.2; letter-spacing:-.012em; margin-bottom:10px; color:var(--papel); } .nega s{ text-decoration:none; position:relative; color:var(--papel-40); } .nega s::after{ content:''; position:absolute; left:-2px; right:-2px; top:52%; height:1.5px; background:var(--acento); transform:scaleX(var(--corte,0)); transform-origin:left; transition:transform .8s var(--ease-2); } .sala-requisitos .corpo{ margin-top:26px } /* -------------------------------------------------------------- curador */ .curador{ display:grid; grid-template-columns:minmax(0,240px) minmax(0,1fr); gap:clamp(22px,3vw,42px); align-items:start; } .retrato{ position:relative } .retrato img{ width:100%; height:auto; border-radius:2px; filter:grayscale(.18) contrast(1.06); } .retrato::after{ content:''; position:absolute; inset:-10px -10px -10px -10px; border:1px solid var(--papel-08); pointer-events:none; } .retrato figcaption{ display:flex; flex-direction:column; gap:3px; margin-top:18px; padding-top:12px; border-top:1px solid var(--papel-08); } .retrato figcaption b{ font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--papel-80); } .retrato figcaption span{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--papel-40); } /* ---------------------------------------------------------------- fatos */ .fatos{ display:grid; gap:1px; background:var(--papel-08); border:1px solid var(--papel-08); margin:0 auto 34px; max-width:520px; width:100%; text-align:left; } .fatos:empty{ display:none } .fatos .linha{ display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr); gap:14px; padding:14px 18px; background:rgba(8,8,13,.78); } .fatos dt{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--papel-40); padding-top:2px; } .fatos dd{ margin:0; color:var(--papel-80); font-size:.95em } /* --------------------------------------------------------------- botões */ .hero-acoes{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:44px } .box-centro .hero-acoes{ justify-content:center } .btn{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:12px; padding:16px 26px; background:var(--papel); color:var(--tinta); font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; border-radius:2px; transition:color .45s var(--ease), transform .45s var(--ease); } .btn::before{ content:''; position:absolute; inset:0; z-index:0; background:var(--acento); transform:translateY(101%); transition:transform .55s var(--ease-2); } .btn > *{ position:relative; z-index:1 } .btn:hover::before{ transform:translateY(0) } .btn:hover{ transform:translateY(-2px) } .btn svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8 } .btn-grande{ padding:19px 34px; font-size:12px } .btn-ghost{ display:inline-flex; align-items:center; padding:16px 4px; font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--papel-60); border-bottom:1px solid var(--papel-14); transition:color .45s var(--ease), border-color .45s var(--ease); } .btn-ghost:hover{ color:var(--papel); border-color:var(--acento) } .aviso{ max-width:46ch; margin:18px auto 0; font-family:var(--mono); font-size:11px; line-height:1.7; color:var(--acento); } .aviso code{ background:var(--papel-08); padding:2px 6px; border-radius:2px; color:var(--papel-80); } .fino{ margin:2px 0 26px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--papel-40); } /* ------------------------------------------------------ dica do easter egg */ .hero-pe{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 26px; } .dica-egg{ appearance:none; cursor:pointer; display:inline-flex; align-items:center; gap:10px; padding:9px 17px 9px 14px; border-radius:999px; border:1px solid color-mix(in srgb, var(--acento) 34%, transparent); background:color-mix(in srgb, var(--acento) 7%, transparent); color:var(--papel-60); font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; line-height:1; transition:color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease); } .dica-egg b{ font-weight:500; color:var(--acento); padding:3px 7px; border-radius:2px; background:color-mix(in srgb, var(--acento) 15%, transparent); border:1px solid color-mix(in srgb, var(--acento) 30%, transparent); transition:color .8s var(--ease); } .dica-egg:hover{ color:var(--papel); border-color:var(--acento); background:color-mix(in srgb, var(--acento) 14%, transparent); transform:translateY(-2px); } .dica-egg-ponto{ width:6px; height:6px; border-radius:50%; flex:none; background:var(--acento); box-shadow:0 0 10px var(--acento); animation:pulsa 2.2s var(--ease) infinite; } .dica-egg .so-toque{ display:none } @media (hover:none){ .dica-egg .so-toque{ display:inline; font-style:normal; color:var(--acento); letter-spacing:.14em; } .dica-egg .so-toque::before{ content:' · ' } } .sala-requisitos .dica-egg, .sala-final .dica-egg{ margin-top:34px; align-self:center } /* -------------------------------------------------------------- dica rolar */ .dica{ display:inline-flex; align-items:center; gap:12px; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--papel-40); } .dica-rato{ display:block; width:17px; height:27px; border-radius:9px; border:1px solid var(--papel-14); position:relative; } .dica-rato i{ position:absolute; left:50%; top:6px; width:2px; height:5px; border-radius:2px; background:var(--acento); transform:translateX(-50%); animation:desce 1.9s var(--ease) infinite; } @keyframes desce{ 0%{ opacity:0; transform:translate(-50%,-3px) } 35%{ opacity:1 } 100%{ opacity:0; transform:translate(-50%,11px) } } /* -------------------------------------------------------------- rodapé */ .rodape{ position:relative; z-index:10; display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; padding:56px var(--pad) 68px; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--papel-40); border-top:1px solid var(--papel-08); background:linear-gradient(180deg, transparent, rgba(4,4,7,.9)); } .rodape-sep{ color:var(--papel-14) } /* ========================================================== easter egg */ .egg{ position:fixed; inset:0; z-index:130; display:grid; place-items:center; padding:24px; } .egg[hidden]{ display:none } .egg-fundo{ position:absolute; inset:0; background:rgba(4,4,7,.86); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); cursor:pointer; } .egg-cartao{ position:relative; z-index:1; width:min(520px, 100%); padding:clamp(32px, 4.4vw, 48px) clamp(24px, 3.6vw, 44px) clamp(26px, 3vw, 34px); text-align:center; background:linear-gradient(180deg, rgba(15,13,17,.97) 0%, rgba(8,8,12,.98) 100%); border:1px solid color-mix(in srgb, var(--acento) 26%, transparent); border-radius:4px; box-shadow:0 40px 120px rgba(0,0,0,.7), 0 0 0 1px rgba(244,240,234,.03) inset; overflow:hidden; } .egg-brilho{ position:absolute; left:50%; top:-42%; width:130%; height:90%; transform:translateX(-50%); background:radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--acento) 26%, transparent) 0%, transparent 70%); pointer-events:none; } .egg-cartao .kicker{ margin-bottom:20px; justify-content:center } .egg-titulo{ font-family:var(--serif); font-weight:400; font-size:clamp(2.1rem, 4.6vw, 3.1rem); line-height:1.05; letter-spacing:-.015em; color:var(--acento); margin-bottom:20px; transition:color .8s var(--ease); } .egg-texto{ font-family:var(--serif); font-size:clamp(1.05rem, 1.7vw, 1.32rem); line-height:1.42; color:var(--papel-80); max-width:34ch; margin:0 auto 30px; } .egg-cartao .btn{ margin-inline:auto } .egg-preco{ display:flex; align-items:center; justify-content:center; gap:9px; margin-top:20px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:lowercase; color:var(--papel-40); } .egg-preco[hidden]{ display:none } .egg-preco b{ font-weight:500; font-size:13px; letter-spacing:.1em; color:var(--acento); text-transform:uppercase; transition:color .8s var(--ease); } .egg-preco i{ font-style:normal; color:var(--papel-14) } .egg-fechar{ appearance:none; cursor:pointer; margin-top:26px; padding:10px 22px; background:none; border:1px solid var(--papel-14); border-radius:999px; color:var(--papel-40); font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; transition:color .4s var(--ease), border-color .4s var(--ease); } .egg-fechar:hover{ color:var(--papel-80); border-color:var(--papel-40) } /* ====================================================== estados de anim */ .js [data-anim]{ will-change:transform,opacity } .js [data-anim="fade"], .js [data-anim="up"], .js [data-anim="nega"], .js [data-anim="stagger"] > *{ opacity:0 } .js [data-anim="linhas"] span:not(.mascara){ opacity:0 } /* máscara de linha: o texto sobe de dentro do próprio corte */ .mascara{ display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em; } /* ============================================================ responsivo */ /* telas baixas (notebook 768px de altura): tudo encolhe para a sala caber inteira sem cortar nada enquanto a caixa está travada no topo */ @media (min-width:901px) and (max-height:840px){ .sala > .box{ padding-block:clamp(52px, 7vh, 72px) } .display{ font-size:clamp(2.6rem, 7vw, 5.9rem); margin-bottom:22px } .grande{ font-size:clamp(1.9rem, 3.6vw, 3.0rem); margin-bottom:20px } .titulo{ font-size:clamp(2.0rem, 4.2vw, 3.5rem) } .lede{ font-size:clamp(1.15rem, 1.8vw, 1.5rem) } .corpo{ margin-bottom:22px } .realce{ margin-bottom:24px } .sub{ margin-bottom:26px } .saidas li{ padding-block:10px } .publico li{ padding:16px 17px } .hero-acoes{ margin-bottom:30px } .checklist{ margin-bottom:28px } .nega{ font-size:clamp(1.6rem, 3.4vw, 2.7rem) } } @media (max-width:1180px){ .mapa{ display:none } } @media (max-width:900px){ :root{ --caixa:100% } /* no celular a peça fica atrás do texto: cada sala ocupa uma tela inteira e ganha um corredor de respiro antes da próxima */ .sala{ min-height:auto; padding-bottom:24vh } .sala > .box{ position:relative; top:auto; min-height:100svh; max-width:100%; margin:0; padding-block:104px 88px; } .sala[data-lado="centro"] > .box{ max-width:100% } .sala-hero, .sala-manifesto, .sala-requisitos, .sala-final{ min-height:auto } .sala-final{ padding-bottom:6vh } .box::before, .sala[data-lado="esq"] > .box::before, .sala[data-lado="dir"] > .box::before, .sala[data-lado="centro"] > .box::before{ top:0; bottom:0; left:calc(var(--pad) * -1); right:calc(var(--pad) * -1); background:radial-gradient(72% 44% at 50% 48%, rgba(5,5,9,.74) 0%, rgba(5,5,9,.34) 60%, transparent 88%); } .btn-ghost{ align-self:center; padding-inline:10px } .publico{ grid-template-columns:1fr } .curador{ grid-template-columns:1fr; gap:26px } .retrato{ max-width:290px } .cta-fixo{ right:16px; left:16px; bottom:16px; justify-content:center } .fatos .linha{ grid-template-columns:1fr; gap:4px } #palco{ opacity:.92 } /* faixa escura no topo para o HUD não brigar com o texto que passa */ body::before{ content:''; position:fixed; z-index:55; inset:0 0 auto 0; height:96px; background:linear-gradient(180deg, rgba(5,5,9,.92) 0%, rgba(5,5,9,.55) 46%, transparent 100%); pointer-events:none; } } @media (max-width:640px){ .hud{ mix-blend-mode:normal } .hud-sala{ display:none } .hud-marca span{ font-size:10px } /* selo e dica: texto corrido de verdade, sem o flex quebrar no meio */ .selo{ font-size:9.5px; letter-spacing:.1em; line-height:1.7; padding:8px 14px 8px 11px; text-align:left; align-items:flex-start; } .selo .selo-ponto{ margin-top:6px } .selo b{ white-space:nowrap } .dica-egg{ align-items:flex-start; text-align:left; line-height:1.7; padding:10px 15px 10px 12px; } .dica-egg .dica-egg-ponto{ margin-top:5px } .dica-egg b{ white-space:nowrap } } @media (max-width:520px){ .display{ font-size:clamp(2.7rem,12vw,3.6rem) } .hero-acoes{ flex-direction:column; align-items:stretch } .btn,.btn-ghost{ justify-content:center } } /* ========================================================= sem webgl */ .sem-webgl #palco{ background: radial-gradient(58% 46% at 50% 34%, rgba(217,119,87,.20) 0%, transparent 66%), radial-gradient(90% 70% at 50% 100%, rgba(232,192,106,.08) 0%, transparent 60%), linear-gradient(180deg,#0A0A12 0%,#06060A 60%,#050508 100%); } /* ================================================= movimento reduzido */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } .js [data-anim], .js [data-anim="stagger"] > *, .js [data-anim="linhas"] > span{ opacity:1 !important; transform:none !important } .nega s::after{ transform:scaleX(1) } .sala{ min-height:auto; padding-bottom:0 } .sala > .box{ position:relative; min-height:88vh; padding-block:110px } }