/* Theme Name: Flagee Varejo Theme URI: https://flageevarejo.com.br Description: Tema institucional e editorial do Flagee Varejo — Inteligência Operacional para o Varejo Real. Baseado no design "Retail Intelligence System" (Stitch). Tema clássico standalone com Landing Page, portal BIP do Varejo, categorias e artigos. Author: Flagee Version: 3.0 Requires at least: 6.0 Requires PHP: 7.4 Text Domain: flagee-varejo */ /* O estilo visual é gerado via Tailwind (config no header.php) + utilitários abaixo. */ /* ---- Reading progress bar ---- */ .fv-progress-bar { position: fixed; top: 0; left: 0; height: 4px; width: 0; background: #009485; z-index: 100; transition: width 0.1s ease-out; } /* ---- Reveal on scroll (fade + slide convergente) ---- */ /* Só esconde quando o JS está ativo (classe fv-js no ); sem JS, tudo visível. */ .fv-js .fv-reveal { opacity: 0; transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; } .fv-js .fv-reveal-left { transform: translateX(-56px); } .fv-js .fv-reveal-right { transform: translateX(56px); } .fv-js .fv-reveal-up { transform: translateY(48px); } .fv-js .fv-reveal.fv-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .fv-js .fv-reveal { opacity: 1 !important; transform: none !important; transition: none; } } /* ---- Dotted grid (seção Soluções / heros) ---- */ .dotted-grid { background-image: radial-gradient(circle at 1px 1px, rgba(98,250,227,.6) 1px, transparent 0); background-size: 40px 40px; } /* ---- Glass card ---- */ .glass-card { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); } .glass-card-light { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(226, 232, 240, 0.8); } .article-card-shadow { box-shadow: 0px 4px 20px rgba(0, 27, 61, 0.05); } /* ---- Material symbols (CSS oficial + anti-flash do nome do ícone) ---- */ .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; } /* ---- Step line (process flow on landing) ---- */ .step-line::after { content: ''; position: absolute; top: 24px; left: 50%; width: 100%; height: 2px; background: repeating-linear-gradient(to right, #c4c6cf 0, #c4c6cf 4px, transparent 4px, transparent 8px); z-index: 0; } @media (max-width: 768px) { .step-line::after { display: none; } } /* ---- Article (post content) typography ---- */ .article-content > h2 { margin-top: 2.5rem; margin-bottom: 1rem; font-family: 'Hanken Grotesk', sans-serif; font-size: 1.75rem; font-weight: 700; color: #001b3d; } .article-content > h3 { margin-top: 2rem; margin-bottom: 0.75rem; font-family: 'Hanken Grotesk', sans-serif; font-size: 1.5rem; font-weight: 700; color: #001b3d; } .article-content p { margin-bottom: 1.5rem; line-height: 1.8; font-size: 1.125rem; color: #44474e; } .article-content ul, .article-content ol { margin: 0 0 1.5rem 1.25rem; line-height: 1.8; font-size: 1.125rem; color: #44474e; } .article-content ul { list-style: disc; } .article-content ol { list-style: decimal; } .article-content li { margin-bottom: 0.5rem; } .article-content a { color: #0051d5; text-decoration: underline; } .article-content img { border-radius: 0.75rem; max-width: 100%; height: auto; margin: 1.5rem 0; } .article-content blockquote { border-left: 4px solid #2563eb; padding-left: 1.5rem; font-style: italic; margin: 2rem 0; color: #001b3d; } .article-content figure { margin: 1.5rem 0; } .article-content figcaption { font-size: 0.875rem; color: #74777f; text-align: center; margin-top: 0.5rem; } /* ---- Mobile nav ---- */ #fv-mobile-menu { display: none; } #fv-mobile-menu.open { display: block; } /* ---- WP core alignments inside content ---- */ .article-content .aligncenter { margin-left: auto; margin-right: auto; display: block; } .article-content .alignright { float: right; margin: 0 0 1rem 1.5rem; } .article-content .alignleft { float: left; margin: 0 1.5rem 1rem 0; } .aligncenter { text-align: center; } /* ---- Nav menu (generated by wp_nav_menu) ---- */ .fv-nav ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; align-items: center; } .fv-nav a { font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1; letter-spacing: 0.1em; font-weight: 700; text-transform: uppercase; color: #44474e; text-decoration: none; transition: color .2s; } .fv-nav a:hover { color: #0051d5; } .fv-nav .current-menu-item > a, .fv-nav .current_page_item > a { color: #0051d5; border-bottom: 2px solid #0051d5; padding-bottom: 4px; } .fv-footer-menu ul { list-style: none; margin: 0; padding: 0; } .fv-footer-menu li { margin-bottom: 1rem; } .fv-footer-menu a { color: #6f84ac; text-decoration: none; transition: color .2s; } .fv-footer-menu a:hover { color: #62fae3; } /* ---- Pagination ---- */ .pagination, .nav-links { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; align-items: center; } .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 .75rem; border: 1px solid #c4c6cf; border-radius: .5rem; font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: #44474e; background: #ffffff; text-decoration: none; transition: all .2s; } .page-numbers:hover { background: #dce9ff; } .page-numbers.current { background: #0051d5; color: #fff; border-color: #0051d5; } .page-numbers.dots { border: none; background: transparent; }