/* ===== ArqBase — faixa de cronômetro da oferta do dia ===== Visual do export do designer (design/export-site/faixa-cronometro.html, opção 1a, vermelho da marca), passado para classes. O estado vem de uma classe no , decidida antes da primeira pintura (script data-cronometro="decisao" no ): .oferta-faixa → dia da oferta: faixa visível, preço promocional .oferta-cheia → dias 1 a 5 depois: sem faixa, preço cheio; some o que é só da promoção (.so-promo) e aparece o preço cheio (.so-cheio) nenhuma → preço promocional sem faixa (sem JS, sem armazenamento, ou visitante da UE sem aceite de cookies) */ /* ---- modos de preço ---- */ html:not(.oferta-cheia) .so-cheio { display: none !important; } html.oferta-cheia .so-promo { display: none !important; } /* ---- faixa (80px no desktop, 62px no celular, como no export) ---- */ .faixa-oferta { display: none; background: #D5203F; color: #FFFFFF; font-family: var(--sans, 'Instrument Sans', system-ui, sans-serif); line-height: normal; position: sticky; top: 0; z-index: 41; } html.oferta-faixa .faixa-oferta { display: block; } /* 1240px de conteúdo + 40px de cada lado (o export é content-box; o site é border-box) */ .faixa-oferta__inner { max-width: 1320px; margin: 0 auto; padding: 0 40px; } .faixa-oferta__linha { display: flex; align-items: center; justify-content: center; gap: 28px; position: relative; padding: 13px 40px 13px 0; } .faixa-oferta__rotulo { display: flex; align-items: center; gap: 10px; } .faixa-oferta__rotulo span { font-size: 14.5px; font-weight: 700; letter-spacing: 0.2px; } /* max-width:none desfaz o img{max-width:100%} de curso.css, que deixava o ícone encolher a zero no celular */ .faixa-oferta__rotulo img { width: 19px; height: 19px; display: block; max-width: none; flex-shrink: 0; } .faixa-oferta__relogio { display: flex; align-items: flex-start; gap: 8px; } .faixa-oferta__unidade { text-align: center; } /* caixa de largura fixa e algarismos tabulares: a faixa não muda de largura quando o segundo vira */ .faixa-oferta__num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 23px; font-weight: 700; line-height: 1.1; letter-spacing: 1px; background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.28); border-radius: 9px; padding: 6px 0; width: 54px; box-sizing: border-box; } .faixa-oferta__leg { font-size: 9.5px; letter-spacing: 1.5px; font-weight: 600; margin-top: 5px; } .faixa-oferta__sep { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 21px; font-weight: 700; color: rgba(255,255,255,0.5); padding-top: 7px; } .faixa-oferta__fechar { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; cursor: pointer; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; line-height: 1; font-family: inherit; color: #FFFFFF; background: rgba(0,0,0,0.18); } /* ---- encaixe com o menu fixo: o menu gruda logo abaixo da faixa, e as âncoras da página param abaixo dos dois (84px do menu + a faixa; 16px + faixa no celular, onde o menu some ao descer). A altura aqui é a medida do trecho do designer nesta fonte; cronometro.js regrava a variável com a altura real (ResizeObserver). ---- */ html.oferta-faixa { --faixa-altura: 81.3px; } html.oferta-faixa .topo { top: var(--faixa-altura); } html.oferta-faixa [id] { scroll-margin-top: calc(84px + var(--faixa-altura)); } @media (max-width: 900px) { html.oferta-faixa [id] { scroll-margin-top: calc(16px + var(--faixa-altura)); } } @media (max-width: 767px) { html.oferta-faixa { --faixa-altura: 61.7px; } .faixa-oferta__inner { padding: 10px 12px; } .faixa-oferta__linha { gap: 8px; justify-content: space-between; padding: 0; } .faixa-oferta__rotulo span { font-size: 11px; line-height: 1.25; } .faixa-oferta__rotulo img { width: 15px; height: 15px; } .faixa-oferta__num { font-size: 17px; width: 40px; padding: 4px 0; border-radius: 7px; } .faixa-oferta__leg { font-size: 8px; letter-spacing: 1px; margin-top: 3px; } .faixa-oferta__fechar { position: static; transform: none; width: 22px; height: 22px; font-size: 14px; border-radius: 7px; flex-shrink: 0; } }