:root{ --bg: #f9ffe7; --fg: #121212; --muted: rgba(18,18,18,.78); --hair: rgba(18,18,18,.16); --shadow: rgba(0,0,0,.14); --radius: 18px; --radius-sharp: 3px; --brand-black: #000000; --brand-white: #ffffff; --brand-cut: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); --max: 1120px; --ease: cubic-bezier(.2,.9,.1,1); --ease-snap: cubic-bezier(.16, 1, .22, 1); --warm: #ffa17b; --hot: #ffa0b0; --cool: #7dd6ff; } /* Neuething Sans (coloque os arquivos em ./assets/) */ @font-face{ font-family:"Neuething Sans"; src: url("./assets/NeuethingSans-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:"Neuething Sans"; src: url("./assets/NeuethingSans-Medium.ttf") format("truetype"); font-weight:500; font-style:normal; font-display:swap; } @font-face{ font-family:"Neuething Sans"; src: url("./assets/NeuethingSans-Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; } @font-face { font-family: 'PP Neue Corp Wide'; src: url('https://cdn.prod.website-files.com/671752cd4027f01b1b8f1c7f/6717e399d30a606fed425914_PPNeueCorp-WideUltrabold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'PP Neue Montreal'; src: url('https://cdn.prod.website-files.com/6819ed8312518f61b84824df/6819ed8312518f61b84825ba_PPNeueMontreal-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } *{box-sizing:border-box} /* Altura do /: usamos min-height para garantir que o body cresce com o conteúdo MESMO sem a classe .lenis (em mobile o Lenis é desativado para evitar freeze; sem este fallback, o body ficaria preso a 100% e não rolava). */ html,body{min-height:100%} html{scroll-behavior:auto} html.lenis, html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto !important} .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain} .lenis.lenis-stopped{overflow:hidden} .lenis.lenis-smooth iframe{pointer-events:none} body{ margin:0; font-family: Sora, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background-color: var(--bg); color:var(--fg); overflow-x:hidden; /* Evita zoom inesperado em iOS quando se toca rápido em duas zonas próximas. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Tudo o que é específico de mobile/coarse foi para `mobile.css` (carregado em index.html). */ a{color:inherit;text-decoration:none} #grain{ pointer-events:none; position:fixed; inset:-40%; opacity:.06; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='190' height='190' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); transform:translate3d(0,0,0); animation:grain 8s steps(2) infinite; z-index:5; } @keyframes grain{ 0%{transform:translate3d(-6%, -4%, 0)} 25%{transform:translate3d(4%, -6%, 0)} 50%{transform:translate3d(6%, 6%, 0)} 75%{transform:translate3d(-4%, 6%, 0)} 100%{transform:translate3d(-6%, -4%, 0)} } .topbar{ position:fixed; top:0; left:0; right:0; z-index:40; padding:18px 22px; opacity:1; transform:none; transition:opacity .45s var(--ease), transform .45s var(--ease); pointer-events:auto; } .topbar.is-hidden{ opacity:0; transform:translate3d(0,-18px,0); pointer-events:none; } .topbar-inner{ max-width:var(--max); margin:0 auto; border:0; border-radius:999px; padding:0; background:transparent; backdrop-filter:none; display:flex; align-items:center; justify-content:space-between; box-shadow:none; } .topbar .brand-text, .topbar .nav a{ color: rgba(255,255,255,.86); } .topbar .nav a:hover{ background: rgba(255,255,255,.10); color: rgba(255,255,255,.98); } .brand{ display:flex; align-items:center; gap:10px; transition:transform .28s var(--ease-snap), filter .28s ease; } .brand:hover{ transform:translateY(-1px) skewX(-2deg); filter:drop-shadow(0 8px 18px rgba(0,0,0,.35)); } .brand-mark{ display:block; width:42px; height:42px; object-fit:contain; flex-shrink:0; clip-path:var(--brand-cut); transition:transform .28s var(--ease-snap); } .brand:hover .brand-mark{ transform:skewX(-3deg) scale(1.03); } .brand-text{font-weight:800;letter-spacing:-.02em;text-transform:uppercase} .brand-text{ font-family: Syne, Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight:700; letter-spacing:-.04em; text-transform: uppercase; font-size:14px; } .nav{display:flex;gap:6px} .nav a{ padding:8px 12px; border-radius:var(--radius-sharp); color:rgba(255,255,255,.72); font-size:12px; letter-spacing:.06em; text-transform:uppercase; border:1px solid transparent; transition:background .22s var(--ease-snap), color .22s ease, transform .22s var(--ease-snap), border-color .22s ease; } .nav a:hover{ transform:skewX(-2deg); border-color:rgba(255,255,255,.14); } .nav a:hover{ background:rgba(255,255,255,.10); color:rgba(255,255,255,.92); transform:translateY(-1px); } /* Hero (ref GSAP Image Zoom) */ /* Hero (ref Osmo parallax) */ .hero-osmo{ position: relative; z-index: 3; } .parallax{ width: 100%; position: relative; overflow: hidden; } .parallax__header{ z-index: 2; padding: 6vw 4vw; justify-content: center; align-items: center; min-height: 100svh; display: flex; position: relative; } .parallax__visuals{ object-fit: cover; width: 100%; max-width: none; height: 120%; position: absolute; top: 0; left: 0; } .parallax__layers{ object-fit: cover; width: 100%; max-width: none; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; } .parallax__layer-img{ pointer-events: none; object-fit: cover; width: 110%; max-width: none; height: 117.5%; position: absolute; top: -17.5%; left: -5%; } .parallax__layer-title{ justify-content: center; align-items: center; width: 100%; height: 100svh; display: flex; position: absolute; top: 0; left: 0; } .parallax__title{ pointer-events: auto; text-align: center; margin: 0; font-family: "PP Neue Corp Wide", sans-serif; font-size: 11vw; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: #ffffff; text-shadow: 0 18px 70px rgba(0,0,0,.55); } .hero-letter{ display:inline-block; will-change: transform; transform-origin:50% 70%; } .hero-title-stack{ text-align:center; padding: 10px 14px; } .hero-eyebrow{ margin: 0 0 10px; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75); } .hero-tagline{ margin: 10px 0 0; font-size: 14px; letter-spacing: -0.01em; color: rgba(255,255,255,.72); display:flex; align-items:center; justify-content:space-between; gap: min(6vw, 80px); width:min(560px, 92vw); margin-left:auto; margin-right:auto; pointer-events:none; } .hero-tagline__spacer{flex:1 1 auto; min-width: 3rem; height:0;} .hero-tagline__left,.hero-tagline__right{white-space:nowrap;} .parallax__fade{ /* remove o “blur branco” entre a sessão 1 e 2 */ display:none; --color-dark-rgb: 249, 255, 231; background: linear-gradient( to top, rgba(var(--color-dark-rgb), 1) 0%, rgba(var(--color-dark-rgb), 0.738) 19%, rgba(var(--color-dark-rgb), 0.541) 34%, rgba(var(--color-dark-rgb), 0.382) 47%, rgba(var(--color-dark-rgb), 0.278) 56.5%, rgba(var(--color-dark-rgb), 0.194) 65%, rgba(var(--color-dark-rgb), 0.126) 73%, rgba(var(--color-dark-rgb), 0.075) 80.2%, rgba(var(--color-dark-rgb), 0.042) 86.1%, rgba(var(--color-dark-rgb), 0.021) 91%, rgba(var(--color-dark-rgb), 0.008) 95.2%, rgba(var(--color-dark-rgb), 0.002) 98.2%, transparent 100% ); z-index: 30; object-fit: cover; width: 100%; max-width: none; height: 20%; position: absolute; bottom: 0; left: 0; } .parallax__black-line-overflow{ z-index: 20; background-color: rgba(11,11,12,.14); width: 100%; height: 2px; position: absolute; bottom: -1px; left: 0; } .hero-downline{ margin:0; font-family: "PP Neue Corp Wide", sans-serif; font-weight:800; font-size: clamp(22px, 3.2vw, 44px); letter-spacing:-0.03em; text-align:center; color:#0b0b0c; } .blur-hero{ min-height: 100vh; display:grid; place-items:center; padding: 4.5vw 4vw; background:#f9ffe7; color:#0b0b0c; position:relative; z-index:2; /* abaixo da .hero-osmo (3) para não invadir a imagem ao fazer scroll/overlap */ /* Mantém o brilho só dentro desta secção — sem “subir” sobre a hero */ overflow:hidden; } .blur-hero::before{ content:""; position:absolute; left:-12%; right:-12%; top:0; bottom:-15%; z-index:0; background: radial-gradient(900px 520px at 25% 35%, rgba(255,255,255,.72), transparent 64%), radial-gradient(900px 520px at 75% 78%, rgba(0,0,0,.06), transparent 64%); pointer-events:none; } .blur-transition__inner{ position:relative; z-index:1; width:min(980px, 100%); display:flex; flex-direction:column; align-items:center; } .blur-kicker{ margin:0 0 18px; text-transform:uppercase; letter-spacing:.16em; font-size:12px; color:currentColor; opacity:.62; align-self:center; text-align:center; } .blur-title{ margin:0; font-family: Syne, Inter, ui-sans-serif, system-ui, sans-serif; font-size:clamp(22px, 5.2vw, 72px); line-height:.9; letter-spacing:-.04em; text-align:center; width:100%; } .blur-line{ display:block; /* cada frase fica em uma linha */ white-space:nowrap; line-height: .95; } @media (max-width: 520px){ .blur-title{ font-size: clamp(20px, 6.2vw, 56px); letter-spacing:-.06em; } } .blur-char{ display:inline-block; will-change: transform, filter, opacity; } .blur-space{ display:inline-block; width:.35em; } .work{ position:relative; } .work-overlay{ position:absolute; inset:0; z-index:3; pointer-events:none; background: rgba(0,0,0,.08); opacity:1; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 16px; border-radius:999px; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.18); transition:transform .25s ease, background .25s ease, border-color .25s ease; color:rgba(255,255,255,.92); letter-spacing:.01em; } .btn:hover{transform:translateY(-2px); border-color: rgba(255,255,255,.55)} .btn.primary{ background: rgba(255,255,255,.92); color:#121212; border-color: rgba(255,255,255,.92); } .btn.ghost{background:rgba(0,0,0,.14)} /* Chapter (sticky scene) */ .chapter{position:relative;padding:0} .chapter-sticky{ position:sticky; top:0; min-height:100svh; display:grid; align-items:center; overflow:hidden; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); } .chapter-bg{position:absolute;inset:-20%;z-index:-1} .orb{ position:absolute; border-radius:999px; filter: blur(30px); opacity:.75; mix-blend-mode:screen; transform:translate3d(0,0,0); } .orb-a{width:560px;height:560px;left:8%;top:12%; background:rgba(125,214,255,.16)} .orb-b{width:680px;height:680px;right:4%;top:18%; background:rgba(255,160,176,.16)} .orb-c{width:540px;height:540px;left:30%;bottom:4%; background:rgba(255,161,123,.14)} .chapter-grid{ max-width:var(--max); margin:0 auto; padding:120px 18px; display:grid; grid-template-columns: 1.05fr .95fr; gap:34px; position:relative; z-index:2; } .chapter-tag{ display:inline-flex; align-items:center; gap:10px; padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.16); color:rgba(255,255,255,.72); letter-spacing:.08em; text-transform:uppercase; font-size:12px; margin-bottom:12px; } .chapter-title{ margin:0 0 10px; font-size: clamp(26px, 3vw, 40px); letter-spacing:-.03em; line-height:1.08; } .chapter-body{margin:0;color:rgba(255,255,255,.70);line-height:1.75;max-width:56ch} .chapter-right{display:grid;gap:14px;align-content:start} .card{ border-radius:var(--radius); padding:18px 18px; border:1px solid rgba(255,255,255,.12); box-shadow:0 24px 80px rgba(0,0,0,.35); transform:translate3d(0,0,0); position:relative; background: rgba(255,255,255,.70); } .card::after{ content:""; position:absolute; inset:0; border-radius:var(--radius); border:1px solid rgba(18,18,18,.10); box-shadow: inset 0 0 0 1px rgba(18,18,18,.04); pointer-events:none; opacity:.85; } .card-title{font-weight:600;letter-spacing:-.01em;margin-bottom:6px} .card-body{color:rgba(255,255,255,.70);line-height:1.6} .card-body{color:rgba(18,18,18,.74);line-height:1.6} .card-glass{background:rgba(255,255,255,.76); backdrop-filter: blur(12px)} .card-solid{background:rgba(255,255,255,.70)} .card-outline{background:rgba(255,255,255,.70)} /* World stage */ .world{position:relative;padding:120px 0 140px} .world-inner{max-width:var(--max);margin:0 auto;padding:0 18px} .world-head{margin-bottom:24px} .world-tag{color:rgba(255,255,255,.66);letter-spacing:.08em;text-transform:uppercase;font-size:12px;margin-bottom:10px} .world-tag{color:rgba(18,18,18,.66);letter-spacing:.08em;text-transform:uppercase;font-size:12px;margin-bottom:10px} .world-title{ margin:0; font-size: clamp(28px, 3.2vw, 46px); letter-spacing:-.03em; line-height:1.04; max-width:24ch; } .world-stage{ position:relative; min-height: 520px; border-radius: 28px; border:1px solid rgba(18,18,18,.10); overflow:hidden; background:rgba(255,255,255,.72); box-shadow:0 40px 120px rgba(0,0,0,.14); } .layer{ position:absolute; inset:-10%; transform:translate3d(0,0,0); } .layer-back{ background: radial-gradient(700px 520px at 30% 40%, rgba(125,214,255,.28), transparent 62%), radial-gradient(620px 520px at 70% 70%, rgba(255,160,176,.24), transparent 62%), radial-gradient(500px 420px at 55% 35%, rgba(255,161,123,.18), transparent 60%); filter: blur(10px) saturate(1.1); opacity:.95; } .layer-mid{ background: linear-gradient(135deg, rgba(255,255,255,.55), transparent 40%), radial-gradient(900px 520px at 50% 55%, rgba(18,18,18,.08), transparent 60%); backdrop-filter: blur(12px); mask-image: radial-gradient(closest-side at 55% 45%, rgba(0,0,0,1), rgba(0,0,0,0) 78%); -webkit-mask-image: radial-gradient(closest-side at 55% 45%, rgba(0,0,0,1), rgba(0,0,0,0) 78%); } .layer-front{ background: radial-gradient(420px 260px at 30% 70%, rgba(255,160,176,.22), transparent 70%), radial-gradient(420px 260px at 70% 30%, rgba(125,214,255,.22), transparent 70%); filter: blur(24px); opacity:.55; } .world-copy{ position:relative; padding:34px 26px; max-width: 66ch; z-index:2; } .world-copy p{ margin:0 0 16px; color:rgba(18,18,18,.74); line-height:1.7; } .world-stats{ display:flex; gap:14px; flex-wrap:wrap; } .stat{ min-width: 160px; padding:12px 14px; border-radius: 16px; border:1px solid rgba(18,18,18,.12); background:rgba(255,255,255,.86); backdrop-filter: blur(14px); } .stat-k{ font-weight:600; letter-spacing:-.02em; } .stat-l{ margin-top:4px; color:rgba(18,18,18,.66); font-size:13px; } /* Stack/Serviços — fundo WebGL Tubes (CodePen qEbdVjK) + cartões pretos 3D */ .stack-services.world--services{ position:relative; isolation:isolate; background:#010101; color:#fafafa; border-top:1px solid rgba(255,255,255,.04); padding: clamp(52px, 10vw, 118px) 0 clamp(76px, 13vw, 148px); overflow-x:clip; overflow-y:visible; /* Parallax leve com o telemóvel — device-tilt.js define --tilt-stack-* (desktop ~0) */ transform:translate3d(var(--tilt-stack-x, 0px), var(--tilt-stack-y, 0px), 0); } .stack-services.world--services .world-inner{ padding-top:0; padding-left:18px; padding-right:18px; } .stack-services .world-head{ margin-bottom: 0; text-align:center; } /* Texto totalmente transparente — lê a cor do canvas / fundo por baixo do bloco intro */ .stack-services .world-tag{ color:transparent; -webkit-text-fill-color:transparent; letter-spacing:.12em; } .stack-services .world-title{ color:#fff; max-width:28ch; margin-left:auto; margin-right:auto; font-family:Syne,Sora,ui-sans-serif,system-ui,sans-serif; font-weight:700; text-shadow:0 2px 40px rgba(0,30,52,.65); } .stack-services__lede{ margin:20px auto 0; max-width:62ch; line-height:1.7; font-size:clamp(15px, 1.35vw, 17px); color:rgba(255,255,255,.76); text-align:center; } .stack-services__tubes{ pointer-events:none; position:absolute; inset:0; z-index:0; overflow:hidden; } .stack-services__tubes--off{ opacity:0; visibility:hidden; } .stack-services--no-tubes .stack-services__tubes{ opacity:0; visibility:hidden; } /* Fallback visual quando Tubes falha (ex.: rede, WebGPU/contexto não seguro) */ .stack-services.world--services.stack-services--no-tubes{ background: radial-gradient(ellipse 120% 80% at 30% -10%, rgba(249,103,251,.28), transparent 55%), radial-gradient(ellipse 100% 70% at 85% 20%, rgba(83,188,40,.22), transparent 50%), radial-gradient(ellipse 90% 60% at 10% 60%, rgba(105,88,213,.2), transparent 48%), linear-gradient(180deg, #020204 0%, #010101 45%, #000 100%); background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%; animation:stack-fallback-pan 18s ease-in-out infinite alternate; } @keyframes stack-fallback-pan{ 0%{ background-position:0% 0%, 100% 0%, 0% 100%, 0 0; } 100%{ background-position:12% 8%, 88% 12%, 10% 88%, 0 0; } } @media (prefers-reduced-motion: reduce){ .stack-services.world--services.stack-services--no-tubes{ animation:none; } } .stack-services__tubes-canvas{ display:block; width:100%; height:100%; vertical-align:middle; } .stack-services__intro{ margin-bottom: clamp(10px, 3.2vw, 22px); position:relative; z-index:2; } .stack-belt{ width:100%; margin-top: clamp(26px, 5.2vw, 52px); position:relative; z-index:2; } .stack-belt__hint{ margin:0 0 14px; padding:0 clamp(18px, 4vw, 32px); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.38); } .stack-belt__viewport{ width:100%; overflow-x:auto; /* overflow-y permite sombra/reflexo mínimos sem cortar cantos */ overflow-y:visible; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; scroll-padding-inline: max(18px, calc(50vw - min(190px, 34vw))); scrollbar-width:none; -ms-overflow-style:none; touch-action:pan-x; cursor:grab; outline:none; } .stack-belt__viewport::-webkit-scrollbar{ width:0; height:0; display:none; } .stack-belt__viewport::-webkit-scrollbar-thumb, .stack-belt__viewport::-webkit-scrollbar-track{ background:transparent; } .stack-belt__viewport:focus-visible{ box-shadow:inset 0 0 0 2px rgba(125,214,255,.45); } /* Arrasto livre sem snap activo — volta o proximity só ao largar */ .stack-belt__viewport.is-dragging{ scroll-snap-type:none; overscroll-behavior-x:contain; cursor:grabbing; user-select:none; } .stack-belt__viewport.is-dragging *{ pointer-events:none; } .stack-belt__scene{ position:relative; display:inline-flex; flex-direction:column; align-items:stretch; min-width:100%; /* Cartões na vertical, de frente ao ecrã — o 3D fica só no tilt ao rato de cada card */ padding: clamp(24px, 5vw, 44px) 0 clamp(40px, 8vw, 80px); } .stack-belt__track{ display:flex; flex-direction:row; align-items:stretch; gap:clamp(16px, 3.2vw, 32px); padding:20px max(18px, calc(50vw - min(190px, 34vw))) clamp(40px, 14vh, 96px); transform-style:preserve-3d; } /* Lapidação em silhueta (octógono): leitura de gema facetada mantendo o retângulo lógico. Sombras compactas em contact + cauda — realismo “pedra cortada sobre negro”. */ .stack-belt-card{ scroll-snap-align:center; flex:0 0 clamp(274px, 76vw, 412px); position:relative; isolation:isolate; overflow:visible; padding:0; border:none; outline:none; border-radius:0; background:transparent; transform-style:preserve-3d; --card-tz:23px; --card-rx:0deg; --card-ry:0deg; --shine-x:51%; --shine-y:28%; --glare-hot:.28; --card-s:1; --mag:0; cursor:default; filter:drop-shadow(0 26px 48px rgba(0,0,0,.55)); transform: perspective(1120px) translateZ(var(--card-tz)) scale3d(var(--card-s),var(--card-s),1) rotateX(var(--card-rx)) rotateY(var(--card-ry)); transition:transform .34s cubic-bezier(.2,.9,.15,1), filter .48s cubic-bezier(.2,.9,.15,1); } .stack-belt-card:hover, .stack-belt-card.is-tilting{ filter:drop-shadow(0 36px 64px rgba(0,0,0,.72)); } .stack-belt-card.is-tilting{ transition: filter .42s cubic-bezier(.2,.9,.15,1), transform .085s linear; } .stack-belt-card__lift{ height:100%; transform-style:preserve-3d; border-radius:22px; overflow:hidden; } /* Cartão preto, sem vértices / halo de borda; brilho só em reflexo interior suave */ .stack-belt-card__face{ position:relative; z-index:1; border-radius:inherit; padding:clamp(24px, 4.4vw, 32px); padding-bottom:clamp(28px, 4.4vw, 34px); overflow:hidden; border:none; box-shadow:none; transform:translateZ(11px); transform-style:preserve-3d; transition:transform .34s cubic-bezier(.2,.9,.15,1); background:#000000; display:flex; flex-direction:column; align-items:center; text-align:center; } .stack-belt-card__face::before{ content:""; position:absolute; inset:-30%; pointer-events:none; z-index:1; background:radial-gradient( ellipse 52% 48% at var(--shine-x, 51%) var(--shine-y, 28%), rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 24%, transparent 52% ); opacity:.14; mix-blend-mode:plus-lighter; transition:opacity .28s cubic-bezier(.2,.9,.15,1); } .stack-belt-card:hover .stack-belt-card__face::before, .stack-belt-card.is-tilting .stack-belt-card__face::before{ opacity:calc(.16 + var(--glare-hot, .32) * .35); } .stack-belt-card:hover .stack-belt-card__face, .stack-belt-card.is-tilting .stack-belt-card__face{ transform:translateZ(calc(11px + var(--mag,0) * 5px)); } @supports not (mix-blend-mode:plus-lighter){ .stack-belt-card__face::before{ mix-blend-mode:screen; opacity:.1; } } /* Números: “transparente” com gradiente nas cores dos tubes (sobre card preto o fundo real é preto) */ .stack-belt-card__idx{ position:relative; z-index:2; font-size:10px; letter-spacing:.12em; font-weight:600; margin-bottom:14px; font-variant-numeric:tabular-nums; text-transform:uppercase; color:transparent; -webkit-text-fill-color:transparent; background-image:linear-gradient( 108deg, #f967fb 0%, #83f36e 18%, #60aed5 36%, #ff008a 54%, #fe8a2e 68%, #53bc28 82%, #6958d5 100% ); background-size:280% 100%; background-clip:text; -webkit-background-clip:text; background-repeat:no-repeat; animation:stack-idx-tube-flow 12s linear infinite; } @keyframes stack-idx-tube-flow{ 0%{ background-position:0% 50%; } 100%{ background-position:100% 50%; } } @media (prefers-reduced-motion: reduce){ .stack-belt-card__idx{ animation:none; background-position:42% 50%; } } .stack-belt--flat .stack-belt-card__idx{ animation:none; background-position:38% 50%; } /* Alinhado ao .stack-services .world-title: Syne 700 + mesma sombra */ .stack-belt-card__title{ position:relative; z-index:2; margin:0 0 14px; font-family:Syne,Sora,ui-sans-serif,system-ui,sans-serif; font-weight:700; font-size:clamp(22px, 2.75vw, 34px); letter-spacing:-.03em; line-height:1.04; max-width:none; color:#fff; text-shadow:0 2px 40px rgba(0,30,52,.65); text-rendering:geometricPrecision; -webkit-font-smoothing:antialiased; } .stack-belt-card__text{ position:relative; z-index:2; margin:0; font-family:Sora,ui-sans-serif,system-ui,sans-serif; font-size:clamp(15px, 1.35vw, 17px); line-height:1.7; font-weight:400; letter-spacing:normal; color:#fff; text-shadow:0 2px 40px rgba(0,30,52,.65); text-rendering:geometricPrecision; -webkit-font-smoothing:antialiased; } .stack-belt-card:hover{ --card-tz:34px; } .stack-belt__floor{ display:none; } .stack-belt__glow{ display:none; } .stack-belt--flat .stack-belt__track{ transform:none; padding-top: 12px; padding-bottom: 24px; } .stack-belt--flat .stack-belt-card{ transform:none; filter:none; } .stack-belt--flat .stack-belt-card:hover{ transform:none; } .stack-belt--flat .stack-belt-card__face{ transform:none; } .stack-belt--flat .stack-belt-card__face::before{ opacity:.12; } .stack-belt--flat .stack-belt__floor, .stack-belt--flat .stack-belt__glow{ opacity:0; } @media (max-width: 720px){ .stack-belt__hint{ letter-spacing:.1em; } } .services-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; } .service-card{ border: 1px solid rgba(0,0,0,.08); border-radius: 16px; background: rgba(255,255,255,.86); padding: 14px 14px; box-shadow: 0 18px 60px rgba(0,0,0,.06); } .service-k{ font-weight: 800; letter-spacing: -.02em; font-family: Syne, Inter, ui-sans-serif, system-ui, sans-serif; } .service-l{ margin-top: 6px; color: rgba(10,10,10,.66); font-size: 13px; line-height: 1.55; } @media (max-width: 720px){ .services-grid{ grid-template-columns: 1fr; } } /* Última secção — estrutura “menu esquerdo / centro / links direito” (fundo branco + interativo) */ .contact-hub{ --mx:50%; --my:50%; --rx:0deg; --ry:0deg; position:relative; isolation:isolate; overflow:hidden; padding: clamp(64px, 10vw, 120px) 0 clamp(64px, 10vw, 120px); background:#f7f8fb; color:#0b0b0c; border-top:1px solid rgba(0,0,0,.08); font-family: 'PP Neue Montreal', Sora, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size: 16px; perspective: 1200px; } .contact-hub__bg{ pointer-events:none; position:absolute; inset:-8%; background: radial-gradient(620px 420px at var(--mx) var(--my), rgba(180,255,60,.20), transparent 62%), radial-gradient(720px 520px at calc(var(--mx) * 0.7) calc(var(--my) * 0.9), rgba(0,0,0,.045), transparent 64%), repeating-radial-gradient(circle at 50% 50%, rgba(0,0,0,.065) 0 1px, transparent 1px 64px); filter: blur(0px); opacity:.95; transform: translate3d(0,0,0); mask-image: radial-gradient(ellipse 70% 55% at 50% 40%, #000 50%, transparent 86%); } .contact-hub__inner{ position:relative; z-index:1; max-width:var(--max); margin:0 auto; padding:0 18px; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .22s var(--ease); will-change: transform; } /* Em coarse o tilt vem do device-tilt.js (orientação do aparelho). */ .contact-hub__top{ display:flex; justify-content:flex-end; align-items:center; margin-bottom: clamp(26px, 4vw, 46px); } .contact-hub__chip{ display:inline-flex; align-items:center; height:36px; padding:0 12px; border-radius:var(--radius-sharp); font-size:13px; letter-spacing:.14em; text-transform:uppercase; border:1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.72); } .contact-hub__layout{ display:grid; grid-template-columns: minmax(260px, 320px) minmax(0, 620px) minmax(260px, 320px); gap: clamp(18px, 4vw, 48px); align-items:center; min-height: min(580px, 78vh); padding-block: clamp(32px, 6vh, 60px); } .contact-hub__nav, .contact-hub__links{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; justify-self:stretch; } .contact-hub__nav{ justify-content:center; } .contact-hub__links{ justify-content:center; align-items:flex-end; text-align:right; } .contact-hub__nav-k, .contact-hub__links-k, .contact-hub__center-k{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(11,11,12,.52); margin-bottom:6px; } .contact-hub__nav-link, .contact-hub__link{ font-weight:800; letter-spacing:-.02em; text-decoration:none; color:#0b0b0c; font-size: clamp(18px, 2vw, 20px); line-height:1.15; transition: transform .25s ease, opacity .25s ease; } .contact-hub__nav-link:hover, .contact-hub__link:hover{ transform: translateX(2px); opacity:.78; } .contact-hub__center{ display:flex; flex-direction:column; align-items:center; text-align:center; justify-content:center; } .contact-hub__title{ margin:0; font-family: Syne, Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight:800; letter-spacing:-.045em; line-height:.92; font-size:clamp(42px, 6.8vw, 88px); display:inline-block; user-select:none; touch-action: pan-y; } .contact-title-char, .contact-title-space{ display:inline-block; will-change: transform, color, filter; } .contact-title-word{ display:inline-block; white-space:nowrap; /* impede quebra dentro da palavra */ } .contact-title-char{ transition: transform .18s var(--ease), color .18s var(--ease), filter .18s var(--ease); } .contact-title-char[data-pop="1"]{ transform: translate3d(0,-2px,0) scale(1.01); color: rgba(11,11,12,.92); } .contact-title-char[data-pop="2"]{ transform: translate3d(0,-4px,0) scale(1.02); color: rgba(11,11,12,.98); } .contact-title-char[data-pop="3"]{ transform: translate3d(0,-7px,0) scale(1.05); color: rgba(180,255,60,.98); filter: drop-shadow(0 10px 18px rgba(180,255,60,.22)); } @media (prefers-reduced-motion: reduce){ .contact-title-char{ transition:none !important; } .contact-title-char[data-pop="1"], .contact-title-char[data-pop="2"], .contact-title-char[data-pop="3"]{ transform:none !important; filter:none !important; } .contact-title-char[data-pop="3"]{ color: rgba(180,255,60,.98); } } .contact-hub__lede{ margin:14px 0 0; max-width:52ch; color:rgba(11,11,12,.68); line-height:1.7; font-size: clamp(16px, 1.5vw, 18px); } .contact-hub__cta-row{ margin-top: clamp(28px, 7vh, 86px); display:flex; gap:10px; flex-wrap:wrap; justify-content:center; } .contact-hub__cta{ text-decoration:none; height:42px; padding:0 14px; border-radius:var(--radius-sharp); clip-path:var(--brand-cut); display:inline-flex; align-items:center; justify-content:center; font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:12px; color:#0b0b0c; border:1px solid rgba(0,0,0,.12); background:rgba(255,255,255,.86); box-shadow:0 18px 56px rgba(0,0,0,.10); transition:transform .25s var(--ease-snap), background .25s ease; } .contact-hub__cta:hover{ transform:translateY(-2px) skewX(-2deg); background:#fff; } .contact-hub__cta--wa{ background: rgba(180,255,60,.78); } .contact-hub__cta--wa:hover{ background: rgba(180,255,60,.92); } /* * Mobile: classe `is-mobile` no vem do inline script no index (UA/largura/coarse) * ANTES de qualquer stylesheet — mais fiável que só @media para esconder nav/links * e cortar “scroll fantasma” onde o body (#f9ffe7) aparece após o footer. */ html.is-mobile #contact .contact-hub__nav, html.is-mobile #contact .contact-hub__links{ display:none !important; } html.is-mobile #contact .contact-hub__layout{ grid-template-columns:1fr !important; grid-template-areas:"center" !important; min-height:0 !important; gap:0 !important; } @media (max-width: 920px){ .contact-hub__layout{ grid-template-columns: 1fr; gap: 26px; text-align:center; } .contact-hub__nav, .contact-hub__links{ align-items:center; padding-top: 0; } .contact-hub__nav-link:hover, .contact-hub__link:hover{ transform: translateY(-1px); } } /* Footer — logo branca transparente sobre fundo preto */ .footer{ padding:32px 0 48px; border-top:1px solid rgba(255,255,255,.08); background:var(--brand-black); } .footer--neon{ color:var(--brand-white); } .footer-inner{ max-width:var(--max); margin:0 auto; padding:0 18px; display:flex; justify-content:center; align-items:center; gap:16px; text-align:center; } .footer-brand{ display:inline-flex; align-items:center; justify-content:center; transition:transform .28s var(--ease-snap), filter .28s ease; } .footer-brand:hover{ transform:translateY(-1px) skewX(-2deg); filter:drop-shadow(0 8px 18px rgba(255,255,255,.12)); } .footer-brand .brand-mark{ width:32px; height:32px; clip-path:var(--brand-cut); } .footer-copy{ color:rgba(255,255,255,.58); line-height:1.6; font-size:13px; letter-spacing:.02em; } /* Reveal system */ [data-reveal]{ opacity:0; transform: translate3d(0, 10px, 0); transition: opacity .85s var(--ease), transform .85s var(--ease), filter .85s var(--ease); filter: blur(6px); } [data-reveal].is-in{ opacity:1; transform: translate3d(0, 0, 0); filter: blur(0px); } /* Responsive */ @media (max-width: 980px){ .chapter-grid{grid-template-columns:1fr; padding:100px 18px} .nav{display:none} } @media (max-width: 520px){ .hero-content{padding:120px 18px 76px} } /* =========================== Portfólio (ref CodePen) =========================== */ .work{ position:relative; z-index:2; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); background: #000000; } .portfolio-surface{ background: transparent; } .work .container{ max-width: 1440px; padding: 2rem; margin: 0 auto; } .work .spacer{ width: 100%; height: 8vh; } @media (max-width: 768px){ .work .spacer{ height: 4vh; } } .world-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; } .world-bg{ /* “clean guard”: garante que o mundo fique sempre suave */ opacity:.9; } .world-bg > *{display:none} .world-bg::marker{content:""} .world-bg{ isolation:isolate; } .world-bg{ mask-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1) 18%, rgba(0,0,0,1) 82%, rgba(0,0,0,0)); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1) 18%, rgba(0,0,0,1) 82%, rgba(0,0,0,0)); } .world-bg::before{ content:""; position:absolute; inset:-30%; background: radial-gradient(1100px 700px at 22% 30%, rgba(255,255,255,.06), transparent 62%), radial-gradient(900px 620px at 78% 72%, rgba(255,255,255,.045), transparent 64%), radial-gradient(1px 1px at 12% 24%, rgba(255,255,255,.18), transparent 60%), radial-gradient(1px 1px at 34% 62%, rgba(255,255,255,.14), transparent 60%), radial-gradient(1px 1px at 70% 42%, rgba(255,255,255,.12), transparent 60%), radial-gradient(1px 1px at 86% 26%, rgba(255,255,255,.10), transparent 60%); opacity:.75; filter: blur(.6px); } .world-bg::after{ content:""; position:absolute; left:50%; top:64%; width:160%; height:140%; transform:translate(-50%,-50%) perspective(900px) rotateX(64deg); background: repeating-linear-gradient( 90deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent 44px ), repeating-linear-gradient( 0deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent 44px ); mask-image: radial-gradient(closest-side at 50% 45%, rgba(0,0,0,1), rgba(0,0,0,0) 78%); -webkit-mask-image: radial-gradient(closest-side at 50% 45%, rgba(0,0,0,1), rgba(0,0,0,0) 78%); opacity:.11; animation: worldDrift 22s linear infinite; } @keyframes worldDrift{ 0%{ background-position: 0 0, 0 0; } 100%{ background-position: 0 320px, 320px 0; } } @media (prefers-reduced-motion: reduce){ .world-bg::after{ animation:none; } } /* garante conteúdo acima do fundo */ .work .portfolio-surface, .work .container{ position:relative; z-index:2; } /* Scrollbar vertical global — thumb verdinho igual CTA de orçamento */ html{ scrollbar-width: thin; scrollbar-color: rgba(180,255,60,.9) rgba(10,10,10,.95); } html::-webkit-scrollbar{ width:10px; } html::-webkit-scrollbar-track{ background:rgba(10,10,10,.95); } html::-webkit-scrollbar-thumb{ background:rgba(180,255,60,.9); border-radius:999px; border:2px solid rgba(10,10,10,.95); } html::-webkit-scrollbar-thumb:hover{ background:rgba(193,255,86,1); } .work .arch{ display: flex; gap: 60px; justify-content: space-between; max-width: 1100px; margin-inline: auto; align-items: flex-start; } .work .arch__left{ display: flex; flex-direction: column; min-width: 300px; } .work .arch__left .arch__info{ max-width: 356px; height: 100vh; display: grid; place-items: center; } .work .arch__left .content{ border:1px solid rgba(0,0,0,.08); border-radius: 18px; padding: 22px 18px; background: #e8e8e8; backdrop-filter: none; box-shadow: 0 30px 110px rgba(0,0,0,.55); } .work .arch__left h2.header{ font-family: "Neuething Sans", "PP Neue Corp Wide", sans-serif; font-size: 34px; font-weight: 700; letter-spacing: -0.84px; margin: 0; text-transform: lowercase; color:#0b0b0c; } .work .arch__left p.desc{ color: rgba(11,11,12,0.70); font-size: 15px; letter-spacing: -0.2px; margin-block: 10px 16px; line-height: 1.6; } .work .arch__left a.link{ text-decoration: none; padding: 14px 16px; color: #0b0b10; border-radius: 40px; display: flex; gap: 6px; width: fit-content; align-items: center; font-weight: 600; border:1px solid rgba(11,11,12,.10); background: rgba(255,255,255,.92); } .work .arch__left a.link span{ letter-spacing: .02em; } .work .arch__right{ flex-shrink: 1; height: 100vh; width: 100%; max-width: 540px; position: relative; display: flex; flex-direction: column; } .work .arch__right .img-wrapper{ position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 420px; width: 100%; border-radius: 18px; overflow: hidden; border:1px solid rgba(255,255,255,.10); box-shadow: 0 40px 140px rgba(0,0,0,.55); background:#111; } .work .arch__right .img-wrapper::after{ content:""; position:absolute; inset:0; background: radial-gradient(700px 420px at 70% 20%, rgba(34,247,255,.14), transparent 60%), radial-gradient(700px 420px at 20% 80%, rgba(255,43,214,.12), transparent 60%), linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.35)); mix-blend-mode: screen; pointer-events:none; opacity:.35; } .site-frame{ position:absolute; inset:0; width: 100%; height: 100%; border:0; transform:scale(.86); transform-origin: top left; width:116.3%; height:116.3%; opacity:.94; filter:saturate(.92) contrast(.98) brightness(.98); pointer-events:none; z-index:1; } .site-shot__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:0; z-index:1; } .site-open{ position:absolute; z-index:4; right:12px; bottom:12px; height:38px; padding:0 14px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-weight:800; letter-spacing:.02em; color:#0b0b0c; border:1px solid rgba(0,0,0,.12); background:rgba(255,255,255,.92); box-shadow:0 18px 56px rgba(0,0,0,.18); backdrop-filter: blur(10px); } .site-open:active{ transform: translateY(1px); } .pf-mobile-caption{ display:none; } .pf-mobile-caption__title{ font-family: "Neuething Sans", "PP Neue Corp Wide", sans-serif; font-weight:700; letter-spacing:-.03em; font-size:18px; color:#fff; } .pf-mobile-caption__desc{ margin-top:6px; color:rgba(255,255,255,.74); line-height:1.55; font-size:13px; max-width: 48ch; } .site-fallback{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; padding:18px; color:#f4f1e8; background: radial-gradient(620px 360px at 72% 28%, var(--preview-glow, rgba(255,255,255,.20)), transparent 58%); mix-blend-mode:normal; opacity: .18; } .site-fallback--supplefy{--preview-glow:rgba(20,184,166,.32)} .site-fallback--caua{--preview-glow:rgba(124,58,237,.34)} .site-fallback--velene{--preview-glow:rgba(241,232,220,.34)} .site-fallback--wellness{--preview-glow:rgba(132,204,22,.28)} .site-fallback--sedalis{--preview-glow:rgba(20,184,166,.36)} .site-fallback--laura{--preview-glow:rgba(244,114,182,.34)} .site-fallback--clara{--preview-glow:rgba(219,39,119,.34)} .site-fallback--equilibrius{--preview-glow:rgba(90,154,122,.34)} .browser-bar{ display:flex; gap:7px; width:100%; padding:10px; border-radius:14px; background:rgba(255,255,255,.16); backdrop-filter:blur(8px); } .browser-bar span{ width:9px; height:9px; border-radius:50%; background:currentColor; opacity:.58; } .mock-hero{ margin:auto 0 0; width:100%; height:42%; border-radius: 18px; background: radial-gradient(520px 280px at 30% 30%, rgba(255,255,255,.18), transparent 60%), radial-gradient(520px 280px at 70% 70%, rgba(0,0,0,.20), transparent 60%); opacity:.55; filter: blur(0.2px); } @media (max-width: 900px){ .work .arch{ gap: 30px; } } @media (max-width: 768px){ /* Mobile: vira carrossel com swipe */ .work .arch{ flex-direction: column; gap: 14px; } .work .arch__left{ display:none; } .work .arch__right{ height:auto; max-width: 100%; display:flex; gap:14px; overflow-x:auto; overflow-y:visible; padding: 0 10px 10px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-x; } .work .arch__right::-webkit-scrollbar{ width:0; height:0; display:none; } .work .arch__right .img-wrapper{ position: relative; top:auto; left:auto; transform:none; flex: 0 0 86vw; max-width: 520px; height:auto; aspect-ratio: 16 / 10; scroll-snap-align: center; margin: 0; } /* Mobile: não carrega/mostra o site ao vivo (pesado); usa screenshot */ .site-frame{ display:none; } .site-shot__img{ opacity:1; } .site-fallback{ display:none; } .site-open{ right:10px; bottom:10px; height:40px; } .pf-mobile-caption{ display:block; position:absolute; left:12px; right:12px; bottom:58px; z-index:3; padding:12px 12px; border-radius:16px; background: rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.10); backdrop-filter: blur(10px); } } @media (max-width: 560px){ .work .arch{ gap: 12px; } .work .container{ padding: 10px; } .work .arch__right .img-wrapper{ border-radius: 12px; aspect-ratio: 16 / 11; } } /* =========================== Services (Codrops SlicedTextEffect) =========================== */ .sliced{ --mx:50%; --my:50%; background:#f7f8fb; color:#0a0a0a; padding: 0; position:relative; z-index:2; } .sliced::before{ content:""; pointer-events:none; position:absolute; /* inset:0 — inset negativo (% da altura da .sliced) inflava o scroll do documento no desktop (faixa “vazia” com --bg após o footer). */ inset:0; background: radial-gradient(920px 720px at var(--mx) var(--my), rgba(180,255,60,.3), transparent 72%), radial-gradient(1080px 780px at calc(var(--mx) * 0.7) calc(var(--my) * 0.9), rgba(0,0,0,.08), transparent 70%), repeating-radial-gradient(circle at 50% 50%, rgba(0,0,0,.05) 0 1px, transparent 1px 64px); opacity:.92; mask-image: radial-gradient(ellipse 88% 88% at 50% 45%, #000 60%, transparent 94%); } .sliced__main{ z-index:1; } .sliced__main{ /* igual ao demo: padding responsivo simples */ padding: 1rem; position: relative; height: auto; overflow-x: clip; overflow-y: visible; } .frame{ position: relative; display: grid; width: 100%; grid-row-gap: 1rem; grid-column-gap: 2rem; pointer-events: none; justify-items: start; } .frame--header{ margin-bottom: 10vh; grid-template-columns: auto auto; grid-template-areas: 'title' 'prev' 'back' 'sub' 'sponsor'; } .frame--footer{ margin-top: 40vh; grid-template-columns: auto auto; justify-content: space-between; } .frame a{ pointer-events: auto; font-weight: 700; text-decoration: none; color: rgba(10,10,10,.52); } .frame a:hover{ color: #000; text-decoration:none; } .frame__title{ grid-area:title; font-size: inherit; margin:0; opacity:.9; } .frame__back{ grid-area:back; } .frame__prev{ grid-area:prev; } .frame__sub{ grid-area:sub; } .content{ display:grid; position:relative; } .content--full{ min-height: 100vh; min-height: 100svh; display: grid; place-items: center; } .content--full p{ justify-self: center; margin-bottom: 22vh; font-weight: 500; opacity: 0.78; max-width: 56ch; font-size: 14px; line-height: 1.55; color: rgba(12,12,14,.68); text-shadow: 0 8px 28px rgba(255,255,255,.85); text-align: center; } .sliced .end{ justify-content:center; justify-self:center; } .spaced{ margin: 20vh auto; } .gtext{ line-height: 1; margin: 0; display: grid; font-weight: 400; justify-content: center; white-space: nowrap; --text-width: 100px; --gsplits: 4; --gcolor: #0a0a0a; --gsize: 1rem; font-size: var(--gsize); color: var(--gcolor); --offset: calc(var(--text-width) / var(--gsplits)); grid-template-columns: repeat(var(--gsplits),var(--offset)); } /* serviços (branco): garantir centralização e leitura completa */ .sliced .frame{ display:none; } .sliced .gtext{ justify-content:center; text-align:center; max-width: min(1100px, 96vw); } .sliced .content--full{ padding: clamp(24px, 6vh, 64px) 0; } .size-xxl{ --gsize: clamp(3.1rem, 10.5vw, 8rem); text-transform: uppercase; } .size-xl{ --gsize: clamp(2.1rem, 8vw, 5.6rem); text-transform: uppercase; } .size-s{ --gsize: clamp(1.05rem, 3.6vw, 2.2rem); text-transform: uppercase; } .gtext__box{ overflow: hidden; position: relative; will-change: transform; margin-right:0; } .gtext__box-inner{ width: max-content; position: relative; display: block; will-change: transform; font-family: Syne, Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 700; letter-spacing: -0.02em; text-shadow: none; } /* títulos gigantes: mais “ar” e menos largura */ .gtext.size-xxl{ letter-spacing: -0.02em; } /* reforça contraste sem “estourar” */ .gtext{ --gcolor: #0a0a0a; } /* remove imagens (deco) desta sessão */ .sliced .deco{ display:none !important; } /* garante que sombras/blend não “lavem” no fundo branco */ .sliced .shadow-1, .sliced .blendmode-1{ mix-blend-mode: normal !important; text-shadow: none !important; opacity: 1 !important; } @media screen and (min-width: 53em) { .sliced__main{ padding: 2rem 3rem; } } .deco{ display: grid; width: 80%; height: 100%; position: absolute; top: 0; left: 10%; z-index: -1; filter: brightness(0.6); pointer-events: none; grid-template-columns: repeat(3,auto); grid-template-rows: repeat(36,1fr); } .deco__item{ grid-column: 3 / span 1; background-size: cover; background-position: center; width: auto; aspect-ratio: 2/3; max-width: 33vw; border-radius: 4px; } .deco__item:nth-child(2n){ max-width: 18vw; grid-column: 1 / span 3; } .deco__item:nth-child(3n){ max-width: 12vw; grid-column: 2 / span 2; } .deco__item--1{ background-image:url('https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&w=900&q=70'); } .deco__item--2{ background-image:url('https://images.unsplash.com/photo-1518779578993-ec3579fee39f?auto=format&fit=crop&w=900&q=70'); } .deco__item--3{ background-image:url('https://images.unsplash.com/photo-1555949963-aa79dcee981c?auto=format&fit=crop&w=900&q=70'); } .deco__item--4{ background-image:url('https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=900&q=70'); } .deco__item--5{ background-image:url('https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&w=900&q=70'); } .deco__item--6{ background-image:url('https://images.unsplash.com/photo-1515879218367-8466d910aaa4?auto=format&fit=crop&w=900&q=70'); } .deco__item--7{ background-image:url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=900&q=70'); } .deco__item--8{ background-image:url('https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?auto=format&fit=crop&w=900&q=70'); } @media screen and (min-width: 53em){ .frame--header{ grid-template-columns: auto auto auto auto 1fr; grid-template-areas: 'title prev back sub sponsor'; } .deco{ grid-template-columns: repeat(5,auto); } .deco__item{ grid-column: 5 / span 1; max-width: 20vw; } .deco__item:nth-child(2n){ max-width: 18vw; grid-column: 1 / span 5; } .deco__item:nth-child(3n){ max-width: 7vw; grid-column: 4 / span 2; } .deco__item:nth-child(4n){ grid-column: 3 / span 3; } .deco__item:nth-child(5n){ max-width: 10vw; grid-column: 2 / span 4; } } .overlay-count-row{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:999px; border: 1px solid rgba(18,18,18,.12); background: rgba(255,255,255,.92); } .count-heading{ margin:0; font-family:"PP Neue Corp Wide", sans-serif; font-weight:800; letter-spacing:-.03em; } .count-row-divider{ width:1px; height:18px; background: rgba(18,18,18,.14); } .overlay-nav-row{ display:flex; gap:10px; } .button{ pointer-events:auto; border:1px solid rgba(18,18,18,.12); background: rgba(255,255,255,.92); border-radius:999px; padding:10px 14px; font-family:"PP Neue Corp Wide", sans-serif; letter-spacing:-.02em; } .button:active{ transform: translateY(1px); } @media (max-width: 860px){ .slide-inner{ min-height: 420px; } } @media (max-width: 560px){ .cloneable{ padding: 18px; } .overlay-inner{ left: 26px; top: 26px; } .slide-inner{ min-height: 320px; } }