/* ================================================================== * * Estilos personalizados — texturas rústicas, revelações e detalhes * * Complementa o app.css gerado pelo Tailwind. * * ================================================================== */ /* Textura de papel/aquarela sutil (SVG embutido, sem imagens externas) */ .texture-paper { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); } /* Textura de papel mais marcada para seções claras */ .texture-paper-strong { position: relative; } .texture-paper-strong::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 20% 30%, rgba(166, 75, 42, 0.05) 0, transparent 45%), radial-gradient(circle at 80% 70%, rgba(0, 85, 85, 0.05) 0, transparent 45%); } /* Animação de revelação ao rolar */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; transition-delay: var(--d, 0ms); will-change: opacity, transform; } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } /* Respeita quem prefere menos movimento */ @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; } html { scroll-behavior: auto; } .animate-steam, .animate-fade-up { animation: none !important; } } /* Linha do tempo em formato de TRILHO DE TREM (dois trilhos + dormentes) */ .trilho::before { content: ""; position: absolute; top: 0; bottom: 0; left: 1.6rem; width: 26px; transform: translateX(-50%); background-image: linear-gradient(#a97c40, #7a5628), /* trilho esquerdo */ linear-gradient(#a97c40, #7a5628), /* trilho direito */ repeating-linear-gradient(to bottom, #4a3620 0 6px, transparent 6px 24px); /* dormentes */ background-size: 3px 100%, 3px 100%, 100% 100%; background-position: left 3px top, right 3px top, center top; background-repeat: no-repeat, no-repeat, repeat; opacity: 0.9; } @media (min-width: 768px) { .trilho::before { left: 50%; } } /* Estação (nó) assentada sobre o trilho */ .estacao-no { filter: drop-shadow(0 8px 10px rgba(36, 27, 18, 0.35)); } /* Melhora leitura de textos longos */ .prose-rustic { font-size: 1.05rem; } /* Bloco de anúncio (AdSense) — centralizado e sem "pulo" de layout */ .anuncio { min-height: 90px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .anuncio ins { margin-inline: auto; } /* Barra de rolagem temática (navegadores WebKit) */ ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: #F4ECD8; } ::-webkit-scrollbar-thumb { background: #8C3B2B; border-radius: 6px; border: 3px solid #F4ECD8; } ::-webkit-scrollbar-thumb:hover { background: #550000; } /* ================================================================== * * SISTEMA DE ACESSIBILIDADE (portado do painel de referência) * * Classes aplicadas em pelo assets/js/accessibility.js * * ================================================================== */ /* ---- Alto contraste (preto / branco / amarelo) ---- */ html.high-contrast, html.high-contrast body { background: #000 !important; color: #fff !important; } html.high-contrast [class*="bg-"] { background-color: #000 !important; background-image: none !important; } html.high-contrast section, html.high-contrast header, html.high-contrast footer, html.high-contrast nav, html.high-contrast article, html.high-contrast aside, html.high-contrast .card { background: #000 !important; border-color: #fff !important; } html.high-contrast *:not(svg):not(path):not(rect):not(circle):not(line):not(polygon):not(text) { color: #fff !important; border-color: #8a8a8a !important; text-shadow: none !important; } html.high-contrast a, html.high-contrast .text-milho, html.high-contrast .text-terra, html.high-contrast .kicker, html.high-contrast .text-gilt { color: #ffff00 !important; -webkit-text-fill-color: #ffff00 !important; background: transparent !important; } html.high-contrast a { text-decoration: underline !important; text-underline-offset: 2px; } html.high-contrast .btn, html.high-contrast button:not([data-a11y-switch]) { background: #000 !important; color: #ffff00 !important; border: 2px solid #ffff00 !important; } html.high-contrast svg { color: #ffff00 !important; } html.high-contrast .texture-paper { opacity: 0 !important; } html.high-contrast #a11y-fab { border: 2px solid #ffff00 !important; } html.high-contrast :focus-visible { outline-color: #ffff00 !important; } /* ---- Escala de cinza ---- */ html.grayscale-mode { filter: grayscale(100%); } /* ---- Destacar links ---- */ html.highlight-links a:not([class*="btn"]):not([role="button"]) { background-color: #ffe58a !important; color: #241b12 !important; padding: 2px 4px !important; border-radius: 2px !important; text-decoration: underline !important; text-underline-offset: 2px !important; } /* ---- Cursor grande ---- */ html.big-cursor, html.big-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1' d='M5 3l14 9-8 2-2 8z'/%3E%3C/svg%3E") 0 0, auto !important; } html.big-cursor a, html.big-cursor button, html.big-cursor [role="button"], html.big-cursor input, html.big-cursor textarea, html.big-cursor select { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1' d='M12 6v12M6 12h12'/%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E") 24 24, pointer !important; } /* ---- Espaçamento de texto ---- */ html.text-spacing { letter-spacing: 0.12em !important; word-spacing: 0.16em !important; } html.text-spacing p, html.text-spacing li, html.text-spacing span, html.text-spacing div { line-height: 2 !important; } /* ---- Pausar animações ---- */ html.pause-animations, html.pause-animations *, html.pause-animations *::before, html.pause-animations *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* ---- Fonte para dislexia ---- */ html.dyslexia-font, html.dyslexia-font * { font-family: 'OpenDyslexic', 'Comic Sans MS', 'Trebuchet MS', Arial, sans-serif !important; } /* ---- Foco visível reforçado ---- */ :focus-visible { outline: 3px solid #550000 !important; outline-offset: 2px !important; } /* ---- Guia de leitura ---- */ #a11y-reading-guide { position: fixed; left: 0; right: 0; height: 3rem; background: rgba(224, 168, 46, 0.22); border-top: 1px solid rgba(224, 168, 46, 0.6); border-bottom: 1px solid rgba(224, 168, 46, 0.6); pointer-events: none; z-index: 9998; display: none; } /* Barra de rolagem discreta do painel de acessibilidade (fica dentro dos cantos arredondados graças ao overflow-hidden do painel). */ .a11y-scroll { scrollbar-width: thin; scrollbar-color: rgba(85, 0, 0, 0.35) transparent; } .a11y-scroll::-webkit-scrollbar { width: 8px; } .a11y-scroll::-webkit-scrollbar-track { background: transparent; border: none; } .a11y-scroll::-webkit-scrollbar-thumb { background: rgba(85, 0, 0, 0.35); border-radius: 9999px; border: 2px solid transparent; background-clip: content-box; } .a11y-scroll::-webkit-scrollbar-thumb:hover { background: rgba(85, 0, 0, 0.55); background-clip: content-box; }