/* 19/10 · a página de cada praia na D2 (server/siteD/praiaD.ts). A capa é a de zona.css (fotografia de largura inteira); o corpo é o de hoje, com as folhas e os scripts dele, e aqui acerta-se-lhe a letra, as etiquetas, os títulos, os cartões e a largura pelos da D2. O gráfico, a previsão e os números do mar NÃO mudam: só o aspecto à volta deles. Princípios lidos no Mobbin a 19/10 (nada copiado): o lugar pequeno por cima de um nome muito grande e uma acção principal (KOBU); o preço «desde» e os factos curtos junto ao botão de reservar (Eventbrite). */ /* ---------- a capa: os números ligam para as secções; a partilha fica no canto ---------- */ .pr-nums { margin-top: 28px; } a.pr-num { text-decoration: none; color: inherit; border-radius: 6px; } a.pr-num:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; } a.pr-num:focus-visible { outline: 2px solid var(--ciano); outline-offset: 4px; } .pr-capa .pz-ctas .bt-1 { gap: 12px; } /* 27/10 · decisão do dono: com escolas e sem aulas abertas, «Reservar um dia» leva a promessa por baixo, numa linha só dela */ .pr-capa .pr-dia { margin: 14px 0 0; max-width: 46ch; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.86); } .pr-partilha { position: absolute; z-index: 2; right: max(var(--gut), calc((100% - var(--max)) / 2)); bottom: clamp(40px, 6vw, 72px); display: flex; gap: 10px; } /* 25/10 · o forecast e o partilhar lado a lado */ .pr-partilha .sb-fc-corner { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .pr-partilha .sb-share-corner { position: static; width: 48px; height: 48px; border-radius: 9999px; color: #F1F5F9; background: rgba(6,14,26,.45); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); } .pr-partilha .sb-share-corner:hover { background: rgba(255,255,255,.1); } .pr-partilha .sb-share-corner svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; } /* ---------- o corpo de hoje: o que vinha da folha da cabeça antiga, preso ao corpo ---------- */ :where(.pr-hoje) *, :where(.pr-hoje) *::before, :where(.pr-hoje) *::after { box-sizing: border-box; } :where(.pr-hoje) :where(h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; padding: 0; } .pr-hoje .spot-page-container { width: min(var(--max), 100% - 2 * var(--gut)); max-width: none; margin: 0 auto; padding: 0 0 clamp(48px, 6vw, 80px); } .pr-hoje .card { background: rgba(255,255,255,.035); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); border-radius: 22px; padding: 22px; margin-bottom: 12px; } .pr-hoje .card:hover { transform: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); } .pr-hoje .card h2 { font-size: 17px; font-weight: 800; margin-bottom: 6px; color: #F1F5F9; } .pr-hoje .card p { font-size: 15px; color: var(--claro); } .pr-hoje a:not([class]) { color: var(--espuma); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(241,245,249,.35); } .pr-hoje .sb-skeleton { position: relative; overflow: hidden; background: rgba(255,255,255,.05); border-radius: 10px; min-height: 16px; } .pr-hoje .sb-skeleton-card { background: rgba(255,255,255,.035); border-radius: 18px; overflow: hidden; } .pr-hoje .sb-skeleton-card .sb-skeleton-img { height: 160px; border-radius: 0; } .pr-hoje .sb-skeleton-card .sb-skeleton-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; } .pr-hoje .sb-skeleton-card .sb-skeleton-line { height: 12px; border-radius: 6px; } /* ---------- as secções na escala da D2: etiqueta, título, ritmo ---------- */ /* 25/10 · o dono: «temos muito espaço morto em baixo das aulas e feio» — entre secções passa de até 104 px para até 64 px */ .pr-hoje .spot-section { margin-top: clamp(40px, 5vw, 64px); scroll-margin-top: calc(var(--topo, 96px) + 16px); } /* 25/10 (o dono, com captura: «tem muito espaço morto») · do topo à lista eram ~144 px vazios (72 do fundo da capa + 48 da 1.ª secção) */ .pr-capa { padding-bottom: clamp(24px, 3vw, 36px); } .pr-hoje .spot-section:first-child, .pr-hoje #live-instructors-slot:empty + .spot-section { margin-top: clamp(12px, 1.6vw, 20px); } .pr-hoje .spot-section-head { margin-bottom: clamp(20px, 2.6vw, 32px); } .pr-hoje .spot-section-kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--claro); margin-bottom: 12px; } .pr-hoje .spot-section-title { font-size: var(--t3); line-height: 1.05; letter-spacing: -.03em; font-weight: 800; color: #fff; text-wrap: balance; } .pr-hoje .spot-section-title-accent { color: inherit; } .pr-hoje .spot-section-sub { font-size: 15px; color: var(--claro); font-weight: 500; } .pr-hoje .spot-section-empty { border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); border-radius: 22px; background: rgba(255,255,255,.03); } .pr-hoje .spot-section-empty a { color: var(--espuma); text-decoration: underline; text-underline-offset: 3px; } /* o «Forecast · próximos 7 dias» abre num cabeçalho que é botão: o mesmo título, a seta da D2 */ .pr-hoje #sec-forecast-7d > details > summary { padding: 4px 0; } /* a fila do fim (praias próximas) e o guia: os títulos de hoje vinham em 15 px com cor no atributo */ .pr-hoje #sec-nearby h3 { font-size: var(--t4) !important; letter-spacing: -.02em; color: #fff; } .pr-hoje #sec-guide h3 { font-size: 18px !important; color: #fff !important; } .pr-hoje #sec-guide p, .pr-hoje #sec-about .desc-text { font-size: 16px !important; line-height: 1.65 !important; color: var(--claro) !important; max-width: 72ch; } /* a folha do corpo de hoje pinta o fundo da página de #0B1120; a D2 é a noite (--noite), e a capa acaba nela */ body.pagina-d:has(.pr-hoje) { background: var(--noite, #060E1A); } .pr-capa .pz-etq { color: #E2E8F0; } @media (max-width: 640px) { .pr-partilha { top: calc(var(--topo, 84px) + 16px); bottom: auto; } .pr-partilha .sb-share-corner { width: 42px; height: 42px; } .pr-hoje .spot-section { margin-top: 40px; } .pr-hoje .card { padding: 18px; } } /* 26/10 · a pastilha «● 1,6 m agora» dentro da capa: alinhada com o resto do texto da capa */ .pr-capa .sb-mar-agora { max-width: none; margin: 18px 0 0; padding: 0; } .pr-capa .sb-mar-agora-corpo { max-width: 760px; } /* ---------- 27/10 · SURF TODAY, CAMADA DA PRAIA: AS «AULAS À VENDA» EM FAIXA CLARA ---------- O dono: «mais branco no site, com mais vida, para converter melhor sem perder a identidade». Na camada da praia do Surf Today (b-tudo.js monta o corpo da página da praia dentro de uma sombra, com esta folha) a emoção fica escura: o mar agora, o forecast, os painéis. A DECISÃO, as aulas e as horas, passa a uma faixa #F1F5F9 com cartões brancos. As horas continuam no ciano da marca com letra escura, e ganham contorno #0E7490 para não se perderem no papel. Só vale DENTRO DA SOMBRA (`:host`): a página da praia (/surf/) fica como está. O semazul.js não entra na sombra, mas a regra dele vale na mesma: nenhuma letra ciano, ligações em tinta sublinhadas. As cores escritas na etiqueta (seo.ts) têm aqui o par escuro, como a folha da /aula. Só cores da casa: faixa #F1F5F9 · papel #FFFFFF · linha #E2E8F0 · texto #0F172A · rótulos #475569 · verde #047857 · âmbar #B45309 · vermelho #B91C1C. Guarda: server/tests/asFaixasClarasLeemSe.test.ts */ :host #sec-lessons { background: #F1F5F9; color: #0F172A; color-scheme: light; border-radius: 22px; padding: 22px 16px 20px; } :host #sec-lessons .spot-section-kicker, :host #sec-lessons .spot-section-sub { color: #475569; } :host #sec-lessons .spot-section-title, :host #sec-lessons .spot-section-title-accent { color: #0F172A; } :host #sec-lessons .lessons-trust { color: #475569 !important; font-size: 12px !important; } :host #sec-lessons .slot-card, :host #sec-lessons .bundle-card { background: #FFFFFF; border-color: #E2E8F0; box-shadow: 0 12px 28px -20px rgba(15,23,42,.35); } :host #sec-lessons .slot-card:hover, :host #sec-lessons .bundle-card:hover { border-color: #64748B; box-shadow: 0 16px 32px -20px rgba(15,23,42,.4); } :host #sec-lessons .slot-card-gold, :host #sec-lessons .slot-card-gold:hover { border-color: transparent; } :host #sec-lessons .slot-title { color: #0F172A; } :host #sec-lessons .slot-school-row, :host #sec-lessons .slot-school-name, :host #sec-lessons .slot-school-ico { color: #475569; } :host #sec-lessons .slot-school-name { font-size: 12px; } :host #sec-lessons .slot-school-row { padding: 13px 0; margin: -13px 0 -10px; } :host #sec-lessons .slot-school-row:hover .slot-school-name { color: #0F172A; text-decoration: underline; text-underline-offset: 3px; } :host #sec-lessons .slot-duration-text { color: #475569; font-size: 12px; } :host #sec-lessons .slot-time-range, :host #sec-lessons .slot-instructor { color: #334155; } :host #sec-lessons .slot-instructor, :host #sec-lessons .slot-per-person, :host #sec-lessons .slot-tag { font-size: 12px; } :host #sec-lessons .slot-price-big { color: #0F172A; text-shadow: none; } :host #sec-lessons .slot-per-person, :host #sec-lessons .bundle-desc, :host #sec-lessons .bundle-per-unit, :host #sec-lessons .bundle-strike { color: #475569; } :host #sec-lessons .bundle-desc { font-size: 12px; } :host #sec-lessons .slot-button-row { border-top-color: #E2E8F0; } /* as horas: o ciano da marca, letra escura, contorno #0E7490 (o brilho ciano claro some no branco) */ :host #sec-lessons .sb-hora:not([disabled]) { box-shadow: inset 0 0 0 1px #0E7490; } :host #sec-lessons .sb-hora:not([disabled]):hover { box-shadow: inset 0 0 0 1px #0E7490, 0 6px 14px -6px rgba(14,116,144,.45); } :host #sec-lessons .sb-hora:focus-visible { outline: 2px solid #0E7490; outline-offset: 2px; } :host #sec-lessons .sb-hora.sb-hora-mar-bom::after { opacity: .75; } /* o selo do mar: o verde claro não se lê no papel; passa ao verde escuro da casa, com fundo */ :host #sec-lessons .sb-selo-mar { background: rgba(4,120,87,.08); color: #047857; box-shadow: inset 0 0 0 1px rgba(4,120,87,.28); font-size: 12px; } /* «Mostrar mais»: tinta sublinhada, alvo de 44 px */ :host #sec-lessons .lessons-more { min-height: 44px; background: #FFFFFF; border-color: #64748B; color: #0F172A; text-decoration: underline; text-underline-offset: 3px; } :host #sec-lessons .lessons-more:hover { background: #F1F5F9; border-color: #0F172A; color: #0F172A; } :host #sec-lessons .lessons-more:focus-visible { outline: 2px solid #0E7490; outline-offset: 2px; } /* as cores escritas na etiqueta, cada uma com o par escuro (o fundo a 16-20 % fica, por cima do branco) */ :host #sec-lessons [style*="color:#CBD5E1" i] { color: #334155 !important; background: #F1F5F9 !important; } :host #sec-lessons [style*="background:#10B981;color:#fff" i] { background: #047857 !important; color: #FFFFFF !important; } :host #sec-lessons [style*="rgba(16,185,129,.18);color:#10B981" i], :host #sec-lessons [style*="color:#34D399" i] { color: #047857 !important; } :host #sec-lessons [style*="color:#F59E0B" i], :host #sec-lessons [style*="color:#FBBF24" i] { color: #B45309 !important; } :host #sec-lessons [style*="color:#FCA5A5" i], :host #sec-lessons [style*="color:#EF4444" i] { color: #B91C1C !important; } :host #sec-lessons [style*="color:#94A3B8" i] { color: #475569 !important; } :host #sec-lessons [style*="color:#22D3EE" i], :host #sec-lessons [style*="color:#06B6D4" i] { color: #0F172A !important; } @media (max-width: 640px) { :host #sec-lessons { padding: 18px 12px 16px; border-radius: 18px; } } /* 27/10 · auditoria: os dias da camada traziam o estilo escuro do b-tudo.js (letra #F1F5F9 no papel, 1,01:1): ficavam pílulas vazias. Mesmo desenho das pastilhas de nível da página da praia. */ :host #sec-lessons .st-dias button { background: #FFFFFF; box-shadow: inset 0 0 0 1px #64748B; color: #334155; } :host #sec-lessons .st-dias button[aria-pressed="true"] { background: #0F172A; color: #FFFFFF; box-shadow: none; } /* ---------- 27/10 · PÁGINA DA PRAIA: AS «AULAS À VENDA» EM FAIXA CLARA ---------- O dono aprovou («Sim, as aulas à venda»): na página da praia (/surf//) a secção das aulas passa à faixa #F1F5F9 com cartões brancos, como na camada do Surf Today (bloco de cima). O topo, o mar, o forecast e o rodapé ficam escuros. Aqui há mais peças do que na camada (a camada tira-as): os botões de vista, a barra «Quando · Quem · Já fizeste surf?» e o painel dela, as pastilhas de nível e os dois estados vazios. Não partilha o bloco da camada: a camada também tem um `.pr-hoje` dentro da sombra, e cada seletor daqui começa em `body`, que nunca casa dentro da sombra. Assim a camada fica byte a byte igual. O semazul.js corre por cima desta página: troca a letra que ESTIVER ciano por var(--espuma) com !important. Por isso nenhuma peça desta faixa fica ciano antes de ele passar, e o --espuma da faixa é tinta: se ele já tiver pintado uma peça (por ex. o botão de vista que o JS volta a pintar), ela lê-se na mesma. Só cores da casa: faixa #F1F5F9 · papel #FFFFFF · linha #E2E8F0 · texto #0F172A · rótulos #475569 · controlo #64748B · verde #047857 · âmbar #B45309 · vermelho #B91C1C · as horas e o «Ver aulas» no ciano com contorno #0E7490. Guarda: server/tests/asFaixasClarasLeemSe.test.ts */ body .pr-hoje #sec-lessons { --espuma: #0F172A; --claro: #475569; background: #F1F5F9; color: #0F172A; color-scheme: light; border-radius: 22px; padding: 24px 20px 22px; } body .pr-hoje #sec-lessons .spot-section-kicker, body .pr-hoje #sec-lessons .spot-section-sub { color: #475569; } body .pr-hoje #sec-lessons .spot-section-title, body .pr-hoje #sec-lessons .spot-section-title-accent { color: #0F172A; } body .pr-hoje #sec-lessons .lessons-trust { color: #475569 !important; font-size: 12px !important; } body .pr-hoje #sec-lessons a:not([class]) { color: #0F172A; text-decoration-color: #64748B; } body .pr-hoje #sec-lessons :focus-visible { outline: 2px solid #0E7490; outline-offset: 2px; } /* os botões de vista (lista, miniaturas): papel branco, ícone em tinta; o escolhido em tinta cheia */ body .pr-hoje #sec-lessons .lv-toggle { background: #FFFFFF !important; border-color: #E2E8F0 !important; box-shadow: none; } body .pr-hoje #sec-lessons .lv-toggle-btn { color: #475569 !important; } body .pr-hoje #sec-lessons .lv-toggle-btn:hover { background: #F1F5F9 !important; color: #0F172A !important; } body .pr-hoje #sec-lessons .lv-toggle-btn.lv-active { background: #0F172A !important; color: #FFFFFF !important; } /* a barra «Quando · Quem · Já fizeste surf?» e o painel de cada parte */ body .pr-hoje #sec-lessons .qq-barra { background: #FFFFFF; border-color: #E2E8F0; box-shadow: 0 12px 28px -22px rgba(15,23,42,.35); } body .pr-hoje #sec-lessons .qq-parte + .qq-parte::before { background: #E2E8F0; } body .pr-hoje #sec-lessons .qq-b, body .pr-hoje #sec-lessons .qq-b-val { color: #0F172A; } body .pr-hoje #sec-lessons .qq-b:hover, body .pr-hoje #sec-lessons .qq-b[aria-expanded="true"] { background: #F1F5F9; } body .pr-hoje #sec-lessons .qq-b-rot, body .pr-hoje #sec-lessons .qq-rot { color: #475569; } body .pr-hoje #sec-lessons .qq-titulo, body .pr-hoje #sec-lessons .qq-num, body .pr-hoje #sec-lessons .qq-resumo-txt { color: #0F172A; } body .pr-hoje #sec-lessons .qq-ver { box-shadow: inset 0 0 0 1px #0E7490; } body .pr-hoje #sec-lessons .qq-pop { background: #FFFFFF; border-color: #E2E8F0; box-shadow: 0 18px 40px -12px rgba(15,23,42,.3); } body .pr-hoje #sec-lessons .qq-data { color-scheme: light; background: #FFFFFF; border-color: #64748B; color: #0F172A; } body .pr-hoje #sec-lessons .qq-passo { background: #FFFFFF; border-color: #64748B; } body .pr-hoje #sec-lessons .qq-btn-passo { color: #0F172A; } body .pr-hoje #sec-lessons .qq-btn-passo:disabled { color: #475569; } body .pr-hoje #sec-lessons .qq-seg { background: #FFFFFF; border-color: #64748B; color: #334155; } body .pr-hoje #sec-lessons .qq-seg[aria-pressed="true"] { background: #0F172A; border-color: #0F172A; color: #FFFFFF; } /* as pastilhas de nível: papel com contorno, a escolhida em tinta cheia; alvo de 44 px */ body .pr-hoje #sec-lessons .lvl-pill { min-height: 44px; background: #FFFFFF; border-color: #64748B; color: #334155; font-size: 13px; } body .pr-hoje #sec-lessons .lvl-pill:hover { border-color: #0F172A; color: #0F172A; } body .pr-hoje #sec-lessons .lvl-pill.active { background: #0F172A; border-color: #0F172A; color: #FFFFFF; box-shadow: 0 0 0 3px rgba(15,23,42,.12); } /* os estados vazios (nível sem aulas · filtro sem aulas): rótulo legível e a ligação em tinta sublinhada */ body .pr-hoje #sec-lessons .qq-vazio, body .pr-hoje #sec-lessons .lessons-empty { color: #475569 !important; font-size: 14px !important; } body .pr-hoje #sec-lessons .qq-link { color: #0F172A; text-decoration: underline; text-underline-offset: 3px; } body .pr-hoje #sec-lessons .qq-link-fraco { color: #475569; } /* os cartões: o mesmo papel da camada */ body .pr-hoje #sec-lessons .slot-card, body .pr-hoje #sec-lessons .bundle-card { background: #FFFFFF; border-color: #E2E8F0; box-shadow: 0 12px 28px -20px rgba(15,23,42,.35); } body .pr-hoje #sec-lessons .slot-card:hover, body .pr-hoje #sec-lessons .bundle-card:hover { border-color: #64748B; box-shadow: 0 16px 32px -20px rgba(15,23,42,.4); } body .pr-hoje #sec-lessons .slot-card-gold, body .pr-hoje #sec-lessons .slot-card-gold:hover { border-color: transparent; } body .pr-hoje #sec-lessons .slot-title { color: #0F172A; } body .pr-hoje #sec-lessons .slot-school-row, body .pr-hoje #sec-lessons .slot-school-name, body .pr-hoje #sec-lessons .slot-school-ico { color: #475569; } body .pr-hoje #sec-lessons .slot-school-name { font-size: 12px; } body .pr-hoje #sec-lessons .slot-school-row { padding: 13px 0; margin: -13px 0 -10px; } body .pr-hoje #sec-lessons .slot-school-row:hover .slot-school-name { color: #0F172A; text-decoration: underline; text-underline-offset: 3px; } body .pr-hoje #sec-lessons .slot-duration-text { color: #475569; font-size: 12px; } body .pr-hoje #sec-lessons .slot-time-range, body .pr-hoje #sec-lessons .slot-instructor { color: #334155; } body .pr-hoje #sec-lessons .slot-instructor, body .pr-hoje #sec-lessons .slot-per-person, body .pr-hoje #sec-lessons .slot-tag { font-size: 12px; } body .pr-hoje #sec-lessons .slot-price-big { color: #0F172A; text-shadow: none; } body .pr-hoje #sec-lessons .slot-per-person, body .pr-hoje #sec-lessons .bundle-desc, body .pr-hoje #sec-lessons .bundle-per-unit, body .pr-hoje #sec-lessons .bundle-strike { color: #475569; } body .pr-hoje #sec-lessons .bundle-desc { font-size: 12px; } body .pr-hoje #sec-lessons .slot-button-row { border-top-color: #E2E8F0; } /* as horas: o ciano da marca, letra escura, contorno #0E7490 (posto ANTES do semazul passar, ele já não lhe tira a sombra) */ body .pr-hoje #sec-lessons .sb-hora:not([disabled]) { box-shadow: inset 0 0 0 1px #0E7490; } body .pr-hoje #sec-lessons .sb-hora:not([disabled]):hover { box-shadow: inset 0 0 0 1px #0E7490, 0 6px 14px -6px rgba(14,116,144,.45); } body .pr-hoje #sec-lessons .sb-hora.sb-hora-mar-bom::after { opacity: .75; } body .pr-hoje #sec-lessons .sb-selo-mar { background: rgba(4,120,87,.08); color: #047857; box-shadow: inset 0 0 0 1px rgba(4,120,87,.28); font-size: 12px; } /* «Mostrar mais»: tinta sublinhada, alvo de 44 px */ body .pr-hoje #sec-lessons .lessons-more { min-height: 44px; background: #FFFFFF; border-color: #64748B; color: #0F172A; text-decoration: underline; text-underline-offset: 3px; } body .pr-hoje #sec-lessons .lessons-more:hover { background: #F1F5F9; border-color: #0F172A; color: #0F172A; } /* as cores escritas na etiqueta, cada uma com o par escuro (o fundo a 16-20 % fica, por cima do branco) */ body .pr-hoje #sec-lessons [style*="color:#CBD5E1" i] { color: #334155 !important; background: #F1F5F9 !important; } body .pr-hoje #sec-lessons [style*="background:#10B981;color:#fff" i] { background: #047857 !important; color: #FFFFFF !important; } body .pr-hoje #sec-lessons [style*="rgba(16,185,129,.18);color:#10B981" i], body .pr-hoje #sec-lessons [style*="color:#34D399" i] { color: #047857 !important; } body .pr-hoje #sec-lessons [style*="color:#F59E0B" i], body .pr-hoje #sec-lessons [style*="color:#FBBF24" i] { color: #B45309 !important; } body .pr-hoje #sec-lessons [style*="color:#FCA5A5" i], body .pr-hoje #sec-lessons [style*="color:#EF4444" i] { color: #B91C1C !important; } body .pr-hoje #sec-lessons [style*="color:#94A3B8" i] { color: #475569 !important; } body .pr-hoje #sec-lessons [style*="color:#22D3EE" i], body .pr-hoje #sec-lessons [style*="color:#06B6D4" i] { color: #0F172A !important; } @media (max-width: 640px) { body .pr-hoje #sec-lessons { padding: 20px 14px 18px; border-radius: 18px; } } /* ---------- 27/10 · AS «AULAS À VENDA» COM AR PREMIUM (captura do dono: «há branco a mais e fica pouco premium») ---------- Medido no Chrome a 1383: a grelha tinha 1120 px dentro de uma faixa de 1160, e os cartões entravam 20 px para dentro dos filtros; entre o título e a linha «Confirmação por email» iam 32 px; o título da aula em maiúsculas espaçadas e o logo da escola num círculo pequeno. Fica: grelha alinhada com os filtros, cabeça mais junta, cartões com mais ar por dentro, título em letra normal e o logo num quadrado de cantos redondos com aro branco. Vale na camada e na página da praia. */ :host #sec-lessons .lessons-grid, body .pr-hoje #sec-lessons .lessons-grid { max-width: none; margin-left: 0; margin-right: 0; gap: 16px; } :host #sec-lessons .spot-section-head, body .pr-hoje #sec-lessons .spot-section-head { margin-bottom: 6px; } :host #sec-lessons .lessons-trust, body .pr-hoje #sec-lessons .lessons-trust { margin: 0 0 14px !important; } :host #sec-lessons .slot-card, body .pr-hoje #sec-lessons .slot-card { border-radius: 18px; overflow: hidden; } :host #sec-lessons .slot-info, body .pr-hoje #sec-lessons .slot-info { padding-left: 16px; padding-right: 16px; } :host #sec-lessons .slot-title, body .pr-hoje #sec-lessons .slot-title { text-transform: none; letter-spacing: -.01em; font-size: 20px; } :host #sec-lessons .slot-logo-medalhao, body .pr-hoje #sec-lessons .slot-logo-medalhao { border-radius: 14px; background: #FFFFFF; box-shadow: 0 0 0 3px #FFFFFF, 0 8px 18px -8px rgba(15,23,42,.45); } /* ---------- 28/10 · AS «AULAS À VENDA» SOBRE O ESCURO, SÓ OS CARTÕES BRANCOS (captura do dono: «ainda tem muito branco») ---------- Escolha do dono (escolha múltipla, «Painel escuro, cartões brancos»): a faixa #F1F5F9 à volta da secção sai, e o título, a linha de confiança, as pastilhas de nível, os dias e os estados vazios voltam ao escuro da página. Ficam claros os cartões das aulas, a barra «Quando · Quem» com o painel dela, os botões de vista e o «Mostrar mais». Os blocos de cima continuam a valer DENTRO desses (a guarda das faixas claras mede-os); este só repõe o escuro no que fica fora deles. */ :host #sec-lessons, body .pr-hoje #sec-lessons { --espuma: #F1F5F9; --claro: #94A3B8; background: transparent; color: #F1F5F9; color-scheme: dark; border-radius: 0; padding: 0; } :host #sec-lessons .slot-card, :host #sec-lessons .bundle-card, :host #sec-lessons .qq-barra, :host #sec-lessons .qq-pop, body .pr-hoje #sec-lessons .slot-card, body .pr-hoje #sec-lessons .bundle-card, body .pr-hoje #sec-lessons .qq-barra, body .pr-hoje #sec-lessons .qq-pop { --espuma: #0F172A; --claro: #475569; color: #0F172A; color-scheme: light; } :host #sec-lessons .spot-section-kicker, :host #sec-lessons .spot-section-sub, body .pr-hoje #sec-lessons .spot-section-kicker, body .pr-hoje #sec-lessons .spot-section-sub { color: #94A3B8; } :host #sec-lessons .spot-section-title, :host #sec-lessons .spot-section-title-accent, body .pr-hoje #sec-lessons .spot-section-title, body .pr-hoje #sec-lessons .spot-section-title-accent { color: #F1F5F9; } :host #sec-lessons .lessons-trust, body .pr-hoje #sec-lessons .lessons-trust { color: #94A3B8 !important; } body .pr-hoje #sec-lessons > a:not([class]), body .pr-hoje #sec-lessons .spot-section-head a:not([class]) { color: #F1F5F9; text-decoration-color: #94A3B8; } body .pr-hoje #sec-lessons .lvl-pill { background: transparent; border-color: rgba(241,245,249,.35); color: #E2E8F0; } body .pr-hoje #sec-lessons .lvl-pill:hover { border-color: #F1F5F9; color: #FFFFFF; } body .pr-hoje #sec-lessons .lvl-pill.active { background: #F1F5F9; border-color: #F1F5F9; color: #0F172A; box-shadow: none; } :host #sec-lessons .st-dias button { background: transparent; box-shadow: inset 0 0 0 1px rgba(241,245,249,.35); color: #E2E8F0; } :host #sec-lessons .st-dias button[aria-pressed="true"] { background: #F1F5F9; color: #0F172A; box-shadow: none; } body .pr-hoje #sec-lessons .qq-vazio, body .pr-hoje #sec-lessons .lessons-empty { color: #94A3B8 !important; } body .pr-hoje #sec-lessons .qq-vazio .qq-link, body .pr-hoje #sec-lessons .lessons-empty .qq-link { color: #F1F5F9; } @media (max-width: 640px) { :host #sec-lessons, body .pr-hoje #sec-lessons { padding: 0; border-radius: 0; } }