/* ═════════════════════════════════════════════════════════════════════════════ */ /* PAGE CLASSES — CLASSIFICAÇÃO DE PÁGINAS */ /* Sistema de classes para categorizar tipos de página */ /* ═════════════════════════════════════════════════════════════════════════════ */ /** * USO: * → Landing pages, apresentação * → Dashboard, admin, sistema * → Login, registro, recuperação de senha * → Ferramentas jurídicas (calculadora, etc.) * → Hub central de navegação */ /* ═════════════════════════════════════════════════════════════════════════════ */ /* BASE RESPONSIVA GLOBAL — TODAS AS PÁGINAS */ /* ═════════════════════════════════════════════════════════════════════════════ */ html, body { width: 100%; max-width: 100%; min-width: 0; overflow-x: clip; } *, *::before, *::after { box-sizing: border-box; } img, svg, canvas, video, iframe { max-width: 100%; } main, section, article, aside, header, footer, .container, .content, .main-content, .page-content, .hero, .dashboard, .layout, .grid, .cards, .card, .panel, .toolbar, .form-container { min-width: 0; } .container, .main-content, .page-content { width: min(var(--page-max-width, 1200px), calc(100vw - 2rem)); margin-inline: auto; } .card, .panel, .form-container, .calculator, .result, .tool-card, .feature-card, .access-card { max-width: 100%; overflow-wrap: anywhere; } .btn, button, input, select, textarea { max-width: 100%; } .btn, button { min-width: 0; white-space: normal; text-align: center; overflow-wrap: anywhere; } input, select, textarea { min-width: 0; } table { max-width: 100%; } .table-wrapper, .data-table-wrapper, .overflow-table { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .grid, .cards, .tools-grid, .features-grid, .dashboard-grid, .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .toolbar, .actions, .button-row, .auth-buttons, .cta-buttons, .filters { display: flex; flex-wrap: wrap; gap: 0.75rem; } @media (max-width: 768px) { .container, .main-content, .page-content { width: min(100%, calc(100vw - 1.25rem)); } .page-marketing .hero, .page-dashboard .main-content, .page-juridica .calculator, .page-hub .hub-container, .page-auth .form-container { width: 100%; max-width: 100%; padding-inline: clamp(1rem, 5vw, 1.25rem); } .page-marketing h1, .page-juridica h1, .page-dashboard h1, .page-auth h1 { font-size: clamp(1.55rem, 8vw, 2rem); line-height: 1.15; letter-spacing: 0; } .btn, button[type="submit"], .auth-buttons .btn, .cta-buttons .btn { width: 100%; min-height: 46px; } .toolbar, .actions, .button-row, .auth-buttons, .cta-buttons, .filters { flex-direction: column; align-items: stretch; } } /* ═════════════════════════════════════════════════════════════════════════════ */ /* PÁGINA DE MARKETING (Landing pages) */ /* ═════════════════════════════════════════════════════════════════════════════ */ .page-marketing { --page-bg: #ffffff; --page-accent: #3caa6e; --page-text: #1f2937; --page-heading-size: 2.5rem; --page-line-height: 1.75; --page-max-width: 1200px; } .page-marketing body { background: var(--page-bg); color: var(--page-text); font-family: Verdana, sans-serif; letter-spacing: 1pt; line-height: var(--page-line-height); } .page-marketing h1 { font-size: var(--page-heading-size); color: var(--page-accent); margin-bottom: 2rem; font-weight: 700; letter-spacing: 1pt; } .page-marketing h2 { font-size: 2rem; margin-bottom: 1.5rem; font-weight: 600; letter-spacing: 1pt; } .page-marketing .btn { background: linear-gradient(135deg, var(--page-accent) 0%, #2d8659 100%); color: white; border-radius: 12px; padding: 1rem 2rem; font-weight: 600; letter-spacing: 1pt; } .page-marketing .hero { padding: 4rem 2rem; text-align: center; max-width: var(--page-max-width); margin: 0 auto; } /* Dark mode */ [data-theme="dark"] .page-marketing { --page-bg: #111b3c; --page-text: #e8ecf1; --page-accent: #34d399; } [data-theme="dark"] .page-marketing body { background: var(--page-bg); color: var(--page-text); } /* ═════════════════════════════════════════════════════════════════════════════ */ /* PÁGINA DE DASHBOARD (Sistemas internos) */ /* ═════════════════════════════════════════════════════════════════════════════ */ .page-dashboard { --page-bg: #f9fafb; --page-sidebar-bg: #ffffff; --page-accent: #0693e3; --page-text: #1f2937; --page-border: #e5e7eb; } .page-dashboard body { background: var(--page-bg); color: var(--page-text); font-family: Verdana, sans-serif; letter-spacing: 1pt; } .page-dashboard .sidebar { background: var(--page-sidebar-bg); border-right: 1px solid var(--page-border); padding: 2rem 1rem; } .page-dashboard .main-content { padding: 2rem; max-width: 1400px; } .page-dashboard .card { background: var(--page-sidebar-bg); border: 1px solid var(--page-border); border-radius: 8px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .page-dashboard h1 { font-size: 1.75rem; color: var(--page-accent); font-weight: 700; letter-spacing: 1pt; } /* Dark mode */ [data-theme="dark"] .page-dashboard { --page-bg: #0f1729; --page-sidebar-bg: #111b3c; --page-accent: #34d399; --page-text: #e8ecf1; --page-border: rgba(148, 163, 184, 0.1); } /* ═════════════════════════════════════════════════════════════════════════════ */ /* PÁGINA DE AUTENTICAÇÃO (Login, Register) */ /* ═════════════════════════════════════════════════════════════════════════════ */ .page-auth { --page-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --page-form-bg: #ffffff; --page-text: #1f2937; --page-accent: #667eea; } .page-auth body { background: var(--page-bg); min-height: 100vh; display: flex; align-items: center; justify-content: center; font-family: Verdana, sans-serif; letter-spacing: 1pt; } .page-auth .form-container { background: var(--page-form-bg); border-radius: 12px; padding: 3rem 2rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); max-width: 500px; width: 95%; } .page-auth h1 { font-size: 2rem; color: var(--page-accent); text-align: center; margin-bottom: 2rem; letter-spacing: 1pt; } .page-auth .form-group { margin-bottom: 1.5rem; } .page-auth label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--page-text); letter-spacing: 1pt; } .page-auth input { width: 100%; padding: 0.75rem; border: 1px solid #e5e7eb; border-radius: 6px; font-family: Verdana, sans-serif; letter-spacing: 1pt; } .page-auth .btn { width: 100%; background: var(--page-accent); color: white; border-radius: 6px; padding: 0.75rem; font-weight: 600; letter-spacing: 1pt; } /* Dark mode */ [data-theme="dark"] .page-auth { --page-form-bg: #111b3c; --page-text: #e8ecf1; } /* ═════════════════════════════════════════════════════════════════════════════ */ /* PÁGINA JURÍDICA (Calculadora, Previdenciário) */ /* ═════════════════════════════════════════════════════════════════════════════ */ .page-juridica { --page-bg: #f9fafb; --page-accent: #9b51e0; --page-text: #1f2937; --page-border: #e5e7eb; } .page-juridica body { background: var(--page-bg); color: var(--page-text); font-family: Verdana, sans-serif; letter-spacing: 1pt; line-height: 1.6; } .page-juridica h1 { font-size: 2rem; color: var(--page-accent); font-weight: 700; letter-spacing: 1pt; margin-bottom: 1.5rem; } .page-juridica .calculator { background: white; border: 1px solid var(--page-border); border-radius: 8px; padding: 2rem; max-width: 900px; margin: 2rem auto; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .page-juridica .result { background: rgba(155, 81, 224, 0.1); border-left: 4px solid var(--page-accent); padding: 1.5rem; margin-top: 2rem; border-radius: 4px; } .page-juridica .btn { background: linear-gradient(135deg, var(--page-accent) 0%, #7c3aed 100%); color: white; border-radius: 6px; padding: 0.75rem 1.5rem; font-weight: 600; letter-spacing: 1pt; } /* Dark mode */ [data-theme="dark"] .page-juridica { --page-bg: #0f1729; --page-accent: #d8b4fe; --page-text: #e8ecf1; } /* ═════════════════════════════════════════════════════════════════════════════ */ /* PÁGINA HUB (Centro de navegação central) */ /* ═════════════════════════════════════════════════════════════════════════════ */ .page-hub { --page-bg: #ffffff; --page-accent: #3caa6e; --page-text: #1f2937; } .page-hub body { background: var(--page-bg); color: var(--page-text); font-family: Verdana, sans-serif; letter-spacing: 1pt; } .page-hub .hub-container { max-width: 1200px; margin: 0 auto; padding: 3rem 2rem; } .page-hub h1 { font-size: 3rem; color: var(--page-accent); text-align: center; margin-bottom: 3rem; font-weight: 700; letter-spacing: 1pt; } .page-hub .hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-bottom: 2rem; } .page-hub .hub-card { background: #f9fafb; border: 2px solid var(--page-accent); border-radius: 12px; padding: 2rem; text-align: center; transition: all 0.3s ease; text-decoration: none; color: inherit; } .page-hub .hub-card:hover { transform: translateY(-8px); box-shadow: 0 12px 24px rgba(60, 170, 110, 0.2); border-color: #2d8659; } .page-hub .hub-card h3 { color: var(--page-accent); margin-bottom: 1rem; font-size: 1.5rem; letter-spacing: 1pt; } .page-hub .hub-card p { color: #6b7280; line-height: 1.6; } .page-hub .hub-card .icon { font-size: 3rem; margin-bottom: 1rem; } /* Dark mode */ [data-theme="dark"] .page-hub { --page-bg: #111b3c; --page-accent: #34d399; --page-text: #e8ecf1; } [data-theme="dark"] .page-hub .hub-card { background: #0f1729; border-color: var(--page-accent); } [data-theme="dark"] .page-hub .hub-card p { color: #a0aec0; } /* ═════════════════════════════════════════════════════════════════════════════ */ /* RESPONSIVIDADE */ /* ═════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .page-marketing h1 { font-size: 1.75rem; } .page-dashboard .main-content { padding: 1rem; } .page-auth .form-container { padding: 2rem 1rem; } .page-hub .hub-grid { grid-template-columns: 1fr; } .page-hub h1 { font-size: 2rem; } } /* ═════════════════════════════════════════════════════════════════════════════ */ /* ACESSIBILIDADE */ /* ═════════════════════════════════════════════════════════════════════════════ */ .page-marketing .btn:focus-visible, .page-dashboard .btn:focus-visible, .page-auth .btn:focus-visible, .page-juridica .btn:focus-visible, .page-hub .hub-card:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }