/* ========================================================================== responsivo.css — ajustes de TELA PEQUENA (celular / iPhone) do site LORRANCE -------------------------------------------------------------------------- A deteccao e por TAMANHO DE TELA (media query), nao por marca de aparelho: pega iPhone, Android e tambem a janela do PC encolhida. O responsivo.js marca para o JS que precisar decidir algo. Faixas usadas: <= 900px tablet / janela estreita <= 480px celular (todo iPhone em pe: 320, 375, 390, 393, 402, 430, 440) <= 380px celular pequeno (iPhone SE / mini) Cada pagina e identificada por data-pg no , para uma regra de uma pagina nunca vazar para outra (varias usam os mesmos nomes de classe). ATENCAO: este arquivo e servido como arquivo estatico (nao passa pelo Jinja), mas mesmo assim o padrao da casa e sempre deixar espaco depois de "{" antes de um "#", para nunca virar comentario Jinja se um dia alguem colar isto dentro de um template. ========================================================================== */ /* ======================= 1. VALE PARA TODAS AS PAGINAS ==================== */ @media (max-width:480px){ html{ -webkit-text-size-adjust:100%; } /* iOS inflava o texto ao deitar */ /* rede de seguranca contra rolagem lateral. E "clip", nao "hidden", de proposito: "hidden" cria um container de rolagem e QUEBRA o menu position:sticky do topo — justamente no celular, onde ele mais importa. */ body{ overflow-x:clip; } img,canvas,video,svg{ max-width:100%; } /* O Safari do iPhone da zoom sozinho quando o campo tem fonte < 16px. Subir para 16px so no celular mata o zoom involuntario ao tocar. */ input:not([type=color]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select,textarea{ font-size:16px !important; } /* alvo de toque confortavel (44px e o minimo da Apple) — so nos botoes "de verdade"; os quadrados de cor tem regra propria e ficam de fora */ .btn,.act,.navbtn,.tab,.calbtn,.chip{ min-height:44px; } .btn,.act,.navbtn,.tab{ display:inline-flex; align-items:center; justify-content:center; } .calbtn,.chip{ display:inline-flex; align-items:center; } } /* ============================== 2. LANDING =============================== */ @media (max-width:900px){ [data-pg=landing] .navtoggle{ min-width:44px; min-height:44px; justify-content:center; } } /* gaveta do editor: so ate 759px, para nao anular o painel lateral que a propria landing liga a partir de 760px */ @media (max-width:759px){ [data-pg=landing] #admEditor{ max-height:64dvh; } } @media (max-width:480px){ [data-pg=landing] .wrap{ padding-left:16px; padding-right:16px; } [data-pg=landing] .navin{ padding:12px 16px; gap:10px; } [data-pg=landing] .logo .mk{ width:34px; height:34px; } [data-pg=landing] .logo .nm{ font-size:calc(20px*var(--fs,1)); letter-spacing:3px; } [data-pg=landing] .logo .sb{ letter-spacing:2px; } [data-pg=landing] .btn{ padding:12px 18px; } /* contador de visitas ficava POR CIMA do X da faixa de promocao */ [data-pg=landing] .visitnum{ right:46px !important; } /* selo da estacao caia em cima do menu grudado no topo */ [data-pg=landing] .seasonBadge{ top:auto !important; bottom:10px; left:10px; right:auto !important; } [data-pg=landing] #promoBar{ padding:8px 36px 8px 12px; font-size:12.5px; } /* faixa de numeros: 2 por linha, divisoria embaixo em vez de do lado */ [data-pg=landing] .statsin{ padding:0 16px; } [data-pg=landing] .stat{ min-width:50%; padding:18px 10px; border-right:none; border-bottom:1px solid rgba(255,255,255,.22); } [data-pg=landing] .stat:nth-last-child(-n+2){ border-bottom:none; } [data-pg=landing] .card .bd{ padding:30px 16px 20px; } [data-pg=landing] .card p{ min-height:0; } /* 42px fixos abriam buraco */ [data-pg=landing] .pcard{ padding:24px 18px; } [data-pg=landing] .qa>button{ padding:15px 16px; } [data-pg=landing] .qa.open .ans{ max-height:1400px; } /* 360px cortava resposta longa */ [data-pg=landing] .footlinks{ gap:8px 14px; } [data-pg=landing] .kbnote{ max-width:100%; } } @media (max-width:380px){ [data-pg=landing] .hero h1{ font-size:calc(29px*var(--fs,1)); } [data-pg=landing] .galcard{ grid-template-columns:1fr; } [data-pg=landing] .stat{ min-width:100%; } [data-pg=landing] .stat:nth-last-child(-n+2){ border-bottom:1px solid rgba(255,255,255,.22); } [data-pg=landing] .stat:last-child{ border-bottom:none; } } /* ====================== 3. AVALIAR / ANALISE (pro) ======================= */ @media (max-width:860px){ [data-pg=pro] .essnav .in{ padding:10px 14px; } } @media (max-width:480px){ [data-pg=pro]{ min-height:100dvh; } [data-pg=pro] .wrap{ padding:16px 14px 64px; } [data-pg=pro] .essnav .in{ gap:8px; } [data-pg=pro] .essnav .lg{ gap:7px; } [data-pg=pro] .essnav .lg .mk{ width:30px; height:30px; } [data-pg=pro] .essnav .lg .nm{ font-size:17px; letter-spacing:2.5px; } [data-pg=pro] .essnav .bk{ padding:8px 11px; font-size:11px; } [data-pg=pro] h1{ font-size:20px !important; } [data-pg=pro] .vname,[data-pg=pro] .hname{ font-size:23px !important; } [data-pg=pro] .subname{ font-size:20px !important; } [data-pg=pro] header.top{ flex-wrap:wrap; gap:8px; } /* passo a passo guiado */ [data-pg=pro] .tut{ padding:10px; } [data-pg=pro] .tutbox{ margin:8px auto 30px; padding:15px 14px 18px; border-radius:14px; } [data-pg=pro] .tut h2{ font-size:22px; } [data-pg=pro] .tshot{ min-height:150px; } [data-pg=pro] .tshot img{ max-height:230px; } [data-pg=pro] .trow .act{ flex:1 1 100%; } /* foto + reguas de cor sobre a foto */ [data-pg=pro] .uploadarea{ padding:26px 14px; } [data-pg=pro] .stage .drape{ width:32px; } [data-pg=pro] .stage .tonechip{ width:46px; height:46px; } [data-pg=pro] .stage canvas.loupe{ width:96px; height:96px; } [data-pg=pro] .stage canvas.wheel{ width:88%; } [data-pg=pro] .stage .zoomctl button{ width:36px; height:36px; } /* camera: usa dvh para nao ficar por baixo da barra do Safari */ [data-pg=pro] #camModal .cam-box{ max-height:94dvh; } [data-pg=pro] #camModal video{ max-height:62dvh; } [data-pg=pro] #camModal .cam-b{ min-height:46px; } /* barras de probabilidade — o rotulo de 140px nao deixava barra nenhuma */ [data-pg=pro] .bar{ grid-template-columns:88px 1fr 36px !important; gap:7px; } [data-pg=pro] .bars{ padding:2px 14px 12px; } [data-pg=pro] .vtop{ padding:13px 14px; gap:10px; } [data-pg=pro] .vswatch{ width:46px; height:46px; } [data-pg=pro] .htop{ padding:13px 14px; } [data-pg=pro] .hpct{ font-size:19px; } /* nome da base em cima do valor, em vez de coluna fixa de 132px */ [data-pg=pro] .brow{ grid-template-columns:1fr; gap:2px; } /* cartela de cores: o titulo lateral de 170px comia metade da faixa */ [data-pg=pro] .cartela{ padding:14px 12px 6px; } [data-pg=pro] .cgroup{ flex-direction:column; align-items:stretch; margin-bottom:12px; } [data-pg=pro] .ctitle{ flex:none; padding-right:0; margin-bottom:5px; font-size:14px; } [data-pg=pro] .cswr span{ height:34px; } [data-pg=pro] .mkgrid{ grid-template-columns:1fr; } [data-pg=pro] .measline{ flex-wrap:wrap; gap:9px; } [data-pg=pro] .match .pair .c{ width:40px; height:40px; } [data-pg=pro] .grid2{ columns:1; max-width:100%; } [data-pg=pro] .termbody{ max-height:300px; font-size:11.5px; } [data-pg=pro] .opts{ gap:10px; } [data-pg=pro] .thumbs img{ height:52px; } [data-pg=pro] .row-btns .act{ flex:1 1 auto; } [data-pg=pro] #drName{ min-width:0 !important; flex:1 1 100%; } } @media (max-width:380px){ [data-pg=pro] .bar{ grid-template-columns:74px 1fr 34px !important; font-size:11px; } [data-pg=pro] .stage .drape{ width:26px; } } /* ============================= 4. VISAGISMO ============================== */ @media (max-width:480px){ [data-pg=visagismo] header{ padding:12px 16px; gap:10px; } [data-pg=visagismo] main{ padding:14px; gap:16px; } [data-pg=visagismo] #drop{ margin:12px; } [data-pg=visagismo] .pad,[data-pg=visagismo] .grp,[data-pg=visagismo] .devlist{ padding:12px 14px; } [data-pg=visagismo] .card h2{ padding:10px 14px; } [data-pg=visagismo] .meter{ grid-template-columns:92px 1fr 34px; gap:8px; } [data-pg=visagismo] .ba{ gap:10px; } [data-pg=visagismo] .melhorias{ grid-template-columns:1fr; } [data-pg=visagismo] .json{ max-height:260px; font-size:11px; } [data-pg=visagismo] .sumgrid{ padding:0 14px 8px; } [data-pg=visagismo] .sumhead{ padding:10px 14px 4px; } } /* ============================ 5. TESTECOLOR ============================== */ /* esta pagina nao tinha NENHUMA media query: em tela < 340px a grade de minmax(300px,1fr) estourava a largura e criava rolagem lateral. */ @media (max-width:640px){ [data-pg=testecolor] .grade{ grid-template-columns:1fr; } } @media (max-width:480px){ [data-pg=testecolor] .capa{ padding:20px 14px 48px; } [data-pg=testecolor] .cartao{ padding:14px; } [data-pg=testecolor] .passos button{ flex:1 1 auto; } [data-pg=testecolor] .par{ gap:10px; } [data-pg=testecolor] .amostra{ width:46px; height:46px; } [data-pg=testecolor] .linha-est{ grid-template-columns:20px 1fr auto; gap:8px; } [data-pg=testecolor] .linha-est.top .nome{ font-size:17px; } [data-pg=testecolor] .pct-top{ font-size:21px; } [data-pg=testecolor] .limpar{ float:none; margin-top:8px; display:block; } } /* ====================== 6. TIPOS (as 12 estacoes) ======================== */ @media (max-width:480px){ [data-pg=tipos] .wrap{ padding-left:16px; padding-right:16px; } [data-pg=tipos] .navin{ padding:12px 16px; gap:8px 14px; } [data-pg=tipos] .logo .mk{ width:34px; height:34px; } [data-pg=tipos] .logo .nm{ font-size:20px; letter-spacing:3px; } [data-pg=tipos] .menu{ gap:12px; font-size:11px; } [data-pg=tipos] .head{ padding:38px 0 32px; } [data-pg=tipos] .season{ padding:32px 0 8px; } [data-pg=tipos] .tcard .ph{ height:200px; } [data-pg=tipos] .tcard .bd{ padding:16px 16px 20px; } } /* ================== 7. TIPO_DETALHE (pagina de 1 estacao) =============== */ @media (max-width:480px){ [data-pg=tipodet] .wrap{ padding-left:16px; padding-right:16px; } [data-pg=tipodet] .navin{ padding:12px 16px; gap:8px 14px; } [data-pg=tipodet] .logo .mk{ width:34px; height:34px; } [data-pg=tipodet] .logo .nm{ font-size:20px; letter-spacing:3px; } [data-pg=tipodet] .dhero{ padding:18px 0 26px; gap:22px; } [data-pg=tipodet] .dhero h1{ font-size:28px; } [data-pg=tipodet] .dhero .ph img{ height:260px; } [data-pg=tipodet] .sw{ width:78px; } [data-pg=tipodet] .sw .c{ width:58px; height:58px; } [data-pg=tipodet] .mk{ flex-direction:column; gap:12px; padding:14px; } [data-pg=tipodet] .mk .cores .s{ width:66px; } [data-pg=tipodet] .mk .cores .s i{ width:44px; height:44px; } [data-pg=tipodet] .axis{ padding:14px; } } /* ============================== 8. SOBRE ================================= */ @media (max-width:480px){ [data-pg=sobre]{ min-height:100dvh; } [data-pg=sobre] .wrap{ padding:64px 16px 46px; gap:22px; } [data-pg=sobre] .top{ top:12px; left:14px; } } /* ================= 9. CONTA (entrar / criar conta) ====================== */ @media (max-width:480px){ [data-pg=conta]{ padding:16px; align-items:flex-start; min-height:100dvh; } [data-pg=conta] .brand{ font-size:22px; letter-spacing:4px; padding:18px 0 6px; } [data-pg=conta] .pane{ padding:16px 16px 20px; } [data-pg=conta] .foot{ padding:0 16px 18px; } } /* ========================== 10. MINHA CONTA ============================= */ @media (max-width:480px){ [data-pg=minhaconta] header{ padding:12px 16px; flex-wrap:wrap; gap:6px 12px; } [data-pg=minhaconta] .brand{ font-size:19px; letter-spacing:3px; } [data-pg=minhaconta] main{ margin:18px auto; padding:0 14px; } [data-pg=minhaconta] .card{ padding:16px; } [data-pg=minhaconta] h1{ font-size:25px; } [data-pg=minhaconta] .row{ gap:12px; } [data-pg=minhaconta] .row b{ text-align:right; word-break:break-word; } } /* ======================= 11. ADMIN (editor do site) ===================== */ @media (max-width:880px){ [data-pg=admin] .app{ height:auto; } [data-pg=admin] .preview{ height:70dvh; } } @media (max-width:480px){ [data-pg=admin] .app{ grid-template-columns:1fr; } [data-pg=admin] .preview{ height:56dvh; } [data-pg=admin] .panel{ border-right:0; } [data-pg=admin] .top{ padding:12px 16px; } [data-pg=admin] section.grp{ padding:14px 16px; } [data-pg=admin] .savebar{ padding:12px 16px; } [data-pg=admin] .imgs{ grid-template-columns:1fr; } [data-pg=admin] .imgslot .thumb{ height:140px; } [data-pg=admin] .row{ flex-wrap:wrap; } [data-pg=admin] .row>*{ flex:1 1 100%; } [data-pg=admin] .pvbar{ top:8px; right:10px; } } /* ============ 12. AO VIVO (a tela que a cliente ve no celular) =========== */ /* Esta pagina mora dentro do server.py (_LIVE_VIEWER_HTML). */ @media (max-width:480px){ [data-pg=aovivo]{ min-height:100dvh; } [data-pg=aovivo] header{ padding:9px 14px; } [data-pg=aovivo] .brand{ font-size:15px; letter-spacing:3px; } [data-pg=aovivo] .main{ padding:12px; } [data-pg=aovivo] img.big{ max-height:64dvh; } /* antes/depois em 44vw cada um fica ilegivel no celular: empilha */ [data-pg=aovivo] .ba{ flex-direction:column; gap:12px; } [data-pg=aovivo] .ba img{ max-width:90vw; max-height:38dvh; } [data-pg=aovivo] .videopip{ top:46px; } [data-pg=aovivo] .pal span{ width:30px; height:30px; } } /* ================= 13. CARTAO DE CINZA (folha p/ imprimir) ============== */ @media (max-width:480px){ [data-pg=cartaocinza] .sheet{ margin:12px; padding:20px 16px; } [data-pg=cartaocinza] .patch{ height:180px; } [data-pg=cartaocinza] .cutcard .mini{ width:min(220px,100%); } [data-pg=cartaocinza] .btns button,[data-pg=cartaocinza] .btns a{ flex:1 1 auto; text-align:center; } } /* ============================ 14. CLASSICO ============================== */ /* A /classico (PAGE, dentro do server.py) ja tinha o proprio corte em 560px e grades fluidas — nao precisa de regra propria aqui; ela so aproveita a parte 1 (campo com 16px, alvo de toque, guarda contra rolagem lateral). */