/* ========================================================================= Página de Captura — "Acesse seu material" · Dudes Becker HTML + CSS puro. Fiel ao design Paper (artboards 1920×1080 e 400×1280). Escala: cada breakpoint define --u ("1px do design"). Todas as medidas são escritas como * var(--u), então a composição inteira escala junto com a tela, sem quebrar proporção. ========================================================================= */ /* ---------- 1. tokens ---------- */ :root{ --orange: #ED623B; --orange-deep: #873822; --maroon: #280814; --green: #434F43; --green-dark: #1D281D; --green-hover: #4E5C4E; --cream: #FCF9F0; --white: #FFFFFF; --panel: rgba(147, 64, 49, .388); --danger: #FFD9CE; /* Degular via Adobe Fonts (kit nhh3vcv, carregado no ). A família da Adobe se chama `degular` — nome em CSS é case-insensitive, então este "Degular" casa tanto com o kit quanto com uma Degular instalada na máquina. É o corpo de texto da fonte, o mesmo que o Paper usa em todo o design (o kit também traz `degular-display` e `degular-text`, não usados aqui). Familjen Grotesk fica como rede de segurança se o kit não carregar. */ --font: "Degular", "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); } /* ---------- 1b. Degular ---------- CAMINHO A — Adobe Fonts (mais fácil, incluso no Creative Cloud): crie um Web Project em fonts.adobe.com/fonts/degular, copie o do Typekit para o do index.html (e das páginas internas) e pronto. Não precisa mexer neste arquivo — a stack acima já chama a Degular. Pode remover o do Google Fonts depois de confirmar que carregou. CAMINHO B — arquivos próprios (licença de webfont da OH no Type Co.): coloque os .woff2 em assets/fonts/ e descomente o bloco abaixo. @font-face{ font-family:"Degular"; src:url("../assets/fonts/Degular-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:"Degular"; src:url("../assets/fonts/Degular-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; } @font-face{ font-family:"Degular"; src:url("../assets/fonts/Degular-Semibold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; } */ /* ---------- 2. reset ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; min-height:100%; background:var(--orange-deep); color:var(--white); font-family:var(--font); font-weight:400; letter-spacing:-.01em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img,svg{ display:block; max-width:100%; } button,input{ font:inherit; color:inherit; letter-spacing:inherit; } button{ background:none; border:0; cursor:pointer; } a{ color:inherit; } .skip{ position:absolute; left:-9999px; top:0; z-index:99; background:var(--white); color:var(--maroon); padding:12px 18px; border-radius:0 0 10px 0; font-weight:600; } .skip:focus{ left:0; } .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } /* ========================================================================= 3. palco + fundo ========================================================================= */ .stage{ position:relative; isolation:isolate; width:100%; min-height:100svh; overflow:hidden; } .bg{ position:absolute; inset:0; z-index:0; pointer-events:none; } .bg__conic{ position:absolute; inset:0; background:conic-gradient(from 180deg at 50% 50%, var(--orange) 0%, var(--orange-deep) 100%); } .bg__photo{ position:absolute; inset:0; display:block; } .bg__photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; } /* véu laranja que nasce no canto inferior esquerdo e some no alto/direita */ .bg__wash{ position:absolute; inset:0; background:linear-gradient(72.83deg, rgba(236,98,59,1) 7%, rgba(236,98,59,.86) 26%, rgba(236,98,59,0) 64.36%); } /* --- placas de vidro (retângulos translúcidos do design) --- */ .panels{ position:absolute; inset:0; overflow:hidden; } .panel{ position:absolute; display:block; background:var(--panel); opacity:.42; } /* --- faixa frisada de vidro no rodapé --- */ .glassbar{ position:absolute; left:0; right:0; background:repeating-linear-gradient(270deg, rgba(22,22,24,.40) 0px, rgba(0,0,0,.40) 11px, rgba(26,26,29,0) 62px, rgba(26,26,29,0) 64.28px); box-shadow:inset 0 2px 4px rgba(255,255,255,.16); -webkit-backdrop-filter:blur(50px); backdrop-filter:blur(50px); -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 7px, #000 100%); mask-image:linear-gradient(to bottom, transparent 0, #000 7px, #000 100%); } /* ========================================================================= 4. camada de conteúdo ========================================================================= */ .canvas{ position:relative; z-index:1; width:100%; } /* ---------- perfil ---------- */ .profile{ display:flex; align-items:center; gap:var(--avatar-gap); } .profile__avatar{ position:relative; flex:0 0 auto; width:var(--avatar); height:var(--avatar); border-radius:50%; overflow:visible; } .profile__avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; box-shadow:0 0 0 calc(var(--avatar) * .033) rgba(248,248,248,.97); } .profile__badge{ position:absolute; right:calc(var(--avatar) * -.02); bottom:calc(var(--avatar) * .015); width:calc(var(--avatar) * .256); height:calc(var(--avatar) * .256); overflow:visible; } .profile__text{ display:flex; flex-direction:column; } .profile__name{ font-size:var(--f-name); line-height:var(--lh-name); font-weight:500; color:var(--white); } .profile__handle{ font-size:var(--f-handle); line-height:var(--lh-handle); color:var(--maroon); } /* ---------- redes sociais ---------- */ .social{ display:flex; align-items:center; gap:var(--sgap); } .social__btn{ display:grid; place-items:center; flex:0 0 auto; width:var(--sbtn); height:var(--sbtn); border-radius:50%; background:rgba(255,255,255,.14); outline:calc(var(--sbtn) * .0214) solid rgba(255,255,255,.31); outline-offset:calc(var(--sbtn) * -.0214); transition:background .3s var(--ease), transform .3s var(--ease-out), outline-color .3s var(--ease); } .social__btn svg{ width:calc(var(--sbtn) * .342); height:auto; fill:var(--white); } .social__btn--yt svg{ width:calc(var(--sbtn) * .513); } .social__btn:hover, .social__btn:focus-visible{ background:rgba(255,255,255,.3); outline-color:rgba(255,255,255,.75); transform:translateY(-3px); } /* ---------- textos do bloco principal ---------- */ .lead__eyebrow{ margin:0; font-size:var(--f-eyebrow); line-height:var(--lh-eyebrow); color:var(--maroon); } .lead__title{ margin:0; font-size:var(--f-title); line-height:var(--lh-title); font-weight:400; color:var(--white); text-wrap:balance; } /* ---------- formulário ---------- */ .form{ position:relative; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(3, var(--field-h)); column-gap:var(--gap-x); row-gap:var(--gap-y); width:var(--form-w); max-width:100%; } .field--nome{ grid-column:1; } .field--fone{ grid-column:2; } .field--mail{ grid-column:1 / -1; } .btn{ grid-column:1 / -1; } .field{ position:relative; min-width:0; } .field__outline{ position:absolute; top:calc(var(--legend-h) / -2); left:0; right:0; bottom:0; margin:0; min-inline-size:0; padding:0 calc(10.69 * var(--u)); border:var(--border-w) solid rgba(255,255,255,.9); border-radius:var(--radius); pointer-events:none; transition:border-color .25s var(--ease), box-shadow .25s var(--ease); } .field__outline legend{ display:block; width:auto; padding:0; height:var(--legend-h); max-width:100%; font-size:var(--f-label); visibility:hidden; } .field__outline legend span{ display:inline-block; padding:0 calc(5.3 * var(--u)); opacity:0; white-space:nowrap; } .field__label{ position:absolute; left:calc(15.99 * var(--u)); top:0; transform:translateY(-50%); z-index:2; font-size:var(--f-label); line-height:1; font-weight:500; color:var(--white); white-space:nowrap; pointer-events:none; transition:color .25s var(--ease); } .field__input{ width:100%; height:100%; padding:0 var(--field-pad); border:0; border-radius:var(--radius); background:transparent; font-size:var(--f-input); font-weight:400; color:var(--white); outline:none; } .field__input::placeholder{ color:rgba(255,255,255,.82); } .field__input:-webkit-autofill{ -webkit-text-fill-color:var(--white); transition:background-color 9999s ease-in-out 0s; } .field__input:hover ~ .field__outline{ border-color:var(--white); } .field__input:focus ~ .field__outline{ border-color:var(--white); box-shadow:0 0 0 calc(3 * var(--u)) rgba(255,255,255,.22); } .field.is-invalid .field__outline{ border-color:var(--danger); } .field.is-invalid .field__label{ color:var(--danger); } .field__error{ position:absolute; left:calc(4 * var(--u)); top:100%; margin:calc(3 * var(--u)) 0 0; font-size:var(--f-error); line-height:1.2; color:var(--danger); opacity:0; transform:translateY(calc(-3 * var(--u))); transition:opacity .2s var(--ease), transform .2s var(--ease); pointer-events:none; } .field.is-invalid .field__error{ opacity:1; transform:none; } /* ---------- botão ---------- */ .btn{ position:relative; display:grid; place-items:center; height:100%; padding:0 calc(10.61 * var(--u)); border-radius:var(--radius); border-bottom:calc(2 * var(--u)) solid var(--green-dark); background:var(--green); font-size:var(--f-btn); font-weight:600; line-height:1.2; color:var(--white); overflow:hidden; transition:background .25s var(--ease), transform .18s var(--ease), box-shadow .25s var(--ease), border-bottom-width .12s var(--ease); } .btn::after{ /* brilho que atravessa no hover */ content:""; position:absolute; inset:0; background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%); transform:translateX(-120%); transition:transform .7s var(--ease-out); } .btn:hover{ background:var(--green-hover); transform:translateY(calc(-2 * var(--u))); box-shadow:0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(29,40,29,.35); } .btn:hover::after{ transform:translateX(120%); } .btn:active{ transform:translateY(calc(1 * var(--u))); border-bottom-width:1px; } .btn:focus-visible{ box-shadow:0 0 0 calc(4 * var(--u)) rgba(255,255,255,.55); } .btn__spinner{ position:absolute; width:calc(var(--f-btn) * .95); height:calc(var(--f-btn) * .95); border:calc(var(--f-btn) * .11) solid rgba(255,255,255,.3); border-top-color:var(--white); border-radius:50%; opacity:0; } .btn.is-busy{ pointer-events:none; } .btn.is-busy .btn__label{ opacity:0; } .btn.is-busy .btn__spinner{ opacity:1; animation:spin .7s linear infinite; } .btn.is-done{ background:#2F6B44; border-bottom-color:#1B3E28; } /* fica fora do fluxo do grid para não alterar a altura da composição */ .form__status{ position:absolute; left:0; right:0; top:100%; margin:calc(9 * var(--u)) 0 0; font-size:var(--f-status); line-height:1.35; color:var(--white); } .form__status.is-error{ color:var(--danger); } /* ---------- vídeo ---------- */ .video{ position:relative; display:block; padding:0; width:var(--thumb-w); border-radius:var(--thumb-r); overflow:hidden; box-shadow:0 calc(18 * var(--u)) calc(46 * var(--u)) rgba(48,10,0,.32); transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out); } .video__thumb{ width:100%; height:auto; aspect-ratio:527 / 296.44; object-fit:cover; transition:transform .6s var(--ease-out), filter .4s var(--ease); } .video__play{ position:absolute; inset:0; margin:auto; width:calc(var(--thumb-w) * .155); height:calc(var(--thumb-w) * .155); display:grid; place-items:center; border-radius:50%; background:rgba(20,8,4,.42); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 0 0 calc(var(--thumb-w) * .006) rgba(255,255,255,.7); opacity:0; transform:scale(.72); transition:opacity .35s var(--ease), transform .45s var(--ease-out); } .video__play svg{ width:44%; height:44%; fill:var(--white); margin-left:8%; } .video__hint{ position:absolute; left:calc(var(--thumb-w) * .038); bottom:calc(var(--thumb-w) * .038); padding:calc(var(--thumb-w) * .017) calc(var(--thumb-w) * .038); border-radius:999px; background:rgba(20,8,4,.5); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); font-size:calc(var(--thumb-w) * .043); font-weight:500; line-height:1.1; color:var(--white); opacity:0; transform:translateY(calc(6 * var(--u))); transition:opacity .35s var(--ease), transform .35s var(--ease-out); } .video:hover, .video:focus-visible{ transform:translateY(calc(-8 * var(--u))) scale(1.014); box-shadow:0 calc(28 * var(--u)) calc(60 * var(--u)) rgba(48,10,0,.42); } .video:hover .video__thumb, .video:focus-visible .video__thumb{ transform:scale(1.05); filter:brightness(.82); } .video:hover .video__play, .video:focus-visible .video__play{ opacity:1; transform:scale(1); } .video:hover .video__hint, .video:focus-visible .video__hint{ opacity:1; transform:none; } .video:focus-visible{ outline:calc(3 * var(--u)) solid rgba(255,255,255,.85); outline-offset:calc(4 * var(--u)); } /* ---------- selo giratório ---------- */ .selo{ width:var(--selo); height:var(--selo); pointer-events:none; user-select:none; } /* ---------- termos ---------- */ .terms{ font-size:var(--f-terms); line-height:1.3; color:var(--white); text-decoration:none; /* sem sublinhado no estado normal */ transition:opacity .25s var(--ease); } .terms:hover, .terms:focus-visible{ /* só ao passar o mouse / no teclado */ text-decoration:underline; text-underline-offset:3px; opacity:.85; } /* ========================================================================= 5. DESKTOP (≥1100px) — composição exata do artboard 1920×1080, 100vh ========================================================================= */ @media (min-width:1100px){ .stage{ height:100svh; min-height:560px; /* 1px do design; limitado pela menor dimensão para nunca estourar a tela */ --u:clamp(.46px, min(100vw / 1920, 100svh / 1080), 2.4px); --f-title:calc(63.54 * var(--u)); --lh-title:calc(78 * var(--u)); --f-eyebrow:calc(20 * var(--u)); --lh-eyebrow:calc(24 * var(--u)); --f-input:calc(23.86 * var(--u)); --f-label:calc(18.56 * var(--u)); --f-btn:calc(23.86 * var(--u)); --f-name:calc(26 * var(--u)); --lh-name:calc(32 * var(--u)); --f-handle:calc(16 * var(--u)); --lh-handle:calc(20 * var(--u)); --f-terms:calc(15.26 * var(--u)); --f-error:calc(13.5 * var(--u)); --f-status:calc(15 * var(--u)); --radius:calc(13.2573 * var(--u)); --border-w:calc(1.527 * var(--u)); --legend-h:calc(20 * var(--u)); --field-pad:calc(21.21 * var(--u)); --field-h:calc(75.49 * var(--u)); --form-w:calc(588 * var(--u)); --gap-x:calc(9.16 * var(--u)); --gap-y:calc(22.91 * var(--u)); --avatar:calc(61 * var(--u)); --avatar-gap:calc(16 * var(--u)); --sbtn:calc(40.5 * var(--u)); --sgap:calc(13.86 * var(--u)); --selo:calc(161 * var(--u)); --thumb-w:calc(527 * var(--u)); --thumb-r:calc(29 * var(--u)); } .canvas{ height:100%; } .mark{ display:none; } /* ⬅️➡️ Distância da coluna de conteúdo até a borda esquerda. O artboard do Paper usa 167. Aumente para empurrar o perfil + o formulário mais para a direita; diminua para o contrário. */ .stage{ --content-x:250; } .profile{ position:absolute; left:calc(var(--content-x) * var(--u)); top:calc(99 * var(--u)); } .social { position:absolute; right:calc(93.72 * var(--u)); top:calc(59 * var(--u)); } /* bloco principal: centralizado na vertical com o mesmo desvio do design */ .lead{ position:absolute; left:calc(var(--content-x) * var(--u)); top:50%; transform:translateY(calc(-50% + 21 * var(--u))); width:calc(588 * var(--u)); } .lead__eyebrow{ margin-bottom:calc(11.28 * var(--u)); } .lead__title { margin-bottom:calc(43 * var(--u)); } /* top:50% + margin mantém o enquadramento do design em telas mais altas, e deixa o transform livre para hover/animação */ .video{ position:absolute; right:calc(94 * var(--u)); top:50%; margin-top:calc(50 * var(--u)); } .selo{ position:absolute; left:calc(58 * var(--u)); bottom:calc(32 * var(--u)); } .terms{ position:absolute; right:calc(87 * var(--u)); top:calc(1022 * var(--u)); white-space:nowrap; } .glassbar{ bottom:calc(-117 * var(--u)); height:calc(209 * var(--u)); } /* placas — coordenadas do artboard, ancoradas ao lado mais próximo */ .panel--a{ left:0; top:calc(251 * var(--u)); width:calc(286 * var(--u)); height:calc(286 * var(--u)); } .panel--b{ left:calc(286 * var(--u)); top:0; width:calc(282 * var(--u)); height:calc(537 * var(--u)); } .panel--c{ left:calc(568.23 * var(--u));top:0; width:calc(284.07 * var(--u)); height:calc(248.57 * var(--u)); } .panel--d{ left:calc(568 * var(--u)); top:calc(537 * var(--u)); width:calc(284.07 * var(--u)); height:calc(284.07 * var(--u)); border-bottom-left-radius:calc(26 * var(--u)); } .panel--e{ left:calc(852 * var(--u)); top:calc(821 * var(--u)); width:calc(284.07 * var(--u)); height:calc(284.07 * var(--u)); } .panel--f{ left:calc(76.73 * var(--u)); top:calc(802.21 * var(--u)); width:calc(284.07 * var(--u)); height:calc(284.07 * var(--u)); } .panel--g{ right:calc(-68.07 * var(--u)); top:0; width:calc(284.07 * var(--u)); height:calc(272.07 * var(--u)); border-bottom-left-radius:calc(26 * var(--u)); } .panel--h{ right:calc(138.93 * var(--u)); top:calc(537 * var(--u)); width:calc(284.07 * var(--u)); height:calc(284.07 * var(--u)); } } /* telas muito largas (ultrawide): o véu acompanha para não sobrar borda seca */ @media (min-width:1900px){ .bg__wash{ background:linear-gradient(72.83deg, rgba(236,98,59,1) 4%, rgba(236,98,59,.86) 24%, rgba(236,98,59,0) 62%); } } /* A foto é 16:9. Em qualquer tela mais larga que isso — e é o caso da maioria dos monitores depois que a barra do navegador come altura — o `cover` corta na vertical. Ancorando no topo, o corte sai todo de baixo (sofá/chão) e o enquadramento da cabeça fica igual ao do design. */ @media (min-width:1100px) and (min-aspect-ratio:16/9){ .bg__photo img{ object-position:50% 0%; } } @media (min-width:1100px) and (min-aspect-ratio:2/1){ .bg__wash{ background:linear-gradient(78deg, rgba(236,98,59,1) 2%, rgba(236,98,59,.84) 20%, rgba(236,98,59,0) 55%); } } /* ========================================================================= 6. TABLET (600px – 1099px) ========================================================================= */ @media (min-width:600px) and (max-width:1099px){ .stage{ min-height:100svh; --u:clamp(.7px, 100vw / 760, 1.35px); --f-title:calc(58 * var(--u)); --lh-title:calc(62 * var(--u)); --f-eyebrow:calc(17 * var(--u)); --lh-eyebrow:calc(22 * var(--u)); --f-input:calc(19 * var(--u)); --f-label:calc(15 * var(--u)); --f-btn:calc(19.5 * var(--u)); --f-name:calc(21 * var(--u)); --lh-name:calc(26 * var(--u)); --f-handle:calc(13.5 * var(--u));--lh-handle:calc(17 * var(--u)); --f-terms:calc(13.5 * var(--u)); --f-error:calc(12.5 * var(--u)); --f-status:calc(14 * var(--u)); --radius:calc(11 * var(--u)); --border-w:calc(1.35 * var(--u)); --legend-h:calc(16 * var(--u)); --field-pad:calc(17 * var(--u)); --field-h:calc(62 * var(--u)); --form-w:100%; --gap-x:calc(9 * var(--u)); --gap-y:calc(20 * var(--u)); --avatar:calc(50 * var(--u)); --avatar-gap:calc(13 * var(--u)); --sbtn:calc(44 * var(--u)); --sgap:calc(14 * var(--u)); --selo:calc(132 * var(--u)); --thumb-w:100%; --thumb-r:calc(22 * var(--u)); } .canvas{ display:flex; flex-direction:column; align-items:flex-start; gap:calc(30 * var(--u)); width:min(100%, calc(620 * var(--u))); margin-inline:auto; padding:calc(46 * var(--u)) calc(34 * var(--u)) calc(150 * var(--u)); min-height:100svh; } .mark{ width:calc(48 * var(--u)); height:auto; order:1; } .lead { order:2; width:100%; } .video { order:3; width:100%; } .profile{ order:4; } .social { order:5; } .terms { order:6; } .lead__eyebrow{ margin-bottom:calc(10 * var(--u)); } .lead__title { margin-bottom:calc(40 * var(--u)); } /* respiro para a foto aparecer antes do rodapé */ .profile{ margin-top:calc(190 * var(--u)); } .social { margin-top:calc(6 * var(--u)); } .selo{ position:absolute; left:calc(20 * var(--u)); bottom:calc(150 * var(--u)); opacity:.95; } .glassbar{ bottom:calc(-40 * var(--u)); height:calc(150 * var(--u)); } .panel--a{ left:0; top:calc(120 * var(--u)); width:calc(180 * var(--u)); height:calc(340 * var(--u)); } .panel--b{ right:0; top:calc(40 * var(--u)); width:calc(220 * var(--u)); height:calc(220 * var(--u)); border-bottom-left-radius:calc(24 * var(--u)); } .panel--c{ left:calc(120 * var(--u)); bottom:calc(180 * var(--u)); width:calc(240 * var(--u)); height:calc(240 * var(--u)); top:auto; } .panel--d,.panel--e,.panel--f,.panel--g,.panel--h{ display:none; } } /* tablet em pé — foto vertical, conteúdo centralizado */ @media (min-width:600px) and (max-width:1099px) and (orientation:portrait){ .canvas{ align-items:center; text-align:center; } .lead{ display:flex; flex-direction:column; align-items:center; width:100%; } .form{ text-align:left; } .field__error{ text-align:left; } .bg__photo img{ object-position:50% 60%; } .bg__wash{ background:linear-gradient(176deg, rgba(236,98,59,1) 1%, rgba(236,98,59,.92) 26%, rgba(236,98,59,0) 58%); } /* véu escuro atrás do rodapé para o texto não brigar com a foto */ .glassbar{ bottom:calc(-40 * var(--u)); height:calc(300 * var(--u)); -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 45%, #000 100%); mask-image:linear-gradient(to bottom, transparent 0, #000 45%, #000 100%); } .profile,.social,.terms{ text-shadow:0 1px 12px rgba(30,8,2,.65); } } /* tablet deitado — duas colunas, mesma leitura do desktop, em 100svh */ @media (min-width:600px) and (max-width:1099px) and (orientation:landscape){ .stage{ --u:clamp(.6px, min(100vw / 1250, 100svh / 820), 1.15px); } .canvas{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 42%); grid-template-rows:1fr; align-items:center; column-gap:calc(34 * var(--u)); width:100%; margin-inline:0; padding:calc(104 * var(--u)) calc(40 * var(--u)) calc(96 * var(--u)) calc(50 * var(--u)); min-height:100svh; } .mark{ display:none; } .lead { grid-column:1; width:100%; } .video{ grid-column:2; width:100%; } .profile{ position:absolute; margin:0; left:calc(50 * var(--u)); top:calc(34 * var(--u)); } .social{ position:absolute; margin:0; right:calc(40 * var(--u)); top:calc(32 * var(--u)); } .terms{ position:absolute; right:calc(40 * var(--u)); bottom:calc(30 * var(--u)); } .selo{ position:absolute; left:calc(34 * var(--u)); bottom:calc(24 * var(--u)); } .glassbar{ bottom:calc(-70 * var(--u)); height:calc(160 * var(--u)); } .panel--a{ left:0; top:0; width:calc(150 * var(--u)); height:calc(420 * var(--u)); } .panel--b{ right:0; top:0; width:calc(230 * var(--u)); height:calc(210 * var(--u)); border-bottom-left-radius:calc(24 * var(--u)); } .panel--c{ left:calc(150 * var(--u)); bottom:0; top:auto; width:calc(240 * var(--u)); height:calc(240 * var(--u)); } .bg__photo img{ object-position:62% 50%; } .bg__wash{ background:linear-gradient(74deg, rgba(236,98,59,1) 10%, rgba(236,98,59,.88) 32%, rgba(236,98,59,0) 76%); } } /* ========================================================================= 7. MOBILE (<600px) — composição exata do artboard 400×1280 ========================================================================= */ @media (max-width:599px){ .stage{ --u:calc(min(100vw, 480px) / 400); --f-title:calc(42 * var(--u)); --lh-title:calc(43.7 * var(--u)); --f-eyebrow:calc(12 * var(--u)); --lh-eyebrow:calc(16 * var(--u)); --f-input:calc(13.76 * var(--u)); --f-label:calc(10.7 * var(--u)); --f-btn:calc(13.76 * var(--u)); --f-name:calc(13.12 * var(--u)); --lh-name:calc(16 * var(--u)); --f-handle:calc(8.07 * var(--u)); --lh-handle:calc(10 * var(--u)); --f-terms:calc(10 * var(--u)); --f-error:calc(9.5 * var(--u)); --f-status:calc(11 * var(--u)); --radius:calc(7.64322 * var(--u)); --border-w:calc(.95 * var(--u)); --legend-h:calc(12 * var(--u)); --field-pad:calc(12.23 * var(--u)); --field-h:calc(44 * var(--u)); --form-w:calc(335 * var(--u)); --gap-x:calc(5.28 * var(--u)); --gap-y:calc(13.21 * var(--u)); --avatar:calc(30.77 * var(--u)); --avatar-gap:calc(8.07 * var(--u)); --sbtn:calc(40.5 * var(--u)); --sgap:calc(13.86 * var(--u)); --selo:calc(104 * var(--u)); --thumb-w:calc(350 * var(--u)); --thumb-r:calc(27.23 * var(--u)); min-height:calc(1280 * var(--u)); } .canvas{ width:min(100%, 480px); margin-inline:auto; height:calc(1280 * var(--u)); } .mark{ position:absolute; left:calc(179 * var(--u)); top:calc(17 * var(--u)); width:calc(41.71 * var(--u)); height:calc(37.64 * var(--u)); } /* bloco em fluxo: as margens reproduzem exatamente o artboard (olho 73 → título 96 → formulário 174) */ .lead{ position:absolute; left:0; right:0; top:calc(73 * var(--u)); text-align:center; } .lead__eyebrow{ margin:0 auto calc(7 * var(--u)); padding-inline:calc(20 * var(--u)); } .lead__title{ margin:0 0 calc(34.3 * var(--u)); } .form{ margin-inline:auto; grid-template-columns:1fr; grid-template-rows:repeat(4, var(--field-h)); text-align:left; } .field--nome,.field--fone,.field--mail{ grid-column:1; } .btn{ grid-column:1; } .video{ position:absolute; left:50%; top:calc(418 * var(--u)); transform:translateX(-50%); } .video:hover, .video:focus-visible{ transform:translateX(-50%) translateY(calc(-6 * var(--u))); } .selo{ position:absolute; left:calc(-28 * var(--u)); top:calc(356 * var(--u)); } .profile{ position:absolute; left:calc(230 * var(--u)); top:calc(877 * var(--u)); } .profile__handle{ color:rgba(255,255,255,.9); } .social{ position:absolute; left:50%; top:calc(1145 * var(--u)); transform:translateX(-50%); } .terms{ position:absolute; left:50%; top:calc(1198 * var(--u)); transform:translateX(-50%); white-space:nowrap; opacity:.88; } .glassbar{ bottom:calc(-28 * var(--u)); height:calc(89 * var(--u)); background:repeating-linear-gradient(270deg, rgba(22,22,24,.40) 0px, rgba(0,0,0,.40) 4px, rgba(26,26,29,0) 23px, rgba(26,26,29,0) 24px); } .bg__photo img{ object-position:50% 46%; } .bg__wash{ background:linear-gradient(176.01deg, rgba(236,98,59,1) .86%, rgba(236,98,59,.82) 22%, rgba(236,98,59,0) 47.93%); } .panel--a{ left:0; top:calc(430 * var(--u)); width:calc(150 * var(--u)); height:calc(300 * var(--u)); } .panel--b{ right:0; top:calc(250 * var(--u)); width:calc(120 * var(--u)); height:calc(220 * var(--u)); border-bottom-left-radius:calc(18 * var(--u)); } .panel--c,.panel--d,.panel--e,.panel--f,.panel--g,.panel--h{ display:none; } } /* telas muito estreitas — evita o teclado do iOS dar zoom nos inputs */ @media (max-width:599px){ .field__input{ font-size:max(var(--f-input), 16px); } .lead__eyebrow{ font-size:max(var(--f-eyebrow), 12px); } } /* ========================================================================= 8. modal do vídeo ========================================================================= */ .modal{ position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:clamp(16px, 4vw, 48px); } .modal[hidden]{ display:none; } .modal__backdrop{ position:absolute; inset:0; background:rgba(24,8,3,.82); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); animation:fade .3s var(--ease) both; } /* nunca deixa o player + botão de fechar ultrapassarem a altura da tela */ .modal__panel{ position:relative; width:min(100%, 1120px, calc((100svh - 132px) * 1.7778)); animation:pop .42s var(--ease-out) both; } .modal__frame{ position:relative; aspect-ratio:16 / 9; border-radius:clamp(10px, 1.4vw, 20px); overflow:hidden; background:#120603; box-shadow:0 30px 90px rgba(0,0,0,.55); } .modal__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .modal__close{ position:absolute; right:0; bottom:calc(100% + 12px); display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.16); outline:1px solid rgba(255,255,255,.4); transition:background .25s var(--ease), transform .25s var(--ease-out); } .modal__close svg{ width:18px; height:18px; stroke:#fff; stroke-width:2; fill:none; stroke-linecap:round; } .modal__close:hover{ background:rgba(255,255,255,.32); transform:rotate(90deg); } body.is-locked{ overflow:hidden; } /* ========================================================================= 9. animações ========================================================================= */ /* usa a propriedade independente `translate` para não sobrescrever os `transform` de posicionamento (translateX(-50%), hover, etc.) */ @keyframes rise{ from{ opacity:0; translate:0 22px; filter:blur(6px); } to { opacity:1; translate:0 0; filter:blur(0); } } @keyframes fade{ from{ opacity:0 } to{ opacity:1 } } @keyframes pop{ from{ opacity:0; transform:translateY(24px) scale(.97) } to{ opacity:1; transform:none } } @keyframes spin{ to{ transform:rotate(360deg) } } @keyframes float{ 0%,100%{ translate:0 0 } 50% { translate:0 -10px } } @keyframes breathe{ 0%,100%{ opacity:.42 } 50% { opacity:.28 } } .reveal{ animation:rise .9s var(--ease-out) both; } .reveal[data-reveal="1"]{ animation-delay:.05s } .reveal[data-reveal="2"]{ animation-delay:.18s } .reveal[data-reveal="3"]{ animation-delay:.28s } .reveal[data-reveal="4"]{ animation-delay:.40s } .reveal[data-reveal="5"]{ animation-delay:.56s } /* o vídeo respira depois de entrar; a translação do desktop fica no wrapper */ @media (min-width:1100px){ .video{ animation:rise .9s var(--ease-out) .56s both; } } .panel--f{ animation:breathe 11s ease-in-out infinite; } .panel--d{ animation:breathe 14s ease-in-out infinite reverse; } .selo{ animation:rise .9s var(--ease-out) .56s both, float 7s ease-in-out 1.6s infinite; } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .reveal{ opacity:1 !important; translate:none !important; filter:none !important; } }