/* ───────────────────────────────────────────────────────────────────────────── Intercept Paywall — Estilos (versão final, base "Institucional forte") Todos os componentes usam o prefixo .icp- para não colidir com o tema. Identidade: gradientes institucionais no banner e na barra inferior, CTA roxo sólido (#6653ff → hover #4236a1, extremo do gradiente "e"), modal branco com detalhes em lilás (#d1ccff). Cantos retos (radius 0) como o resto do tema. Tipografia forte: weight 800, tracking -0.01em. Nota sobre a dose de gradiente: o JS renderiza exatamente UM estado por página (banner OU paywall OU barra OU doação — ver renderState() em paywall.js), então os dois gradientes institucionais nunca coexistem. Dark mode: overrides completos via :root[data-bs-theme=dark] nas variáveis --icp-* (especificidade (0,2,0) — vence :root independente da ordem dos blocos no arquivo concatenado/minificado). Acessibilidade: :focus-visible em todos os controles, contraste AA, prefers-reduced-motion respeitado, inputs de email >= 16px (evita zoom no iOS), safe-areas no banner (topo) e na barra (rodapé). ───────────────────────────────────────────────────────────────────────────── */ /* ── Variáveis ────────────────────────────────────────────────────────────── */ :root { /* Paleta institucional */ --icp-color-primary : #6653ff; /* roxo institucional */ --icp-color-accent : #6653ff; /* CTA (mantido do padrão) */ --icp-color-accent-hov: #4236a1; /* CTA em hover — extremo do gradiente "e" */ --icp-color-detail : #d1ccff; /* lilás — detalhes/acento */ --icp-color-text : #111111; /* cinza 900 */ --icp-color-bg : #ffffff; --icp-color-muted : #434343; /* cinza 500 — AA no branco */ --icp-color-border : #707070; /* borda de campo: 4.7:1 no branco (WCAG 1.4.11 pede >= 3:1) */ --icp-color-input-bg : #ffffff; --icp-color-placeholder: #6653ff; /* padrão do tema: placeholder na cor primária */ --icp-color-error : #d32f2f; /* AA sobre branco (~5:1) */ /* Gradientes institucionais */ --icp-gradient-brand : linear-gradient(270deg, #1c1844 0%, #6653ff 100%); --icp-gradient-cta : linear-gradient(265.73deg, #6653ff 3.48%, #4236a1 96.52%); --icp-color-on-brand : #ffffff; /* texto sobre os gradientes */ /* ATENÇÃO: branco sobre o ponto mais claro dos gradientes (#6653ff) dá 4.94:1 — passa AA para texto normal por margem fina. NÃO clarear os gradientes nem reduzir os corpos de texto que vivem sobre eles. */ /* Foco (estilo do tema: outline 2px roxo) */ --icp-focus-ring : #6653ff; --icp-focus-ring-inv : #ffffff; /* foco sobre fundos roxos */ /* Superfícies */ --icp-overlay-bg : rgba(17, 17, 17, .6); --icp-shadow-modal : 0 20px 60px rgba(28, 24, 68, .3); --icp-shadow-small : 0 -8px 24px rgba(28, 24, 68, .35); --icp-small-border : transparent; /* no dark vira #333 e separa a barra do body */ /* Estrutura */ --icp-font-family : inherit; --icp-radius : 0; /* cantos retos = nativo do tema */ --icp-z-banner : 9990; --icp-z-overlay : 9995; --icp-z-modal : 9999; --icp-z-small : 9998; } /* ── Dark mode (o tema seta [data-bs-theme=dark] no ) ───────────────── */ /* :root[data-bs-theme=dark] tem especificidade maior que :root — o override não depende da ordem dos blocos após concatenação/minificação. */ :root[data-bs-theme=dark] { --icp-color-text : #f6f6f6; /* cinza 50 */ --icp-color-bg : #212121; /* cinza 800 — modal escuro */ --icp-color-muted : #999999; /* cinza 300 — AA no #212121 */ --icp-color-border : #707070; /* >= 3:1 sobre #111 e #212121 (1.4.11) */ --icp-color-input-bg : #111111; /* cinza 900 */ --icp-color-placeholder: #d1ccff; /* roxo puro perde contraste no escuro */ --icp-color-error : #ff8a80; /* vermelho claro — AA no escuro */ /* Desvio documentado: a convenção do tema é anel de foco #6653ff, mas sobre superfícies escuras ele cai para ~3.8:1; o lilás institucional #d1ccff mantém o anel bem visível sem sair da paleta. */ --icp-focus-ring : #d1ccff; --icp-overlay-bg : rgba(0, 0, 0, .75); --icp-shadow-modal : 0 20px 60px rgba(0, 0, 0, .6); --icp-shadow-small : 0 -8px 24px rgba(0, 0, 0, .6); --icp-small-border : #333333; /* a sombra some sobre body #111; a borda separa */ /* Os gradientes institucionais permanecem — são marca, funcionam nos dois modos */ } /* ── Base / reset local ───────────────────────────────────────────────────── */ .icp-banner, .icp-overlay, .icp-modal, .icp-paywall-small, .icp-banner *, .icp-modal *, .icp-paywall-small * { box-sizing: border-box; } /* Controles de formulário não herdam fonte por padrão. Checkboxes ficam fora do reset — o desenho nativo é o desejado. */ .icp-modal input:not([type="checkbox"]), .icp-modal button, .icp-paywall-small input:not([type="checkbox"]), .icp-paywall-small button { font-family : inherit; -webkit-appearance : none; appearance : none; } .icp-modal input[type="checkbox"], .icp-paywall-small input[type="checkbox"] { font-family : inherit; } .icp-modal ::selection, .icp-paywall-small ::selection { background : var(--icp-color-detail); color : #111111; } /* ── Banner não-bloqueante ────────────────────────────────────────────────── */ /* Gradiente institucional "g" — presença de marca máxima no topo */ .icp-banner { position : fixed; top : 0; left : 0; right : 0; z-index : var(--icp-z-banner); display : flex; align-items : center; justify-content : space-between; gap : 12px; /* iPhones com notch (landscape/PWA): texto abaixo da status bar */ padding : calc(12px + env(safe-area-inset-top, 0px)) 16px 12px; background : var(--icp-gradient-brand); color : var(--icp-color-on-brand); font-family : var(--icp-font-family); font-size : 16px; /* AA: branco sobre roxo >= 16px/bold */ font-weight : 800; /* peso forte do tema */ line-height : 1.4; animation : icpSlideDown .3s ease; } .icp-banner__text { margin : 0; flex : 1; } .icp-banner__close { background : transparent; border : none; border-radius : var(--icp-radius); color : var(--icp-color-on-brand); font-family : system-ui, sans-serif; /* fonte do tema inclina o glifo ✕ */ font-style : normal; font-size : 18px; cursor : pointer; padding : 8px 10px; /* área de toque confortável */ line-height : 1; flex-shrink : 0; opacity : .8; transition : opacity .2s; } .icp-banner__close:hover, .icp-banner__close:active { opacity: 1; } .icp-banner__close:focus-visible { outline : 2px solid var(--icp-focus-ring-inv); outline-offset : 2px; opacity : 1; } /* ── Overlay / Modal ──────────────────────────────────────────────────────── */ .icp-overlay { position : fixed; inset : 0; z-index : var(--icp-z-overlay); background : var(--icp-overlay-bg); display : flex; align-items : center; justify-content : center; padding : 16px; overscroll-behavior: contain; /* gesto de rolagem não vaza para a página */ animation : icpFadeIn .25s ease; } .icp-modal { position : relative; z-index : var(--icp-z-modal); background : var(--icp-color-bg); color : var(--icp-color-text); border-radius : var(--icp-radius); border-top : 6px solid var(--icp-color-detail); /* detalhe lilás institucional */ padding : 28px 20px; max-width : 480px; width : 100%; /* Viewports baixas: o modal rola internamente em vez de estourar a tela */ max-height : calc(100vh - 32px); max-height : calc(100dvh - 32px); overflow-y : auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; /* contém também o scroll interno */ box-shadow : var(--icp-shadow-modal); font-family : var(--icp-font-family); animation : icpScaleIn .25s ease; } .icp-modal__close { position : absolute; top : 14px; right : 12px; background : transparent; border : none; border-radius : var(--icp-radius); font-family : system-ui, sans-serif; /* fonte do tema inclina o glifo ✕ */ font-style : normal; font-size : 20px; cursor : pointer; color : var(--icp-color-muted); line-height : 1; padding : 8px; /* área de toque confortável */ transition : color .2s; } .icp-modal__close:hover, .icp-modal__close:active { color: var(--icp-color-text); } .icp-modal__close:focus-visible { outline : 2px solid var(--icp-focus-ring); outline-offset : 2px; color : var(--icp-color-text); } /* ── Paywall bloqueante (modal de captura) ────────────────────────────────── */ .icp-paywall__title { font-size : 24px; font-weight : 800; /* títulos do tema: weight 800 */ letter-spacing : -0.01em; color : var(--icp-color-text); margin : 0 0 8px; line-height : 1.25; } .icp-paywall__subtitle { font-size : 16px; color : var(--icp-color-muted); margin : 0 0 24px; line-height : 1.55; } .icp-paywall__form { display : flex; flex-direction : column; gap : 12px; } .icp-paywall__input { width : 100%; padding : 13px 16px; font-size : 16px; /* >= 16px: evita zoom automático no iOS */ color : var(--icp-color-text); background : var(--icp-color-input-bg); border : 1px solid var(--icp-color-border); border-radius : var(--icp-radius); transition : border-color .2s; } .icp-paywall__input::placeholder { color : var(--icp-color-placeholder); /* padrão do tema */ opacity : 1; } /* Foco/hover no estilo do tema: outline 2px roxo, offset -2px */ .icp-paywall__input:hover, .icp-paywall__input:focus, .icp-paywall__input:focus-visible { outline : 2px solid var(--icp-focus-ring); outline-offset : -2px; } .icp-paywall__btn { padding : 14px 20px; background : var(--icp-color-accent); /* roxo sólido institucional */ color : #ffffff; /* AA: branco sobre #6653ff */ border : none; border-radius : var(--icp-radius); font-size : 16px; /* AA em fundo roxo: >= 16px/bold */ font-weight : 800; /* peso forte do tema */ letter-spacing: -0.01em; cursor : pointer; transition : background-color .2s, transform .1s; } .icp-paywall__btn:hover { background: var(--icp-color-accent-hov); } .icp-paywall__btn:active { background: var(--icp-color-accent-hov); transform: translateY(1px); } .icp-paywall__btn:focus-visible { outline : 2px solid var(--icp-focus-ring); outline-offset : 2px; /* o vão de 2px separa o anel do botão roxo */ } .icp-paywall__btn:disabled { opacity : .55; cursor : not-allowed; transform : none; } .icp-paywall__error { font-size : 14px; font-weight : 600; color : var(--icp-color-error); margin : 0; min-height : 20px; /* reserva espaço — sem pulo de layout */ line-height : 1.4; } /* ── Checkbox de consentimento (LGPD) ─────────────────────────────────────── */ .icp-paywall__consent, .icp-paywall-small__consent { display : flex; align-items : flex-start; gap : 8px; font-size : 13px; /* legível em mobile; sobre o gradiente branco 13px dá 4.94:1 (AA) */ font-weight : 400; line-height : 1.45; color : var(--icp-color-muted); text-align : left; cursor : pointer; } .icp-paywall__consent input[type="checkbox"], .icp-paywall-small__consent input[type="checkbox"] { flex-shrink : 0; width : 16px; height : 16px; margin : 2px 0 0; border-radius : var(--icp-radius); /* o tema zera radius em checkboxes */ accent-color : var(--icp-color-primary); cursor : pointer; } .icp-paywall__consent input[type="checkbox"]:focus-visible, .icp-paywall-small__consent input[type="checkbox"]:focus-visible { outline : 2px solid var(--icp-focus-ring); outline-offset : 2px; } /* Na barra inferior o consentimento vive sobre o gradiente roxo */ .icp-paywall-small__consent { color : var(--icp-color-on-brand); /* AA: branco sobre o gradiente */ } .icp-paywall-small__consent input[type="checkbox"] { accent-color : #ffffff; /* caixa branca, marca escura */ } .icp-paywall-small__consent input[type="checkbox"]:focus-visible { outline-color : var(--icp-focus-ring-inv); } /* ── Popup de doação ──────────────────────────────────────────────────────── */ .icp-donation__title { font-size : 24px; font-weight : 800; letter-spacing : -0.01em; color : var(--icp-color-text); margin : 0 0 8px; line-height : 1.25; } .icp-donation__subtitle { font-size : 16px; color : var(--icp-color-muted); margin : 0 0 24px; line-height : 1.55; } .icp-donation__btn { display : inline-block; padding : 14px 24px; background : var(--icp-color-accent); color : #ffffff; /* AA: branco sobre #6653ff */ border-radius : var(--icp-radius); font-size : 16px; font-weight : 800; /* peso forte do tema */ letter-spacing : -0.01em; text-decoration: none; transition : background-color .2s, transform .1s; } .icp-donation__btn:hover { background: var(--icp-color-accent-hov); color: #ffffff; } .icp-donation__btn:active { background: var(--icp-color-accent-hov); color: #ffffff; transform: translateY(1px); } .icp-donation__btn:focus-visible { outline : 2px solid var(--icp-focus-ring); outline-offset : 2px; } /* ── Paywall pequeno / persistente (barra inferior) ───────────────────────── */ /* Gradiente institucional "e" — peça de campanha fixada no rodapé */ .icp-paywall-small { position : fixed; bottom : 0; left : 0; right : 0; z-index : var(--icp-z-small); background : var(--icp-gradient-cta); color : var(--icp-color-on-brand); border-top : 1px solid var(--icp-small-border); /* no dark separa a barra do body #111 */ box-shadow : var(--icp-shadow-small); font-family : var(--icp-font-family); /* iPhones com notch: conteúdo acima da barra de gestos */ padding-bottom : env(safe-area-inset-bottom, 0px); animation : icpSlideUp .3s ease; } /* Mobile-first: coluna empilhada (funcional até 320px) */ .icp-paywall-small__inner { position : relative; display : flex; flex-direction : column; gap : 10px; padding : 16px; padding-right : 48px; /* não colidir com o botão X */ max-width : 1200px; margin : 0 auto; } .icp-paywall-small__content { flex : 1; min-width : 0; } .icp-paywall-small__title { display : block; font-size : 16px; font-weight : 800; letter-spacing : -0.01em; color : var(--icp-color-on-brand); /* AA: branco/bold sobre roxo */ margin : 0 0 2px; line-height : 1.3; } .icp-paywall-small__subtitle { font-size : 14px; /* branco: 4.94:1 no ponto mais claro do gradiente (AA) */ color : var(--icp-color-on-brand); margin : 0; line-height : 1.45; } .icp-paywall-small__form { display : flex; flex-direction : column; gap : 8px; min-width : 0; } .icp-paywall-small__form input[type="email"] { flex : 1; min-width : 0; padding : 12px 14px; font-size : 16px; /* >= 16px: evita zoom automático no iOS */ color : #111111; /* input branco fixo sobre o gradiente (ambos os modos) */ background : #ffffff; border : none; border-radius : var(--icp-radius); } .icp-paywall-small__form input[type="email"]::placeholder { color : var(--icp-color-primary); /* placeholder roxo do tema — AA no branco */ opacity : 1; } .icp-paywall-small__form input[type="email"]:hover, .icp-paywall-small__form input[type="email"]:focus, .icp-paywall-small__form input[type="email"]:focus-visible { outline : 2px solid var(--icp-color-primary); outline-offset : -2px; } /* CTA invertido: botão branco com texto roxo bold — o roxo sólido sumiria no gradiente */ .icp-paywall-small__form button[type="submit"] { padding : 12px 18px; background : #ffffff; color : var(--icp-color-primary); /* AA: #6653ff sobre branco (4.9:1), 16px/bold */ border : none; border-radius : var(--icp-radius); font-size : 16px; font-weight : 800; /* peso forte do tema */ letter-spacing: -0.01em; cursor : pointer; white-space : nowrap; transition : background-color .2s, color .2s, transform .1s; } .icp-paywall-small__form button[type="submit"]:hover, .icp-paywall-small__form button[type="submit"]:active { background : #111111; /* flip institucional preto/branco */ color : #ffffff; } .icp-paywall-small__form button[type="submit"]:active { transform: translateY(1px); } .icp-paywall-small__form button[type="submit"]:focus-visible { outline : 2px solid var(--icp-focus-ring-inv); outline-offset : 2px; } .icp-paywall-small__form button[type="submit"]:disabled { opacity : .55; cursor : not-allowed; transform : none; } .icp-paywall-small__close { position : absolute; top : 10px; right : 8px; background : transparent; border : none; border-radius : var(--icp-radius); font-family : system-ui, sans-serif; /* fonte do tema inclina o glifo ✕ */ font-style : normal; font-size : 18px; cursor : pointer; color : var(--icp-color-on-brand); padding : 8px 10px; /* área de toque confortável */ line-height : 1; opacity : .8; transition : opacity .2s; } .icp-paywall-small__close:hover, .icp-paywall-small__close:active { opacity: 1; } .icp-paywall-small__close:focus-visible { outline : 2px solid var(--icp-focus-ring-inv); outline-offset : 2px; opacity : 1; } /* ── Animações ────────────────────────────────────────────────────────────── */ @keyframes icpFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes icpScaleIn { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes icpSlideDown{ from { transform: translateY(-100%); } to { transform: translateY(0); } } @keyframes icpSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } /* ── Movimento reduzido (acessibilidade) ──────────────────────────────────── */ /* !important garante a anulação mesmo contra seletores compostos de maior especificidade (ex.: .icp-paywall-small__form button[type="submit"]). */ @media (prefers-reduced-motion: reduce) { .icp-banner, .icp-overlay, .icp-modal, .icp-paywall-small { animation : none !important; } .icp-banner, .icp-modal, .icp-paywall-small, .icp-banner *, .icp-modal *, .icp-paywall-small *, .icp-donation__btn, .icp-paywall__btn, .icp-paywall__input, .icp-paywall-small__form input[type="email"], .icp-paywall-small__form button[type="submit"] { transition : none !important; } .icp-paywall__btn:active, .icp-donation__btn:active, .icp-paywall-small__form button[type="submit"]:active { transform : none !important; } } /* ── Responsivo (mobile-first) ────────────────────────────────────────────── */ /* Telas médias+: modal mais respirado */ @media (min-width: 600px) { .icp-overlay { padding: 20px; } .icp-modal { padding: 40px 36px; } .icp-paywall__title, .icp-donation__title { font-size: 26px; } } /* Telas largas: barra inferior vira linha única (texto | form | X) */ @media (min-width: 760px) { .icp-paywall-small__inner { flex-direction : row; align-items : center; flex-wrap : wrap; gap : 16px; padding : 14px 24px; padding-right : 56px; } .icp-paywall-small__content { min-width : 200px; } .icp-paywall-small__form { flex-direction : row; flex-wrap : wrap; align-items : center; flex : 2; min-width : 300px; } .icp-paywall-small__form input[type="email"] { flex : 1 1 220px; } /* Consentimento ocupa a linha inteira abaixo do input + botão */ .icp-paywall-small__consent { flex-basis : 100%; order : 3; } }