/* ===== Menu, rodape e politicas — portados da LP Wavy x Dyson Supersonic Travel ===== */ /* ===== HEADER da Glossy ===== Só entra quando o cfg define `header_marcador`: alvo cujo header nativo não dá para reaproveitar (header React com logo em SVG inline, sem src para trocar, e com menu/carrinho ligados ao backend da loja de origem). O header do tema é cortado e este entra como primeiro filho do , em position:sticky — assim não depende da árvore de layout do alvo. */ .dy-hd{position:sticky;top:0;z-index:9996;background:#fff;border-bottom:1px solid var(--dy-line);font-family:'Jost',-apple-system,sans-serif} .dy-hd-in{display:flex;align-items:center;justify-content:space-between;gap:10px;height:58px;padding:0 14px;max-width:1352px;margin:0 auto} .dy-burger,.dy-cartbtn{background:none;border:0;padding:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--dy-ink);position:relative;flex:0 0 auto} .dy-hd-logo{display:flex;align-items:center;justify-content:center;flex:1;min-width:0} .dy-hd-logo img{height:26px;width:auto;max-width:150px;object-fit:contain;display:block} .dy-hd-n{position:absolute;top:0;right:0;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--dy-ink);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center} /* o display:flex acima vence o atributo hidden do UA: sem isto a bolinha do carrinho ficava visivel com "0" enquanto o carrinho estava vazio */ .dy-hd-n[hidden]{display:none!important} .dy-hd svg{width:auto;height:auto;stroke:currentColor} @media(min-width:1000px){.dy-hd-in{height:70px;padding:0 24px}.dy-hd-logo img{height:32px;max-width:190px}} body.dy-open .dy-hd{z-index:1} .dy-nav{display:none;gap:22px;margin-right:auto} .dy-nav a{font-size:13px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--dy-soft);white-space:nowrap} /* ===== FOOTER (Dyson dark) ===== */ .dy-foot{background:#000;color:#fff;margin-top:14px;box-shadow:50vw 0 0 0 #000,-50vw 0 0 0 #000} .dy-foot-acc{border-bottom:1px solid #2c2c2c} .dy-foot-acc:first-child{border-top:1px solid #2c2c2c} .dy-foot-row{width:100%;background:none;border:0;color:#fff;font-family:inherit;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:24px 20px;font-size:18px;font-weight:600;letter-spacing:-.01em;cursor:pointer;text-align:left} .dy-foot-row svg{flex:0 0 auto;transition:transform .25s;stroke:#fff} .dy-foot-acc[aria-expanded="true"] .dy-foot-row svg{transform:rotate(180deg)} .dy-foot-panel{max-height:0;overflow:hidden;transition:max-height .32s ease} .dy-foot-panel-in{padding:0 20px 18px} .dy-foot-panel-in a{display:block;padding:9px 0;font-size:14.5px;color:#b0b0b0} .dy-foot-region{display:flex;align-items:center;justify-content:center;gap:11px;padding:26px 20px 36px;border-top:1px solid #2c2c2c} .dy-foot-region span{font-size:15px;letter-spacing:.04em} .dy-foot-legal{padding:26px 20px 0;line-height:2.1} .dy-foot-legal a{font-size:13px;color:#9a9a9a;padding-right:11px;margin-right:11px;border-right:1px solid #4a4a4a} .dy-foot-legal a.nb{border-right:0;padding-right:0;margin-right:0} .dy-foot-copy{padding:24px 20px 40px;font-size:13px;color:#7a7a7a} .dy-foot-help{padding:32px 20px 8px;border-bottom:1px solid #2c2c2c} .dy-foot-help h4{font-size:17px;font-weight:700;color:#fff;letter-spacing:-.01em} .dy-foot-help .dy-foot-mail{display:inline-block;font-size:15px;color:#fff;text-decoration:underline;text-underline-offset:3px;margin-top:9px} .dy-foot-help-row{display:flex;gap:20px;margin-top:14px} .dy-foot-help-row a{font-size:13.5px;color:#b0b0b0;text-decoration:underline;text-underline-offset:3px} .dy-foot-collab{display:flex;align-items:center;gap:10px;padding:22px 20px 0} .dy-foot-collab img{height:18px;width:auto;object-fit:contain;filter:invert(1)} .dy-foot-collab em{font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8a8a8a} /* footer trust badges + payment chips (moved from tbar, dark restyle) */ .dy-foot-trust{padding:30px 20px 6px;border-top:1px solid #2c2c2c} .dy-foot-trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 16px} .dy-foot-trust-row span{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:400;color:#cfcfcf} .dy-foot-trust-row svg{flex:0 0 auto;stroke:#cfcfcf} .dy-foot-pay{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;padding:18px 20px 0} .dy-foot-pay span{height:25px;padding:0 9px;border:1px solid rgba(255,255,255,.18);border-radius:6px;display:flex;align-items:center;font-size:10px;font-weight:700;letter-spacing:.03em;background:rgba(255,255,255,.07);color:rgba(255,255,255,.82)} .dy-lb{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.93);display:none;align-items:center;justify-content:center;padding:24px} .dy-lb.show{display:flex} .dy-lb img{max-width:100%;max-height:100%;object-fit:contain} .dy-lb-x{position:absolute;top:16px;right:16px;background:none;border:0;cursor:pointer;padding:4px} /* ===== base compartilhada do shell ===== As variaveis de cor e a mecanica de DRAWER/OVERLAY viviam no cart.css. Como o cart.css so entra em pagina com add-to-cart, a primeira pagina sem carrinho (join.whoop.com) ficou com o nav drawer sem posicao nenhuma e com as variaveis vazias: o menu "abria" (a classe .show entrava) e nada aparecia na tela. Base compartilhada mora aqui; o cart.css guarda so o que e do carrinho. */ :root{ --dy-ink:#1A1A1A;--dy-soft:#555;--dy-line:#E4E4E4;--dy-grey:#F4F2F1; --dy-blue:#1A1A1A;--dy-green:#1A1A1A;--dy-sale:#1A1A1A;--dy-copper:#1A1A1A;--dy-save:#1A1A1A;--dy-red:#C0392B; } .dy-draw{position:fixed;top:0;bottom:0;width:90%;max-width:390px;background:#fff;z-index:90;display:flex;flex-direction:column;transition:transform .42s cubic-bezier(.22,.61,.36,1);will-change:transform;font-family:'Jost',-apple-system,sans-serif} .dy-draw-r{right:0;transform:translateX(100%)} .dy-draw-r.show{transform:translateX(0)} .dy-draw-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} .dy-ov{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:80} .dy-ov.show{opacity:1;visibility:visible} @media (max-width: 768px){ html{ overflow-x: hidden; } .dy-draw{ width: min(90vw, 390px); max-width: 100vw; } } .dy-draw-l{left:0;transform:translateX(-100%)} .dy-draw-l.show{transform:translateX(0)} .dy-draw-top{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--dy-line);flex:0 0 auto} .dy-draw-top h4{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase} .dy-draw-x{background:none;border:0;display:flex;padding:4px;cursor:pointer} /* nav drawer */ .dy-nav-l a{display:flex;align-items:center;justify-content:space-between;padding:17px 20px;border-bottom:1px solid var(--dy-line);font-size:15px;font-weight:400;letter-spacing:.02em;color:var(--dy-ink);cursor:pointer} .dy-nav-l a svg{stroke:#bbb} /* ===== POLICY MODALS (Nike-Mind sheet) ===== */ .dy-modal{position:fixed;inset:0;z-index:98;display:none;font-family:'Jost',-apple-system,sans-serif} .dy-modal.open{display:block} .dy-modal .bg{position:absolute;inset:0;background:rgba(10,10,10,.55)} .dy-modal .box{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:16px 16px 0 0;padding:26px 20px 34px;max-height:86vh;overflow:auto;max-width:520px;margin:0 auto} .dy-modal h3{font-weight:500;font-size:21px;letter-spacing:.005em;margin-bottom:6px;padding-right:30px} .dy-modal .close{position:absolute;top:14px;right:16px;width:34px;height:34px;border:0;border-radius:50%;background:var(--dy-grey);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2} .dy-modal .pol-b{font-size:14.5px;color:var(--dy-soft);line-height:1.65;font-weight:300} .dy-modal .pol-b p{margin-top:10px} .dy-modal .pol-b h4{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dy-ink);margin:18px 0 4px} .dy-modal .pol-b a{color:var(--dy-ink);font-weight:500;text-decoration:underline;text-underline-offset:2px} /* o rodape da Wavy ocupa a largura toda desta pagina */ .dy-foot{margin-top:0} /* menu nativo do tema e mini-cart nativo desativados — quem manda sao os do shell. Seletores especificos do tema de origem entram por "css_desativar" no clone.cfg.json, que o port_shell.py acrescenta ao fim deste arquivo. */ .header-drawer-details,.header-drawer-main-menu{display:none!important} cart-drawer,.cart-drawer-overlay,.cart-notification,.cart-drawer{display:none!important} /* os drawers da Wavy ficam acima do header sticky e dos botoes flutuantes do tema */ .dy-ov{z-index:99990!important} .dy-draw{z-index:99995!important} .dy-modal{z-index:99998!important} body.dy-open .section-header,body.dy-open [id$="__back-to-top"],body.dy-open sticky-bar, body.dy-open [class*="sticky-bar"],body.dy-open .section-header-sticky{z-index:1!important} body.dy-open [id$="__back-to-top"],body.dy-open .section-header-sticky-wrapper{display:none!important} /* o CSS do tema zera o tamanho dos SVG inline — os blocos da Wavy usam o proprio atributo */ .dy-draw svg,.dy-modal svg,.dy-foot svg,#dyNavDraw svg{width:auto;height:auto;max-width:none} #dyCartX{width:32px;height:32px;min-width:32px;padding:0;display:flex;align-items:center;justify-content:center} /* logo Wavy no header (o tema serve a logo por srcset) */ .section-header-logo img{content:none} /* logo Wavy no header: a do tema era um lettering largo (417x36); a Wavy e quase quadrada, entao o tema a renderizava minuscula. Tamanho definido na mao. */ .section-header-logo{width:auto!important;height:auto!important} .section-header-logo img{width:auto!important;height:34px!important;max-height:none!important;max-width:none!important} @media(max-width:1023px){.section-header-logo img{height:30px!important}} @media(max-width:767px){.section-header-logo img{height:26px!important}} /* logo trocada por port_shell (marcada com data-dy-logo): a da Glossy e 863x315 e o slot do alvo declarava outra proporcao (133x25 no header do Next, 51x50 na versao redonda do mobile), o que a esmagava. Aqui a altura manda e a largura segue. */ img[data-dy-logo]{width:auto!important;height:34px!important;max-width:none!important; max-height:none!important;aspect-ratio:auto!important;object-fit:contain} @media(max-width:767px){img[data-dy-logo]{height:26px!important}} /* botao de menu injetado quando o alvo nao tem menu proprio (port_shell) */ .dy-burger{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px; padding:0;margin:0;border:0;background:none;color:#111;cursor:pointer;flex:0 0 auto} .dy-burger svg{display:block;width:24px!important;height:24px!important} /* o CSS do tema apagava a cor dos links do rodape escuro */ .dy-foot a{color:#b0b0b0!important;text-decoration:none} .dy-foot .dy-foot-mail{color:#fff!important;text-decoration:underline;text-underline-offset:3px} .dy-foot-help-row a{color:#b0b0b0!important;text-decoration:underline;text-underline-offset:3px} .dy-foot-panel-in a{color:#b0b0b0!important} .dy-foot-legal a{color:#9a9a9a!important} .dy-foot-row{color:#fff!important} /* logo do rodape ja vem branca — sem inverter */ .dy-foot-collab img{filter:none!important} /* ===== barra de anuncio (announce.html + announce.js) ===== */ .dy-ann{background:var(--dy-ink,#111);width:100%} .dy-ann-row{display:flex;align-items:center;gap:8px;height:56px;max-width:1400px;margin:0 auto;padding:0 16px} .dy-ann-col{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px} .dy-ann-a{background:none;border:0;color:rgba(255,255,255,.7);font-size:20px;line-height:1;padding:4px 6px;flex:0 0 auto;cursor:pointer} .dy-cd{display:flex;align-items:center;gap:3px;color:#fff;font-size:12px;font-weight:600;letter-spacing:.04em;font-variant-numeric:tabular-nums} .dy-cd i{opacity:.55;font-style:normal} .dy-cd b{font-weight:700} .dy-ann-vp{position:relative;width:100%;height:15px;flex:0 0 auto;overflow:hidden} .dy-ann-m{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;font-size:clamp(8px,2.2vw,11px);font-weight:400;letter-spacing:.05em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .45s} .dy-ann-m.on{opacity:1} .dy-ann-m b{font-weight:700}